From 241fd69e028f922bb38de6b46dd1388304b9e62e Mon Sep 17 00:00:00 2001 From: Andre Pereira Date: Thu, 18 Dec 2025 12:38:50 +0000 Subject: [PATCH] Trace View: Correctly handle span and service name in span filters (#115215) * Correctly handle span name and service name in trace view span filters * Consistency and fix test * i18n extract --- .../SpanFilters/SpanFilters.test.tsx | 262 -------------- .../SpanFilters/SpanFilters.tsx | 319 ------------------ .../SpanFilters/SpanFiltersTags.tsx | 202 ----------- .../useTraceAdHocFiltersController.ts | 15 - .../TraceView/components/constants/span.ts | 2 + .../components/utils/filter-spans.tsx | 20 +- .../explore/TraceView/useSearch.test.ts | 14 +- .../features/explore/TraceView/useSearch.ts | 5 +- .../features/explore/TraceView/utils/tags.ts | 15 + public/locales/en-US/grafana.json | 33 -- 10 files changed, 42 insertions(+), 845 deletions(-) delete mode 100644 public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.test.tsx delete mode 100644 public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx delete mode 100644 public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFiltersTags.tsx diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.test.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.test.tsx deleted file mode 100644 index eba49425afb..00000000000 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.test.tsx +++ /dev/null @@ -1,262 +0,0 @@ -import { render, screen, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import { useState } from 'react'; - -import { DEFAULT_SPAN_FILTERS } from 'app/features/explore/state/constants'; - -import { Trace } from '../../types/trace'; - -import { SpanFilters } from './SpanFilters'; - -const trace: Trace = { - traceID: '1ed38015486087ca', - spans: [ - { - traceID: '1ed38015486087ca', - spanID: '1ed38015486087ca', - operationName: 'Span0', - tags: [{ key: 'TagKey0', type: 'string', value: 'TagValue0' }], - kind: 'server', - statusCode: 2, - statusMessage: 'message', - instrumentationLibraryName: 'name', - instrumentationLibraryVersion: 'version', - traceState: 'state', - process: { - serviceName: 'Service0', - tags: [{ key: 'ProcessKey0', type: 'string', value: 'ProcessValue0' }], - }, - logs: [{ fields: [{ key: 'LogKey0', type: 'string', value: 'LogValue0' }] }], - }, - { - traceID: '1ed38015486087ca', - spanID: '2ed38015486087ca', - operationName: 'Span1', - tags: [{ key: 'TagKey1', type: 'string', value: 'TagValue1' }], - process: { - serviceName: 'Service1', - tags: [{ key: 'ProcessKey1', type: 'string', value: 'ProcessValue1' }], - }, - logs: [{ fields: [{ key: 'LogKey1', type: 'string', value: 'LogValue1' }] }], - }, - ], - processes: { - '1ed38015486087ca': { - serviceName: 'Service0', - tags: [], - }, - }, -} as unknown as Trace; - -describe('SpanFilters', () => { - let user: ReturnType; - const SpanFiltersWithProps = ({ showFilters = true, matches }: { showFilters?: boolean; matches?: Set }) => { - const [search, setSearch] = useState(DEFAULT_SPAN_FILTERS); - const props = { - trace: trace, - showSpanFilters: showFilters, - setShowSpanFilters: jest.fn(), - search, - setSearch, - spanFilterMatches: matches, - setFocusedSpanIdForSearch: jest.fn(), - datasourceType: 'tempo', - }; - - return ; - }; - - beforeEach(() => { - jest.useFakeTimers(); - // Need to use delay: null here to work with fakeTimers - // see https://github.com/testing-library/user-event/issues/833 - user = userEvent.setup({ delay: null }); - }); - - afterEach(() => { - jest.useRealTimers(); - }); - - it('should render', () => { - expect(() => render()).not.toThrow(); - }); - - it('should render filters', async () => { - render(); - - const serviceOperator = screen.getByLabelText('Select service name operator'); - const serviceValue = screen.getByLabelText('Select service name'); - const spanOperator = screen.getByLabelText('Select span name operator'); - const spanValue = screen.getByLabelText('Select span name'); - const fromOperator = screen.getByLabelText('Select min span operator'); - const fromValue = screen.getByLabelText('Select min span duration'); - const toOperator = screen.getByLabelText('Select max span operator'); - const toValue = screen.getByLabelText('Select max span duration'); - const tagKey = screen.getByLabelText('Select tag key'); - const tagOperator = screen.getByLabelText('Select tag operator'); - const tagSelectValue = screen.getByLabelText('Select tag value'); - - expect(serviceOperator).toBeInTheDocument(); - expect(getElemText(serviceOperator)).toBe('='); - expect(serviceValue).toBeInTheDocument(); - expect(spanOperator).toBeInTheDocument(); - expect(getElemText(spanOperator)).toBe('='); - expect(spanValue).toBeInTheDocument(); - expect(fromOperator).toBeInTheDocument(); - expect(getElemText(fromOperator)).toBe('>'); - expect(fromValue).toBeInTheDocument(); - expect(toOperator).toBeInTheDocument(); - expect(getElemText(toOperator)).toBe('<'); - expect(toValue).toBeInTheDocument(); - expect(tagKey).toBeInTheDocument(); - expect(tagOperator).toBeInTheDocument(); - expect(getElemText(tagOperator)).toBe('='); - expect(tagSelectValue).toBeInTheDocument(); - - await user.click(serviceValue); - jest.advanceTimersByTime(1000); - await waitFor(() => { - expect(screen.getByText('Service0')).toBeInTheDocument(); - expect(screen.getByText('Service1')).toBeInTheDocument(); - }); - await user.click(spanValue); - jest.advanceTimersByTime(1000); - await waitFor(() => { - expect(screen.getByText('Span0')).toBeInTheDocument(); - expect(screen.getByText('Span1')).toBeInTheDocument(); - }); - await user.click(tagOperator); - jest.advanceTimersByTime(1000); - await waitFor(() => { - expect(screen.getByText('!~')).toBeInTheDocument(); - expect(screen.getByText('=~')).toBeInTheDocument(); - expect(screen.getByText('!~')).toBeInTheDocument(); - }); - await user.click(tagKey); - jest.advanceTimersByTime(1000); - await waitFor(() => { - expect(screen.getByText('TagKey0')).toBeInTheDocument(); - expect(screen.getByText('TagKey1')).toBeInTheDocument(); - expect(screen.getByText('kind')).toBeInTheDocument(); - expect(screen.getByText('ProcessKey0')).toBeInTheDocument(); - expect(screen.getByText('ProcessKey1')).toBeInTheDocument(); - expect(screen.getByText('LogKey0')).toBeInTheDocument(); - expect(screen.getByText('LogKey1')).toBeInTheDocument(); - expect(screen.getByPlaceholderText('Find...')).toBeInTheDocument(); - }); - }); - - it('should update filters', async () => { - render(); - const serviceValue = screen.getByLabelText('Select service name'); - const spanValue = screen.getByLabelText('Select span name'); - const tagKey = screen.getByLabelText('Select tag key'); - const tagOperator = screen.getByLabelText('Select tag operator'); - const tagValue = screen.getByLabelText('Select tag value'); - - expect(getElemText(serviceValue)).toBe('All service names'); - await selectAndCheckValue(user, serviceValue, 'Service0'); - expect(getElemText(spanValue)).toBe('All span names'); - await selectAndCheckValue(user, spanValue, 'Span0'); - - await user.click(tagValue); - jest.advanceTimersByTime(1000); - await waitFor(() => expect(screen.getByText('No options found')).toBeInTheDocument()); - - expect(getElemText(tagKey)).toBe('Select tag'); - await selectAndCheckValue(user, tagKey, 'TagKey0'); - expect(getElemText(tagValue)).toBe('Select value'); - await selectAndCheckValue(user, tagValue, 'TagValue0'); - expect(screen.queryByLabelText('Input tag value')).toBeNull(); - await selectAndCheckValue(user, tagOperator, '=~'); - expect(screen.getByLabelText('Input tag value')).toBeInTheDocument(); - }); - - it('should order tag filters', async () => { - render(); - const tagKey = screen.getByLabelText('Select tag key'); - - await user.click(tagKey); - jest.advanceTimersByTime(1000); - await waitFor(() => { - const container = screen.getByText('TagKey0').parentElement?.parentElement?.parentElement; - expect(container?.childNodes[1].textContent).toBe('ProcessKey0'); - expect(container?.childNodes[2].textContent).toBe('ProcessKey1'); - expect(container?.childNodes[3].textContent).toBe('TagKey0'); - expect(container?.childNodes[4].textContent).toBe('TagKey1'); - expect(container?.childNodes[5].textContent).toBe('id'); - expect(container?.childNodes[6].textContent).toBe('kind'); - expect(container?.childNodes[7].textContent).toBe('library.name'); - expect(container?.childNodes[8].textContent).toBe('library.version'); - expect(container?.childNodes[9].textContent).toBe('status'); - expect(container?.childNodes[10].textContent).toBe('status.message'); - expect(container?.childNodes[11].textContent).toBe('trace.state'); - expect(container?.childNodes[12].textContent).toBe('LogKey0'); - expect(container?.childNodes[13].textContent).toBe('LogKey1'); - }); - }); - - it('should only show add/remove tag when necessary', async () => { - render(); - expect(screen.queryAllByLabelText('Add tag').length).toBe(0); // not filled in the default tag, so no need to add another one - expect(screen.queryAllByLabelText('Remove tag').length).toBe(0); // mot filled in the default tag, so no values to remove - expect(screen.getAllByLabelText('Select tag key').length).toBe(1); - - await selectAndCheckValue(user, screen.getByLabelText('Select tag key'), 'TagKey0'); - expect(screen.getAllByLabelText('Add tag').length).toBe(1); - expect(screen.getAllByLabelText('Remove tag').length).toBe(1); - - await user.click(screen.getByLabelText('Add tag')); - jest.advanceTimersByTime(1000); - expect(screen.queryAllByLabelText('Add tag').length).toBe(0); // not filled in the new tag, so no need to add another one - expect(screen.getAllByLabelText('Remove tag').length).toBe(2); // one for each tag - expect(screen.getAllByLabelText('Select tag key').length).toBe(2); - - await user.click(screen.getAllByLabelText('Remove tag')[1]); - jest.advanceTimersByTime(1000); - expect(screen.queryAllByLabelText('Add tag').length).toBe(1); // filled in the default tag, so can add another one - expect(screen.queryAllByLabelText('Remove tag').length).toBe(1); // filled in the default tag, so can remove values - expect(screen.getAllByLabelText('Select tag key').length).toBe(1); - - await user.click(screen.getAllByLabelText('Remove tag')[0]); - jest.advanceTimersByTime(1000); - expect(screen.queryAllByLabelText('Add tag').length).toBe(0); // not filled in the default tag, so no need to add another one - expect(screen.queryAllByLabelText('Remove tag').length).toBe(0); // mot filled in the default tag, so no values to remove - expect(screen.getAllByLabelText('Select tag key').length).toBe(1); - }); - - it('should allow adding/removing tags', async () => { - render(); - expect(screen.getAllByLabelText('Select tag key').length).toBe(1); - const tagKey = screen.getByLabelText('Select tag key'); - await selectAndCheckValue(user, tagKey, 'TagKey0'); - - await user.click(screen.getByLabelText('Add tag')); - jest.advanceTimersByTime(1000); - expect(screen.getAllByLabelText('Select tag key').length).toBe(2); - - await user.click(screen.getAllByLabelText('Remove tag')[0]); - jest.advanceTimersByTime(1000); - expect(screen.getAllByLabelText('Select tag key').length).toBe(1); - }); - - it('renders buttons when span filters is collapsed', async () => { - render(); - expect(screen.queryByRole('button', { name: 'Next result button' })).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: 'Prev result button' })).toBeInTheDocument(); - }); -}); - -const selectAndCheckValue = async (user: ReturnType, elem: HTMLElement, text: string) => { - await user.click(elem); - jest.advanceTimersByTime(1000); - await waitFor(() => expect(screen.getByText(text)).toBeInTheDocument()); - - await user.click(screen.getByText(text)); - jest.advanceTimersByTime(1000); - expect(screen.getByText(text)).toBeInTheDocument(); -}; - -const getElemText = (elem: HTMLElement) => { - return elem.parentElement?.previousSibling?.textContent; -}; diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx deleted file mode 100644 index eda085bc412..00000000000 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx +++ /dev/null @@ -1,319 +0,0 @@ -// Copyright (c) 2017 Uber Technologies, Inc. -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. - -import { css } from '@emotion/css'; -import React, { useState, useEffect, memo, useCallback, useRef } from 'react'; - -import { GrafanaTheme2, TraceSearchProps, SelectableValue, toOption } from '@grafana/data'; -import { Trans, t } from '@grafana/i18n'; -import { IntervalInput } from '@grafana/o11y-ds-frontend'; -import { Collapse, Icon, InlineField, InlineFieldRow, Select, Stack, Tooltip, useStyles2 } from '@grafana/ui'; - -import { DEFAULT_SPAN_FILTERS } from '../../../../state/constants'; -import { getTraceServiceNames, getTraceSpanNames } from '../../../utils/tags'; -import SearchBarInput from '../../common/SearchBarInput'; -import { Trace } from '../../types/trace'; -import NextPrevResult from '../SearchBar/NextPrevResult'; -import TracePageSearchBar from '../SearchBar/TracePageSearchBar'; - -import { SpanFiltersTags } from './SpanFiltersTags'; - -export type SpanFilterProps = { - trace: Trace; - search: TraceSearchProps; - setSearch: (newSearch: TraceSearchProps) => void; - showSpanFilters: boolean; - setShowSpanFilters: (isOpen: boolean) => void; - setFocusedSpanIdForSearch: React.Dispatch>; - spanFilterMatches: Set | undefined; - datasourceType: string; -}; - -export const SpanFilters = memo((props: SpanFilterProps) => { - const { - trace, - search, - setSearch, - showSpanFilters, - setShowSpanFilters, - setFocusedSpanIdForSearch, - spanFilterMatches, - datasourceType, - } = props; - const styles = { ...useStyles2(getStyles) }; - const [serviceNames, setServiceNames] = useState>>(); - const [spanNames, setSpanNames] = useState>>(); - const [focusedSpanIndexForSearch, setFocusedSpanIndexForSearch] = useState(-1); - const [tagKeys, setTagKeys] = useState>>(); - const [tagValues, setTagValues] = useState<{ [key: string]: Array> }>({}); - const prevTraceIdRef = useRef(); - - const durationRegex = /^\d+(?:\.\d)?\d*(?:ns|us|µs|ms|s|m|h)$/; - - const clear = useCallback(() => { - setServiceNames(undefined); - setSpanNames(undefined); - setTagKeys(undefined); - setTagValues({}); - setSearch(DEFAULT_SPAN_FILTERS); - }, [setSearch]); - - useEffect(() => { - // Only clear filters when trace ID actually changes (not on initial mount) - const currentTraceId = trace?.traceID; - - const traceHasChanged = prevTraceIdRef.current && prevTraceIdRef.current !== currentTraceId; - - if (traceHasChanged) { - clear(); - } - - prevTraceIdRef.current = currentTraceId; - }, [clear, trace]); - - const setShowSpanFilterMatchesOnly = useCallback( - (showMatchesOnly: boolean) => { - setSearch({ ...search, matchesOnly: showMatchesOnly }); - }, - [search, setSearch] - ); - - if (!trace) { - return null; - } - - const setSpanFiltersSearch = (spanSearch: TraceSearchProps) => { - setFocusedSpanIndexForSearch(-1); - setFocusedSpanIdForSearch(''); - setSearch(spanSearch); - }; - - const getServiceNames = () => { - if (!serviceNames) { - setServiceNames(getTraceServiceNames(trace).map(toOption)); - } - }; - - const getSpanNames = () => { - if (!spanNames) { - setSpanNames(getTraceSpanNames(trace).map(toOption)); - } - }; - - const collapseLabel = ( - <> - - - Span Filters - - - - - {!showSpanFilters && ( -
- -
- )} - - ); - - return ( -
- - - - - setSpanFiltersSearch({ ...search, serviceName: v?.value || '' })} - onOpenMenu={getServiceNames} - options={serviceNames || (search.serviceName ? [search.serviceName].map(toOption) : [])} - placeholder={t('explore.span-filters.placeholder-all-service-names', 'All service names')} - value={search.serviceName || null} - defaultValue={search.serviceName || null} - /> - - - { - setSpanFiltersSearch({ ...search, query: v, matchesOnly: v !== '' }); - }} - value={search.query || ''} - /> - - - - - setSpanFiltersSearch({ ...search, spanName: v?.value || '' })} - onOpenMenu={getSpanNames} - options={spanNames || (search.spanName ? [search.spanName].map(toOption) : [])} - placeholder={t('explore.span-filters.placeholder-all-span-names', 'All span names')} - value={search.spanName || null} - /> - - - - - - - setSpanFiltersSearch({ ...search, toOperator: v.value! })} - options={[toOption('<'), toOption('<=')]} - value={search.toOperator} - /> - setSpanFiltersSearch({ ...search, to: val })} - isInvalidError="Invalid duration" - // eslint-disable-next-line @grafana/i18n/no-untranslated-strings - placeholder="e.g. 100ms, 1.2s" - width={18} - value={search.to || ''} - validationRegex={durationRegex} - /> - - - - - - - - - - - -
- ); -}); - -SpanFilters.displayName = 'SpanFilters'; - -const getStyles = (theme: GrafanaTheme2) => ({ - container: css({ - label: 'SpanFilters', - margin: `0.5em 0 -${theme.spacing(1)} 0`, - zIndex: 5, - - '& > div': { - borderLeft: 'none', - borderRight: 'none', - }, - }), - collapseLabel: css({ - svg: { - color: '#aaa', - margin: '-2px 0 0 10px', - }, - }), - flexContainer: css({ - display: 'flex', - justifyContent: 'space-between', - }), - intervalInput: css({ - margin: '0 -4px 0 0', - }), - tagsRow: css({ - margin: '-4px 0 0 0', - }), - nextPrevResult: css({ - flex: 1, - alignItems: 'center', - display: 'flex', - justifyContent: 'flex-end', - marginRight: theme.spacing(1), - }), -}); diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFiltersTags.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFiltersTags.tsx deleted file mode 100644 index 3cf2d5f8488..00000000000 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFiltersTags.tsx +++ /dev/null @@ -1,202 +0,0 @@ -import { css } from '@emotion/css'; -import React from 'react'; -import { useMount } from 'react-use'; - -import { GrafanaTheme2, SelectableValue, toOption, TraceSearchProps, TraceSearchTag } from '@grafana/data'; -import { t } from '@grafana/i18n'; -import { AccessoryButton } from '@grafana/plugin-ui'; -import { Input, Select, Stack, useStyles2 } from '@grafana/ui'; - -import { randomId } from '../../../../state/constants'; -import { getTraceTagKeys, getTraceTagValues } from '../../../utils/tags'; -import { Trace } from '../../types/trace'; - -interface Props { - search: TraceSearchProps; - setSearch: (search: TraceSearchProps) => void; - trace: Trace; - tagKeys?: Array>; - setTagKeys: React.Dispatch> | undefined>>; - tagValues: Record>>; - setTagValues: React.Dispatch> }>>; -} - -export const SpanFiltersTags = ({ search, trace, setSearch, tagKeys, setTagKeys, tagValues, setTagValues }: Props) => { - const styles = { ...useStyles2(getStyles) }; - - const getTagKeys = () => { - if (!tagKeys) { - setTagKeys(getTraceTagKeys(trace).map(toOption)); - } - }; - - const getTagValues = (key: string) => { - return getTraceTagValues(trace, key).map(toOption); - }; - - useMount(() => { - if (search.tags) { - search.tags.forEach((tag) => { - if (tag.key) { - setTagValues({ - ...tagValues, - [tag.id]: getTagValues(tag.key), - }); - } - }); - } - }); - - const onTagChange = (tag: TraceSearchTag, v: SelectableValue) => { - setSearch({ - ...search, - tags: search.tags?.map((x) => { - return x.id === tag.id ? { ...x, key: v?.value || '', value: undefined } : x; - }), - }); - - const loadTagValues = async () => { - if (v?.value) { - setTagValues({ - ...tagValues, - [tag.id]: getTagValues(v.value), - }); - } else { - // removed value - const updatedValues = { ...tagValues }; - if (updatedValues[tag.id]) { - delete updatedValues[tag.id]; - } - setTagValues(updatedValues); - } - }; - loadTagValues(); - }; - - const addTag = () => { - const tag = { - id: randomId(), - operator: '=', - }; - setSearch({ ...search, tags: [...search.tags, tag] }); - }; - - const removeTag = (id: string) => { - let tags = search.tags.filter((tag) => { - return tag.id !== id; - }); - if (tags.length === 0) { - tags = [ - { - id: randomId(), - operator: '=', - }, - ]; - } - setSearch({ ...search, tags: tags }); - }; - - return ( -
- {search.tags?.map((tag, i) => ( -
- -
- { - setSearch({ - ...search, - tags: search.tags?.map((x) => { - return x.id === tag.id ? { ...x, operator: v.value! } : x; - }), - }); - }} - options={[toOption('='), toOption('!='), toOption('=~'), toOption('!~')]} - value={tag.operator} - /> -
- - - {(tag.operator === '=' || tag.operator === '!=') && ( - { - setSearch({ - ...search, - tags: search.tags?.map((x) => { - return x.id === tag.id ? { ...x, value: v?.currentTarget?.value || '' } : x; - }), - }); - }} - placeholder={t('explore.span-filters-tags.placeholder-tag-value', 'Tag value')} - width={18} - value={tag.value || ''} - /> - )} - - {(tag.key || tag.value || search.tags.length > 1) && ( - removeTag(tag.id)} - tooltip={t('explore.span-filters-tags.tooltip-remove-tag', 'Remove tag')} - /> - )} - {(tag.key || tag.value) && i === search.tags.length - 1 && ( - - - - )} - -
- ))} -
- ); -}; - -const getStyles = (theme: GrafanaTheme2) => ({ - addTag: css({ - marginLeft: theme.spacing(1), - }), - tagValues: css({ - maxWidth: '200px', - }), -}); diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/useTraceAdHocFiltersController.ts b/public/app/features/explore/TraceView/components/TracePageHeader/useTraceAdHocFiltersController.ts index 8615c446294..c5286297087 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/useTraceAdHocFiltersController.ts +++ b/public/app/features/explore/TraceView/components/TracePageHeader/useTraceAdHocFiltersController.ts @@ -1,18 +1,3 @@ -// Copyright (c) 2025 Grafana Labs -// -// This program is free software: you can redistribute it and/or modify -// it under the terms of the GNU Affero General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. -// -// This program is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU Affero General Public License for more details. -// -// You should have received a copy of the GNU Affero General Public License -// along with this program. If not, see . - import { useMemo, useState } from 'react'; import { TraceSearchProps } from '@grafana/data'; diff --git a/public/app/features/explore/TraceView/components/constants/span.ts b/public/app/features/explore/TraceView/components/constants/span.ts index 8d2fb1e5052..2e4d04be71b 100644 --- a/public/app/features/explore/TraceView/components/constants/span.ts +++ b/public/app/features/explore/TraceView/components/constants/span.ts @@ -5,3 +5,5 @@ export const LIBRARY_NAME = 'library.name'; export const LIBRARY_VERSION = 'library.version'; export const TRACE_STATE = 'trace.state'; export const ID = 'id'; +export const SPAN_NAME = 'span.name'; +export const SERVICE_NAME = 'service.name'; diff --git a/public/app/features/explore/TraceView/components/utils/filter-spans.tsx b/public/app/features/explore/TraceView/components/utils/filter-spans.tsx index d03016dab78..69c42ee2e8f 100644 --- a/public/app/features/explore/TraceView/components/utils/filter-spans.tsx +++ b/public/app/features/explore/TraceView/components/utils/filter-spans.tsx @@ -16,7 +16,17 @@ import { SpanStatusCode } from '@opentelemetry/api'; import { SelectableValue, TraceKeyValuePair, TraceSearchProps, TraceSearchTag } from '@grafana/data'; -import { KIND, LIBRARY_NAME, LIBRARY_VERSION, STATUS, STATUS_MESSAGE, TRACE_STATE, ID } from '../constants/span'; +import { + KIND, + LIBRARY_NAME, + LIBRARY_VERSION, + STATUS, + STATUS_MESSAGE, + TRACE_STATE, + ID, + SPAN_NAME, + SERVICE_NAME, +} from '../constants/span'; import TNil from '../types/TNil'; import { TraceSpan, CriticalPathSection } from '../types/trace'; @@ -46,13 +56,13 @@ const getAdhocFilterMatches = (spans: TraceSpan[], adhocFilters: Array { // Check that adhoc filter was created expect(result.current.search.adhocFilters).toHaveLength(1); expect(result.current.search.adhocFilters?.[0]).toMatchObject({ - key: 'serviceName', + key: 'service.name', operator: '=', value: 'my-service', }); @@ -120,7 +120,7 @@ describe('useSearch', () => { // Check that adhoc filter was created expect(result.current.search.adhocFilters).toHaveLength(1); expect(result.current.search.adhocFilters?.[0]).toMatchObject({ - key: 'spanName', + key: 'span.name', operator: '!=', value: 'my-operation', }); @@ -195,13 +195,13 @@ describe('useSearch', () => { // Verify each filter const filters = result.current.search.adhocFilters || []; - expect(filters.find((f) => f.key === 'serviceName')).toMatchObject({ - key: 'serviceName', + expect(filters.find((f) => f.key === 'service.name')).toMatchObject({ + key: 'service.name', operator: '=', value: 'my-service', }); - expect(filters.find((f) => f.key === 'spanName')).toMatchObject({ - key: 'spanName', + expect(filters.find((f) => f.key === 'span.name')).toMatchObject({ + key: 'span.name', operator: '!=', value: 'my-operation', }); @@ -306,7 +306,7 @@ describe('useSearch', () => { expect(result.current.search.adhocFilters).toHaveLength(5); const filters = result.current.search.adhocFilters || []; - expect(filters.find((f) => f.key === 'serviceName')?.operator).toBe('!='); + expect(filters.find((f) => f.key === 'service.name')?.operator).toBe('!='); expect(filters.find((f) => f.key === 'tag1')?.operator).toBe('='); expect(filters.find((f) => f.key === 'tag2')?.operator).toBe('!='); expect(filters.find((f) => f.key === 'tag3')?.operator).toBe('=~'); diff --git a/public/app/features/explore/TraceView/useSearch.ts b/public/app/features/explore/TraceView/useSearch.ts index 9deb191a8d3..086866b87fb 100644 --- a/public/app/features/explore/TraceView/useSearch.ts +++ b/public/app/features/explore/TraceView/useSearch.ts @@ -7,6 +7,7 @@ import { useDispatch, useSelector } from 'app/types/store'; import { DEFAULT_SPAN_FILTERS, randomId } from '../state/constants'; import { changePanelState } from '../state/explorePane'; +import { SPAN_NAME, SERVICE_NAME } from './components/constants/span'; import { TraceSpan, CriticalPathSection } from './components/types/trace'; import { filterSpans } from './components/utils/filter-spans'; @@ -25,7 +26,7 @@ export function migrateToAdhocFilters(search: TraceSearchProps): TraceSearchProp // Migrate serviceName if (search.serviceName && search.serviceName.trim() !== '') { adhocFilters.push({ - key: 'serviceName', + key: SERVICE_NAME, operator: search.serviceNameOperator || '=', value: search.serviceName, }); @@ -34,7 +35,7 @@ export function migrateToAdhocFilters(search: TraceSearchProps): TraceSearchProp // Migrate spanName if (search.spanName && search.spanName.trim() !== '') { adhocFilters.push({ - key: 'spanName', + key: SPAN_NAME, operator: search.spanNameOperator || '=', value: search.spanName, }); diff --git a/public/app/features/explore/TraceView/utils/tags.ts b/public/app/features/explore/TraceView/utils/tags.ts index 293326e359e..38ae3c92148 100644 --- a/public/app/features/explore/TraceView/utils/tags.ts +++ b/public/app/features/explore/TraceView/utils/tags.ts @@ -9,6 +9,8 @@ import { STATUS, STATUS_MESSAGE, TRACE_STATE, + SPAN_NAME, + SERVICE_NAME, } from '../components/constants/span'; import { Trace } from '../components/types/trace'; @@ -37,6 +39,11 @@ export const getTraceTagKeys = (trace: Trace) => { span.process.tags.forEach((tag) => { keys.push(tag.key); }); + + if (span.process.serviceName) { + keys.push(SERVICE_NAME); + } + if (span.logs !== null) { span.logs.forEach((log) => { log.fields.forEach((field) => { @@ -63,6 +70,9 @@ export const getTraceTagKeys = (trace: Trace) => { if (span.traceState) { keys.push(TRACE_STATE); } + if (span.operationName) { + keys.push(SPAN_NAME); + } keys.push(ID); }); keys = uniq(keys).sort(); @@ -93,6 +103,11 @@ export const getTraceTagValues = (trace: Trace, key: string) => { } switch (key) { + case SPAN_NAME: + if (span.operationName) { + values.push(span.operationName); + } + break; case KIND: if (span.kind) { values.push(span.kind); diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 8c7bc95d901..25ad73abe1a 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -7641,39 +7641,6 @@ }, "share-span": "Share" }, - "span-filters": { - "aria-label-select-max-span-operator": "Select max span operator", - "aria-label-select-min-span-operator": "Select min span operator", - "aria-label-select-service-name": "Select service name", - "aria-label-select-service-name-operator": "Select service name operator", - "aria-label-select-span-name": "Select span name", - "aria-label-select-span-name-operator": "Select span name operator", - "ariaLabel-select-max-span-duration": "Select max span duration", - "ariaLabel-select-min-span-duration": "Select min span duration", - "label-collapse": "Span Filters", - "label-duration": "Duration", - "label-service-name": "Service name", - "label-span-name": "Span name", - "label-tags": "Tags", - "placeholder-all-service-names": "All service names", - "placeholder-all-span-names": "All span names", - "tooltip-collapse": "Filter your spans below. You can continue to apply filters until you have narrowed down your resulting spans to the select few you are most interested in.", - "tooltip-duration": "Filter by duration. Accepted units are {{units}}", - "tooltip-tags": "Filter by tags, process tags or log fields in your spans." - }, - "span-filters-tags": { - "aria-label-add-tag": "Add tag", - "aria-label-input-tag-value": "Input tag value", - "aria-label-remove-tag": "Remove tag", - "aria-label-select-tag-key": "Select tag key", - "aria-label-select-tag-operator": "Select tag operator", - "aria-label-select-tag-value": "Select tag value", - "placeholder-select-tag": "Select tag", - "placeholder-select-value": "Select value", - "placeholder-tag-value": "Tag value", - "tooltip-add-tag": "Add tag", - "tooltip-remove-tag": "Remove tag" - }, "span-flame-graph": { "flame-graph": "Flame graph" },