address feedback

DaoDaoNoCode · Aug 12, 2024 · 4dfd7ec · 4dfd7ec
1 parent f052b45
commit 4dfd7ec
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 18 deletions.
diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/useRegisteredModelDeployInfo.ts b/frontend/src/pages/modelRegistry/screens/RegisteredModels/useRegisteredModelDeployInfo.ts
@@ -10,26 +10,54 @@ export type RegisteredModelDeployInfo = {
   modelArtifactStorageKey?: string;
 };
 
-const useRegisteredModelDeployInfo = (modelVersion: ModelVersion): RegisteredModelDeployInfo => {
-  const [registeredModel] = useRegisteredModelById(modelVersion.registeredModelId);
-  const [modelArtifactList] = useModelArtifactsByVersionId(modelVersion.id);
+const useRegisteredModelDeployInfo = (
+  modelVersion: ModelVersion,
+): {
+  registeredModelDeployInfo: RegisteredModelDeployInfo;
+  loaded: boolean;
+  error: Error | undefined;
+} => {
+  const [registeredModel, registeredModelLoaded, registeredModelError] = useRegisteredModelById(
+    modelVersion.registeredModelId,
+  );
+  const [modelArtifactList, modelArtifactListLoaded, modelArtifactListError] =
+    useModelArtifactsByVersionId(modelVersion.id);
 
   const registeredModelDeployInfo = React.useMemo(() => {
+    const dateString = new Date().toISOString();
+    const modelName = `${registeredModel?.name} - ${modelVersion.name} - ${dateString}`;
     if (modelArtifactList.size === 0) {
       return {
-        modelName: `${registeredModel?.name} - ${modelVersion.name}`,
+        registeredModelDeployInfo: {
+          modelName,
+        },
+        loaded: registeredModelLoaded && modelArtifactListLoaded,
+        error: registeredModelError || modelArtifactListError,
       };
     }
     const modelArtifact = modelArtifactList.items[0];
     return {
-      modelName: `${registeredModel?.name} - ${modelVersion.name} - ${new Date().toISOString()}`,
-      modelFormat: modelArtifact.modelFormatName
-        ? `${modelArtifact.modelFormatName} - ${modelArtifact.modelFormatVersion}`
-        : undefined,
-      modelArtifactUri: modelArtifact.uri,
-      modelArtifactStorageKey: modelArtifact.storageKey,
+      registeredModelDeployInfo: {
+        modelName,
+        modelFormat: modelArtifact.modelFormatName
+          ? `${modelArtifact.modelFormatName} - ${modelArtifact.modelFormatVersion}`
+          : undefined,
+        modelArtifactUri: modelArtifact.uri,
+        modelArtifactStorageKey: modelArtifact.storageKey,
+      },
+      loaded: registeredModelLoaded && modelArtifactListLoaded,
+      error: registeredModelError || modelArtifactListError,
     };
-  }, [modelArtifactList.items, modelArtifactList.size, modelVersion.name, registeredModel?.name]);
+  }, [
+    modelArtifactList.items,
+    modelArtifactList.size,
+    modelArtifactListError,
+    modelArtifactListLoaded,
+    modelVersion.name,
+    registeredModel?.name,
+    registeredModelError,
+    registeredModelLoaded,
+  ]);
 
   return registeredModelDeployInfo;
 };

diff --git a/frontend/src/pages/modelRegistry/screens/components/DeployRegisteredModelModal.tsx b/frontend/src/pages/modelRegistry/screens/components/DeployRegisteredModelModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Form, Modal } from '@patternfly/react-core';
+import { Alert, Button, Form, Modal, Spinner } from '@patternfly/react-core';
 import { ModelVersion } from '~/concepts/modelRegistry/types';
 import { ProjectKind } from '~/k8sTypes';
 import useProjectErrorForRegisteredModel from '~/pages/modelRegistry/screens/RegisteredModels/useProjectErrorForRegisteredModel';
@@ -41,7 +41,11 @@ const DeployRegisteredModelModal: React.FC<DeployRegisteredModelModalProps> = ({
   const [dataConnections] = useDataConnections(selectedProject?.metadata.name);
   const error = platformError || projectError;
 
-  const registeredModelDeployInfo = useRegisteredModelDeployInfo(modelVersion);
+  const {
+    registeredModelDeployInfo,
+    loaded,
+    error: deployInfoError,
+  } = useRegisteredModelDeployInfo(modelVersion);
 
   const onClose = React.useCallback(() => {
     setSelectedProject(null);
@@ -67,11 +71,19 @@ const DeployRegisteredModelModal: React.FC<DeployRegisteredModelModalProps> = ({
         showClose
       >
         <Form>
-          <ProjectSelector
-            selectedProject={selectedProject}
-            setSelectedProject={setSelectedProject}
-            error={error}
-          />
+          {deployInfoError ? (
+            <Alert variant="danger" isInline title={deployInfoError.name}>
+              {deployInfoError.message}
+            </Alert>
+          ) : !loaded ? (
+            <Spinner />
+          ) : (
+            <ProjectSelector
+              selectedProject={selectedProject}
+              setSelectedProject={setSelectedProject}
+              error={error}
+            />
+          )}
         </Form>
       </Modal>
     );