Add preparing steps

Signed-off-by: Francesco Torchia <[email protected]>
epinio · Sep 5, 2023 · 7bfca35 · 7bfca35
1 parent 8f3b31a
commit 7bfca35
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/dashboard/pkg/epinio/dialog/ExportAppDialog.vue b/dashboard/pkg/epinio/dialog/ExportAppDialog.vue
@@ -38,6 +38,7 @@ export default {
       zipParts:           this.resources[0].applicationParts.filter((part) => part !== APPLICATION_PARTS.MANIFEST),
       showProgressBar:    false,
       percentages:        {},
+      preparingStep:      null,
       downloadStep:       null,
       cancelTokenSources: {},
       colorStops:         { 0: '--primary', 100: '--primary' },
@@ -98,7 +99,7 @@ export default {
           return;
         }
 
-        this.downloadStep = 'zip';
+        this.toggleStep('zip');
 
         await chartZip(partsData);
 
@@ -112,18 +113,23 @@ export default {
     },
 
     async fetchPart(resource, part) {
-      this.downloadStep = part;
+      this.toggleStep(part, true);
       this.cancelTokenSources[part] = this.getCancelToken().source();
 
       return await resource.fetchPart(
         part,
         {
           onDownloadProgress: (progressEvent) => {
-            const total = progressEvent.srcElement.getResponseHeader('content-length');
+            const total = progressEvent.srcElement.getResponseHeader('content-length') ||
+              progressEvent.srcElement.getResponseHeader('proxy-content-length');
 
             if (total) {
               Vue.set(this.percentages, part, Math.round(progressEvent.loaded * 100 / total));
             }
+
+            if (progressEvent.loaded > 0) {
+              this.toggleStep(part);
+            }
           },
           cancelToken: this.cancelTokenSources[part].token
         }).catch((thrown) => {
@@ -171,10 +177,16 @@ export default {
       this.fetchCancel();
       this.showProgressBar = false;
       this.progressBar = 0;
+      this.toggleStep(null);
     },
 
     async delayBeforeClose(seconds) {
       return await new Promise((resolve) => setTimeout(resolve, seconds));
+    },
+
+    toggleStep(part, isPreparing = false) {
+      this.preparingStep = isPreparing ? part : null;
+      this.downloadStep = isPreparing ? null : part;
     }
   }
 };
@@ -225,8 +237,11 @@ export default {
             v-if="showProgressBar"
             class="progress-info text info mb-10 mt-20"
           >
-            <span>
-              {{ t(`epinio.applications.export.chartValuesImages.steps.${ downloadStep }`) }}
+            <span v-if="preparingStep">
+              {{ t(`epinio.applications.export.chartValuesImages.steps.preparing.${ preparingStep }`) }}
+            </span>
+            <span v-if="downloadStep">
+              {{ t(`epinio.applications.export.chartValuesImages.steps.download.${ downloadStep }`) }}
             </span>
             <PercentageBar
               class="progress-bar"

diff --git a/dashboard/pkg/epinio/l10n/en-us.yaml b/dashboard/pkg/epinio/l10n/en-us.yaml
@@ -163,10 +163,15 @@ epinio:
         description: Helm chart and images can be used to `helm install` your application.
         banner: Container images can be large and take a long time to download.
         steps:
-          values: "Downloading: Values"
-          chart: "Downloading: Chart"
-          image: "Downloading: Image"
-          zip:   Compressing Files
+          preparing:
+            values: "Preparing download: Values"
+            chart: "Preparing download: Chart"
+            image: "Preparing download: Image"
+          download:
+            values: "Downloading: Values"
+            chart: "Downloading: Chart"
+            image: "Downloading: Image"
+            zip:   Compressing Files
         error: Server Error, download of { part } part failed.
     steps:
       basics: