Fix stack chart issue when there is no data for one area (opendatahub…

…-io#3229)
jenny-s51 · Sep 20, 2024 · 83730aa · 83730aa
1 parent 089ff71
commit 83730aa
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/modelMetrics.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/modelServing/modelMetrics.cy.ts
@@ -105,10 +105,21 @@ const initIntercepts = ({
     ServingRuntimeModel,
     mockServingRuntimeK8sResource({ name: 'test-model', namespace: 'test-project' }),
   );
-  cy.interceptOdh(
-    'POST /api/prometheus/serving',
-    mockPrometheusServing({ result: hasServingData ? undefined : [] }), // will mock for both ok and not ok
-  );
+  cy.interceptOdh('POST /api/prometheus/serving', (req) => {
+    // failed http request count has no data
+    // all the other serving endpoints get data
+    const { query } = req.body;
+    if (
+      !(
+        query.includes(`modelmesh_api_request_milliseconds_count`) &&
+        query.includes(`code%21%3D%27OK`)
+      )
+    ) {
+      req.reply(mockPrometheusServing({ result: hasServingData ? undefined : [] }));
+    } else {
+      req.reply(mockPrometheusServing({ result: [] }));
+    }
+  });
   cy.interceptOdh('POST /api/prometheus/bias', (req) => {
     if ((req.body as { query: string }).query.includes(`query=trustyai_dir`)) {
       req.reply(mockPrometheusBias({ result: hasBiasData ? undefined : [], metric: 'DIR' }));
@@ -253,7 +264,7 @@ describe('Model Metrics', () => {
       .shouldHaveData();
   });
 
-  it('Server metrics show no data available ', () => {
+  it('Server metrics show no data available', () => {
     initIntercepts({
       disableBiasMetrics: false,
       disablePerformanceMetrics: false,

diff --git a/frontend/src/pages/modelServing/screens/metrics/MetricsChart.tsx b/frontend/src/pages/modelServing/screens/metrics/MetricsChart.tsx
@@ -213,7 +213,13 @@ const MetricsChart: React.FC<MetricsChartProps> = ({
                 {graphLines.map((line, i) => {
                   switch (type) {
                     case MetricsChartTypes.AREA:
-                      return <ChartArea key={i} data={line.points} name={line.name} />;
+                      return (
+                        <ChartArea
+                          key={i}
+                          data={line.points.length === 0 ? [null] : line.points}
+                          name={line.name}
+                        />
+                      );
                     case MetricsChartTypes.LINE:
                       return <ChartLine key={i} data={line.points} name={line.name} />;
                     default: