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

Tempo: Add separate options groups (#99310)

Browse Source 
* Separate options groups

* Editor row for styling
This commit is contained in:
Joey 2025-01-28 08:20:23 +00:00 committed by GitHub
parent 4e703576b0
commit acbdc1f415
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
public/app/plugins/datasource/tempo/traceql/TempoQueryBuilderOptions.tsx
View File

@ -1,7 +1,9 @@
import { css } from '@emotion/css';
import * as React from 'react'; import * as React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { EditorField, EditorRow } from '@grafana/experimental'; import { EditorField, EditorRow } from '@grafana/experimental';
import { AutoSizeInput, RadioButtonGroup } from '@grafana/ui'; import { AutoSizeInput, RadioButtonGroup, useStyles2 } from '@grafana/ui';
import { QueryOptionGroup } from '../_importedDependencies/datasources/prometheus/QueryOptionGroup'; import { QueryOptionGroup } from '../_importedDependencies/datasources/prometheus/QueryOptionGroup';
import { SearchTableType } from '../dataquery.gen'; import { SearchTableType } from '../dataquery.gen';
@ -28,6 +30,8 @@ const parseIntWithFallback = (val: string, fallback: number) => {
}; };
export const TempoQueryBuilderOptions = React.memo<Props>(({ onChange, query, isStreaming }) => { export const TempoQueryBuilderOptions = React.memo<Props>(({ onChange, query, isStreaming }) => {
const styles = useStyles2(getStyles);
if (!query.hasOwnProperty('limit')) { if (!query.hasOwnProperty('limit')) {
query.limit = DEFAULT_LIMIT; query.limit = DEFAULT_LIMIT;
} }
@ -60,21 +64,23 @@ export const TempoQueryBuilderOptions = React.memo<Props>(({ onChange, query, is
// } // }
// }; // };
const collapsedInfoList = [ const collapsedSearchOptions = [
`Limit: ${query.limit || DEFAULT_LIMIT}`, `Limit: ${query.limit || DEFAULT_LIMIT}`,
`Spans Limit: ${query.spss || DEFAULT_SPSS}`, `Spans Limit: ${query.spss || DEFAULT_SPSS}`,
`Table Format: ${query.tableType === SearchTableType.Traces ? 'Traces' : 'Spans'}`, `Table Format: ${query.tableType === SearchTableType.Traces ? 'Traces' : 'Spans'}`,
'|', '|',
`Step: ${query.step || 'auto'}`,
// `Exemplars: ${query.exemplars !== undefined ? query.exemplars : 'auto'}`,
'|',
`Streaming: ${isStreaming ? 'Enabled' : 'Disabled'}`, `Streaming: ${isStreaming ? 'Enabled' : 'Disabled'}`,
]; ];
const collapsedMetricsOptions = [
`Step: ${query.step || 'auto'}`,
// `Exemplars: ${query.exemplars !== undefined ? query.exemplars : 'auto'}`,
];
return ( return (
<> <EditorRow>
<EditorRow> <div className={styles.options}>
<QueryOptionGroup title="Options" collapsedInfo={collapsedInfoList}> <QueryOptionGroup title="Search Options" collapsedInfo={collapsedSearchOptions}>
<EditorField label="Limit" tooltip="Maximum number of traces to return."> <EditorField label="Limit" tooltip="Maximum number of traces to return.">
<AutoSizeInput <AutoSizeInput
className="width-4" className="width-4"
@ -107,6 +113,12 @@ export const TempoQueryBuilderOptions = React.memo<Props>(({ onChange, query, is
onChange={onTableTypeChange} onChange={onTableTypeChange}
/> />
</EditorField> </EditorField>
<EditorField label="Streaming" tooltip={<StreamingTooltip />} tooltipInteractive>
<div>{isStreaming ? 'Enabled' : 'Disabled'}</div>
</EditorField>
</QueryOptionGroup>
<QueryOptionGroup title="Metrics Options" collapsedInfo={collapsedMetricsOptions}>
<EditorField <EditorField
label="Step" label="Step"
tooltip="Defines the step for metric queries. Use duration notation, for example 30s or 1m" tooltip="Defines the step for metric queries. Use duration notation, for example 30s or 1m"
@ -133,12 +145,9 @@ export const TempoQueryBuilderOptions = React.memo<Props>(({ onChange, query, is
{/* value={query.exemplars}*/} {/* value={query.exemplars}*/}
{/* />*/} {/* />*/}
{/*</EditorField>*/} {/*</EditorField>*/}
<EditorField label="Streaming" tooltip={<StreamingTooltip />} tooltipInteractive>
<div>{isStreaming ? 'Enabled' : 'Disabled'}</div>
</EditorField>
</QueryOptionGroup> </QueryOptionGroup>
</EditorRow> </div>
</> </EditorRow>
); );
}); });
@ -163,3 +172,17 @@ const StreamingTooltip = () => {
}; };
TempoQueryBuilderOptions.displayName = 'TempoQueryBuilderOptions'; TempoQueryBuilderOptions.displayName = 'TempoQueryBuilderOptions';
const getStyles = (theme: GrafanaTheme2) => {
return {
options: css({
display: 'flex',
width: '-webkit-fill-available',
gap: theme.spacing(1),
'> div': {
width: 'auto',
},
}),
};
};