Trace Details: Format duration in ms (#10719)

* format duration in ms

Signed-off-by: Jessica Lew <[email protected]>

* Changeset file for PR #10719 created/updated

* include data prepper schema column

Signed-off-by: Jessica Lew <[email protected]>

---------

Signed-off-by: Jessica Lew <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: Adam Tackett <[email protected]>

Author: 3 people

changelogs/fragments/10719.yml

@@ -0,0 +1,2 @@
+fix:
+- Format duration in ms for discover traces table ([#10719](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10719))

src/plugins/explore/public/components/data_table/table_cell/table_cell.test.tsx

@@ -8,7 +8,6 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { TableCell, ITableCellProps } from './table_cell';
 import { useDatasetContext } from '../../../application/context';
 import { useTraceFlyoutContext } from '../../../application/pages/traces/trace_flyout/trace_flyout_context';
-import { isOnTracesPage } from './trace_utils/trace_utils';
 
 jest.mock('../../../application/context', () => ({
   useDatasetContext: jest.fn(),
@@ -33,6 +32,7 @@ describe('TableCell', () => {
     onFilter: mockOnFilter,
     fieldMapping: { value: 'test' },
     isTimeField: false,
+    isOnTracesPage: false,
   };
 
   beforeEach(() => {
@@ -133,6 +133,37 @@ describe('TableCell', () => {
     expect(screen.getByTestId('osdDocTableCellDataField')).toBeInTheDocument();
   });
 
+  describe('Duration cell functionality', () => {
+    it('renders duration in milliseconds on traces page', () => {
+      render(
+        <TableCell
+          {...defaultProps}
+          columnId="durationNano"
+          sanitizedCellValue="<span>2,000,000</span>"
+          isOnTracesPage={true}
+        />
+      );
+
+      const cellContent = screen.getByTestId('osdDocTableCellDataField');
+      expect(cellContent).toBeInTheDocument();
+      expect(cellContent.innerHTML).toBe('<span>2 ms</span>');
+    });
+
+    it('renders regular cell content when not on traces page', () => {
+      render(
+        <TableCell
+          {...defaultProps}
+          columnId="durationNano"
+          sanitizedCellValue="<span>2,000,000</span>"
+        />
+      );
+
+      const cellContent = screen.getByTestId('osdDocTableCellDataField');
+      expect(cellContent).toBeInTheDocument();
+      expect(cellContent.innerHTML).toBe('<span>2,000,000</span>');
+    });
+  });
+
   // Tests for trace timeline functionality
   describe('Span ID link functionality', () => {
     const spanIdProps: ITableCellProps = {

src/plugins/explore/public/components/data_table/table_cell/table_cell.tsx

@@ -10,7 +10,13 @@ import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { DocViewFilterFn, OpenSearchSearchHit } from '../../../types/doc_views_types';
 import { useDatasetContext } from '../../../application/context';
-import { isSpanIdColumn, TraceFlyoutButton, SpanIdLink } from './trace_utils/trace_utils';
+import {
+  isSpanIdColumn,
+  TraceFlyoutButton,
+  SpanIdLink,
+  DurationTableCell,
+  isDurationColumn,
+} from './trace_utils/trace_utils';
 
 export interface ITableCellProps {
   columnId: string;
@@ -46,6 +52,8 @@ export const TableCellUI = ({
         dataset={dataset}
         setIsRowSelected={setIsRowSelected}
       />
+    ) : isOnTracesPage && isDurationColumn(columnId) ? (
+      <DurationTableCell sanitizedCellValue={sanitizedCellValue} />
     ) : (
       <span
         className="exploreDocTableCell__dataField"

src/plugins/explore/public/components/data_table/table_cell/trace_utils/trace_utils.test.tsx

@@ -8,6 +8,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import {
   isOnTracesPage,
   isSpanIdColumn,
+  isDurationColumn,
   extractFieldFromRowData,
   buildTraceDetailsUrl,
   getTraceDetailsUrlParams,
@@ -16,6 +17,7 @@ import {
   TraceFlyoutButton,
   navigateToTraceDetailsWithSpan,
   getStatusCodeColor,
+  DurationTableCell,
 } from './trace_utils';
 
 const mockLocation = {
@@ -126,6 +128,32 @@ describe('trace_utils', () => {
     });
   });
 
+  describe('isDurationColumn', () => {
+    it('should return true for duration columns', () => {
+      expect(isDurationColumn('durationNano')).toBe(true);
+      expect(isDurationColumn('durationInNanos')).toBe(true);
+    });
+
+    it('should return false for other column names', () => {
+      expect(isDurationColumn('duration')).toBe(false);
+      expect(isDurationColumn('durationMs')).toBe(false);
+      expect(isDurationColumn('spanId')).toBe(false);
+      expect(isDurationColumn('traceId')).toBe(false);
+      expect(isDurationColumn('')).toBe(false);
+    });
+
+    it('should be case sensitive', () => {
+      expect(isDurationColumn('durationnano')).toBe(false);
+      expect(isDurationColumn('DURATIONNANO')).toBe(false);
+      expect(isDurationColumn('DurationInNanos')).toBe(false);
+    });
+
+    it('should handle null and undefined', () => {
+      expect(isDurationColumn(null as any)).toBe(false);
+      expect(isDurationColumn(undefined as any)).toBe(false);
+    });
+  });
+
   describe('extractFieldFromRowData', () => {
     const TRACE_ID_FIELDS = [
       'traceId',
@@ -270,6 +298,18 @@ describe('trace_utils', () => {
     });
   });
 
+  describe('DurationTableCell', () => {
+    it('should render duration in milliseconds', () => {
+      render(<DurationTableCell sanitizedCellValue="<span>2,000,000</span>" />);
+      expect(screen.getByText('2 ms')).toBeInTheDocument();
+    });
+
+    it('should handle negative values', () => {
+      render(<DurationTableCell sanitizedCellValue="-1000000" />);
+      expect(screen.getByText('0 ms')).toBeInTheDocument();
+    });
+  });
+
   describe('buildTraceDetailsUrl', () => {
     beforeEach(() => {
       mockLocation.pathname = '/app/explore/traces';

src/plugins/explore/public/components/data_table/table_cell/trace_utils/trace_utils.tsx

@@ -11,6 +11,10 @@ import { OpenSearchSearchHit } from '../../../../types/doc_views_types';
 import { DataView as Dataset } from '../../../../../../data/common';
 import './trace_utils.scss';
 import { useTraceFlyoutContext } from '../../../../application/pages/traces/trace_flyout/trace_flyout_context';
+import {
+  round,
+  nanoToMilliSec,
+} from '../../../../application/pages/traces/trace_details/public/utils/helper_functions';
 
 export const isOnTracesPage = (): boolean => {
   return (
@@ -23,6 +27,10 @@ export const isSpanIdColumn = (columnId: string): boolean => {
   return columnId === 'spanId' || columnId === 'span_id' || columnId === 'spanID';
 };
 
+export const isDurationColumn = (columnId: string) => {
+  return columnId === 'durationNano' || columnId === 'durationInNanos';
+};
+
 export const extractFieldFromRowData = (
   rowData: OpenSearchSearchHit<Record<string, unknown>>,
   fields: readonly string[]
@@ -223,3 +231,22 @@ export const getStatusCodeColor = (statusCode: number | undefined): string => {
   if (statusCode >= 500 && statusCode < 600) return 'danger';
   return 'default';
 };
+
+interface DurationTableCellProps {
+  sanitizedCellValue: string;
+}
+
+export const DurationTableCell: React.FC<DurationTableCellProps> = ({ sanitizedCellValue }) => {
+  const duration = sanitizedCellValue
+    .replace(/<[^>]*>/g, '')
+    .replace(/,/g, '')
+    .trim();
+
+  const durationLabel = `${round(nanoToMilliSec(Math.max(0, Number(duration))), 2)} ms`;
+
+  return (
+    <span className="exploreDocTableCell__dataField" data-test-subj="osdDocTableCellDataField">
+      <span>{durationLabel}</span>
+    </span>
+  );
+};

src/plugins/explore/public/helpers/data_table_helper.test.tsx

@@ -198,6 +198,7 @@ describe('data_table_helper', () => {
       const columns = [
         'name',
         'durationNano',
+        'durationInNanos',
         'resource.attributes.service.name',
         'attributes.http.status_code',
         'status.code',
@@ -208,10 +209,11 @@ describe('data_table_helper', () => {
 
       expect(result[0].displayName).toBe('Service Identifier');
       expect(result[1].displayName).toBe('Duration');
-      expect(result[2].displayName).toBe('Service');
-      expect(result[3].displayName).toBe('Status Code');
-      expect(result[4].displayName).toBe('Status');
-      expect(result[5].displayName).toBe('SpanID');
+      expect(result[2].displayName).toBe('Duration');
+      expect(result[3].displayName).toBe('Service');
+      expect(result[4].displayName).toBe('Status Code');
+      expect(result[5].displayName).toBe('Status');
+      expect(result[6].displayName).toBe('SpanID');
     });
   });
 });

src/plugins/explore/public/helpers/data_table_helper.tsx

@@ -81,6 +81,7 @@ function getColumnDisplayName(column: string): string {
     case 'name':
       return 'Service Identifier';
     case 'durationNano':
+    case 'durationInNanos':
       return 'Duration';
     case 'resource.attributes.service.name':
       return 'Service';