Implemented visualizations for the NIM metrics

[LinoyBitan1]

Description

JIRA - https://issues.redhat.com/browse/NVPE-31

• Implemented visualizations for the NIM metrics. the graphs added to Nim tab-

  1 - Graph for KV Cache usage over time
  2 - Line graph for Running, Waiting and Max Request Count
  3 - Line graph with Total Prompt Token Count and Total Generation Token Count
  4 - Area chart with Time to First Token
  5 - Area chart with Time per Output Token
  6 - Donut chart with Success Request and Failed Requests

• odh-model-controller creates a ConfigMap next to the InferenceService called -metrics-dashboard with a data indicating if metrics are available for the runtime and if so, the ConfigMap will also contain a JSON object specifying the queries required for the graphs mentioned above.

• odh-dashboard grabs the above-mentioned ConfigMap based on its name, and if metrics are available for the runtime, it will parse the JSON object and create the required graphs.

NIM Metrics tab-

NIM Metrics graphs-

How Has This Been Tested?

Use the following doc -
NIM Metrics_ frontend.pdf

Test Impact

• Cypress tests added
• Unit tests of utility functions
• Tests of new hooks to follow after.

Request review criteria:

Self checklist (all need to be checked):

• The developer has manually tested the changes and verified that the changes work
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has added tests or explained why testing cannot be added (unit or cypress tests for related changes)

If you have UI changes:

• Included any necessary screenshots or gifs if it was a UI change.
• Included tags to the UX team if it was a UI/UX change.

After the PR is posted & before it merges:

• The developer has tested their solution on a cluster by using the image produced by the PR to main

[openshift-ci]

Hi @LinoyBitan1. Thanks for your PR.

I'm waiting for a opendatahub-io member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[andrewballantyne]

FYI @emilys314

[LinoyBitan1]

This is our (Matan Talvi and Linoy Bitan) first PR.

[emilys314]

/ok-to-test

[emilys314]

Can you run the linter / formatter? The CI checks will not pass unless it's following the linting rules See https://github.com/opendatahub-io/odh-dashboard/blob/main/CONTRIBUTING.md#linter-testing
vs code can show the errors. Or run npm run test:lint

[emilys314]

Can you also add in the PR description the jira item this is associated with?

[LinoyBitan1]

done

[LinoyBitan1]

Can you run the linter / formatter? The CI checks will not pass unless it's following the linting rules See https://github.com/opendatahub-io/odh-dashboard/blob/main/CONTRIBUTING.md#linter-testing vs code can show the errors. Or run npm run test:lint

The linter and formatter were run, and we've added the updates in the commit along with a few changes in the tests. Let us know if there's anything else needed!

[codecov]

Codecov Report

Attention: Patch coverage is 83.80952% with 51 lines in your changes missing coverage. Please review.

Project coverage is 85.82%. Comparing base (3ea00fd) to head (eebe460).
Report is 7 commits behind head on main.

Files with missing lines	Patch %	Lines
...end/src/api/prometheus/kservePerformanceMetrics.ts	45.16%	34 Missing ⚠️
...metrics/kserve/content/NIMCurrentRequestsGraph.tsx	80.00%	3 Missing ⚠️
...pts/metrics/kserve/useNimMetricsGraphDefinition.ts	84.21%	3 Missing ⚠️
...s/modelServing/screens/metrics/MetricsPageTabs.tsx	62.50%	3 Missing ⚠️
...etrics/kserve/content/NIMRequestsOutcomesGraph.tsx	84.61%	2 Missing ⚠️
...ontend/src/api/prometheus/NimPerformanceMetrics.ts	98.63%	1 Missing ⚠️
.../src/concepts/metrics/kserve/NimMetricsContext.tsx	96.00%	1 Missing ⚠️
...pts/metrics/kserve/content/NIMTokensCountGraph.tsx	92.30%	1 Missing ⚠️
...ts/metrics/kserve/content/NimPerformanceGraphs.tsx	95.65%	1 Missing ⚠️
frontend/src/concepts/metrics/kserve/utils.ts	75.00%	1 Missing ⚠️
... and 1 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3612      +/-   ##
==========================================
- Coverage   85.82%   85.82%   -0.01%     
==========================================
  Files        1419     1433      +14     
  Lines       32644    32957     +313     
  Branches     9167     9222      +55     
==========================================
+ Hits        28018    28284     +266     
- Misses       4626     4673      +47     

Files with missing lines	Coverage Δ
frontend/src/concepts/metrics/kserve/const.ts	100.00% <100.00%> (ø)
...ts/metrics/kserve/content/NIMKVCacheUsageGraph.tsx	100.00% <100.00%> (ø)
...rics/kserve/content/NIMTimeForFirstTokenGraphs.tsx	100.00% <100.00%> (ø)
...rics/kserve/content/NIMTimePerOutputTokenGraph.tsx	100.00% <100.00%> (ø)
...cepts/metrics/kserve/content/NimMetricsContent.tsx	100.00% <100.00%> (ø)
...ages/modelServing/screens/metrics/MetricsChart.tsx	89.24% <100.00%> (+0.61%)	⬆️
...s/modelServing/screens/metrics/nim/ModelGraphs.tsx	100.00% <100.00%> (ø)
...es/modelServing/screens/metrics/nim/NimMetrics.tsx	100.00% <100.00%> (ø)
...nd/src/pages/modelServing/screens/metrics/types.ts	100.00% <100.00%> (ø)
...rving/screens/metrics/useMetricsPageEnabledTabs.ts	100.00% <100.00%> (ø)
... and 12 more

... and 2 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3ea00fd...eebe460. Read the comment docs.

[emilys314]

You also need to add a link to the metrics view in the model list for NIM projects, currently there is no way to get there? frontend/src/pages/modelServing/screens/global/InferenceServiceTableRow.tsx

[emilys314]

It appears there is another linter error https://github.com/opendatahub-io/odh-dashboard/actions/runs/12769888698/job/35594011880?pr=3612

[emilys314]

very minor comments (sorry lol), but everything else looks good and is working as intended

[emilys314]

/lgtm
/approve

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: emilys314

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/OWNERS [emilys314]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment