diff --git a/.cypress/integration/app_analytics_test/app_analytics.spec.js b/.cypress/integration/app_analytics_test/app_analytics.spec.js index 125715b02..9d847e1bd 100644 --- a/.cypress/integration/app_analytics_test/app_analytics.spec.js +++ b/.cypress/integration/app_analytics_test/app_analytics.spec.js @@ -355,6 +355,7 @@ describe('Viewing application', () => { cy.get('[data-test-subj="app-analytics-panelTab"]').click(); cy.get('[aria-label="actionMenuButton"]').click(); cy.get('[data-test-subj="editVizContextMenuItem"]').click(); + changeTimeTo24('months');//Ensure time is set cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months'); cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click(); cy.get('.euiTab[id="availability-panel"]').click(); diff --git a/.cypress/integration/trace_analytics_test/trace_analytics_services.spec.js b/.cypress/integration/trace_analytics_test/trace_analytics_services.spec.js index 8f3121f8a..72031fdbe 100644 --- a/.cypress/integration/trace_analytics_test/trace_analytics_services.spec.js +++ b/.cypress/integration/trace_analytics_test/trace_analytics_services.spec.js @@ -201,7 +201,8 @@ describe('Testing Service map', () => { cy.get('[data-text="Errors"]').click(); cy.contains('60%'); cy.get('[data-text="Duration"]').click(); - cy.contains('100'); + cy.contains('Average duration (ms)'); + cy.get("[data-test-subj='tableHeaderCell_average_latency_1']").click(); // clicks on payment node cy.get('.vis-network canvas').click(707, 388); diff --git a/.cypress/integration/trace_analytics_test/trace_analytics_traces.spec.js b/.cypress/integration/trace_analytics_test/trace_analytics_traces.spec.js index a6a3e89f3..d09764dd3 100644 --- a/.cypress/integration/trace_analytics_test/trace_analytics_traces.spec.js +++ b/.cypress/integration/trace_analytics_test/trace_analytics_traces.spec.js @@ -132,25 +132,27 @@ describe('Testing traces table', () => { cy.get('.euiTableCellContent__text').contains('Percentile in trace group').should('exist'); cy.get('.euiTableCellContent__text').contains('Errors').should('exist'); cy.get('.euiTableCellContent__text').contains('Last updated').should('exist'); + cy.get("[data-test-subj='tableHeaderCell_trace_group_1']").click(); + cy.contains('mysql').should('not.exist'); cy.get('[data-test-subj="pagination-button-next"]').click(); - cy.contains('client_pay_order').should('exist'); + cy.contains('HTTP POST').should('exist'); cy.get('[data-test-subj="pagination-button-previous"]').click(); - cy.contains('224.99').should('exist'); + cy.contains('56.88').should('exist'); cy.get('.euiButtonEmpty').contains('5').click(); - cy.contains('690d3c7af1a78cf89c43e').should('exist'); + cy.contains('386d26555771f39c0caaf').should('exist'); cy.contains('5be8370207cbb002a165d').click(); cy.contains('client_create_order').should('exist'); cy.get('path[style*="rgb(116, 146, 231)"]').should('exist'); cy.go('back'); cy.get('.euiButtonEmpty__text').contains('Rows per page').click(); cy.get('.euiContextMenuItem__text').contains('15 rows').click(); - let expected_row_count=15; + let expected_row_count = 15; cy.get('.euiTable--auto') - .find("tr") - .then((row) => { - let total=row.length-1; - expect(total).to.equal(expected_row_count); - }); + .find("tr") + .then((row) => { + let total = row.length - 1; + expect(total).to.equal(expected_row_count); + }); }); }); @@ -176,27 +178,29 @@ describe('Testing traces tree view', () => { //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='spanId-link']").then((initialSpanIds) => { - const initialCount = initialSpanIds.length; - expect(initialCount).to.equal(6); - - cy.get("[data-test-subj='treeExpandAll']").click(); - - cy.get("[data-test-subj='spanId-link']").then((expandedSpanIds) => { - const expandedCount = expandedSpanIds.length; - expect(expandedCount).to.equal(10); - }); - - cy.get("[data-test-subj='treeCollapseAll']").click(); - - cy.get("[data-test-subj='spanId-link']").then((collapsedSpanIds) => { - const collapsedCount = collapsedSpanIds.length; - expect(collapsedCount).to.equal(6); // Collapsed rows should match the initial count + + cy.get("[data-test-subj='spanId-link']") + .should('have.length', 6) + .then((initialSpanIds) => { + const initialCount = initialSpanIds.length; + expect(initialCount).to.equal(6); + + cy.get("[data-test-subj='treeExpandAll']").click(); + + cy.get("[data-test-subj='spanId-link']").then((expandedSpanIds) => { + const expandedCount = expandedSpanIds.length; + expect(expandedCount).to.equal(10); + }); + + cy.get("[data-test-subj='treeCollapseAll']").click(); + + cy.get("[data-test-subj='spanId-link']").then((collapsedSpanIds) => { + const collapsedCount = collapsedSpanIds.length; + expect(collapsedCount).to.equal(6); // Collapsed rows should match the initial count + }); }); - }); }); - + it('Verifies tree view expand arrow functionality', () => { cy.get('.euiButtonGroup').contains('Tree view').click(); cy.contains('Expand all').should('exist'); @@ -208,10 +212,10 @@ describe('Testing traces tree view', () => { cy.get("[data-test-subj='spanId-link']").then((initialSpanIds) => { const initialCount = initialSpanIds.length; expect(initialCount).to.equal(6); - + // Find and click the first tree view expand arrow cy.get("[data-test-subj='treeViewExpandArrow']").first().click(); - + // Check the number of Span IDs after expanding the arrow (should be 7) cy.get("[data-test-subj='spanId-link']").then((expandedSpanIds) => { const expandedCount = expandedSpanIds.length; @@ -219,7 +223,7 @@ describe('Testing traces tree view', () => { }); }); }); - + it('Verifies span flyout', () => { cy.get('.euiButtonGroup').contains('Tree view').click(); cy.contains('Expand all').should('exist'); @@ -227,11 +231,11 @@ describe('Testing traces tree view', () => { // Waiting time for render to complete cy.get("[data-test-subj='treeExpandAll']").click(); cy.get("[data-test-subj='treeCollapseAll']").click(); - + // Open flyout for a span cy.get("[data-test-subj='spanId-link']") - .contains(SPAN_ID_TREE_VIEW) - .click() + .contains(SPAN_ID_TREE_VIEW) + .click() cy.contains('Span detail').should('exist'); cy.contains('Span attributes').should('exist'); }); diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap index b48c8a26b..7faec5d3a 100644 --- a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap +++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap @@ -13,7 +13,7 @@ exports[`SpanDetailTable renders the component with data 1`] = ` >
@@ -392,7 +394,7 @@ exports[`SpanDetailTable renders the jaeger component with data 1`] = ` >
@@ -858,7 +862,7 @@ exports[`SpanDetailTableHierarchy renders the jaeger component with data 1`] = ` >
(null); const [availableWidth, setAvailableWidth] = useState(window.innerWidth); + const newNavigation = coreRefs?.chrome?.navGroup.getNavGroupEnabled?.(); - useEffect(() => { - const updateAvailableWidth = () => { - if (containerRef.current) { - setAvailableWidth(containerRef.current.getBoundingClientRect().width); - } else { - setAvailableWidth(window.innerWidth); - } - }; + const updateAvailableWidth = () => { + if (containerRef.current) { + setAvailableWidth(containerRef.current.getBoundingClientRect().width); + } else { + setAvailableWidth(window.innerWidth); + } + }; - const handleFullScreenChange = () => { - const isFullscreenActive = !!document.fullscreenElement; - setIsFullScreen(isFullscreenActive); - updateAvailableWidth(); - }; + const handleFullScreenChange = () => { + const isFullscreenActive = !!document.fullscreenElement; + setIsFullScreen(isFullscreenActive); + updateAvailableWidth(); + }; + useEffect(() => { // Add event listeners for window resize and full-screen toggling window.addEventListener('resize', updateAvailableWidth); document.addEventListener('fullscreenchange', handleFullScreenChange); @@ -99,8 +98,9 @@ export function SpanDetailPanel(props: { }, []); const dynamicLayoutAdjustment = useMemo(() => { - const adjustment = newNavigation ? 350 : 400; - return isLocked ? availableWidth - adjustment : availableWidth - 150; + const adjustment = newNavigation ? 350 : 400; // allows resizing of the window + const leftNavAdjustment = newNavigation ? 125 : 75; + return isLocked ? availableWidth - adjustment : availableWidth - leftNavAdjustment; }, [isLocked, availableWidth]); // Update selectedRange whenever data.ganttMaxX changes to ensure it starts fully zoomed out @@ -348,6 +348,19 @@ export function SpanDetailPanel(props: { dragLayer.style.cursor = ''; }, []); + const onRelayoutHandler = useCallback( + (event) => { + // Handle x-axis range update + if (event && event['xaxis.range[0]'] && event['xaxis.range[1]']) { + const newRange = [event['xaxis.range[0]'], event['xaxis.range[1]']]; + setSelectedRange(newRange); + } else { + setSelectedRange(fullRange); + } + }, + [setSelectedRange, fullRange] + ); + const toggleOptions = [ { id: 'timeline', @@ -380,6 +393,7 @@ export function SpanDetailPanel(props: { } }} dataSourceMDSId={props.dataSourceMDSId} + availableWidth={dynamicLayoutAdjustment} />
), @@ -402,6 +416,7 @@ export function SpanDetailPanel(props: { } }} dataSourceMDSId={props.dataSourceMDSId} + availableWidth={dynamicLayoutAdjustment} />
), @@ -425,15 +440,7 @@ export function SpanDetailPanel(props: { onClickHandler={onClick} onHoverHandler={onHover} onUnhoverHandler={onUnhover} - onRelayout={(event) => { - // Handle x-axis range update - if (event && event['xaxis.range[0]'] && event['xaxis.range[1]']) { - const newRange = [event['xaxis.range[0]'], event['xaxis.range[1]']]; - setSelectedRange(newRange); - } else { - setSelectedRange(fullRange); - } - }} + onRelayout={onRelayoutHandler} /> ), [data.gantt, layout, onClick, onHover, onUnhover, setSelectedRange] diff --git a/public/components/trace_analytics/components/traces/span_detail_table.tsx b/public/components/trace_analytics/components/traces/span_detail_table.tsx index e3971f6ef..1651f2f2c 100644 --- a/public/components/trace_analytics/components/traces/span_detail_table.tsx +++ b/public/components/trace_analytics/components/traces/span_detail_table.tsx @@ -34,6 +34,7 @@ interface SpanDetailTableProps { DSL?: any; setTotal?: (total: number) => void; dataSourceMDSId: string; + availableWidth?: number; } export interface SpanSearchParams { @@ -300,6 +301,11 @@ export function SpanDetailTable(props: SpanDetailTableProps) { onChangePage, }} style={{ + width: fullScreenMode + ? '100%' + : props.availableWidth + ? `${props.availableWidth}px` + : '100%', // allow page to be resized height: fullScreenMode ? '100%' : 'auto', }} /> @@ -491,7 +497,15 @@ export function SpanDetailTableHierarchy(props: SpanDetailTableProps) { showFullScreenSelector: false, additionalControls: toolbarButtons, }} - style={{ height: fullScreenMode ? '100%' : '500px', overflowY: 'auto' }} + style={{ + width: fullScreenMode + ? '100%' + : props.availableWidth + ? `${props.availableWidth}px` + : '100%', // allow page to be resized + height: fullScreenMode ? '100%' : '500px', + overflowY: 'auto', + }} /> {!fullScreenMode && total === 0 && }