Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TraceView - Optimization of queries #2349

Merged
merged 19 commits into from
Feb 12, 2025
Merged

TraceView - Optimization of queries #2349

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
d48fa7a
optimize trace veiw removing queries
Feb 6, 2025
94cce78
fix date format
Feb 7, 2025
8eebac5
update app cypress for rounding
Feb 7, 2025
183731a
address comments
Feb 7, 2025
89fff13
fix jaeger tree span and overview
Feb 10, 2025
94a99a4
match old behavior for jaeger, if an error is present display it in o…
Feb 10, 2025
0fe0710
update test to reflect error in jaeger trace
Feb 10, 2025
c9b0105
address comments
Feb 11, 2025
bb41c51
add cypress test for jaeger tree view
Feb 11, 2025
3af05bd
add fallback value for latency
Feb 11, 2025
7057348
fix sorting on span table
Feb 11, 2025
ce4dcb4
add back total use effect
Feb 11, 2025
2d93ad3
status code of 2 indicates error
Feb 11, 2025
e102bd1
address comments
Feb 11, 2025
555e00f
add sorting support to jaeger span table
Feb 11, 2025
4df1abb
address comments, refactor sorting
Feb 12, 2025
33f0b85
fix flaky cypress test
Feb 12, 2025
241adb4
combine adding sort, and sorting action
Feb 12, 2025
85d6bba
fix jaeger sorting for errors, fix gantt chart error override from text
Feb 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .cypress/integration/app_analytics_test/app_analytics.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 });

Check warning on line 224 in .cypress/integration/app_analytics_test/app_analytics.spec.js

View workflow job for this annotation

GitHub Actions / Lint 

Do not use force on click and type calls
cy.get('.euiTableRow').should('have.length.lessThan', 1);
cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree);
cy.get('.euiBreadcrumb[href="#/"]').click();
Expand Down Expand Up @@ -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

Check warning on line 311 in .cypress/integration/app_analytics_test/app_analytics.spec.js

View workflow job for this annotation

GitHub Actions / Lint 

Do not use force on click and type calls
cy.get('button[data-test-subj="spanId-link"]').eq(0).click({ force: true });

Check warning on line 312 in .cypress/integration/app_analytics_test/app_analytics.spec.js

View workflow job for this annotation

GitHub Actions / Lint 

Do not use force on click and type calls
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();
Expand All @@ -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');
Expand Down Expand Up @@ -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')

Check warning on line 399 in .cypress/integration/app_analytics_test/app_analytics.spec.js

View workflow job for this annotation

GitHub Actions / Lint 

Do not use force on click and type calls
.contains('Time series')
.click({ force: true });
cy.focused().type('{enter}');
Expand Down Expand Up @@ -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')

Check warning on line 443 in .cypress/integration/app_analytics_test/app_analytics.spec.js

View workflow job for this annotation

GitHub Actions / Lint 

Do not use force on click and type calls
.contains('Time series')
.click({ force: true });
cy.get('[data-test-subj="addAvailabilityButton"]').click();
Expand Down
418 changes: 349 additions & 69 deletions public/components/application_analytics/__tests__/__snapshots__/flyout.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

34 changes: 27 additions & 7 deletions public/components/application_analytics/components/flyout_components/trace_detail_render.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
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;
Expand All @@ -31,7 +31,7 @@
mode,
dataSourceMDSId,
}: TraceDetailRenderProps) => {
const [fields, setFields] = useState<any>({});

Check warning on line 34 in public/components/application_analytics/components/flyout_components/trace_detail_render.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
const [serviceBreakdownData, setServiceBreakdownData] = useState([]);
const [payloadData, setPayloadData] = useState('');
const [colorMap, setColorMap] = useState({});
Expand Down Expand Up @@ -78,6 +78,7 @@
mode={mode}
dataSourceMDSId={dataSourceMDSId}
isApplicationFlyout={true}
payloadData={payloadData}
/>
<EuiSpacer size="xs" />
<EuiHorizontalRule margin="s" />
Expand All @@ -92,13 +93,32 @@
) : null}
</>
);
}, [traceId, fields, serviceBreakdownData, colorMap, payloadData]);

Check warning on line 96 in public/components/application_analytics/components/flyout_components/trace_detail_render.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useMemo has missing dependencies: 'dataSourceMDSId', 'http', 'mode', and 'openSpanFlyout'. Either include them or remove the dependency array

useEffect(() => {
handleTraceViewRequest(traceId, http, fields, setFields, mode);
handleServicesPieChartRequest(traceId, http, setServiceBreakdownData, setColorMap, mode);
handlePayloadRequest(traceId, http, payloadData, setPayloadData, mode);
}, [traceId]);

Check warning on line 100 in public/components/application_analytics/components/flyout_components/trace_detail_render.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has missing dependencies: 'http', 'mode', and 'payloadData'. Either include them or remove the dependency array

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

try {
const parsedPayload = JSON.parse(payloadData);
const overview = getOverviewFields(parsedPayload, mode);
if (overview) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: Do we have a reset mechanism for these setters? If we previously loaded data with an overview, but a new payload arrives without an overview for some reason, it seems like the overview wouldn't be updated here, potentially leaving it with stale data. Should we handle this case explicitly?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That one specifically is for application analytics and the useEffect triggers on payload change. As long as it is a valid payload the overview will get the new information from it. If the payload is successful from handlePayloadRequest causing new data the overview will always be generated from that information.

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;
};
2 changes: 2 additions & 0 deletions ...analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
63 changes: 9 additions & 54 deletions ...trace_analytics/components/traces/__tests__/__snapshots__/span_detail_panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ exports[`SpanDetailPanel component renders correctly with default props 1`] = `
<EuiFlexItem>
<PanelTitle
title="Spans"
totalItems={0.5}
totalItems={0}
/>
</EuiFlexItem>
<EuiFlexItem
Expand All @@ -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={
Expand Down Expand Up @@ -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",
Expand All @@ -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,
Expand All @@ -128,7 +108,7 @@ exports[`SpanDetailPanel component renders correctly with default props 1`] = `
"color": "#91989c",
"range": Array [
0,
22,
0,
],
"showline": true,
"side": "top",
Expand All @@ -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,
Expand All @@ -191,7 +150,7 @@ exports[`SpanDetailPanel component renders correctly with default props 1`] = `
"color": "#91989c",
"range": Array [
0,
22,
0,
],
"showline": true,
"side": "top",
Expand All @@ -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 [],
},
}
}
Expand Down
Loading
Loading