feat(FR-1666): clamp CPU live stats to the theoretical maximum rage

Author: nowgnuesLee

react/src/components/AgentList.tsx

@@ -439,10 +439,10 @@ const AgentList: React.FC<AgentListProps> = ({
             liveStat.cpu_util.current = _.toFinite(
               parsedValue.node.cpu_util.current,
             );
-            liveStat.cpu_util.ratio =
-              liveStat.cpu_util.current /
-                liveStat.cpu_util.capacity /
-                numCores || 0;
+            liveStat.cpu_util.ratio = Math.min(
+              _.toFinite(parsedValue.node.cpu_util.pct) / 100 / (numCores || 1),
+              1,
+            );
             liveStat.mem_util.capacity = _.toInteger(
               available_slots.mem || parsedValue.node.mem.capacity,
             );

react/src/components/ComputeSessionNodeItems/SessionSlotCell.tsx

@@ -49,20 +49,19 @@ const SessionSlotCell: React.FC<OccupiedSlotViewProps> = ({
   } = JSON.parse(session.occupied_slots || '{}');
 
   if (type === 'cpu') {
-    const displayPercent =
-      (liveStat.cpu_util?.pct ? parseFloat(liveStat.cpu_util?.pct) : 0) /
-      parseFloat(occupiedSlots.cpu ?? '1');
-    const cpuUtilPercentNumber = liveStat.cpu_util?.pct
-      ? parseFloat(liveStat.cpu_util.pct)
-      : 0;
-    const cpuOccupiedSlot = parseFloat(occupiedSlots.cpu ?? '1') * 100;
+    const CPUOccupiedSlot = parseFloat(occupiedSlots.cpu ?? '1');
+    const CPUUtilPercent = Math.min(
+      parseFloat(liveStat.cpu_util?.pct ?? '0'),
+      CPUOccupiedSlot * 100,
+    );
+
     return occupiedSlots.cpu ? (
       <UsageBadge
-        percent={displayPercent}
-        text={occupiedSlots.cpu}
+        percent={Math.min(CPUUtilPercent / CPUOccupiedSlot, 100)}
+        text={CPUOccupiedSlot}
         tooltip={{
           title: liveStat.cpu_util
-            ? `${cpuUtilPercentNumber.toFixed(1)}% / ${cpuOccupiedSlot}%`
+            ? `${CPUUtilPercent.toFixed(1)}% / ${CPUOccupiedSlot * 100}%`
             : undefined,
           placement: 'left',
         }}

react/src/components/SessionUsageMonitor.tsx

@@ -149,21 +149,25 @@ const SessionUsageMonitor: React.FC<SessionUsageMonitorProps> = ({
   const utilItems = filterOutEmpty([
     sortedLiveStat?.cpu_util &&
       (() => {
-        const displayPercent =
-          (liveStat.cpu_util?.pct ? parseFloat(liveStat.cpu_util?.pct) : 0) /
-          parseFloat(occupiedSlots.cpu ?? '1');
-
+        const CPUOccupiedSlot = parseFloat(occupiedSlots.cpu ?? '1');
+        const CPUUtilPercent = Math.min(
+          parseFloat(liveStat.cpu_util?.pct ?? '0'),
+          CPUOccupiedSlot * 100,
+        );
         return (
           <SessionUtilItem
             key={'cpu'}
             size={size}
             title={mergedResourceSlots?.['cpu']?.human_readable_name}
             percent={
               displayTarget === 'current'
-                ? displayPercent
-                : (sortedLiveStat?.cpu_util?.[displayTargetName] ?? '0')
+                ? Math.min(CPUUtilPercent / CPUOccupiedSlot, 100).toString()
+                : Math.min(
+                    sortedLiveStat?.cpu_util?.[displayTargetName] ?? '0',
+                    100,
+                  ).toString()
             }
-            description={`${liveStat.cpu_util?.pct}% / ${parseFloat(occupiedSlots.cpu ?? '1') * 100}%`}
+            description={`${CPUUtilPercent.toFixed(1)}% / ${parseFloat(occupiedSlots.cpu ?? '1') * 100}%`}
           />
         );
       })(),