Gantt Chart / Service Map followup

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

@@ -202,7 +202,7 @@
     cy.get('[data-test-subj="searchAutocompleteTextArea"]').click();
     cy.focused().type('       source = ',);
     cy.focused().type('{enter}');
     cy.get('[data-test-subj="createAndSetButton"]').click({ force: true });
     cy.get('.euiTableRow').should('have.length.lessThan', 1);
     cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree);
     cy.get('.euiBreadcrumb[href="#/"]').click();
@@ -279,8 +279,8 @@
     cy.get('[data-test-subj="Number of connected servicesDescriptionList"]').should('contain', '3');
     cy.get('[data-text="Errors"]').eq(1).click(); // Selecting errors tab within flyout
     cy.get('.ytitle').contains('Error rate').should('exist');
     cy.get('[data-test-subj="dataGridRowCell"]').eq(0).click({force: true}); // absolutely doesn't click no matter what unless theres a double click
     cy.get('button[data-test-subj="spanId-link"]').eq(0).click({force: true});
     cy.get('[data-test-subj="spanDetailFlyout"]').contains('Span detail').should('be.visible');
     cy.get('[data-test-subj="ServiceDescriptionList"]').should('contain', 'authentication');
     cy.get('[data-test-subj="euiFlyoutCloseButton"]').click();
@@ -355,12 +355,13 @@
     cy.get('[data-test-subj="app-analytics-panelTab"]').click();
     cy.get('[aria-label="actionMenuButton"]').click();
     cy.get('[data-test-subj="editVizContextMenuItem"]').click();
+    changeTimeTo24('months');//Ensure time is set
     cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
     cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
     cy.get('.euiTab[id="availability-panel"]').click();
 
     cy.get('[data-test-subj="comboBoxInput"]').click();
     cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Time series').click({ force: true });
     cy.focused().type('{enter}');
 
     cy.get('[data-test-subj="addAvailabilityButton"]').click();
@@ -398,7 +399,7 @@
     cy.get('[data-test-subj="main-content-visTab"]').click();
     cy.get('.euiTab[id="availability-panel"]').click();
     cy.get('[data-test-subj="comboBoxInput"]').click();
     cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Time series').click({ force: true });
     cy.get('[data-test-subj="addAvailabilityButton"]').click();
     cy.get('[data-test-subj="euiColorPickerAnchor"]').click();
     cy.get('[aria-label="Select #9170B8 as the color"]').click();

.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');
   });
 });
@@ -201,7 +201,8 @@
     cy.get('[data-text="Errors"]').click();
     cy.contains('60%');
     cy.get('[data-text="Duration"]').click();
-    cy.contains('100');
+    cy.contains('Average duration (ms)');
+    cy.get("[data-test-subj='tableHeaderCell_average_latency_1']").click();
 
     // clicks on payment node
     cy.get('.vis-network canvas').click(707, 388);
@@ -264,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"]')

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

@@ -132,25 +132,27 @@ describe('Testing traces table', () => {
     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');
+    cy.get("[data-test-subj='tableHeaderCell_trace_group_1']").click();
+    cy.contains('mysql').should('not.exist');
     cy.get('[data-test-subj="pagination-button-next"]').click();
-    cy.contains('client_pay_order').should('exist');
+    cy.contains('HTTP POST').should('exist');
     cy.get('[data-test-subj="pagination-button-previous"]').click();
-    cy.contains('224.99').should('exist');
+    cy.contains('56.88').should('exist');
     cy.get('.euiButtonEmpty').contains('5').click();
-    cy.contains('690d3c7af1a78cf89c43e').should('exist');
+    cy.contains('386d26555771f39c0caaf').should('exist');
     cy.contains('5be8370207cbb002a165d').click();
     cy.contains('client_create_order').should('exist');
     cy.get('path[style*="rgb(116, 146, 231)"]').should('exist');
     cy.go('back');
     cy.get('.euiButtonEmpty__text').contains('Rows per page').click();
     cy.get('.euiContextMenuItem__text').contains('15 rows').click();
-    let expected_row_count=15;
+    let expected_row_count = 15;
     cy.get('.euiTable--auto')
-    .find("tr")
-    .then((row) => {
-      let total=row.length-1;
-      expect(total).to.equal(expected_row_count);
-    });
+      .find("tr")
+      .then((row) => {
+        let total = row.length - 1;
+        expect(total).to.equal(expected_row_count);
+      });
   });
 });
 
@@ -176,27 +178,29 @@ describe('Testing traces tree view', () => {
     //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
+
+    cy.get("[data-test-subj='spanId-link']")
+      .should('have.length', 6)
+      .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');
@@ -208,30 +212,30 @@ describe('Testing traces tree view', () => {
     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()
+      .contains(SPAN_ID_TREE_VIEW)
+      .click()
     cy.contains('Span detail').should('exist');
     cy.contains('Span attributes').should('exist');
   });

public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`SpanDetailTable renders the component with data 1`] = `
   >
     <div
       class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
-      style="height: auto;"
+      style="width: 100%; height: auto;"
     />
   </div>
   <div
@@ -151,6 +151,7 @@ exports[`SpanDetailTable renders the empty component 1`] = `
       style={
         Object {
           "height": "auto",
+          "width": "100%",
         }
       }
       toolbarVisibility={
@@ -274,6 +275,7 @@ exports[`SpanDetailTable renders the empty component 1`] = `
                     style={
                       Object {
                         "height": "auto",
+                        "width": "100%",
                       }
                     }
                   />
@@ -392,7 +394,7 @@ exports[`SpanDetailTable renders the jaeger component with data 1`] = `
   >
     <div
       class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
-      style="height: auto;"
+      style="width: 100%; height: auto;"
     />
   </div>
   <div
@@ -447,7 +449,7 @@ exports[`SpanDetailTableHierarchy renders the component with data 1`] = `
   >
     <div
       class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
-      style="height: 500px; overflow-y: auto;"
+      style="width: 100%; height: 500px; overflow-y: auto;"
     />
   </div>
   <div
@@ -598,6 +600,7 @@ exports[`SpanDetailTableHierarchy renders the empty component 1`] = `
         Object {
           "height": "500px",
           "overflowY": "auto",
+          "width": "100%",
         }
       }
       toolbarVisibility={
@@ -740,6 +743,7 @@ exports[`SpanDetailTableHierarchy renders the empty component 1`] = `
                       Object {
                         "height": "500px",
                         "overflowY": "auto",
+                        "width": "100%",
                       }
                     }
                   />
@@ -858,7 +862,7 @@ exports[`SpanDetailTableHierarchy renders the jaeger component with data 1`] = `
   >
     <div
       class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
-      style="height: 500px; overflow-y: auto;"
+      style="width: 100%; height: 500px; overflow-y: auto;"
     />
   </div>
   <div

public/components/trace_analytics/components/traces/span_detail_panel.tsx

@@ -27,8 +27,6 @@ import { SpanDetailFlyout } from './span_detail_flyout';
 import { SpanDetailTable, SpanDetailTableHierarchy } from './span_detail_table';
 import { coreRefs } from '../../../../framework/core_refs';
 
-const newNavigation = coreRefs?.chrome?.navGroup.getNavGroupEnabled?.();
-
 export function SpanDetailPanel(props: {
   http: HttpSetup;
   traceId: string;
@@ -68,22 +66,23 @@ export function SpanDetailPanel(props: {
   const [isFullScreen, setIsFullScreen] = useState(false);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [availableWidth, setAvailableWidth] = useState<number>(window.innerWidth);
+  const newNavigation = coreRefs?.chrome?.navGroup.getNavGroupEnabled?.();
 
-  useEffect(() => {
-    const updateAvailableWidth = () => {
-      if (containerRef.current) {
-        setAvailableWidth(containerRef.current.getBoundingClientRect().width);
-      } else {
-        setAvailableWidth(window.innerWidth);
-      }
-    };
+  const updateAvailableWidth = () => {
+    if (containerRef.current) {
+      setAvailableWidth(containerRef.current.getBoundingClientRect().width);
+    } else {
+      setAvailableWidth(window.innerWidth);
+    }
+  };
 
-    const handleFullScreenChange = () => {
-      const isFullscreenActive = !!document.fullscreenElement;
-      setIsFullScreen(isFullscreenActive);
-      updateAvailableWidth();
-    };
+  const handleFullScreenChange = () => {
+    const isFullscreenActive = !!document.fullscreenElement;
+    setIsFullScreen(isFullscreenActive);
+    updateAvailableWidth();
+  };
 
+  useEffect(() => {
     // Add event listeners for window resize and full-screen toggling
     window.addEventListener('resize', updateAvailableWidth);
     document.addEventListener('fullscreenchange', handleFullScreenChange);
@@ -99,8 +98,9 @@ export function SpanDetailPanel(props: {
   }, []);
 
   const dynamicLayoutAdjustment = useMemo(() => {
-    const adjustment = newNavigation ? 350 : 400;
-    return isLocked ? availableWidth - adjustment : availableWidth - 150;
+    const adjustment = newNavigation ? 350 : 400; // allows resizing of the window
+    const leftNavAdjustment = newNavigation ? 125 : 75;
+    return isLocked ? availableWidth - adjustment : availableWidth - leftNavAdjustment;
   }, [isLocked, availableWidth]);
 
   // Update selectedRange whenever data.ganttMaxX changes to ensure it starts fully zoomed out
@@ -348,6 +348,19 @@ export function SpanDetailPanel(props: {
     dragLayer.style.cursor = '';
   }, []);
 
+  const onRelayoutHandler = useCallback(
+    (event) => {
+      // Handle x-axis range update
+      if (event && event['xaxis.range[0]'] && event['xaxis.range[1]']) {
+        const newRange = [event['xaxis.range[0]'], event['xaxis.range[1]']];
+        setSelectedRange(newRange);
+      } else {
+        setSelectedRange(fullRange);
+      }
+    },
+    [setSelectedRange, fullRange]
+  );
+
   const toggleOptions = [
     {
       id: 'timeline',
@@ -380,6 +393,7 @@ export function SpanDetailPanel(props: {
             }
           }}
           dataSourceMDSId={props.dataSourceMDSId}
+          availableWidth={dynamicLayoutAdjustment}
         />
       </div>
     ),
@@ -402,6 +416,7 @@ export function SpanDetailPanel(props: {
             }
           }}
           dataSourceMDSId={props.dataSourceMDSId}
+          availableWidth={dynamicLayoutAdjustment}
         />
       </div>
     ),
@@ -425,15 +440,7 @@ export function SpanDetailPanel(props: {
         onClickHandler={onClick}
         onHoverHandler={onHover}
         onUnhoverHandler={onUnhover}
-        onRelayout={(event) => {
-          // Handle x-axis range update
-          if (event && event['xaxis.range[0]'] && event['xaxis.range[1]']) {
-            const newRange = [event['xaxis.range[0]'], event['xaxis.range[1]']];
-            setSelectedRange(newRange);
-          } else {
-            setSelectedRange(fullRange);
-          }
-        }}
+        onRelayout={onRelayoutHandler}
       />
     ),
     [data.gantt, layout, onClick, onHover, onUnhover, setSelectedRange]

public/components/trace_analytics/components/traces/span_detail_table.tsx

@@ -34,6 +34,7 @@ interface SpanDetailTableProps {
   DSL?: any;
   setTotal?: (total: number) => void;
   dataSourceMDSId: string;
+  availableWidth?: number;
 }
 
 export interface SpanSearchParams {
@@ -300,6 +301,11 @@ export function SpanDetailTable(props: SpanDetailTableProps) {
             onChangePage,
           }}
           style={{
+            width: fullScreenMode
+              ? '100%'
+              : props.availableWidth
+              ? `${props.availableWidth}px`
+              : '100%', // allow page to be resized
             height: fullScreenMode ? '100%' : 'auto',
           }}
         />
@@ -491,7 +497,15 @@ export function SpanDetailTableHierarchy(props: SpanDetailTableProps) {
             showFullScreenSelector: false,
             additionalControls: toolbarButtons,
           }}
-          style={{ height: fullScreenMode ? '100%' : '500px', overflowY: 'auto' }}
+          style={{
+            width: fullScreenMode
+              ? '100%'
+              : props.availableWidth
+              ? `${props.availableWidth}px`
+              : '100%', // allow page to be resized
+            height: fullScreenMode ? '100%' : '500px',
+            overflowY: 'auto',
+          }}
         />
       </FullScreenWrapper>
       {!fullScreenMode && total === 0 && <NoMatchMessage size="xl" />}