[HUD] Show the odc repro button in more places (#7523)

Make the button show up on HUD tooltips and in the workflow box

HUD tooltip requires querying for the workflowId/run_id

line height is to make the button shorter so it doesn't change the
spacing

Author: clee2000

torchci/clickhouse_queries/hud_query/query.sql

@@ -4,6 +4,7 @@ WITH job AS (
         job.name as job_name,
         job.workflow_name as workflow_name,
         job.id as id,
+        job.run_id as workflowId,
         job.status as status,
         job.conclusion_kg as conclusion,
         job.html_url as html_url,
@@ -42,6 +43,7 @@ SELECT
     sha,
     CONCAT(workflow_name, ' / ', job_name) as name,
     id,
+    workflowId,
     multiIf(
         conclusion = ''
         and status = 'queued' ,

torchci/components/commit/WorkflowBox.tsx

@@ -9,6 +9,10 @@ import LogViewer, { SearchLogViewer } from "components/common/log/LogViewer";
 import { durationDisplay } from "components/common/TimeUtils";
 import JobArtifact from "components/job/JobArtifact";
 import JobSummary from "components/job/JobSummary";
+import {
+  canShowODCCommand,
+  ODCommandInstructions,
+} from "components/job/ODCCommand";
 import { fetcher } from "lib/GeneralUtils";
 import { getConclusionSeverityForSorting } from "lib/JobClassifierUtil";
 import { getDurationDisplay, isFailedJob } from "lib/jobUtils";
@@ -117,6 +121,19 @@ function WorkflowJobSummary({
     );
   }
 
+  if (canShowODCCommand(job)) {
+    const ODCCommand = ODCommandInstructions({
+      jobId: parseInt(job.id),
+      workflowId: parseInt(job.workflowId),
+      failureLineNum: job.failureLineNumbers[0],
+      headSha: job.sha,
+      jobName: job.name,
+    });
+    if (ODCCommand != null) {
+      subInfo.push(ODCCommand);
+    }
+  }
+
   return (
     <>
       <JobSummary job={job} unstableIssues={unstableIssues} />

torchci/components/job/JobLinks.tsx

@@ -12,7 +12,7 @@ import { useSession } from "next-auth/react";
 import { IssueLabelApiResponse } from "pages/api/issue/[label]";
 import useSWR from "swr";
 import styles from "./JobLinks.module.css";
-import { ODCommandInstructions } from "./ODCCommand";
+import { canShowODCCommand, ODCommandInstructions } from "./ODCCommand";
 import ReproductionCommand from "./ReproductionCommand";
 
 const DEFAULT_REPO = "pytorch/pytorch";
@@ -130,16 +130,7 @@ export default function JobLinks({
     }
   }
 
-  if (
-    job.repo == "pytorch/pytorch" &&
-    isFailedJob(job) &&
-    job.workflowId != null &&
-    job.id != null &&
-    job.failureLineNumbers &&
-    job.failureLineNumbers.length > 0 &&
-    job.sha != null &&
-    job.name?.includes("linux") // ODC only supports linux jobs for now
-  ) {
+  if (canShowODCCommand(job)) {
     const ODCCommand = ODCommandInstructions({
       jobId: parseInt(job.id),
       workflowId: parseInt(job.workflowId),

torchci/components/job/ODCCommand.tsx

@@ -11,11 +11,33 @@ import {
   Typography,
 } from "@mui/material";
 import { Box, Stack } from "@mui/system";
+import { isFailedJob } from "lib/jobUtils";
+import { JobData } from "lib/types";
 import { useState } from "react";
 import useSWR from "swr";
 
 const STARTING_INSTRUCTIONS = "https://fburl.com/workplace/008py9db";
 
+export function canShowODCCommand(job: JobData): job is JobData & {
+  repo: string;
+  workflowId: string;
+  id: string;
+  failureLineNumbers: number[];
+  sha: string;
+  name: string;
+} {
+  const requirementsMet =
+    job.repo == "pytorch/pytorch" &&
+    isFailedJob(job) &&
+    job.workflowId != null &&
+    job.id != null &&
+    job.failureLineNumbers &&
+    job.failureLineNumbers.length > 0 &&
+    job.sha != null &&
+    job.name?.includes("linux"); // ODC only supports linux jobs for now
+  return requirementsMet || false;
+}
+
 /**
  * Get the reproduction command for the job using osdc gpu-dev CLI
  *
@@ -117,6 +139,7 @@ export function ODCommandInstructions({
           mb: 0,
           pt: 0,
           pb: 0,
+          lineHeight: 1.2,
         }}
       >
         gpu-dev instructions