Add display of duration and completion status

This will use the new fields on the API to display the duration and
completion status of a variant analysis.

extensions/ql-vscode/src/pure/date.ts

@@ -24,3 +24,16 @@ export function formatDate(value: Date): string {
 
   return dateFormatter.format(value);
 }
+
+// These are overloads for the function that allow us to not add an extra
+// type check when the value is definitely not undefined.
+export function parseDate(value: string): Date;
+export function parseDate(value: string | undefined | null): Date | undefined;
+
+export function parseDate(value: string | undefined | null): Date | undefined {
+  if (value === undefined || value === null) {
+    return undefined;
+  }
+
+  return new Date(value);
+}

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

@@ -10,13 +10,11 @@ import {
 import { QueryDetails } from './QueryDetails';
 import { VariantAnalysisActions } from './VariantAnalysisActions';
 import { VariantAnalysisStats } from './VariantAnalysisStats';
+import { parseDate } from '../../pure/date';
 
 export type VariantAnalysisHeaderProps = {
   variantAnalysis: VariantAnalysis;
 
-  duration?: number | undefined;
-  completedAt?: Date | undefined;
-
   onOpenQueryFileClick: () => void;
   onViewQueryTextClick: () => void;
 
@@ -41,8 +39,6 @@ const Row = styled.div`
 
 export const VariantAnalysisHeader = ({
   variantAnalysis,
-  duration,
-  completedAt,
   onOpenQueryFileClick,
   onViewQueryTextClick,
   onStopQueryClick,
@@ -63,6 +59,16 @@ export const VariantAnalysisHeader = ({
     return getSkippedRepoCount(variantAnalysis.skippedRepos) > 0;
   }, [variantAnalysis.skippedRepos]);
 
+  const duration = useMemo(() => {
+    if (!variantAnalysis?.completedAt) {
+      return undefined;
+    }
+
+    const createdAt = parseDate(variantAnalysis.createdAt);
+    const completedAt = parseDate(variantAnalysis.completedAt);
+    return completedAt.getTime() - createdAt.getTime();
+  }, [variantAnalysis?.completedAt, variantAnalysis?.createdAt]);
+
   return (
     <Container>
       <Row>
@@ -86,7 +92,7 @@ export const VariantAnalysisHeader = ({
         resultCount={resultCount}
         hasWarnings={hasSkippedRepos}
         duration={duration}
-        completedAt={completedAt}
+        completedAt={parseDate(variantAnalysis.completedAt)}
         onViewLogsClick={onViewLogsClick}
       />
     </Container>