fix(metrics): round percentage tooltips to 2 decimal places (#6853)

* fix(metrics): round percentage tooltips to 2 decimal places

Fixes excessive decimal precision in KServe metric tooltips by applying
.toFixed(2) rounding to the toPercentage transformation function.

Before: Memory utilization tooltips displayed raw floating-point values
like "9.896161479334678%"

After: Values are rounded to 2 decimal places: "9.90%"

This fix applies to all percentage-based metrics:
- KserveMemoryUsageGraph
- KserveCpuUsageGraph
- NIMKVCacheUsageGraph

Implementation follows the existing per100 function pattern and makes
a single-line change that fixes all three affected components centrally.

Added comprehensive regression tests (12 test cases) that verify:
- Original bug scenario (0.09896... → 9.90)
- Rounding edge cases (0%, 100%, near boundaries)
- Floating-point precision artifacts
- Property preservation

Fixes RHOAIENG-17618

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* lint test fix

---------

Co-authored-by: Ambient Code Bot <bot@ambient-code.local>
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: 3 people

frontend/src/pages/modelServing/screens/metrics/__tests__/utils.spec.ts

@@ -1,4 +1,8 @@
-import { convertInputType } from '#~/pages/modelServing/screens/metrics/utils';
+import {
+  convertInputType,
+  toPercentage,
+  per100,
+} from '#~/pages/modelServing/screens/metrics/utils';
 
 describe('convertInputType', () => {
   describe('string inputs', () => {
@@ -40,3 +44,82 @@ describe('convertInputType', () => {
     });
   });
 });
+
+describe('toPercentage', () => {
+  it('should round percentage values to 2 decimal places', () => {
+    const input = { x: 1000, y: 0.09896161479334678, name: 'test' };
+    const result = toPercentage(input);
+    expect(result.y).toBe(9.9);
+  });
+
+  it('should handle values that round up', () => {
+    const input = { x: 1000, y: Number('0.15228456789012345'), name: 'test' };
+    const result = toPercentage(input);
+    expect(result.y).toBe(15.23);
+  });
+
+  it('should handle values that round down', () => {
+    const input = { x: 1000, y: 0.15224, name: 'test' };
+    const result = toPercentage(input);
+    expect(result.y).toBe(15.22);
+  });
+
+  it('should handle edge case near 100%', () => {
+    const input = { x: 1000, y: 0.999999, name: 'test' };
+    const result = toPercentage(input);
+    expect(result.y).toBe(100);
+  });
+
+  it('should handle edge case near 0%', () => {
+    const input = { x: 1000, y: 0.005, name: 'test' };
+    const result = toPercentage(input);
+    expect(result.y).toBe(0.5);
+  });
+
+  it('should handle exact zero', () => {
+    const input = { x: 1000, y: 0, name: 'test' };
+    const result = toPercentage(input);
+    expect(result.y).toBe(0);
+  });
+
+  it('should preserve x and name properties', () => {
+    const input = { x: 12345, y: 0.5, name: 'Memory Usage' };
+    const result = toPercentage(input);
+    expect(result.x).toBe(12345);
+    expect(result.name).toBe('Memory Usage');
+  });
+
+  it('should handle floating-point precision artifacts', () => {
+    // Test that floating-point errors like 99.99999999999999 get properly rounded
+    const input = { x: 1000, y: 0.9999999999999999, name: 'test' };
+    const result = toPercentage(input);
+    expect(result.y).toBe(100);
+  });
+});
+
+describe('per100', () => {
+  it('should divide by 100 and round to 2 decimal places', () => {
+    const input = { x: 1000, y: 989.6161479334678, name: 'test' };
+    const result = per100(input);
+    expect(result.y).toBe(9.9);
+  });
+
+  it('should handle values that round up', () => {
+    const input = { x: 1000, y: Number('1522.8456789012345'), name: 'test' };
+    const result = per100(input);
+    expect(result.y).toBe(15.23);
+  });
+
+  it('should handle exact zero', () => {
+    const input = { x: 1000, y: 0, name: 'test' };
+    const result = per100(input);
+    expect(result.y).toBe(0);
+  });
+
+  it('should preserve x and name properties', () => {
+    const input = { x: 12345, y: 5000, name: 'CPU Usage' };
+    const result = per100(input);
+    expect(result.x).toBe(12345);
+    expect(result.name).toBe('CPU Usage');
+  });
+});

frontend/src/pages/modelServing/screens/metrics/utils.tsx

@@ -107,7 +107,7 @@ export const per100: TranslatePoint = (point) => ({
 
 export const toPercentage: TranslatePoint = (point) => ({
   ...point,
-  y: point.y * 100,
+  y: Number((point.y * 100).toFixed(2)),
 });
 
 export const createGraphMetricLine = ({