apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Jaeger: Remove advanced options toggle & show advanced options by default (#53774)

Browse Source 
Jaeger: Remove advanced options toggle & show advanced options by default
Jaeger: Make the width of all labels in the search form the same
Jaeger: Fix typo in the tooltip for the "Limit" field
Chore: Re-add durationPlaceholder constant
pull/53430/head
Hamas Shafiq 3 years ago committed by GitHub
parent e3501dfa4d
commit 860fd83ab4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 133 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 131
      public/app/plugins/datasource/jaeger/components/AdvancedOptions.tsx
  2. 51
      public/app/plugins/datasource/jaeger/components/SearchForm.tsx

131
public/app/plugins/datasource/jaeger/components/AdvancedOptions.tsx
Unescape View File

@ -1,131 +0,0 @@
import { css } from '@emotion/css';
import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import { GrafanaTheme } from '@grafana/data';
import { Icon, InlineField, InlineFieldRow, InlineLabel, Input, useStyles } from '@grafana/ui';
import { JaegerQuery } from '../types';
const durationPlaceholder = 'e.g. 1.2s, 100ms, 500us';
type Props = {
query: JaegerQuery;
onChange: (value: JaegerQuery) => void;
};
export function AdvancedOptions({ query, onChange }: Props) {
const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
const styles = useStyles(getStyles);
return (
<div>
<InlineFieldRow>
<div className={styles.advancedOptionsContainer} onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}>
<InlineLabel as="div">
Advanced options{' '}
<Icon className={showAdvancedOptions ? styles.angleUp : styles.angleDown} name="angle-down" />
</InlineLabel>
</div>
</InlineFieldRow>
<CSSTransition
in={showAdvancedOptions}
mountOnEnter={true}
unmountOnExit={true}
timeout={300}
classNames={styles}
>
<div>
<InlineFieldRow>
<InlineField label="Min Duration" labelWidth={21} grow>
<Input
id="minDuration"
name="minDuration"
value={query.minDuration || ''}
placeholder={durationPlaceholder}
onChange={(v) =>
onChange({
...query,
minDuration: v.currentTarget.value,
})
}
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label="Max Duration" labelWidth={21} grow>
<Input
id="maxDuration"
name="maxDuration"
value={query.maxDuration || ''}
placeholder={durationPlaceholder}
onChange={(v) =>
onChange({
...query,
maxDuration: v.currentTarget.value,
})
}
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label="Limit" labelWidth={21} grow tooltip="Maximum numbers of returned results">
<Input
id="limit"
name="limit"
value={query.limit || ''}
type="number"
onChange={(v) =>
onChange({
...query,
limit: v.currentTarget.value ? parseInt(v.currentTarget.value, 10) : undefined,
})
}
/>
</InlineField>
</InlineFieldRow>
</div>
</CSSTransition>
</div>
);
}
function getStyles(theme: GrafanaTheme) {
return {
advancedOptionsContainer: css`
margin: 0 ${theme.spacing.xs} ${theme.spacing.xs} 0;
width: 100%;
cursor: pointer;
`,
enter: css`
label: enter;
height: 0;
opacity: 0;
`,
enterActive: css`
label: enterActive;
height: 108px;
opacity: 1;
transition: height 300ms ease, opacity 300ms ease;
`,
exit: css`
label: exit;
height: 108px;
opacity: 1;
`,
exitActive: css`
label: exitActive;
height: 0;
opacity: 0;
transition: height 300ms ease, opacity 300ms ease;
`,
angleUp: css`
transform: rotate(-180deg);
transition: transform 300ms;
`,
angleDown: css`
transform: rotate(0deg);
transition: transform 300ms;
`,
};
}

51
public/app/plugins/datasource/jaeger/components/SearchForm.tsx
Unescape View File

@ -12,7 +12,7 @@ import { JaegerDatasource } from '../datasource';
import { JaegerQuery } from '../types';
import { transformToLogfmt } from '../util';
import { AdvancedOptions } from './AdvancedOptions';
const durationPlaceholder = 'e.g. 1.2s, 100ms, 500us';
type Props = {
datasource: JaegerDatasource;
@ -158,7 +158,54 @@ export function SearchForm({ datasource, query, onChange }: Props) {
/>
</InlineField>
</InlineFieldRow>
<AdvancedOptions query={query} onChange={onChange} />
<InlineFieldRow>
<InlineField label="Min Duration" labelWidth={14} grow>
<Input
id="minDuration"
name="minDuration"
value={query.minDuration || ''}
placeholder={durationPlaceholder}
onChange={(v) =>
onChange({
...query,
minDuration: v.currentTarget.value,
})
}
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label="Max Duration" labelWidth={14} grow>
<Input
id="maxDuration"
name="maxDuration"
value={query.maxDuration || ''}
placeholder={durationPlaceholder}
onChange={(v) =>
onChange({
...query,
maxDuration: v.currentTarget.value,
})
}
/>
</InlineField>
</InlineFieldRow>
<InlineFieldRow>
<InlineField label="Limit" labelWidth={14} grow tooltip="Maximum number of returned results">
<Input
id="limit"
name="limit"
value={query.limit || ''}
type="number"
onChange={(v) =>
onChange({
...query,
limit: v.currentTarget.value ? parseInt(v.currentTarget.value, 10) : undefined,
})
}
/>
</InlineField>
</InlineFieldRow>
</div>
);
}

Write Preview
Loading…
Cancel
Save