Skip to content

Commit

Permalink
Merge branch 'main' into tracesBugsWBD
Browse files Browse the repository at this point in the history
  • Loading branch information
@TackAdam
TackAdam authored Dec 21, 2024
2 parents 8a15a30 + 36cdef5 commit 74a3b5b
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 66 deletions.
1 change: 1 addition & 0 deletions .cypress/integration/app_analytics_test/app_analytics.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
3 changes: 2 additions & 1 deletion .cypress/integration/trace_analytics_test/trace_analytics_services.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
72 changes: 38 additions & 34 deletions .cypress/integration/trace_analytics_test/trace_analytics_traces.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
});

Expand All @@ -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');
Expand All @@ -208,30 +212,30 @@ 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;
expect(expandedCount).to.equal(7);
});
});
});

it('Verifies span flyout', () => {
cy.get('.euiButtonGroup').contains('Tree view').click();
cy.contains('Expand all').should('exist');
cy.contains("Collapse all").should('exist')
// 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');
});
Expand Down
12 changes: 8 additions & 4 deletions ...trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ exports[`SpanDetailTable renders the component with data 1`] = `
>
<div
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
style="height: auto;"
style="width: 100%; height: auto;"
/>
</div>
<div
Expand Down Expand Up @@ -151,6 +151,7 @@ exports[`SpanDetailTable renders the empty component 1`] = `
style={
Object {
"height": "auto",
"width": "100%",
}
}
toolbarVisibility={
Expand Down Expand Up @@ -274,6 +275,7 @@ exports[`SpanDetailTable renders the empty component 1`] = `
style={
Object {
"height": "auto",
"width": "100%",
}
}
/>
Expand Down Expand Up @@ -392,7 +394,7 @@ exports[`SpanDetailTable renders the jaeger component with data 1`] = `
>
<div
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
style="height: auto;"
style="width: 100%; height: auto;"
/>
</div>
<div
Expand Down Expand Up @@ -447,7 +449,7 @@ exports[`SpanDetailTableHierarchy renders the component with data 1`] = `
>
<div
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
style="height: 500px; overflow-y: auto;"
style="width: 100%; height: 500px; overflow-y: auto;"
/>
</div>
<div
Expand Down Expand Up @@ -598,6 +600,7 @@ exports[`SpanDetailTableHierarchy renders the empty component 1`] = `
Object {
"height": "500px",
"overflowY": "auto",
"width": "100%",
}
}
toolbarVisibility={
Expand Down Expand Up @@ -740,6 +743,7 @@ exports[`SpanDetailTableHierarchy renders the empty component 1`] = `
Object {
"height": "500px",
"overflowY": "auto",
"width": "100%",
}
}
/>
Expand Down Expand Up @@ -858,7 +862,7 @@ exports[`SpanDetailTableHierarchy renders the jaeger component with data 1`] = `
>
<div
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
style="height: 500px; overflow-y: auto;"
style="width: 100%; height: 500px; overflow-y: auto;"
/>
</div>
<div
Expand Down
59 changes: 33 additions & 26 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 @@ -27,8 +27,6 @@ import { SpanDetailFlyout } from './span_detail_flyout';
import { SpanDetailTable, SpanDetailTableHierarchy } from './span_detail_table';
import { coreRefs } from '../../../../framework/core_refs';

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

export function SpanDetailPanel(props: {
http: HttpSetup;
traceId: string;
Expand Down Expand Up @@ -68,22 +66,23 @@ export function SpanDetailPanel(props: {
const [isFullScreen, setIsFullScreen] = useState(false);
const containerRef = useRef<HTMLDivElement | null>(null);
const [availableWidth, setAvailableWidth] = useState<number>(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);
Expand All @@ -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
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -380,6 +393,7 @@ export function SpanDetailPanel(props: {
}
}}
dataSourceMDSId={props.dataSourceMDSId}
availableWidth={dynamicLayoutAdjustment}
/>
</div>
),
Expand All @@ -402,6 +416,7 @@ export function SpanDetailPanel(props: {
}
}}
dataSourceMDSId={props.dataSourceMDSId}
availableWidth={dynamicLayoutAdjustment}
/>
</div>
),
Expand All @@ -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]
Expand Down
16 changes: 15 additions & 1 deletion public/components/trace_analytics/components/traces/span_detail_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ interface SpanDetailTableProps {
DSL?: any;
setTotal?: (total: number) => void;
dataSourceMDSId: string;
availableWidth?: number;
}

export interface SpanSearchParams {
Expand Down Expand Up @@ -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',
}}
/>
Expand Down Expand Up @@ -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',
}}
/>
</FullScreenWrapper>
{!fullScreenMode && total === 0 && <NoMatchMessage size="xl" />}
Expand Down

0 comments on commit 74a3b5b

Please sign in to comment.