[Manual Backport 2.x] [Bug] Add loading status to all pages in traces and services pages (#2336) (#2337)

* [Bug] Add loading status to all pages in traces and services pages (#2325)

* add loading status to trace content



* add loading status to trace view and services pages



* update unit tests and remove console.log



* resolve comments



* update cypress tests



* add loader for span flyout and fix trace tests



---------



(cherry picked from commit ca79a8f)

* add app analytic flyout snapshot



---------


(cherry picked from commit 036a4f9)

Signed-off-by: Shenoy Pratik <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: opensearch-trigger-bot[bot]

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

@@ -8,7 +8,7 @@
 import { testDataSet, setTimeFilter, jaegerTestDataSet } from '../../utils/constants';
 import { suppressResizeObserverIssue } from '../../utils/constants';
 
-suppressResizeObserverIssue();//needs to be in file once
+suppressResizeObserverIssue(); //needs to be in file once
 
 describe('Dump test data', () => {
   it('Indexes test data', () => {
@@ -102,8 +102,8 @@ describe('Testing dashboard table', () => {
   });
 
   it('Adds the percentile filters', () => {
-    
     cy.get('[data-test-subj="dashboardTable"]').should('be.visible');
+    cy.contains('client_create_order').should('exist');
     cy.get('[data-test-subj="dashboard-table-percentile-button-2"]').click();
 
     cy.contains('Latency percentile within trace group: >= 95th').should('exist');
@@ -171,7 +171,7 @@ describe('Testing plots', () => {
   });
 });
 
-describe('Latency by trace group table', () =>{
+describe('Latency by trace group table', () => {
   beforeEach(() => {
     cy.visit('app/observability-traces#/', {
       onBeforeLoad: (win) => {
@@ -191,35 +191,59 @@ describe('Latency by trace group table', () =>{
     cy.get('[data-test-subj="tableHeaderCell_dashboard_error_rate_4"]').should('exist');
     cy.get('[data-test-subj="tableHeaderCell_dashboard_traces_5"]').should('exist');
     cy.get('[data-test-subj="tablePaginationPopoverButton"]').eq(1).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"]').eq(1).should('exist').click();
-    cy.get('button[data-test-subj="dashboard-table-trace-group-name-button"]').contains('mysql').should('exist');
+    cy.get('button[data-test-subj="dashboard-table-trace-group-name-button"]')
+      .contains('mysql')
+      .should('exist');
   });
 
   it('Sorts the Latency by trace group table', () => {
     cy.get('span[title*="Trace group name"]').click();
-    cy.get('[data-test-subj="dashboard-table-trace-group-name-button"]').eq(0).contains('/**').should('exist');
+    cy.get('[data-test-subj="dashboard-table-trace-group-name-button"]')
+      .eq(0)
+      .contains('/**')
+      .should('exist');
   });
 
   it('Verify tooltips in Latency by trace group table', () => {
     cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.eui-alignTop').eq(0).trigger('mouseover');
-    cy.contains('Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.').should('be.visible');
+    cy.contains(
+      'Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.'
+    ).should('be.visible');
     cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.eui-alignTop').eq(1).trigger('mouseover');
-    cy.contains('Range of latencies for traces within a trace group in the selected time range.').should('be.visible');
+    cy.contains(
+      'Range of latencies for traces within a trace group in the selected time range.'
+    ).should('be.visible');
     cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.eui-alignTop').eq(2).trigger('mouseover');
-    cy.contains('Average latency of traces within a trace group in the selected time range.').should('be.visible');
+    cy.contains(
+      'Average latency of traces within a trace group in the selected time range.'
+    ).should('be.visible');
     cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.eui-alignTop').eq(3).trigger('mouseover');
-    cy.contains('24 hour time series view of hourly average, hourly percentile, and hourly range of latency for traces within a trace group.').should('be.visible');
+    cy.contains(
+      '24 hour time series view of hourly average, hourly percentile, and hourly range of latency for traces within a trace group.'
+    ).should('be.visible');
     cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.eui-alignTop').eq(4).trigger('mouseover');
-    cy.contains('Error rate based on count of trace errors within a trace group in the selected time range.').should('be.visible');
+    cy.contains(
+      'Error rate based on count of trace errors within a trace group in the selected time range.'
+    ).should('be.visible');
     cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.eui-alignTop').eq(5).trigger('mouseover');
-    cy.contains('Count of traces with unique trace identifiers in the selected time range.').should('be.visible');
+    cy.contains('Count of traces with unique trace identifiers in the selected time range.').should(
+      'be.visible'
+    );
   });
 
   it('Verify Search engine on Trace dashboard', () => {
     cy.get('.euiFieldSearch.euiFieldSearch--fullWidth').click().type('client_pay_order');
     cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
-    cy.get('.euiTableCellContent.euiTableCellContent--alignRight.euiTableCellContent--overflowingContent').contains('211.04').should('exist');
+    cy.get(
+      '.euiTableCellContent.euiTableCellContent--alignRight.euiTableCellContent--overflowingContent'
+    )
+      .contains('211.04')
+      .should('exist');
     cy.get('button[data-test-subj="dashboard-table-trace-group-name-button"]').eq(0).click();
     cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click();
     cy.get('.euiIcon.euiIcon--medium.euiContextMenu__arrow').click();
@@ -232,14 +256,16 @@ describe('Latency by trace group table', () =>{
     cy.get('.euiContextMenuItem__text').eq(1).contains('Include results').click();
     cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click();
     cy.get('.euiContextMenuItem__text').eq(2).contains('Temporarily disable').click();
-    cy.get('.euiBadge.euiBadge--iconRight.globalFilterItem.globalFilterItem-isDisabled').should('exist').click();
+    cy.get('.euiBadge.euiBadge--iconRight.globalFilterItem.globalFilterItem-isDisabled')
+      .should('exist')
+      .click();
     cy.get('.euiContextMenuItem__text').eq(2).contains('Re-enable').click();
     cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click();
     cy.get('.euiContextMenuItem__text').eq(3).contains('Delete').click();
   });
 });
 
-describe('Testing filters on trace analytics page', { scrollBehavior: false }, () =>{
+describe('Testing filters on trace analytics page', { scrollBehavior: false }, () => {
   beforeEach(() => {
     cy.visit('app/observability-traces#/', {
       onBeforeLoad: (win) => {
@@ -249,15 +275,15 @@ describe('Testing filters on trace analytics page', { scrollBehavior: false }, (
     setTimeFilter();
   });
 
-  it('Verify Change all filters', () =>{
+  it('Verify Change all filters', () => {
     cy.get('[data-test-subj="global-filter-button"]').click();
     cy.get('.euiContextMenuPanelTitle').contains('Change all filters').should('exist');
     cy.get('.euiContextMenuItem__text').eq(1).contains('Enable all');
     cy.get('.euiContextMenuItem__text').eq(2).contains('Disable all');
     cy.get('.euiContextMenuItem__text').eq(3).contains('Invert inclusion');
     cy.get('.euiContextMenuItem__text').eq(4).contains('Invert enabled/disabled');
     cy.get('.euiContextMenuItem__text').eq(5).contains('Remove all');
-  })
+  });
 
   it('Verify Add filter section', () => {
     cy.get('[data-test-subj="global-filter-button"]').click();
@@ -271,7 +297,7 @@ describe('Testing filters on trace analytics page', { scrollBehavior: false }, (
     cy.get('.euiIcon.euiIcon--medium.euiContextMenu__arrow').click();
     cy.get('[data-test-subj="filter-popover-cancel-button"]').contains('Cancel').click();
     cy.get('.euiIcon.euiIcon--small.euiIcon--inherit.euiBadge__icon').click();
-  })
+  });
 });
 
 describe('Dump jaeger test data', () => {
@@ -360,9 +386,9 @@ describe('Testing switch mode to jaeger', () => {
     cy.get('[data-test-subj="dashboard-table-traces-button"]').contains('7').click();
 
     cy.contains(' (7)').should('exist');
-    cy.get("[data-test-subj='filterBadge']").eq(0).contains('process.serviceName: redis')
-    cy.get("[data-test-subj='filterBadge']").eq(1).contains('operationName: GetDriver');  
-  })
+    cy.get("[data-test-subj='filterBadge']").eq(0).contains('process.serviceName: redis');
+    cy.get("[data-test-subj='filterBadge']").eq(1).contains('operationName: GetDriver');
+  });
 
   it('Switches to throughput mode and verifies columns and data', () => {
     cy.get("[data-test-subj='throughput-toggle']").click();
@@ -375,4 +401,4 @@ describe('Testing switch mode to jaeger', () => {
     cy.contains('Error rate').should('exist');
     cy.contains('Traces').should('exist');
   });
-});
+});

.cypress/integration/trace_analytics_test/trace_analytics_dashboard.spec.js

@@ -324,17 +324,7 @@ describe('Testing traces Spans table verify table headers functionality', () =>
       .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-startTime"]').click();
-    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-endTime').click();
-    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-status.code"]').click();
-    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection"]').click();
-    cy.get('[data-test-subj="dataGridColumnSortingButton"]').should('have.text', '8 fields sorted');
+    cy.get('[data-test-subj="dataGridColumnSortingButton"]').should('have.text', '1 fields sorted');
     cy.get('[data-test-subj="dataGridColumnSortingButton"]').should('exist').click();
   });
 });
@@ -371,6 +361,8 @@ describe('Testing traces Spans table and verify columns functionality', () => {
       .should('exist');
     count_table_row(1);
     cy.get('[aria-label="remove current filter"]').click();
+    verify_traces_spans_data_grid_cols_exists();
+    cy.contains('277a5934acf55dcf').should('exist');
     cy.get('.panel-title-count').contains('8').should('exist');
     count_table_row(8);
   });

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

@@ -72,7 +72,7 @@ describe('Testing trace view', () => {
     setTimeFilter();
     cy.get('input[type="search"]').focus().type(`${TRACE_ID}`);
     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
     cy.get('[data-test-subj="trace-link"]').eq(0).click();
   });
 
@@ -95,7 +95,8 @@ describe('Testing trace view', () => {
     cy.get('.euiTitle').contains('Logs').should('exist');
   });
 
-  it('Renders data grid, flyout and filters', () => {
+  it.only('Renders data grid, flyout and filters', () => {
+    cy.get('.panel-title-count').contains('(11)').should('exist');
     cy.get('.euiButton__text[title="Span list"]').click({ force: true });
     cy.contains('2 columns hidden').should('exist');
 
@@ -148,7 +149,7 @@ describe('Testing traces table', () => {
     cy.get('.euiContextMenuItem__text').contains('15 rows').click();
     let expected_row_count = 15;
     cy.get('.euiTable--auto')
-      .find("tr")
+      .find('tr')
       .then((row) => {
         let total = row.length - 1;
         expect(total).to.equal(expected_row_count);
@@ -174,7 +175,7 @@ describe('Testing traces tree view', () => {
   it('Verifies tree view and table toggle functionality with expand/collapse logic', () => {
     cy.get('.euiButtonGroup').contains('Tree view').click();
     cy.contains('Expand all').should('exist');
-    cy.contains("Collapse 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();
@@ -204,7 +205,7 @@ describe('Testing traces tree view', () => {
   it('Verifies tree view expand arrow functionality', () => {
     cy.get('.euiButtonGroup').contains('Tree view').click();
     cy.contains('Expand all').should('exist');
-    cy.contains("Collapse 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();
@@ -227,23 +228,21 @@ describe('Testing traces tree view', () => {
   it('Verifies span flyout', () => {
     cy.get('.euiButtonGroup').contains('Tree view').click();
     cy.contains('Expand all').should('exist');
-    cy.contains("Collapse 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-flyout-button']")
-      .contains(SPAN_ID_TREE_VIEW)
-      .click()
+    cy.get("[data-test-subj='spanId-flyout-button']").contains(SPAN_ID_TREE_VIEW).click();
     cy.contains('Span detail').should('exist');
     cy.contains('Span attributes').should('exist');
   });
 
   it('Handles toggling between full screen and regular modes', () => {
     cy.get('.euiButtonGroup').contains('Tree view').click();
     cy.contains('Expand all').should('exist');
-    cy.contains("Collapse 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();
@@ -280,7 +279,7 @@ describe('Testing switch mode to jaeger', () => {
 
   it('Verifies Trace View', () => {
     cy.contains('08ee9fd9bf964384').click();
-    cy.contains("Time spent by service").should('exist');
+    cy.contains('Time spent by service').should('exist');
     cy.get("[data-test-subj='span-gantt-chart-panel']").should('exist');
-  })
+  });
 });