fix(topology): fix Cola layout failing due to pending outdated graph …

…elements (#1336)
cryostatio · Sep 3, 2024 · 7eadcff · 7eadcff
1 parent ad5a975
commit 7eadcff
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 8 deletions.
diff --git a/locales/en/public.json b/locales/en/public.json
@@ -542,6 +542,12 @@
       "TITLE": "Target JVM"
     }
   },
+  "ThemeToggle": {
+    "ARIA_LABELS": {
+      "DARK_THEME": "dark-theme",
+      "LIGHT_THEME": "light-theme"
+    }
+  },
   "TimePicker": {
     "24HOUR": "24-hour",
     "USE_24HR_TIME": "Use 24-hour time"

diff --git a/src/app/AppLayout/ThemeToggle.tsx b/src/app/AppLayout/ThemeToggle.tsx
@@ -20,12 +20,14 @@ import { useTheme } from '@app/utils/hooks/useTheme';
 import { Icon, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import { SunIcon, MoonIcon } from '@patternfly/react-icons';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 export interface ThemeToggleProps {}
 
 export const ThemeToggle: React.FC<ThemeToggleProps> = () => {
   const context = React.useContext(ServiceContext);
   const [_theme] = useTheme();
+  const { t } = useTranslation();
 
   const handleThemeSelect = React.useCallback(
     (_, setting: ThemeSetting) => {
@@ -37,6 +39,7 @@ export const ThemeToggle: React.FC<ThemeToggleProps> = () => {
   return (
     <ToggleGroup className="theme__toggle-group">
       <ToggleGroupItem
+        aria-label={t('ThemeToggle.ARIA_LABELS.LIGHT_THEME')}
         icon={
           <Icon>
             <SunIcon />
@@ -47,6 +50,7 @@ export const ThemeToggle: React.FC<ThemeToggleProps> = () => {
         onClick={(e) => handleThemeSelect(e, ThemeSetting.LIGHT)}
       />
       <ToggleGroupItem
+        aria-label={t('ThemeToggle.ARIA_LABELS.DARK_THEME')}
         icon={
           <Icon>
             <MoonIcon />

diff --git a/src/app/Topology/Actions/WarningResolver.tsx b/src/app/Topology/Actions/WarningResolver.tsx
@@ -81,7 +81,7 @@ export const WarningResolverAsCredModal: React.FC<WarningResolverAsCredModalProp
         onPropsSave={handleAuthModalClose}
         {...props}
       />
-      <div onClick={handleAuthModalOpen}>{children}</div>
+      <span onClick={handleAuthModalOpen}>{children}</span>
     </>
   );
 };
diff --git a/src/app/Topology/Entity/EntityDetails.tsx b/src/app/Topology/Entity/EntityDetails.tsx
@@ -36,6 +36,8 @@ import {
   ExpandableSection,
   Flex,
   FlexItem,
+  List,
+  ListItem,
   Stack,
   StackItem,
   Tab,
@@ -681,11 +683,11 @@ export const EntityDetailHeader: React.FC<EntityDetailHeaderProps> = ({
               <>
                 <StackItem key={'alert-description'}>{extra?.description}</StackItem>
                 <StackItem key={'alert-call-for-action'}>
-                  <Flex>
+                  <List>
                     {extra.callForAction.map((action, index) => (
-                      <FlexItem key={index}>{action}</FlexItem>
+                      <ListItem key={index}>{action} </ListItem>
                     ))}
-                  </Flex>
+                  </List>
                 </StackItem>
               </>
             ) : null}

diff --git a/src/app/Topology/GraphView/TopologyControlBar.tsx b/src/app/Topology/GraphView/TopologyControlBar.tsx
@@ -49,6 +49,12 @@ export const TopologyControlBar: React.FC<TopologyControlBarProps> = ({ visualiz
         visualization.getGraph().reset();
         // Reset layout
         visualization.getGraph().layout();
+
+        // Open collapsed groups
+        visualization
+          .getGraph()
+          .getNodes()
+          .forEach((n) => n.setCollapsed(false));
       }),
       legend: false,
     });
@@ -59,7 +65,7 @@ export const TopologyControlBar: React.FC<TopologyControlBarProps> = ({ visualiz
         icon: <CollapseIcon />,
         tooltip: 'Collapse all groups',
         callback: action(() => {
-          // Close top-level groups
+          // Close groups
           visualization
             .getGraph()
             .getNodes()

diff --git a/src/app/Topology/GraphView/TopologyGraphView.tsx b/src/app/Topology/GraphView/TopologyGraphView.tsx
@@ -183,6 +183,11 @@ export const TopologyGraphView: React.FC<TopologyGraphViewProps> = ({ transformC
       },
     };
 
+    // Destroy old graph if any
+    if (visualization.hasGraph()) {
+      visualization.getGraph().destroy();
+    }
+
     // Initialize the controller with model to create nodes
     visualization.fromModel(model, false);
   }, [_transformData, visualization, discoveryTree]);

diff --git a/src/app/Topology/GraphView/utils.tsx b/src/app/Topology/GraphView/utils.tsx
@@ -205,7 +205,6 @@ export const getNodeById = (nodes: NodeModel[], id?: string) => {
 };
 
 // This method sets the layout of your topology view (e.g. Force, Dagre, Cola, etc.).
-// OCP is supporting only Cola
 export const layoutFactory: LayoutFactory = (type: string, graph: Graph): Layout | undefined => {
   switch (type) {
     case 'Cola':

diff --git a/src/app/Topology/Toolbar/TopologyFilters.tsx b/src/app/Topology/Toolbar/TopologyFilters.tsx
@@ -91,9 +91,10 @@ export const TopologyFilterCategorySelect: React.FC<TopologyFilterCategorySelect
     (_, category: string) => {
       if (category) {
         dispatch(topologyUpdateCategoryIntent(isGroup, category));
+        setIsOpen(false);
       }
     },
-    [dispatch, isGroup],
+    [dispatch, isGroup, setIsOpen],
   );
 
   const handleCategoryTypeChange = React.useCallback(
@@ -398,6 +399,8 @@ export const TopologyFilterSelect: React.FC<TopologyFilterSelectProps> = ({
       }}
       onOpenChange={setIsExpanded}
       onOpenChangeKeys={['Escape']}
+      maxMenuHeight={'40vh'}
+      isScrollable
     >
       <SelectList>
         {selectOptions.length > 0 ? selectOptions : <SelectOption isDisabled>No results found</SelectOption>}

diff --git a/src/app/Topology/Topology.tsx b/src/app/Topology/Topology.tsx
@@ -28,6 +28,7 @@ import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { Bullseye, Card, CardBody } from '@patternfly/react-core';
 import * as React from 'react';
 import { useSelector } from 'react-redux';
+import { debounceTime } from 'rxjs';
 import { TopologyGraphView } from './GraphView/TopologyGraphView';
 import { TopologyListView } from './ListView/TopologyListView';
 import { DiscoveryTreeContext } from './Shared/utils';
@@ -80,7 +81,8 @@ export const Topology: React.FC<TopologyProps> = ({ ..._props }) => {
       // Credentials will trigger modifed target event if any
       context.notificationChannel
         .messages(NotificationCategory.TargetJvmDiscovery)
-        .subscribe((_) => _refreshDiscoveryTree()),
+        .pipe(debounceTime(100))
+        .subscribe(() => _refreshDiscoveryTree()),
     );
   }, [addSubscription, context.notificationChannel, _refreshDiscoveryTree]);