Merge pull request #2114 from alexcreasy/issue-2090

Performance metric chart needs area charts to be in a stack
opendatahub-io · Nov 10, 2023 · 358b29e · 358b29e
2 parents e77d2c1 + 4e321d5
commit 358b29e
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 10 deletions.
diff --git a/frontend/src/pages/modelServing/screens/metrics/MetricsChart.tsx b/frontend/src/pages/modelServing/screens/metrics/MetricsChart.tsx
@@ -40,7 +40,6 @@ import {
 import {
   convertTimestamp,
   createGraphMetricLine,
-  defaultDomainCalculator,
   formatToShow,
   getThresholdData,
   useStableMetrics,
@@ -63,7 +62,7 @@ const MetricsChart: React.FC<MetricsChartProps> = ({
   color,
   metrics: unstableMetrics,
   thresholds = [],
-  domain = defaultDomainCalculator,
+  domain,
   toolbar,
   type = MetricsChartTypes.AREA,
   isStack = false,
@@ -189,7 +188,7 @@ const MetricsChart: React.FC<MetricsChartProps> = ({
             <Chart
               ariaTitle={title}
               containerComponent={containerComponent}
-              domain={domain(maxYValue, minYValue)}
+              domain={domain ? domain(maxYValue, minYValue) : undefined}
               height={400}
               width={chartWidth}
               padding={{ left: 70, right: 50, bottom: 70, top: 50 }}

diff --git a/frontend/src/pages/modelServing/screens/metrics/ModelGraphs.tsx b/frontend/src/pages/modelServing/screens/metrics/ModelGraphs.tsx
@@ -6,7 +6,6 @@ import {
   ModelServingMetricsContext,
 } from '~/pages/modelServing/screens/metrics/ModelServingMetricsContext';
 import { ContextResourceData, PrometheusQueryRangeResultValue } from '~/types';
-import { SUCCESS_FAIL_CHART_THEME } from '~/pages/modelServing/screens/metrics/const';
 import { per100 } from './utils';
 
 const ModelGraphs: React.FC = () => {
@@ -32,8 +31,9 @@ const ModelGraphs: React.FC = () => {
               translatePoint: per100,
             },
           ]}
+          color="blue"
           title="Http requests (x100)"
-          theme={SUCCESS_FAIL_CHART_THEME}
+          isStack
         />
       </StackItem>
     </Stack>

diff --git a/frontend/src/pages/modelServing/screens/metrics/ServerGraphs.tsx b/frontend/src/pages/modelServing/screens/metrics/ServerGraphs.tsx
@@ -32,6 +32,7 @@ const ServerGraphs: React.FC = () => {
           }}
           color="blue"
           title="Http requests (x100)"
+          isStack
         />
       </StackItem>
       <StackItem>

diff --git a/frontend/src/pages/modelServing/screens/metrics/const.ts b/frontend/src/pages/modelServing/screens/metrics/const.ts
@@ -88,6 +88,7 @@ const themeProps = {
   chart: { colorScale },
   group: { colorScale },
   legend: { colorScale },
+  stack: { colorScale },
 };
 
 export const SUCCESS_FAIL_CHART_THEME = mergeTheme(ChartThemeColor.default, themeProps);
diff --git a/frontend/src/pages/modelServing/screens/metrics/utils.tsx b/frontend/src/pages/modelServing/screens/metrics/utils.tsx
@@ -14,7 +14,6 @@ import {
 import { QueryTimeframeStep } from '~/pages/modelServing/screens/const';
 import {
   BiasSelectOption,
-  DomainCalculator,
   GraphMetricLine,
   GraphMetricPoint,
   MetricChartLine,
@@ -170,10 +169,6 @@ export const useStableMetrics = (
   return metricsRef.current;
 };
 
-export const defaultDomainCalculator: DomainCalculator = (maxYValue) => ({
-  y: maxYValue === 0 ? [0, 1] : [0, maxYValue],
-});
-
 export const getBreadcrumbItemComponents = (breadcrumbItems: BreadcrumbItemType[]) =>
   breadcrumbItems.map((item) => (
     <BreadcrumbItem