NO-JIRA: fix: troubleshooting panel breaking into columns on resize.

Also added automatic graph resize if browser resizes.

Author: alanconway

web/src/components/Korrel8rPanel.tsx

@@ -13,6 +13,8 @@ import {
   Form,
   FormGroup,
   Spinner,
+  Stack,
+  StackItem,
   TextArea,
   Title,
   Tooltip,
@@ -226,18 +228,18 @@ export default function Korrel8rPanel() {
 
   return (
     <>
-      <Flex direction={{ default: 'column' }} grow={{ default: 'grow' }}>
+      <Stack>
         <Flex className="tp-plugin__panel-query-container" direction={{ default: 'row' }}>
           {focusButton}
           <FlexItem align={{ default: 'alignRight' }}>{advancedToggle}</FlexItem>
           {refreshButton}
         </Flex>
-        <FlexItem>{advancedSection}</FlexItem>
+        {advancedSection}
         <Divider />
-        <FlexItem className="tp-plugin__panel-topology-container" grow={{ default: 'grow' }}>
+        <StackItem className="tp-plugin__panel-topology-container" isFilled={true}>
           {topologySection}
-        </FlexItem>
-      </Flex>
+        </StackItem>
+      </Stack>
     </>
   );
 }

web/src/components/Popover.tsx

@@ -1,5 +1,5 @@
 import { useActivePerspective } from '@openshift-console/dynamic-plugin-sdk';
-import { Button, Flex, FlexItem, Title } from '@patternfly/react-core';
+import { Button, Flex, FlexItem, Stack, StackItem, Title } from '@patternfly/react-core';
 import { TimesCircleIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -33,11 +33,7 @@ export default function Popover() {
 
   return (
     <>
-      <Flex
-        className="tp-plugin__popover"
-        direction={{ default: 'column' }}
-        gap={{ default: 'gapNone' }}
-      >
+      <Stack className="tp-plugin__popover">
         <Flex className="tp-plugin__popover-title-bar" gap={{ default: 'gapNone' }}>
           <FlexItem grow={{ default: 'grow' }}>
             <Title headingLevel="h1">
@@ -55,15 +51,10 @@ export default function Popover() {
             </Button>
           </FlexItem>
         </Flex>
-        <Flex
-          className="tp-plugin__popover-content"
-          direction={{ default: 'column' }}
-          grow={{ default: 'grow' }}
-          gap={{ default: 'gapNone' }}
-        >
+        <StackItem className="tp-plugin__popover-content" isFilled={true}>
           <Korrel8rPanel />
-        </Flex>
-      </Flex>
+        </StackItem>
+      </Stack>
     </>
   );
 }

web/src/components/topology/Korrel8rTopology.tsx

@@ -223,29 +223,49 @@ export const Korrel8rTopology: React.FC<{
     return controller;
   }, [controller, selectionAction, componentFactory]);
 
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    let timer: ReturnType<typeof setTimeout>;
+    const observer = new ResizeObserver(() => {
+      clearTimeout(timer);
+      timer = setTimeout(() => controller.getGraph().fit(PADDING), 150);
+    });
+    observer.observe(element);
+    return () => {
+      clearTimeout(timer);
+      observer.disconnect();
+    };
+  }, [controller]);
+
   return (
-    <TopologyView
-      controlBar={
-        <TopologyControlBar
-          controlButtons={createTopologyControlButtons({
-            ...defaultControlButtonsOptions,
-            zoomInCallback: action(() => {
-              controller.getGraph().scaleBy(4 / 3);
-            }),
-            zoomOutCallback: action(() => {
-              controller.getGraph().scaleBy(0.75);
-            }),
-            fitToScreenCallback: action(() => {
-              controller.getGraph().fit(PADDING);
-            }),
-            legend: false,
-          })}
-        />
-      }
-    >
-      <VisualizationProvider controller={controller2}>
-        <VisualizationSurface state={{ selectedIds }} />
-      </VisualizationProvider>
-    </TopologyView>
+    <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
+      <TopologyView
+        controlBar={
+          <TopologyControlBar
+            controlButtons={createTopologyControlButtons({
+              ...defaultControlButtonsOptions,
+              zoomInCallback: action(() => {
+                controller.getGraph().scaleBy(4 / 3);
+              }),
+              zoomOutCallback: action(() => {
+                controller.getGraph().scaleBy(0.75);
+              }),
+              fitToScreen: false, // Same thing as resetView
+              resetViewCallback: action(() => {
+                controller.getGraph().reset();
+                controller.getGraph().layout();
+              }),
+              legend: false,
+            })}
+          />
+        }
+      >
+        <VisualizationProvider controller={controller2}>
+          <VisualizationSurface state={{ selectedIds }} />
+        </VisualizationProvider>
+      </TopologyView>
+    </div>
   );
 };