Add variant analysis stats to header component

Author: koesie10

extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisHeader.stories.tsx

@@ -47,6 +47,12 @@ export default {
         disable: true,
       },
     },
+    onViewLogsClick: {
+      action: 'view-logs-clicked',
+      table: {
+        disable: true,
+      }
+    },
   }
 } as ComponentMeta<typeof VariantAnalysisHeader>;
 
@@ -59,16 +65,25 @@ InProgress.args = {
   queryName: 'Query name',
   queryFileName: 'example.ql',
   variantAnalysisStatus: VariantAnalysisStatus.InProgress,
+  totalRepositoryCount: 10,
+  completedRepositoryCount: 2,
+  resultCount: 99_999,
 };
 
 export const Succeeded = Template.bind({});
 Succeeded.args = {
   ...InProgress.args,
   variantAnalysisStatus: VariantAnalysisStatus.Succeeded,
+  totalRepositoryCount: 1000,
+  completedRepositoryCount: 1000,
+  duration: 720_000,
+  completedAt: new Date(1661263446000),
 };
 
 export const Failed = Template.bind({});
 Failed.args = {
   ...InProgress.args,
   variantAnalysisStatus: VariantAnalysisStatus.Failed,
+  duration: 10_000,
+  completedAt: new Date(1661263446000),
 };

extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisHeader.tsx

@@ -3,49 +3,86 @@ import styled from 'styled-components';
 import { VariantAnalysisStatus } from '../../remote-queries/shared/variant-analysis';
 import { QueryDetails } from './QueryDetails';
 import { VariantAnalysisActions } from './VariantAnalysisActions';
+import { VariantAnalysisStats } from './VariantAnalysisStats';
 
 export type VariantAnalysisHeaderProps = {
   queryName: string;
   queryFileName: string;
   variantAnalysisStatus: VariantAnalysisStatus;
 
+  totalRepositoryCount: number;
+  completedRepositoryCount?: number | undefined;
+
+  queryResult?: 'warning' | 'stopped';
+
+  resultCount?: number | undefined;
+  duration?: number | undefined;
+  completedAt?: Date | undefined;
+
   onOpenQueryFileClick: () => void;
   onViewQueryTextClick: () => void;
 
   onStopQueryClick: () => void;
 
   onCopyRepositoryListClick: () => void;
   onExportResultsClick: () => void;
+
+  onViewLogsClick: () => void;
 };
 
 const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2em;
+`;
+
+const Row = styled.div`
   display: flex;
   align-items: center;
 `;
 
 export const VariantAnalysisHeader = ({
   queryName,
   queryFileName,
+  totalRepositoryCount,
+  completedRepositoryCount,
+  queryResult,
+  resultCount,
+  duration,
+  completedAt,
   variantAnalysisStatus,
   onOpenQueryFileClick,
   onViewQueryTextClick,
   onStopQueryClick,
   onCopyRepositoryListClick,
-  onExportResultsClick
+  onExportResultsClick,
+  onViewLogsClick,
 }: VariantAnalysisHeaderProps) => {
   return (
     <Container>
-      <QueryDetails
-        queryName={queryName}
-        queryFileName={queryFileName}
-        onOpenQueryFileClick={onOpenQueryFileClick}
-        onViewQueryTextClick={onViewQueryTextClick}
-      />
-      <VariantAnalysisActions
+      <Row>
+        <QueryDetails
+          queryName={queryName}
+          queryFileName={queryFileName}
+          onOpenQueryFileClick={onOpenQueryFileClick}
+          onViewQueryTextClick={onViewQueryTextClick}
+        />
+        <VariantAnalysisActions
+          variantAnalysisStatus={variantAnalysisStatus}
+          onStopQueryClick={onStopQueryClick}
+          onCopyRepositoryListClick={onCopyRepositoryListClick}
+          onExportResultsClick={onExportResultsClick}
+        />
+      </Row>
+      <VariantAnalysisStats
         variantAnalysisStatus={variantAnalysisStatus}
-        onStopQueryClick={onStopQueryClick}
-        onCopyRepositoryListClick={onCopyRepositoryListClick}
-        onExportResultsClick={onExportResultsClick}
+        totalRepositoryCount={totalRepositoryCount}
+        completedRepositoryCount={completedRepositoryCount}
+        queryResult={queryResult}
+        resultCount={resultCount}
+        duration={duration}
+        completedAt={completedAt}
+        onViewLogsClick={onViewLogsClick}
       />
     </Container>
   );

extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisHeader.spec.tsx

@@ -10,13 +10,15 @@ describe(VariantAnalysisHeader.name, () => {
   const onStopQueryClick = jest.fn();
   const onCopyRepositoryListClick = jest.fn();
   const onExportResultsClick = jest.fn();
+  const onViewLogsClick = jest.fn();
 
   afterEach(() => {
     onOpenQueryFileClick.mockReset();
     onViewQueryTextClick.mockReset();
     onStopQueryClick.mockReset();
     onCopyRepositoryListClick.mockReset();
     onExportResultsClick.mockReset();
+    onViewLogsClick.mockReset();
   });
 
   const render = (props: Partial<VariantAnalysisHeaderProps> = {}) =>
@@ -25,11 +27,13 @@ describe(VariantAnalysisHeader.name, () => {
         queryName="Query name"
         queryFileName="example.ql"
         variantAnalysisStatus={VariantAnalysisStatus.InProgress}
+        totalRepositoryCount={10}
         onOpenQueryFileClick={onOpenQueryFileClick}
         onViewQueryTextClick={onViewQueryTextClick}
         onStopQueryClick={onStopQueryClick}
         onCopyRepositoryListClick={onCopyRepositoryListClick}
         onExportResultsClick={onExportResultsClick}
+        onViewLogsClick={onViewLogsClick}
         {...props}
       />
     );
@@ -80,4 +84,14 @@ describe(VariantAnalysisHeader.name, () => {
 
     expect(container.querySelectorAll('vscode-button').length).toEqual(0);
   });
+
+  it('renders the view logs link when succeeded', async () => {
+    render({
+      variantAnalysisStatus: VariantAnalysisStatus.Succeeded,
+      completedAt: new Date()
+    });
+
+    await userEvent.click(screen.getByText('View logs'));
+    expect(onViewLogsClick).toHaveBeenCalledTimes(1);
+  });
 });