[HUD] Enhance queue time visualization with color coding and sorting (#6985)

Adds correct sorting by default & color coding.


Before:
<img width="688" height="392" alt="image"
src="https://github.com/user-attachments/assets/b7682b74-8736-463c-8c37-3ebd7317149e"
/>


After:
<img width="698" height="377" alt="image"
src="https://github.com/user-attachments/assets/9ab82a9b-1cb2-4dfe-ba76-f0af40ea5da8"
/>

Author: izaitsevfb

torchci/pages/metrics.tsx

@@ -813,10 +813,33 @@ export default function Page() {
                 headerName: "Queue time",
                 flex: 1,
                 valueFormatter: (params: number) => durationDisplay(params),
+                cellClassName: (params) => {
+                  const queueTimeHours = params.value / 3600;
+                  if (queueTimeHours >= 4) return "queue-time-red";
+                  if (queueTimeHours >= 1) return "queue-time-yellow";
+                  return "";
+                },
               },
               { field: "machine_type", headerName: "Machine Type", flex: 4 },
             ]}
-            dataGridProps={{ getRowId: (el: any) => el.machine_type }}
+            dataGridProps={{
+              getRowId: (el: any) => el.machine_type,
+              initialState: {
+                sorting: {
+                  sortModel: [{ field: "avg_queue_s", sort: "desc" }],
+                },
+              },
+              sx: {
+                "& .queue-time-yellow": {
+                  backgroundColor: "#B8860B", // Dark goldenrod
+                  color: "white",
+                },
+                "& .queue-time-red": {
+                  backgroundColor: "#B22222", // Fire brick red
+                  color: "white",
+                },
+              },
+            }}
           />
         </Grid2>