Restore spans limit to 3000 in trace view (#2353)

* restore spans max value to 3000 in trace view Signed-off-by: Shenoy Pratik <[email protected]> * update filtering mechanism for span payloads Signed-off-by: Shenoy Pratik <[email protected]> * avoid parsing again on re-render in trace view Signed-off-by: Shenoy Pratik <[email protected]> --------- Signed-off-by: Shenoy Pratik <[email protected]> (cherry picked from commit 84fbc2f)
opensearch-project · Feb 19, 2025 · b66ea62 · b66ea62
1 parent 2234c61
commit b66ea62
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 76 deletions.
diff --git a/public/components/application_analytics/__tests__/__snapshots__/flyout.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/flyout.test.tsx.snap
@@ -751,6 +751,8 @@ exports[`Trace Detail Render Flyout component render trace detail 1`] = `
     openSpanFlyout={[Function]}
     page="app"
     payloadData=""
+    setSpanFiltersWithStorage={[Function]}
+    spanFilters={Array []}
     traceId="mockTrace"
   >
     <EuiPanel

diff --git a/public/components/application_analytics/components/flyout_components/trace_detail_render.tsx b/public/components/application_analytics/components/flyout_components/trace_detail_render.tsx
@@ -7,14 +7,15 @@ import { EuiCodeBlock, EuiHorizontalRule, EuiSpacer, EuiText } from '@elastic/eu
 import React, { useEffect, useMemo, useState } from 'react';
 import { HttpStart } from '../../../../../../../src/core/public';
 import { TraceAnalyticsMode } from '../../../../../common/types/trace_analytics';
+import { TraceFilter } from '../../../trace_analytics/components/common/constants';
 import { ServiceBreakdownPanel } from '../../../trace_analytics/components/traces/service_breakdown_panel';
 import { SpanDetailPanel } from '../../../trace_analytics/components/traces/span_detail_panel';
-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';
+import { handlePayloadRequest } from '../../../trace_analytics/requests/traces_request_handler';
+import { getListItem } from '../../helpers/utils';
 
 interface TraceDetailRenderProps {
   traceId: string;
@@ -36,6 +37,17 @@ export const TraceDetailRender = ({
   const [payloadData, setPayloadData] = useState('');
   const [colorMap, setColorMap] = useState({});
 
+  const storedFilters = sessionStorage.getItem('TraceAnalyticsSpanFilters');
+  const [spanFilters, setSpanFilters] = useState<TraceFilter[]>(() =>
+    storedFilters ? JSON.parse(storedFilters) : []
+  );
+
+  const setSpanFiltersWithStorage = (newFilters: TraceFilter[]) => {
+    handlePayloadRequest(traceId, http, payloadData, setPayloadData, mode);
+    setSpanFilters(newFilters);
+    sessionStorage.setItem('TraceAnalyticsSpanFilters', JSON.stringify(newFilters));
+  };
+
   const renderContent = useMemo(() => {
     if (!traceId) return <></>;
     const overviewList = [
@@ -79,6 +91,8 @@ export const TraceDetailRender = ({
           dataSourceMDSId={dataSourceMDSId}
           isApplicationFlyout={true}
           payloadData={payloadData}
+          spanFilters={spanFilters}
+          setSpanFiltersWithStorage={setSpanFiltersWithStorage}
         />
         <EuiSpacer size="xs" />
         <EuiHorizontalRule margin="s" />

diff --git a/public/components/trace_analytics/components/common/constants.tsx b/public/components/trace_analytics/components/common/constants.tsx
@@ -59,3 +59,8 @@ export interface ParsedHit {
   _source: Span;
   sort?: any[];
 }
+
+export interface TraceFilter {
+  field: string;
+  value: any;
+}
diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
@@ -45,6 +45,7 @@ import {
   handleServiceMapRequest,
   handleServiceViewRequest,
 } from '../../requests/services_request_handler';
+import { TraceFilter } from '../common/constants';
 import { FilterType } from '../common/filters/filters';
 import {
   PanelTitle,
@@ -442,12 +443,12 @@ export function ServiceView(props: ServiceViewProps) {
 
   const [currentSpan, setCurrentSpan] = useState('');
   const storedFilters = sessionStorage.getItem('TraceAnalyticsSpanFilters');
-  const [spanFilters, setSpanFilters] = useState<Array<{ field: string; value: any }>>(
+  const [spanFilters, setSpanFilters] = useState<TraceFilter[]>(
     storedFilters ? JSON.parse(storedFilters) : []
   );
   const [DSL, setDSL] = useState<any>({});
 
-  const setSpanFiltersWithStorage = (newFilters: Array<{ field: string; value: any }>) => {
+  const setSpanFiltersWithStorage = (newFilters: TraceFilter[]) => {
     setSpanFilters(newFilters);
     sessionStorage.setItem('TraceAnalyticsSpanFilters', JSON.stringify(newFilters));
   };

diff --git a/...onents/trace_analytics/components/traces/__tests__/__snapshots__/trace_view.test.tsx.snap b/...onents/trace_analytics/components/traces/__tests__/__snapshots__/trace_view.test.tsx.snap
@@ -147,6 +147,8 @@ exports[`Trace view component renders trace view 1`] = `
             payloadData=""
             setGanttChartLoading={[Function]}
             setGanttData={[Function]}
+            setSpanFiltersWithStorage={[Function]}
+            spanFilters={Array []}
             traceId="test"
           />
         </EuiFlexItem>

diff --git a/public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx b/public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx
@@ -79,6 +79,8 @@ const mockProps = {
   setData: mockSetData,
   addSpanFilter: mockAddSpanFilter,
   removeSpanFilter: jest.fn(),
+  spanFilters: [],
+  setSpanFiltersWithStorage: jest.fn(),
 };
 
 describe('SpanDetailPanel component', () => {

diff --git a/public/components/trace_analytics/components/traces/span_detail_panel.tsx b/public/components/trace_analytics/components/traces/span_detail_panel.tsx
@@ -21,10 +21,11 @@ import { HttpSetup } from '../../../../../../../src/core/public';
 import { TraceAnalyticsMode } from '../../../../../common/types/trace_analytics';
 import { coreRefs } from '../../../../framework/core_refs';
 import { Plt } from '../../../visualizations/plotly/plot';
+import { hitsToSpanDetailData } from '../../requests/traces_request_handler';
+import { TraceFilter } from '../common/constants';
 import { PanelTitle, parseHits } from '../common/helper_functions';
 import { SpanDetailFlyout } from './span_detail_flyout';
 import { SpanDetailTable, SpanDetailTableHierarchy } from './span_detail_table';
-import { hitsToSpanDetailData } from '../../requests/traces_request_handler';
 
 export function SpanDetailPanel(props: {
   http: HttpSetup;
@@ -33,6 +34,8 @@ export function SpanDetailPanel(props: {
   mode: TraceAnalyticsMode;
   dataSourceMDSId: string;
   dataSourceMDSLabel: string | undefined;
+  spanFilters: TraceFilter[];
+  setSpanFiltersWithStorage: (newFilters: TraceFilter[]) => void;
   page?: string;
   openSpanFlyout?: any;
   data?: { gantt: any[]; table: any[]; ganttMaxX: number };
@@ -44,11 +47,8 @@ export function SpanDetailPanel(props: {
 }) {
   const { chrome } = coreRefs;
   const { mode } = props;
-  const storedFilters = sessionStorage.getItem('TraceAnalyticsSpanFilters');
   const fromApp = props.page === 'app';
-  const [spanFilters, setSpanFilters] = useState<Array<{ field: string; value: any }>>(
-    storedFilters ? JSON.parse(storedFilters) : []
-  );
+
   let data: { gantt: any[]; table: any[]; ganttMaxX: number };
   let setData: (data: { gantt: any[]; table: any[]; ganttMaxX: number }) => void;
   const [localData, localSetData] = useState<{ gantt: any[]; table: any[]; ganttMaxX: number }>({
@@ -109,70 +109,34 @@ export function SpanDetailPanel(props: {
     setSelectedRange(fullRange);
   }, [data.ganttMaxX]);
 
-  const setSpanFiltersWithStorage = (newFilters: Array<{ field: string; value: any }>) => {
-    setSpanFilters(newFilters);
-    sessionStorage.setItem('TraceAnalyticsSpanFilters', JSON.stringify(newFilters));
-  };
-
   const addSpanFilter = (field: string, value: any) => {
-    const newFilters = [...spanFilters];
+    const newFilters = [...props.spanFilters];
     const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
     if (index === -1) {
       newFilters.push({ field, value });
     } else {
       newFilters.splice(index, 1, { field, value });
     }
-    setSpanFiltersWithStorage(newFilters);
+    props.setSpanFiltersWithStorage(newFilters);
   };
 
   const removeSpanFilter = (field: string) => {
-    const newFilters = [...spanFilters];
+    const newFilters = [...props.spanFilters];
     const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
     if (index !== -1) {
       newFilters.splice(index, 1);
-      setSpanFiltersWithStorage(newFilters);
-    }
-  };
-
-  const parseAndFilterHits = (
-    payloadData: string,
-    traceMode: string,
-    payloadSpanFilters: any[]
-  ) => {
-    try {
-      let hits = parseHits(props.payloadData);
-
-      if (payloadSpanFilters.length > 0) {
-        hits = hits.filter((hit) => {
-          return payloadSpanFilters.every(({ field, value }) => {
-            const fieldValue = field.split('.').reduce((acc, part) => acc?.[part], hit._source);
-            return fieldValue === value;
-          });
-        });
-      }
-
-      hits = hits.filter((hit) => {
-        if (traceMode === 'jaeger') {
-          return Boolean(hit._source?.process?.serviceName);
-        } else {
-          return Boolean(hit._source?.serviceName);
-        }
-      });
-
-      return hits;
-    } catch (error) {
-      console.error('Error processing payloadData in parseAndFilterHits:', error);
-      return [];
+      props.setSpanFiltersWithStorage(newFilters);
     }
   };
 
   useEffect(() => {
     if (!props.payloadData) {
-      console.warn('No payloadData provided to SpanDetailPanel');
+      props.setGanttChartLoading?.(false);
+      console.error('No payloadData provided to SpanDetailPanel');
       return;
     }
 
-    const hits = parseAndFilterHits(props.payloadData, mode, spanFilters);
+    const hits = parseHits(props.payloadData);
 
     if (hits.length === 0) {
       return;
@@ -186,11 +150,9 @@ export function SpanDetailPanel(props: {
         console.error('Error in hitsToSpanDetailData:', error);
       })
       .finally(() => {
-        if (props.setGanttChartLoading) {
-          props.setGanttChartLoading(false);
-        }
+        props.setGanttChartLoading?.(false);
       });
-  }, [props.payloadData, props.colorMap, mode, spanFilters]);
+  }, [props.payloadData, props.colorMap, mode, props.spanFilters]);
 
   const getSpanDetailLayout = (
     plotTraces: Plotly.Data[],
@@ -317,7 +279,7 @@ export function SpanDetailPanel(props: {
   );
 
   const renderFilters = useMemo(() => {
-    return spanFilters.map(({ field, value }) => (
+    return props.spanFilters.map(({ field, value }) => (
       <EuiFlexItem grow={false} key={`span-filter-badge-${field}`}>
         <EuiBadge
           iconType="cross"
@@ -329,7 +291,7 @@ export function SpanDetailPanel(props: {
         </EuiBadge>
       </EuiFlexItem>
     ));
-  }, [spanFilters]);
+  }, [props.spanFilters]);
 
   const onHover = useCallback(() => {
     const dragLayer = document.getElementsByClassName('nsewdrag')?.[0];
@@ -387,11 +349,11 @@ export function SpanDetailPanel(props: {
           dataSourceMDSId={props.dataSourceMDSId}
           availableWidth={dynamicLayoutAdjustment}
           payloadData={props.payloadData}
-          filters={spanFilters}
+          filters={props.spanFilters}
         />
       </div>
     ),
-    [setCurrentSpan, dynamicLayoutAdjustment, props.payloadData, spanFilters]
+    [setCurrentSpan, dynamicLayoutAdjustment, props.payloadData, props.spanFilters]
   );
 
   const spanDetailTableHierarchy = useMemo(
@@ -411,11 +373,11 @@ export function SpanDetailPanel(props: {
           dataSourceMDSId={props.dataSourceMDSId}
           availableWidth={dynamicLayoutAdjustment}
           payloadData={props.payloadData}
-          filters={spanFilters}
+          filters={props.spanFilters}
         />
       </div>
     ),
-    [setCurrentSpan, dynamicLayoutAdjustment, props.payloadData, spanFilters]
+    [setCurrentSpan, dynamicLayoutAdjustment, props.payloadData, props.spanFilters]
   );
 
   const ganttChart = useMemo(
@@ -491,7 +453,7 @@ export function SpanDetailPanel(props: {
             </div>
           ) : (
             <>
-              {spanFilters.length > 0 && (
+              {props.spanFilters.length > 0 && (
                 <EuiFlexItem grow={false}>
                   <EuiSpacer size="s" />
                   <EuiFlexGroup gutterSize="s" wrap>

diff --git a/public/components/trace_analytics/components/traces/span_detail_table.tsx b/public/components/trace_analytics/components/traces/span_detail_table.tsx
@@ -11,9 +11,9 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { HttpSetup } from '../../../../../../../src/core/public';
 import { TRACE_ANALYTICS_DATE_FORMAT } from '../../../../../common/constants/trace_analytics';
 import { TraceAnalyticsMode } from '../../../../../common/types/trace_analytics';
+import { handleSpansRequest } from '../../requests/traces_request_handler';
 import { microToMilliSec, nanoToMilliSec, parseHits } from '../common/helper_functions';
 import { RenderCustomDataGrid } from '../common/shared_components/custom_datagrid';
-import { handleSpansRequest } from '../../requests/traces_request_handler';
 
 interface SpanDetailTableProps {
   http: HttpSetup;
@@ -25,7 +25,7 @@ interface SpanDetailTableProps {
   dataSourceMDSId: string;
   availableWidth?: number;
   payloadData: string;
-  filters: Array<{ field: string; value: any }>;
+  filters: TraceFilter[];
 }
 
 interface Span {