reworking context and usages

Author: katieperry4

frontend/packages/kserve/src/deployments.ts

@@ -18,7 +18,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/extensions.ts

@@ -58,13 +58,13 @@ const extensions: (
       title: 'Model deployments',
       href: '/modelServing',
       section: 'models',
-      path: '/modelServing/*',
+      path: '/modelServing/:namespace?/*',
     },
   },
   {
     type: 'app.route',
     properties: {
-      path: '/modelServing/*',
+      path: '/modelServing/:namespace?/*',
       component: () => import('./src/GlobalModelsPage'),
     },
     flags: {

frontend/packages/modelServing/src/GlobalModelsPage.tsx

@@ -1,22 +1,48 @@
 import React from 'react';
+import { ProjectsContext } from '@odh-dashboard/internal/concepts/projects/ProjectsContext';
+import { useParams } from 'react-router-dom';
 import GlobalDeploymentsView from './components/global/GlobalDeploymentsView';
 import { ModelDeploymentsProvider } from './concepts/ModelDeploymentsContext';
-import { ProjectPlatformContext, ProjectPlatformProvider } from './concepts/ProjectPlatformContext';
+import {
+  ModelServingPlatformContext,
+  ModelServingPlatformProvider,
+} from './concepts/ModelServingPlatformContext';
+import ModelServingProjectSelection from './components/global/ModelServingProjectSelection';
 
-const WithDeploymentsData: React.FC = () => {
-  const { availablePlatforms, allProjects } = React.useContext(ProjectPlatformContext);
+const GlobalModelsPage: React.FC = () => (
+  <ModelServingPlatformProvider>
+    <GlobalModelsPageCoreLoader />
+  </ModelServingPlatformProvider>
+);
 
+const GlobalModelsPageCoreLoader: React.FC = () => {
+  const { availablePlatforms, availablePlatformsLoaded } = React.useContext(
+    ModelServingPlatformContext,
+  );
+  const { namespace } = useParams();
+  const { projects } = React.useContext(ProjectsContext);
+  const selectedProject = namespace
+    ? projects.find((project) => project.metadata.name === namespace)
+    : null;
+  const projectsToShow = selectedProject ? [selectedProject] : projects;
+  const selector = (
+    <ModelServingProjectSelection getRedirectPath={(ns: string) => `/modelServing/${ns}`} />
+  );
+  if (!availablePlatformsLoaded) {
+    return <div>Loading...globalmodelspage</div>;
+  }
+  if (projects.length === 0) {
+    return <div>No projects found</div>;
+  }
   return (
-    <ModelDeploymentsProvider modelServingPlatform={availablePlatforms} projects={allProjects}>
-      <GlobalDeploymentsView />
+    <ModelDeploymentsProvider
+      key={namespace || 'all-projects'}
+      modelServingPlatform={availablePlatforms}
+      projects={projectsToShow}
+    >
+      <GlobalDeploymentsView headerContent={selector} />
     </ModelDeploymentsProvider>
   );
 };
 
-const GlobalModelsPage: React.FC = () => (
-  <ProjectPlatformProvider>
-    <WithDeploymentsData />
-  </ProjectPlatformProvider>
-);
-
 export default GlobalModelsPage;

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

@@ -3,17 +3,15 @@ import ApplicationsPage from '@odh-dashboard/internal/pages/ApplicationsPage';
 import { ProjectObjectType } from '@odh-dashboard/internal/concepts/design/utils';
 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 { ProjectsContext } from '@odh-dashboard/internal/concepts/projects/ProjectsContext';
 import { GlobalNoModelsView } from './GlobalNoModelsView';
 import GlobalDeploymentsTable from './GlobalDeploymentsTable';
 import { ModelDeploymentsContext } from '../../concepts/ModelDeploymentsContext';
-import { isModelServingPlatformExtension } from '../../../extension-points';
 
-const GlobalDeploymentsView: React.FC = () => {
+const GlobalDeploymentsView: React.FC<{
+  headerContent: React.ReactNode;
+}> = ({ headerContent }) => {
   const { deployments, loaded: deploymentsLoaded } = React.useContext(ModelDeploymentsContext);
-  const [platformsLoaded] = useResolvedExtensions(isModelServingPlatformExtension);
   const { preferredProject: currentProject } = React.useContext(ProjectsContext);
   const hasDeployments = React.useMemo(() => {
     if (!deployments) {
@@ -26,7 +24,7 @@ const GlobalDeploymentsView: React.FC = () => {
       (deployment) => deployment.model.metadata.namespace === currentProject.metadata.name,
     );
   }, [deployments, currentProject]);
-  const isLoading = !deploymentsLoaded || !platformsLoaded;
+  const isLoading = !deploymentsLoaded;
 
   return (
     <ApplicationsPage
@@ -37,14 +35,7 @@ const GlobalDeploymentsView: React.FC = () => {
       title={
         <TitleWithIcon title="Model deployments" objectType={ProjectObjectType.deployedModels} />
       }
-      headerContent={
-        <ProjectSelectorNavigator
-          invalidDropdownPlaceholder="All projects"
-          selectAllProjects
-          showTitle
-          getRedirectPath={(namespace: string) => `/modelServing/${namespace}`}
-        />
-      }
+      headerContent={headerContent}
     >
       {isLoading ? (
         <Bullseye>

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import ProjectSelectorNavigator from '@odh-dashboard/internal/concepts/projects/ProjectSelectorNavigator';
+
+type ModelServingProjectSelectionProps = {
+  getRedirectPath: (namespace: string) => string;
+};
+
+const ModelServingProjectSelection: React.FC<ModelServingProjectSelectionProps> = ({
+  getRedirectPath,
+}) => (
+  <ProjectSelectorNavigator
+    getRedirectPath={getRedirectPath}
+    invalidDropdownPlaceholder="All projects"
+    selectAllProjects
+    showTitle
+  />
+);
+
+export default ModelServingProjectSelection;

frontend/packages/modelServing/src/components/projectDetails/ModelsProjectDetailsView.tsx

@@ -12,7 +12,7 @@ import { useProjectServingPlatform } from '../../concepts/useProjectServingPlatf
 import DeploymentsTable from '../deployments/DeploymentsTable';
 import { ModelDeploymentsContext } from '../../concepts/ModelDeploymentsContext';
 import { DeployButton } from '../deploy/DeployButton';
-import { ModelServingPlatformContext } from '../../concepts/ProjectPlatformContext';
+import { ModelServingPlatformContext } from '../../concepts/ModelServingPlatformContext';
 
 const ModelsProjectDetailsView: React.FC<{
   project: ProjectKind;