Skip to content

Commit 36cdef5

Browse files
TackAdamAdam Tackett
TackAdam
and
Adam Tackett
authored
Gantt Chart / Service Map followup (#2294)
* fix resizing bug, style fixes Signed-off-by: Adam Tackett <[email protected]> * fix cypress flaky test Signed-off-by: Adam Tackett <[email protected]> * fix flaky analytics test Signed-off-by: Adam Tackett <[email protected]> * fix flaky pagnation test Signed-off-by: Adam Tackett <[email protected]> * fix for flaky node check Signed-off-by: Adam Tackett <[email protected]> * remove .only Signed-off-by: Adam Tackett <[email protected]> * remove only Signed-off-by: Adam Tackett <[email protected]> --------- Signed-off-by: Adam Tackett <[email protected]> Co-authored-by: Adam Tackett <[email protected]>
1 parent 6f67c50 commit 36cdef5

File tree

6 files changed

+97
-66
lines changed

6 files changed

+97
-66
lines changed

‎.cypress/integration/app_analytics_test/app_analytics.spec.js

+1
Original file line numberDiff line numberDiff line change
@@ -355,6 +355,7 @@ describe('Viewing application', () => {
355355
cy.get('[data-test-subj="app-analytics-panelTab"]').click();
356356
cy.get('[aria-label="actionMenuButton"]').click();
357357
cy.get('[data-test-subj="editVizContextMenuItem"]').click();
358+
changeTimeTo24('months');//Ensure time is set
358359
cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
359360
cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
360361
cy.get('.euiTab[id="availability-panel"]').click();

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,8 @@ describe('Testing Service map', () => {
201201
cy.get('[data-text="Errors"]').click();
202202
cy.contains('60%');
203203
cy.get('[data-text="Duration"]').click();
204-
cy.contains('100');
204+
cy.contains('Average duration (ms)');
205+
cy.get("[data-test-subj='tableHeaderCell_average_latency_1']").click();
205206

206207
// clicks on payment node
207208
cy.get('.vis-network canvas').click(707, 388);

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

+38-34
Original file line numberDiff line numberDiff line change
@@ -132,25 +132,27 @@ describe('Testing traces table', () => {
132132
cy.get('.euiTableCellContent__text').contains('Percentile in trace group').should('exist');
133133
cy.get('.euiTableCellContent__text').contains('Errors').should('exist');
134134
cy.get('.euiTableCellContent__text').contains('Last updated').should('exist');
135+
cy.get("[data-test-subj='tableHeaderCell_trace_group_1']").click();
136+
cy.contains('mysql').should('not.exist');
135137
cy.get('[data-test-subj="pagination-button-next"]').click();
136-
cy.contains('client_pay_order').should('exist');
138+
cy.contains('HTTP POST').should('exist');
137139
cy.get('[data-test-subj="pagination-button-previous"]').click();
138-
cy.contains('224.99').should('exist');
140+
cy.contains('56.88').should('exist');
139141
cy.get('.euiButtonEmpty').contains('5').click();
140-
cy.contains('690d3c7af1a78cf89c43e').should('exist');
142+
cy.contains('386d26555771f39c0caaf').should('exist');
141143
cy.contains('5be8370207cbb002a165d').click();
142144
cy.contains('client_create_order').should('exist');
143145
cy.get('path[style*="rgb(116, 146, 231)"]').should('exist');
144146
cy.go('back');
145147
cy.get('.euiButtonEmpty__text').contains('Rows per page').click();
146148
cy.get('.euiContextMenuItem__text').contains('15 rows').click();
147-
let expected_row_count=15;
149+
let expected_row_count = 15;
148150
cy.get('.euiTable--auto')
149-
.find("tr")
150-
.then((row) => {
151-
let total=row.length-1;
152-
expect(total).to.equal(expected_row_count);
153-
});
151+
.find("tr")
152+
.then((row) => {
153+
let total = row.length - 1;
154+
expect(total).to.equal(expected_row_count);
155+
});
154156
});
155157
});
156158

@@ -176,27 +178,29 @@ describe('Testing traces tree view', () => {
176178
//Waiting time for render to complete
177179
cy.get("[data-test-subj='treeExpandAll']").click();
178180
cy.get("[data-test-subj='treeCollapseAll']").click();
179-
180-
cy.get("[data-test-subj='spanId-link']").then((initialSpanIds) => {
181-
const initialCount = initialSpanIds.length;
182-
expect(initialCount).to.equal(6);
183-
184-
cy.get("[data-test-subj='treeExpandAll']").click();
185-
186-
cy.get("[data-test-subj='spanId-link']").then((expandedSpanIds) => {
187-
const expandedCount = expandedSpanIds.length;
188-
expect(expandedCount).to.equal(10);
189-
});
190-
191-
cy.get("[data-test-subj='treeCollapseAll']").click();
192-
193-
cy.get("[data-test-subj='spanId-link']").then((collapsedSpanIds) => {
194-
const collapsedCount = collapsedSpanIds.length;
195-
expect(collapsedCount).to.equal(6); // Collapsed rows should match the initial count
181+
182+
cy.get("[data-test-subj='spanId-link']")
183+
.should('have.length', 6)
184+
.then((initialSpanIds) => {
185+
const initialCount = initialSpanIds.length;
186+
expect(initialCount).to.equal(6);
187+
188+
cy.get("[data-test-subj='treeExpandAll']").click();
189+
190+
cy.get("[data-test-subj='spanId-link']").then((expandedSpanIds) => {
191+
const expandedCount = expandedSpanIds.length;
192+
expect(expandedCount).to.equal(10);
193+
});
194+
195+
cy.get("[data-test-subj='treeCollapseAll']").click();
196+
197+
cy.get("[data-test-subj='spanId-link']").then((collapsedSpanIds) => {
198+
const collapsedCount = collapsedSpanIds.length;
199+
expect(collapsedCount).to.equal(6); // Collapsed rows should match the initial count
200+
});
196201
});
197-
});
198202
});
199-
203+
200204
it('Verifies tree view expand arrow functionality', () => {
201205
cy.get('.euiButtonGroup').contains('Tree view').click();
202206
cy.contains('Expand all').should('exist');
@@ -208,30 +212,30 @@ describe('Testing traces tree view', () => {
208212
cy.get("[data-test-subj='spanId-link']").then((initialSpanIds) => {
209213
const initialCount = initialSpanIds.length;
210214
expect(initialCount).to.equal(6);
211-
215+
212216
// Find and click the first tree view expand arrow
213217
cy.get("[data-test-subj='treeViewExpandArrow']").first().click();
214-
218+
215219
// Check the number of Span IDs after expanding the arrow (should be 7)
216220
cy.get("[data-test-subj='spanId-link']").then((expandedSpanIds) => {
217221
const expandedCount = expandedSpanIds.length;
218222
expect(expandedCount).to.equal(7);
219223
});
220224
});
221225
});
222-
226+
223227
it('Verifies span flyout', () => {
224228
cy.get('.euiButtonGroup').contains('Tree view').click();
225229
cy.contains('Expand all').should('exist');
226230
cy.contains("Collapse all").should('exist')
227231
// Waiting time for render to complete
228232
cy.get("[data-test-subj='treeExpandAll']").click();
229233
cy.get("[data-test-subj='treeCollapseAll']").click();
230-
234+
231235
// Open flyout for a span
232236
cy.get("[data-test-subj='spanId-link']")
233-
.contains(SPAN_ID_TREE_VIEW)
234-
.click()
237+
.contains(SPAN_ID_TREE_VIEW)
238+
.click()
235239
cy.contains('Span detail').should('exist');
236240
cy.contains('Span attributes').should('exist');
237241
});

‎public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap

+8-4
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ exports[`SpanDetailTable renders the component with data 1`] = `
1313
>
1414
<div
1515
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
16-
style="height: auto;"
16+
style="width: 100%; height: auto;"
1717
/>
1818
</div>
1919
<div
@@ -151,6 +151,7 @@ exports[`SpanDetailTable renders the empty component 1`] = `
151151
style={
152152
Object {
153153
"height": "auto",
154+
"width": "100%",
154155
}
155156
}
156157
toolbarVisibility={
@@ -274,6 +275,7 @@ exports[`SpanDetailTable renders the empty component 1`] = `
274275
style={
275276
Object {
276277
"height": "auto",
278+
"width": "100%",
277279
}
278280
}
279281
/>
@@ -392,7 +394,7 @@ exports[`SpanDetailTable renders the jaeger component with data 1`] = `
392394
>
393395
<div
394396
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
395-
style="height: auto;"
397+
style="width: 100%; height: auto;"
396398
/>
397399
</div>
398400
<div
@@ -447,7 +449,7 @@ exports[`SpanDetailTableHierarchy renders the component with data 1`] = `
447449
>
448450
<div
449451
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
450-
style="height: 500px; overflow-y: auto;"
452+
style="width: 100%; height: 500px; overflow-y: auto;"
451453
/>
452454
</div>
453455
<div
@@ -598,6 +600,7 @@ exports[`SpanDetailTableHierarchy renders the empty component 1`] = `
598600
Object {
599601
"height": "500px",
600602
"overflowY": "auto",
603+
"width": "100%",
601604
}
602605
}
603606
toolbarVisibility={
@@ -740,6 +743,7 @@ exports[`SpanDetailTableHierarchy renders the empty component 1`] = `
740743
Object {
741744
"height": "500px",
742745
"overflowY": "auto",
746+
"width": "100%",
743747
}
744748
}
745749
/>
@@ -858,7 +862,7 @@ exports[`SpanDetailTableHierarchy renders the jaeger component with data 1`] = `
858862
>
859863
<div
860864
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
861-
style="height: 500px; overflow-y: auto;"
865+
style="width: 100%; height: 500px; overflow-y: auto;"
862866
/>
863867
</div>
864868
<div

‎public/components/trace_analytics/components/traces/span_detail_panel.tsx

+33-26
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@ import { SpanDetailFlyout } from './span_detail_flyout';
2727
import { SpanDetailTable, SpanDetailTableHierarchy } from './span_detail_table';
2828
import { coreRefs } from '../../../../framework/core_refs';
2929

30-
const newNavigation = coreRefs?.chrome?.navGroup.getNavGroupEnabled?.();
31-
3230
export function SpanDetailPanel(props: {
3331
http: HttpSetup;
3432
traceId: string;
@@ -68,22 +66,23 @@ export function SpanDetailPanel(props: {
6866
const [isFullScreen, setIsFullScreen] = useState(false);
6967
const containerRef = useRef<HTMLDivElement | null>(null);
7068
const [availableWidth, setAvailableWidth] = useState<number>(window.innerWidth);
69+
const newNavigation = coreRefs?.chrome?.navGroup.getNavGroupEnabled?.();
7170

72-
useEffect(() => {
73-
const updateAvailableWidth = () => {
74-
if (containerRef.current) {
75-
setAvailableWidth(containerRef.current.getBoundingClientRect().width);
76-
} else {
77-
setAvailableWidth(window.innerWidth);
78-
}
79-
};
71+
const updateAvailableWidth = () => {
72+
if (containerRef.current) {
73+
setAvailableWidth(containerRef.current.getBoundingClientRect().width);
74+
} else {
75+
setAvailableWidth(window.innerWidth);
76+
}
77+
};
8078

81-
const handleFullScreenChange = () => {
82-
const isFullscreenActive = !!document.fullscreenElement;
83-
setIsFullScreen(isFullscreenActive);
84-
updateAvailableWidth();
85-
};
79+
const handleFullScreenChange = () => {
80+
const isFullscreenActive = !!document.fullscreenElement;
81+
setIsFullScreen(isFullscreenActive);
82+
updateAvailableWidth();
83+
};
8684

85+
useEffect(() => {
8786
// Add event listeners for window resize and full-screen toggling
8887
window.addEventListener('resize', updateAvailableWidth);
8988
document.addEventListener('fullscreenchange', handleFullScreenChange);
@@ -99,8 +98,9 @@ export function SpanDetailPanel(props: {
9998
}, []);
10099

101100
const dynamicLayoutAdjustment = useMemo(() => {
102-
const adjustment = newNavigation ? 350 : 400;
103-
return isLocked ? availableWidth - adjustment : availableWidth - 150;
101+
const adjustment = newNavigation ? 350 : 400; // allows resizing of the window
102+
const leftNavAdjustment = newNavigation ? 125 : 75;
103+
return isLocked ? availableWidth - adjustment : availableWidth - leftNavAdjustment;
104104
}, [isLocked, availableWidth]);
105105

106106
// Update selectedRange whenever data.ganttMaxX changes to ensure it starts fully zoomed out
@@ -348,6 +348,19 @@ export function SpanDetailPanel(props: {
348348
dragLayer.style.cursor = '';
349349
}, []);
350350

351+
const onRelayoutHandler = useCallback(
352+
(event) => {
353+
// Handle x-axis range update
354+
if (event && event['xaxis.range[0]'] && event['xaxis.range[1]']) {
355+
const newRange = [event['xaxis.range[0]'], event['xaxis.range[1]']];
356+
setSelectedRange(newRange);
357+
} else {
358+
setSelectedRange(fullRange);
359+
}
360+
},
361+
[setSelectedRange, fullRange]
362+
);
363+
351364
const toggleOptions = [
352365
{
353366
id: 'timeline',
@@ -380,6 +393,7 @@ export function SpanDetailPanel(props: {
380393
}
381394
}}
382395
dataSourceMDSId={props.dataSourceMDSId}
396+
availableWidth={dynamicLayoutAdjustment}
383397
/>
384398
</div>
385399
),
@@ -402,6 +416,7 @@ export function SpanDetailPanel(props: {
402416
}
403417
}}
404418
dataSourceMDSId={props.dataSourceMDSId}
419+
availableWidth={dynamicLayoutAdjustment}
405420
/>
406421
</div>
407422
),
@@ -425,15 +440,7 @@ export function SpanDetailPanel(props: {
425440
onClickHandler={onClick}
426441
onHoverHandler={onHover}
427442
onUnhoverHandler={onUnhover}
428-
onRelayout={(event) => {
429-
// Handle x-axis range update
430-
if (event && event['xaxis.range[0]'] && event['xaxis.range[1]']) {
431-
const newRange = [event['xaxis.range[0]'], event['xaxis.range[1]']];
432-
setSelectedRange(newRange);
433-
} else {
434-
setSelectedRange(fullRange);
435-
}
436-
}}
443+
onRelayout={onRelayoutHandler}
437444
/>
438445
),
439446
[data.gantt, layout, onClick, onHover, onUnhover, setSelectedRange]

‎public/components/trace_analytics/components/traces/span_detail_table.tsx

+15-1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ interface SpanDetailTableProps {
3434
DSL?: any;
3535
setTotal?: (total: number) => void;
3636
dataSourceMDSId: string;
37+
availableWidth?: number;
3738
}
3839

3940
export interface SpanSearchParams {
@@ -300,6 +301,11 @@ export function SpanDetailTable(props: SpanDetailTableProps) {
300301
onChangePage,
301302
}}
302303
style={{
304+
width: fullScreenMode
305+
? '100%'
306+
: props.availableWidth
307+
? `${props.availableWidth}px`
308+
: '100%', // allow page to be resized
303309
height: fullScreenMode ? '100%' : 'auto',
304310
}}
305311
/>
@@ -491,7 +497,15 @@ export function SpanDetailTableHierarchy(props: SpanDetailTableProps) {
491497
showFullScreenSelector: false,
492498
additionalControls: toolbarButtons,
493499
}}
494-
style={{ height: fullScreenMode ? '100%' : '500px', overflowY: 'auto' }}
500+
style={{
501+
width: fullScreenMode
502+
? '100%'
503+
: props.availableWidth
504+
? `${props.availableWidth}px`
505+
: '100%', // allow page to be resized
506+
height: fullScreenMode ? '100%' : '500px',
507+
overflowY: 'auto',
508+
}}
495509
/>
496510
</FullScreenWrapper>
497511
{!fullScreenMode && total === 0 && <NoMatchMessage size="xl" />}

0 commit comments

Comments
 (0)