[Utilization] Add url link to utilization report page (#6285)

yangw-dev · web-flow · commit 27cb51108f95 · 2025-02-13T16:12:08.000-08:00
add utilization report page navigation in workflowbox if there is any exist and ready the working demo depends on pr change: pytorch/pytorch#145310 working demo: https://torchci-1arxcelhf-fbopensource.vercel.app/pr/145310 I won't submit this util the [pr](pytorch/pytorch#145310) is sumbitted also checked such as execuTorch so far nothing is broken
diff --git a/torchci/clickhouse_queries/oss_ci_list_util_metadata_info/params.json b/torchci/clickhouse_queries/oss_ci_list_util_metadata_info/params.json
@@ -0,0 +1,7 @@
+{
+  "params": {
+    "workflowId": "UInt64",
+    "repo": "String"
+  },
+  "tests":[]
+}
diff --git a/torchci/clickhouse_queries/oss_ci_list_util_metadata_info/query.sql b/torchci/clickhouse_queries/oss_ci_list_util_metadata_info/query.sql
@@ -0,0 +1,12 @@
+SELECT
+    workflow_id,
+    job_id,
+    workflow_name,
+    job_name,
+    run_attempt,
+    repo
+FROM
+    misc.oss_ci_utilization_metadata
+WHERE
+    workflow_id = { workflowId: UInt64}
+    AND repo = {repo: String }
diff --git a/torchci/components/WorkflowBox.tsx b/torchci/components/WorkflowBox.tsx
@@ -1,8 +1,13 @@
+import { Button, styled } from "@mui/material";
 import styles from "components/commit.module.css";
 import { fetcher } from "lib/GeneralUtils";
 import { isFailedJob } from "lib/jobUtils";
 import { getSearchRes, LogSearchResult } from "lib/searchLogs";
 import { Artifact, IssueData, JobData } from "lib/types";
+import {
+  ListUtilizationMetadataInfoAPIResponse,
+  UtilizationMetadataInfo,
+} from "lib/utilization/types";
 import React, { useEffect, useState } from "react";
 import useSWR from "swr";
 import { getConclusionSeverityForSorting } from "../lib/JobClassifierUtil";
@@ -25,14 +30,22 @@ function sortJobsByConclusion(jobA: JobData, jobB: JobData): number {
   return ("" + jobA.jobName).localeCompare("" + jobB.jobName); // the '' forces the type to be a string
 }
 
+const JobButton = styled(Button)({
+  fontSize: "8px",
+  padding: "0 1px 0 1px",
+  color: "green",
+  margin: "2px",
+});
 function WorkflowJobSummary({
   job,
+  utilMetadata,
   artifacts,
   artifactsToShow,
   setArtifactsToShow,
   unstableIssues,
 }: {
   job: JobData;
+  utilMetadata?: UtilizationMetadataInfo[];
   artifacts?: Artifact[];
   artifactsToShow: Set<string>;
   setArtifactsToShow: any;
@@ -73,15 +86,34 @@ function WorkflowJobSummary({
 
   if (hasArtifacts) {
     subInfo.push(
-      <a onClick={() => setArtifactsToShowHelper()}>Show artifacts</a>
+      <JobButton variant="outlined" onClick={() => setArtifactsToShowHelper()}>
+        artifacts
+      </JobButton>
     );
   }
-
   if (job.logUrl) {
     subInfo.push(
-      <a target="_blank" rel="noreferrer" href={job.logUrl}>
+      <JobButton variant="outlined" href={job.logUrl}>
         Raw logs
-      </a>
+      </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];
+    subInfo.push(
+      <>
+        <JobButton
+          variant="outlined"
+          href={`/utilization/${m.workflow_id}/${m.job_id}/${m.run_attempt}`}
+        >
+          Utilization Report{" "}
+        </JobButton>
+      </>
     );
   }
 
@@ -95,7 +127,7 @@ function WorkflowJobSummary({
           return (
             <span key={ind}>
               {info}
-              {ind < subInfo.length - 1 && ", "}
+              {ind < subInfo.length - 1 && " "}
             </span>
           );
         })}
@@ -124,18 +156,20 @@ export default function WorkflowBox({
   setWide: any;
   repoFullName: string;
 }) {
+  const workflowId = jobs[0].workflowId;
   const isFailed = jobs.some(isFailedJob) !== false;
   const workflowClass = isFailed
     ? styles.workflowBoxFail
     : styles.workflowBoxSuccess;
 
-  const workflowId = jobs[0].workflowId;
   const anchorName = encodeURIComponent(workflowName.toLowerCase());
 
+  const { utilMetadataList } = useUtilMetadata(workflowId);
+  const groupUtilMetadataList = groupMetadataByJobId(utilMetadataList);
+
   const { artifacts, error } = useArtifacts(workflowId);
   const [artifactsToShow, setArtifactsToShow] = useState(new Set<string>());
   const groupedArtifacts = groupArtifacts(jobs, artifacts);
-
   const [searchString, setSearchString] = useState("");
   const [searchRes, setSearchRes] = useState<{
     results: Map<string, LogSearchResult>;
@@ -144,6 +178,7 @@ export default function WorkflowBox({
     results: new Map(),
     info: undefined,
   });
+
   useEffect(() => {
     getSearchRes(jobs, searchString, setSearchRes);
   }, [jobs, searchString]);
@@ -216,6 +251,11 @@ export default function WorkflowBox({
           <div key={job.id} id={`${job.id}-box`}>
             <WorkflowJobSummary
               job={job}
+              utilMetadata={
+                job.id
+                  ? groupUtilMetadataList.get(job.id.toString())
+                  : undefined
+              }
               artifacts={groupedArtifacts?.get(job.id?.toString())}
               artifactsToShow={artifactsToShow}
               setArtifactsToShow={setArtifactsToShow}
@@ -236,6 +276,43 @@ export default function WorkflowBox({
   );
 }
 
+function useUtilMetadata(workflowId: string | undefined): {
+  utilMetadataList: UtilizationMetadataInfo[];
+  metaError: any;
+} {
+  const { data, error } = useSWR<ListUtilizationMetadataInfoAPIResponse>(
+    `/api/list_utilization_metadata_info/${workflowId}`,
+    fetcher,
+    {
+      refreshInterval: 60 * 1000, // refresh every minute
+      // Refresh even when the user isn't looking, so that switching to the tab
+      // will always have fresh info.
+      refreshWhenHidden: true,
+    }
+  );
+
+  if (!workflowId) {
+    return { utilMetadataList: [], metaError: "No workflow ID" };
+  }
+
+  if (error != null) {
+    return {
+      utilMetadataList: [],
+      metaError: "Error occured while fetching util metadata",
+    };
+  }
+
+  if (data == null) {
+    return { utilMetadataList: [], metaError: "Loading..." };
+  }
+
+  if (data.metadata_list == null) {
+    return { utilMetadataList: [], metaError: "No metadata list found" };
+  }
+
+  return { utilMetadataList: data.metadata_list, metaError: null };
+}
+
 function useArtifacts(workflowId: string | undefined): {
   artifacts: Artifact[];
   error: any;
@@ -260,6 +337,25 @@ function useArtifacts(workflowId: string | undefined): {
   return { artifacts: data, error };
 }
 
+function groupMetadataByJobId(
+  utilMetadataList: UtilizationMetadataInfo[]
+): Map<string, UtilizationMetadataInfo[]> {
+  const grouping = new Map<string, UtilizationMetadataInfo[]>();
+  for (const utilMetadata of utilMetadataList) {
+    if (!utilMetadata.job_id) {
+      continue;
+    }
+
+    const jobId = utilMetadata.job_id.toString();
+    if (grouping.has(jobId)) {
+      grouping.get(jobId)!.push(utilMetadata);
+    } else {
+      grouping.set(jobId, [utilMetadata]);
+    }
+  }
+  return grouping;
+}
+
 function groupArtifacts(jobs: JobData[], artifacts: Artifact[]) {
   // Group artifacts by job id if possible
   const jobIds = jobs.map((job) => job.id?.toString());
diff --git a/torchci/lib/utilization/fetchListUtilizationMetadataInfo.ts b/torchci/lib/utilization/fetchListUtilizationMetadataInfo.ts
@@ -0,0 +1,36 @@
+import { queryClickhouseSaved } from "lib/clickhouse";
+import {
+  ListUtilizationMetadataInfoAPIResponse,
+  ListUtilizationMetadataInfoParams,
+  UTILIZATION_DEFAULT_REPO,
+  UtilizationMetadataInfo,
+} from "./types";
+const LIST_UTIL_METADATA_INFO_QUERY_FOLDER_NAME =
+  "oss_ci_list_util_metadata_info";
+
+export default async function fetchListUtilizationMetadataInfo(
+  params: ListUtilizationMetadataInfoParams
+): Promise<ListUtilizationMetadataInfoAPIResponse> {
+  const meta_resp = await getUtilizationMetadataInfo(
+    params.workflow_id,
+    params.repo
+  );
+
+  return {
+    metadata_list: meta_resp ? meta_resp : ([] as UtilizationMetadataInfo[]),
+  };
+}
+
+async function getUtilizationMetadataInfo(
+  workflow_id: string,
+  repo: string = UTILIZATION_DEFAULT_REPO
+) {
+  const response = await queryClickhouseSaved(
+    LIST_UTIL_METADATA_INFO_QUERY_FOLDER_NAME,
+    {
+      workflowId: workflow_id,
+      repo: repo,
+    }
+  );
+  return response;
+}
diff --git a/torchci/lib/utilization/fetchUtilization.ts b/torchci/lib/utilization/fetchUtilization.ts
@@ -3,23 +3,24 @@ import {
   TimeSeriesDataPoint,
   TimeSeriesDbData,
   TimeSeriesWrapper,
+  UTILIZATION_DEFAULT_REPO,
   UtilizationAPIResponse,
   UtilizationMetadata,
   UtilizationParams,
 } from "./types";
 
-const DEFAULT_REPO = "pytorch/pytorch";
 const UTIL_TS_QUERY_FOLDER_NAME = "oss_ci_util_ts";
-const UTIL_METADATA_QUERY_FOLDER_NAME = "oss_ci_util_metadata";
 const UTILIZATION_TYPE = "utilization";
+const UTIL_METADATA_QUERY_FOLDER_NAME = "oss_ci_util_metadata";
 
 export default async function fetchUtilization(
   params: UtilizationParams
 ): Promise<UtilizationAPIResponse | null> {
   const meta_resp: UtilizationMetadata[] = await getUtilizationMetadata(
     params.workflow_id,
     params.job_id,
-    params.run_attempt
+    params.run_attempt,
+    params.repo
   );
 
   const metadata = getLatestMetadata(meta_resp);
@@ -40,7 +41,8 @@ export default async function fetchUtilization(
   const resp: TimeSeriesDbData[] = await getUtilTimesSeries(
     params.workflow_id,
     params.job_id,
-    params.run_attempt
+    params.run_attempt,
+    params.repo
   );
   const tsMap = flattenTS(resp);
 
@@ -61,29 +63,31 @@ export default async function fetchUtilization(
 async function getUtilTimesSeries(
   workflow_id: string,
   job_id: string,
-  run_attempt: string
+  run_attempt: string,
+  repo: string = UTILIZATION_DEFAULT_REPO
 ) {
   const response = await queryClickhouseSaved(UTIL_TS_QUERY_FOLDER_NAME, {
     workflowId: workflow_id,
     jobId: job_id,
     runAttempt: run_attempt,
     type: UTILIZATION_TYPE,
-    repo: DEFAULT_REPO,
+    repo: repo,
   });
   return response;
 }
 
 async function getUtilizationMetadata(
   workflow_id: string,
   job_id: string,
-  run_attempt: string
+  run_attempt: string,
+  repo: string = UTILIZATION_DEFAULT_REPO
 ) {
   const response = await queryClickhouseSaved(UTIL_METADATA_QUERY_FOLDER_NAME, {
     workflowId: workflow_id,
     jobId: job_id,
     runAttempt: run_attempt,
     type: UTILIZATION_TYPE,
-    repo: DEFAULT_REPO,
+    repo: repo,
   });
   return response;
 }
diff --git a/torchci/lib/utilization/types.ts b/torchci/lib/utilization/types.ts
@@ -1,7 +1,10 @@
+export const UTILIZATION_DEFAULT_REPO = "pytorch/pytorch";
+
 export interface UtilizationParams {
   workflow_id: string;
   job_id: string;
   run_attempt: string;
+  repo?: string;
 }
 
 export interface TimeSeriesDbData {
@@ -48,3 +51,21 @@ export interface TimeSeriesDataPoint {
   ts: string;
   value: number;
 }
+
+export interface UtilizationMetadataInfo {
+  workflow_id: string;
+  job_id: string;
+  run_attempt: string;
+  workflow_name: string;
+  job_name: string;
+  repo: string;
+}
+
+export interface ListUtilizationMetadataInfoParams {
+  workflow_id: string;
+  repo?: string;
+}
+
+export interface ListUtilizationMetadataInfoAPIResponse {
+  metadata_list: UtilizationMetadataInfo[];
+}
diff --git a/torchci/pages/api/list_utilization_metadata_info/[workflowId].ts b/torchci/pages/api/list_utilization_metadata_info/[workflowId].ts
