Add ability to select unassigned as application filter in topology

openshift · Aug 17, 2020 · f6487ec · f6487ec
1 parent 99788a2
commit f6487ec
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 18 deletions.
diff --git a/frontend/packages/dev-console/src/components/dropdown/ApplicationDropdown.tsx b/frontend/packages/dev-console/src/components/dropdown/ApplicationDropdown.tsx
@@ -114,6 +114,7 @@ const ApplicationDropdown: React.FC<ApplicationDropdownProps> = ({ namespace, ..
         {...props}
         placeholder="Select an Application"
         dataSelector={['metadata', 'labels', 'app.kubernetes.io/part-of']}
+        appendItems={{ Unassigned: 'Unassigned' }}
       />
     </Firehose>
   );

diff --git a/...nd/packages/dev-console/src/components/topology/data-transforms/updateModelFromFilters.ts b/...nd/packages/dev-console/src/components/topology/data-transforms/updateModelFromFilters.ts
@@ -110,7 +110,8 @@ export const updateModelFromFilters = (
   if (application !== ALL_APPLICATIONS_KEY) {
     dataModel.nodes.forEach((g) => {
       const group = getApplicationGroupForNode(g, dataModel.nodes);
-      g.visible = g.visible && group?.label === application;
+      g.visible =
+        (g.visible && group?.label === application) || (!group && application === 'Unassigned');
     });
   }
 

diff --git a/frontend/packages/dev-console/src/components/topology/list-view/TopologyListView.tsx b/frontend/packages/dev-console/src/components/topology/list-view/TopologyListView.tsx
@@ -1,7 +1,13 @@
 import * as React from 'react';
 import { DataList } from '@patternfly/react-core';
-import { isGraph, Node, isNode, Visualization, GraphElement } from '@patternfly/react-topology';
-import { useDeepCompareMemoize } from '@console/shared';
+import {
+  isGraph,
+  Node,
+  isNode,
+  Visualization,
+  GraphElement,
+  observer,
+} from '@patternfly/react-topology';
 import { TYPE_APPLICATION_GROUP } from '../components';
 import { TopologyListViewAppGroup } from './TopologyListViewAppGroup';
 import { getChildKinds, sortGroupChildren } from './list-view-utils';
@@ -23,23 +29,14 @@ const TopologyListView: React.FC<TopologyListViewProps> = ({
   onSelect,
 }) => {
   const selectedId = selectedIds[0];
-  const [applicationGroups, setApplicationGroups] = React.useState<Node[]>();
-  const [unassignedItems, setUnassignedItems] = React.useState<Node[]>();
 
-  const nodes = useDeepCompareMemoize(
-    visualization.getElements().filter((e) => isNode(e)) as Node[],
+  const nodes = visualization.getElements().filter((e) => isNode(e)) as Node[];
+  const applicationGroups = nodes.filter((n) => n.getType() === TYPE_APPLICATION_GROUP);
+  applicationGroups.sort((a, b) => a.getLabel().localeCompare(b.getLabel()));
+  const unassignedItems = nodes.filter(
+    (n) => n.getType() !== TYPE_APPLICATION_GROUP && isGraph(n.getParent()) && n.isVisible(),
   );
 
-  React.useEffect(() => {
-    const appGroups = nodes.filter((n) => n.getType() === TYPE_APPLICATION_GROUP);
-    appGroups.sort((a, b) => a.getLabel().localeCompare(b.getLabel()));
-    const items = nodes.filter(
-      (n) => n.getType() !== TYPE_APPLICATION_GROUP && isGraph(n.getParent()),
-    );
-    setApplicationGroups(appGroups);
-    setUnassignedItems(items);
-  }, [nodes]);
-
   React.useEffect(() => {
     if (selectedId) {
       const element = document.getElementById(selectedId);
@@ -172,4 +169,4 @@ const TopologyListView: React.FC<TopologyListViewProps> = ({
   );
 };
 
-export default TopologyListView;
+export default observer(TopologyListView);