Traces - Gantt chart / Span list rework (opensearch-project#2257)

* fix refresh on timepicker change, update gannt chart, mini map, span list nesting Signed-off-by: Adam Tackett <[email protected]> * ui changes and new tab for spans Signed-off-by: Adam Tackett <[email protected]> * ui updates, additional bug fixes Signed-off-by: Adam Tackett <[email protected]> * add eui grid full screen, testing Signed-off-by: Adam Tackett <[email protected]> * add back table height for tree, cap left margin Signed-off-by: Adam Tackett <[email protected]> * add some jest testing Signed-off-by: Adam Tackett <[email protected]> * address comments Signed-off-by: Adam Tackett <[email protected]> * test Signed-off-by: Adam Tackett <[email protected]> * test remove Signed-off-by: Adam Tackett <[email protected]> * add cypress testing, conditional check for new nav Signed-off-by: Adam Tackett <[email protected]> * fix width of tables Signed-off-by: Adam Tackett <[email protected]> --------- Signed-off-by: Adam Tackett <[email protected]> Co-authored-by: Adam Tackett <[email protected]>
TackAdam · Dec 5, 2024 · ab396b9 · ab396b9
1 parent 9c94bc9
commit ab396b9
Show file tree

Hide file tree

Showing 19 changed files with 3,024 additions and 1,587 deletions.
diff --git a/.cypress/integration/trace_analytics_test/trace_analytics_traces.spec.js b/.cypress/integration/trace_analytics_test/trace_analytics_traces.spec.js
@@ -5,7 +5,7 @@
 
 /// <reference types="cypress" />
 
-import { delay, setTimeFilter, SPAN_ID, TRACE_ID } from '../../utils/constants';
+import { setTimeFilter, SPAN_ID, TRACE_ID, SPAN_ID_TREE_VIEW } from '../../utils/constants';
 
 describe('Testing traces table empty state', () => {
   beforeEach(() => {
@@ -154,6 +154,102 @@ describe('Testing traces table', () => {
   });
 });
 
+describe('Testing traces tree view', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-traces#/traces', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    cy.get("[data-test-subj='indexPattern-switch-link']").click();
+    cy.get("[data-test-subj='data_prepper-mode']").click();
+    setTimeFilter();
+    cy.contains('02feb3a4f611abd81f2a53244d1278ae').click();
+    cy.get('h1.overview-content').contains('02feb3a4f611abd81f2a53244d1278ae').should('exist');
+  });
+
+  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')
+    //Waiting time for render to complete
+    cy.get("[data-test-subj='treeExpandAll']").click();
+    cy.get("[data-test-subj='treeCollapseAll']").click();
+
+    cy.get("[data-test-subj='spanId-link']").then((initialSpanIds) => {
+      const initialCount = initialSpanIds.length;
+      expect(initialCount).to.equal(6);
+
+      cy.get("[data-test-subj='treeExpandAll']").click();
+
+      cy.get("[data-test-subj='spanId-link']").then((expandedSpanIds) => {
+        const expandedCount = expandedSpanIds.length;
+        expect(expandedCount).to.equal(10);
+      });
+
+      cy.get("[data-test-subj='treeCollapseAll']").click();
+
+      cy.get("[data-test-subj='spanId-link']").then((collapsedSpanIds) => {
+        const collapsedCount = collapsedSpanIds.length;
+        expect(collapsedCount).to.equal(6); // Collapsed rows should match the initial count
+      });
+    });
+  });
+
+  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')
+    // Waiting time for render to complete
+    cy.get("[data-test-subj='treeExpandAll']").click();
+    cy.get("[data-test-subj='treeCollapseAll']").click();
+
+    cy.get("[data-test-subj='spanId-link']").then((initialSpanIds) => {
+      const initialCount = initialSpanIds.length;
+      expect(initialCount).to.equal(6);
+
+      // Find and click the first tree view expand arrow
+      cy.get("[data-test-subj='treeViewExpandArrow']").first().click();
+
+      // Check the number of Span IDs after expanding the arrow (should be 7)
+      cy.get("[data-test-subj='spanId-link']").then((expandedSpanIds) => {
+        const expandedCount = expandedSpanIds.length;
+        expect(expandedCount).to.equal(7);
+      });
+    });
+  });
+
+  it('Verifies span flyout', () => {
+    cy.get('.euiButtonGroup').contains('Tree view').click();
+    cy.contains('Expand 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-link']")
+        .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')
+    // Waiting time for render to complete
+    cy.get("[data-test-subj='treeExpandAll']").click();
+    cy.get("[data-test-subj='treeCollapseAll']").click();
+
+    cy.get('[data-test-subj="fullScreenButton"]').click();
+    cy.get('.euiButtonEmpty__text').should('contain.text', 'Exit full screen');
+    cy.get('[data-test-subj="fullScreenButton"]').click();
+    cy.get('.euiButtonEmpty__text').should('contain.text', 'Full screen');
+  });
+});
+
 describe('Testing switch mode to jaeger', () => {
   beforeEach(() => {
     cy.visit('app/observability-traces#/traces', {

diff --git a/.cypress/utils/constants.js b/.cypress/utils/constants.js
@@ -17,6 +17,7 @@ export const DATASOURCES_PATH = {
 // trace analytics
 export const TRACE_ID = '8832ed6abbb2a83516461960c89af49d';
 export const SPAN_ID = 'a673bc074b438374';
+export const SPAN_ID_TREE_VIEW = 'fe4076542b41d40b';
 export const SERVICE_NAME = 'frontend-client';
 export const SERVICE_SPAN_ID = 'e275ac9d21929e9b';
 export const AUTH_SERVICE_SPAN_ID = '277a5934acf55dcf';