lock backup/restore button until job finishes or

job options change prevents starting duplicate backup/restore jobs refs: #572
commandprompt · Jan 7, 2025 · b10cefd · b10cefd
1 parent b4fd26b
commit b10cefd
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 11 deletions.
diff --git a/pgmanage/app/static/pgmanage_frontend/src/components/BackupTab.vue b/pgmanage/app/static/pgmanage_frontend/src/components/BackupTab.vue
@@ -301,12 +301,12 @@
           <div class="btn-group">
             <a data-testid="preview-button" :class="['btn', 'btn-outline-primary', 'mb-2', { 'disabled': !backupOptions.fileName}]"
                 @click="previewCommand">Preview</a>
-            <a data-testid="backup-button" :class="['btn', 'btn-success', 'mb-2', 'ms-0', { 'disabled': !backupOptions.fileName }]"
+            <a data-testid="backup-button" :class="['btn', 'btn-success', 'mb-2', 'ms-0', { 'disabled': !backupOptions.fileName || backupLocked }]"
                 @click.prevent="saveBackup">Backup</a>
           </div>
       </div>
   </form>
-  <UtilityJobs ref="jobs" />
+  <UtilityJobs @jobExit="handleJobExit" ref="jobs" />
 
 </div>
 </template>
@@ -384,7 +384,9 @@ export default {
         pigz_compression_ratio: "6"
       },
       backupOptions: {},
-      backupTabId: this.tabId
+      backupTabId: this.tabId,
+      backupLocked: false,
+      lastJobId: 0
     }
   },
   computed: {
@@ -486,7 +488,13 @@ export default {
           this.backupOptions.fileName += '.tar';
           break;
       }
-    }
+    },
+    backupOptions: {
+      handler() {
+        this.backupLocked = false;
+      },
+      deep: true
+    },
   },
   methods: {
     getRoleNames() {
@@ -502,17 +510,20 @@ export default {
         })
     },
     saveBackup() {
+      this.backupLocked = true;
       axios.post("/backup/", {
         database_index: this.databaseIndex,
         workspaceId: this.workspaceId,
         data: this.backupOptions,
         backup_type: this.type
       })
         .then((resp) => {
-          this.$refs.jobs.startJob(resp.data.job_id, resp.data.description)
+          this.$refs.jobs.startJob(resp.data.job_id, resp.data.description);
+          this.lastJobId = resp.data.job_id;
         })
         .catch((error) => {
-          showToast("error", error.response.data.data)
+          showToast("error", error.response.data.data);
+          this.backupLocked = false;
         })
     },
     onFile(e) {
@@ -554,6 +565,10 @@ export default {
         .catch((error) => {
           showToast("error", error.response.data.data)
         })
+    },
+    handleJobExit(jobId) {
+      if(jobId === this.lastJobId)
+        this.backupLocked = false;
     }
   }
 }

diff --git a/pgmanage/app/static/pgmanage_frontend/src/components/RestoreTab.vue b/pgmanage/app/static/pgmanage_frontend/src/components/RestoreTab.vue
@@ -248,12 +248,12 @@
       <div class="btn-group" role="group">
         <a data-testid="preview-button" :class="['btn', 'btn-outline-primary', 'mb-2', { 'disabled': !restoreOptions.fileName }]"
           @click="previewCommand">Preview</a>
-          <a data-testid="restore-button" :class="['btn', 'btn-success', 'mb-2', { 'disabled': !restoreOptions.fileName }]"
+          <a data-testid="restore-button" :class="['btn', 'btn-success', 'mb-2', { 'disabled': !restoreOptions.fileName || restoreLocked }]"
           @click.prevent="createRestore">Restore</a>
       </div>
     </div>
   </form>
-  <UtilityJobs ref="jobs" />
+  <UtilityJobs @jobExit="handleJobExit" ref="jobs" />
 </div>
 </template>
 
@@ -312,7 +312,9 @@ export default {
         pigz_number_of_jobs: 'auto',
       },
       restoreOptions: {},
-      restoreTabId: this.tabId
+      restoreTabId: this.tabId,
+      restoreLocked: false,
+      lastJobId: 0
     }
   },
   computed: {
@@ -343,7 +345,13 @@ export default {
       if (newValue === 'directory') {
         this.restoreOptions.pigz = false
       }
-    }
+    },
+    restoreOptions: {
+      handler() {
+        this.restoreLocked = false;
+      },
+      deep: true
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -382,16 +390,19 @@ export default {
         })
     },
     createRestore() {
+      this.restoreLocked = true;
       axios.post("/restore/", {
         database_index: this.databaseIndex,
         workspace_id: this.workspaceId,
         data: this.restoreOptions
       })
         .then((resp) => {
           this.$refs.jobs.startJob(resp.data.job_id, resp.data.description)
+          this.lastJobId = resp.data.job_id;
         })
         .catch((error) => {
-          showToast("error", error.response.data.data)
+          showToast("error", error.response.data.data);
+          this.restoreLocked = false;
         })
     },
     onFile(e) {
@@ -419,6 +430,10 @@ export default {
         .catch((error) => {
           showToast("error", error.response.data.data)
         })
+    },
+    handleJobExit(jobId) {
+      if(jobId === this.lastJobId)
+        this.restoreLocked = false;
     }
   }
 }

diff --git a/pgmanage/app/static/pgmanage_frontend/src/components/UtilityJobs.vue b/pgmanage/app/static/pgmanage_frontend/src/components/UtilityJobs.vue
@@ -78,6 +78,7 @@ export default {
   unmounted() {
     clearInterval(this.workerId);
   },
+  emits: ['jobExit'],
   methods: {
     getJobList() {
       axios
@@ -183,6 +184,7 @@ export default {
       this.pendingJobId = this.pendingJobId.filter((id) => {
         if (completedJobIds.includes(id)) {
           let j = this.jobList.find((j) => j.id == id);
+          this.$emit('jobExit', id)
           if (j.process_state != JobState.PROCESS_TERMINATED)
             this.sendNotifyJobFinished(j.description, j.process_state, () =>
               this.getJobDetails(j.id, event)