[HUD] [vLLM Profiling] Fix S3 path and add more filters for vLLM Profiling (#7196)

## Changes

- Implemented a Generic approach for showing profiling traces for any
repository.
- Implemented filters for showing profiling traces based on
"time_range", "model_name", "device_type" and "device_architecture".

## Testing

- Verified through the HUD Dashboard for a scenario when we have
profiling traces for a model (i.e. `repo`: `vllm` and `model`:
`facebook\opt-125m`) :
[link](https://torchci-6vl6o8lmz-fbopensource.vercel.app/benchmark/llms?startTime=Sat%2C%2013%20Sep%202025%2022%3A45%3A56%20GMT&stopTime=Sat%2C%2020%20Sep%202025%2022%3A45%3A56%20GMT&granularity=day&lBranch=main&lCommit=3e903b6cb4292ca1425a37cb809c1e3cddfdadcb&rBranch=main&rCommit=d88918e4c2d189eb25724a6cff9a9028c67daa07&repoName=vllm-project%2Fvllm&benchmarkName=&modelName=facebook%2Fopt-125m&backendName=All%20Backends&modeName=All%20Modes&dtypeName=All%20DType&deviceName=All%20Devices&archName=All%20Platforms)
- Verified through the HUD Dashboard for a scenario when we don't have
profiling traces for a model (i.e. `repo`: `vllm` and `model`:
`llama3-8b`):
[link](https://torchci-6vl6o8lmz-fbopensource.vercel.app/benchmark/llms?startTime=Sat%2C%2013%20Sep%202025%2022%3A45%3A56%20GMT&stopTime=Sat%2C%2020%20Sep%202025%2022%3A45%3A56%20GMT&granularity=day&lBranch=main&lCommit=3e903b6cb4292ca1425a37cb809c1e3cddfdadcb&rBranch=main&rCommit=bef180f00978186fcc84f7ca6328a6ae6c39676d&repoName=vllm-project%2Fvllm&benchmarkName=&modelName=meta-llama%2FMeta-Llama-3.1-8B-Instruct&backendName=All%20Backends&modeName=All%20Modes&dtypeName=All%20DType&deviceName=All%20Devices&archName=All%20Platforms)
- Filter based on TimeRange and Device selection (once model is
selected) also works as expected.

<img width="1708" height="220" alt="Screenshot 2025-09-20 at 3 47 37 PM"
src="https://github.com/user-attachments/assets/f985598f-968b-4793-80a3-468a30f0b79a"
/>

Author: namanlalitnyu

torchci/components/benchmark/llms/LLMsBenchmarkPage.tsx

@@ -34,8 +34,8 @@ import {
 } from "lib/benchmark/llms/utils/llmUtils";
 import { LLMsDashboardPicker } from "./components/dashboardPicker/LLMsDashboardPicker";
 import { LLMsTimeRangePicker } from "./components/dashboardPicker/LLMsTimeRangePicker";
+import { ProfilingArtifactsTable } from "./components/ProfilingArtifactsTable";
 import LLMsReport from "./components/report/LLMsReport";
-import { VllmArtifactsTable } from "./components/VllmArtifactsTable";
 
 export default function LLMsBenchmarkPage() {
   const router = useRouter();
@@ -220,9 +220,7 @@ const MainPage = ({
         metricNames={metricNames}
         benchmarkPropsQueryParams={queryParams}
       />
-      {props.repoName === "vllm-project/vllm" && (
-        <VllmArtifactsTable selectedModelName={props.modelName} />
-      )}
+      <ProfilingArtifactsTable props={props} />
     </div>
   );
 };

torchci/components/benchmark/llms/components/ProfilingArtifactsTable.tsx

@@ -0,0 +1,181 @@
+import { Alert, Grid, Link } from "@mui/material";
+import type { GridColDef } from "@mui/x-data-grid";
+import { LAST_N_DAYS } from "components/benchmark/common";
+import { TablePanelWithData } from "components/metrics/panels/TablePanel";
+import {
+  DEFAULT_ARCH_NAME,
+  DEFAULT_DEVICE_NAME,
+  DEFAULT_MODEL_NAME,
+} from "lib/benchmark/llms/common";
+import { LLMsBenchmarkProps } from "lib/benchmark/llms/types/dashboardProps";
+import type { ArtifactFile } from "lib/benchmark/llms/utils/artifacts";
+import { useArtifacts } from "lib/benchmark/llms/utils/artifacts";
+
+type ArtifactRow = ArtifactFile;
+
+const columns: GridColDef<ArtifactRow>[] = [
+  {
+    field: "date",
+    headerName: "Date",
+    flex: 0.8,
+    renderCell: (params) => params.row.date || "—",
+  },
+  {
+    field: "modelName",
+    headerName: "Model Name",
+    flex: 1.1,
+    renderCell: (params) => (
+      <span style={{ overflowWrap: "anywhere" }}>
+        {params.row.modelName.replace(/_/, "/") || "—"}
+      </span>
+    ),
+  },
+  {
+    field: "deviceType",
+    headerName: "Device Type",
+    flex: 0.8,
+    renderCell: (params) => (
+      <span style={{ overflowWrap: "anywhere" }}>
+        {params.row.deviceType || "—"}
+      </span>
+    ),
+  },
+  {
+    field: "deviceName",
+    headerName: "Device Name",
+    flex: 1.1,
+    renderCell: (params) => (
+      <span style={{ overflowWrap: "anywhere" }}>
+        {params.row.deviceName || "—"}
+      </span>
+    ),
+  },
+  {
+    field: "commitHash",
+    headerName: "Commit Hash",
+    flex: 1.0,
+    renderCell: (params) => (
+      <span style={{ overflowWrap: "anywhere" }}>
+        {params.row.commitHash || "—"}
+      </span>
+    ),
+  },
+  {
+    field: "workflowId",
+    headerName: "Workflow ID",
+    flex: 1.0,
+    renderCell: (params) => (
+      <span style={{ overflowWrap: "anywhere" }}>
+        {params.row.workflowId || "—"}
+      </span>
+    ),
+  },
+  {
+    field: "fileName",
+    headerName: "Profiler Trace",
+    flex: 1.4,
+    renderCell: (params) => (
+      <Link
+        href={params.row.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        underline="hover"
+        sx={{ overflowWrap: "anywhere" }}
+      >
+        {params.row.fileName || params.row.key}
+      </Link>
+    ),
+  },
+];
+
+type ProfilingArtifactsTableProps = {
+  props: LLMsBenchmarkProps;
+};
+
+export function ProfilingArtifactsTable({
+  props,
+}: ProfilingArtifactsTableProps) {
+  // Parse deviceName which is in format "deviceType (architecture)"
+  // e.g., "cuda (NVIDIA B200)" -> deviceType: "cuda", deviceName: "NVIDIA B200"
+  const deviceName =
+    props.deviceName === DEFAULT_DEVICE_NAME ? "" : props.deviceName;
+  const archName = props.archName === DEFAULT_ARCH_NAME ? "" : props.archName;
+
+  let device = "";
+  let arch = "";
+  if (archName === "") {
+    // All the dashboards currently put device and arch into the same field in
+    // device (arch) format, i.e. cuda (NVIDIA B200). So, we need to extract
+    // the arch name here to use it in the query
+    const deviceArchRegex = /^(.+)\s+\((.+)\)$/;
+    const m = deviceName.match(deviceArchRegex);
+
+    if (m !== null && m[1] !== undefined && m[2] !== undefined) {
+      device = m[1]; // e.g., "cuda"
+      // Extract just the architecture name from "NVIDIA B200" -> "B200"
+      const archParts = m[2].split(" ");
+      arch = archParts.length > 1 ? archParts[archParts.length - 1] : m[2];
+    } else {
+      device = deviceName;
+      arch = archName;
+    }
+  } else {
+    // If both device and arch are set, we just need to use them as they are
+    device = deviceName;
+    arch = archName;
+  }
+
+  // Replace "/" with "_" in model name for S3 path compatibility
+  const processedModelName =
+    props.modelName !== DEFAULT_MODEL_NAME && props.modelName
+      ? props.modelName.replace(/\//g, "_")
+      : undefined;
+
+  const { data, error } = useArtifacts({
+    repository: props.repoName,
+    modelName: processedModelName,
+    deviceType: device !== "" ? device : undefined,
+    deviceName: arch !== "" ? arch : undefined,
+    lookbackDays: props.timeRange > 0 ? props.timeRange : LAST_N_DAYS,
+  });
+
+  if (error) {
+    return (
+      <Grid container spacing={10} sx={{ mt: 4 }}>
+        <Grid size={{ xs: 12, lg: 11.8 }}>
+          <Alert severity="error">
+            Unable to load recent vLLM trace artifacts.
+          </Alert>
+        </Grid>
+      </Grid>
+    );
+  }
+
+  if (data && data.files.length === 0) {
+    return null;
+  }
+
+  const tableData = data ? data.files : undefined;
+
+  return (
+    <Grid container spacing={10} sx={{ mt: 4 }}>
+      <Grid size={{ xs: 12, lg: 11.8 }}>
+        <TablePanelWithData
+          title={"Profiling Traces"}
+          data={tableData}
+          columns={columns}
+          dataGridProps={{
+            getRowId: (row: ArtifactRow) => row.key,
+            disableColumnMenu: true,
+            disableRowSelectionOnClick: true,
+          }}
+          showFooter={true}
+          disableAutoPageSize={true}
+          customStyle={{
+            maxHeight: 600,
+          }}
+        />
+      </Grid>
+    </Grid>
+  );
+}

torchci/components/benchmark/llms/components/VllmArtifactsTable.tsx

@@ -1,3 +1,4 @@
+import { LAST_N_DAYS } from "components/benchmark/common";
 import { fetcher } from "lib/GeneralUtils";
 import useSWR from "swr";
 
@@ -6,6 +7,8 @@ export type ArtifactFile = {
   url: string;
   date: string;
   modelName: string;
+  deviceType: string;
+  deviceName: string;
   fileName: string;
   commitHash: string;
   workflowId: string;
@@ -16,24 +19,39 @@ export type ArtifactResponse = {
 };
 
 export type UseArtifactsOptions = {
-  prefix?: string;
-  lookbackMonths?: number;
+  repository?: string;
+  lookbackDays?: number;
+  modelName?: string;
+  deviceType?: string;
+  deviceName?: string;
 };
 
-const DEFAULT_OPTIONS: Required<Pick<UseArtifactsOptions, "lookbackMonths">> = {
-  lookbackMonths: 6,
+const DEFAULT_OPTIONS: Required<Pick<UseArtifactsOptions, "lookbackDays">> = {
+  lookbackDays: LAST_N_DAYS,
 };
 
 export const useArtifacts = (options: UseArtifactsOptions = {}) => {
   const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
   const params = new URLSearchParams();
 
-  if (options.prefix) {
-    params.set("prefix", options.prefix);
+  if (options.repository) {
+    params.set("repository", options.repository);
   }
 
-  if (mergedOptions.lookbackMonths) {
-    params.set("lookbackMonths", String(mergedOptions.lookbackMonths));
+  if (options.modelName) {
+    params.set("modelName", options.modelName);
+  }
+
+  if (options.deviceType) {
+    params.set("deviceType", options.deviceType);
+  }
+
+  if (options.deviceName) {
+    params.set("deviceName", options.deviceName);
+  }
+
+  if (mergedOptions.lookbackDays) {
+    params.set("lookbackDays", String(mergedOptions.lookbackDays));
   }
 
   const queryString = params.toString();