Serving refactor global models page backport (opendatahub-io#4531)

* Add global models page backports

* Remove unused backport file

Author: emilys314

frontend/packages/model-serving-backport/extensions.ts

@@ -42,6 +42,8 @@ const extensions: ModelServingPlatformExtension[] = [
           import(
             '@odh-dashboard/internal/pages/projects/screens/detail/overview/serverModels/ServeModelsSection'
           ),
+        GlobalModelsPage: () =>
+          import('@odh-dashboard/internal/pages/modelServing/ModelServingRoutes'),
       },
     },
     flags: {
@@ -87,6 +89,8 @@ const extensions: ModelServingPlatformExtension[] = [
           import(
             '@odh-dashboard/internal/pages/projects/screens/detail/overview/serverModels/ServeModelsSection'
           ),
+        GlobalModelsPage: () =>
+          import('@odh-dashboard/internal/pages/modelServing/ModelServingRoutes'),
       },
     },
     flags: {

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

@@ -94,6 +94,7 @@ export type ModelServingPlatformExtension<D extends Deployment = Deployment> = E
     backport?: {
       ModelsProjectDetailsTab?: ComponentCodeRef;
       ServeModelsSection?: ComponentCodeRef;
+      GlobalModelsPage?: ComponentCodeRef;
     };
   }
 >;

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { ProjectsContext } from '@odh-dashboard/internal/concepts/projects/ProjectsContext';
-import { useExtensions } from '@odh-dashboard/plugin-core';
+import { LazyCodeRefComponent, useExtensions } from '@odh-dashboard/plugin-core';
 import { Bullseye, Spinner } from '@patternfly/react-core';
 import { useNavigate, useParams } from 'react-router-dom';
 import GlobalDeploymentsView from './GlobalDeploymentsView';
 import { ModelDeploymentsProvider } from '../../concepts/ModelDeploymentsContext';
+import { getMultiProjectServingPlatforms } from '../../concepts/useProjectServingPlatform';
 import { isModelServingPlatformExtension } from '../../../extension-points';
 
 const GlobalModelsPage: React.FC = () => {
@@ -31,6 +32,25 @@ const GlobalModelsPage: React.FC = () => {
     }
   }, [namespace, preferredProject, navigate]);
 
+  const BackportPageComponent = React.useMemo(() => {
+    const platforms = getMultiProjectServingPlatforms(projectsToShow, availablePlatforms);
+    return platforms.find((p) => p.properties.backport?.GlobalModelsPage)?.properties.backport
+      ?.GlobalModelsPage;
+  }, [projectsToShow, availablePlatforms]);
+
+  if (BackportPageComponent) {
+    return (
+      <LazyCodeRefComponent
+        component={BackportPageComponent}
+        fallback={
+          <Bullseye>
+            <Spinner />
+          </Bullseye>
+        }
+      />
+    );
+  }
+
   if (!projectsLoaded) {
     return (
       <Bullseye>

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

@@ -39,6 +39,20 @@ export const getProjectServingPlatform = (
   return sortedEnabledPlatforms[0] ?? null;
 };
 
+export const getMultiProjectServingPlatforms = (
+  projects: ProjectKind[],
+  platforms: ModelServingPlatform[],
+): ModelServingPlatform[] => {
+  const result = [];
+  for (const project of projects) {
+    const platform = getProjectServingPlatform(project, platforms);
+    if (platform) {
+      result.push(platform);
+    }
+  }
+  return result;
+};
+
 export const useProjectServingPlatform = (
   project: ProjectKind,
   platforms?: ModelServingPlatform[],