Fix flaky render of spans table tests (#2263)

* Fix flaky load of spans table Signed-off-by: Shenoy Pratik <[email protected]> * update snapshots Signed-off-by: Shenoy Pratik <[email protected]> * update service dep table title Signed-off-by: Shenoy Pratik <[email protected]> * update the data subj to table instead of title Signed-off-by: Shenoy Pratik <[email protected]> * wait for service deps to load Signed-off-by: Shenoy Pratik <[email protected]> * update density test Signed-off-by: Shenoy Pratik <[email protected]> --------- Signed-off-by: Shenoy Pratik <[email protected]>
opensearch-project · Nov 27, 2024 · a1dfaea · a1dfaea
1 parent 55f1907
commit a1dfaea
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 56 deletions.
diff --git a/.cypress/integration/trace_analytics_test/trace_analytics_services.spec.js b/.cypress/integration/trace_analytics_test/trace_analytics_services.spec.js
@@ -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(() => {
@@ -52,7 +60,9 @@ describe('Testing services table', () => {
   });
 
   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');
@@ -61,17 +71,20 @@ describe('Testing services table', () => {
     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', () => {
@@ -102,7 +115,7 @@ describe('Testing service view', () => {
     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);
   });
 
@@ -123,7 +136,9 @@ describe('Testing service view', () => {
   });
 
   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']")
+      .contains(SERVICE_SPAN_ID)
+      .trigger('mouseover', { force: true });
     cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true });
     cy.contains('Span detail').should('exist');
     cy.contains('Span attributes').should('exist');
@@ -157,7 +172,7 @@ describe('Testing Service map', () => {
     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', () => {
@@ -188,50 +203,68 @@ describe('Testing traces Spans table verify table headers functionality', () =>
     cy.get('[data-test-subj = "dataGridColumnSelectorButton"]').click({ force: true });
     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();
@@ -262,11 +295,15 @@ describe('Testing traces Spans table and verify columns functionality', () => {
     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');
@@ -277,6 +314,7 @@ describe('Testing traces Spans table and verify columns functionality', () => {
     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();
@@ -286,7 +324,6 @@ describe('Testing traces Spans table and verify columns functionality', () => {
   });
 });
 
-
 describe('Testing switch mode to jaeger', () => {
   beforeEach(() => {
     cy.visit('app/observability-traces#/services', {
@@ -312,9 +349,9 @@ describe('Testing switch mode to jaeger', () => {
   });
 
   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');
+  });
+});
diff --git a/public/components/trace_analytics/components/common/plots/service_dependencies_table.tsx b/public/components/trace_analytics/components/common/plots/service_dependencies_table.tsx
@@ -99,7 +99,7 @@ export const ServiceDependenciesTable = ({ serviceMap, graph }: ServiceDependenc
   );
 
   return (
-    <EuiPanel>
+    <EuiPanel data-test-subj="service-dep-table">
       <PanelTitle title="Service Dependencies" />
       <EuiHorizontalRule margin="m" />
       <EuiInMemoryTable

diff --git a/...ts/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap b/...ts/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap
@@ -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>

diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
@@ -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 = (
     <>