Traces: Filtering by span id (#71275)

* Filter by span id

* Update test

public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.test.tsx

@@ -171,14 +171,15 @@ describe('SpanFilters', () => {
       expect(container?.childNodes[1].textContent).toBe('ProcessKey1');
       expect(container?.childNodes[2].textContent).toBe('TagKey0');
       expect(container?.childNodes[3].textContent).toBe('TagKey1');
-      expect(container?.childNodes[4].textContent).toBe('kind');
-      expect(container?.childNodes[5].textContent).toBe('library.name');
-      expect(container?.childNodes[6].textContent).toBe('library.version');
-      expect(container?.childNodes[7].textContent).toBe('status');
-      expect(container?.childNodes[8].textContent).toBe('status.message');
-      expect(container?.childNodes[9].textContent).toBe('trace.state');
-      expect(container?.childNodes[10].textContent).toBe('LogKey0');
-      expect(container?.childNodes[11].textContent).toBe('LogKey1');
+      expect(container?.childNodes[4].textContent).toBe('id');
+      expect(container?.childNodes[5].textContent).toBe('kind');
+      expect(container?.childNodes[6].textContent).toBe('library.name');
+      expect(container?.childNodes[7].textContent).toBe('library.version');
+      expect(container?.childNodes[8].textContent).toBe('status');
+      expect(container?.childNodes[9].textContent).toBe('status.message');
+      expect(container?.childNodes[10].textContent).toBe('trace.state');
+      expect(container?.childNodes[11].textContent).toBe('LogKey0');
+      expect(container?.childNodes[12].textContent).toBe('LogKey1');
     });
   });
 

public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx

@@ -32,7 +32,7 @@ import {
 } from '@grafana/ui';
 
 import { defaultFilters, randomId, SearchProps, Tag } from '../../../useSearch';
-import { KIND, LIBRARY_NAME, LIBRARY_VERSION, STATUS, STATUS_MESSAGE, TRACE_STATE } from '../../constants/span';
+import { KIND, LIBRARY_NAME, LIBRARY_VERSION, STATUS, STATUS_MESSAGE, TRACE_STATE, ID } from '../../constants/span';
 import { Trace } from '../../types';
 import NewTracePageSearchBar from '../NewTracePageSearchBar';
 
@@ -140,6 +140,7 @@ export const SpanFilters = memo((props: SpanFilterProps) => {
         if (span.traceState) {
           keys.push(TRACE_STATE);
         }
+        keys.push(ID);
       });
       keys = uniq(keys).sort();
       logKeys = uniq(logKeys).sort();
@@ -200,6 +201,9 @@ export const SpanFilters = memo((props: SpanFilterProps) => {
             values.push(span.traceState);
           }
           break;
+        case ID:
+          values.push(span.spanID);
+          break;
         default:
           break;
       }

public/app/features/explore/TraceView/components/constants/span.ts

@@ -4,3 +4,4 @@ export const STATUS_MESSAGE = 'status.message';
 export const LIBRARY_NAME = 'library.name';
 export const LIBRARY_VERSION = 'library.version';
 export const TRACE_STATE = 'trace.state';
+export const ID = 'id';

public/app/features/explore/TraceView/components/utils/filter-spans.test.ts

@@ -190,7 +190,7 @@ describe('filterSpans', () => {
     ).toEqual(new Set([spanID0]));
   });
 
-  it('should return spans whose kind, statusCode, statusMessage, libraryName, libraryVersion or traceState match a filter', () => {
+  it('should return spans whose kind, statusCode, statusMessage, libraryName, libraryVersion, traceState, or id match a filter', () => {
     expect(
       filterSpansNewTraceViewHeader({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'kind' }] }, spans)
     ).toEqual(new Set([spanID0, spanID2]));
@@ -299,6 +299,21 @@ describe('filterSpans', () => {
         spans
       )
     ).toEqual(new Set([spanID2]));
+    expect(
+      filterSpansNewTraceViewHeader({ ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'id' }] }, spans)
+    ).toEqual(new Set([spanID0, spanID2]));
+    expect(
+      filterSpansNewTraceViewHeader(
+        { ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'id', value: 'span-id-0' }] },
+        spans
+      )
+    ).toEqual(new Set([spanID0]));
+    expect(
+      filterSpansNewTraceViewHeader(
+        { ...defaultFilters, tags: [{ ...defaultTagFilter, key: 'id', operator: '!=', value: 'span-id-0' }] },
+        spans
+      )
+    ).toEqual(new Set([spanID2]));
   });
 
   it('should return spans whose process.tags kv.key match a filter', () => {

public/app/features/explore/TraceView/components/utils/filter-spans.tsx

@@ -15,7 +15,7 @@
 import { SpanStatusCode } from '@opentelemetry/api';
 
 import { SearchProps, Tag } from '../../useSearch';
-import { KIND, LIBRARY_NAME, LIBRARY_VERSION, STATUS, STATUS_MESSAGE, TRACE_STATE } from '../constants/span';
+import { KIND, LIBRARY_NAME, LIBRARY_VERSION, STATUS, STATUS_MESSAGE, TRACE_STATE, ID } from '../constants/span';
 import { TNil, TraceKeyValuePair, TraceSpan } from '../types';
 
 // filter spans where all filters added need to be true for each individual span that is returned
@@ -74,7 +74,8 @@ const getTagMatches = (spans: TraceSpan[], tags: Tag[]) => {
             (span.instrumentationLibraryVersion &&
               tag.key === LIBRARY_VERSION &&
               tag.value === span.instrumentationLibraryVersion) ||
-            (span.traceState && tag.key === TRACE_STATE && tag.value === span.traceState)
+            (span.traceState && tag.key === TRACE_STATE && tag.value === span.traceState) ||
+            (tag.key === ID && tag.value === span.spanID)
           ) {
             return getReturnValue(tag.operator, true);
           }
@@ -88,7 +89,8 @@ const getTagMatches = (spans: TraceSpan[], tags: Tag[]) => {
             (span.statusMessage && tag.key === STATUS_MESSAGE) ||
             (span.instrumentationLibraryName && tag.key === LIBRARY_NAME) ||
             (span.instrumentationLibraryVersion && tag.key === LIBRARY_VERSION) ||
-            (span.traceState && tag.key === TRACE_STATE)
+            (span.traceState && tag.key === TRACE_STATE) ||
+            tag.key === ID
           ) {
             return getReturnValue(tag.operator, true);
           }