fix(graphql): adjust GraphQL queries and models for updated server schema

src/app/Archives/AllArchivedRecordingsTable.tsx

@@ -169,19 +169,28 @@ export const AllArchivedRecordingsTable: React.FC<AllArchivedRecordingsTableProp
 
   React.useEffect(() => {
     addSubscription(
-      context.notificationChannel.messages(NotificationCategory.RecordingMetadataUpdated).subscribe(() => {
-        refreshDirectoriesAndCounts();
-      }),
-    );
-  }, [addSubscription, context.notificationChannel, refreshDirectoriesAndCounts]);
+      context.notificationChannel.messages(NotificationCategory.RecordingMetadataUpdated).subscribe((event) => {
+        const updatedRecordingInfo = event.message;
 
-  React.useEffect(() => {
-    addSubscription(
-      context.notificationChannel.messages(NotificationCategory.ActiveRecordingSaved).subscribe(() => {
-        refreshDirectoriesAndCounts();
+        setDirectories((currentDirectories) => {
+          const newDirectories = currentDirectories.map((directory) => ({
+            ...directory,
+            recordings: directory.recordings.map((recording) => {
+              if (recording.name === updatedRecordingInfo.recording.name) {
+                return {
+                  ...recording,
+                  metadata: { ...recording.metadata, labels: updatedRecordingInfo?.recording?.metadata?.labels },
+                };
+              }
+              return recording;
+            }),
+          }));
+
+          return newDirectories;
+        });
       }),
     );
-  }, [addSubscription, context.notificationChannel, refreshDirectoriesAndCounts]);
+  }, [addSubscription, context.notificationChannel, setDirectories]);
 
   React.useEffect(() => {
     addSubscription(

src/app/Archives/AllTargetsArchivedRecordingsTable.tsx

@@ -17,7 +17,7 @@ import { ErrorView } from '@app/ErrorView/ErrorView';
 import { authFailMessage, isAuthFail } from '@app/ErrorView/types';
 import { ArchivedRecordingsTable } from '@app/Recordings/ArchivedRecordingsTable';
 import { LoadingView } from '@app/Shared/Components/LoadingView';
-import { Target, TargetDiscoveryEvent, NotificationCategory } from '@app/Shared/Services/api.types';
+import { Target, TargetDiscoveryEvent, NotificationCategory, Metadata } from '@app/Shared/Services/api.types';
 import { isEqualTarget, indexOfTarget, includesTarget } from '@app/Shared/Services/api.utils';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSort } from '@app/utils/hooks/useSort';
@@ -70,10 +70,21 @@ const tableColumns: TableColumn[] = [
   },
 ];
 
+interface ArchivedRecording {
+  jvmId?: string;
+  name: string;
+  downloadUrl: string;
+  reportUrl: string;
+  metadata: Metadata;
+  size: number;
+  archivedTime: number;
+}
+
 type ArchivesForTarget = {
   target: Target;
   targetAsObs: Observable<Target>;
   archiveCount: number;
+  recordings: ArchivedRecording[];
 };
 
 export interface AllTargetsArchivedRecordingsTableProps {}
@@ -89,16 +100,26 @@ export const AllTargetsArchivedRecordingsTable: React.FC<AllTargetsArchivedRecor
   const addSubscription = useSubscriptions();
   const [sortBy, getSortParams] = useSort();
 
-  const updateCount = React.useCallback(
-    (connectUrl: string, delta: number) => {
+  const handleNotification = React.useCallback(
+    (_: string, recording: ArchivedRecording, delta: number) => {
       setArchivesForTargets((old) => {
-        const idx = old.findIndex(({ target }) => target.connectUrl === connectUrl);
-        if (idx >= 0) {
-          const matched = old[idx];
-          old.splice(idx, 1, { ...matched, archiveCount: matched.archiveCount + delta });
-          return [...old];
+        const matchingTargets = old.filter(({ target }) => {
+          return target.jvmId === recording.jvmId;
+        });
+        for (const matchedTarget of matchingTargets) {
+          const targetIdx = old.findIndex(({ target }) => target.connectUrl === matchedTarget.target.connectUrl);
+          const recordings = [...matchedTarget.recordings];
+          if (delta === 1) {
+            recordings.push(recording);
+          } else {
+            const recordingIdx = recordings.findIndex((r) => r.name === recording.name);
+            recordings.splice(recordingIdx, 1);
+          }
+
+          old.splice(targetIdx, 1, { ...matchedTarget, archiveCount: matchedTarget.archiveCount + delta, recordings });
         }
-        return old;
+
+        return [...old];
       });
     },
     [setArchivesForTargets],
@@ -112,13 +133,20 @@ export const AllTargetsArchivedRecordingsTable: React.FC<AllTargetsArchivedRecor
       setArchivesForTargets(
         targetNodes.map((node) => {
           const target: Target = {
-            connectUrl: node.target.serviceUri,
+            jvmId: node.target.jvmId,
+            connectUrl: node.target.connectUrl,
             alias: node.target.alias,
+            labels: [],
+            annotations: {
+              cryostat: [],
+              platform: [],
+            },
           };
           return {
             target,
             targetAsObs: of(target),
-            archiveCount: node.recordings.archived.aggregate.count,
+            archiveCount: node?.archiveCount ?? 0,
+            recordings: node?.recordings ?? [],
           };
         }),
       );
@@ -134,29 +162,54 @@ export const AllTargetsArchivedRecordingsTable: React.FC<AllTargetsArchivedRecor
     [setIsLoading, setErrorMessage],
   );
 
-  /* eslint-disable @typescript-eslint/no-explicit-any */
   const refreshArchivesForTargets = React.useCallback(() => {
     setIsLoading(true);
     addSubscription(
       context.api
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         .graphql<any>(
           `query AllTargetsArchives {
-               targetNodes {
-                 target {
-                   serviceUri
-                   alias
-                 }
-                 recordings {
-                   archived {
-                     aggregate {
-                       count
-                     }
-                   }
-                 }
-               }
-             }`,
+            targetNodes {
+              target {
+                connectUrl
+                alias
+                jvmId
+                archivedRecordings {
+                  data {
+                    jvmId
+                    name
+                    downloadUrl
+                    reportUrl
+                    metadata {
+                      labels {
+                        key
+                        value
+                      }
+                    }
+                    size
+                    archivedTime
+                  }
+                  aggregate {
+                    count
+                  }
+                }
+              }
+            }
+          }`,
+        )
+        .pipe(
+          map((v) => {
+            return v.data.targetNodes.map((node) => {
+              const target: Target = node.target;
+              return {
+                target,
+                targetAsObs: of(target),
+                archiveCount: node.target.archivedRecordings.aggregate.count,
+                recordings: node.target.archivedRecordings.data as ArchivedRecording[],
+              };
+            });
+          }),
         )
-        .pipe(map((v) => v.data.targetNodes))
         .subscribe({
           next: handleArchivesForTargets,
           error: handleError,
@@ -170,18 +223,31 @@ export const AllTargetsArchivedRecordingsTable: React.FC<AllTargetsArchivedRecor
       addSubscription(
         context.api
           .graphql<any>(
-            `
-        query ArchiveCountForTarget($connectUrl: String) {
-          targetNodes(filter: { name: $connectUrl }) {
-            recordings {
-              archived {
-                aggregate {
-                  count
+            `query ArchiveCountForTarget($connectUrl: String) {
+              targetNodes(filter: { name: $connectUrl }) {
+                target {
+                  archivedRecordings {
+                    data {
+                      jvmId
+                      name
+                      downloadUrl
+                      reportUrl
+                      metadata {
+                        labels {
+                          key
+                          value
+                        }
+                      }
+                      size
+                      archivedTime
+                    }
+                    aggregate {
+                      count
+                    }
+                  }
                 }
               }
-            }
-          }
-        }`,
+            }`,
             { connectUrl: target.connectUrl },
           )
           .subscribe((v) => {
@@ -191,7 +257,8 @@ export const AllTargetsArchivedRecordingsTable: React.FC<AllTargetsArchivedRecor
                 {
                   target: target,
                   targetAsObs: of(target),
-                  archiveCount: v.data.targetNodes[0].recordings.archived.aggregate.count,
+                  archiveCount: v.data.targetNodes[0]?.target?.archivedRecordings?.aggregate?.count ?? 0,
+                  recordings: v.data.targetNodes[0]?.target?.archivedRecordings,
                 },
               ];
             });
@@ -212,27 +279,26 @@ export const AllTargetsArchivedRecordingsTable: React.FC<AllTargetsArchivedRecor
 
   const handleTargetNotification = React.useCallback(
     (evt: TargetDiscoveryEvent) => {
-      const target: Target = {
-        connectUrl: evt.serviceRef.connectUrl,
-        alias: evt.serviceRef.alias,
-      };
       if (evt.kind === 'FOUND') {
-        getCountForNewTarget(target);
+        getCountForNewTarget(evt.serviceRef);
       } else if (evt.kind === 'MODIFIED') {
         setArchivesForTargets((old) => {
-          const idx = old.findIndex(({ target: t }) => isEqualTarget(t, target));
+          const idx = old.findIndex(({ target: t }) => isEqualTarget(t, evt.serviceRef));
           if (idx >= 0) {
             const matched = old[idx];
-            if (target.connectUrl === matched.target.connectUrl && target.alias === matched.target.alias) {
+            if (
+              evt.serviceRef.connectUrl === matched.target.connectUrl &&
+              evt.serviceRef.alias === matched.target.alias
+            ) {
               // If alias and connectUrl are not updated, ignore changes.
               return old;
             }
-            return old.splice(idx, 1, { ...matched, target: target, targetAsObs: of(target) });
+            return old.splice(idx, 1, { ...matched, target: evt.serviceRef, targetAsObs: of(evt.serviceRef) });
           }
           return old;
         });
       } else if (evt.kind === 'LOST') {
-        handleLostTarget(target);
+        handleLostTarget(evt.serviceRef);
       }
     },
     [setArchivesForTargets, getCountForNewTarget, handleLostTarget],
@@ -302,29 +368,21 @@ export const AllTargetsArchivedRecordingsTable: React.FC<AllTargetsArchivedRecor
     );
   }, [addSubscription, context.notificationChannel, handleTargetNotification]);
 
-  React.useEffect(() => {
-    addSubscription(
-      context.notificationChannel.messages(NotificationCategory.ActiveRecordingSaved).subscribe((v) => {
-        updateCount(v.message.target, 1);
-      }),
-    );
-  }, [addSubscription, context.notificationChannel, updateCount]);
-
   React.useEffect(() => {
     addSubscription(
       context.notificationChannel.messages(NotificationCategory.ArchivedRecordingCreated).subscribe((v) => {
-        updateCount(v.message.target, 1);
+        handleNotification(v.message.target, v.message.recording, 1);
       }),
     );
-  }, [addSubscription, context.notificationChannel, updateCount]);
+  }, [addSubscription, context.notificationChannel, handleNotification]);
 
   React.useEffect(() => {
     addSubscription(
       context.notificationChannel.messages(NotificationCategory.ArchivedRecordingDeleted).subscribe((v) => {
-        updateCount(v.message.target, -1);
+        handleNotification(v.message.target, v.message.recording, -1);
       }),
     );
-  }, [addSubscription, context.notificationChannel, updateCount]);
+  }, [addSubscription, context.notificationChannel, handleNotification]);
 
   const toggleExpanded = React.useCallback(
     (target) => {

src/app/Archives/ArchiveUploadModal.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 import { RecordingLabelFields } from '@app/RecordingMetadata/RecordingLabelFields';
-import { RecordingLabel } from '@app/RecordingMetadata/types';
 import { FUpload, MultiFileUpload, UploadCallbacks } from '@app/Shared/Components/FileUploads';
 import { LoadingProps } from '@app/Shared/Components/types';
+import { KeyValue } from '@app/Shared/Services/api.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { portalRoot } from '@app/utils/utils';
@@ -51,7 +51,7 @@ export const ArchiveUploadModal: React.FC<ArchiveUploadModalProps> = ({ onClose,
   const [uploading, setUploading] = React.useState(false);
   const [numOfFiles, setNumOfFiles] = React.useState(0);
   const [allOks, setAllOks] = React.useState(false);
-  const [labels, setLabels] = React.useState([] as RecordingLabel[]);
+  const [labels, setLabels] = React.useState([] as KeyValue[]);
   const [valid, setValid] = React.useState(ValidatedOptions.success);
 
   const getFormattedLabels = React.useCallback(() => {
@@ -66,7 +66,7 @@ export const ArchiveUploadModal: React.FC<ArchiveUploadModalProps> = ({ onClose,
 
   const reset = React.useCallback(() => {
     setUploading(false);
-    setLabels([] as RecordingLabel[]);
+    setLabels([] as KeyValue[]);
     setValid(ValidatedOptions.success);
     setNumOfFiles(0);
   }, [setUploading, setLabels, setValid, setNumOfFiles]);

src/app/Archives/Archives.tsx

@@ -36,6 +36,11 @@ import { AllTargetsArchivedRecordingsTable } from './AllTargetsArchivedRecording
 export const uploadAsTarget: Target = {
   connectUrl: UPLOADS_SUBDIRECTORY,
   alias: '',
+  labels: [],
+  annotations: {
+    cryostat: [],
+    platform: [],
+  },
 };
 
 enum ArchiveTab {

src/app/Archives/utils.tsx

@@ -34,5 +34,10 @@ export const getTargetFromDirectory = (dir: RecordingDirectory): Target => {
   return {
     connectUrl: dir.connectUrl,
     alias: dir.jvmId,
+    labels: [],
+    annotations: {
+      cryostat: [],
+      platform: [],
+    },
   };
 };