Merge pull request #2018 from github/koesie10/download-progress-indicator

Add download progress indicator for MRVA downloads

Author: koesie10

extensions/ql-vscode/src/remote-queries/variant-analysis-manager.ts

@@ -68,7 +68,7 @@ export class VariantAnalysisManager
   implements VariantAnalysisViewManager<VariantAnalysisView>
 {
   private static readonly REPO_STATES_FILENAME = "repo_states.json";
-  private static readonly DOWNLOAD_PERCENTAGE_UPDATE_DELAY_MS = 3000;
+  private static readonly DOWNLOAD_PERCENTAGE_UPDATE_DELAY_MS = 500;
 
   private readonly _onVariantAnalysisAdded = this.push(
     new EventEmitter<VariantAnalysis>(),

extensions/ql-vscode/src/remote-queries/variant-analysis-results-manager.ts

@@ -90,12 +90,18 @@ export class VariantAnalysisResultsManager extends DisposableObject {
     const zipFilePath = join(resultDirectory, "results.zip");
 
     const response = await fetch(repoTask.artifactUrl);
+
+    let responseSize = parseInt(response.headers.get("content-length") || "0");
+    if (responseSize === 0 && response.size > 0) {
+      responseSize = response.size;
+    }
+
     let amountDownloaded = 0;
     for await (const chunk of response.body) {
       await appendFile(zipFilePath, Buffer.from(chunk));
       amountDownloaded += chunk.length;
       await onDownloadPercentageChanged(
-        Math.floor((amountDownloaded / response.size) * 100),
+        Math.floor((amountDownloaded / responseSize) * 100),
       );
     }
 

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

@@ -0,0 +1,60 @@
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  percent: number;
+  label?: string;
+};
+
+const Circle = styled.div`
+  width: 16px;
+  height: 16px;
+`;
+
+const Background = styled.circle`
+  stroke: var(--vscode-editorWidget-background);
+  fill: none;
+  stroke-width: 2px;
+`;
+
+const Determinate = styled.circle`
+  stroke: var(--vscode-progressBar-background);
+  fill: none;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  transform-origin: 50% 50%;
+  transform: rotate(-90deg);
+  transition: all 0.2s ease-in-out 0s;
+`;
+
+const progressSegments = 44;
+
+// This is a re-implementation of the FAST component progress ring
+// See https://github.com/microsoft/fast/blob/21c210f2164c5cf285cade1a328460c67e4b97e6/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
+// Once the determinate progress ring is available in the VSCode webview UI toolkit, we should use that instead
+
+export const DeterminateProgressRing = ({
+  percent,
+  label = "Loading...",
+}: Props) => (
+  <Circle
+    role="progressbar"
+    aria-valuemin={0}
+    aria-valuemax={100}
+    aria-valuenow={percent}
+  >
+    <svg className="progress" viewBox="0 0 16 16">
+      <Background cx="8px" cy="8px" r="7px" />
+      <Determinate
+        style={{
+          strokeDasharray: `${
+            (progressSegments * percent) / 100
+          }px ${progressSegments}px`,
+        }}
+        cx="8px"
+        cy="8px"
+        r="7px"
+      ></Determinate>
+    </svg>
+  </Circle>
+);

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

@@ -26,6 +26,7 @@ import { AnalyzedRepoItemContent } from "./AnalyzedRepoItemContent";
 import StarCount from "../common/StarCount";
 import { LastUpdated } from "../common/LastUpdated";
 import { useTelemetryOnChange } from "../common/telemetry";
+import { DeterminateProgressRing } from "../common/DeterminateProgressRing";
 
 // This will ensure that these icons have a className which we can use in the TitleContainer
 const ExpandCollapseCodicon = styled(Codicon)``;
@@ -284,12 +285,8 @@ export const RepoRow = ({
         </span>
         {downloadState?.downloadStatus ===
           VariantAnalysisScannedRepositoryDownloadStatus.InProgress && (
-          <LoadingIcon
-            label={
-              downloadState.downloadPercentage !== undefined
-                ? `Downloading: ${downloadState.downloadPercentage}%`
-                : "Downloading"
-            }
+          <DeterminateProgressRing
+            percent={downloadState.downloadPercentage ?? 0}
           />
         )}
         {downloadState?.downloadStatus ===

extensions/ql-vscode/test/vscode-tests/cli-integration/remote-queries/variant-analysis-results-manager.test.ts

@@ -169,7 +169,10 @@ describe(VariantAnalysisResultsManager.name, () => {
           (url: RequestInfo, _init?: RequestInit) => {
             if (url === dummyRepoTask.artifactUrl) {
               const response = new Response(Readable.from(generateInParts()));
-              response.size = fileContents.length;
+              response.headers.set(
+                "Content-Length",
+                fileContents.length.toString(),
+              );
               return Promise.resolve(response);
             }
             return Promise.reject(new Error("Unexpected artifact URL"));