Adds 'Area' support for TrustyAI and Performance Metrics feature sets (…

…#2088)

frontend/src/api/prometheus/serving.ts

@@ -13,11 +13,10 @@ import {
   RefreshIntervalTitle,
   TimeframeTitle,
 } from '~/pages/modelServing/screens/types';
-import useBiasMetricsEnabled from '~/concepts/explainability/useBiasMetricsEnabled';
 import { ResponsePredicate } from '~/api/prometheus/usePrometheusQueryRange';
 import useRefreshInterval from '~/utilities/useRefreshInterval';
 import { QueryTimeframeStep, RefreshIntervalValue } from '~/pages/modelServing/screens/const';
-import usePerformanceMetricsEnabled from '~/pages/modelServing/screens/metrics/usePerformanceMetricsEnabled';
+import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 import useQueryRangeResourceData from './useQueryRangeResourceData';
 
 export const useModelServingMetrics = (
@@ -36,8 +35,10 @@ export const useModelServingMetrics = (
   refresh: () => void;
 } => {
   const [end, setEnd] = React.useState(lastUpdateTime);
-  const [biasMetricsEnabled] = useBiasMetricsEnabled();
-  const [performanceMetricsEnabled] = usePerformanceMetricsEnabled();
+  const biasMetricsAreaAvailable = useIsAreaAvailable(SupportedArea.BIAS_METRICS).status;
+  const performanceMetricsAreaAvailable = useIsAreaAvailable(
+    SupportedArea.PERFORMANCE_METRICS,
+  ).status;
 
   const defaultResponsePredicate = React.useCallback<ResponsePredicate>(
     (data) => data.result?.[0]?.values || [],
@@ -49,7 +50,7 @@ export const useModelServingMetrics = (
   >((data) => data.result || [], []);
 
   const serverRequestCount = useQueryRangeResourceData(
-    performanceMetricsEnabled && type === PerformanceMetricType.SERVER,
+    performanceMetricsAreaAvailable && type === PerformanceMetricType.SERVER,
     (queries as { [key in ServerMetricType]: string })[ServerMetricType.REQUEST_COUNT],
     end,
     timeframe,
@@ -60,7 +61,7 @@ export const useModelServingMetrics = (
 
   const serverAverageResponseTime =
     useQueryRangeResourceData<PrometheusQueryRangeResponseDataResult>(
-      performanceMetricsEnabled && type === PerformanceMetricType.SERVER,
+      performanceMetricsAreaAvailable && type === PerformanceMetricType.SERVER,
       (queries as { [key in ServerMetricType]: string })[ServerMetricType.AVG_RESPONSE_TIME],
       end,
       timeframe,
@@ -70,7 +71,7 @@ export const useModelServingMetrics = (
     );
 
   const serverCPUUtilization = useQueryRangeResourceData(
-    performanceMetricsEnabled && type === PerformanceMetricType.SERVER,
+    performanceMetricsAreaAvailable && type === PerformanceMetricType.SERVER,
     (queries as { [key in ServerMetricType]: string })[ServerMetricType.CPU_UTILIZATION],
     end,
     timeframe,
@@ -80,7 +81,7 @@ export const useModelServingMetrics = (
   );
 
   const serverMemoryUtilization = useQueryRangeResourceData(
-    performanceMetricsEnabled && type === PerformanceMetricType.SERVER,
+    performanceMetricsAreaAvailable && type === PerformanceMetricType.SERVER,
     (queries as { [key in ServerMetricType]: string })[ServerMetricType.MEMORY_UTILIZATION],
     end,
     timeframe,
@@ -90,7 +91,7 @@ export const useModelServingMetrics = (
   );
 
   const modelRequestSuccessCount = useQueryRangeResourceData(
-    performanceMetricsEnabled && type === PerformanceMetricType.MODEL,
+    performanceMetricsAreaAvailable && type === PerformanceMetricType.MODEL,
     (queries as { [key in ModelMetricType]: string })[ModelMetricType.REQUEST_COUNT_SUCCESS],
     end,
     timeframe,
@@ -100,7 +101,7 @@ export const useModelServingMetrics = (
   );
 
   const modelRequestFailedCount = useQueryRangeResourceData(
-    performanceMetricsEnabled && type === PerformanceMetricType.MODEL,
+    performanceMetricsAreaAvailable && type === PerformanceMetricType.MODEL,
     (queries as { [key in ModelMetricType]: string })[ModelMetricType.REQUEST_COUNT_FAILED],
     end,
     timeframe,
@@ -110,7 +111,7 @@ export const useModelServingMetrics = (
   );
 
   const modelTrustyAISPD = useQueryRangeResourceData(
-    biasMetricsEnabled && type === PerformanceMetricType.MODEL,
+    biasMetricsAreaAvailable && type === PerformanceMetricType.MODEL,
     (queries as { [key in ModelMetricType]: string })[ModelMetricType.TRUSTY_AI_SPD],
     end,
     timeframe,
@@ -121,7 +122,7 @@ export const useModelServingMetrics = (
   );
 
   const modelTrustyAIDIR = useQueryRangeResourceData(
-    biasMetricsEnabled && type === PerformanceMetricType.MODEL,
+    biasMetricsAreaAvailable && type === PerformanceMetricType.MODEL,
     (queries as { [key in ModelMetricType]: string })[ModelMetricType.TRUSTY_AI_DIR],
     end,
     timeframe,

frontend/src/concepts/areas/const.ts

@@ -42,4 +42,18 @@ export const SupportedAreasStateMap: SupportedAreasState = {
     requiredComponents: [StackComponent.WORKBENCHES],
     reliantAreas: [SupportedArea.DS_PROJECTS_VIEW],
   },
+  [SupportedArea.BIAS_METRICS]: {
+    featureFlags: ['disableBiasMetrics'],
+    requiredComponents: [StackComponent.TRUSTY_AI],
+    reliantAreas: [SupportedArea.MODEL_SERVING],
+  },
+  [SupportedArea.PERFORMANCE_METRICS]: {
+    featureFlags: ['disablePerformanceMetrics'],
+    requiredComponents: [StackComponent.MODEL_MESH], // TODO: remove when KServe support is added
+    reliantAreas: [SupportedArea.MODEL_SERVING],
+  },
+  [SupportedArea.TRUSTY_AI]: {
+    requiredComponents: [StackComponent.TRUSTY_AI],
+    reliantAreas: [SupportedArea.BIAS_METRICS],
+  },
 };

frontend/src/concepts/areas/types.ts

@@ -36,6 +36,9 @@ export enum SupportedArea {
   CUSTOM_RUNTIMES = 'custom-serving-runtimes',
   K_SERVE = 'kserve',
   MODEL_MESH = 'model-mesh',
+  BIAS_METRICS = 'bias-metrics',
+  PERFORMANCE_METRICS = 'performance-metrics',
+  TRUSTY_AI = 'trusty-ai',
 }
 
 /** Components deployed by the Operator. Part of the DSC Status. */
@@ -48,6 +51,7 @@ export enum StackComponent {
   DASHBOARD = 'odh-dashboard',
   RAY = 'ray',
   WORKBENCHES = 'workbenches',
+  TRUSTY_AI = 'trustyai',
 }
 
 // TODO: Support extra operators, like the pipelines operator -- maybe as a "external dependency need?"

frontend/src/concepts/explainability/ExplainabilityContext.tsx

@@ -12,7 +12,7 @@ import useFetchState, {
   FetchStateCallbackPromise,
   NotReadyError,
 } from '~/utilities/useFetchState';
-import useBiasMetricsEnabled from './useBiasMetricsEnabled';
+import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 
 type ExplainabilityContextData = {
   refresh: () => Promise<void>;
@@ -127,10 +127,10 @@ const useFetchContextData = (apiState: TrustyAPIState): ExplainabilityContextDat
 };
 
 const useFetchBiasMetricConfigs = (apiState: TrustyAPIState): FetchState<BiasMetricConfig[]> => {
-  const [biasMetricsEnabled] = useBiasMetricsEnabled();
+  const biasMetricsAreaAvailable = useIsAreaAvailable(SupportedArea.BIAS_METRICS).status;
   const callback = React.useCallback<FetchStateCallbackPromise<BiasMetricConfig[]>>(
     (opts) => {
-      if (!biasMetricsEnabled) {
+      if (!biasMetricsAreaAvailable) {
         return Promise.reject(new NotReadyError('Bias metrics is not enabled'));
       }
       if (!apiState.apiAvailable) {
@@ -143,7 +143,7 @@ const useFetchBiasMetricConfigs = (apiState: TrustyAPIState): FetchState<BiasMet
           throw e;
         });
     },
-    [apiState.api, apiState.apiAvailable, biasMetricsEnabled],
+    [apiState.api, apiState.apiAvailable, biasMetricsAreaAvailable],
   );
 
   return useFetchState(callback, [], { initialPromisePurity: true });

frontend/src/concepts/explainability/useBiasMetricsEnabled.ts

@@ -1,16 +1,9 @@
-import { useAppContext } from '~/app/AppContext';
-import { featureFlagEnabled } from '~/utilities/utils';
+import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 
 const useBiasMetricsEnabled = () => {
-  const {
-    dashboardConfig: {
-      spec: {
-        dashboardConfig: { disableBiasMetrics },
-      },
-    },
-  } = useAppContext();
+  const { status, featureFlags } = useIsAreaAvailable(SupportedArea.BIAS_METRICS);
 
-  return [featureFlagEnabled(disableBiasMetrics)];
+  return status && featureFlags?.disableBiasMetrics === 'on';
 };
 
 export default useBiasMetricsEnabled;

frontend/src/concepts/explainability/useDoesTrustyAICRExist.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ExplainabilityContext } from '~/concepts/explainability/ExplainabilityContext';
+import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
+
+const useDoesTrustyAICRExist = () => {
+  const trustyAIAreaAvailable = useIsAreaAvailable(SupportedArea.TRUSTY_AI).status;
+  const { hasCR } = React.useContext(ExplainabilityContext);
+
+  return [trustyAIAreaAvailable && hasCR];
+};
+
+export default useDoesTrustyAICRExist;

frontend/src/concepts/explainability/useTrustyAIAPIRoute.ts

@@ -7,14 +7,14 @@ import useFetchState, {
 import { getTrustyAIAPIRoute } from '~/api/';
 import { RouteKind } from '~/k8sTypes';
 import { FAST_POLL_INTERVAL } from '~/utilities/const';
-import useBiasMetricsEnabled from './useBiasMetricsEnabled';
+import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 
 type State = string | null;
 const useTrustyAIAPIRoute = (hasCR: boolean, namespace: string): FetchState<State> => {
-  const [biasMetricsEnabled] = useBiasMetricsEnabled();
+  const trustyAIAreaAvailable = useIsAreaAvailable(SupportedArea.TRUSTY_AI).status;
   const callback = React.useCallback<FetchStateCallbackPromise<State>>(
     (opts) => {
-      if (!biasMetricsEnabled) {
+      if (!trustyAIAreaAvailable) {
         return Promise.reject(new NotReadyError('Bias metrics is not enabled'));
       }
 
@@ -32,7 +32,7 @@ const useTrustyAIAPIRoute = (hasCR: boolean, namespace: string): FetchState<Stat
           throw e;
         });
     },
-    [hasCR, namespace, biasMetricsEnabled],
+    [hasCR, namespace, trustyAIAreaAvailable],
   );
 
   // TODO: add duplicate functionality to useFetchState.

frontend/src/concepts/explainability/useTrustyAINamespaceCR.ts

@@ -7,7 +7,7 @@ import useFetchState, {
 import { TrustyAIKind } from '~/k8sTypes';
 import { getTrustyAICR } from '~/api';
 import { FAST_POLL_INTERVAL } from '~/utilities/const';
-import useBiasMetricsEnabled from './useBiasMetricsEnabled';
+import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 
 type State = TrustyAIKind | null;
 
@@ -31,10 +31,10 @@ export const taiHasServerTimedOut = (
 };
 
 const useTrustyAINamespaceCR = (namespace: string): FetchState<State> => {
-  const [biasMetricsEnabled] = useBiasMetricsEnabled();
+  const trustyAIAreaAvailable = useIsAreaAvailable(SupportedArea.TRUSTY_AI).status;
   const callback = React.useCallback<FetchStateCallbackPromise<State>>(
     (opts) => {
-      if (!biasMetricsEnabled) {
+      if (!trustyAIAreaAvailable) {
         return Promise.reject(new NotReadyError('Bias metrics is not enabled'));
       }
 
@@ -48,7 +48,7 @@ const useTrustyAINamespaceCR = (namespace: string): FetchState<State> => {
           throw e;
         });
     },
-    [namespace, biasMetricsEnabled],
+    [namespace, trustyAIAreaAvailable],
   );
 
   const [isStarting, setIsStarting] = React.useState(false);

frontend/src/pages/modelServing/ModelServingRoutes.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Navigate, Route } from 'react-router-dom';
 import ProjectsRoutes from '~/concepts/projects/ProjectsRoutes';
-import useBiasMetricsEnabled from '~/concepts/explainability/useBiasMetricsEnabled';
 import ModelServingExplainabilityWrapper from '~/pages/modelServing/screens/metrics/ModelServingExplainabilityWrapper';
+import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 import BiasConfigurationBreadcrumbPage from './screens/metrics/BiasConfigurationBreadcrumbPage';
 import GlobalModelMetricsPage from './screens/metrics/GlobalModelMetricsPage';
 import ModelServingContextProvider from './ModelServingContext';
@@ -12,7 +12,7 @@ import useModelMetricsEnabled from './useModelMetricsEnabled';
 
 const ModelServingRoutes: React.FC = () => {
   const [modelMetricsEnabled] = useModelMetricsEnabled();
-  const [biasMetricsEnabled] = useBiasMetricsEnabled();
+  const biasMetricsAreaAvailable = useIsAreaAvailable(SupportedArea.BIAS_METRICS).status;
 
   //TODO: Split route to project and mount provider here. This will allow you to load data when model switching is later implemented.
   return (
@@ -24,7 +24,7 @@ const ModelServingRoutes: React.FC = () => {
             <Route index element={<Navigate to=".." />} />
             <Route path=":inferenceService" element={<GlobalModelMetricsWrapper />}>
               <Route path=":tab?" element={<GlobalModelMetricsPage />} />
-              {biasMetricsEnabled && (
+              {biasMetricsAreaAvailable && (
                 <Route path="configure" element={<BiasConfigurationBreadcrumbPage />} />
               )}
             </Route>

frontend/src/pages/modelServing/screens/metrics/MetricsPageTabs.tsx

@@ -4,20 +4,22 @@ import { Tab, TabAction, Tabs, TabTitleText } from '@patternfly/react-core';
 import { MetricsTabKeys } from '~/pages/modelServing/screens/metrics/types';
 import { useExplainabilityModelData } from '~/concepts/explainability/useExplainabilityModelData';
 import NotFound from '~/pages/NotFound';
-import useBiasMetricsInstalled from '~/concepts/explainability/useBiasMetricsInstalled';
+import useDoesTrustyAICRExist from '~/concepts/explainability/useDoesTrustyAICRExist';
+import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 import PerformanceTab from './PerformanceTab';
 import BiasTab from './BiasTab';
 import BiasConfigurationAlertPopover from './BiasConfigurationAlertPopover';
 import useMetricsPageEnabledTabs from './useMetricsPageEnabledTabs';
-import usePerformanceMetricsEnabled from './usePerformanceMetricsEnabled';
 
 import './MetricsPageTabs.scss';
 
 const MetricsPageTabs: React.FC = () => {
   const enabledTabs = useMetricsPageEnabledTabs();
   const { biasMetricConfigs, loaded } = useExplainabilityModelData();
-  const [biasMetricsInstalled] = useBiasMetricsInstalled();
-  const [performanceMetricsEnabled] = usePerformanceMetricsEnabled();
+  const [biasMetricsInstalled] = useDoesTrustyAICRExist();
+  const performanceMetricsAreaAvailable = useIsAreaAvailable(
+    SupportedArea.PERFORMANCE_METRICS,
+  ).status;
   const { tab } = useParams<{ tab: MetricsTabKeys }>();
   const navigate = useNavigate();
 
@@ -46,7 +48,7 @@ const MetricsPageTabs: React.FC = () => {
       role="region"
       className="odh-tabs-fix"
     >
-      {performanceMetricsEnabled && (
+      {performanceMetricsAreaAvailable && (
         <Tab
           eventKey={MetricsTabKeys.PERFORMANCE}
           title={<TabTitleText>Endpoint performance</TabTitleText>}

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

@@ -1,15 +1,16 @@
-import useBiasMetricsEnabled from '~/concepts/explainability/useBiasMetricsEnabled';
+import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 import { MetricsTabKeys } from './types';
-import usePerformanceMetricsEnabled from './usePerformanceMetricsEnabled';
 
 const useMetricsPageEnabledTabs = () => {
   const enabledTabs: MetricsTabKeys[] = [];
-  const [biasMetricsEnabled] = useBiasMetricsEnabled();
-  const [performanceMetricsEnabled] = usePerformanceMetricsEnabled();
-  if (performanceMetricsEnabled) {
+  const biasMetricsAreaAvailable = useIsAreaAvailable(SupportedArea.BIAS_METRICS).status;
+  const performanceMetricsAreaAvailable = useIsAreaAvailable(
+    SupportedArea.PERFORMANCE_METRICS,
+  ).status;
+  if (performanceMetricsAreaAvailable) {
     enabledTabs.push(MetricsTabKeys.PERFORMANCE);
   }
-  if (biasMetricsEnabled) {
+  if (biasMetricsAreaAvailable) {
     enabledTabs.push(MetricsTabKeys.BIAS);
   }
   return enabledTabs;