From 5609b85162ec2a6053f0d671e4523d2f7d0295a2 Mon Sep 17 00:00:00 2001 From: Juntao Wang Date: Thu, 10 Aug 2023 16:24:42 -0400 Subject: [PATCH] Fix types on f/mserving-metrics branch --- frontend/src/api/prometheus/serving.ts | 18 +++++------ .../explainability/useTrustyAIAPIRoute.ts | 2 +- .../explainability/useTrustyAIAPIState.ts | 2 +- .../pipelines/context/usePipelineAPIState.ts | 2 +- .../metrics/BiasConfigurationTable.tsx | 9 +----- .../metrics/EnsureMetricsAvailable.tsx | 5 +-- .../screens/metrics/MetricsChart.tsx | 2 +- .../screens/metrics/ModelGraphs.tsx | 9 ++++-- .../metrics/ModelServingMetricsContext.tsx | 12 ++++--- .../screens/metrics/ServerGraphs.tsx | 31 ++++++++++++++++--- .../screens/metrics/TrustyChart.tsx | 5 +-- .../MetricTypeField.tsx | 8 +++-- .../modelServing/screens/metrics/utils.tsx | 8 +++-- .../projects/ServingRuntimeTableRow.tsx | 4 --- .../screens/projects/ProjectListView.tsx | 8 ++--- frontend/src/types.ts | 9 ++++-- 16 files changed, 81 insertions(+), 53 deletions(-) diff --git a/frontend/src/api/prometheus/serving.ts b/frontend/src/api/prometheus/serving.ts index 3f51eb532f..5b392c69c8 100644 --- a/frontend/src/api/prometheus/serving.ts +++ b/frontend/src/api/prometheus/serving.ts @@ -22,7 +22,7 @@ import useQueryRangeResourceData from './useQueryRangeResourceData'; export const useModelServingMetrics = ( type: PerformanceMetricType, - queries: Record | Record, + 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( 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], diff --git a/frontend/src/concepts/explainability/useTrustyAIAPIRoute.ts b/frontend/src/concepts/explainability/useTrustyAIAPIRoute.ts index 073ae3b0db..b861437710 100644 --- a/frontend/src/concepts/explainability/useTrustyAIAPIRoute.ts +++ b/frontend/src/concepts/explainability/useTrustyAIAPIRoute.ts @@ -44,7 +44,7 @@ const useTrustyAIAPIRoute = (hasCR: boolean, namespace: string): FetchState { - let interval; + let interval: ReturnType; if (!hasData) { interval = setInterval(refresh, FAST_POLL_INTERVAL); } diff --git a/frontend/src/concepts/explainability/useTrustyAIAPIState.ts b/frontend/src/concepts/explainability/useTrustyAIAPIState.ts index 605e300df9..b40d689609 100644 --- a/frontend/src/concepts/explainability/useTrustyAIAPIState.ts +++ b/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), diff --git a/frontend/src/concepts/pipelines/context/usePipelineAPIState.ts b/frontend/src/concepts/pipelines/context/usePipelineAPIState.ts index 705f0388c0..a2b752474d 100644 --- a/frontend/src/concepts/pipelines/context/usePipelineAPIState.ts +++ b/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), diff --git a/frontend/src/pages/modelServing/screens/metrics/BiasConfigurationTable.tsx b/frontend/src/pages/modelServing/screens/metrics/BiasConfigurationTable.tsx index 98e53b4ea9..2134a78b07 100644 --- a/frontend/src/pages/modelServing/screens/metrics/BiasConfigurationTable.tsx +++ b/frontend/src/pages/modelServing/screens/metrics/BiasConfigurationTable.tsx @@ -52,14 +52,7 @@ const BiasConfigurationTable: React.FC = ({ // 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 ( diff --git a/frontend/src/pages/modelServing/screens/metrics/EnsureMetricsAvailable.tsx b/frontend/src/pages/modelServing/screens/metrics/EnsureMetricsAvailable.tsx index 2d961cb693..c1cd1ea9de 100644 --- a/frontend/src/pages/modelServing/screens/metrics/EnsureMetricsAvailable.tsx +++ b/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 = ({ 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++; }); diff --git a/frontend/src/pages/modelServing/screens/metrics/MetricsChart.tsx b/frontend/src/pages/modelServing/screens/metrics/MetricsChart.tsx index 954b8c01d9..91d02df1a6 100644 --- a/frontend/src/pages/modelServing/screens/metrics/MetricsChart.tsx +++ b/frontend/src/pages/modelServing/screens/metrics/MetricsChart.tsx @@ -151,7 +151,7 @@ const MetricsChart: React.FC = ({ containerComponent = ( (tooltipDisabled ? 'No data' : datum.y)} + labels={({ datum }: { datum: { y: number } }) => (tooltipDisabled ? 'No data' : datum.y)} labelComponent={} onCursorChange={handleCursorChange} mouseFollowTooltips diff --git a/frontend/src/pages/modelServing/screens/metrics/ModelGraphs.tsx b/frontend/src/pages/modelServing/screens/metrics/ModelGraphs.tsx index b9463ee192..7cb027810a 100644 --- a/frontend/src/pages/modelServing/screens/metrics/ModelGraphs.tsx +++ b/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, translatePoint: per100, }, { name: 'Failed http requests (x100)', - metric: data[ModelMetricType.REQUEST_COUNT_FAILED], + metric: data[ + ModelMetricType.REQUEST_COUNT_FAILED + ] as ContextResourceData, translatePoint: per100, }, ]} diff --git a/frontend/src/pages/modelServing/screens/metrics/ModelServingMetricsContext.tsx b/frontend/src/pages/modelServing/screens/metrics/ModelServingMetricsContext.tsx index b887a5cd06..35f7744e1a 100644 --- a/frontend/src/pages/modelServing/screens/metrics/ModelServingMetricsContext.tsx +++ b/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 + ModelMetricType | ServerMetricType, + ContextResourceData >; currentTimeframe: TimeframeTitle; setCurrentTimeframe: (timeframe: TimeframeTitle) => void; @@ -60,7 +64,7 @@ export const ModelServingMetricsContext = React.createContext | Record; + queries: { [key in ModelMetricType]: string } | { [key in ServerMetricType]: string }; type: PerformanceMetricType; }; diff --git a/frontend/src/pages/modelServing/screens/metrics/ServerGraphs.tsx b/frontend/src/pages/modelServing/screens/metrics/ServerGraphs.tsx index f336285570..56b5b63674 100644 --- a/frontend/src/pages/modelServing/screens/metrics/ServerGraphs.tsx +++ b/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 = () => { , + translatePoint: per100, + }} color="blue" title="Http requests (x100)" /> + ).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 = () => { , + translatePoint: toPercentage, + }} color="purple" title="CPU utilization %" domain={() => ({ @@ -53,7 +72,9 @@ const ServerGraphs: React.FC = () => { , translatePoint: toPercentage, }} color="orange" diff --git a/frontend/src/pages/modelServing/screens/metrics/TrustyChart.tsx b/frontend/src/pages/modelServing/screens/metrics/TrustyChart.tsx index 72aa4db4ae..2d1587ad93 100644 --- a/frontend/src/pages/modelServing/screens/metrics/TrustyChart.tsx +++ b/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 = ({ 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], diff --git a/frontend/src/pages/modelServing/screens/metrics/biasConfigurationModal/MetricTypeField.tsx b/frontend/src/pages/modelServing/screens/metrics/biasConfigurationModal/MetricTypeField.tsx index 454bd81f3f..cb429611a9 100644 --- a/frontend/src/pages/modelServing/screens/metrics/biasConfigurationModal/MetricTypeField.tsx +++ b/frontend/src/pages/modelServing/screens/metrics/biasConfigurationModal/MetricTypeField.tsx @@ -33,8 +33,12 @@ const MetricTypeField: React.FC = ({ fieldId, value, onCha menuAppendTo="parent" > {Object.keys(BiasMetricType).map((type) => ( - - {METRIC_TYPE_DISPLAY_NAME[type]} + + {METRIC_TYPE_DISPLAY_NAME[type as keyof typeof BiasMetricType]} ))} diff --git a/frontend/src/pages/modelServing/screens/metrics/utils.tsx b/frontend/src/pages/modelServing/screens/metrics/utils.tsx index 4c298e65fc..d0a3bf8856 100644 --- a/frontend/src/pages/modelServing/screens/metrics/utils.tsx +++ b/frontend/src/pages/modelServing/screens/metrics/utils.tsx @@ -37,7 +37,7 @@ export const isModelMetricsEnabled = ( export const getServerMetricsQueries = ( server: ServingRuntimeKind, currentTimeframe: TimeframeTitle, -): Record => { +): { [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 => { +): { [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]]); diff --git a/frontend/src/pages/modelServing/screens/projects/ServingRuntimeTableRow.tsx b/frontend/src/pages/modelServing/screens/projects/ServingRuntimeTableRow.tsx index 760716fb56..227af99b33 100644 --- a/frontend/src/pages/modelServing/screens/projects/ServingRuntimeTableRow.tsx +++ b/frontend/src/pages/modelServing/screens/projects/ServingRuntimeTableRow.tsx @@ -47,10 +47,6 @@ const ServingRuntimeTableRow: React.FC = ({ const [performanceMetricsEnabled] = usePerformanceMetricsEnabled(); - const onToggle = (_, __, colIndex: ServingRuntimeTableTabs) => { - setExpandedColumn(expandedColumn === colIndex ? undefined : colIndex); - }; - const compoundExpandParams = ( col: ServingRuntimeTableTabs, isDisabled: boolean, diff --git a/frontend/src/pages/projects/screens/projects/ProjectListView.tsx b/frontend/src/pages/projects/screens/projects/ProjectListView.tsx index 53f173abdb..c6f0b71acb 100644 --- a/frontend/src/pages/projects/screens/projects/ProjectListView.tsx +++ b/frontend/src/pages/projects/screens/projects/ProjectListView.tsx @@ -46,11 +46,9 @@ const ProjectListView: React.FC = ({ 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(); diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 761eac09c3..31fd16df07 100644 --- a/frontend/src/types.ts +++ b/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 = { data: T[]; loaded: boolean; - error?: Error; + error?: Error | AxiosError; refresh: () => void; };