IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages 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
This commit is contained in:
Hamas Shafiq 2022-08-16 18:27:43 +01:00 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 Stats Download Patch File Download Diff File Expand all files Collapse all files

131
public/app/plugins/datasource/jaeger/components/AdvancedOptions.tsx
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
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>
);
}