diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/CpuUsageProgress.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/CpuUsageProgress.tsx index b33ec120c..626ea6ee7 100644 --- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/CpuUsageProgress.tsx +++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/CpuUsageProgress.tsx @@ -22,7 +22,7 @@ export const CpuUsageProgress = () => {
- + CPU: {deviceName?.full_device_name} diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/Gpu1UsageProgress.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/Gpu1UsageProgress.tsx deleted file mode 100644 index e724fd7fd..000000000 --- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/Gpu1UsageProgress.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { useMetrics } from "@/features/metrics/useMetrics"; -import { - Progress, - ProgressIndicator, - ProgressLabel, - ProgressTrack, - ProgressValue, -} from "@/components/ui/progress"; -import { Gpu } from "lucide-react"; -import { useAppSelector } from "@/store/hooks.ts"; -import { selectDeviceByName } from "@/store/reducers/devices.ts"; - -export const Gpu1UsageProgress = () => { - const { gpu1 } = useMetrics(); - const deviceName = useAppSelector((state) => - selectDeviceByName(state, "GPU.1"), - ); - - return ( - - <> -
- - - - GPU: {deviceName?.full_device_name} - - - - {(_, value) => `${value?.toFixed(2) ?? 0}%`} - -
- - - - - - ); -}; diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/GpuUsageProgress.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/GpuUsageProgress.tsx index 92c06e8a8..d353679fb 100644 --- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/GpuUsageProgress.tsx +++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/GpuUsageProgress.tsx @@ -8,32 +8,51 @@ import { } from "@/components/ui/progress"; import { Gpu } from "lucide-react"; import { useAppSelector } from "@/store/hooks.ts"; -import { selectDeviceByFamily } from "@/store/reducers/devices.ts"; +import { selectGpuDevices } from "@/store/reducers/devices.ts"; export const GpuUsageProgress = () => { - const { gpu } = useMetrics(); - const deviceName = useAppSelector((state) => - selectDeviceByFamily(state, "GPU"), + const { gpus } = useMetrics(); + const gpuDevices = useAppSelector(selectGpuDevices); + + const deviceMap = new Map( + gpuDevices.map((device) => { + // Handle both single card "GPU" and multiple cards "GPU.0", "GPU.1" + const id = + device.device_name === "GPU" + ? "0" + : device.device_name.replace("GPU.", ""); + return [id, device]; + }), ); return ( - - <> -
- - - - GPU: {deviceName?.full_device_name} - - - - {(_, value) => `${value?.toFixed(2) ?? 0}%`} - -
- - - - - + <> + {gpus.map((gpu) => { + const device = deviceMap.get(gpu.id); + const deviceLabel = device?.device_name || `GPU.${gpu.id}`; + const deviceFullName = device?.full_device_name || "Unknown GPU"; + + return ( + + <> +
+ + + + {deviceLabel}: {deviceFullName} + + + + {(_, value) => `${value?.toFixed(2) ?? 0}%`} + +
+ + + + + + ); + })} + ); }; diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/useMetrics.ts b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/useMetrics.ts index 7f88250c2..5e1fd8d4e 100644 --- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/useMetrics.ts +++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/features/metrics/useMetrics.ts @@ -2,21 +2,21 @@ import { useAppSelector } from "@/store/hooks.ts"; import { selectCpuMetric, selectFpsMetric, - selectGpu1Metric, selectGpuMetric, + selectAllGpuMetrics, } from "@/store/reducers/metrics.ts"; export const useMetrics = () => { const fps = useAppSelector(selectFpsMetric); const cpu = useAppSelector(selectCpuMetric); const gpu = useAppSelector(selectGpuMetric); - const gpu1 = useAppSelector(selectGpu1Metric); + const gpus = useAppSelector(selectAllGpuMetrics); return { fps: fps ?? 0, cpu: cpu ?? 0, gpu: gpu ?? 0, - gpu1: gpu1 ?? 0, + gpus: gpus ?? [], npu: 0, }; }; diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Home.tsx b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Home.tsx index 122585e21..800a05361 100644 --- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Home.tsx +++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/pages/Home.tsx @@ -17,16 +17,14 @@ import pipeline0 from "@/assets/pipeline_0.png"; import pipeline1 from "@/assets/pipeline_1.png"; import pipeline2 from "@/assets/pipeline_2.png"; import type { Pipeline } from "@/api/api.generated"; -import { selectHasGPU1, selectHasNPU } from "@/store/reducers/devices.ts"; +import { selectHasNPU } from "@/store/reducers/devices.ts"; import { NpuUsageProgress } from "@/features/metrics/NpuUsageProgress.tsx"; -import { Gpu1UsageProgress } from "@/features/metrics/Gpu1UsageProgress.tsx"; const pipelineImages = [pipeline0, pipeline1, pipeline2]; const Home = () => { const pipelines = useAppSelector(selectPipelines); - const hasGpu1 = useAppSelector(selectHasGPU1); const hasNpu = useAppSelector(selectHasNPU); const predefinedPipelines = @@ -143,7 +141,6 @@ const Home = () => {

Resource utilization

- {hasGpu1 && } {hasNpu && }

Learning and support

diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/store/reducers/devices.ts b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/store/reducers/devices.ts index 032803cc9..07bb5e84a 100644 --- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/store/reducers/devices.ts +++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/store/reducers/devices.ts @@ -20,10 +20,14 @@ const devicesSlice = createSlice({ state.items = action.payload; state.lastFetched = Date.now(); }, + setTestDevices: (state, action: { payload: Device[] }) => { + state.items = action.payload; + state.lastFetched = Date.now(); + }, }, }); -export const { setDevices } = devicesSlice.actions; +export const { setDevices, setTestDevices } = devicesSlice.actions; // Base selector export const selectDevices = (state: RootState) => state.devices.items; @@ -41,12 +45,14 @@ export const selectDeviceByName = (state: RootState, deviceName: string) => export const selectDeviceByFamily = (state: RootState, deviceFamily: string) => selectDevices(state).find((device) => device.device_family === deviceFamily); -export const selectHasGPU1 = createSelector([selectDevices], (devices) => - devices.some((device) => device.device_name === "GPU.1"), -); - export const selectHasNPU = createSelector([selectDevices], (devices) => devices.some((device) => device.device_family === "NPU"), ); +export const selectGpuDevices = createSelector([selectDevices], (devices) => + devices + .filter((device) => device.device_family === "GPU") + .sort((d1, d2) => d1.device_name.localeCompare(d2.device_name)), +); + export default devicesSlice.reducer; diff --git a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/store/reducers/metrics.ts b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/store/reducers/metrics.ts index fe6f1042d..6faaa9fe8 100644 --- a/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/store/reducers/metrics.ts +++ b/tools/visual-pipeline-and-platform-evaluation-tool/ui/src/store/reducers/metrics.ts @@ -104,17 +104,31 @@ export const selectGpuMetric = (state: RootState) => (m) => m.name === "gpu_engine_usage" && ["compute", "render", "ccs"].includes(m.tags?.engine ?? "") && - m.tags?.gpu_id === "0" && - (m.fields.usage as number) > 0, + m.tags?.gpu_id === "0", )?.fields?.usage as number | undefined; -export const selectGpu1Metric = (state: RootState) => - state.metrics.metrics.find( +export const selectAllGpuMetrics = (state: RootState) => { + const gpuMetrics = state.metrics.metrics.filter( (m) => m.name === "gpu_engine_usage" && - ["compute", "render", "ccs"].includes(m.tags?.engine ?? "") && - m.tags?.gpu_id === "1" && - (m.fields.usage as number) > 0, - )?.fields?.usage as number | undefined; + ["compute", "render", "ccs"].includes(m.tags?.engine ?? ""), + ); + + // group by gpu_id and return the first metric for each GPU + const gpuMap = new Map(); + gpuMetrics.forEach((metric) => { + const gpuId = metric.tags?.gpu_id; + if (gpuId && !gpuMap.has(gpuId)) { + gpuMap.set(gpuId, { + id: gpuId, + usage: metric.fields.usage as number, + }); + } + }); + + return Array.from(gpuMap.values()).sort((gpu1, gpu2) => + gpu1.id.localeCompare(gpu2.id), + ); +}; export default metrics.reducer;