fix(topology): resource table should update when notifications come

cryostatio · Feb 23, 2023 · 5b4586b · 5b4586b
1 parent 9341d89
commit 5b4586b
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 29 deletions.
diff --git a/src/app/Topology/SideBar/EntityDetails.tsx b/src/app/Topology/SideBar/EntityDetails.tsx
@@ -37,7 +37,6 @@
  */
 
 import { LinearDotSpinner } from '@app/Shared/LinearDotSpinner';
-import { ActiveRecording } from '@app/Shared/Services/Api.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { splitWordsOnUppercase } from '@app/utils/utils';
@@ -54,7 +53,6 @@ import {
   DescriptionListTermHelpTextButton,
   Divider,
   Dropdown,
-  DropdownItem,
   DropdownToggle,
   Flex,
   FlexItem,
@@ -72,7 +70,7 @@ import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-tab
 import { GraphElement, NodeStatus } from '@patternfly/react-topology';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { catchError, combineLatest, concatMap, of, switchMap, tap } from 'rxjs';
+import { catchError, combineLatest, concatMap, merge, of, switchMap } from 'rxjs';
 import { getBadgeFromNodeType } from '../GraphView/CustomNode';
 import { actionFactory, getStatusTargetNode, isRenderable, StatusExtra } from '../GraphView/UtilsFactory';
 import { EmptyText } from '../Shared/EmptyText';
@@ -81,7 +79,11 @@ import { EntityAnnotations } from './EntityAnnotations';
 import { EntityLabels } from './EntityLabels';
 import { EntityTitle } from './EntityTitle';
 import {
+  extraTargetConnectUrlFromEvent,
   getLinkPropsForTargetResource,
+  getResourceAddedEvent as getResourceAddedEvents,
+  getResourceListPatchFn,
+  getResourceRemovedEvent as getResourceRemovedEvents,
   getTargetOwnedResources,
   TargetOwnedResourceType,
   TargetOwnedResourceTypeAsArray,
@@ -291,7 +293,7 @@ export const TargetResourceItem: React.FC<{
   targetNode: TargetNode;
   resourceType: TargetOwnedResourceType;
 }> = ({ targetNode, resourceType, ...props }) => {
-  const context = React.useContext(ServiceContext);
+  const services = React.useContext(ServiceContext);
   const addSubscription = useSubscriptions();
 
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -304,27 +306,58 @@ export const TargetResourceItem: React.FC<{
   React.useEffect(() => {
     setLoading(true);
     addSubscription(
-      targetNodeAsObs.pipe(switchMap((tn) => getTargetOwnedResources<any[]>(resourceType, tn, context.api))).subscribe({
-        next: (rs) => {
-          setLoading(false);
-          setError(undefined);
-          setResources(rs);
-        },
-        error: (error) => {
-          setLoading(false);
-          setError(error);
-        },
-      })
+      targetNodeAsObs
+        .pipe(switchMap((tn) => getTargetOwnedResources<any[]>(resourceType, tn, services.api)))
+        .subscribe({
+          next: (rs) => {
+            setLoading(false);
+            setError(undefined);
+            setResources(rs);
+          },
+          error: (error) => {
+            setLoading(false);
+            setError(error);
+          },
+        })
     );
-  }, [setLoading, addSubscription, setResources, targetNode, resourceType, context.api, targetNodeAsObs]);
+  }, [setLoading, addSubscription, setResources, targetNode, resourceType, services.api, targetNodeAsObs]);
 
-  React.useEffect(() => {}, []);
+  React.useEffect(() => {
+    addSubscription(
+      combineLatest([
+        targetNodeAsObs,
+        merge(...getResourceAddedEvents(resourceType).map((cat) => services.notificationChannel.messages(cat))),
+      ]).subscribe(([{ target }, event]) => {
+        console.log(event);
+        const extractedUrl = extraTargetConnectUrlFromEvent(event);
+        if (extractedUrl && extractedUrl === target.connectUrl) {
+          setResources((old) => {
+            return getResourceListPatchFn(resourceType)(old, event, false);
+          });
+        }
+      })
+    );
+  }, [addSubscription, targetNodeAsObs, resourceType, services.notificationChannel]);
 
-  React.useEffect(() => {}, []);
+  React.useEffect(() => {
+    addSubscription(
+      combineLatest([
+        targetNodeAsObs,
+        merge(...getResourceRemovedEvents(resourceType).map((cat) => services.notificationChannel.messages(cat))),
+      ]).subscribe(([{ target }, event]) => {
+        const extractedUrl = extraTargetConnectUrlFromEvent(event);
+        if (extractedUrl && extractedUrl === target.connectUrl) {
+          setResources((old) => {
+            return getResourceListPatchFn(resourceType)(old, event, true);
+          });
+        }
+      })
+    );
+  }, [addSubscription, targetNodeAsObs, resourceType, services.notificationChannel]);
 
   const switchTarget = React.useCallback(
-    () => context.target.setTarget(targetNode.target),
-    [targetNode.target, context.target]
+    () => services.target.setTarget(targetNode.target),
+    [targetNode.target, services.target]
   );
 
   return (

diff --git a/src/app/Topology/SideBar/utils.ts b/src/app/Topology/SideBar/utils.ts
@@ -36,15 +36,8 @@
  * SOFTWARE.
  */
 import { EventTemplate } from '@app/CreateRecording/CreateRecording';
-import {
-  ActiveRecording,
-  ApiService,
-  ArchivedRecording,
-  EventProbe,
-  Recording,
-  UPLOADS_SUBDIRECTORY,
-} from '@app/Shared/Services/Api.service';
-import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.service';
+import { ApiService, EventProbe, Recording, UPLOADS_SUBDIRECTORY } from '@app/Shared/Services/Api.service';
+import { NotificationCategory, NotificationMessage } from '@app/Shared/Services/NotificationChannel.service';
 import { Link } from 'react-router-dom';
 import { map, Observable } from 'rxjs';
 import { TargetNode } from '../typings';
@@ -250,3 +243,7 @@ export const getLinkPropsForTargetResource = (resourceType: TargetOwnedResourceT
       return { to: '' };
   }
 };
+
+export const extraTargetConnectUrlFromEvent = (event: NotificationMessage): string | undefined => {
+  return event.message.target || event.message.targetId;
+};