Not call list util metadata in workflow box (#7503)

we run into some memory issues, so improve some utilization queries:

1. list_util_metadata is called when a commit page is loaded, let's just
show the button when a job is finished, if no util is record, let the
page handle it.
2. change the util api to job_utilization, and not call the api unless
the workflowId and jobId is ready

Author: yangw-dev

torchci/components/additionalTestInfo/TestInfo.tsx

@@ -37,6 +37,10 @@ export function genMessage({
   return errorString.trim();
 }
 
+export function isPendingJob(job: JobData) {
+  return IsJobInProgress(job.conclusion);
+}
+
 export function isPending(jobs: JobData[]) {
   return jobs.some((job) => IsJobInProgress(job.conclusion));
 }

torchci/components/commit/WorkflowBox.tsx

@@ -1,5 +1,9 @@
 import { Button, Stack, styled, Tooltip, Typography } from "@mui/material";
-import { isPending, TestInfo } from "components/additionalTestInfo/TestInfo";
+import {
+  isPending,
+  isPendingJob,
+  TestInfo,
+} from "components/additionalTestInfo/TestInfo";
 import styles from "components/commit/commit.module.css";
 import LogViewer, { SearchLogViewer } from "components/common/log/LogViewer";
 import { durationDisplay } from "components/common/TimeUtils";
@@ -97,18 +101,13 @@ function WorkflowJobSummary({
       </JobButton>
     );
   }
-  if (utilMetadata && utilMetadata.length > 0) {
-    if (utilMetadata.length > 1) {
-      console.log(
-        `Multiple util metadata found for job ${job.id}, currently only showing the first one`
-      );
-    }
-    const m = utilMetadata[0];
+  if (job.id && !isPendingJob(job)) {
+    const m = job;
     subInfo.push(
       <>
         <JobButton
           variant="outlined"
-          href={`/utilization/${m.workflow_id}/${m.job_id}/${m.run_attempt}`}
+          href={`/utilization/${m.workflowId}/${m.id}/${m.runAttempt}`}
           data-ga-action="utilization_report_click"
           data-ga-label="nav_button"
           data-ga-category="user_interaction"

torchci/pages/api/utilization/[workflowId]/[jobId]/[attempt].ts renamed to torchci/pages/api/job_utilization/[workflowId]/[jobId]/[attempt].ts

@@ -2,15 +2,30 @@ import { getErrorMessage } from "lib/error_utils";
 import fetchUtilization from "lib/utilization/fetchUtilization";
 import { UtilizationParams } from "lib/utilization/types";
 import { NextApiRequest, NextApiResponse } from "next";
+import { getServerSession } from "next-auth";
+import { authOptions } from "pages/api/auth/[...nextauth]";
 
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
   const { workflowId, jobId, attempt } = req.query;
-  if (workflowId === undefined || jobId === undefined || attempt == undefined) {
+
+  // @ts-ignore
+  const session = await getServerSession(req, res, authOptions);
+  if (!session?.user || !session?.accessToken) {
+    return res
+      .status(401)
+      .json({ error: "Authentication required to require utilization data" });
+  }
+
+  if (!workflowId || !jobId || !attempt) {
+    console.log(
+      "[api job_utilization][warning] No workflowId, jobId, or attempt provided"
+    );
     return res.status(200).json({});
   }
+
   const params: UtilizationParams = {
     workflow_id: workflowId as string,
     run_attempt: attempt as string,

torchci/pages/utilization/[workflowId]/[jobId]/[attempt]/[[...page]].tsx

@@ -9,8 +9,11 @@ const JobUtilization = () => {
   const router = useRouter();
   const { workflowId, jobId, attempt } = router.query;
 
+  let shouldFetch = workflowId && jobId;
   let { data, error } = useSWRImmutable(
-    `/api/utilization/${workflowId}/${jobId}/${attempt}`,
+    shouldFetch
+      ? `/api/job_utilization/${workflowId}/${jobId}/${attempt}`
+      : null,
     fetcherHandleError,
     {
       errorRetryCount: 3,