fix resizing bug, style fixes

Signed-off-by: Adam Tackett <[email protected]>
opensearch-project · Dec 17, 2024 · 8ff5f76 · 8ff5f76
1 parent c22c69d
commit 8ff5f76
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 31 deletions.
diff --git a/...trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap b/...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

diff --git a/public/components/trace_analytics/components/traces/span_detail_panel.tsx b/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]

diff --git a/public/components/trace_analytics/components/traces/span_detail_table.tsx b/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" />}