updated context to work with global

Author: katieperry4

frontend/packages/kserve/src/api.ts

@@ -15,42 +15,42 @@ import {
 import { CustomWatchK8sResult } from '@odh-dashboard/internal/types';
 
 export const useWatchInferenceServices = (
-  project: ProjectKind,
+  project?: ProjectKind,
   opts?: K8sAPIOptions,
 ): CustomWatchK8sResult<InferenceServiceKind[]> =>
   useK8sWatchResourceList<InferenceServiceKind[]>(
     {
       isList: true,
       groupVersionKind: groupVersionKind(InferenceServiceModel),
-      namespace: project.metadata.name,
+      namespace: project?.metadata.name,
     },
     InferenceServiceModel,
     opts,
   );
 
 export const useWatchServingRuntimes = (
-  project: ProjectKind,
+  project?: ProjectKind,
   opts?: K8sAPIOptions,
 ): CustomWatchK8sResult<ServingRuntimeKind[]> =>
   useK8sWatchResourceList<ServingRuntimeKind[]>(
     {
       isList: true,
       groupVersionKind: groupVersionKind(ServingRuntimeModel),
-      namespace: project.metadata.name,
+      namespace: project?.metadata.name,
     },
     ServingRuntimeModel,
     opts,
   );
 
 export const useWatchDeploymentPods = (
-  project: ProjectKind,
+  project?: ProjectKind,
   opts?: K8sAPIOptions,
 ): CustomWatchK8sResult<PodKind[]> =>
   useK8sWatchResourceList<PodKind[]>(
     {
       isList: true,
       groupVersionKind: groupVersionKind(PodModel),
-      namespace: project.metadata.name,
+      namespace: project?.metadata.name,
       selector: {
         matchExpressions: [
           {

frontend/packages/kserve/src/deployments.ts

@@ -16,7 +16,7 @@ export const isKServeDeployment = (deployment: Deployment): deployment is KServe
   deployment.modelServingPlatformId === KSERVE_ID;
 
 export const useWatchDeployments = (
-  project: ProjectKind,
+  project?: ProjectKind,
   opts?: K8sAPIOptions,
 ): [KServeDeployment[] | undefined, boolean, Error | undefined] => {
   const [inferenceServices, inferenceServiceLoaded, inferenceServiceError] =

frontend/packages/modelServing/extension-points/index.ts

@@ -40,7 +40,7 @@ export type ModelServingPlatformExtension<D extends Deployment = Deployment> = E
     deployments: {
       watch: CodeRef<
         (
-          project: ProjectKind,
+          project?: ProjectKind,
           opts?: K8sAPIOptions,
         ) => [D[] | undefined, boolean, Error | undefined]
       >;

frontend/packages/modelServing/src/components/global/GlobalDeploymentsView.tsx

@@ -5,8 +5,7 @@ import TitleWithIcon from '@odh-dashboard/internal/concepts/design/TitleWithIcon
 import { Bullseye, Spinner } from '@patternfly/react-core';
 import ProjectSelectorNavigator from '@odh-dashboard/internal/concepts/projects/ProjectSelectorNavigator';
 import { useResolvedExtensions } from '@odh-dashboard/plugin-core';
-import { useParams } from 'react-router-dom';
-import { byName, ProjectsContext } from '@odh-dashboard/internal/concepts/projects/ProjectsContext';
+import { ProjectsContext } from '@odh-dashboard/internal/concepts/projects/ProjectsContext';
 import { GlobalNoModelsView } from './GlobalNoModelsView';
 import GlobalDeploymentsTable from './GlobalDeploymentsTable';
 import { ModelDeploymentsContext } from '../../concepts/ModelDeploymentsContext';
@@ -15,20 +14,25 @@ import { isModelServingPlatformExtension } from '../../../extension-points';
 const GlobalDeploymentsView: React.FC = () => {
   const { deployments, loaded: deploymentsLoaded } = React.useContext(ModelDeploymentsContext);
   const [platformsLoaded] = useResolvedExtensions(isModelServingPlatformExtension);
-  const { '*': projectNameFromURL } = useParams();
-  const { projects } = React.useContext(ProjectsContext);
-  const currentProject = React.useMemo(
-    () => (projectNameFromURL ? projects.find(byName(projectNameFromURL)) : undefined),
-    [projectNameFromURL, projects],
-  );
-  const hasDeployments = deployments ? deployments.length > 0 : false;
+  const { preferredProject: currentProject } = React.useContext(ProjectsContext);
+  const hasDeployments = React.useMemo(() => {
+    if (!deployments) {
+      return false;
+    }
+    if (!currentProject) {
+      return deployments.length > 0;
+    }
+    return deployments.some(
+      (deployment) => deployment.model.metadata.namespace === currentProject.metadata.name,
+    );
+  }, [deployments, currentProject]);
   const isLoading = !deploymentsLoaded || !platformsLoaded;
 
   return (
     <ApplicationsPage
-      loaded
+      loaded={!isLoading}
       empty={!hasDeployments}
-      emptyStatePage={<GlobalNoModelsView project={currentProject} />}
+      emptyStatePage={<GlobalNoModelsView project={currentProject ?? undefined} />}
       description="Manage and view the health and performance of your deployed models."
       title={
         <TitleWithIcon title="Model deployments" objectType={ProjectObjectType.deployedModels} />

frontend/packages/modelServing/src/concepts/ModelDeploymentsContext.tsx

@@ -11,14 +11,20 @@ type ModelDeploymentsContextType = {
 
 type WatcherProps = {
   platform: ModelServingPlatform;
-  project: ProjectKind;
+  project?: ProjectKind; // *** CHANGED: optional project (undefined means global) ***
   onUpdate: (key: string, result: [Deployment[] | undefined, boolean, Error | undefined]) => void;
 };
 
 const DeploymentWatcherComponent: React.FC<WatcherProps> = ({ platform, project, onUpdate }) => {
   const watchDeployments = platform.properties.deployments.watch;
-  const result = watchDeployments(project);
-  const key = `${platform.properties.id}-${project.metadata.name}`;
+  // *** CHANGED: pass undefined if project is undefined (global watch) ***
+  const result = project ? watchDeployments(project) : watchDeployments(undefined);
+  // call with no args for global watch
+
+  // key includes project or "global" for uniqueness
+  const key = project
+    ? `${platform.properties.id}-${project.metadata.name}`
+    : `${platform.properties.id}-global`;
 
   React.useEffect(() => {
     onUpdate(key, result);
@@ -56,22 +62,26 @@ export const ModelDeploymentsProvider: React.FC<ModelDeploymentsProviderProps> =
     [modelServingPlatform],
   );
 
-  const projectList = React.useMemo(
-    () => (projects ? (Array.isArray(projects) ? projects : [projects]) : []),
-    [projects],
-  );
+  // *** CHANGED: Determine if we're watching for a single project or global ***
+  // If multiple projects or undefined, treat as global watch (no project param)
+  const singleProject = projects && !Array.isArray(projects) ? projects : undefined;
 
-  const watchList = React.useMemo(
-    () =>
-      platforms.flatMap((platform) =>
-        projectList.map((project) => ({
-          key: `${platform.properties.id}-${project.metadata.name}`,
-          platform,
-          project,
-        })),
-      ),
-    [platforms, projectList],
-  );
+  // *** CHANGED: only create watchers for platforms with either one project or global (no multiple watchers) ***
+  const watchList = React.useMemo(() => {
+    if (singleProject) {
+      return platforms.map((platform) => ({
+        key: `${platform.properties.id}-${singleProject.metadata.name}`,
+        platform,
+        project: singleProject,
+      }));
+    }
+    // Global watch, project undefined means watch all deployments globally per platform
+    return platforms.map((platform) => ({
+      key: `${platform.properties.id}-global`,
+      platform,
+      project: undefined,
+    }));
+  }, [platforms, singleProject]);
 
   const [results, setResults] = React.useState<
     Record<string, [Deployment[] | undefined, boolean, Error | undefined]>
@@ -92,9 +102,12 @@ export const ModelDeploymentsProvider: React.FC<ModelDeploymentsProviderProps> =
 
   const contextValue = React.useMemo<ModelDeploymentsContextType>(() => {
     const allResults = Object.values(results);
+    // Flatten deployments from all watches
     const deployments = allResults.flatMap(([d]) => d || []);
+    // loaded only if all watchers report loaded
     const isLoaded =
       watchList.length === Object.keys(results).length && allResults.every(([, l]) => l);
+    // first error found or undefined
     const error = allResults.find(([, , e]) => e)?.[2];
     return { deployments, loaded: isLoaded, error };
   }, [results, watchList]);