Implemented visualizations for the NIM metrics

frontend/src/__mocks__/mockKserveMetricsConfigMap.ts

@@ -144,6 +144,217 @@ export const MOCK_KSERVE_METRICS_CONFIG_3 = `
   ]
 }`;
 
+// NVIDIA NIM
+export const MOCK_NIM_METRICS_CONFIG_1 = `{
+  "config": [
+    {
+      "title": "GPU cache usage over time",
+      "type": "KV_CACHE",
+      "queries": [
+        {
+          "title": "GPU cache usage over time",
+          "query": "sum_over_time(gpu_cache_usage_perc{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}[24h])"
+        }
+      ]
+    },
+    {
+      "title": "Current running, waiting, and max requests count",
+      "type": "CURRENT_REQUESTS",
+      "queries": [
+        {
+          "title": "Requests waiting",
+          "query": "num_requests_waiting{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}"
+        },
+        {
+          "title": "Requests running",
+          "query": "num_requests_running{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}"
+        },
+        {
+          "title": "Max requests",
+          "query": "num_request_max{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}"
+        }
+      ]
+    },
+    {
+      "title": "Tokens count",
+      "type": "TOKENS_COUNT",
+      "queries": [
+        {
+          "title": "Total prompts token",
+          "query": "round(rate(prompt_tokens_total{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}[1m]))"
+        },
+        {
+          "title": "Total generation token",
+          "query": "round(rate(generation_tokens_total{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}[1m]))"
+        }
+      ]
+    },
+    {
+      "title": "Time to first token",
+      "type": "TIME_TO_FIRST_TOKEN",
+      "queries": [
+        {
+          "title": "Time to first token",
+          "query": "rate(time_to_first_token_seconds_sum{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}[1m])"
+        }
+      ]
+    },
+    {
+      "title": "Time per output token",
+      "type": "TIME_PER_OUTPUT_TOKEN",
+      "queries": [
+        {
+          "title": "Time per output token",
+          "query": "rate(time_per_output_token_seconds_sum{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}[1m])"
+        }
+      ]
+    },
+    {
+      "title": "Requests outcomes",
+      "type": "REQUEST_OUTCOMES",
+      "queries": [
+        {
+          "title": "Number of successful incoming requests",
+          "query": "round(sum(increase(request_success_total{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}[5m])))"
+        },
+        {
+          "title": "Number of failed incoming requests",
+          "query": "round(sum(increase(request_failure_total{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}[5m])))"
+        }
+      ]
+    }
+  ]
+}`;
+
+export const MOCK_NIM_METRICS_CONFIG_3 = `{
+  "config": [
+    {
+      "title": "GPU cache usage over time",
+      "type": "KV_CACHE",
+      "queries": [
+        {
+          "title": "GPU cache usage over time",
+          "query": "sum_over_time(gpu_cache_usage_perc{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}[24h])"
+        }
+      ]
+    },
+    {
+      "title": "Current running, waiting, and max requests count",
+      "type": "CURRENT_REQUESTS",
+      "queries": [
+        {
+          "title": "Requests waiting",
+          "query": "num_requests_waiting{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}"
+        },
+        {
+          "title": "Requests running",
+          "query": "num_requests_running{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}"
+        },
+        {
+          "title": "Max requests",
+          "query": "num_request_max{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}"
+        }
+      ]
+    }
+  ]
+}`;
+
+export const MOCK_NIM_METRICS_CONFIG_MISSING_QUERY = `{
+  "config": [
+    {
+      "title": "GPU cache usage over time",
+      "type": "KV_CACHE",
+      "queries": [
+        {
+          "title": "GPU cache usage over time",
+          "query": "sum_over_time(gpu_cache_usage_perc{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}[24h])"
+        }
+      ]
+    },
+    {
+      "title": "Tokens count",
+      "type": "TOKENS_COUNT",
+      "queries": [
+        {
+          "title": "Total prompts token",
+          "query": "round(rate(prompt_tokens_total{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}[1m]))"
+        }
+      ]
+    }
+  ]
+}`;
+
+export const MOCK_NIM_METRICS_CONFIG_MISSING_QUERY_2 = `{
+  "config": [
+    {
+      "title": "GPU cache usage over time",
+      "type": "KV_CACHE",
+      "queries": [
+        {
+          "title": "GPU cache usage over time",
+          "query": "sum_over_time(gpu_cache_usage_perc{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}[24h])"
+        }
+      ]
+    },
+    {
+      "title": "Tokens count",
+      "type": "TOKENS_COUNT",
+      "queries": [
+        {
+          "title": "Total generation token",
+          "query": "round(rate(generation_tokens_total{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}[1m]))"
+        }
+      ]
+    },
+    {
+      "title": "Current running, waiting, and max requests count",
+      "type": "CURRENT_REQUESTS",
+      "queries": [
+        {
+        },
+        {
+        },
+        {
+        }
+      ]
+    }
+  ]
+}`;
+
+export const MOCK_NIM_METRICS_CONFIG_MISSING_QUERY_3 = `{
+  "config": [
+    {
+      "title": "GPU cache usage over time",
+      "type": "KV_CACHE",
+      "queries": [
+        {
+          "title": "GPU cache usage over time",
+          "query": "sum_over_time(gpu_cache_usage_perc{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}[24h])"
+        }
+      ]
+    },
+    {
+      "title": "Tokens count",
+      "type": "TOKENS_COUNT",
+      "queries": [
+        {
+          "title": "Total prompts token",
+          "query": "round(rate(prompt_tokens_total{namespace='tomer-test-2', pod=~'nim-deploy-predictor-.*'}[1m]))"
+        }
+      ]
+    },
+    {
+      "title": "Requests outcomes",
+      "type": "REQUEST_OUTCOMES",
+      "queries": [
+      {
+      },
+      {
+      }
+      ]
+    }
+  ]
+}`;
 export const mockKserveMetricsConfigMap = ({
   namespace = 'test-project',
   modelName = 'test-inference-service',
@@ -156,3 +367,16 @@ export const mockKserveMetricsConfigMap = ({
   };
   return mockConfigMap({ data, namespace, name: `${modelName}-metrics-dashboard` });
 };
+
+export const mockNimMetricsConfigMap = ({
+  namespace = 'test-project',
+  modelName = 'test-inference-service',
+  supported = true,
+  config = MOCK_NIM_METRICS_CONFIG_1,
+}: MockKserveMetricsConfigMapType): ConfigMapKind => {
+  const data = {
+    metrics: config,
+    supported: String(supported),
+  };
+  return mockConfigMap({ data, namespace, name: `${modelName}-metrics-dashboard` });
+};

frontend/src/__mocks__/mockProjectK8sResource.ts

@@ -38,16 +38,14 @@ export const mockProjectK8sResource = ({
       ...(enableModelMesh !== undefined && {
         [KnownLabels.MODEL_SERVING_PROJECT]: enableModelMesh ? 'true' : 'false',
       }),
-      ...(enableNIM && {
-        'opendatahub.io/nim-support': 'true',
-      }),
       ...(isDSProject && { [KnownLabels.DASHBOARD_RESOURCE]: 'true' }),
     },
     ...(hasAnnotations && {
       annotations: {
         ...(description && { 'openshift.io/description': description }),
         ...(displayName && { 'openshift.io/display-name': displayName }),
         ...(username && { 'openshift.io/requester': username }),
+        ...(enableNIM && { 'opendatahub.io/nim-support': 'true' }),
       },
     }),
     resourceVersion: '1',

frontend/src/__tests__/cypress/cypress/pages/modelMetrics.ts

@@ -46,6 +46,21 @@ class ModelMetricsPerformance extends ModelMetricsGlobal {
   }
 }
 
+class ModelMetricsNim extends ModelMetricsGlobal {
+  visit(project: string, model: string) {
+    cy.visitWithLogin(`/modelServing/${project}/metrics/${model}/performance`);
+    this.wait();
+  }
+
+  protected wait() {
+    cy.testA11y();
+  }
+
+  findTab() {
+    return cy.findByTestId('nim-tab');
+  }
+}
+
 class ModelMetricsKserve extends ModelMetricsPerformance {
   findKserveAreaDisabledCard() {
     return cy.findByTestId('kserve-metrics-disabled');
@@ -60,6 +75,20 @@ class ModelMetricsKserve extends ModelMetricsPerformance {
   }
 }
 
+class ModelMetricsKserveNim extends ModelMetricsNim {
+  findKserveAreaDisabledCard() {
+    return cy.findByTestId('kserve-metrics-disabled');
+  }
+
+  findUnsupportedRuntimeCard() {
+    return cy.findByTestId('kserve-metrics-runtime-unsupported');
+  }
+
+  findUnknownErrorCard() {
+    return cy.findByTestId('kserve-unknown-error');
+  }
+}
+
 class ModelMetricsBias extends ModelMetricsGlobal {
   visit(project: string, model: string, disableA11y = false) {
     cy.visitWithLogin(`/modelServing/${project}/metrics/${model}/bias`);
@@ -199,8 +228,10 @@ class ConfigureBiasMetricModal extends Modal {
 }
 
 export const modelMetricsPerformance = new ModelMetricsPerformance();
+export const modelMetricsNim = new ModelMetricsNim();
 export const modelMetricsBias = new ModelMetricsBias();
 export const serverMetrics = new ServerMetrics();
 export const modelMetricsConfigureSection = new ModelMetricsConfigureSection();
 export const configureBiasMetricModal = new ConfigureBiasMetricModal();
 export const modelMetricsKserve = new ModelMetricsKserve();
+export const modelMetricsKserveNim = new ModelMetricsKserveNim();