Enable model serving metrics upstream (#957)

* Enable modelserving upstream with parametrized option - Backend

* Enable modelserving upstream - Frontend

* Refactor using a hook

* Refactor the hook to return a boolean

Author: lucferbux

backend/src/types.ts

@@ -18,6 +18,7 @@ export type DashboardConfig = K8sResourceCommon & {
       disableUserManagement: boolean;
       disableProjects: boolean;
       disableModelServing: boolean;
+      modelMetricsNamespace: string;
     };
     groupsConfig?: {
       adminGroups: string;

backend/src/utils/constants.ts

@@ -46,6 +46,7 @@ export const blankDashboardCR: DashboardConfig = {
       disableUserManagement: false,
       disableProjects: false,
       disableModelServing: false,
+      modelMetricsNamespace: '',
     },
     notebookController: {
       enabled: true,

backend/src/utils/prometheusUtils.ts

@@ -8,6 +8,9 @@ import {
 import https from 'https';
 import { getDirectCallOptions } from './directCallUtils';
 import { DEV_MODE } from './constants';
+import { getNamespaces } from './notebookUtils';
+import { getDashboardConfig } from './resourceUtils';
+import { createCustomError } from './requestUtils';
 
 const callPrometheus = async <T>(
   fastify: KubeFastifyInstance,
@@ -108,11 +111,34 @@ export const callPrometheusServing = (
   fastify: KubeFastifyInstance,
   request: OauthFastifyRequest,
   query: string,
-): Promise<{ code: number; response: PrometheusQueryRangeResponse }> =>
-  callPrometheus(
-    fastify,
-    request,
-    query,
-    generatePrometheusHostURL(fastify, 'rhods-model-monitoring', 'redhat-ods-monitoring', '443'),
-    QueryType.QUERY_RANGE,
+): Promise<{ code: number; response: PrometheusQueryRangeResponse | undefined }> => {
+  const { dashboardNamespace } = getNamespaces(fastify);
+
+  const modelMetricsNamespace = getDashboardConfig().spec.dashboardConfig.modelMetricsNamespace;
+
+  if (dashboardNamespace !== 'redhat-ods-applications' && modelMetricsNamespace) {
+    return callPrometheus(
+      fastify,
+      request,
+      query,
+      generatePrometheusHostURL(fastify, 'odh-model-monitoring', modelMetricsNamespace, '443'),
+      QueryType.QUERY_RANGE,
+    );
+  }
+
+  if (dashboardNamespace === 'redhat-ods-applications' && !modelMetricsNamespace) {
+    return callPrometheus(
+      fastify,
+      request,
+      query,
+      generatePrometheusHostURL(fastify, 'rhods-model-monitoring', 'redhat-ods-monitoring', '443'),
+      QueryType.QUERY_RANGE,
+    );
+  }
+
+  throw createCustomError(
+    'Service Unavailable',
+    'Service Prometheus is down or misconfigured',
+    503,
   );
+};

frontend/src/pages/modelServing/ModelServingRoutes.tsx

@@ -3,15 +3,20 @@ import { Navigate, Routes, Route } from 'react-router-dom';
 import ModelServingContextProvider from './ModelServingContext';
 import ModelServingMetricsWrapper from './screens/metrics/ModelServingMetricsWrapper';
 import ModelServingGlobal from './screens/global/ModelServingGlobal';
+import useModelMetricsEnabled from './useModelMetricsEnabled';
 
 const ModelServingRoutes: React.FC = () => {
+  const [modelMetricsEnabled] = useModelMetricsEnabled();
+
   return (
     <Routes>
       <Route path="/" element={<ModelServingContextProvider />}>
         <Route index element={<ModelServingGlobal />} />
         <Route
           path="/metrics/:project/:inferenceService"
-          element={<ModelServingMetricsWrapper />}
+          element={
+            modelMetricsEnabled ? <ModelServingMetricsWrapper /> : <Navigate replace to="/" />
+          }
         />
         <Route path="*" element={<Navigate to="." />} />
       </Route>

frontend/src/pages/modelServing/screens/global/InferenceServiceTableRow.tsx

@@ -8,6 +8,7 @@ import InferenceServiceEndpoint from './InferenceServiceEndpoint';
 import InferenceServiceProject from './InferenceServiceProject';
 import InferenceServiceStatus from './InferenceServiceStatus';
 import { Link } from 'react-router-dom';
+import useModelMetricsEnabled from 'pages/modelServing/useModelMetricsEnabled';
 
 type InferenceServiceTableRowProps = {
   obj: InferenceServiceKind;
@@ -24,20 +25,26 @@ const InferenceServiceTableRow: React.FC<InferenceServiceTableRowProps> = ({
   onEditInferenceService,
   isGlobal,
 }) => {
+  const [modelMetricsEnabled] = useModelMetricsEnabled();
+
   return (
     <Tbody>
       <Tr>
         <Td dataLabel="Name">
           <ResourceNameTooltip resource={inferenceService}>
-            <Link
-              to={
-                isGlobal
-                  ? `/modelServing/metrics/${inferenceService.metadata.namespace}/${inferenceService.metadata.name}`
-                  : `/projects/${inferenceService.metadata.namespace}/metrics/model/${inferenceService.metadata.name}`
-              }
-            >
-              {getInferenceServiceDisplayName(inferenceService)}
-            </Link>
+            {modelMetricsEnabled ? (
+              <Link
+                to={
+                  isGlobal
+                    ? `/modelServing/metrics/${inferenceService.metadata.namespace}/${inferenceService.metadata.name}`
+                    : `/projects/${inferenceService.metadata.namespace}/metrics/model/${inferenceService.metadata.name}`
+                }
+              >
+                {getInferenceServiceDisplayName(inferenceService)}
+              </Link>
+            ) : (
+              getInferenceServiceDisplayName(inferenceService)
+            )}
           </ResourceNameTooltip>
         </Td>
         {isGlobal && (

frontend/src/pages/modelServing/screens/metrics/utils.ts

@@ -3,6 +3,18 @@ import { SelectOptionObject } from '@patternfly/react-core';
 import { TimeframeTitle } from '../types';
 import { InferenceServiceKind } from '../../../../k8sTypes';
 import { ModelServingMetricType } from './ModelServingMetricsContext';
+import { DashboardConfig } from 'types';
+
+export const isModelMetricsEnabled = (
+  dashboardNamespace: string,
+  dashboardConfig: DashboardConfig,
+): boolean => {
+  if (dashboardNamespace === 'redhat-ods-applications') {
+    return true;
+  } else {
+    return dashboardConfig.spec.dashboardConfig.modelMetricsNamespace !== '';
+  }
+};
 
 export const getInferenceServiceMetricsQueries = (
   inferenceService: InferenceServiceKind,

frontend/src/pages/modelServing/useModelMetricsEnabled.ts

@@ -0,0 +1,14 @@
+import { useAppContext } from 'app/AppContext';
+import { useDashboardNamespace } from 'redux/selectors';
+import { isModelMetricsEnabled } from './screens/metrics/utils';
+
+const useModelMetricsEnabled = (): [modelMetricsEnabled: boolean] => {
+  const { dashboardNamespace } = useDashboardNamespace();
+  const { dashboardConfig } = useAppContext();
+
+  const checkModelMetricsEnabled = () => isModelMetricsEnabled(dashboardNamespace, dashboardConfig);
+
+  return [checkModelMetricsEnabled()];
+};
+
+export default useModelMetricsEnabled;

frontend/src/pages/projects/ProjectViewRoutes.tsx

@@ -6,16 +6,24 @@ import ProjectDetailsContextProvider from './ProjectDetailsContext';
 import SpawnerPage from './screens/spawner/SpawnerPage';
 import EditSpawnerPage from './screens/spawner/EditSpawnerPage';
 import DetailsPageMetricsWrapper from '../modelServing/screens/projects/DetailsPageMetricsWrapper';
+import useModelMetricsEnabled from 'pages/modelServing/useModelMetricsEnabled';
 
 const ProjectViewRoutes: React.FC = () => {
+  const [modelMetricsEnabled] = useModelMetricsEnabled();
+
   return (
     <Routes>
       <Route path="/" element={<ProjectView />} />
       <Route path="/:namespace/*" element={<ProjectDetailsContextProvider />}>
         <Route index element={<ProjectDetails />} />
         <Route path="spawner" element={<SpawnerPage />} />
         <Route path="spawner/:notebookName" element={<EditSpawnerPage />} />
-        <Route path="metrics/model/:inferenceService" element={<DetailsPageMetricsWrapper />} />
+        <Route
+          path="metrics/model/:inferenceService"
+          element={
+            modelMetricsEnabled ? <DetailsPageMetricsWrapper /> : <Navigate replace to="/" />
+          }
+        />
         <Route path="*" element={<Navigate to="." />} />
       </Route>
       <Route path="*" element={<Navigate to="." />} />

frontend/src/types.ts

@@ -71,6 +71,7 @@ export type DashboardCommonConfig = {
   disableUserManagement: boolean;
   disableProjects: boolean;
   disableModelServing: boolean;
+  modelMetricsNamespace: string;
 };
 
 export type NotebookControllerUserState = {

manifests/crd/odhdashboardconfigs.opendatahub.io.crd.yaml

@@ -45,6 +45,8 @@ spec:
                       type: boolean
                     disableModelServing:
                       type: boolean
+                    modelMetricsNamespace:
+                      type: string
                 groupsConfig:
                   type: object
                   required: