feat: ResourceListTable - update UI for cpu and memory usage

Author: RohitRaj011

src/components/ResourceBrowser/Constants.ts

@@ -286,12 +286,8 @@ export const NODE_LIST_HEADERS = [
     'node group',
     'pods',
     'taints',
-    'cpu usage (%)',
-    'cpu usage (absolute)',
-    'cpu allocatable',
-    'mem usage (%)',
-    'mem usage (absolute)',
-    'mem allocatable',
+    'cpu usage',
+    'mem usage',
     'age',
     'unschedulable',
 ] as const
@@ -315,12 +311,8 @@ export const NODE_LIST_HEADERS_TO_KEY_MAP: Record<(typeof NODE_LIST_HEADERS)[num
     'node group': 'nodeGroup',
     pods: 'podCount',
     taints: 'taintCount',
-    'cpu usage (%)': 'cpu.usagePercentage',
-    'cpu usage (absolute)': 'cpu.usage',
-    'cpu allocatable': 'cpu.allocatable',
-    'mem usage (%)': 'memory.usagePercentage',
-    'mem usage (absolute)': 'memory.usage',
-    'mem allocatable': 'memory.allocatable',
+    'cpu usage': 'cpu.usage',
+    'mem usage': 'memory.usage',
     age: 'age',
     unschedulable: 'unschedulable',
 } as const

src/components/ResourceBrowser/ResourceList/K8sResourceListTableCellComponent.tsx

@@ -29,6 +29,7 @@ import { ADD_ENVIRONMENT_FORM_LOCAL_STORAGE_KEY } from '@Pages/GlobalConfigurati
 import { AI_BUTTON_CONFIG_MAP, EVENT_LIST, K8S_EMPTY_GROUP, NODE_LIST_HEADERS_TO_KEY_MAP } from '../Constants'
 import { ClusterDetailBaseParams } from '../Types'
 import { getRenderInvolvedObjectButton, getRenderNodeButton, renderResourceValue } from '../Utils'
+import { K8sResourceListTableUsageCell } from './K8sResourceListTableUsageCell'
 import NodeActionsMenu from './NodeActionsMenu'
 import ResourceBrowserActionMenu from './ResourceBrowserActionMenu'
 import { K8sResourceListTableCellComponentProps } from './types'
@@ -210,6 +211,26 @@ const K8sResourceListTableCellComponent = ({
         lastSeen: resourceData[EVENT_LIST.dataKeys.lastSeen] as string,
     }
 
+    if (columnName === 'cpu.usage') {
+        return (
+            <K8sResourceListTableUsageCell
+                percentage={resourceData['cpu.usagePercentage'] as string}
+                absoluteValue={resourceData['cpu.usage'] as string}
+                color="var(--B300)"
+            />
+        )
+    }
+
+    if (columnName === 'memory.usage') {
+        return (
+            <K8sResourceListTableUsageCell
+                percentage={resourceData['memory.usagePercentage'] as string}
+                absoluteValue={resourceData['memory.usage'] as string}
+                color="var(--V300)"
+            />
+        )
+    }
+
     return (
         <>
             {columnName === 'name' ? (

src/components/ResourceBrowser/ResourceList/K8sResourceListTableUsageCell.tsx

@@ -0,0 +1,30 @@
+import { SegmentedBarChart } from '@devtron-labs/devtron-fe-common-lib'
+
+export const K8sResourceListTableUsageCell = ({
+    percentage,
+    absoluteValue,
+    color,
+}: {
+    percentage: string
+    absoluteValue: string
+    color: string
+}) => {
+    const percentageInNumber = parseInt(percentage, 10)
+    const usagePercentage = Number.isNaN(percentageInNumber) ? 0 : percentageInNumber
+
+    return (
+        <div className="flexbox-col dc__content-center dc__gap-4">
+            <div className="flex left dc__gap-8">
+                <p className="m-0 fs-13 lh-20 cn-9 flex-grow-1">{absoluteValue}</p>
+                <p className="m-0 fs-13 lh-20 cn-7">{percentage}</p>
+            </div>
+            <SegmentedBarChart
+                entities={[
+                    { value: usagePercentage, color },
+                    { value: 100 - usagePercentage, color: 'var(--N200)' },
+                ]}
+                hideLegend
+            />
+        </div>
+    )
+}