[HUD] Put time range on last_successful_jobs query (#7134)

Reason: reduces # rows that need to be scanned => reduce time and
resources.

60 days is an arbitrary limit since last docs push is currently 17 days
(we should probably investigate)

I'm too lazy to do perf right now but this should be a big improvement

Also add `getValue` function to scalar panel so you can specify how to
get your data

This is used for the last docs push query to handle the case when there
is no data

Author: clee2000

torchci/clickhouse_queries/last_successful_jobs/query.sql

@@ -10,6 +10,7 @@ where
     and job.conclusion = 'success'
     and job.head_branch = 'main'
     and job.html_url like '%/pytorch/pytorch/%' -- proxy for workflow.repository.'full_name' = 'pytorch/pytorch'
+    and job.started_at > now() - interval 60 day
 group by
     job.head_sha
 having

torchci/components/metrics/panels/ScalarPanel.tsx

@@ -66,13 +66,16 @@ export default function ScalarPanel({
   metricName,
   // Callback to decide whether the scalar value is "bad" and should be displayed red.
   badThreshold,
+  // Custom function to retrieve the value from the query
+  getValue = (_data: any) => _data?.[0]?.[metricName],
 }: {
   title: string;
   queryName: string;
   queryParams: { [key: string]: any };
   valueRenderer: (_value: any) => string;
   metricName: string;
   badThreshold: (_value: any) => boolean;
+  getValue?: (_data: any) => any;
 }) {
   const url = `/api/clickhouse/${queryName}?parameters=${encodeURIComponent(
     JSON.stringify(queryParams)
@@ -86,7 +89,7 @@ export default function ScalarPanel({
     return <Skeleton variant={"rectangular"} height={"100%"} />;
   }
 
-  const value = data.length > 0 ? data[0][metricName] : undefined;
+  const value = getValue(data);
   return (
     <ScalarPanelWithValue
       title={title}

torchci/pages/metrics.tsx

@@ -720,11 +720,16 @@ export default function Page() {
               title={"Last docs push"}
               queryName={"last_successful_jobs"}
               metricName={"last_success_seconds_ago"}
-              valueRenderer={(value) => durationDisplay(value)}
+              getValue={(data) => data?.[0]?.last_success_seconds_ago || ">60d"}
+              valueRenderer={(value) =>
+                value === ">60d" ? value : durationDisplay(value)
+              }
               queryParams={{
                 jobNames: docsJobNames,
               }}
-              badThreshold={(value) => value > 3 * 24 * 60 * 60} // 3 day
+              badThreshold={(value) =>
+                value === ">60d" || value > 3 * 24 * 60 * 60
+              } // 3 day
             />
           </Stack>
         </Grid>