Add model alerts stats to the view (#3481)

Author: shati-patel

extensions/ql-vscode/src/common/interface-types.ts

@@ -737,6 +737,11 @@ interface OpenModelPackMessage {
   path: string;
 }
 
+interface OpenActionsLogsMessage {
+  t: "openActionsLogs";
+  variantAnalysisId: number;
+}
+
 interface StopEvaluationRunMessage {
   t: "stopEvaluationRun";
 }
@@ -750,4 +755,5 @@ export type ToModelAlertsMessage =
 export type FromModelAlertsMessage =
   | CommonFromViewMessages
   | OpenModelPackMessage
+  | OpenActionsLogsMessage
   | StopEvaluationRunMessage;

extensions/ql-vscode/src/model-editor/model-alerts/model-alerts-view.ts

@@ -91,6 +91,12 @@ export class ModelAlertsView extends AbstractWebview<
       case "openModelPack":
         await this.app.commands.execute("revealInExplorer", Uri.file(msg.path));
         break;
+      case "openActionsLogs":
+        await this.app.commands.execute(
+          "codeQL.openVariantAnalysisLogs",
+          msg.variantAnalysisId,
+        );
+        break;
       case "stopEvaluationRun":
         await this.stopEvaluationRun();
         break;

extensions/ql-vscode/src/stories/model-alerts/ModelAlertsHeader.stories.tsx

@@ -13,6 +13,12 @@ export default {
         disable: true,
       },
     },
+    onViewLogsClick: {
+      action: "view-logs-clicked",
+      table: {
+        disable: true,
+      },
+    },
     stopRunClick: {
       action: "stop-run-clicked",
       table: {

extensions/ql-vscode/src/view/model-alerts/ModelAlerts.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from "react";
-import { ModelAlertsHeader } from "./ModelAlertsHeader";
 import type { ModelAlertsViewState } from "../../model-editor/shared/view-state";
 import type { ToModelAlertsMessage } from "../../common/interface-types";
 import type {
@@ -8,6 +7,7 @@ import type {
   VariantAnalysisScannedRepositoryState,
 } from "../../variant-analysis/shared/variant-analysis";
 import { vscode } from "../vscode-api";
+import { ModelAlertsHeader } from "./ModelAlertsHeader";
 
 type Props = {
   initialViewState?: ModelAlertsViewState;
@@ -102,12 +102,23 @@ export function ModelAlerts({
     return <></>;
   }
 
+  const openLogs = () => {
+    vscode.postMessage({
+      t: "openActionsLogs",
+      variantAnalysisId: variantAnalysis.id,
+    });
+  };
+
+  const onViewLogsClick =
+    variantAnalysis.actionsWorkflowRunId === undefined ? undefined : openLogs;
+
   return (
     <>
       <ModelAlertsHeader
         viewState={viewState}
         variantAnalysis={variantAnalysis}
         openModelPackClick={onOpenModelPackClick}
+        onViewLogsClick={onViewLogsClick}
         stopRunClick={onStopRunClick}
       ></ModelAlertsHeader>
       <div>

extensions/ql-vscode/src/view/model-alerts/ModelAlertsHeader.tsx

@@ -1,14 +1,24 @@
+import { useMemo } from "react";
+import { parseDate } from "../../common/date";
 import { styled } from "styled-components";
 import type { ModelAlertsViewState } from "../../model-editor/shared/view-state";
+import {
+  getSkippedRepoCount,
+  getTotalResultCount,
+  hasRepoScanCompleted,
+  isRepoScanSuccessful,
+} from "../../variant-analysis/shared/variant-analysis";
 import type { VariantAnalysis } from "../../variant-analysis/shared/variant-analysis";
 import { ViewTitle } from "../common";
 import { ModelAlertsActions } from "./ModelAlertsActions";
 import { ModelPacks } from "./ModelPacks";
+import { VariantAnalysisStats } from "../variant-analysis/VariantAnalysisStats";
 
 type Props = {
   viewState: ModelAlertsViewState;
   variantAnalysis: VariantAnalysis;
   openModelPackClick: (path: string) => void;
+  onViewLogsClick?: () => void;
   stopRunClick: () => void;
 };
 
@@ -26,8 +36,31 @@ export const ModelAlertsHeader = ({
   viewState,
   variantAnalysis,
   openModelPackClick,
+  onViewLogsClick,
   stopRunClick,
 }: Props) => {
+  const totalScannedRepositoryCount = useMemo(() => {
+    return variantAnalysis.scannedRepos?.length ?? 0;
+  }, [variantAnalysis.scannedRepos]);
+  const completedRepositoryCount = useMemo(() => {
+    return (
+      variantAnalysis.scannedRepos?.filter((repo) => hasRepoScanCompleted(repo))
+        ?.length ?? 0
+    );
+  }, [variantAnalysis.scannedRepos]);
+  const successfulRepositoryCount = useMemo(() => {
+    return (
+      variantAnalysis.scannedRepos?.filter((repo) => isRepoScanSuccessful(repo))
+        ?.length ?? 0
+    );
+  }, [variantAnalysis.scannedRepos]);
+  const resultCount = useMemo(() => {
+    return getTotalResultCount(variantAnalysis.scannedRepos);
+  }, [variantAnalysis.scannedRepos]);
+  const skippedRepositoryCount = useMemo(() => {
+    return getSkippedRepoCount(variantAnalysis.skippedRepos);
+  }, [variantAnalysis.skippedRepos]);
+
   return (
     <>
       <Container>
@@ -44,6 +77,17 @@ export const ModelAlertsHeader = ({
             onStopRunClick={stopRunClick}
           />
         </Row>
+        <VariantAnalysisStats
+          variantAnalysisStatus={variantAnalysis.status}
+          totalRepositoryCount={totalScannedRepositoryCount}
+          completedRepositoryCount={completedRepositoryCount}
+          successfulRepositoryCount={successfulRepositoryCount}
+          skippedRepositoryCount={skippedRepositoryCount}
+          resultCount={resultCount}
+          createdAt={parseDate(variantAnalysis.createdAt)}
+          completedAt={parseDate(variantAnalysis.completedAt)}
+          onViewLogsClick={onViewLogsClick}
+        />
       </Container>
     </>
   );