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

[Backport 2.x] Fix flaky render of spans table tests #2266

Merged
merged 1 commit into from
Nov 27, 2024
Merged

[Backport 2.x] Fix flaky render of spans table tests #2266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
89 changes: 63 additions & 26 deletions .cypress/integration/trace_analytics_test/trace_analytics_services.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,18 @@

/// <reference types="cypress" />

import { expandServiceView, SERVICE_NAME, SERVICE_SPAN_ID, setTimeFilter, verify_traces_spans_data_grid_cols_exists, count_table_row, AUTH_SERVICE_SPAN_ID } from '../../utils/constants';
import {
expandServiceView,
SERVICE_NAME,
SERVICE_SPAN_ID,
setTimeFilter,
verify_traces_spans_data_grid_cols_exists,
count_table_row,
AUTH_SERVICE_SPAN_ID,
} from '../../utils/constants';
import { suppressResizeObserverIssue } from '../../utils/constants';

suppressResizeObserverIssue();//needs to be in file once
suppressResizeObserverIssue(); //needs to be in file once

describe('Testing services table empty state', () => {
beforeEach(() => {
Expand Down Expand Up @@ -52,7 +60,9 @@
});

it('Verify columns in Services table', () => {
cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .panel-title').contains('Services').should('exist');
cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .panel-title')
.contains('Services')
.should('exist');
cy.get('.euiTableCellContent__text[title="Name"]').should('exist');
cy.get('.euiTableCellContent__text[title="Average duration (ms)"]').should('exist');
cy.get('.euiTableCellContent__text[title="Error rate"]').should('exist');
Expand All @@ -61,17 +71,20 @@
cy.get('.euiTableCellContent__text[title="Connected services"]').should('exist');
cy.get('.euiTableCellContent__text[title="Traces"]').should('exist');
cy.get('[data-test-subj="tablePaginationPopoverButton"]').click();
cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiContextMenu__icon').eq(0).should('exist').click();
cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiContextMenu__icon')
.eq(0)
.should('exist')
.click();
cy.get('[data-test-subj="pagination-button-next"]').should('exist').click();
cy.get('.euiLink.euiLink--primary').contains('order').should('exist');
})
});

it('Navigate from Services to Traces', () => {
cy.get('.euiTableCellContent__text[title="Traces"]').should('exist');
cy.contains('74').should('exist').click();
cy.get('.euiText.euiText--medium .panel-title').should('exist');
cy.get('.euiBadge__childButton[data-test-subj="filterBadge"]').should('exist');
})
});
});

describe('Testing service view empty state', () => {
Expand Down Expand Up @@ -102,7 +115,7 @@
setTimeFilter();
cy.get('input[type="search"]').first().focus().type(`${SERVICE_NAME}`);
cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
cy.get('.euiTableRow').should('have.length.lessThan', 3);//Replaces wait
cy.get('.euiTableRow').should('have.length.lessThan', 3); //Replaces wait
expandServiceView(0);
});

Expand All @@ -123,14 +136,16 @@
});

it('Renders spans data grid, flyout, filters', () => {
cy.get("[data-test-subj='spanId-link']").contains(SERVICE_SPAN_ID).trigger('mouseover', { force: true });
cy.get("[data-test-subj='spanId-link']")

Check warning on line 139 in .cypress/integration/trace_analytics_test/trace_analytics_services.spec.js

View workflow job for this annotation

GitHub Actions / Lint 

Do not use force on click and type calls
.contains(SERVICE_SPAN_ID)
.trigger('mouseover', { force: true });
cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true });

Check warning on line 142 in .cypress/integration/trace_analytics_test/trace_analytics_services.spec.js

View workflow job for this annotation

GitHub Actions / Lint 

Do not use force on click and type calls
cy.contains('Span detail').should('exist');
cy.contains('Span attributes').should('exist');
cy.get('.euiTextColor').contains('Span ID').trigger('mouseover');
cy.get('.euiButtonIcon[aria-label="span-flyout-filter-icon"').click({ force: true });

Check warning on line 146 in .cypress/integration/trace_analytics_test/trace_analytics_services.spec.js

View workflow job for this annotation

GitHub Actions / Lint 

Do not use force on click and type calls
cy.get('.euiBadge__text').contains('spanId: ').should('exist');
cy.get('[data-test-subj="euiFlyoutCloseButton"]').click({ force: true });

Check warning on line 148 in .cypress/integration/trace_analytics_test/trace_analytics_services.spec.js

View workflow job for this annotation

GitHub Actions / Lint 

Do not use force on click and type calls
cy.contains('Spans (1)').should('exist');
});
});
Expand All @@ -157,7 +172,7 @@
cy.contains('100');
cy.get('.euiFormLabel.euiFormControlLayout__prepend').contains('Focus on').should('exist');
cy.get('[placeholder="Service name"]').focus().type('database{enter}');
})
});
});

describe('Testing traces Spans table verify table headers functionality', () => {
Expand Down Expand Up @@ -185,53 +200,71 @@
it('Toggle columns and verify the columns hidden text verify rows', () => {
cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist');
expandServiceView(1);
cy.get('[data-test-subj = "dataGridColumnSelectorButton"]').click({ force: true });

Check warning on line 203 in .cypress/integration/trace_analytics_test/trace_analytics_services.spec.js

View workflow job for this annotation

GitHub Actions / Lint 

Do not use force on click and type calls
cy.get('.panel-title-count').contains('8').should('exist');
cy.get('.euiSwitch.euiSwitch--compressed.euiSwitch--mini .euiSwitch__button').eq(3).click();
cy.get('[data-test-subj = "dataGridColumnSelectorButton"]').click().should('have.text', '2 columns hidden');
cy.get('[data-test-subj = "dataGridColumnSelectorButton"]')
.click()
.should('have.text', '2 columns hidden');
count_table_row(8);
});

it('Show all button Spans table', () => {
cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist');
expandServiceView(1);
cy.get('[data-test-subj = "dataGridColumnSelectorButton"]').click();
cy.get('.euiPopoverFooter .euiFlexItem.euiFlexItem--flexGrowZero').eq(0).should('have.text', 'Show all').click();
cy.get('.euiPopoverFooter .euiFlexItem.euiFlexItem--flexGrowZero')
.eq(0)
.should('have.text', 'Show all')
.click();
cy.get('.euiDataGrid__focusWrap').click().should('exist');
verify_traces_spans_data_grid_cols_exists();
});

it('Hide all button Spans table', () => {
cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist');
expandServiceView(1);
cy.get('.euiTableRow').should('have.length.lessThan', 2);//Replace wait
cy.get('.euiTableRow').should('have.length.lessThan', 2); //Replace wait
cy.get('[data-test-subj = "dataGridColumnSelectorButton"]').click();
cy.get('.euiPopoverFooter .euiFlexItem.euiFlexItem--flexGrowZero').eq(1).should('have.text', 'Hide all').click();
cy.get('.euiPopoverFooter .euiFlexItem.euiFlexItem--flexGrowZero')
.eq(1)
.should('have.text', 'Hide all')
.click();
cy.get('.euiDataGrid__focusWrap').click().should('exist');
cy.get('[data-test-subj="dataGridColumnSelectorPopover"]').should('have.text', '10 columns hidden');
cy.get('[data-test-subj="dataGridColumnSelectorPopover"]').should(
'have.text',
'10 columns hidden'
);
});

it('Render Spans table and change data table Density', () => {
cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist');
expandServiceView(1);
verify_traces_spans_data_grid_cols_exists();
cy.get('[data-test-subj="service-dep-table"]').should('exist');
cy.get('.euiButtonEmpty__text').contains('Density').click();
cy.get('.euiButtonContent__icon').eq(5).click();
cy.get('.euiButtonContent__icon').eq(6).click();
cy.get('.euiButtonContent__icon').eq(7).click();
cy.contains('.euiButtonContent', 'Compact density').find('.euiButtonContent__icon').click();
cy.contains('.euiButtonContent', 'Normal density').find('.euiButtonContent__icon').click();
cy.contains('.euiButtonContent', 'Expanded density').find('.euiButtonContent__icon').click();
});

it('Render Spans table and and click on sort', () => {
cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist');
expandServiceView(1);
verify_traces_spans_data_grid_cols_exists();
cy.get('[data-test-subj="dataGridColumnSortingButton"]').contains('Sort fields').should('exist').click();
cy.get('[data-test-subj="service-dep-table"]').should('exist');
cy.get('[data-test-subj="dataGridColumnSortingButton"]')
.contains('Sort fields')
.should('exist')
.click();
cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection"]').click();
cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-spanId').click();
cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-parentSpanId"]').click();
cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-traceId"]').click();
cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-traceGroup').click();
cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-durationInNanos"]').click();
cy.get(
'[data-test-subj="dataGridColumnSortingPopoverColumnSelection-durationInNanos"]'
).click();
cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-startTime"]').click();
cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-endTime').click();
cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-status.code"]').click();
Expand Down Expand Up @@ -262,11 +295,15 @@
cy.get('.euiFlyoutBody .panel-title').contains('Overview').should('exist');
cy.get('.euiTextColor.euiTextColor--subdued').contains('Span ID').should('exist');
cy.get('[data-test-subj="parentSpanId"]').contains('d03fecfa0f55b77c').should('exist');
cy.get('.euiFlyoutBody__overflowContent .panel-title').contains('Span attributes').should('exist');
cy.get('.euiFlyoutBody__overflowContent .panel-title')
.contains('Span attributes')
.should('exist');
cy.get('.euiDescriptionList__description .euiFlexItem').eq(0).trigger('mouseover').click();
cy.get('[aria-label="span-flyout-filter-icon"]').click();
cy.get('.euiFlyout__closeButton.euiFlyout__closeButton--inside').click();
cy.get('.euiBadge__content .euiBadge__text').contains('spanId: 277a5934acf55dcf').should('exist');
cy.get('.euiBadge__content .euiBadge__text')
.contains('spanId: 277a5934acf55dcf')
.should('exist');
count_table_row(1);
cy.get('[aria-label="remove current filter"]').click();
cy.get('.panel-title-count').contains('8').should('exist');
Expand All @@ -277,6 +314,7 @@
cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist');
expandServiceView(1);
verify_traces_spans_data_grid_cols_exists();
cy.get('[data-test-subj="service-dep-table"]').should('exist');
cy.get('.euiDataGridHeaderCell__content').contains('Span ID').click();
cy.get('.euiListGroupItem__label').contains('Hide column').click();
cy.get('.euiDataGridHeaderCell__content').contains('Trace ID').click();
Expand All @@ -286,7 +324,6 @@
});
});


describe('Testing switch mode to jaeger', () => {
beforeEach(() => {
cy.visit('app/observability-traces#/services', {
Expand All @@ -312,9 +349,9 @@
});

it('Verifies traces links to traces page with filter applied', () => {
cy.get('.euiTableRow').should('have.length.lessThan', 7);//Replaces Wait
cy.get('.euiTableRow').should('have.length.lessThan', 7); //Replaces Wait
cy.get('.euiLink').contains('7').click();
cy.contains(' (7)').should('exist');
cy.get("[data-test-subj='filterBadge']").eq(0).contains('process.serviceName: customer')
})
});
cy.get("[data-test-subj='filterBadge']").eq(0).contains('process.serviceName: customer');
});
});
2 changes: 1 addition & 1 deletion public/components/trace_analytics/components/common/plots/service_dependencies_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
throughput: serviceMap[node.label].throughput,
}));
setServiceDependencies(items);
}, [graph]);

Check warning on line 39 in public/components/trace_analytics/components/common/plots/service_dependencies_table.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'serviceMap'. Either include it or remove the dependency array

const columns = useMemo(
() => [
Expand All @@ -45,7 +45,7 @@
name: 'Name',
align: 'left',
sortable: true,
render: (item: any) => (

Check warning on line 48 in public/components/trace_analytics/components/common/plots/service_dependencies_table.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
<EuiText data-test-subj="service-dep-column">
{item.length < 24 ? item : <div title={item}>{truncate(item, { length: 24 })}</div>}
</EuiText>
Expand All @@ -56,7 +56,7 @@
name: 'Average duration (ms)',
align: 'right',
sortable: true,
render: (item: any, row: any) => (

Check warning on line 59 in public/components/trace_analytics/components/common/plots/service_dependencies_table.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type

Check warning on line 59 in public/components/trace_analytics/components/common/plots/service_dependencies_table.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
<ServiceTrendsPlots
item={item}
row={row}
Expand All @@ -70,7 +70,7 @@
name: 'Error rate',
align: 'right',
sortable: true,
render: (item: any, row: any) => (

Check warning on line 73 in public/components/trace_analytics/components/common/plots/service_dependencies_table.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
<ServiceTrendsPlots
item={item}
row={row}
Expand Down Expand Up @@ -99,7 +99,7 @@
);

return (
<EuiPanel>
<EuiPanel data-test-subj="service-dep-table">
<PanelTitle title="Service Dependencies" />
<EuiHorizontalRule margin="m" />
<EuiInMemoryTable
Expand Down
16 changes: 1 addition & 15 deletions ...ts/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,21 +248,7 @@ exports[`Service view component renders service view 1`] = `
<EuiHorizontalRule
margin="m"
/>
<div>
<SpanDetailTable
DSL={Object {}}
dataSourceMDSId=""
hiddenColumns={
Array [
"serviceName",
]
}
http={[MockFunction]}
mode="data_prepper"
openFlyout={[Function]}
setTotal={[Function]}
/>
</div>
<div />
</EuiPanel>
</EuiPageBody>
</EuiPage>
Expand Down
30 changes: 16 additions & 14 deletions public/components/trace_analytics/components/services/service_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -488,20 +488,22 @@ export function ServiceView(props: ServiceViewProps) {
}, [spanFilters]);

const [total, setTotal] = useState(0);
const spanDetailTable = useMemo(
() => (
<SpanDetailTable
http={props.http}
hiddenColumns={['serviceName']}
DSL={DSL}
openFlyout={(spanId: string) => setCurrentSpan(spanId)}
setTotal={setTotal}
mode={mode}
dataSourceMDSId={props.dataSourceMDSId[0].id}
/>
),
[DSL, setCurrentSpan, spanFilters]
);
const spanDetailTable = useMemo(() => {
// only render when time and service state updates in DSL
if (Object.keys(DSL).length > 0)
return (
<SpanDetailTable
http={props.http}
hiddenColumns={['serviceName']}
DSL={DSL}
openFlyout={(spanId: string) => setCurrentSpan(spanId)}
setTotal={setTotal}
mode={mode}
dataSourceMDSId={props.dataSourceMDSId[0].id}
/>
);
return <></>;
}, [DSL, setCurrentSpan, spanFilters]);

const pageToRender = (
<>
Expand Down
Loading