Skip to content

Commit d28ecc5

Browse files
github-actions[bot]Adam Tackett
github-actions[bot]
and
Adam Tackett
committed
Traces - Custom source switch to data grid (#2390)
* change from memory table to eui data grid Signed-off-by: Adam Tackett <[email protected]> * progress on eui data grid and query Signed-off-by: Adam Tackett <[email protected]> * progress, seperated pagnation refresh, working on traces Signed-off-by: Adam Tackett <[email protected]> * rever traces to normal, handle both in UI Signed-off-by: Adam Tackett <[email protected]> * load more button for traces Signed-off-by: Adam Tackett <[email protected]> * refresh fixes, prevent requery of services with filter add, invalid date fix Signed-off-by: Adam Tackett <[email protected]> * remove test of removed state Signed-off-by: Adam Tackett <[email protected]> * inject html to format euidatagrid Signed-off-by: Adam Tackett <[email protected]> * add loader, fix pagination sorting, fix attribute columns Signed-off-by: Adam Tackett <[email protected]> * fix lint errors Signed-off-by: Adam Tackett <[email protected]> * add test back Signed-off-by: Adam Tackett <[email protected]> * add cypress testing Signed-off-by: Adam Tackett <[email protected]> * remove only Signed-off-by: Adam Tackett <[email protected]> * fix flaky service test Signed-off-by: Adam Tackett <[email protected]> * fix bug for pagnation in span list Signed-off-by: Adam Tackett <[email protected]> * address comments, fix full screen bug for pagination Signed-off-by: Adam Tackett <[email protected]> * address comments, fix sorting for traces Signed-off-by: Adam Tackett <[email protected]> --------- Signed-off-by: Adam Tackett <[email protected]> Co-authored-by: Adam Tackett <[email protected]> (cherry picked from commit fd878ee) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent f8b346c commit d28ecc5

16 files changed

+1058
-320
lines changed

‎.cypress/integration/trace_analytics_test/trace_analytics_services.spec.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -323,9 +323,10 @@ describe('Testing traces Spans table verify table headers functionality', () =>
323323
.should('exist')
324324
.click();
325325
cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection"]').click();
326-
cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-spanId').click();
326+
cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-durationInNanos').click();
327327
cy.get('[data-test-subj="dataGridColumnSortingButton"]').should('have.text', '1 fields sorted');
328-
cy.get('[data-test-subj="dataGridColumnSortingButton"]').should('exist').click();
328+
cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
329+
cy.get('button.euiLink.euiLink--primary').eq(4).contains('96e7fdedd82ab53c').click();
329330
});
330331
});
331332

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

+70-1
Original file line numberDiff line numberDiff line change
@@ -294,9 +294,78 @@ describe('Testing switch mode to jaeger', () => {
294294
// Waiting time for render to complete
295295
cy.get("[data-test-subj='treeExpandAll']").click();
296296
cy.get("[data-test-subj='treeCollapseAll']").click();
297-
297+
298298
cy.get("[data-test-subj='treeViewExpandArrow']").should('have.length', 1);
299299
cy.get("[data-test-subj='treeExpandAll']").click();
300300
cy.get("[data-test-subj='treeViewExpandArrow']").should('have.length.greaterThan', 1);
301301
});
302302
});
303+
304+
describe('Testing traces Custom source', () => {
305+
beforeEach(() => {
306+
cy.visit('app/observability-traces#/traces', {
307+
onBeforeLoad: (win) => {
308+
win.sessionStorage.clear();
309+
},
310+
});
311+
cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
312+
cy.get("[data-test-subj='indexPattern-switch-link']").click();
313+
cy.get("[data-test-subj='custom_data_prepper-mode']").click();
314+
setTimeFilter();
315+
});
316+
317+
it('Renders the traces custom source all spans as default, clicks trace view redirection ', () => {
318+
cy.get('.euiDataGridHeaderCell__content').contains('Span Id').should('exist');
319+
cy.get('.euiDataGridHeaderCell__content').contains('Trace Id').should('exist');
320+
cy.get('.euiDataGridHeaderCell__content').contains('Parent Span Id').should('exist');
321+
cy.get('.euiDataGridHeaderCell__content').contains('Trace group').should('exist');
322+
cy.get('.euiDataGridHeaderCell__content').contains('Duration (ms)').should('exist');
323+
cy.get('.euiDataGridHeaderCell__content').contains('Errors').should('exist');
324+
cy.get('.euiDataGridHeaderCell__content').contains('Last updated').should('exist');
325+
326+
cy.get('a.euiLink.euiLink--primary').first().click();
327+
cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
328+
cy.get('.overview-content').should('contain.text', '4fa04f117be100f476b175e41096e736');
329+
});
330+
331+
it('Renders all spans column attributes as hidden, shows column when added', () => {
332+
cy.get('span.euiButtonEmpty__text').contains('60 columns hidden').should('exist');
333+
cy.get('span.euiButtonEmpty__text').contains('60 columns hidden').click();
334+
cy.get('button[name="span.attributes.http@url"]').click();
335+
cy.get('button[name="span.attributes.http@url"]').should('have.attr', 'aria-checked', 'true');
336+
cy.get('.euiDataGridHeaderCell__content').contains('span.attributes.http@url').should('exist');
337+
});
338+
339+
it('Verifies column sorting and pagination works correctly', () => {
340+
cy.contains('Duration (ms)').click();
341+
cy.contains('Sort Z-A').click();
342+
343+
cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
344+
cy.contains('467.03 ms').should('exist');
345+
346+
cy.get('[data-test-subj="pagination-button-next"]').click();
347+
cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
348+
cy.contains('399.10 ms').should('exist');
349+
350+
cy.get('[data-test-subj="pagination-button-previous"]').click();
351+
cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
352+
cy.contains('467.03 ms').should('exist');
353+
});
354+
355+
it('Renders the traces custom source traces, clicks trace view redirection', () => {
356+
cy.get('[data-test-subj="trace-table-mode-selector"]').click();
357+
cy.get('.euiSelectableListItem').contains('Traces').click();
358+
cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
359+
360+
cy.get('.euiDataGridHeaderCell__content').contains('Trace ID').should('exist');
361+
cy.get('.euiDataGridHeaderCell__content').contains('Trace group').should('exist');
362+
cy.get('.euiDataGridHeaderCell__content').contains('Duration (ms)').should('exist');
363+
cy.get('.euiDataGridHeaderCell__content').contains('Percentile in trace group').should('exist');
364+
cy.get('.euiDataGridHeaderCell__content').contains('Errors').should('exist');
365+
cy.get('.euiDataGridHeaderCell__content').contains('Last updated').should('exist');
366+
367+
cy.get('a.euiLink.euiLink--primary').first().click();
368+
cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
369+
cy.get('.overview-content').should('contain.text', '02feb3a4f611abd81f2a53244d1278ae');
370+
});
371+
});

‎.cypress/utils/constants.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export const setTimeFilter = (setEndTime = false, refresh = true) => {
8383
.type('{selectall}' + endTime, { force: true });
8484
}
8585
if (refresh) cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
86-
cy.get('.euiTableRow').should('have.length.greaterThan', 3); //Replaces Wait
86+
cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist'); //Replaces Wait
8787
};
8888

8989
export const expandServiceView = (rowIndex = 0) => {

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

-2
Original file line numberDiff line numberDiff line change
@@ -253,11 +253,9 @@ export function getServiceMapGraph({
253253
const averageLatency = `Average duration: ${
254254
map[service].latency! >= 0 ? map[service].latency + 'ms' : '-'
255255
}`;
256-
257256
const errorRate = `Error rate: ${
258257
map[service].error_rate! >= 0 ? map[service].error_rate + '%' : '-'
259258
}`;
260-
261259
const throughput =
262260
'Request rate: ' +
263261
(map[service].throughput! >= 0 ? `${map[service].throughput}` : '-') +

‎public/components/trace_analytics/components/common/shared_components/component_helper_functions.tsx

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/*
2+
* Copyright OpenSearch Contributors
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
import { useEffect } from 'react';
7+
8+
// Injects the size warning and Load buttons into the corners of EUI Data Grid
9+
export const useInjectElementsIntoGrid = (
10+
rowCount: number,
11+
maxDisplayRows: number,
12+
tracesTableMode: string,
13+
loadMoreHandler?: () => void
14+
) => {
15+
useEffect(() => {
16+
setTimeout(() => {
17+
const toolbar = document.querySelector<HTMLElement>('.euiDataGrid__controls');
18+
if (toolbar && rowCount > maxDisplayRows) {
19+
toolbar.style.display = 'flex';
20+
toolbar.style.alignItems = 'center';
21+
toolbar.style.justifyContent = 'space-between';
22+
23+
let warningDiv = toolbar.querySelector<HTMLElement>('.trace-table-warning');
24+
if (!warningDiv) {
25+
warningDiv = document.createElement('div');
26+
warningDiv.className = 'trace-table-warning';
27+
28+
const strongElement = document.createElement('strong');
29+
strongElement.textContent = `${maxDisplayRows}`;
30+
31+
const textSpan = document.createElement('span');
32+
textSpan.appendChild(strongElement);
33+
textSpan.appendChild(document.createTextNode(' results shown out of '));
34+
textSpan.appendChild(document.createTextNode(` ${rowCount}`));
35+
36+
warningDiv.appendChild(textSpan);
37+
38+
toolbar.appendChild(warningDiv);
39+
}
40+
}
41+
42+
const pagination = document.querySelector<HTMLElement>('.euiDataGrid__pagination');
43+
44+
if (tracesTableMode !== 'traces') {
45+
if (pagination) {
46+
const existingLoadMoreButton = pagination.querySelector('.trace-table-load-more');
47+
if (existingLoadMoreButton) {
48+
existingLoadMoreButton.remove();
49+
}
50+
}
51+
return;
52+
}
53+
54+
if (pagination && loadMoreHandler) {
55+
pagination.style.display = 'flex';
56+
pagination.style.alignItems = 'center';
57+
pagination.style.justifyContent = 'space-between';
58+
59+
let loadMoreButton = pagination.querySelector<HTMLElement>('.trace-table-load-more');
60+
if (!loadMoreButton) {
61+
loadMoreButton = document.createElement('button');
62+
loadMoreButton.className = 'trace-table-load-more euiButtonEmpty euiButtonEmpty--text';
63+
loadMoreButton.style.marginLeft = '12px';
64+
loadMoreButton.innerText = 'Load more data';
65+
66+
loadMoreButton.onclick = () => loadMoreHandler();
67+
68+
pagination.appendChild(loadMoreButton);
69+
}
70+
}
71+
}, 100);
72+
}, [rowCount, tracesTableMode, loadMoreHandler]);
73+
};

0 commit comments

Comments
 (0)