Skip to content

Commit

Permalink
Merge branch 'main' into flyout-fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@sumukhswamy
sumukhswamy authored Feb 19, 2025
2 parents bab33ae + 84fbc2f commit 5b3e9ad
Show file tree
Hide file tree
Showing 12 changed files with 119 additions and 73 deletions.
2 changes: 2 additions & 0 deletions public/components/application_analytics/__tests__/__snapshots__/flyout.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
18 changes: 16 additions & 2 deletions public/components/application_analytics/components/flyout_components/trace_detail_render.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 = [
Expand Down Expand Up @@ -79,6 +91,8 @@ export const TraceDetailRender = ({
dataSourceMDSId={dataSourceMDSId}
isApplicationFlyout={true}
payloadData={payloadData}
spanFilters={spanFilters}
setSpanFiltersWithStorage={setSpanFiltersWithStorage}
/>
<EuiSpacer size="xs" />
<EuiHorizontalRule margin="s" />
Expand Down
5 changes: 5 additions & 0 deletions public/components/trace_analytics/components/common/constants.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,8 @@ export interface ParsedHit {
_source: Span;
sort?: any[];
}

export interface TraceFilter {
field: string;
value: any;
}
5 changes: 3 additions & 2 deletions public/components/trace_analytics/components/services/service_view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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));
};
Expand Down
2 changes: 2 additions & 0 deletions ...onents/trace_analytics/components/traces/__tests__/__snapshots__/trace_view.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,8 @@ exports[`Trace view component renders trace view 1`] = `
payloadData=""
setGanttChartLoading={[Function]}
setGanttData={[Function]}
setSpanFiltersWithStorage={[Function]}
spanFilters={Array []}
traceId="test"
/>
</EuiFlexItem>
Expand Down
2 changes: 2 additions & 0 deletions public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,8 @@ const mockProps = {
setData: mockSetData,
addSpanFilter: mockAddSpanFilter,
removeSpanFilter: jest.fn(),
spanFilters: [],
setSpanFiltersWithStorage: jest.fn(),
};

describe('SpanDetailPanel component', () => {
Expand Down
80 changes: 21 additions & 59 deletions public/components/trace_analytics/components/traces/span_detail_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 };
Expand All @@ -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 }>({
Expand Down Expand Up @@ -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;
Expand All @@ -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[],
Expand Down Expand Up @@ -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"
Expand All @@ -329,7 +291,7 @@ export function SpanDetailPanel(props: {
</EuiBadge>
</EuiFlexItem>
));
}, [spanFilters]);
}, [props.spanFilters]);

const onHover = useCallback(() => {
const dragLayer = document.getElementsByClassName('nsewdrag')?.[0];
Expand Down Expand Up @@ -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(
Expand All @@ -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(
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions public/components/trace_analytics/components/traces/span_detail_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -25,7 +25,7 @@ interface SpanDetailTableProps {
dataSourceMDSId: string;
availableWidth?: number;
payloadData: string;
filters: Array<{ field: string; value: any }>;
filters: TraceFilter[];
}

interface Span {
Expand Down
41 changes: 38 additions & 3 deletions public/components/trace_analytics/components/traces/trace_view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ import {
EuiSpacer,
EuiText,
} from '@elastic/eui';
import { i18n } from '@osd/i18n';
import round from 'lodash/round';
import React, { useEffect, useState } from 'react';
import { i18n } from '@osd/i18n';
import { MountPoint } from '../../../../../../../src/core/public';
import { DataSourceManagementPluginSetup } from '../../../../../../../src/plugins/data_source_management/public';
import { DataSourceOption } from '../../../../../../../src/plugins/data_source_management/public/components/data_source_menu/types';
Expand All @@ -31,11 +31,12 @@ import { coreRefs } from '../../../../framework/core_refs';
import { TraceAnalyticsCoreDeps } from '../../home';
import { handleServiceMapRequest } from '../../requests/services_request_handler';
import { handlePayloadRequest } from '../../requests/traces_request_handler';
import { TraceFilter } from '../common/constants';
import { PanelTitle, filtersToDsl, processTimeStamp } from '../common/helper_functions';
import { ServiceMap, ServiceObject } from '../common/plots/service_map';
import { ServiceBreakdownPanel } from './service_breakdown_panel';
import { SpanDetailPanel } from './span_detail_panel';
import { getOverviewFields, getServiceBreakdownData } from './trace_view_helpers';
import { getOverviewFields, getServiceBreakdownData, spanFiltersToDSL } from './trace_view_helpers';

const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled();

Expand Down Expand Up @@ -85,6 +86,12 @@ export function TraceView(props: TraceViewProps) {
const [isServicesPieChartLoading, setIsServicesPieChartLoading] = useState(false);
const [isGanttChartLoading, setIsGanttChartLoading] = useState(false);

const storedFilters = sessionStorage.getItem('TraceAnalyticsSpanFilters');
const [spanFilters, setSpanFilters] = useState<TraceFilter[]>(() =>
storedFilters ? JSON.parse(storedFilters) : []
);
const [filteredPayload, setFilteredPayload] = useState('');

const renderOverview = (overviewFields: any) => {
return (
<EuiPanel>
Expand Down Expand Up @@ -224,10 +231,36 @@ export function TraceView(props: TraceViewProps) {
).finally(() => setIsServicesDataLoading(false));
};

const setSpanFiltersWithStorage = (newFilters: TraceFilter[]) => {
refreshFilteredPayload(newFilters);
setSpanFilters(newFilters);
sessionStorage.setItem('TraceAnalyticsSpanFilters', JSON.stringify(newFilters));
};

const refreshFilteredPayload = async (newFilters: TraceFilter[]) => {
const spanDSL = spanFiltersToDSL(newFilters);
setIsGanttChartLoading(true);
handlePayloadRequest(
props.traceId,
props.http,
spanDSL,
setFilteredPayload,
mode,
props.dataSourceMDSId[0].id
);
};

useEffect(() => {
if (!payloadData) return;

try {
if (spanFilters.length > 0) {
refreshFilteredPayload(spanFilters);
} else {
setFilteredPayload(payloadData);
}

setFilteredPayload(payloadData);
const parsedPayload = JSON.parse(payloadData);
const overview = getOverviewFields(parsedPayload, mode);
if (overview) {
Expand Down Expand Up @@ -330,9 +363,11 @@ export function TraceView(props: TraceViewProps) {
setGanttData={setGanttData}
dataSourceMDSId={props.dataSourceMDSId[0].id}
dataSourceMDSLabel={props.dataSourceMDSId[0].label}
payloadData={payloadData}
payloadData={filteredPayload}
isGanttChartLoading={isGanttChartLoading}
setGanttChartLoading={setIsGanttChartLoading}
spanFilters={spanFilters}
setSpanFiltersWithStorage={setSpanFiltersWithStorage}
/>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
Loading

0 comments on commit 5b3e9ad

Please sign in to comment.