Tracing: Rename feature toggle (#66833)

Rename feature toggle so something more specific so new work can use older feature toggle name
This commit is contained in:
Joey 2023-04-21 11:31:24 +01:00 committed by GitHub
parent 9a29dd7d6e
commit 6522bb377e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 120 additions and 96 deletions

View File

@ -295,7 +295,7 @@ If the file has multiple traces, Grafana visualizes its first trace.
## Span Filters ## Span Filters
> **Note:** This feature is behind the `newTraceView` [feature toggle]({{< relref "../../setup-grafana/configure-grafana#feature_toggles" >}}). > **Note:** This feature is behind the `newTraceViewHeader` [feature toggle]({{< relref "../../setup-grafana/configure-grafana#feature_toggles" >}}).
> If you use Grafana Cloud, open a [support ticket in the Cloud Portal](/profile/org#support) to access this feature. > If you use Grafana Cloud, open a [support ticket in the Cloud Portal](/profile/org#support) to access this feature.
![Screenshot of span filtering](/media/docs/tempo/screenshot-grafana-tempo-span-filters.png) ![Screenshot of span filtering](/media/docs/tempo/screenshot-grafana-tempo-span-filters.png)

View File

@ -359,7 +359,7 @@ To open a query in Tempo with the span name of that row automatically set in the
## Span Filters ## Span Filters
> **Note:** This feature is behind the `newTraceView` [feature toggle]({{< relref "../../setup-grafana/configure-grafana#feature_toggles" >}}). > **Note:** This feature is behind the `newTraceViewHeader` [feature toggle]({{< relref "../../setup-grafana/configure-grafana#feature_toggles" >}}).
> If you use Grafana Cloud, open a [support ticket in the Cloud Portal](/profile/org#support) to access this feature. > If you use Grafana Cloud, open a [support ticket in the Cloud Portal](/profile/org#support) to access this feature.
![Screenshot of span filtering](/media/docs/tempo/screenshot-grafana-tempo-span-filters.png) ![Screenshot of span filtering](/media/docs/tempo/screenshot-grafana-tempo-span-filters.png)

View File

@ -264,7 +264,7 @@ If the file has multiple traces, Grafana visualizes its first trace.
## Span Filters ## Span Filters
> **Note:** This feature is behind the `newTraceView` [feature toggle]({{< relref "../../setup-grafana/configure-grafana#feature_toggles" >}}). > **Note:** This feature is behind the `newTraceViewHeader` [feature toggle]({{< relref "../../setup-grafana/configure-grafana#feature_toggles" >}}).
> If you use Grafana Cloud, open a [support ticket in the Cloud Portal](/profile/org#support) to access this feature. > If you use Grafana Cloud, open a [support ticket in the Cloud Portal](/profile/org#support) to access this feature.
![Screenshot of span filtering](/media/docs/tempo/screenshot-grafana-tempo-span-filters.png) ![Screenshot of span filtering](/media/docs/tempo/screenshot-grafana-tempo-span-filters.png)

View File

@ -42,7 +42,7 @@ Shows condensed view or the trace timeline. Drag your mouse over the minimap to
### Span Filters ### Span Filters
> **Note:** This feature is behind the `newTraceView` [feature toggle]({{< relref "../../setup-grafana/configure-grafana#feature_toggles" >}}). > **Note:** This feature is behind the `newTraceViewHeader` [feature toggle]({{< relref "../../setup-grafana/configure-grafana#feature_toggles" >}}).
> If you use Grafana Cloud, open a [support ticket in the Cloud Portal](/profile/org#support) to access this feature. > If you use Grafana Cloud, open a [support ticket in the Cloud Portal](/profile/org#support) to access this feature.
![Screenshot of span filtering](/media/docs/tempo/screenshot-grafana-tempo-span-filters.png) ![Screenshot of span filtering](/media/docs/tempo/screenshot-grafana-tempo-span-filters.png)

View File

@ -70,7 +70,7 @@ Alpha features might be changed or removed without prior notice.
| `publicDashboardsEmailSharing` | Enables public dashboard sharing to be restricted to only allowed emails | | `publicDashboardsEmailSharing` | Enables public dashboard sharing to be restricted to only allowed emails |
| `lokiLive` | Support WebSocket streaming for loki (early prototype) | | `lokiLive` | Support WebSocket streaming for loki (early prototype) |
| `storage` | Configurable storage for dashboards, datasources, and resources | | `storage` | Configurable storage for dashboards, datasources, and resources |
| `newTraceView` | Shows the new trace view design | | `newTraceViewHeader` | Shows the new trace view header |
| `datasourceQueryMultiStatus` | Introduce HTTP 207 Multi Status for api/ds/query | | `datasourceQueryMultiStatus` | Introduce HTTP 207 Multi Status for api/ds/query |
| `traceToMetrics` | Enable trace to metrics links | | `traceToMetrics` | Enable trace to metrics links |
| `prometheusWideSeries` | Enable wide series responses in the Prometheus datasource | | `prometheusWideSeries` | Enable wide series responses in the Prometheus datasource |

View File

@ -33,7 +33,7 @@ export interface FeatureToggles {
storage?: boolean; storage?: boolean;
k8s?: boolean; k8s?: boolean;
exploreMixedDatasource?: boolean; exploreMixedDatasource?: boolean;
newTraceView?: boolean; newTraceViewHeader?: boolean;
correlations?: boolean; correlations?: boolean;
cloudWatchDynamicLabels?: boolean; cloudWatchDynamicLabels?: boolean;
datasourceQueryMultiStatus?: boolean; datasourceQueryMultiStatus?: boolean;

View File

@ -105,8 +105,8 @@ var (
Owner: grafanaExploreSquad, Owner: grafanaExploreSquad,
}, },
{ {
Name: "newTraceView", Name: "newTraceViewHeader",
Description: "Shows the new trace view design", Description: "Shows the new trace view header",
State: FeatureStateAlpha, State: FeatureStateAlpha,
FrontendOnly: true, FrontendOnly: true,
Owner: grafanaObservabilityTracesAndProfilingSquad, Owner: grafanaObservabilityTracesAndProfilingSquad,

View File

@ -14,7 +14,7 @@ migrationLocking,beta,@grafana/backend-platform,false,false,false,false
storage,alpha,@grafana/grafana-app-platform-squad,false,false,false,false storage,alpha,@grafana/grafana-app-platform-squad,false,false,false,false
k8s,alpha,@grafana/grafana-app-platform-squad,true,false,false,false k8s,alpha,@grafana/grafana-app-platform-squad,true,false,false,false
exploreMixedDatasource,beta,@grafana/explore-squad,false,false,false,true exploreMixedDatasource,beta,@grafana/explore-squad,false,false,false,true
newTraceView,alpha,@grafana/observability-traces-and-profiling,false,false,false,true newTraceViewHeader,alpha,@grafana/observability-traces-and-profiling,false,false,false,true
correlations,beta,@grafana/explore-squad,false,false,false,false correlations,beta,@grafana/explore-squad,false,false,false,false
cloudWatchDynamicLabels,stable,@grafana/aws-plugins,false,false,false,false cloudWatchDynamicLabels,stable,@grafana/aws-plugins,false,false,false,false
datasourceQueryMultiStatus,alpha,@grafana/plugins-platform-backend,false,false,false,false datasourceQueryMultiStatus,alpha,@grafana/plugins-platform-backend,false,false,false,false

1 Name State Owner requiresDevMode RequiresLicense RequiresRestart FrontendOnly
14 storage alpha @grafana/grafana-app-platform-squad false false false false
15 k8s alpha @grafana/grafana-app-platform-squad true false false false
16 exploreMixedDatasource beta @grafana/explore-squad false false false true
17 newTraceView newTraceViewHeader alpha @grafana/observability-traces-and-profiling false false false true
18 correlations beta @grafana/explore-squad false false false false
19 cloudWatchDynamicLabels stable @grafana/aws-plugins false false false false
20 datasourceQueryMultiStatus alpha @grafana/plugins-platform-backend false false false false

View File

@ -67,9 +67,9 @@ const (
// Enable mixed datasource in Explore // Enable mixed datasource in Explore
FlagExploreMixedDatasource = "exploreMixedDatasource" FlagExploreMixedDatasource = "exploreMixedDatasource"
// FlagNewTraceView // FlagNewTraceViewHeader
// Shows the new trace view design // Shows the new trace view header
FlagNewTraceView = "newTraceView" FlagNewTraceViewHeader = "newTraceViewHeader"
// FlagCorrelations // FlagCorrelations
// Correlations page // Correlations page

View File

@ -41,7 +41,7 @@ import { createSpanLinkFactory } from './createSpanLink';
import { useChildrenState } from './useChildrenState'; import { useChildrenState } from './useChildrenState';
import { useDetailState } from './useDetailState'; import { useDetailState } from './useDetailState';
import { useHoverIndentGuide } from './useHoverIndentGuide'; import { useHoverIndentGuide } from './useHoverIndentGuide';
import { useSearchNewTraceView } from './useSearch'; import { useSearchNewTraceViewHeader } from './useSearch';
import { useViewRange } from './useViewRange'; import { useViewRange } from './useViewRange';
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
@ -94,8 +94,10 @@ export function TraceView(props: Props) {
const { removeHoverIndentGuideId, addHoverIndentGuideId, hoverIndentGuideIds } = useHoverIndentGuide(); const { removeHoverIndentGuideId, addHoverIndentGuideId, hoverIndentGuideIds } = useHoverIndentGuide();
const { viewRange, updateViewRangeTime, updateNextViewRangeTime } = useViewRange(); const { viewRange, updateViewRangeTime, updateNextViewRangeTime } = useViewRange();
const { expandOne, collapseOne, childrenToggle, collapseAll, childrenHiddenIDs, expandAll } = useChildrenState(); const { expandOne, collapseOne, childrenToggle, collapseAll, childrenHiddenIDs, expandAll } = useChildrenState();
const { newTraceViewSearch, setNewTraceViewSearch, spanFilterMatches } = useSearchNewTraceView(traceProp?.spans); const { newTraceViewHeaderSearch, setNewTraceViewHeaderSearch, spanFilterMatches } = useSearchNewTraceViewHeader(
const [newTraceViewFocusedSpanIdForSearch, setNewTraceViewFocusedSpanIdForSearch] = useState(''); traceProp?.spans
);
const [newTraceViewHeaderFocusedSpanIdForSearch, setNewTraceViewHeaderFocusedSpanIdForSearch] = useState('');
const [showSpanFilters, setShowSpanFilters] = useToggle(false); const [showSpanFilters, setShowSpanFilters] = useToggle(false);
const [headerHeight, setHeaderHeight] = useState(0); const [headerHeight, setHeaderHeight] = useState(0);
@ -152,17 +154,17 @@ export function TraceView(props: Props) {
<> <>
{props.dataFrames?.length && traceProp ? ( {props.dataFrames?.length && traceProp ? (
<> <>
{config.featureToggles.newTraceView ? ( {config.featureToggles.newTraceViewHeader ? (
<> <>
<NewTracePageHeader <NewTracePageHeader
trace={traceProp} trace={traceProp}
timeZone={timeZone} timeZone={timeZone}
search={newTraceViewSearch} search={newTraceViewHeaderSearch}
setSearch={setNewTraceViewSearch} setSearch={setNewTraceViewHeaderSearch}
showSpanFilters={showSpanFilters} showSpanFilters={showSpanFilters}
setShowSpanFilters={setShowSpanFilters} setShowSpanFilters={setShowSpanFilters}
focusedSpanIdForSearch={newTraceViewFocusedSpanIdForSearch} focusedSpanIdForSearch={newTraceViewHeaderFocusedSpanIdForSearch}
setFocusedSpanIdForSearch={setNewTraceViewFocusedSpanIdForSearch} setFocusedSpanIdForSearch={setNewTraceViewHeaderFocusedSpanIdForSearch}
spanFilterMatches={spanFilterMatches} spanFilterMatches={spanFilterMatches}
datasourceType={datasourceType} datasourceType={datasourceType}
setHeaderHeight={setHeaderHeight} setHeaderHeight={setHeaderHeight}
@ -186,7 +188,7 @@ export function TraceView(props: Props) {
<TraceTimelineViewer <TraceTimelineViewer
registerAccessors={noop} registerAccessors={noop}
scrollToFirstVisibleSpan={noop} scrollToFirstVisibleSpan={noop}
findMatchesIDs={config.featureToggles.newTraceView ? spanFilterMatches : spanFindMatches} findMatchesIDs={config.featureToggles.newTraceViewHeader ? spanFilterMatches : spanFindMatches}
trace={traceProp} trace={traceProp}
datasourceType={datasourceType} datasourceType={datasourceType}
spanBarOptions={spanBarOptions?.spanBar} spanBarOptions={spanBarOptions?.spanBar}
@ -220,7 +222,9 @@ export function TraceView(props: Props) {
scrollElement={scrollElement} scrollElement={scrollElement}
focusedSpanId={focusedSpanId} focusedSpanId={focusedSpanId}
focusedSpanIdForSearch={ focusedSpanIdForSearch={
config.featureToggles.newTraceView ? newTraceViewFocusedSpanIdForSearch : props.focusedSpanIdForSearch! config.featureToggles.newTraceViewHeader
? newTraceViewHeaderFocusedSpanIdForSearch
: props.focusedSpanIdForSearch!
} }
createFocusSpanLink={createFocusSpanLink} createFocusSpanLink={createFocusSpanLink}
topOfViewRef={topOfViewRef} topOfViewRef={topOfViewRef}

View File

@ -33,7 +33,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 1 0; flex: 1 1 0;
padding: ${config.featureToggles.newTraceView ? 0 : theme.spacing(theme.components.panel.padding)}; padding: ${config.featureToggles.newTraceViewHeader ? 0 : theme.spacing(theme.components.panel.padding)};
`, `,
}); });
@ -57,7 +57,7 @@ export function TraceViewContainer(props: Props) {
return ( return (
<div className={style.container}> <div className={style.container}>
{!config.featureToggles.newTraceView && ( {!config.featureToggles.newTraceViewHeader && (
<TracePageSearchBar <TracePageSearchBar
navigable={true} navigable={true}
searchValue={search} searchValue={search}

View File

@ -42,7 +42,7 @@ const setup = () => {
describe('NewTracePageHeader test', () => { describe('NewTracePageHeader test', () => {
it('should render the new trace header', () => { it('should render the new trace header', () => {
config.featureToggles.newTraceView = true; config.featureToggles.newTraceViewHeader = true;
setup(); setup();
const header = document.querySelector('header'); const header = document.querySelector('header');

View File

@ -6,5 +6,5 @@ export * from './types';
export * from './TraceTimelineViewer/types'; export * from './TraceTimelineViewer/types';
export { default as DetailState } from './TraceTimelineViewer/SpanDetail/DetailState'; export { default as DetailState } from './TraceTimelineViewer/SpanDetail/DetailState';
export { default as transformTraceData } from './model/transform-trace-data'; export { default as transformTraceData } from './model/transform-trace-data';
export { filterSpansNewTraceView, filterSpans } from './utils/filter-spans'; export { filterSpansNewTraceViewHeader, filterSpans } from './utils/filter-spans';
export * from './Theme'; export * from './Theme';

View File

@ -15,7 +15,7 @@
import { defaultFilters, defaultTagFilter } from '../../useSearch'; import { defaultFilters, defaultTagFilter } from '../../useSearch';
import { TraceSpan } from '../types'; import { TraceSpan } from '../types';
import { filterSpans, filterSpansNewTraceView } from './filter-spans'; import { filterSpans, filterSpansNewTraceViewHeader } from './filter-spans';
describe('filterSpans', () => { describe('filterSpans', () => {
// span0 contains strings that end in 0 or 1 // span0 contains strings that end in 0 or 1
@ -110,46 +110,51 @@ describe('filterSpans', () => {
const spans = [span0, span2] as TraceSpan[]; const spans = [span0, span2] as TraceSpan[];
it('should return `undefined` if spans is falsy', () => { it('should return `undefined` if spans is falsy', () => {
expect(filterSpansNewTraceView({ ...defaultFilters, spanName: 'operationName' }, null)).toBe(undefined); expect(filterSpansNewTraceViewHeader({ ...defaultFilters, spanName: 'operationName' }, null)).toBe(undefined);
}); });
// Service / span name // Service / span name
it('should return spans whose serviceName match a filter', () => { it('should return spans whose serviceName match a filter', () => {
expect(filterSpansNewTraceView({ ...defaultFilters, serviceName: 'serviceName0' }, spans)).toEqual( expect(filterSpansNewTraceViewHeader({ ...defaultFilters, serviceName: 'serviceName0' }, spans)).toEqual(
new Set([spanID0]) new Set([spanID0])
); );
expect(filterSpansNewTraceView({ ...defaultFilters, serviceName: 'serviceName2' }, spans)).toEqual( expect(filterSpansNewTraceViewHeader({ ...defaultFilters, serviceName: 'serviceName2' }, spans)).toEqual(
new Set([spanID2]) new Set([spanID2])
); );
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, serviceName: 'serviceName2', serviceNameOperator: '!=' }, spans) filterSpansNewTraceViewHeader(
{ ...defaultFilters, serviceName: 'serviceName2', serviceNameOperator: '!=' },
spans
)
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
}); });
it('should return spans whose operationName match a filter', () => { it('should return spans whose operationName match a filter', () => {
expect(filterSpansNewTraceView({ ...defaultFilters, spanName: 'operationName0' }, spans)).toEqual( expect(filterSpansNewTraceViewHeader({ ...defaultFilters, spanName: 'operationName0' }, spans)).toEqual(
new Set([spanID0]) new Set([spanID0])
); );
expect(filterSpansNewTraceView({ ...defaultFilters, spanName: 'operationName2' }, spans)).toEqual( expect(filterSpansNewTraceViewHeader({ ...defaultFilters, spanName: 'operationName2' }, spans)).toEqual(
new Set([spanID2]) new Set([spanID2])
); );
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, spanName: 'operationName2', spanNameOperator: '!=' }, spans) filterSpansNewTraceViewHeader({ ...defaultFilters, spanName: 'operationName2', spanNameOperator: '!=' }, spans)
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
}); });
// Durations // Durations
it('should return spans whose duration match a filter', () => { it('should return spans whose duration match a filter', () => {
expect(filterSpansNewTraceView({ ...defaultFilters, from: '2ms' }, spans)).toEqual(new Set([spanID0, spanID2])); expect(filterSpansNewTraceViewHeader({ ...defaultFilters, from: '2ms' }, spans)).toEqual(
expect(filterSpansNewTraceView({ ...defaultFilters, from: '3.05ms' }, spans)).toEqual(new Set([spanID2])); new Set([spanID0, spanID2])
expect(filterSpansNewTraceView({ ...defaultFilters, from: '3.05ms', fromOperator: '>=' }, spans)).toEqual( );
expect(filterSpansNewTraceViewHeader({ ...defaultFilters, from: '3.05ms' }, spans)).toEqual(new Set([spanID2]));
expect(filterSpansNewTraceViewHeader({ ...defaultFilters, from: '3.05ms', fromOperator: '>=' }, spans)).toEqual(
new Set([spanID0, spanID2]) new Set([spanID0, spanID2])
); );
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, from: '3.05ms', fromOperator: '>=', to: '4ms' }, spans) filterSpansNewTraceViewHeader({ ...defaultFilters, from: '3.05ms', fromOperator: '>=', to: '4ms' }, spans)
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
expect(filterSpansNewTraceView({ ...defaultFilters, to: '4ms' }, spans)).toEqual(new Set([spanID0])); expect(filterSpansNewTraceViewHeader({ ...defaultFilters, to: '4ms' }, spans)).toEqual(new Set([spanID0]));
expect(filterSpansNewTraceView({ ...defaultFilters, to: '5ms', toOperator: '<=' }, spans)).toEqual( expect(filterSpansNewTraceViewHeader({ ...defaultFilters, to: '5ms', toOperator: '<=' }, spans)).toEqual(
new Set([spanID0, spanID2]) new Set([spanID0, spanID2])
); );
}); });
@ -157,16 +162,16 @@ describe('filterSpans', () => {
// Tags // Tags
it('should return spans whose tags kv.key match a filter', () => { it('should return spans whose tags kv.key match a filter', () => {
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey1' }] }, spans) filterSpansNewTraceViewHeader({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey1' }] }, spans)
).toEqual(new Set([spanID0, spanID2])); ).toEqual(new Set([spanID0, spanID2]));
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey0' }] }, spans) filterSpansNewTraceViewHeader({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey0' }] }, spans)
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey2' }] }, spans) filterSpansNewTraceViewHeader({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey2' }] }, spans)
).toEqual(new Set([spanID2])); ).toEqual(new Set([spanID2]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey2', operator: '!=' }] }, { ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey2', operator: '!=' }] },
spans spans
) )
@ -175,16 +180,25 @@ describe('filterSpans', () => {
it('should return spans whose process.tags kv.key match a filter', () => { it('should return spans whose process.tags kv.key match a filter', () => {
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'processTagKey1' }] }, spans) filterSpansNewTraceViewHeader(
{ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'processTagKey1' }] },
spans
)
).toEqual(new Set([spanID0, spanID2])); ).toEqual(new Set([spanID0, spanID2]));
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'processTagKey0' }] }, spans) filterSpansNewTraceViewHeader(
{ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'processTagKey0' }] },
spans
)
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'processTagKey2' }] }, spans) filterSpansNewTraceViewHeader(
{ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'processTagKey2' }] },
spans
)
).toEqual(new Set([spanID2])); ).toEqual(new Set([spanID2]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'processTagKey2', operator: '!=' }] }, { ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'processTagKey2', operator: '!=' }] },
spans spans
) )
@ -193,16 +207,16 @@ describe('filterSpans', () => {
it('should return spans whose logs have a field whose kv.key match a filter', () => { it('should return spans whose logs have a field whose kv.key match a filter', () => {
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'logFieldKey1' }] }, spans) filterSpansNewTraceViewHeader({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'logFieldKey1' }] }, spans)
).toEqual(new Set([spanID0, spanID2])); ).toEqual(new Set([spanID0, spanID2]));
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'logFieldKey0' }] }, spans) filterSpansNewTraceViewHeader({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'logFieldKey0' }] }, spans)
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'logFieldKey2' }] }, spans) filterSpansNewTraceViewHeader({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'logFieldKey2' }] }, spans)
).toEqual(new Set([spanID2])); ).toEqual(new Set([spanID2]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'logFieldKey2', operator: '!=' }] }, { ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'logFieldKey2', operator: '!=' }] },
spans spans
) )
@ -212,7 +226,7 @@ describe('filterSpans', () => {
it('should return no spans when logs is null', () => { it('should return no spans when logs is null', () => {
const nullSpan = { ...span0, logs: null }; const nullSpan = { ...span0, logs: null };
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'logFieldKey1' }] }, [ filterSpansNewTraceViewHeader({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'logFieldKey1' }] }, [
nullSpan, nullSpan,
] as unknown as TraceSpan[]) ] as unknown as TraceSpan[])
).toEqual(new Set([])); ).toEqual(new Set([]));
@ -220,13 +234,13 @@ describe('filterSpans', () => {
it("should return spans whose tags' kv.key and kv.value match a filter", () => { it("should return spans whose tags' kv.key and kv.value match a filter", () => {
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey1', value: 'tagValue1' }] }, { ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey1', value: 'tagValue1' }] },
spans spans
) )
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey1', value: 'tagValue1', operator: '!=' }] }, { ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey1', value: 'tagValue1', operator: '!=' }] },
spans spans
) )
@ -235,19 +249,19 @@ describe('filterSpans', () => {
it("should not return spans whose tags' kv.key match a filter but kv.value/operator does not match", () => { it("should not return spans whose tags' kv.key match a filter but kv.value/operator does not match", () => {
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey1', operator: '!=' }] }, { ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey1', operator: '!=' }] },
spans spans
) )
).toEqual(new Set()); ).toEqual(new Set());
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey2', operator: '!=' }] }, { ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey2', operator: '!=' }] },
spans spans
) )
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey1', value: 'tagValue1', operator: '!=' }] }, { ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'tagKey1', value: 'tagValue1', operator: '!=' }] },
spans spans
) )
@ -257,7 +271,7 @@ describe('filterSpans', () => {
it('should return spans with multiple tag filters', () => { it('should return spans with multiple tag filters', () => {
// tags in same span // tags in same span
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ {
...defaultFilters, ...defaultFilters,
tags: [ tags: [
@ -269,7 +283,7 @@ describe('filterSpans', () => {
) )
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ {
...defaultFilters, ...defaultFilters,
tags: [ tags: [
@ -281,7 +295,7 @@ describe('filterSpans', () => {
) )
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ {
...defaultFilters, ...defaultFilters,
tags: [ tags: [
@ -295,7 +309,7 @@ describe('filterSpans', () => {
// tags in different spans // tags in different spans
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ {
...defaultFilters, ...defaultFilters,
tags: [ tags: [
@ -307,7 +321,7 @@ describe('filterSpans', () => {
) )
).toEqual(new Set()); ).toEqual(new Set());
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ {
...defaultFilters, ...defaultFilters,
tags: [ tags: [
@ -321,7 +335,7 @@ describe('filterSpans', () => {
// values in different spans // values in different spans
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ {
...defaultFilters, ...defaultFilters,
tags: [ tags: [
@ -333,7 +347,7 @@ describe('filterSpans', () => {
) )
).toEqual(new Set()); ).toEqual(new Set());
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ {
...defaultFilters, ...defaultFilters,
tags: [ tags: [
@ -345,7 +359,7 @@ describe('filterSpans', () => {
) )
).toEqual(new Set()); ).toEqual(new Set());
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ {
...defaultFilters, ...defaultFilters,
tags: [ tags: [
@ -357,7 +371,7 @@ describe('filterSpans', () => {
) )
).toEqual(new Set()); ).toEqual(new Set());
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ {
...defaultFilters, ...defaultFilters,
tags: [ tags: [
@ -374,13 +388,19 @@ describe('filterSpans', () => {
it('should return spans with multiple filters', () => { it('should return spans with multiple filters', () => {
// service name + span name // service name + span name
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, serviceName: 'serviceName0', spanName: 'operationName0' }, spans) filterSpansNewTraceViewHeader(
{ ...defaultFilters, serviceName: 'serviceName0', spanName: 'operationName0' },
spans
)
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
expect( expect(
filterSpansNewTraceView({ ...defaultFilters, serviceName: 'serviceName0', spanName: 'operationName2' }, spans) filterSpansNewTraceViewHeader(
{ ...defaultFilters, serviceName: 'serviceName0', spanName: 'operationName2' },
spans
)
).toEqual(new Set([])); ).toEqual(new Set([]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, serviceName: 'serviceName0', spanName: 'operationName2', spanNameOperator: '!=' }, { ...defaultFilters, serviceName: 'serviceName0', spanName: 'operationName2', spanNameOperator: '!=' },
spans spans
) )
@ -388,19 +408,19 @@ describe('filterSpans', () => {
// service name + span name + duration // service name + span name + duration
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, serviceName: 'serviceName0', spanName: 'operationName0', from: '2ms' }, { ...defaultFilters, serviceName: 'serviceName0', spanName: 'operationName0', from: '2ms' },
spans spans
) )
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, serviceName: 'serviceName0', spanName: 'operationName0', to: '2ms' }, { ...defaultFilters, serviceName: 'serviceName0', spanName: 'operationName0', to: '2ms' },
spans spans
) )
).toEqual(new Set([])); ).toEqual(new Set([]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, serviceName: 'serviceName2', spanName: 'operationName2', to: '6ms' }, { ...defaultFilters, serviceName: 'serviceName2', spanName: 'operationName2', to: '6ms' },
spans spans
) )
@ -408,31 +428,31 @@ describe('filterSpans', () => {
// service name + tag key // service name + tag key
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, serviceName: 'serviceName0', tags: [{ ...defaultTagFilter, key: 'tagKey0' }] }, { ...defaultFilters, serviceName: 'serviceName0', tags: [{ ...defaultTagFilter, key: 'tagKey0' }] },
spans spans
) )
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, serviceName: 'serviceName0', tags: [{ ...defaultTagFilter, key: 'tagKey1' }] }, { ...defaultFilters, serviceName: 'serviceName0', tags: [{ ...defaultTagFilter, key: 'tagKey1' }] },
spans spans
) )
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, serviceName: 'serviceName2', tags: [{ ...defaultTagFilter, key: 'tagKey1' }] }, { ...defaultFilters, serviceName: 'serviceName2', tags: [{ ...defaultTagFilter, key: 'tagKey1' }] },
spans spans
) )
).toEqual(new Set([spanID2])); ).toEqual(new Set([spanID2]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, serviceName: 'serviceName2', tags: [{ ...defaultTagFilter, key: 'tagKey2' }] }, { ...defaultFilters, serviceName: 'serviceName2', tags: [{ ...defaultTagFilter, key: 'tagKey2' }] },
spans spans
) )
).toEqual(new Set([spanID2])); ).toEqual(new Set([spanID2]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ {
...defaultFilters, ...defaultFilters,
serviceName: 'serviceName0', serviceName: 'serviceName0',
@ -444,13 +464,13 @@ describe('filterSpans', () => {
// duration + tag // duration + tag
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, from: '2ms', tags: [{ ...defaultTagFilter, key: 'tagKey0' }] }, { ...defaultFilters, from: '2ms', tags: [{ ...defaultTagFilter, key: 'tagKey0' }] },
spans spans
) )
).toEqual(new Set([spanID0])); ).toEqual(new Set([spanID0]));
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ ...defaultFilters, to: '5ms', toOperator: '<=', tags: [{ ...defaultTagFilter, key: 'tagKey2' }] }, { ...defaultFilters, to: '5ms', toOperator: '<=', tags: [{ ...defaultTagFilter, key: 'tagKey2' }] },
spans spans
) )
@ -458,7 +478,7 @@ describe('filterSpans', () => {
// all // all
expect( expect(
filterSpansNewTraceView( filterSpansNewTraceViewHeader(
{ {
...defaultFilters, ...defaultFilters,
serviceName: 'serviceName0', serviceName: 'serviceName0',

View File

@ -17,7 +17,7 @@ import { TNil, TraceKeyValuePair, TraceSpan } from '../types';
// filter spans where all filters added need to be true for each individual span that is returned // filter spans where all filters added need to be true for each individual span that is returned
// i.e. the more filters added -> the more specific that the returned results are // i.e. the more filters added -> the more specific that the returned results are
export function filterSpansNewTraceView(searchProps: SearchProps, spans: TraceSpan[] | TNil) { export function filterSpansNewTraceViewHeader(searchProps: SearchProps, spans: TraceSpan[] | TNil) {
if (!spans) { if (!spans) {
return undefined; return undefined;
} }
@ -151,7 +151,7 @@ export const convertTimeFilter = (time: string) => {
return undefined; return undefined;
}; };
// legacy code that will be removed when the newTraceView feature flag is removed // legacy code that will be removed when the Header feature flag is removed
export function filterSpans(textFilter: string, spans: TraceSpan[] | TNil) { export function filterSpans(textFilter: string, spans: TraceSpan[] | TNil) {
if (!spans) { if (!spans) {
return undefined; return undefined;

View File

@ -1,7 +1,7 @@
import { act, renderHook } from '@testing-library/react'; import { act, renderHook } from '@testing-library/react';
import { TraceSpan } from './components'; import { TraceSpan } from './components';
import { defaultFilters, useSearch, useSearchNewTraceView } from './useSearch'; import { defaultFilters, useSearch, useSearchNewTraceViewHeader } from './useSearch';
describe('useSearch', () => { describe('useSearch', () => {
const spans = [ const spans = [
@ -28,15 +28,15 @@ describe('useSearch', () => {
]; ];
it('returns matching span IDs', async () => { it('returns matching span IDs', async () => {
const { result } = renderHook(() => useSearchNewTraceView(spans)); const { result } = renderHook(() => useSearchNewTraceViewHeader(spans));
act(() => result.current.setNewTraceViewSearch({ ...defaultFilters, serviceName: 'service1' })); act(() => result.current.setNewTraceViewHeaderSearch({ ...defaultFilters, serviceName: 'service1' }));
expect(result.current.spanFilterMatches?.size).toBe(1); expect(result.current.spanFilterMatches?.size).toBe(1);
expect(result.current.spanFilterMatches?.has('span1')).toBe(true); expect(result.current.spanFilterMatches?.has('span1')).toBe(true);
}); });
it('works without spans', async () => { it('works without spans', async () => {
const { result } = renderHook(() => useSearchNewTraceView()); const { result } = renderHook(() => useSearchNewTraceViewHeader());
act(() => result.current.setNewTraceViewSearch({ ...defaultFilters, serviceName: 'service1' })); act(() => result.current.setNewTraceViewHeaderSearch({ ...defaultFilters, serviceName: 'service1' }));
expect(result.current.spanFilterMatches).toBe(undefined); expect(result.current.spanFilterMatches).toBe(undefined);
}); });

View File

@ -1,7 +1,7 @@
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import { filterSpansNewTraceView, filterSpans, TraceSpan } from './components'; import { filterSpansNewTraceViewHeader, filterSpans, TraceSpan } from './components';
export interface SearchProps { export interface SearchProps {
serviceName?: string; serviceName?: string;
@ -41,16 +41,16 @@ export const defaultFilters = {
* Controls the state of search input that highlights spans if they match the search string. * Controls the state of search input that highlights spans if they match the search string.
* @param spans * @param spans
*/ */
export function useSearchNewTraceView(spans?: TraceSpan[]) { export function useSearchNewTraceViewHeader(spans?: TraceSpan[]) {
const [newTraceViewSearch, setNewTraceViewSearch] = useState<SearchProps>(defaultFilters); const [newTraceViewHeaderSearch, setNewTraceViewHeaderSearch] = useState<SearchProps>(defaultFilters);
const spanFilterMatches: Set<string> | undefined = useMemo(() => { const spanFilterMatches: Set<string> | undefined = useMemo(() => {
return spans && filterSpansNewTraceView(newTraceViewSearch, spans); return spans && filterSpansNewTraceViewHeader(newTraceViewHeaderSearch, spans);
}, [newTraceViewSearch, spans]); }, [newTraceViewHeaderSearch, spans]);
return { newTraceViewSearch, setNewTraceViewSearch, spanFilterMatches }; return { newTraceViewHeaderSearch, setNewTraceViewHeaderSearch, spanFilterMatches };
} }
// legacy code that will be removed when the newTraceView feature flag is removed // legacy code that will be removed when the newTraceViewHeader feature flag is removed
export function useSearch(spans?: TraceSpan[]) { export function useSearch(spans?: TraceSpan[]) {
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const spanFindMatches: Set<string> | undefined = useMemo(() => { const spanFindMatches: Set<string> | undefined = useMemo(() => {

View File

@ -39,7 +39,7 @@ export const TracesPanel = ({ data }: PanelProps) => {
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<div ref={topOfViewRef}></div> <div ref={topOfViewRef}></div>
{!config.featureToggles.newTraceView ? ( {!config.featureToggles.newTraceViewHeader ? (
<TracePageSearchBar <TracePageSearchBar
navigable={true} navigable={true}
searchValue={search} searchValue={search}