feat(ui): add metric selector (usage/request/limit) to Pods list

ui/src/components/metrics-cell.tsx

@@ -10,11 +10,13 @@ export function MetricCell({
   type,
   limitLabel = 'Limit',
   showPercentage = false,
+  mode = 'usage',
 }: {
   metrics?: MetricsData
   type: 'cpu' | 'memory'
   limitLabel?: string // e.g., "Limit" or "Capacity"
   showPercentage?: boolean // Whether to show percentage in the display
+  mode?: 'usage' | 'request' | 'limit'
 }) {
   const metricValue =
     type === 'cpu' ? metrics?.cpuUsage || 0 : metrics?.memoryUsage || 0
@@ -26,12 +28,22 @@ export function MetricCell({
 
   const formatValue = useCallback(
     (val?: number) => {
-      if (val === undefined || val === null) return '-'
-      return type === 'cpu' ? `${val}m` : formatMemory(val)
+      if (val === undefined || val === null || val === 0) {
+        if (mode !== 'usage' && (val === undefined || val === null)) return '-'
+        if (val === 0 && mode === 'usage') return '0'
+        if (val === 0) return '-'
+      }
+      return type === 'cpu' ? `${val}m` : formatMemory(val as number)
     },
-    [type]
+    [type, mode]
   )
 
+  const displayValue = useMemo(() => {
+    if (mode === 'usage') return metricValue
+    if (mode === 'request') return metricRequest
+    return metricLimit
+  }, [mode, metricValue, metricRequest, metricLimit])
+
   return useMemo(() => {
     const percentage = metricLimit
       ? Math.min((metricValue / metricLimit) * 100, 100)
@@ -86,8 +98,8 @@ export function MetricCell({
         <span
           className={`${type === 'cpu' ? 'w-[4ch]' : 'w-[10ch]'} text-right inline-block text-xs text-muted-foreground whitespace-nowrap tabular-nums`}
         >
-          {formatValue(metricValue)}
-          {showPercentage && metricLimit && metricValue > 0 && (
+          {formatValue(displayValue)}
+          {mode === 'usage' && showPercentage && metricLimit && metricValue > 0 && (
             <span className="hidden 2xl:inline text-[10px] opacity-70">
               ({percentage.toFixed(0)}%)
             </span>
@@ -100,6 +112,8 @@ export function MetricCell({
     metricValue,
     metricRequest,
     formatValue,
+    displayValue,
+    mode,
     limitLabel,
     type,
     showPercentage,

ui/src/pages/pod-list-page.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { createColumnHelper } from '@tanstack/react-table'
 import { Pod } from 'kubernetes-types/core/v1'
 import { useTranslation } from 'react-i18next'
@@ -16,12 +16,43 @@ import {
 import { MetricCell } from '@/components/metrics-cell'
 import { PodStatusIcon } from '@/components/pod-status-icon'
 import { ResourceTable } from '@/components/resource-table'
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 
 export function PodListPage() {
   const { t } = useTranslation()
+  const [metricMode, setMetricMode] = useState<'usage' | 'request' | 'limit'>(
+    'usage'
+  )
+
   // Define column helper outside of any hooks
   const columnHelper = createColumnHelper<PodWithMetrics>()
 
+  const MetricModeSelector = useMemo(
+    () => (
+      <ToggleGroup
+        type="single"
+        value={metricMode}
+        onValueChange={(value) => {
+          if (value) setMetricMode(value as 'usage' | 'request' | 'limit')
+        }}
+        variant="outline"
+        size="sm"
+        className="bg-background"
+      >
+        <ToggleGroupItem value="usage" className="px-3">
+          Usage
+        </ToggleGroupItem>
+        <ToggleGroupItem value="request" className="px-3">
+          Request
+        </ToggleGroupItem>
+        <ToggleGroupItem value="limit" className="px-3">
+          Limit
+        </ToggleGroupItem>
+      </ToggleGroup>
+    ),
+    [metricMode]
+  )
+
   // Define columns for the pod table - moved outside render cycle for better performance
   const columns = useMemo(
     () => [
@@ -80,14 +111,22 @@ export function PodListPage() {
         id: 'cpu',
         header: 'CPU',
         cell: ({ row }) => (
-          <MetricCell metrics={row.original.metrics} type="cpu" />
+          <MetricCell
+            metrics={row.original.metrics}
+            type="cpu"
+            mode={metricMode}
+          />
         ),
       }),
       columnHelper.accessor((row) => row.metrics?.memoryUsage || 0, {
         id: 'memory',
         header: 'Memory',
         cell: ({ row }) => (
-          <MetricCell metrics={row.original.metrics} type="memory" />
+          <MetricCell
+            metrics={row.original.metrics}
+            type="memory"
+            mode={metricMode}
+          />
         ),
       }),
       columnHelper.accessor((row) => row.status?.podIP, {
@@ -137,7 +176,7 @@ export function PodListPage() {
         },
       }),
     ],
-    [columnHelper, t]
+    [columnHelper, t, metricMode]
   )
 
   // Custom filter for pod search
@@ -155,6 +194,7 @@ export function PodListPage() {
       columns={columns}
       clusterScope={false}
       searchQueryFilter={podSearchFilter}
+      extraToolbars={[MetricModeSelector]}
     />
   )
 }