feat: add percentage ProgressBar to ExportAsJSONAction

src/api/overlays/ProgressDialog.js

@@ -17,7 +17,7 @@ class ProgressDialog extends Overlay {
   }) {
     const { vNode, destroy } = mount({
       components: {
-        ProgressDialogComponent: ProgressDialogComponent
+        ProgressDialogComponent
       },
       provide: {
         iconClass,
@@ -28,16 +28,15 @@ class ProgressDialog extends Overlay {
       },
       data() {
         return {
-          model: {
-            progressPerc: progressPerc || 0,
-            progressText
-          }
+          progressPerc,
+          progressText
         };
       },
-      template: '<progress-dialog-component :model="model"></progress-dialog-component>'
+      template:
+        '<progress-dialog-component :progress-perc="progressPerc" :progress-text="progressText"></progress-dialog-component>'
     });
-    component = vNode.componentInstance;
 
+    component = vNode.componentInstance;
     super({
       element: vNode.el,
       size: 'fit',
@@ -51,8 +50,8 @@ class ProgressDialog extends Overlay {
   }
 
   updateProgress(progressPerc, progressText) {
-    component.model.progressPerc = progressPerc;
-    component.model.progressText = progressText;
+    component.$data.progressPerc = progressPerc;
+    component.$data.progressText = progressText;
   }
 }
 

src/api/overlays/components/ProgressDialogComponent.vue

@@ -20,9 +20,9 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <dialog-component>
-    <progress-component :model="model" />
-  </dialog-component>
+  <DialogComponent>
+    <ProgressComponent :progress-perc="progressPerc" :progress-text="progressText" />
+  </DialogComponent>
 </template>
 
 <script>
@@ -31,14 +31,18 @@ import DialogComponent from './DialogComponent.vue';
 
 export default {
   components: {
-    DialogComponent: DialogComponent,
-    ProgressComponent: ProgressComponent
+    DialogComponent,
+    ProgressComponent
   },
   inject: ['iconClass', 'title', 'hint', 'timestamp', 'message'],
   props: {
-    model: {
-      type: Object,
-      required: true
+    progressPerc: {
+      type: Number,
+      default: 0
+    },
+    progressText: {
+      type: String,
+      default: ''
     }
   }
 };

src/plugins/exportAsJSONAction/ExportAsJSONAction.js

@@ -48,6 +48,10 @@ export default class ExportAsJSONAction {
     this.tree = null;
     this.calls = null;
     this.idMap = null;
+    this.dialog = null;
+    this.progressPerc = 0;
+    this.exportedCount = 0;
+    this.totalToExport = 0;
 
     this.JSONExportService = new JSONExporter();
   }
@@ -78,14 +82,35 @@ export default class ExportAsJSONAction {
     const rootId = this.#getKeystring(this.root);
     this.tree[rootId] = this.root;
 
-    return this.#write(this.root);
+    this.dialog = this.#openmct.overlays.progressDialog({
+      message:
+        'Do not navigate away from this page or close this browser tab while this message is displayed.',
+      iconClass: 'info',
+      title: 'Exporting'
+    });
+    this.dialog.show();
+    this.#write(this.root)
+      .then(() => {
+        this.exportedCount++;
+        this.#updateProgress();
+      })
+      .catch((error) => {
+        this.dialog.dismiss();
+        this.dialog = null;
+        this.#resetCounts();
+        this.#openmct.notifications.error({
+          title: 'Export as JSON failed',
+          message: error.message
+        });
+      });
   }
 
   /**
    * @private
    * @param {import('../../api/objects/ObjectAPI').DomainObject} parent
    */
   async #write(parent) {
+    this.totalToExport++;
     this.calls++;
 
     //conditional object styles are not saved on the composition, so we need to check for them
@@ -136,6 +161,14 @@ export default class ExportAsJSONAction {
     }
   }
 
+  #updateProgress() {
+    this.progressPerc = Math.ceil((100 * this.exportedCount) / this.totalToExport);
+    this.dialog?.updateProgress(
+      this.progressPerc,
+      `Exporting ${this.exportedCount} / ${this.totalToExport} objects.`
+    );
+  }
+
   #exportObject(child, parent) {
     const originalKeyString = this.#getKeystring(child);
     const createable = this.#isCreatableAndPersistable(child);
@@ -149,7 +182,10 @@ export default class ExportAsJSONAction {
         this.tree[originalKeyString] = child;
       }
 
-      this.#write(child);
+      this.#write(child).then(() => {
+        this.exportedCount++;
+        this.#updateProgress();
+      });
     }
   }
 
@@ -299,6 +335,11 @@ export default class ExportAsJSONAction {
     return Array.from(identifiers);
   }
 
+  #resetCounts() {
+    this.totalToExport = 0;
+    this.exportedCount = 0;
+  }
+
   /**
    * @private
    */
@@ -353,9 +394,15 @@ export default class ExportAsJSONAction {
 
   #decrementCallsAndSave() {
     this.calls--;
+    this.#updateProgress();
     if (this.calls === 0) {
       this.#rewriteReferences();
+      this.dialog.dismiss();
+
+      this.#resetCounts();
       this.saveAs(this.#wrapTree());
+
+      this.dialog = null;
     }
   }
 

src/ui/components/ProgressBar.vue

@@ -23,29 +23,31 @@
   <div class="c-progress-bar">
     <div
       class="c-progress-bar__bar"
-      :class="{ '--indeterminate': !model.progressPerc }"
+      :class="{ '--indeterminate': !progressPerc }"
       :style="styleBarWidth"
     ></div>
-    <div v-if="model.progressText !== undefined" class="c-progress-bar__text">
-      <span v-if="model.progressPerc && model.progressPerc > 0"
-        >{{ model.progressPerc }}% complete.</span
-      >
-      {{ model.progressText }}
+    <div v-if="progressText !== undefined" class="c-progress-bar__text">
+      <span v-if="progressPerc && progressPerc > 0">{{ progressPerc }}% complete.</span>
+      {{ progressText }}
     </div>
   </div>
 </template>
 
 <script>
 export default {
   props: {
-    model: {
-      type: Object,
-      required: true
+    progressPerc: {
+      type: Number,
+      default: 0
+    },
+    progressText: {
+      type: String,
+      default: ''
     }
   },
   computed: {
     styleBarWidth() {
-      return this.model.progressPerc ? `width: ${this.model.progressPerc}%;` : '';
+      return this.progressPerc ? `width: ${this.progressPerc}%;` : '';
     }
   }
 };