From 4b496a907dba3f2b27106b93c6bddf7bc846e9a7 Mon Sep 17 00:00:00 2001 From: Domas Date: Fri, 3 May 2024 14:22:03 +0300 Subject: [PATCH] Tempo: Option to not show variable options in "search" editor (#87126) * allow disabling variable options in Tempo "search" editor * also for GroupByField * set addVariablesToOptions true by default --- .../plugins/datasource/tempo/QueryField.tsx | 6 +- .../SearchTraceQLEditor/GroupByField.test.tsx | 8 +- .../SearchTraceQLEditor/GroupByField.tsx | 108 +++++++++--------- .../SearchTraceQLEditor/SearchField.test.tsx | 1 + .../tempo/SearchTraceQLEditor/SearchField.tsx | 22 ++-- .../SearchTraceQLEditor/TagsInput.test.tsx | 1 + .../tempo/SearchTraceQLEditor/TagsInput.tsx | 3 + .../SearchTraceQLEditor/TraceQLSearch.tsx | 14 ++- 8 files changed, 97 insertions(+), 66 deletions(-) diff --git a/public/app/plugins/datasource/tempo/QueryField.tsx b/public/app/plugins/datasource/tempo/QueryField.tsx index 3196be57ba9..0884e297bd9 100644 --- a/public/app/plugins/datasource/tempo/QueryField.tsx +++ b/public/app/plugins/datasource/tempo/QueryField.tsx @@ -23,7 +23,10 @@ import { QueryEditor } from './traceql/QueryEditor'; import { TempoQuery } from './types'; import { migrateFromSearchToTraceQLSearch } from './utils'; -interface Props extends QueryEditorProps, Themeable2 {} +interface Props extends QueryEditorProps, Themeable2 { + // should template variables be added to tag options. default true + addVariablesToOptions?: boolean; +} interface State { uploadModalOpen: boolean; } @@ -154,6 +157,7 @@ class TempoQueryFieldComponent extends React.PureComponent { onBlur={this.props.onBlur} app={app} onClearResults={this.onClearResults} + addVariablesToOptions={this.props.addVariablesToOptions} /> )} {query.queryType === 'serviceMap' && ( diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.test.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.test.tsx index 303bf88837a..914289d63f9 100644 --- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.test.tsx +++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.test.tsx @@ -138,7 +138,13 @@ describe('GroupByField', () => { it('should allow selecting template variables', async () => { const { container } = render( - + ); const tagSelect = container.querySelector(`input[aria-label="Select tag for filter 1"]`); diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.tsx index bcf53682d7e..6f235c62260 100644 --- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.tsx +++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/GroupByField.tsx @@ -19,10 +19,11 @@ interface Props { onChange: (value: TempoQuery) => void; query: Partial & TempoQuery; isTagsLoading: boolean; + addVariablesToOptions?: boolean; } export const GroupByField = (props: Props) => { - const { datasource, onChange, query, isTagsLoading } = props; + const { datasource, onChange, query, isTagsLoading, addVariablesToOptions } = props; const styles = useStyles2(getStyles); const generateId = () => uuidv4().slice(0, 8); @@ -75,62 +76,63 @@ export const GroupByField = (props: Props) => { tooltip="Select one or more tags to see the metrics summary. Note: the metrics summary API only considers spans of kind = server." > <> - {query.groupBy?.map((f, i) => ( -
- - { - updateFilter({ ...f, tag: v?.value }); - }} - options={withTemplateVariableOptions( - getTags(f) - ?.concat(f.tag !== undefined && !getTags(f)?.includes(f.tag) ? [f.tag] : []) - .map((t) => ({ - label: t, - value: t, - })) - )} - placeholder="Select tag" - value={f.tag || ''} - /> - {(f.tag || (query.groupBy?.length ?? 0) > 1) && ( - removeFilter(f)} - tooltip="Remove tag" - title={`Remove tag for filter ${i + 1}`} - variant="secondary" + {query.groupBy?.map((f, i) => { + const tags = getTags(f) + ?.concat(f.tag !== undefined && !getTags(f)?.includes(f.tag) ? [f.tag] : []) + .map((t) => ({ + label: t, + value: t, + })); + return ( +
+ + { + updateFilter({ ...f, tag: v?.value }); + }} + options={addVariablesToOptions ? withTemplateVariableOptions(tags) : tags} + placeholder="Select tag" + value={f.tag || ''} + /> + {(f.tag || (query.groupBy?.length ?? 0) > 1) && ( addFilter()} - tooltip="Add tag" + aria-label={`Remove tag for filter ${i + 1}`} + icon="times" + onClick={() => removeFilter(f)} + tooltip="Remove tag" + title={`Remove tag for filter ${i + 1}`} variant="secondary" /> - - )} - -
- ))} + )} + {f.tag && i === (query.groupBy?.length ?? 0) - 1 && ( + + addFilter()} + tooltip="Add tag" + variant="secondary" + /> + + )} + +
+ ); + })} ); diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.test.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.test.tsx index 42a4935371f..dd56e52bd09 100644 --- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.test.tsx +++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.test.tsx @@ -293,6 +293,7 @@ const renderSearchField = ( tags={tags || []} hideTag={hideTag} query={'{}'} + addVariablesToOptions={true} /> ); }; diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx index d7094d3ceec..59cbb7ef57c 100644 --- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx +++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx @@ -34,6 +34,7 @@ interface Props { query: string; isMulti?: boolean; allowCustomValue?: boolean; + addVariablesToOptions?: boolean; } const SearchField = ({ filter, @@ -46,6 +47,7 @@ const SearchField = ({ hideTag, hideValue, query, + addVariablesToOptions, isMulti = true, allowCustomValue = true, }: Props) => { @@ -126,6 +128,13 @@ const SearchField = ({ operatorList = numberOperators; } + const tagOptions = (filter.tag !== undefined ? uniq([filter.tag, ...tags]) : tags).map((t) => ({ + label: t, + value: t, + })); + + const operatorOptions = operatorList.map(operatorSelectableValue); + return ( <> @@ -133,7 +142,7 @@ const SearchField = ({ { updateFilter({ ...filter, operator: v?.value }); @@ -182,7 +186,7 @@ const SearchField = ({ className={styles.dropdown} inputId={`${filter.id}-value`} isLoading={isLoadingValues} - options={withTemplateVariableOptions(options)} + options={addVariablesToOptions ? withTemplateVariableOptions(options) : options} value={filter.value} onChange={(val) => { if (Array.isArray(val)) { diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.test.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.test.tsx index 0edd42264bc..1552be76f29 100644 --- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.test.tsx +++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.test.tsx @@ -126,6 +126,7 @@ describe('TagsInput', () => { staticTags={[]} isTagsLoading={false} query={''} + addVariablesToOptions={true} /> ); }; diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.tsx index 9a877b5e5e3..5b4541960dc 100644 --- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.tsx +++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.tsx @@ -40,6 +40,7 @@ interface Props { hideValues?: boolean; requireTagAndValue?: boolean; query: string; + addVariablesToOptions?: boolean; } const TagsInput = ({ updateFilter, @@ -52,6 +53,7 @@ const TagsInput = ({ hideValues, requireTagAndValue, query, + addVariablesToOptions, }: Props) => { const styles = useStyles2(getStyles); const handleOnAdd = useCallback( @@ -88,6 +90,7 @@ const TagsInput = ({ isTagsLoading={isTagsLoading} hideValue={hideValues} query={query} + addVariablesToOptions={addVariablesToOptions} /> {(validInput(f) || filters.length > 1) && ( void; onClearResults: () => void; app?: CoreApp; + addVariablesToOptions?: boolean; } const hardCodedFilterIds = ['min-duration', 'max-duration', 'status']; -const TraceQLSearch = ({ datasource, query, onChange, onClearResults, app }: Props) => { +const TraceQLSearch = ({ datasource, query, onChange, onClearResults, app, addVariablesToOptions = true }: Props) => { const styles = useStyles2(getStyles); const [alertText, setAlertText] = useState(); const [error, setError] = useState(null); @@ -130,6 +131,7 @@ const TraceQLSearch = ({ datasource, query, onChange, onClearResults, app }: Pro hideScope={true} hideTag={true} query={traceQlQuery} + addVariablesToOptions={addVariablesToOptions} /> ) @@ -153,6 +155,7 @@ const TraceQLSearch = ({ datasource, query, onChange, onClearResults, app }: Pro query={traceQlQuery} isMulti={false} allowCustomValue={false} + addVariablesToOptions={addVariablesToOptions} /> {config.featureToggles.metricsSummary && ( - + )}