IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-07-30 00:08:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix data source picker width issue (#33720)

Browse Source 
* Fix data source picker width issue

* Use theme.spacing
This commit is contained in:
Zoltán Bedi
2021-05-05 10:17:14 +02:00
committed by GitHub
parent b9b211b36c
commit 578a755cb4
4 changed files with 66 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
+6 -4
View File
@@ -125,14 +125,14 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
<h3 className="page-heading">HTTP</h3> <h3 className="page-heading">HTTP</h3>
<div className="gf-form-group"> <div className="gf-form-group">
<div className="gf-form"> <div className="gf-form">
<FormField label="URL" labelWidth={11} tooltip={urlTooltip} inputEl={urlInput} /> <FormField label="URL" labelWidth={13} tooltip={urlTooltip} inputEl={urlInput} />
</div> </div>
{showAccessOptions && ( {showAccessOptions && (
<> <>
<div className="gf-form-inline"> <div className="gf-form-inline">
<div className="gf-form"> <div className="gf-form">
<FormField label="Access" labelWidth={11} inputWidth={20} inputEl={accessSelect} /> <FormField label="Access" labelWidth={13} inputWidth={20} inputEl={accessSelect} />
</div> </div>
<div className="gf-form"> <div className="gf-form">
<label <label
@@ -151,13 +151,14 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
<div className="gf-form-group"> <div className="gf-form-group">
<div className="gf-form"> <div className="gf-form">
<InlineFormLabel <InlineFormLabel
width={11} width={13}
tooltip="Grafana proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source." tooltip="Grafana proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source."
> >
Whitelisted Cookies Whitelisted Cookies
</InlineFormLabel> </InlineFormLabel>
<TagsInput <TagsInput
tags={dataSourceConfig.jsonData.keepCookies} tags={dataSourceConfig.jsonData.keepCookies}
width={40}
onChange={(cookies) => onChange={(cookies) =>
onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } }) onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } })
} }
@@ -166,7 +167,8 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
<div className="gf-form"> <div className="gf-form">
<FormField <FormField
label="Timeout" label="Timeout"
labelWidth={11} labelWidth={13}
inputWidth={20}
tooltip="HTTP request timeout in seconds" tooltip="HTTP request timeout in seconds"
value={dataSourceConfig.jsonData.timeout} value={dataSourceConfig.jsonData.timeout}
onChange={(event) => { onChange={(event) => {
packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
+21 -20
View File
@@ -1,8 +1,8 @@
import React, { ChangeEvent, KeyboardEvent, FC, useState } from 'react'; import React, { ChangeEvent, KeyboardEvent, FC, useState } from 'react';
import { css } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { Button } from '../Button'; import { Button } from '../Button';
import { TagItem } from './TagItem'; import { TagItem } from './TagItem';
import { useStyles } from '../../themes/ThemeContext'; import { useStyles, useTheme2 } from '../../themes/ThemeContext';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme } from '@grafana/data';
import { Input } from '../Input/Input'; import { Input } from '../Input/Input';
@@ -10,11 +10,13 @@ export interface Props {
placeholder?: string; placeholder?: string;
tags?: string[]; tags?: string[];
onChange: (tags: string[]) => void; onChange: (tags: string[]) => void;
width?: number;
} }
export const TagsInput: FC<Props> = ({ placeholder = 'New tag (enter key to add)', tags = [], onChange }) => { export const TagsInput: FC<Props> = ({ placeholder = 'New tag (enter key to add)', tags = [], onChange, width }) => {
const [newTagName, setNewName] = useState(''); const [newTagName, setNewName] = useState('');
const styles = useStyles(getStyles); const styles = useStyles(getStyles);
const theme = useTheme2();
const onNameChange = (event: ChangeEvent<HTMLInputElement>) => { const onNameChange = (event: ChangeEvent<HTMLInputElement>) => {
setNewName(event.target.value); setNewName(event.target.value);
@@ -39,27 +41,26 @@ export const TagsInput: FC<Props> = ({ placeholder = 'New tag (enter key to add)
}; };
return ( return (
<div className={styles.wrapper}> <div className={cx(styles.wrapper, width ? css({ width: theme.spacing(width) }) : '')}>
<div className={styles.tags}> <div className={tags?.length ? styles.tags : undefined}>
{tags?.map((tag: string, index: number) => { {tags?.map((tag: string, index: number) => {
return <TagItem key={`${tag}-${index}`} name={tag} onRemove={onRemove} />; return <TagItem key={`${tag}-${index}`} name={tag} onRemove={onRemove} />;
})} })}
</div> </div>
<div>
<Input <Input
placeholder={placeholder} placeholder={placeholder}
onChange={onNameChange} onChange={onNameChange}
value={newTagName} value={newTagName}
onKeyUp={onKeyboardAdd} onKeyUp={onKeyboardAdd}
suffix={ suffix={
newTagName.length > 0 && ( newTagName.length > 0 && (
<Button fill="text" className={styles.addButtonStyle} onClick={onAdd} size="md"> <Button fill="text" className={styles.addButtonStyle} onClick={onAdd} size="md">
Add Add
</Button> </Button>
) )
} }
/> />
</div>
</div> </div>
); );
}; };
public/app/core/components/TraceToLogsSettings.tsx
+38 -32
View File
@@ -1,3 +1,4 @@
import { css } from '@emotion/css';
import { import {
DataSourceJsonData, DataSourceJsonData,
DataSourcePluginOptionsEditorProps, DataSourcePluginOptionsEditorProps,
@@ -5,8 +6,7 @@ import {
updateDatasourcePluginJsonDataOption, updateDatasourcePluginJsonDataOption,
} from '@grafana/data'; } from '@grafana/data';
import { DataSourcePicker } from '@grafana/runtime'; import { DataSourcePicker } from '@grafana/runtime';
import { InlineFormLabel, TagsInput, useStyles } from '@grafana/ui'; import { InlineField, InlineFieldRow, TagsInput, useStyles } from '@grafana/ui';
import { css } from '@emotion/css';
import React from 'react'; import React from 'react';
export interface TraceToLogsOptions { export interface TraceToLogsOptions {
@@ -24,43 +24,49 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
const styles = useStyles(getStyles); const styles = useStyles(getStyles);
return ( return (
<> <div className={css({ width: '100%' })}>
<h3 className="page-heading">Trace to logs</h3> <h3 className="page-heading">Trace to logs</h3>
<div className={styles.infoText}> <div className={styles.infoText}>
Trace to logs let&apos;s you navigate from a trace span to the selected data source&apos;s log. Trace to logs let&apos;s you navigate from a trace span to the selected data source&apos;s log.
</div> </div>
<div className="gf-form"> <InlineFieldRow>
<InlineFormLabel tooltip="The data source the trace is going to navigate to">Data source</InlineFormLabel> <InlineField tooltip="The data source the trace is going to navigate to" label="Data source" labelWidth={26}>
<DataSourcePicker <DataSourcePicker
pluginId="loki" pluginId="loki"
current={options.jsonData.tracesToLogs?.datasourceUid} current={options.jsonData.tracesToLogs?.datasourceUid}
noDefault={true} noDefault={true}
onChange={(ds) => width={40}
updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', { onChange={(ds) =>
datasourceUid: ds.uid, updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', {
tags: options.jsonData.tracesToLogs?.tags, datasourceUid: ds.uid,
}) tags: options.jsonData.tracesToLogs?.tags,
} })
/> }
</div> />
</InlineField>
</InlineFieldRow>
<div className="gf-form"> <InlineFieldRow>
<InlineFormLabel tooltip="Tags that will be used in the Loki query. Default tags: 'cluster', 'hostname', 'namespace', 'pod'"> <InlineField
Tags tooltip="Tags that will be used in the Loki query. Default tags: 'cluster', 'hostname', 'namespace', 'pod'"
</InlineFormLabel> label="Tags"
<TagsInput labelWidth={26}
tags={options.jsonData.tracesToLogs?.tags} >
onChange={(tags) => <TagsInput
updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', { tags={options.jsonData.tracesToLogs?.tags}
datasourceUid: options.jsonData.tracesToLogs?.datasourceUid, width={40}
tags: tags, onChange={(tags) =>
}) updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', {
} datasourceUid: options.jsonData.tracesToLogs?.datasourceUid,
/> tags: tags,
</div> })
</> }
/>
</InlineField>
</InlineFieldRow>
</div>
); );
} }
public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx
+1
View File
@@ -43,6 +43,7 @@ export default function ExemplarSetting({ value, onChange, onDelete }: Props) {
tracing={true} tracing={true}
current={value.datasourceUid} current={value.datasourceUid}
noDefault={true} noDefault={true}
width={40}
onChange={(ds) => onChange={(ds) =>
onChange({ onChange({
datasourceUid: ds.uid, datasourceUid: ds.uid,