[HUD] page for CI build metrics (#6272)

General part for viewing build time + how long the major steps take
<img width="1701" alt="image"
src="https://github.com/user-attachments/assets/239bfc1f-b701-4791-afa6-d4e1cc11119e"
/>

Sccache stats for a certain job:
<img width="1694" alt="image"
src="https://github.com/user-attachments/assets/28f9464b-8621-4629-ae59-c66101b94b91"
/>

torchci/clickhouse_queries/build_time_metrics/overall/params.json

@@ -0,0 +1,8 @@
+{
+  "params": {
+    "startTime": "DateTime64(3)",
+    "stopTime": "DateTime64(3)",
+    "granularity": "String"
+  },
+  "tests": []
+}

torchci/clickhouse_queries/build_time_metrics/overall/query.sql

@@ -0,0 +1,16 @@
+select
+    date_trunc({granularity: String}, j.started_at) as bucket,
+    round(avg(date_diff('second', j.started_at, j.completed_at)), 2)
+        as duration_sec,
+    j.name as job_name
+from default.workflow_job j
+where
+    j.started_at >= {startTime: DateTime64(3) }
+    and j.started_at < {stopTime: DateTime64(3) }
+    and j.conclusion = 'success'
+    and j.html_url like '%pytorch/pytorch%'
+    and j.workflow_name in ('pull', 'trunk', 'periodic', 'inductor', 'slow')
+    and j.name like '% / build'
+group by bucket, job_name
+having count(*) > 10
+order by bucket, job_name

torchci/clickhouse_queries/build_time_metrics/sccache_stats/params.json

@@ -0,0 +1,8 @@
+{
+  "params": {
+    "startTime": "DateTime64(3)",
+    "stopTime": "DateTime64(3)",
+    "jobName": "String"
+  },
+  "tests": []
+}

torchci/clickhouse_queries/build_time_metrics/sccache_stats/query.sql

@@ -0,0 +1,43 @@
+with jobs as (
+    select
+        j.created_at as created_at,
+        j.id::UInt64 as id
+    from
+        default.workflow_job j
+    where
+        j.created_at >= {startTime: DateTime64(3) }
+        and j.created_at < {stopTime: DateTime64(3) }
+        and j.conclusion = 'success'
+        and j.name = {jobName: String }
+)
+
+select
+    toStartOfInterval(j.created_at, interval 6 hour) as bucket,
+    round(avg(b.metric.'benchmark_values'[1]), 2) as build_time,
+    -- Some stuff to make the casting work even though it shouldn't be necessary
+    avgMap(mapApply(
+        (k, v) -> (k, accurateCastOrDefault(v, 'UInt64')),
+        b.metric. 'extra_info'
+    )) as avgStats,
+    minMap(mapApply(
+        (k, v) -> (k, accurateCastOrDefault(v, 'UInt64')),
+        b.metric. 'extra_info'
+    )) as minStats,
+    maxMap(mapApply(
+        (k, v) -> (k, accurateCastOrDefault(v, 'UInt64')),
+        b.metric. 'extra_info'
+    )) as maxStats,
+    quantileMap(mapApply(
+        (k, v) -> (k, accurateCastOrDefault(v, 'UInt64')),
+        b.metric. 'extra_info'
+    )) as medStats
+from
+    benchmark.oss_ci_benchmark_v3 b
+join jobs as j on j.id = b.job_id
+where
+    b.benchmark.'name' = 'sccache_stats'
+    and b.job_id in (select id from jobs)
+group by
+    bucket
+having
+    count(*) > 10

torchci/clickhouse_queries/build_time_metrics/steps/params.json

@@ -0,0 +1,7 @@
+{
+  "params": {
+    "startTime": "DateTime64(3)",
+    "stopTime": "DateTime64(3)"
+  },
+  "tests": []
+}

torchci/clickhouse_queries/build_time_metrics/steps/query.sql

@@ -0,0 +1,26 @@
+select
+    j.name as job_name,
+    round(
+        avg(
+            DATE_DIFF('second', step.started_at, step.completed_at)
+        ) / 60,
+        2
+    ) as duration_min,
+    step.name as step_name,
+    count(*) as count
+from
+    default .workflow_job j array
+    join j.steps as step
+where
+    j.created_at >= {startTime: DateTime64(3)}
+    and j.created_at < {stopTime: DateTime64(3)}
+    and step.conclusion = 'success'
+    and j.name like '% / build'
+    and j.workflow_name in ('pull', 'trunk', 'periodic', 'slow', 'inductor')
+    and step.name in ('Build', 'Pull docker image', 'Checkout PyTorch')
+    and j.html_url like '%/pytorch/pytorch/%'
+group by
+    job_name,
+    step_name
+having
+    count(*) > 10

torchci/components/NavBar.tsx

@@ -100,6 +100,10 @@ function NavBar() {
       name: "Query Execution Metrics",
       href: "/query_execution_metrics",
     },
+    {
+      name: "Build Time Metrics",
+      href: "/build_time_metrics",
+    },
   ];
 
   return (

torchci/components/common/CheckBoxList.tsx

@@ -0,0 +1,85 @@
+import {
+  Button as _Button,
+  Stack as _Stack,
+  Checkbox,
+  FormControlLabel,
+  List,
+  ListItem,
+  TextField,
+} from "@mui/material";
+import { useState } from "react";
+
+const Button = (props: any) => <_Button variant="contained" {...props} />;
+const Stack = (props: any) => <_Stack spacing={2} {...props} />;
+
+export default function CheckBoxList({
+  items,
+  onChange,
+  onClick,
+}: {
+  items: { [key: string]: boolean };
+  onChange: (value: { [key: string]: boolean }) => void;
+  onClick: (value: string) => void;
+}) {
+  // Creates a filter search box, two buttons to select all and unselect all,
+  // and a list of checkboxes. Good for manual legends for charts
+  const [filter, setFilter] = useState("");
+  const filteredItems = Object.keys(items).filter((item) =>
+    item.includes(filter)
+  );
+
+  function toggleAllfilteredItems(checked: boolean) {
+    onChange({
+      ...items,
+      ...filteredItems.reduce((acc, item) => {
+        acc[item] = checked;
+        return acc;
+      }, {} as any),
+    });
+  }
+
+  return (
+    <Stack>
+      <TextField
+        label="Filter"
+        onChange={(e) => {
+          setFilter(e.target.value);
+        }}
+      />
+      <Stack direction="row">
+        <Button
+          onClick={() => {
+            toggleAllfilteredItems(true);
+          }}
+        >
+          Select All
+        </Button>
+        <Button
+          onClick={() => {
+            toggleAllfilteredItems(false);
+          }}
+        >
+          Unselect All
+        </Button>
+      </Stack>
+      <List dense>
+        {filteredItems.map((item) => (
+          <ListItem key={item}>
+            <FormControlLabel
+              control={<Checkbox checked={items[item]} />}
+              label={item}
+              onChange={(e) => {
+                onClick(item);
+                onChange({
+                  ...items,
+                  // @ts-ignore
+                  [item]: e.target.checked,
+                });
+              }}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </Stack>
+  );
+}