feat: enrich the remote logs info table

Author: esbena

extensions/ql-vscode/src/compare-performance/remote-logs.ts

@@ -22,8 +22,8 @@ import type { ProgressCallback } from "../common/vscode/progress";
 import { reportStreamProgress, withProgress } from "../common/vscode/progress";
 import { downloadTimeout, GITHUB_URL } from "../config";
 import { QueryOutputDir } from "../local-queries/query-output-dir";
-import { tmpDir } from "../tmp-dir";
 import type { ComparePerformanceDescriptionData } from "../log-insights/performance-comparison";
+import { tmpDir } from "../tmp-dir";
 
 export class RemoteLogs {
   private LOG_DOWNLOAD_AND_PROCESS_PROGRESS_STEPS = 4;
@@ -464,16 +464,17 @@ export class RemoteLogs {
     };
   }
 
-  private async getPotentialTargetInfos(
-    experimentName: string,
-  ): Promise<Array<MinimalDownloadsType["targets"]["string"]>> {
+  private async getPotentialTargetInfos(experimentName: string): Promise<{
+    targets: Array<MinimalDownloadsType["targets"]["string"]>;
+    info: MinimalDownloadsType;
+  }> {
     const tasksDir = await this.getTasksForExperiment(experimentName);
 
     const downloads = await this.getDownloadsFromTasks(tasksDir);
     void extLogger.log(
       `Found ${Object.keys(downloads.targets).length} potential targets in experiment ${experimentName}`,
     );
-    return Object.values(downloads.targets);
+    return { targets: Object.values(downloads.targets), info: downloads };
   }
 
   /**
@@ -672,8 +673,9 @@ export class RemoteLogs {
       step: 2,
       maxStep: this.PICK_TARGETS_PROGRESS_STEPS,
     });
-    const targetInfos = await this.getPotentialTargetInfos(experimentChoice);
-    if (targetInfos.length === 0) {
+    const { targets, info } =
+      await this.getPotentialTargetInfos(experimentChoice);
+    if (targets.length === 0) {
       throw new Error(
         `No targets found in experiment ${experimentChoice}. Is the experiment complete enough yet?`,
       );
@@ -684,7 +686,7 @@ export class RemoteLogs {
       maxStep: this.PICK_TARGETS_PROGRESS_STEPS,
     });
     const targetChoice1 = await window.showQuickPick(
-      targetInfos.map((t) => t.info.target_id),
+      targets.map((t) => t.info.target_id),
       {
         title: `Pick target 1`,
         ignoreFocusOut: true,
@@ -693,7 +695,7 @@ export class RemoteLogs {
     if (!targetChoice1) {
       return undefined;
     }
-    const targetInfoChoice1 = targetInfos.find(
+    const targetInfoChoice1 = targets.find(
       (t) => t.info.target_id === targetChoice1,
     )!;
     progress?.({
@@ -702,7 +704,7 @@ export class RemoteLogs {
       maxStep: this.PICK_TARGETS_PROGRESS_STEPS,
     });
     const targetChoice2 = await window.showQuickPick(
-      targetInfos
+      targets
         .filter(
           (t) =>
             t.info.target_id !== targetChoice1 &&
@@ -724,7 +726,7 @@ export class RemoteLogs {
     void extLogger.log(
       `Picked ${experimentChoice} ${targetChoice1} ${targetChoice2}`,
     );
-    const targetInfoChoice2 = targetInfos.find(
+    const targetInfoChoice2 = targets.find(
       (t) => t.info.target_id === targetChoice2,
     )!;
     return {
@@ -733,8 +735,9 @@ export class RemoteLogs {
       description: {
         kind: "remote-logs",
         experimentName: experimentChoice,
-        fromTarget: targetInfoChoice1,
-        toTarget: targetInfoChoice2,
+        fromTarget: targetChoice1,
+        toTarget: targetChoice2,
+        info,
       },
     };
   }

extensions/ql-vscode/src/log-insights/performance-comparison.ts

@@ -62,8 +62,9 @@ export type ComparePerformanceDescriptionData =
   | {
       kind: "remote-logs";
       experimentName: string;
-      fromTarget: MinimalDownloadsType["targets"]["string"];
-      toTarget: MinimalDownloadsType["targets"]["string"];
+      fromTarget: string;
+      toTarget: string;
+      info: MinimalDownloadsType;
     };
 
 export class PerformanceOverviewScanner implements EvaluationLogScanner {

extensions/ql-vscode/src/view/common/ComparePerformanceRemoteLogsDescription.tsx

@@ -1,3 +1,4 @@
+import { styled } from "styled-components";
 import type { ComparePerformanceDescriptionData } from "../../log-insights/performance-comparison";
 
 // XXX same as in dca.ts, but importing that file here hangs esbuild?!
@@ -23,50 +24,74 @@ function getActionsRunUrl(run: { repository: string; run_id: number }) {
   return `${GITHUB_URL.toString()}${run.repository}/actions/runs/${run.run_id}`;
 }
 
+function getRepoTreeUrl(source: { repository: string; sha: string }) {
+  return `${GITHUB_URL.toString()}${source.repository}/tree/${source.sha}`;
+}
+
 const TargetRow = ({
   kind,
   target,
+  info,
 }: {
   kind: string;
   target: Props["fromTarget"] | Props["toTarget"];
+  info: Props["info"];
 }) => {
+  const targetObj = info.targets[target];
+  const sourceObj = info.sources[targetObj.info.source_id];
   return (
     // TODO make these rows richer
     <tr>
       <td>{kind}</td>
-      <td>{target.info.target_id}</td>
-      <td>{target.info.variant_id}</td>
-      <td>{target.info.source_id}</td>
+      <td>{target}</td>
+      <td>
+        <a href={getRepoTreeUrl(sourceObj.info)}>
+          {sourceObj.info.repository}@{sourceObj.info.sha.slice(0, 7)}
+        </a>
+      </td>
       <td>
-        <a href={getActionsRunUrl(target.downloads["evaluator-logs"])}>
-          {target.downloads["evaluator-logs"].run_id}
+        <a href={getActionsRunUrl(targetObj.downloads["evaluator-logs"])}>
+          {targetObj.downloads["evaluator-logs"].run_id}
         </a>
       </td>
     </tr>
   );
 };
+
+const TargetTableDiv = styled.div`
+  table {
+    border-collapse: collapse;
+  }
+
+  table td {
+    padding: 5px;
+    border: 1px solid #aaa;
+  }
+
+  tr.head {
+    background: #eee;
+  }
+`;
+
 const TargetTable = ({
   fromTarget,
   toTarget,
-}: {
-  fromTarget: Props["fromTarget"];
-  toTarget: Props["toTarget"];
-}) => {
+  info,
+}: Pick<Props, "fromTarget" | "toTarget" | "info">) => {
   // show a table of the targets and their details: fullTargetId, variantId, source repository, runId
   return (
     <table>
       <thead>
         <tr>
           <th>Kind</th>
           <th>Target</th>
-          <th>Variant</th>
           <th>Source</th>
           <th>Run</th>
         </tr>
       </thead>
       <tbody>
-        <TargetRow kind="from" target={fromTarget} />
-        <TargetRow kind="to" target={toTarget} />
+        <TargetRow kind="from" target={fromTarget} info={info} />
+        <TargetRow kind="to" target={toTarget} info={info} />
       </tbody>
     </table>
   );
@@ -76,6 +101,7 @@ export const ComparePerformanceRemoteLogsDescription = ({
   experimentName,
   fromTarget,
   toTarget,
+  info,
 }: Props) => {
   return (
     <div>
@@ -85,7 +111,9 @@ export const ComparePerformanceRemoteLogsDescription = ({
           <a href={getExperimentUrl(experimentName)}>{experimentName}</a>
         </strong>
       </p>
-      {TargetTable({ fromTarget, toTarget })}
+      <TargetTableDiv>
+        <TargetTable {...{ fromTarget, toTarget, info }} />
+      </TargetTableDiv>
     </div>
   );
 };