trace analytics collapse dashboard queries, align naming to industry …

…conventions (opensearch-project#514) (opensearch-project#961)

* trace analytics v2 first remove expensive dashboard page

* get trace groups request working and mapping correctly

* get trace group filter fully working

* try some service map adjustments

* change to up down to fully show labels

* put dashboard in accordian at bottom of services and only make calls if it is open

* some changes to support dashboard content in accordian

* demo code

* fix tests

* remove dashboard from app analytics

* fix up with tests

* fix test

* revert only and extract to constant

* add auth const

* address self-PR review

* remove unecessary code

* change timeout to 25 seconds

* change to row in accordian

* update labels and tests

* update cypress test

* verify cypress tests work with changes

* remove accidental only

* address PR review comments

* make missing configuration more clear

* update snapshots

* update snapshot

---------

(cherry picked from commit d9cb476)

Signed-off-by: Derek Ho <[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>
(cherry picked from commit 1a3f542)

.cypress/integration/4_trace_analytics_dashboard.spec.js

@@ -6,6 +6,9 @@
 /// <reference types="cypress" />
 
 import { testDataSet, delay, setTimeFilter, jaegerTestDataSet } from '../utils/constants';
+import { suppressResizeObserverIssue } from '../utils/constants';
+
+suppressResizeObserverIssue();//needs to be in file once
 
 describe('Dump test data', () => {
   it('Indexes test data', () => {
@@ -88,6 +91,7 @@ describe('Testing dashboard table', () => {
       },
     });
     setTimeFilter();
+    cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click();
   });
 
   it('Renders the dashboard table', () => {
@@ -97,15 +101,6 @@ describe('Testing dashboard table', () => {
     cy.contains('7.14%').should('exist');
   });
 
-  it('Has working breadcrumbs', () => {
-    cy.get('.euiBreadcrumb').contains('Dashboard').click();
-    cy.get('.euiTitle').contains('Dashboard').should('exist');
-    cy.get('.euiBreadcrumb').contains('Trace analytics').click();
-    cy.get('.euiTitle').contains('Dashboard').should('exist');
-    cy.get('.euiBreadcrumb').contains('Observability').click();
-    cy.get('.euiTitle').contains('Logs').should('exist');
-  });
-
   it('Adds the percentile filters', () => {
     cy.contains(' >= 95 percentile').click({ force: true });
     cy.contains(' >= 95 percentile').click({ force: true });
@@ -131,7 +126,6 @@ describe('Testing dashboard table', () => {
   it('Redirects to traces table with filter', () => {
     cy.get('.euiLink').contains('13').click();
 
-    cy.get('h2.euiTitle').contains('Traces').should('exist');
     cy.contains(' (13)').should('exist');
     cy.contains('client_create_order').should('exist');
 
@@ -149,20 +143,20 @@ describe('Testing plots', () => {
       },
     });
     setTimeFilter();
+    cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click();
   });
 
   it('Renders service map', () => {
     // plotly scale texts are in attribute "data-unformatted"
-    cy.get('text.ytitle[data-unformatted="Latency (ms)"]').should('exist');
+    cy.get('text.ytitle[data-unformatted="Average duration (ms)"]').should('exist');
     cy.get('text[data-unformatted="200"]').should('exist');
     cy.get('.vis-network').should('exist');
 
-    cy.get('.euiButton__text[title="Error rate"]').click();
-    cy.get('text.ytitle[data-unformatted="Error rate"]').should('exist');
-    cy.get('text[data-unformatted="10%"]').should('exist');
+    cy.get('.euiButton__text[title="Errors"]').click();
+    cy.get('text.ytitle[data-unformatted="Error rate (%)"]').should('exist');
 
-    cy.get('.euiButton__text[title="Throughput"]').click();
-    cy.get('text.ytitle[data-unformatted="Throughput"]').should('exist');
+    cy.get('.euiButton__text[title="Request Rate"]').click();
+    cy.get('text.ytitle[data-unformatted="Request rate (spans)"]').should('exist');
     cy.get('text[data-unformatted="50"]').should('exist');
 
     cy.get('input[type="search"]').eq(1).focus().type('payment{enter}');
@@ -184,6 +178,7 @@ describe('Latency by trace group table', () =>{
       },
     });
     setTimeFilter();
+    cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click();
   });
 
   it('Verify columns in Latency by trace group table along with pagination functionality', () => {
@@ -194,9 +189,9 @@ describe('Latency by trace group table', () =>{
     cy.get('[data-test-subj="tableHeaderCell_24_hour_latency_trend_3"]').should('exist');
     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"]').click();
+    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('[data-test-subj="pagination-button-next"]').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');
   });
 
@@ -225,7 +220,7 @@ describe('Latency by trace group table', () =>{
     cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
     cy.wait(delay);//Fails without
     cy.get('.euiTableCellContent.euiTableCellContent--alignRight.euiTableCellContent--overflowingContent').contains('211.04').should('exist');
-    cy.get('button[data-test-subj="dashboard-table-trace-group-name-button"]').click();
+    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();
     cy.get('.euiContextMenuPanelTitle').contains('Edit filter').should('exist');
@@ -350,6 +345,7 @@ describe('Testing switch mode to jaeger', () => {
     setTimeFilter();
     cy.get("[data-test-subj='indexPattern-switch-link']").click();
     cy.get("[data-test-subj='jaeger-mode']").click();
+    cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click();
   });
 
   it('Verifies errors mode columns and data', () => {
@@ -358,15 +354,14 @@ describe('Testing switch mode to jaeger', () => {
     cy.contains('100%').should('exist');
     cy.contains('7').should('exist');
     cy.contains('Service and Operation Name').should('exist');
-    cy.contains('Average latency (ms)').should('exist');
+    cy.contains('Average duration (ms)').should('exist');
     cy.contains('Error rate').should('exist');
     cy.contains('Traces').should('exist');
   });
 
   it('Verifies traces links to traces page', () => {
-    cy.get('.euiLink').contains('7').click();
+    cy.get('[data-test-subj="dashboard-table-traces-button"]').contains('7').click();
 
-    cy.get('h2.euiTitle').contains('Traces').should('exist');
     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');  
@@ -379,7 +374,7 @@ describe('Testing switch mode to jaeger', () => {
     cy.contains('0%').should('exist');
     cy.contains('8').should('exist');
     cy.contains('Service and Operation Name').should('exist');
-    cy.contains('Average latency (ms)').should('exist');
+    cy.contains('Average duration (ms)').should('exist');
     cy.contains('Error rate').should('exist');
     cy.contains('Traces').should('exist');
   });

.cypress/integration/5_trace_analytics_services.spec.js

@@ -5,7 +5,10 @@
 
 /// <reference types="cypress" />
 
-import { delay, SERVICE_NAME, SERVICE_SPAN_ID, setTimeFilter, verify_traces_spans_data_grid_cols_exists, count_table_row } from '../utils/constants';
+import { delay, 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
 
 describe('Testing services table empty state', () => {
   beforeEach(() => {
@@ -49,9 +52,9 @@ describe('Testing services table', () => {
   it('Verify columns in Services table', () => {
     cy.get('.euiFlexItem.euiFlexItem--flexGrow10 .panel-title').contains('Services').should('exist');
     cy.get('.euiTableCellContent__text[title="Name"]').should('exist');
-    cy.get('.euiTableCellContent__text[title="Average latency (ms)"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Average duration (ms)"]').should('exist');
     cy.get('.euiTableCellContent__text[title="Error rate"]').should('exist');
-    cy.get('.euiTableCellContent__text[title="Throughput"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Request rate"]').should('exist');
     cy.get('.euiTableCellContent__text[title="No. of connected services"]').should('exist');
     cy.get('.euiTableCellContent__text[title="Connected services"]').should('exist');
     cy.get('.euiTableCellContent__text[title="Traces"]').should('exist');
@@ -110,9 +113,7 @@ describe('Testing service view', () => {
     cy.get('.euiBreadcrumb').contains(SERVICE_NAME).click();
     cy.get('h2.euiTitle').contains(SERVICE_NAME).should('exist');
     cy.get('.euiBreadcrumb').contains('Services').click();
-    cy.get('.euiTitle').contains('Services').should('exist');
     cy.get('.euiBreadcrumb').contains('Trace analytics').click();
-    cy.get('.euiTitle').contains('Dashboard').should('exist');
     cy.get('.euiBreadcrumb').contains('Observability').click();
     cy.get('.euiTitle').contains('Logs').should('exist');
   });
@@ -143,10 +144,10 @@ describe('Testing Service map', () => {
   it('Render Service map', () => {
     cy.get('.euiText.euiText--medium .panel-title').contains('Service map');
     cy.get('[data-test-subj="latency"]').should('exist');
-    cy.get('.ytitle').contains('Latency (ms)');
-    cy.get('[data-text = "Error rate"]').click();
+    cy.get('.ytitle').contains('Average duration (ms)');
+    cy.get('[data-text = "Errors"]').click();
     cy.contains('60%');
-    cy.get('[data-text = "Throughput"]').click();
+    cy.get('[data-text = "Duration"]').click();
     cy.contains('100');
     cy.get('.euiText.euiText--medium').contains('Focus on').should('exist');
     cy.get('[placeholder="Service name"]').focus().type('database{enter}');
@@ -238,7 +239,7 @@ describe('Testing traces Spans table and verify columns functionality', () => {
   it('Renders the spans table and click on first span to verify details', () => {
     cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
     verify_traces_spans_data_grid_cols_exists();
-    cy.get('.euiLink--primary').eq(4).click();
+    cy.contains(AUTH_SERVICE_SPAN_ID).click();
     cy.get('[data-test-subj="spanDetailFlyout"] .euiTitle.euiTitle--medium').contains('Span detail').should('exist');
     cy.get('.euiFlyoutBody .panel-title').contains('Overview').should('exist');
     cy.get('.euiTextColor.euiTextColor--subdued').contains('Span ID').should('exist');
@@ -283,16 +284,15 @@ describe('Testing switch mode to jaeger', () => {
     cy.contains('310.29').should('exist');
     cy.contains('0%').should('exist');
     cy.contains('Name').should('exist');
-    cy.contains('Average latency (ms)').should('exist');
+    cy.contains('Average duration (ms)').should('exist');
     cy.contains('Error rate').should('exist');
-    cy.contains('Throughput').should('exist');
+    cy.contains('Request rate').should('exist');
     cy.contains('Traces').should('exist');
   });
 
   it('Verifies traces links to traces page with filter applied', () => {
     cy.get('.euiTableRow').should('have.length.lessThan', 7);//Replaces Wait
     cy.get('.euiLink').contains('7').click();
-    cy.get('h2.euiTitle').contains('Traces').should('exist');
     cy.contains(' (7)').should('exist');
     cy.get("[data-test-subj='filterBadge']").eq(0).contains('process.serviceName: customer')
   })

.cypress/integration/6_trace_analytics_traces.spec.js

@@ -87,9 +87,7 @@ describe('Testing trace view', () => {
     cy.get(`.euiBreadcrumb[href="#/traces/${TRACE_ID}"]`).click();
     cy.get('h2.euiTitle').contains(TRACE_ID).should('exist');
     cy.get('.euiBreadcrumb[href="#/traces"]').click();
-    cy.get('.euiTitle').contains('Traces').should('exist');
     cy.get('.euiBreadcrumb[href="#/"]').click();
-    cy.get('.euiTitle').contains('Dashboard').should('exist');
     cy.get('.euiBreadcrumb[href="observability-logs#/"]').click();
     cy.get('.euiTitle').contains('Logs').should('exist');
   });
@@ -125,7 +123,7 @@ describe('Testing traces table', () => {
   it('Renders the traces table and verify Table Column, Pagination and Rows Data ', () => {
     cy.get('.euiTableCellContent__text').contains('Trace ID').should('exist');
     cy.get('.euiTableCellContent__text').contains('Trace group').should('exist');
-    cy.get('.euiTableCellContent__text').contains('Latency (ms)').should('exist');
+    cy.get('.euiTableCellContent__text').contains('Duration (ms)').should('exist');
     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');

.cypress/integration/7_app_analytics.spec.js

@@ -253,19 +253,19 @@ describe('Viewing application', () => {
   });
 
   it('Shows latency variance in dashboards table', () => {
-    changeTimeTo24('months');
+    changeTimeTo24('years');
+    cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click();
     cy.get('[data-test-subj="dashboardTable"]').first().within(($table) => {
       cy.get('.plot-container').should('have.length.at.least', 1);
     })
   });
 
   it('Adds filter when Trace group name is clicked', () => {
     cy.wait(delay);//List not loading without
-    cy.get('[data-test-subj="app-analytics-overviewTab"]').click();
+    cy.get('[data-test-subj="trace-groups-service-operation-accordian"]').click();
     cy.get('[data-test-subj="dashboard-table-trace-group-name-button"]').contains('client_create_order').click();
-    cy.get('.euiTableRow').should('have.length', 1, { timeout: timeoutDelay });
     cy.get('[data-test-subj="client_create_orderFilterBadge"]').should('exist');
-    cy.get('[data-test-subj="filterBadge"]').click();
+    cy.get('[data-test-subj="filterBadge"]').eq(1).click();
     cy.get('[data-test-subj="deleteFilterIcon"]').click();
     cy.get('[data-test-subj="client_create_orderFilterBadge"]').should('not.exist');
   });
@@ -276,7 +276,7 @@ describe('Viewing application', () => {
     cy.get('[data-test-subj="serviceDetailFlyoutTitle"]').should('be.visible');
     cy.get('[data-test-subj="serviceDetailFlyout"]').within(($flyout) => {
       cy.get('[data-test-subj="Number of connected servicesDescriptionList"]').should('contain', '3');
-      cy.get('[data-text="Error rate"]').click();
+      cy.get('[data-text="Errors"]').click();
       cy.get('.ytitle').contains('Error rate').should('exist');
     });
     cy.get('[data-test-subj="dataGridRowCell"] button').contains('718dc32a693c8a17').click();
@@ -307,6 +307,7 @@ describe('Viewing application', () => {
   it('Opens span detail flyout when Span ID is clicked', () => {
     cy.get('[data-test-subj="app-analytics-traceTab"]').click();
     cy.wait(delay);
+    cy.get('input[type="search"]').focus().type(`5ff3516909562c60`);
     cy.get('[data-test-subj="dataGridRowCell"]').contains('5ff3516909562c60').click();
     cy.get('[data-test-subj="spanDetailFlyout"]').should('be.visible');
     cy.get('[data-test-subj="spanDetailFlyout"]').within(($flyout) => {
@@ -543,6 +544,7 @@ describe('Editing application', () => {
   });
 });
 
+
 describe('Application Analytics home page', () => {
   beforeEach(() => {
     moveToHomePage();

.cypress/utils/constants.js

@@ -11,6 +11,7 @@ export const TRACE_ID = '8832ed6abbb2a83516461960c89af49d';
 export const SPAN_ID = 'a673bc074b438374';
 export const SERVICE_NAME = 'frontend-client';
 export const SERVICE_SPAN_ID = '7df5609a6d104736';
+export const AUTH_SERVICE_SPAN_ID = '277a5934acf55dcf';
 
 export const testDataSet = [
   {

auto_sync_commit_metadata.json

@@ -1,4 +1,4 @@
 {
-    "last_github_commit": "6c609faf9495505e277f4279ac94fb5a35867504",
-    "last_gitfarm_commit": "89b4eb3c9996721ba60ea677e90bc43c2447164a"
+    "last_github_commit": "1a3f542522dbe731483f9a17da8fb45628056d4e",
+    "last_gitfarm_commit": "9729909540d4afefb5ecd0af46c6de669e3545d7"
 }