Add field config to trace search results for better default display (#1733)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: alex-fedotyev

cspell.config.json

@@ -55,6 +55,7 @@
     "networkidle",
     "nofile",
     "nolint",
+    "operationname",
     "Nonproxy",
     "openfeature",
     "oper",
@@ -69,6 +70,7 @@
     "regexes",
     "schemads",
     "sdkproxy",
+    "servicename",
     "shopspring",
     "singlequote",
     "slvrtrn",

src/data/utils.test.ts

@@ -1,5 +1,6 @@
 import { ColumnHint, QueryBuilderOptions, QueryType } from 'types/queryBuilder';
 import {
+  applyTraceSearchFieldConfig,
   columnLabelToPlaceholder,
   dataFrameHasLogLabelWithName,
   isBuilderOptionsRunnable,
@@ -110,6 +111,116 @@ describe('columnLabelToPlaceholder', () => {
   });
 });
 
+describe('applyTraceSearchFieldConfig', () => {
+  const buildTraceSearchRequestResponse = (
+    fields: Field[],
+    builderOptions: Partial<QueryBuilderOptions> = {}
+  ): [DataQueryRequest<CHQuery>, DataQueryResponse] => {
+    const inputQuery: CHBuilderQuery = {
+      refId: 'A',
+      editorType: EditorType.Builder,
+      builderOptions: {
+        database: 'default',
+        table: 'otel_traces',
+        queryType: QueryType.Traces,
+        ...builderOptions,
+      },
+      pluginVersion: '',
+      rawSql: '',
+    };
+
+    const request: DataQueryRequest<CHQuery> = {
+      requestId: '',
+      interval: '',
+      intervalMs: 0,
+      range: {} as any,
+      scopedVars: {} as any,
+      targets: [inputQuery],
+      timezone: '',
+      app: CoreApp.Explore,
+      startTime: 0,
+    };
+
+    const data: DataFrame[] = [{
+      fields,
+      length: 1,
+      refId: 'A',
+    }];
+    const response: DataQueryResponse = { data };
+
+    return [request, response];
+  };
+
+  it('applies field configs to trace search result fields', () => {
+    const fields: Field[] = [
+      { name: 'traceID', type: FieldType.string, config: {}, values: [] },
+      { name: 'serviceName', type: FieldType.string, config: {}, values: [] },
+      { name: 'operationName', type: FieldType.string, config: {}, values: [] },
+      { name: 'startTime', type: FieldType.time, config: {}, values: [] },
+      { name: 'duration', type: FieldType.number, config: {}, values: [] },
+    ];
+
+    const [request, response] = buildTraceSearchRequestResponse(fields);
+    applyTraceSearchFieldConfig(request, response);
+
+    expect(response.data[0].fields[4].config.unit).toBe('ms');
+    expect(response.data[0].fields[4].config.displayName).toBe('Duration');
+    expect(response.data[0].fields[0].config.displayName).toBe('Trace ID');
+    expect(response.data[0].fields[1].config.displayName).toBe('Service Name');
+    expect(response.data[0].fields[2].config.displayName).toBe('Operation Name');
+    expect(response.data[0].fields[3].config.displayName).toBe('Start Time');
+  });
+
+  it('does not apply field configs to trace ID mode queries', () => {
+    const fields: Field[] = [
+      { name: 'duration', type: FieldType.number, config: {}, values: [] },
+    ];
+
+    const [request, response] = buildTraceSearchRequestResponse(fields, {
+      meta: { isTraceIdMode: true, traceId: 'abc123' },
+    });
+    applyTraceSearchFieldConfig(request, response);
+
+    expect(response.data[0].fields[0].config.unit).toBeUndefined();
+  });
+
+  it('does not apply field configs to non-trace queries', () => {
+    const fields: Field[] = [
+      { name: 'duration', type: FieldType.number, config: {}, values: [] },
+    ];
+
+    const [request, response] = buildTraceSearchRequestResponse(fields, {
+      queryType: QueryType.Table,
+    });
+    applyTraceSearchFieldConfig(request, response);
+
+    expect(response.data[0].fields[0].config.unit).toBeUndefined();
+  });
+
+  it('preserves existing field config properties', () => {
+    const fields: Field[] = [
+      { name: 'duration', type: FieldType.number, config: { decimals: 2 }, values: [] },
+    ];
+
+    const [request, response] = buildTraceSearchRequestResponse(fields);
+    applyTraceSearchFieldConfig(request, response);
+
+    expect(response.data[0].fields[0].config.unit).toBe('ms');
+    expect(response.data[0].fields[0].config.decimals).toBe(2);
+  });
+
+  it('does not modify fields that have no matching config', () => {
+    const fields: Field[] = [
+      { name: 'customColumn', type: FieldType.string, config: {}, values: [] },
+    ];
+
+    const [request, response] = buildTraceSearchRequestResponse(fields);
+    applyTraceSearchFieldConfig(request, response);
+
+    expect(response.data[0].fields[0].config).toEqual({});
+  });
+});
+
 describe('transformQueryResponseWithTraceAndLogLinks', () => {
   const buildTestRequestResponse = (
     builderOptions: Partial<QueryBuilderOptions>

src/data/utils.ts

@@ -1,4 +1,4 @@
-import { CoreApp, DataFrame, DataQueryRequest, DataQueryResponse } from '@grafana/data';
+import { CoreApp, DataFrame, DataQueryRequest, DataQueryResponse, FieldConfig } from '@grafana/data';
 import {
   ColumnHint,
   FilterOperator,
@@ -121,6 +121,60 @@ export const tryApplyColumnHints = (columns: SelectedColumn[], hintsToColumns?:
  */
 export const columnLabelToPlaceholder = (label: string) => label.toLowerCase().replace(/ /g, '_');
 
+/**
+ * Field config map for trace search result columns.
+ * Maps column name (lowercase) to Grafana FieldConfig for better default display.
+ */
+const traceSearchFieldConfigs: Record<string, FieldConfig> = {
+  duration: {
+    unit: 'ms',
+    displayName: 'Duration',
+  },
+  starttime: {
+    displayName: 'Start Time',
+  },
+  servicename: {
+    displayName: 'Service Name',
+  },
+  operationname: {
+    displayName: 'Operation Name',
+  },
+  traceid: {
+    displayName: 'Trace ID',
+  },
+};
+
+/**
+ * Applies field configs to trace search result frames for better default display.
+ * Trace search results are table-format frames from trace queries (non-traceIdMode).
+ */
+export const applyTraceSearchFieldConfig = (req: DataQueryRequest<CHQuery>, res: DataQueryResponse): void => {
+  res.data.forEach((frame: DataFrame) => {
+    const originalQuery = req.targets.find((t) => t.refId === frame.refId) as CHBuilderQuery;
+    if (!originalQuery) {
+      return;
+    }
+
+    const isTraceSearch = originalQuery.editorType === EditorType.Builder &&
+      originalQuery.builderOptions.queryType === QueryType.Traces &&
+      !originalQuery.builderOptions.meta?.isTraceIdMode;
+
+    if (!isTraceSearch) {
+      return;
+    }
+
+    frame.fields.forEach((field) => {
+      const fieldConfig = traceSearchFieldConfigs[field.name.toLowerCase()];
+      if (fieldConfig) {
+        field.config = {
+          ...field.config,
+          ...fieldConfig,
+        };
+      }
+    });
+  });
+};
+
 /**
  * Mutates the DataQueryResponse to include trace/log links on the traceID field.
  * The link will open a second query editor in split view
@@ -133,6 +187,8 @@ export const transformQueryResponseWithTraceAndLogLinks = (
   req: DataQueryRequest<CHQuery>,
   res: DataQueryResponse
 ): DataQueryResponse => {
+  applyTraceSearchFieldConfig(req, res);
+
   res.data.forEach((frame: DataFrame) => {
     const originalQuery = req.targets.find((t) => t.refId === frame.refId) as CHBuilderQuery;
     if (!originalQuery) {