Small bug fixes

Author: ashley-o0o

frontend/packages/modelServing/src/components/deploy/DeployButton.tsx

@@ -1,56 +1,113 @@
 import React from 'react';
 import { Button, Tooltip } from '@patternfly/react-core';
-import { ProjectDetailsContext } from '@odh-dashboard/internal/pages/projects/ProjectDetailsContext';
 import { ServingRuntimePlatform } from '@odh-dashboard/internal/types';
 import {
   getSortedTemplates,
   getTemplateEnabled,
   getTemplateEnabledForPlatform,
 } from '@odh-dashboard/internal/pages/modelServing/customServingRuntimes/utils';
-import { isProjectNIMSupported } from '@odh-dashboard/internal/pages/modelServing/screens/projects/nimUtils';
 import ManageServingRuntimeModal from '@odh-dashboard/internal/pages/modelServing/screens/projects/ServingRuntimeModal/ManageServingRuntimeModal';
 import ManageKServeModal from '@odh-dashboard/internal/pages/modelServing/screens/projects/kServeModal/ManageKServeModal';
 import ManageNIMServingModal from '@odh-dashboard/internal/pages/modelServing/screens/projects/NIMServiceModal/ManageNIMServingModal';
+import { byName, ProjectsContext } from '@odh-dashboard/internal/concepts/projects/ProjectsContext';
+import { useParams } from 'react-router-dom';
+import { POLL_INTERVAL } from '@odh-dashboard/internal/utilities/const';
+import useInferenceServices from '@odh-dashboard/internal/pages/modelServing/useInferenceServices';
+import useServingRuntimes from '@odh-dashboard/internal/pages/modelServing/useServingRuntimes';
+import { useTemplates } from '@odh-dashboard/internal/api/k8s/templates';
+import { useDashboardNamespace } from '@odh-dashboard/internal/redux/selectors/index';
+import useTemplateOrder from '@odh-dashboard/internal/pages/modelServing/customServingRuntimes/useTemplateOrder';
+import useTemplateDisablement from '@odh-dashboard/internal/pages/modelServing/customServingRuntimes/useTemplateDisablement';
+import useConnections from '@odh-dashboard/internal/pages/projects/screens/detail/connections/useConnections';
+import useServingRuntimeSecrets from '@odh-dashboard/internal/pages/modelServing/screens/projects/useServingRuntimeSecrets';
+import { ProjectKind } from '@odh-dashboard/internal/k8sTypes';
+import { isProjectNIMSupported } from '@odh-dashboard/internal/pages/modelServing/screens/projects/nimUtils';
+import { ModelDeploymentsContext } from '../../concepts/ModelDeploymentsContext';
 import {
   useProjectServingPlatform,
   ModelServingPlatform,
 } from '../../concepts/useProjectServingPlatform';
+import { useAvailableClusterPlatforms } from '../../concepts/useAvailableClusterPlatforms';
+
+const DeployButtonModal: React.FC<{
+  platform: ServingRuntimePlatform;
+  currentProject: ProjectKind;
+  onClose: (submit: boolean) => void;
+}> = ({ platform, currentProject, onClose }) => {
+  const { namespace } = useParams();
+  const { dashboardNamespace } = useDashboardNamespace();
+  const [servingRuntimeTemplates] = useTemplates(dashboardNamespace);
+  const servingRuntimeTemplateOrder = useTemplateOrder(dashboardNamespace, undefined, {
+    refreshRate: POLL_INTERVAL,
+  });
+  const servingRuntimeTemplateDisablement = useTemplateDisablement(dashboardNamespace, undefined, {
+    refreshRate: POLL_INTERVAL,
+  });
+  const connections = useConnections(namespace);
+  const templatesSorted = getSortedTemplates(
+    servingRuntimeTemplates,
+    servingRuntimeTemplateOrder.data,
+  );
+  const templatesEnabled = templatesSorted.filter((template) =>
+    getTemplateEnabled(template, servingRuntimeTemplateDisablement.data),
+  );
+
+  if (platform === ServingRuntimePlatform.MULTI) {
+    return (
+      <ManageServingRuntimeModal
+        currentProject={currentProject}
+        servingRuntimeTemplates={templatesEnabled.filter((t) =>
+          getTemplateEnabledForPlatform(t, ServingRuntimePlatform.MULTI),
+        )}
+        onClose={onClose}
+      />
+    );
+  }
+
+  const isNIMSupported = isProjectNIMSupported(currentProject);
+  if (isNIMSupported) {
+    return <ManageNIMServingModal projectContext={{ currentProject }} onClose={onClose} />;
+  }
+  return (
+    <ManageKServeModal
+      projectContext={{ currentProject, connections: connections.data }}
+      servingRuntimeTemplates={templatesEnabled.filter((t) =>
+        getTemplateEnabledForPlatform(t, ServingRuntimePlatform.SINGLE),
+      )}
+      onClose={onClose}
+    />
+  );
+};
 
 export const DeployButton: React.FC<{
   platform?: ModelServingPlatform;
   variant?: 'primary' | 'secondary';
-  isDisabled?: boolean;
-}> = ({ platform, variant = 'primary', isDisabled }) => {
+}> = ({ platform, variant = 'primary' }) => {
   const [modalShown, setModalShown] = React.useState<boolean>(false);
   const [platformSelected, setPlatformSelected] = React.useState<ServingRuntimePlatform>();
-
-  const {
-    servingRuntimes: { refresh: refreshServingRuntime },
-    servingRuntimeTemplates: [templates],
-    servingRuntimeTemplateOrder: { data: templateOrder },
-    servingRuntimeTemplateDisablement: { data: templateDisablement },
-    connections: { data: connections },
-    serverSecrets: { refresh: refreshTokens },
-    inferenceServices: { refresh: refreshInferenceServices },
-    currentProject,
-  } = React.useContext(ProjectDetailsContext);
-
-  const { activePlatform, projectPlatform } = useProjectServingPlatform(currentProject);
-
-  const templatesSorted = getSortedTemplates(templates, templateOrder);
-  const templatesEnabled = templatesSorted.filter((template) =>
-    getTemplateEnabled(template, templateDisablement),
-  );
-
-  const isKServeNIMEnabled = isProjectNIMSupported(currentProject);
+  const { namespace } = useParams();
+  const { projects } = React.useContext(ProjectsContext);
+  const match = namespace ? projects.find(byName(namespace)) ?? null : null;
+  const { clusterPlatforms } = useAvailableClusterPlatforms();
+  const { activePlatform, projectPlatform } = useProjectServingPlatform(match, clusterPlatforms);
+  const inferenceServices = useInferenceServices(namespace, undefined, undefined, undefined, {
+    refreshRate: POLL_INTERVAL,
+  });
+  const inferenceServiceRefresh = inferenceServices.refresh;
+  const servingRuntimes = useServingRuntimes(namespace, undefined, { refreshRate: POLL_INTERVAL });
+  const servingRuntimeRefresh = servingRuntimes.refresh;
+  const serverSecrets = useServingRuntimeSecrets(namespace, { refreshRate: POLL_INTERVAL });
+  const { projects: modelProjects } = React.useContext(ModelDeploymentsContext);
+  const { namespace: modelNamespace } = useParams<{ namespace: string }>();
+  const currentProject = modelProjects?.find(byName(modelNamespace));
 
   const onSubmit = (submit: boolean) => {
     setModalShown(false);
     setPlatformSelected(undefined);
     if (submit) {
-      refreshServingRuntime();
-      refreshInferenceServices();
-      setTimeout(refreshTokens, 500);
+      servingRuntimeRefresh();
+      inferenceServiceRefresh();
+      setTimeout(serverSecrets.refresh, 500);
     }
   };
 
@@ -63,7 +120,7 @@ export const DeployButton: React.FC<{
       );
     } else {
       const currentPlatform = activePlatform || projectPlatform;
-      if (currentPlatform) {
+      if (currentProject && currentPlatform) {
         setPlatformSelected(
           currentPlatform.properties.id === 'modelmesh'
             ? ServingRuntimePlatform.MULTI
@@ -79,39 +136,23 @@ export const DeployButton: React.FC<{
       variant={variant}
       data-testid="deploy-button"
       onClick={handleDeployClick}
-      isAriaDisabled={isDisabled}
+      isAriaDisabled={!currentProject}
     >
       Deploy Model
     </Button>
   );
 
-  const hasPlatform = platform || activePlatform || projectPlatform;
-
-  if (!hasPlatform) {
+  if (!currentProject) {
     return <Tooltip content="To deploy a model, select a project.">{deployButton}</Tooltip>;
   }
 
   return (
     <>
       {deployButton}
-      {modalShown && platformSelected === ServingRuntimePlatform.MULTI ? (
-        <ManageServingRuntimeModal
+      {modalShown && platformSelected ? (
+        <DeployButtonModal
+          platform={platformSelected}
           currentProject={currentProject}
-          servingRuntimeTemplates={templatesEnabled.filter((template) =>
-            getTemplateEnabledForPlatform(template, ServingRuntimePlatform.MULTI),
-          )}
-          onClose={onSubmit}
-        />
-      ) : null}
-      {modalShown && platformSelected === ServingRuntimePlatform.SINGLE && isKServeNIMEnabled ? (
-        <ManageNIMServingModal projectContext={{ currentProject }} onClose={onSubmit} />
-      ) : null}
-      {modalShown && platformSelected === ServingRuntimePlatform.SINGLE && !isKServeNIMEnabled ? (
-        <ManageKServeModal
-          projectContext={{ currentProject, connections }}
-          servingRuntimeTemplates={templatesEnabled.filter((template) =>
-            getTemplateEnabledForPlatform(template, ServingRuntimePlatform.SINGLE),
-          )}
           onClose={onSubmit}
         />
       ) : null}

frontend/packages/modelServing/src/concepts/useProjectServingPlatform.ts

@@ -57,7 +57,7 @@ export const getMultiProjectServingPlatforms = (
 };
 
 export const useProjectServingPlatform = (
-  project: ProjectKind,
+  project: ProjectKind | null,
   platforms?: ModelServingPlatform[],
 ): {
   activePlatform?: ModelServingPlatform | null; // This includes preselecting a platform if there is only one
@@ -69,14 +69,14 @@ export const useProjectServingPlatform = (
 } => {
   const [tmpProjectPlatform, setTmpProjectPlatform] = React.useState<
     ModelServingPlatform | null | undefined
-  >(project.metadata.name && platforms ? getProjectServingPlatform(project, platforms) : undefined);
+  >(project && platforms ? getProjectServingPlatform(project, platforms) : undefined);
   const [projectPlatformError, setProjectPlatformError] = React.useState<string | null>(null);
   const [newProjectPlatformLoading, setNewProjectPlatformLoading] = React.useState<
     ModelServingPlatform | null | undefined
   >();
 
   React.useEffect(() => {
-    if (!project.metadata.name || !platforms) {
+    if (!project || !platforms) {
       return;
     }
     const p = getProjectServingPlatform(project, platforms);
@@ -88,6 +88,9 @@ export const useProjectServingPlatform = (
 
   const setProjectPlatform = React.useCallback(
     (platformToEnable: ModelServingPlatform) => {
+      if (!project) {
+        return;
+      }
       setNewProjectPlatformLoading(platformToEnable);
       setProjectPlatformError(null);
 
@@ -103,6 +106,9 @@ export const useProjectServingPlatform = (
   );
 
   const resetProjectPlatform = React.useCallback(() => {
+    if (!project) {
+      return;
+    }
     setNewProjectPlatformLoading(null);
     setProjectPlatformError(null);