Traces - Custom source switch to data grid

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

@@ -136,16 +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('button[data-datagrid-interactable="true"]').eq(0).click({ force: true });
     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 });
     cy.get('.euiBadge__text').contains('spanId: ').should('exist');
     cy.get('[data-test-subj="euiFlyoutCloseButton"]').click({ force: true });
     cy.contains('Spans (1)').should('exist');
   });
 });
@@ -265,7 +265,7 @@
   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 });
     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"]')
@@ -323,9 +323,10 @@
       .should('exist')
       .click();
     cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection"]').click();
-    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-spanId').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-durationInNanos').click();
     cy.get('[data-test-subj="dataGridColumnSortingButton"]').should('have.text', '1 fields sorted');
-    cy.get('[data-test-subj="dataGridColumnSortingButton"]').should('exist').click();
+    cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
+    cy.get('button.euiLink.euiLink--primary').eq(4).contains('96e7fdedd82ab53c').click();
   });
 });
 

.cypress/integration/trace_analytics_test/trace_analytics_traces.spec.js

@@ -97,17 +97,17 @@
 
   it('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');
 
     cy.get('.euiLink').contains(SPAN_ID).trigger('mouseover', { force: true });
     cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true });
     cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true }); // first click doesn't go through eui data grid
 
     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 });
 
     cy.get('.euiBadge__text').contains('spanId: ').should('exist');
     cy.contains('Spans (1)').should('exist');
@@ -294,9 +294,78 @@
     // 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='treeViewExpandArrow']").should('have.length', 1);
     cy.get("[data-test-subj='treeExpandAll']").click();
     cy.get("[data-test-subj='treeViewExpandArrow']").should('have.length.greaterThan', 1);
   });
 });
+
+describe('Testing traces Custom source', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-traces#/traces', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
+    cy.get("[data-test-subj='indexPattern-switch-link']").click();
+    cy.get("[data-test-subj='custom_data_prepper-mode']").click();
+    setTimeFilter();
+  });
+
+  it('Renders the traces custom source all spans as default, clicks trace view redirection ', () => {
+    cy.get('.euiDataGridHeaderCell__content').contains('Span Id').should('exist');
+    cy.get('.euiDataGridHeaderCell__content').contains('Trace Id').should('exist');
+    cy.get('.euiDataGridHeaderCell__content').contains('Parent Span Id').should('exist');
+    cy.get('.euiDataGridHeaderCell__content').contains('Trace group').should('exist');
+    cy.get('.euiDataGridHeaderCell__content').contains('Duration (ms)').should('exist');
+    cy.get('.euiDataGridHeaderCell__content').contains('Errors').should('exist');
+    cy.get('.euiDataGridHeaderCell__content').contains('Last updated').should('exist');
+
+    cy.get('a.euiLink.euiLink--primary').first().click();
+    cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
+    cy.get('.overview-content').should('contain.text', '4fa04f117be100f476b175e41096e736');
+  });
+
+  it('Renders all spans column attributes as hidden, shows column when added', () => {
+    cy.get('span.euiButtonEmpty__text').contains('60 columns hidden').should('exist');
+    cy.get('span.euiButtonEmpty__text').contains('60 columns hidden').click();
+    cy.get('button[name="span.attributes.http@url"]').click();
+    cy.get('button[name="span.attributes.http@url"]').should('have.attr', 'aria-checked', 'true');
+    cy.get('.euiDataGridHeaderCell__content').contains('span.attributes.http@url').should('exist');
+  });
+
+  it('Verifies column sorting and pagination works correctly', () => {
+    cy.contains('Duration (ms)').click();
+    cy.contains('Sort Z-A').click();
+
+    cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
+    cy.contains('467.03 ms').should('exist');
+
+    cy.get('[data-test-subj="pagination-button-next"]').click();
+    cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
+    cy.contains('399.10 ms').should('exist');
+
+    cy.get('[data-test-subj="pagination-button-previous"]').click();
+    cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
+    cy.contains('467.03 ms').should('exist');
+  });
+
+  it('Renders the traces custom source traces, clicks trace view redirection', () => {
+    cy.get('[data-test-subj="trace-table-mode-selector"]').click();
+    cy.get('.euiSelectableListItem').contains('Traces').click();
+    cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
+
+    cy.get('.euiDataGridHeaderCell__content').contains('Trace ID').should('exist');
+    cy.get('.euiDataGridHeaderCell__content').contains('Trace group').should('exist');
+    cy.get('.euiDataGridHeaderCell__content').contains('Duration (ms)').should('exist');
+    cy.get('.euiDataGridHeaderCell__content').contains('Percentile in trace group').should('exist');
+    cy.get('.euiDataGridHeaderCell__content').contains('Errors').should('exist');
+    cy.get('.euiDataGridHeaderCell__content').contains('Last updated').should('exist');
+
+    cy.get('a.euiLink.euiLink--primary').first().click();
+    cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist');
+    cy.get('.overview-content').should('contain.text', '02feb3a4f611abd81f2a53244d1278ae');
+  });
+});

.cypress/utils/constants.js

@@ -83,7 +83,7 @@ export const setTimeFilter = (setEndTime = false, refresh = true) => {
       .type('{selectall}' + endTime, { force: true });
   }
   if (refresh) cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
-  cy.get('.euiTableRow').should('have.length.greaterThan', 3); //Replaces Wait
+  cy.get('[data-test-subj="globalLoadingIndicator"]').should('not.exist'); //Replaces Wait
 };
 
 export const expandServiceView = (rowIndex = 0) => {

public/components/trace_analytics/components/common/helper_functions.tsx

@@ -253,11 +253,9 @@ export function getServiceMapGraph({
     const averageLatency = `Average duration: ${
       map[service].latency! >= 0 ? map[service].latency + 'ms' : '-'
     }`;
-
     const errorRate = `Error rate: ${
       map[service].error_rate! >= 0 ? map[service].error_rate + '%' : '-'
     }`;
-
     const throughput =
       'Request rate: ' +
       (map[service].throughput! >= 0 ? `${map[service].throughput}` : '-') +

public/components/trace_analytics/components/common/shared_components/component_helper_functions.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useEffect } from 'react';
+
+// Injects the size warning and Load buttons into the corners of EUI Data Grid
+export const useInjectElementsIntoGrid = (
+  rowCount: number,
+  maxDisplayRows: number,
+  tracesTableMode: string,
+  loadMoreHandler?: () => void
+) => {
+  useEffect(() => {
+    setTimeout(() => {
+      const toolbar = document.querySelector<HTMLElement>('.euiDataGrid__controls');
+      if (toolbar && rowCount > maxDisplayRows) {
+        toolbar.style.display = 'flex';
+        toolbar.style.alignItems = 'center';
+        toolbar.style.justifyContent = 'space-between';
+
+        let warningDiv = toolbar.querySelector<HTMLElement>('.trace-table-warning');
+        if (!warningDiv) {
+          warningDiv = document.createElement('div');
+          warningDiv.className = 'trace-table-warning';
+
+          const strongElement = document.createElement('strong');
+          strongElement.textContent = `${maxDisplayRows}`;
+
+          const textSpan = document.createElement('span');
+          textSpan.appendChild(strongElement);
+          textSpan.appendChild(document.createTextNode(' results shown out of '));
+          textSpan.appendChild(document.createTextNode(` ${rowCount}`));
+
+          warningDiv.appendChild(textSpan);
+
+          toolbar.appendChild(warningDiv);
+        }
+      }
+
+      const pagination = document.querySelector<HTMLElement>('.euiDataGrid__pagination');
+
+      if (tracesTableMode !== 'traces') {
+        if (pagination) {
+          const existingLoadMoreButton = pagination.querySelector('.trace-table-load-more');
+          if (existingLoadMoreButton) {
+            existingLoadMoreButton.remove();
+          }
+        }
+        return;
+      }
+
+      if (pagination && loadMoreHandler) {
+        pagination.style.display = 'flex';
+        pagination.style.alignItems = 'center';
+        pagination.style.justifyContent = 'space-between';
+
+        let loadMoreButton = pagination.querySelector<HTMLElement>('.trace-table-load-more');
+        if (!loadMoreButton) {
+          loadMoreButton = document.createElement('button');
+          loadMoreButton.className = 'trace-table-load-more euiButtonEmpty euiButtonEmpty--text';
+          loadMoreButton.style.marginLeft = '12px';
+          loadMoreButton.innerText = 'Load more data';
+
+          loadMoreButton.onclick = () => loadMoreHandler();
+
+          pagination.appendChild(loadMoreButton);
+        }
+      }
+    }, 100);
+  }, [rowCount, tracesTableMode, loadMoreHandler]);
+};