fix(topology): persist selected topology node id in new tab (#369)

janus-idp · May 26, 2023 · 28e6d82 · 28e6d82
1 parent 788c23a
commit 28e6d82
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 24 deletions.
diff --git a/plugins/topology/src/components/Graph/WorkloadNode.css b/plugins/topology/src/components/Graph/WorkloadNode.css
@@ -1,6 +1,7 @@
-.tp-workload-node .pod-ring__center-text tspan {
+.bs-topology-workload-node .pod-ring__center-text tspan {
   font-size: 11px !important;
 }
-.tp-workload-node .pod-ring__center-text--reversed tspan {
+
+.bs-topology-workload-node .pod-ring__center-text--reversed tspan {
   font-size: 11px !important;
 }
diff --git a/plugins/topology/src/components/Graph/WorkloadNode.tsx b/plugins/topology/src/components/Graph/WorkloadNode.tsx
@@ -98,9 +98,9 @@ const InnerWorkloadNode = observer(
     }, [workloadData?.url, element, decoratorRadius]);
 
     return (
-      <g className="tp-workload-node">
+      <g className="bs-topology-workload-node">
         <BaseNode
-          className="tp-workload-node"
+          className="bs-topology-workload-node"
           hoverRef={hoverRef as (node: Element) => () => void}
           innerRadius={podSetInnerRadius(size, donutStatus)}
           kind={workloadData?.kind}

diff --git a/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.tsx b/plugins/topology/src/components/Topology/TopologyViewWorkloadComponent.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { InfoCard, Progress } from '@backstage/core-components';
 import {
   BaseNode,
@@ -8,7 +9,6 @@ import {
   useEventListener,
   useVisualizationController,
 } from '@patternfly/react-topology';
-import React from 'react';
 import { TYPE_WORKLOAD } from '../../const';
 import { K8sResourcesContext } from '../../hooks/K8sResourcesContext';
 import { useSideBar } from '../../hooks/useSideBar';
@@ -28,14 +28,19 @@ type TopologyViewWorkloadComponentProps = {
 const TopologyViewWorkloadComponent = ({
   useToolbar = false,
 }: TopologyViewWorkloadComponentProps) => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
   const controller = useVisualizationController();
   const layout = 'ColaNoForce';
   const { loaded, dataModel } = useWorkloadsWatcher();
   const { clusters, selectedClusterErrors, responseError } =
     React.useContext(K8sResourcesContext);
-  const [sideBar, sideBarOpen, selectedId, setSideBarOpen, setSelectedNode] =
-    useSideBar(selectedIds);
+  const [
+    sideBar,
+    sideBarOpen,
+    selectedId,
+    setSideBarOpen,
+    setSelectedNode,
+    removeSelectedIdParam,
+  ] = useSideBar();
 
   const allErrors: ClusterErrors = [
     ...(responseError ? [{ message: responseError }] : []),
@@ -70,8 +75,12 @@ const TopologyViewWorkloadComponent = ({
     }
   }, [controller, dataModel, selectedId, setSelectedNode, setSideBarOpen]);
 
-  useEventListener<SelectionEventListener>(SELECTION_EVENT, ids => {
-    setSelectedIds(ids);
+  useEventListener<SelectionEventListener>(SELECTION_EVENT, (ids: string[]) => {
+    const id = ids[0] ? ids[0] : '';
+    setSelectedNode(controller.getElementById(id) as BaseNode);
+    if (!id) {
+      removeSelectedIdParam();
+    }
   });
 
   if (!loaded)
@@ -106,7 +115,7 @@ const TopologyViewWorkloadComponent = ({
             {loaded && dataModel?.nodes?.length === 0 ? (
               <TopologyEmptyState />
             ) : (
-              <VisualizationSurface state={{ selectedIds }} />
+              <VisualizationSurface state={{ selectedIds: [selectedId] }} />
             )}
           </TopologyView>
         )}

diff --git a/plugins/topology/src/hooks/useSideBar.tsx b/plugins/topology/src/hooks/useSideBar.tsx
@@ -3,20 +3,20 @@ import { BaseNode } from '@patternfly/react-topology';
 import { TYPE_WORKLOAD } from '../const';
 import TopologySideBar from '../components/Topology/TopologySideBar/TopologySideBar';
 
-export const useSideBar = (
-  selectedIds: string[],
-): [
+export const useSideBar = (): [
   React.ReactNode,
   boolean,
   string,
   React.Dispatch<React.SetStateAction<boolean>>,
   React.Dispatch<React.SetStateAction<BaseNode | null>>,
+  () => void,
 ] => {
   const { search } = window.location;
   const [sideBarOpen, setSideBarOpen] = React.useState<boolean>(false);
   const [selectedNode, setSelectedNode] = React.useState<BaseNode | null>(null);
 
   const params = React.useMemo(() => new URLSearchParams(search), [search]);
+  const selectedId = params.get('selectedId') ?? '';
 
   const removeSelectedIdParam = React.useCallback(() => {
     params.delete('selectedId');
@@ -28,15 +28,6 @@ export const useSideBar = (
     );
   }, [params]);
 
-  const selectedId = React.useMemo((): string => {
-    const id = params.get('selectedId') ?? '';
-    if (selectedIds?.length && selectedIds.includes(id)) {
-      return id;
-    }
-    removeSelectedIdParam();
-    return '';
-  }, [params, removeSelectedIdParam, selectedIds]);
-
   const sideBar = selectedNode && selectedNode.getType() === TYPE_WORKLOAD && (
     <TopologySideBar
       onClose={() => {
@@ -47,5 +38,12 @@ export const useSideBar = (
     />
   );
 
-  return [sideBar, sideBarOpen, selectedId, setSideBarOpen, setSelectedNode];
+  return [
+    sideBar,
+    sideBarOpen,
+    selectedId,
+    setSideBarOpen,
+    setSelectedNode,
+    removeSelectedIdParam,
+  ];
 };