[Agent Traces] improve UX and use discover data table (opensearch-project#11513)

Signed-off-by: Joshua Li <joshuali925@gmail.com>

Author: joshuali925

cypress/integration/core_opensearch_dashboards/opensearch_dashboards/apps/explore/04/agent_traces.spec.js

@@ -33,7 +33,7 @@ const selectDatasetAndWaitForData = () => {
 
   cy.osd.setTopNavDate(AGENT_TRACES_START, AGENT_TRACES_END);
 
-  cy.get('.agentTracesTable__container .euiBasicTable tbody tr', { timeout: 15000 }).should(
+  cy.get('.agentTracesTable__container .agentTraces-table tbody tr', { timeout: 15000 }).should(
     'have.length.greaterThan',
     0
   );
@@ -79,7 +79,9 @@ const agentTracesTestSuite = () => {
       });
 
       cy.get('.agentTracesTable__container').should('be.visible');
-      cy.contains('Showing').should('be.visible');
+      cy.get('.agentTracesTable__container')
+        .contains(/\d+ of \d+/)
+        .should('be.visible');
 
       cy.get('.agentTraces__categoryBadge').contains('Agent').should('exist');
     });
@@ -97,7 +99,10 @@ const agentTracesTestSuite = () => {
 
       cy.get('.agentTracesTabs__panel--active', { timeout: 15000 }).within(() => {
         cy.get('.agentTracesTable__container').should('exist');
-        cy.get('.euiBasicTable tbody tr', { timeout: 15000 }).should('have.length.greaterThan', 0);
+        cy.get('.agentTraces-table tbody tr', { timeout: 15000 }).should(
+          'have.length.greaterThan',
+          0
+        );
       });
     });
     it('should expand a trace row to show child spans', () => {
@@ -121,7 +126,7 @@ const agentTracesTestSuite = () => {
     it('should open flyout when clicking a trace row', () => {
       selectDatasetAndWaitForData();
 
-      cy.get('.agentTracesTable__clickableRow').first().click();
+      cy.get('[data-test-subj="agentTracesTimeLink"]').first().click();
       cy.get('.agentTracesFlyout', { timeout: 15000 }).should('be.visible');
       cy.get('.agentTracesFlyout').within(() => {
         cy.get('#trace-details-flyout').should('contain.text', 'POST /plan');
@@ -139,9 +144,9 @@ const agentTracesTestSuite = () => {
 
         cy.get('.agentTracesFlyout__detailPanel').should('be.visible');
         cy.contains('Metadata').should('be.visible');
-        cy.contains('OPERATION').should('be.visible');
-        cy.contains('DURATION').should('be.visible');
-        cy.contains('SPAN ID').should('be.visible');
+        cy.contains('Operation:').should('be.visible');
+        cy.contains('Duration:').should('be.visible');
+        cy.contains('Span ID:').should('be.visible');
 
         cy.contains('Input / Output').should('be.visible');
       });
@@ -153,16 +158,16 @@ const agentTracesTestSuite = () => {
     it('should support column sorting on traces table', () => {
       selectDatasetAndWaitForData();
 
-      cy.get('.euiBasicTable thead').contains('th', 'Name').click();
+      cy.getElementByTestId('docTableHeaderFieldSort_name').click();
 
-      cy.get('.agentTracesTable__container .euiBasicTable tbody tr').should(
+      cy.get('.agentTracesTable__container .agentTraces-table tbody tr').should(
         'have.length.greaterThan',
         0
       );
 
-      cy.get('.euiBasicTable thead').contains('th', 'Name').click();
+      cy.getElementByTestId('docTableHeaderFieldSort_name').click();
 
-      cy.get('.agentTracesTable__container .euiBasicTable tbody tr').should(
+      cy.get('.agentTracesTable__container .agentTraces-table tbody tr').should(
         'have.length.greaterThan',
         0
       );

src/plugins/agent_traces/common/index.ts

@@ -19,3 +19,38 @@ export const AGENT_TRACES_SPANS_TAB_ID = 'spans';
 export enum AgentTracesFlavor {
   Traces = 'traces',
 }
+
+/** Hardcoded default columns for agent traces / spans tables. These are always
+ *  present and cannot be removed by the user via the fields sidebar. */
+export const AGENT_TRACES_DEFAULT_COLUMNS: readonly string[] = [
+  'kind',
+  'name',
+  'status',
+  'latency',
+  'totalTokens',
+  'input',
+  'output',
+];
+
+/** Map from virtual column key to its user-facing display name. */
+export const AGENT_TRACES_COLUMN_DISPLAY_NAMES: Record<string, string> = {
+  kind: 'Kind',
+  name: 'Name',
+  status: 'Status',
+  latency: 'Latency',
+  totalTokens: 'Tokens',
+  input: 'Input',
+  output: 'Output',
+};
+
+/** Virtual columns that support sorting in the DataTable. */
+export const AGENT_TRACES_SORTABLE_COLUMNS = new Set<string>(['kind', 'name', 'status', 'latency']);
+
+/** Map from virtual column key to the underlying source field(s) used for details/filtering. */
+export const AGENT_TRACES_VIRTUAL_COLUMN_SOURCE_FIELDS: Record<string, string> = {
+  kind: 'attributes.gen_ai.operation.name',
+  status: 'status.code',
+  latency: 'durationInNanos',
+  input: 'attributes.gen_ai.input.messages',
+  output: 'attributes.gen_ai.output.messages',
+};

src/plugins/agent_traces/public/application/hooks/editor_hooks/use_change_query_editor/use_change_query_editor.ts

@@ -13,7 +13,13 @@ import {
   selectQuery,
   selectIsQueryEditorDirty,
 } from '../../../utils/state_management/selectors';
-import { DataViewField, IndexPatternField } from '../../../../../../data/common';
+import {
+  DataViewField,
+  Filter,
+  IndexPatternField,
+  IFieldType,
+  IIndexPattern,
+} from '../../../../../../data/common';
 import { opensearchFilters } from '../../../../../../data/public';
 import { useDatasetContext } from '../../../context';
 import { EditorMode } from '../../../utils/state_management/types';
@@ -38,18 +44,33 @@ export const useChangeQueryEditor = () => {
   const isQueryEditorDirty = useSelector(selectIsQueryEditorDirty);
 
   const onAddFilter = useCallback(
-    (field: string | IndexPatternField | DataViewField, values: string, operation: '+' | '-') => {
+    (
+      field: string | IndexPatternField | DataViewField,
+      values: string | string[],
+      operation: '+' | '-'
+    ) => {
       if (!dataset) return;
       const languageConfig = queryString.getLanguageService().getLanguage(query.language);
       if (!languageConfig) return;
 
-      const newFilters = opensearchFilters.generateFilters(
-        filterManager,
-        field,
-        values,
-        operation,
-        dataset.id ?? ''
-      );
+      let newFilters: Filter[];
+      // Array values → build a single "phrases" filter (OR condition)
+      if (Array.isArray(values) && values.length > 1) {
+        const fieldObj = (typeof field === 'string' ? { name: field } : field) as IFieldType;
+        const indexPattern = { id: dataset.id ?? '' } as IIndexPattern;
+        const filter = opensearchFilters.buildPhrasesFilter(fieldObj, values, indexPattern);
+        filter.meta.negate = operation === '-';
+        newFilters = [filter];
+      } else {
+        const singleValue = Array.isArray(values) ? values[0] : values;
+        newFilters = opensearchFilters.generateFilters(
+          filterManager,
+          field,
+          singleValue,
+          operation,
+          dataset.id ?? ''
+        );
+      }
       setEditorText((text) => {
         const newText =
           editorMode === EditorMode.Prompt

src/plugins/agent_traces/public/application/pages/traces/flyout/flyout_detail_panel.test.tsx

@@ -41,7 +41,10 @@ describe('FlyoutDetailPanel', () => {
     startTime: '01/01/2025, 12:00:00 AM',
     endTime: '01/01/2025, 12:00:01 AM',
     latency: '150ms',
+    durationNanos: 150000000,
     totalTokens: 200,
+    inputTokens: 100,
+    outputTokens: 100,
     totalCost: '—',
   };
 
@@ -73,9 +76,9 @@ describe('FlyoutDetailPanel', () => {
       />
     );
 
-    expect(screen.getByText('OPERATION')).toBeInTheDocument();
+    expect(screen.getByText(/Operation:/)).toBeInTheDocument();
     expect(screen.getByText('chat')).toBeInTheDocument();
-    expect(screen.getByText('DURATION')).toBeInTheDocument();
+    expect(screen.getByText(/Duration:/)).toBeInTheDocument();
     expect(screen.getByText('150ms')).toBeInTheDocument();
   });
 
@@ -92,7 +95,7 @@ describe('FlyoutDetailPanel', () => {
     expect(dashes.length).toBeGreaterThan(0);
   });
 
-  it('renders status as OK for success', () => {
+  it('renders span ID in a badge', () => {
     render(
       <FlyoutDetailPanel
         selectedNode={mockTreeNode}
@@ -101,21 +104,7 @@ describe('FlyoutDetailPanel', () => {
       />
     );
 
-    expect(screen.getByText('OK')).toBeInTheDocument();
-  });
-
-  it('renders status as ERROR for error trace rows', () => {
-    const errorRow: TraceRow = { ...mockTraceRow, status: 'error' };
-    const errorNode: TreeNode = { ...mockTreeNode, traceRow: errorRow };
-
-    render(
-      <FlyoutDetailPanel
-        selectedNode={errorNode}
-        selectedTraceRow={errorRow}
-        onSelectNode={jest.fn()}
-      />
-    );
-
-    expect(screen.getByText('ERROR')).toBeInTheDocument();
+    expect(screen.getByText(/Span ID:/)).toBeInTheDocument();
+    expect(screen.getByText('span-1-full-id-abcdef')).toBeInTheDocument();
   });
 });