From 7bfca3554b6014949f4565f065516e7f9dfa87f2 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Tue, 5 Sep 2023 13:30:46 +0200
Subject: [PATCH] Add preparing steps

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 .../pkg/epinio/dialog/ExportAppDialog.vue     | 25 +++++++++++++++----
 dashboard/pkg/epinio/l10n/en-us.yaml          | 13 +++++++---
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/dashboard/pkg/epinio/dialog/ExportAppDialog.vue b/dashboard/pkg/epinio/dialog/ExportAppDialog.vue
index d6b2098..b998d23 100644
--- 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
index 96b4b42..b13d62e 100644
--- 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: