[Backport 2.x] TraceView - Optimization of queries

.cypress/integration/app_analytics_test/app_analytics.spec.js

@@ -221,7 +221,7 @@
     cy.get('[data-test-subj="searchAutocompleteTextArea"]').click();
     cy.focused().type('       source = ');
     cy.focused().type('{enter}');
     cy.get('[data-test-subj="createAndSetButton"]').click({ force: true });
     cy.get('.euiTableRow').should('have.length.lessThan', 1);
     cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree);
     cy.get('.euiBreadcrumb[href="#/"]').click();
@@ -308,8 +308,8 @@
     cy.get('[data-test-subj="Number of connected servicesDescriptionList"]').should('contain', '3');
     cy.get('[data-text="Errors"]').eq(1).click(); // Selecting errors tab within flyout
     cy.get('.ytitle').contains('Error rate').should('exist');
     cy.get('[data-test-subj="dataGridRowCell"]').eq(0).click({ force: true }); // absolutely doesn't click no matter what unless theres a double click
     cy.get('button[data-test-subj="spanId-link"]').eq(0).click({ force: true });
     cy.get('[data-test-subj="spanDetailFlyout"]').contains('Span detail').should('be.visible');
     cy.get('[data-test-subj="ServiceDescriptionList"]').should('contain', 'authentication');
     cy.get('[data-test-subj="euiFlyoutCloseButton"]').click();
@@ -322,7 +322,7 @@
     cy.get('[title="03f9c770db5ee2f1caac0afc36db49ba"]').click();
     cy.get('[data-test-subj="traceDetailFlyoutTitle"]').should('be.visible');
     cy.get('[data-test-subj="traceDetailFlyout"]').within(($flyout) => {
-      cy.get('[data-test-subj="LatencyDescriptionList"]').should('contain', '224.99');
+      cy.get('[data-test-subj="LatencyDescriptionList"]').should('contain', '225.00');
     });
     cy.get('[data-test-subj="euiFlyoutCloseButton"]').click();
     cy.get('[data-test-subj="traceDetailFlyout"]').should('not.exist');
@@ -396,7 +396,7 @@
     cy.get('.euiTab[id="availability-panel"]').click();
 
     cy.get('[data-test-subj="comboBoxInput"]').click();
     cy.get('[data-test-subj="comboBoxOptionsList "] button span')
       .contains('Time series')
       .click({ force: true });
     cy.focused().type('{enter}');
@@ -440,7 +440,7 @@
     cy.get('[data-test-subj="main-content-visTab"]').click();
     cy.get('.euiTab[id="availability-panel"]').click();
     cy.get('[data-test-subj="comboBoxInput"]').click();
     cy.get('[data-test-subj="comboBoxOptionsList "] button span')
       .contains('Time series')
       .click({ force: true });
     cy.get('[data-test-subj="addAvailabilityButton"]').click();

.cypress/integration/trace_analytics_test/trace_analytics_traces.spec.js

@@ -97,17 +97,17 @@
 
   it('Renders data grid, flyout and filters', () => {
     cy.get('.panel-title-count').contains('(11)').should('exist');
     cy.get('.euiButton__text[title="Span list"]').click({ force: true });
     cy.contains('2 columns hidden').should('exist');
 
     cy.get('.euiLink').contains(SPAN_ID).trigger('mouseover', { force: true });
     cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true });
     cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true }); // first click doesn't go through eui data grid
 
     cy.contains('Span detail').should('exist');
     cy.contains('Span attributes').should('exist');
     cy.get('.euiTextColor').contains('Span ID').trigger('mouseover');
     cy.get('.euiButtonIcon[aria-label="span-flyout-filter-icon"').click({ force: true });
 
     cy.get('.euiBadge__text').contains('spanId: ').should('exist');
     cy.contains('Spans (1)').should('exist');
@@ -282,4 +282,21 @@
     cy.contains('Time spent by service').should('exist');
     cy.get("[data-test-subj='span-gantt-chart-panel']").should('exist');
   });
+
+  it('Checks tree view for specific traceId in Jaeger mode', () => {
+    cy.contains('15b0b4004a651c4c').click();
+    cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
+
+    cy.get('.euiButtonGroup').contains('Tree view').click();
+    cy.get("[data-test-subj='treeExpandAll']").should('exist');
+    cy.get("[data-test-subj='treeCollapseAll']").should('exist');
+
+    // Waiting time for render to complete
+    cy.get("[data-test-subj='treeExpandAll']").click();
+    cy.get("[data-test-subj='treeCollapseAll']").click();
+
+    cy.get("[data-test-subj='treeViewExpandArrow']").should('have.length', 1);
+    cy.get("[data-test-subj='treeExpandAll']").click();
+    cy.get("[data-test-subj='treeViewExpandArrow']").should('have.length.greaterThan', 1);
+  });
 });

public/components/application_analytics/components/flyout_components/trace_detail_render.tsx

@@ -9,12 +9,12 @@ import { HttpStart } from '../../../../../../../src/core/public';
 import { TraceAnalyticsMode } from '../../../../../common/types/trace_analytics';
 import { ServiceBreakdownPanel } from '../../../trace_analytics/components/traces/service_breakdown_panel';
 import { SpanDetailPanel } from '../../../trace_analytics/components/traces/span_detail_panel';
-import {
-  handlePayloadRequest,
-  handleServicesPieChartRequest,
-  handleTraceViewRequest,
-} from '../../../trace_analytics/requests/traces_request_handler';
+import { handlePayloadRequest } from '../../../trace_analytics/requests/traces_request_handler';
 import { getListItem } from '../../helpers/utils';
+import {
+  getOverviewFields,
+  getServiceBreakdownData,
+} from '../../../trace_analytics/components/traces/trace_view_helpers';
 
 interface TraceDetailRenderProps {
   traceId: string;
@@ -78,6 +78,7 @@ export const TraceDetailRender = ({
           mode={mode}
           dataSourceMDSId={dataSourceMDSId}
           isApplicationFlyout={true}
+          payloadData={payloadData}
         />
         <EuiSpacer size="xs" />
         <EuiHorizontalRule margin="s" />
@@ -95,10 +96,29 @@ export const TraceDetailRender = ({
   }, [traceId, fields, serviceBreakdownData, colorMap, payloadData]);
 
   useEffect(() => {
-    handleTraceViewRequest(traceId, http, fields, setFields, mode);
-    handleServicesPieChartRequest(traceId, http, setServiceBreakdownData, setColorMap, mode);
     handlePayloadRequest(traceId, http, payloadData, setPayloadData, mode);
   }, [traceId]);
 
+  useEffect(() => {
+    if (!payloadData) return;
+
+    try {
+      const parsedPayload = JSON.parse(payloadData);
+      const overview = getOverviewFields(parsedPayload, mode);
+      if (overview) {
+        setFields(overview);
+      }
+
+      const {
+        serviceBreakdownData: queryServiceBreakdownData,
+        colorMap: queryColorMap,
+      } = getServiceBreakdownData(parsedPayload, mode);
+      setServiceBreakdownData(queryServiceBreakdownData);
+      setColorMap(queryColorMap);
+    } catch (error) {
+      console.error('Error processing payloadData:', error);
+    }
+  }, [payloadData, mode]);
+
   return renderContent;
 };

public/components/trace_analytics/components/common/constants.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Conversion factor for nanoseconds to milliseconds
+export const NANOS_TO_MS = 1e6;
+
+export const MILI_TO_SEC = 1000;
+
+export const pieChartColors = [
+  '#7492e7',
+  '#c33d69',
+  '#2ea597',
+  '#8456ce',
+  '#e07941',
+  '#3759ce',
+  '#ce567c',
+  '#9469d6',
+  '#4066df',
+  '#da7596',
+];
+
+export interface Span {
+  traceId: string;
+  spanId: string;
+  traceState: string;
+  parentSpanId: string;
+  name: string;
+  kind: string;
+  startTime: string;
+  endTime: string;
+  durationInNanos: number;
+  serviceName: string;
+  events: any[];
+  links: any[];
+  droppedAttributesCount: number;
+  droppedEventsCount: number;
+  droppedLinksCount: number;
+  traceGroup: string;
+  traceGroupFields: {
+    endTime: string;
+    durationInNanos: number;
+    statusCode: number;
+  };
+  status: {
+    code: number;
+  };
+  instrumentationLibrary: {
+    name: string;
+    version: string;
+  };
+}
+
+export interface ParsedHit {
+  _index: string;
+  _id: string;
+  _score: number;
+  _source: Span;
+  sort?: any[];
+}

public/components/trace_analytics/components/common/helper_functions.tsx

@@ -28,6 +28,7 @@ import { FieldCapResponse } from '../../../common/types';
 import { serviceMapColorPalette } from './color_palette';
 import { FilterType } from './filters/filters';
 import { ServiceObject } from './plots/service_map';
+import { NANOS_TO_MS, ParsedHit } from './constants';
 
 const missingJaegerTracesConfigurationMessage = `The indices required for trace analytics (${JAEGER_INDEX_NAME} and ${JAEGER_SERVICE_INDEX_NAME}) do not exist or you do not have permission to access them.`;
 
@@ -615,3 +616,39 @@ export const generateServiceUrl = (
 
   return url;
 };
+
+/*
+ * Parse an ISO timestamp with up to nanosecond precision.
+ * For example, "2025-01-28T03:12:37.293990144Z" will be converted
+ * to a number representing the total nanoseconds since the Unix epoch.
+ */
+export function parseIsoToNano(iso: string): number {
+  const match = iso.match(/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2})(?:\.(\d+))?Z$/);
+  if (!match) {
+    throw new Error(`Invalid ISO timestamp: ${iso}`);
+  }
+  // Parse the base part using Date.parse (which gives ms)
+  const baseMs = new Date(match[1] + 'Z').getTime();
+  // Get the fractional part (if any), pad to 9 digits for nanosecond precision
+  let fraction = match[2] || '0';
+  fraction = fraction.padEnd(9, '0'); // ensure it has 9 digits
+  return baseMs * NANOS_TO_MS + Number(fraction);
+}
+
+export const parseHits = (payloadData: string): ParsedHit[] => {
+  try {
+    const parsed = JSON.parse(payloadData);
+    let hits: ParsedHit[] = [];
+
+    if (parsed.hits && Array.isArray(parsed.hits.hits)) {
+      hits = parsed.hits.hits;
+    } else if (Array.isArray(parsed)) {
+      hits = parsed;
+    }
+
+    return hits;
+  } catch (error) {
+    console.error('Error processing payloadData:', error);
+    return [];
+  }
+};

public/components/trace_analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap

@@ -135,6 +135,7 @@ exports[`Service breakdown panel component renders service breakdown panel 1`] =
                 data={
                   Array [
                     Object {
+                      "hoverinfo": "label+percent",
                       "hovertemplate": "%{label}<br>%{value:.2f}%<extra></extra>",
                       "labels": Array [
                         "inventory",
@@ -177,6 +178,7 @@ exports[`Service breakdown panel component renders service breakdown panel 1`] =
                   data={
                     Array [
                       Object {
+                        "hoverinfo": "label+percent",
                         "hovertemplate": "%{label}<br>%{value:.2f}%<extra></extra>",
                         "labels": Array [
                           "inventory",

public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_panel.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`SpanDetailPanel component renders correctly with default props 1`] = `
           <EuiFlexItem>
             <PanelTitle
               title="Spans"
-              totalItems={0.5}
+              totalItems={0}
             />
           </EuiFlexItem>
           <EuiFlexItem
@@ -42,7 +42,6 @@ exports[`SpanDetailPanel component renders correctly with default props 1`] = `
               >
                 <EuiButtonGroup
                   idSelected="timeline"
-                  isDisabled={false}
                   legend="Select view of spans"
                   onChange={[Function]}
                   options={
@@ -74,26 +73,7 @@ exports[`SpanDetailPanel component renders correctly with default props 1`] = `
         grow={false}
       >
         <Plt
-          data={
-            Array [
-              Object {
-                "hoverinfo": "none",
-                "marker": Object {
-                  "color": "#fff",
-                },
-                "orientation": "h",
-                "showlegend": false,
-                "type": "bar",
-                "width": 0.4,
-                "x": Array [
-                  10,
-                ],
-                "y": Array [
-                  "service1",
-                ],
-              },
-            ]
-          }
+          data={Array []}
           layout={
             Object {
               "dragmode": "select",
@@ -116,7 +96,7 @@ exports[`SpanDetailPanel component renders correctly with default props 1`] = `
                   },
                   "type": "rect",
                   "x0": 0,
-                  "x1": 22,
+                  "x1": 0,
                   "xref": "x",
                   "y0": 0,
                   "y1": 1,
@@ -128,7 +108,7 @@ exports[`SpanDetailPanel component renders correctly with default props 1`] = `
                 "color": "#91989c",
                 "range": Array [
                   0,
-                  22,
+                  0,
                 ],
                 "showline": true,
                 "side": "top",
@@ -153,31 +133,10 @@ exports[`SpanDetailPanel component renders correctly with default props 1`] = `
         }
       >
         <Plt
-          data={
-            Array [
-              Object {
-                "hoverinfo": "none",
-                "marker": Object {
-                  "color": "#fff",
-                },
-                "orientation": "h",
-                "showlegend": false,
-                "text": "10.00 ms",
-                "textposition": "outside",
-                "type": "bar",
-                "width": 0.4,
-                "x": Array [
-                  10,
-                ],
-                "y": Array [
-                  "service1",
-                ],
-              },
-            ]
-          }
+          data={Array []}
           layout={
             Object {
-              "height": 85,
+              "height": 60,
               "margin": Object {
                 "b": 30,
                 "l": 150,
@@ -191,7 +150,7 @@ exports[`SpanDetailPanel component renders correctly with default props 1`] = `
                 "color": "#91989c",
                 "range": Array [
                   0,
-                  22,
+                  0,
                 ],
                 "showline": true,
                 "side": "top",
@@ -200,12 +159,8 @@ exports[`SpanDetailPanel component renders correctly with default props 1`] = `
               "yaxis": Object {
                 "fixedrange": true,
                 "showgrid": false,
-                "ticktext": Array [
-                  "",
-                ],
-                "tickvals": Array [
-                  "service1",
-                ],
+                "ticktext": Array [],
+                "tickvals": Array [],
               },
             }
           }