Fix types on f/mserving-metrics branch

frontend/src/api/prometheus/serving.ts

@@ -22,7 +22,7 @@ import useQueryRangeResourceData from './useQueryRangeResourceData';
 
 export const useModelServingMetrics = (
   type: PerformanceMetricType,
-  queries: Record<ServerMetricType, string> | Record<ModelMetricType, string>,
+  queries: { [key in ModelMetricType]: string } | { [key in ServerMetricType]: string },
   timeframe: TimeframeTitle,
   lastUpdateTime: number,
   setLastUpdateTime: (time: number) => void,
@@ -49,7 +49,7 @@ export const useModelServingMetrics = (
 
   const serverRequestCount = useQueryRangeResourceData(
     performanceMetricsEnabled && type === PerformanceMetricType.SERVER,
-    queries[ServerMetricType.REQUEST_COUNT],
+    (queries as { [key in ServerMetricType]: string })[ServerMetricType.REQUEST_COUNT],
     end,
     timeframe,
     QueryTimeframeStep[ServerMetricType.REQUEST_COUNT],
@@ -59,7 +59,7 @@ export const useModelServingMetrics = (
   const serverAverageResponseTime =
     useQueryRangeResourceData<PrometheusQueryRangeResponseDataResult>(
       performanceMetricsEnabled && type === PerformanceMetricType.SERVER,
-      queries[ServerMetricType.AVG_RESPONSE_TIME],
+      (queries as { [key in ServerMetricType]: string })[ServerMetricType.AVG_RESPONSE_TIME],
       end,
       timeframe,
       QueryTimeframeStep[ServerMetricType.AVG_RESPONSE_TIME],
@@ -68,7 +68,7 @@ export const useModelServingMetrics = (
 
   const serverCPUUtilization = useQueryRangeResourceData(
     performanceMetricsEnabled && type === PerformanceMetricType.SERVER,
-    queries[ServerMetricType.CPU_UTILIZATION],
+    (queries as { [key in ServerMetricType]: string })[ServerMetricType.CPU_UTILIZATION],
     end,
     timeframe,
     QueryTimeframeStep[ServerMetricType.CPU_UTILIZATION],
@@ -77,7 +77,7 @@ export const useModelServingMetrics = (
 
   const serverMemoryUtilization = useQueryRangeResourceData(
     performanceMetricsEnabled && type === PerformanceMetricType.SERVER,
-    queries[ServerMetricType.MEMORY_UTILIZATION],
+    (queries as { [key in ServerMetricType]: string })[ServerMetricType.MEMORY_UTILIZATION],
     end,
     timeframe,
     QueryTimeframeStep[ServerMetricType.MEMORY_UTILIZATION],
@@ -86,7 +86,7 @@ export const useModelServingMetrics = (
 
   const modelRequestSuccessCount = useQueryRangeResourceData(
     performanceMetricsEnabled && type === PerformanceMetricType.MODEL,
-    queries[ModelMetricType.REQUEST_COUNT_SUCCESS],
+    (queries as { [key in ModelMetricType]: string })[ModelMetricType.REQUEST_COUNT_SUCCESS],
     end,
     timeframe,
     QueryTimeframeStep[ModelMetricType.REQUEST_COUNT_SUCCESS],
@@ -95,7 +95,7 @@ export const useModelServingMetrics = (
 
   const modelRequestFailedCount = useQueryRangeResourceData(
     performanceMetricsEnabled && type === PerformanceMetricType.MODEL,
-    queries[ModelMetricType.REQUEST_COUNT_FAILED],
+    (queries as { [key in ModelMetricType]: string })[ModelMetricType.REQUEST_COUNT_FAILED],
     end,
     timeframe,
     QueryTimeframeStep[ModelMetricType.REQUEST_COUNT_FAILED],
@@ -104,7 +104,7 @@ export const useModelServingMetrics = (
 
   const modelTrustyAISPD = useQueryRangeResourceData(
     biasMetricsEnabled && type === PerformanceMetricType.MODEL,
-    queries[ModelMetricType.TRUSTY_AI_SPD],
+    (queries as { [key in ModelMetricType]: string })[ModelMetricType.TRUSTY_AI_SPD],
     end,
     timeframe,
     QueryTimeframeStep[ModelMetricType.TRUSTY_AI_SPD],
@@ -114,7 +114,7 @@ export const useModelServingMetrics = (
 
   const modelTrustyAIDIR = useQueryRangeResourceData(
     biasMetricsEnabled && type === PerformanceMetricType.MODEL,
-    queries[ModelMetricType.TRUSTY_AI_DIR],
+    (queries as { [key in ModelMetricType]: string })[ModelMetricType.TRUSTY_AI_DIR],
     end,
     timeframe,
     QueryTimeframeStep[ModelMetricType.TRUSTY_AI_DIR],

frontend/src/concepts/explainability/useTrustyAIAPIRoute.ts

@@ -44,7 +44,7 @@ const useTrustyAIAPIRoute = (hasCR: boolean, namespace: string): FetchState<Stat
 
   const hasData = !!data;
   React.useEffect(() => {
-    let interval;
+    let interval: ReturnType<typeof setTimeout>;
     if (!hasData) {
       interval = setInterval(refresh, FAST_POLL_INTERVAL);
     }

frontend/src/concepts/explainability/useTrustyAIAPIState.ts

@@ -19,7 +19,7 @@ const useTrustyAIAPIState = (
   hostPath: string | null,
 ): [apiState: TrustyAPIState, refreshAPIState: () => void] => {
   const createAPI = React.useCallback(
-    (path) => ({
+    (path: string) => ({
       createDirRequest: createDirRequest(path),
       createSpdRequest: createSpdRequest(path),
       deleteDirRequest: deleteDirRequest(path),

frontend/src/concepts/pipelines/context/usePipelineAPIState.ts

@@ -30,7 +30,7 @@ const usePipelineAPIState = (
   hostPath: string | null,
 ): [apiState: PipelineAPIState, refreshAPIState: () => void] => {
   const createAPI = React.useCallback(
-    (path) => ({
+    (path: string) => ({
       createExperiment: createExperiment(path),
       createPipelineRun: createPipelineRun(path),
       createPipelineRunJob: createPipelineRunJob(path),

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

@@ -52,14 +52,7 @@ const BiasConfigurationTable: React.FC<BiasConfigurationTableProps> = ({
   // TODO: decide what we want to search
   // Or should we reuse the complex filter search
   const searchTypes = React.useMemo(
-    () =>
-      Object.keys(SearchType).filter(
-        (key) =>
-          SearchType[key] === SearchType.NAME ||
-          SearchType[key] === SearchType.METRIC ||
-          SearchType[key] === SearchType.PROTECTED_ATTRIBUTE ||
-          SearchType[key] === SearchType.OUTPUT,
-      ),
+    () => [SearchType.NAME, SearchType.METRIC, SearchType.PROTECTED_ATTRIBUTE, SearchType.OUTPUT],
     [],
   );
   return (

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Bullseye, PageSectionVariants, Spinner } from '@patternfly/react-core';
+import { AxiosError } from 'axios';
 import UnauthorizedError from '~/pages/UnauthorizedError';
 import {
   ModelMetricType,
@@ -22,12 +23,12 @@ const EnsureMetricsAvailable: React.FC<EnsureMetricsAvailableProps> = ({
   accessDomain = DEFAULT_ACCESS_DOMAIN,
 }) => {
   const { data } = React.useContext(ModelServingMetricsContext);
-  let error;
+  let error: AxiosError | undefined;
   let readyCount = 0;
 
   metrics.forEach((metric) => {
     if (data[metric].error) {
-      error = data[metric].error;
+      error = data[metric].error as AxiosError;
     }
     data[metric].loaded && readyCount++;
   });

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

@@ -151,7 +151,7 @@ const MetricsChart: React.FC<MetricsChartProps> = ({
     containerComponent = (
       <CursorVoronoiContainer
         cursorDimension="x"
-        labels={({ datum }) => (tooltipDisabled ? 'No data' : datum.y)}
+        labels={({ datum }: { datum: { y: number } }) => (tooltipDisabled ? 'No data' : datum.y)}
         labelComponent={<ChartLegendTooltip legendData={legendData} title={tooltipTitle} />}
         onCursorChange={handleCursorChange}
         mouseFollowTooltips

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

@@ -5,6 +5,7 @@ import {
   ModelMetricType,
   ModelServingMetricsContext,
 } from '~/pages/modelServing/screens/metrics/ModelServingMetricsContext';
+import { ContextResourceData, PrometheusQueryRangeResultValue } from '~/types';
 import { per100 } from './utils';
 
 const ModelGraphs: React.FC = () => {
@@ -17,12 +18,16 @@ const ModelGraphs: React.FC = () => {
           metrics={[
             {
               name: 'Success http requests (x100)',
-              metric: data[ModelMetricType.REQUEST_COUNT_SUCCESS],
+              metric: data[
+                ModelMetricType.REQUEST_COUNT_SUCCESS
+              ] as ContextResourceData<PrometheusQueryRangeResultValue>,
               translatePoint: per100,
             },
             {
               name: 'Failed http requests (x100)',
-              metric: data[ModelMetricType.REQUEST_COUNT_FAILED],
+              metric: data[
+                ModelMetricType.REQUEST_COUNT_FAILED
+              ] as ContextResourceData<PrometheusQueryRangeResultValue>,
               translatePoint: per100,
             },
           ]}

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

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { useModelServingMetrics } from '~/api';
-import { ContextResourceData, PrometheusQueryRangeResultValue } from '~/types';
+import {
+  ContextResourceData,
+  PrometheusQueryRangeResponseDataResult,
+  PrometheusQueryRangeResultValue,
+} from '~/types';
 import { DEFAULT_CONTEXT_DATA } from '~/utilities/const';
 import {
   PerformanceMetricType,
@@ -25,8 +29,8 @@ export enum ModelMetricType {
 
 type ModelServingMetricsContext = {
   data: Record<
-    ModelMetricType & ServerMetricType,
-    ContextResourceData<PrometheusQueryRangeResultValue>
+    ModelMetricType | ServerMetricType,
+    ContextResourceData<PrometheusQueryRangeResultValue | PrometheusQueryRangeResponseDataResult>
   >;
   currentTimeframe: TimeframeTitle;
   setCurrentTimeframe: (timeframe: TimeframeTitle) => void;
@@ -60,7 +64,7 @@ export const ModelServingMetricsContext = React.createContext<ModelServingMetric
 type ModelServingMetricsProviderProps = {
   children: React.ReactNode;
   /** Prometheus query strings computed and ready to use */
-  queries: Record<ServerMetricType, string> | Record<ModelMetricType, string>;
+  queries: { [key in ModelMetricType]: string } | { [key in ServerMetricType]: string };
   type: PerformanceMetricType;
 };
 

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

@@ -10,6 +10,11 @@ import {
   per100,
   toPercentage,
 } from '~/pages/modelServing/screens/metrics/utils';
+import {
+  ContextResourceData,
+  PrometheusQueryRangeResponseDataResult,
+  PrometheusQueryRangeResultValue,
+} from '~/types';
 import { NamedMetricChartLine } from './types';
 
 const ServerGraphs: React.FC = () => {
@@ -19,16 +24,25 @@ const ServerGraphs: React.FC = () => {
     <Stack hasGutter>
       <StackItem>
         <MetricsChart
-          metrics={{ metric: data[ServerMetricType.REQUEST_COUNT], translatePoint: per100 }}
+          metrics={{
+            metric: data[
+              ServerMetricType.REQUEST_COUNT
+            ] as ContextResourceData<PrometheusQueryRangeResultValue>,
+            translatePoint: per100,
+          }}
           color="blue"
           title="Http requests (x100)"
         />
       </StackItem>
       <StackItem>
         <MetricsChart
-          metrics={data[ServerMetricType.AVG_RESPONSE_TIME].data.map(
+          metrics={(
+            data[
+              ServerMetricType.AVG_RESPONSE_TIME
+            ] as ContextResourceData<PrometheusQueryRangeResponseDataResult>
+          ).data.map(
             (line): NamedMetricChartLine => ({
-              name: line.metric.pod,
+              name: line.metric.pod || '',
               metric: {
                 ...data[ServerMetricType.AVG_RESPONSE_TIME],
                 data: convertPrometheusNaNToZero(line.values),
@@ -42,7 +56,12 @@ const ServerGraphs: React.FC = () => {
       </StackItem>
       <StackItem>
         <MetricsChart
-          metrics={{ metric: data[ServerMetricType.CPU_UTILIZATION], translatePoint: toPercentage }}
+          metrics={{
+            metric: data[
+              ServerMetricType.CPU_UTILIZATION
+            ] as ContextResourceData<PrometheusQueryRangeResultValue>,
+            translatePoint: toPercentage,
+          }}
           color="purple"
           title="CPU utilization %"
           domain={() => ({
@@ -53,7 +72,9 @@ const ServerGraphs: React.FC = () => {
       <StackItem>
         <MetricsChart
           metrics={{
-            metric: data[ServerMetricType.MEMORY_UTILIZATION],
+            metric: data[
+              ServerMetricType.MEMORY_UTILIZATION
+            ] as ContextResourceData<PrometheusQueryRangeResultValue>,
             translatePoint: toPercentage,
           }}
           color="orange"

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

@@ -4,6 +4,7 @@ import { ModelServingMetricsContext } from '~/pages/modelServing/screens/metrics
 import { BiasMetricConfig } from '~/concepts/explainability/types';
 import { createChartThresholds } from '~/pages/modelServing/screens/metrics/utils';
 import { BIAS_CHART_CONFIGS } from '~/pages/modelServing/screens/metrics/const';
+import { PrometheusQueryRangeResponseDataResult } from '~/types';
 
 export type TrustyChartProps = {
   biasMetricConfig: BiasMetricConfig;
@@ -18,9 +19,9 @@ const TrustyChart: React.FC<TrustyChartProps> = ({ biasMetricConfig }) => {
     BIAS_CHART_CONFIGS[metricType];
 
   const metric = React.useMemo(() => {
-    const metricData = data[modelMetricKey].data;
+    const metricData = data[modelMetricKey].data as PrometheusQueryRangeResponseDataResult[];
 
-    const values = metricData.find((x) => x.metric.request === id)?.values;
+    const values = metricData.find((x) => x.metric.request === id)?.values || [];
 
     return {
       ...data[modelMetricKey],

frontend/src/pages/modelServing/screens/metrics/biasConfigurationModal/MetricTypeField.tsx

@@ -33,8 +33,12 @@ const MetricTypeField: React.FC<MetricTypeFieldProps> = ({ fieldId, value, onCha
         menuAppendTo="parent"
       >
         {Object.keys(BiasMetricType).map((type) => (
-          <SelectOption key={type} value={type} description={METRIC_TYPE_DESCRIPTION[type]}>
-            {METRIC_TYPE_DISPLAY_NAME[type]}
+          <SelectOption
+            key={type}
+            value={type}
+            description={METRIC_TYPE_DESCRIPTION[type as keyof typeof BiasMetricType]}
+          >
+            {METRIC_TYPE_DISPLAY_NAME[type as keyof typeof BiasMetricType]}
           </SelectOption>
         ))}
       </Select>

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

@@ -37,7 +37,7 @@ export const isModelMetricsEnabled = (
 export const getServerMetricsQueries = (
   server: ServingRuntimeKind,
   currentTimeframe: TimeframeTitle,
-): Record<ServerMetricType, string> => {
+): { [key in ServerMetricType]: string } => {
   const namespace = server.metadata.namespace;
   const name = server.metadata.name;
   const responseTimeStep = QueryTimeframeStep[ServerMetricType.AVG_RESPONSE_TIME][currentTimeframe];
@@ -54,7 +54,7 @@ export const getServerMetricsQueries = (
 export const getModelMetricsQueries = (
   model: InferenceServiceKind,
   currentTimeframe: TimeframeTitle,
-): Record<ModelMetricType, string> => {
+): { [key in ModelMetricType]: string } => {
   const namespace = model.metadata.namespace;
   const name = model.metadata.name;
 
@@ -332,5 +332,7 @@ export const convertConfigurationRequestType = (
 export const getThresholdDefaultDelta = (metricType?: BiasMetricType) =>
   metricType && BIAS_CHART_CONFIGS[metricType].defaultDelta;
 
-export const convertPrometheusNaNToZero = (data: PrometheusQueryRangeResultValue[]) =>
+export const convertPrometheusNaNToZero = (
+  data: PrometheusQueryRangeResultValue[],
+): PrometheusQueryRangeResultValue[] =>
   data.map((value) => [value[0], isNaN(Number(value[1])) ? '0' : value[1]]);

frontend/src/pages/modelServing/screens/projects/ServingRuntimeTableRow.tsx

@@ -47,10 +47,6 @@ const ServingRuntimeTableRow: React.FC<ServingRuntimeTableRowProps> = ({
 
   const [performanceMetricsEnabled] = usePerformanceMetricsEnabled();
 
-  const onToggle = (_, __, colIndex: ServingRuntimeTableTabs) => {
-    setExpandedColumn(expandedColumn === colIndex ? undefined : colIndex);
-  };
-
   const compoundExpandParams = (
     col: ServingRuntimeTableTabs,
     isDisabled: boolean,

frontend/src/pages/projects/screens/projects/ProjectListView.tsx

@@ -46,11 +46,9 @@ const ProjectListView: React.FC<ProjectListViewProps> = ({ allowCreate }) => {
     setSearch('');
   };
 
-  const searchTypes = Object.keys(SearchType).filter(
-    (key) =>
-      SearchType[key] === SearchType.NAME ||
-      SearchType[key] === SearchType.PROJECT ||
-      SearchType[key] === SearchType.USER,
+  const searchTypes = React.useMemo(
+    () => [SearchType.NAME, SearchType.PROJECT, SearchType.USER],
+    [],
   );
 
   const [deleteData, setDeleteData] = React.useState<ProjectKind | undefined>();

frontend/src/types.ts

@@ -2,6 +2,7 @@
  * Common types, should be kept up to date with backend types
  */
 
+import { AxiosError } from 'axios';
 import { ServingRuntimeSize } from '~/pages/modelServing/screens/types';
 import { EnvironmentFromVariable } from '~/pages/projects/types';
 import { ImageStreamKind, ImageStreamSpecTagType } from './k8sTypes';
@@ -18,8 +19,10 @@ export type PrometheusQueryResponse = {
 };
 
 export type PrometheusQueryRangeResponseDataResult = {
-  // not used -- see https://prometheus.io/docs/prometheus/latest/querying/api/#range-queries for more info
-  metric: unknown;
+  metric: {
+    request?: string;
+    pod?: string;
+  };
   values: PrometheusQueryRangeResultValue[];
 };
 export type PrometheusQueryRangeResponseData = {
@@ -731,7 +734,7 @@ export type GPUInfo = {
 export type ContextResourceData<T> = {
   data: T[];
   loaded: boolean;
-  error?: Error;
+  error?: Error | AxiosError;
   refresh: () => void;
 };