Pickup app backup progress

dashboard/src/components/app/Backups.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Icon, Button, Switch, Checkbox, FormGroup, TextInput, TableView, ButtonGroup, Dialog } from '@cloudron/pankow';
+import { Icon, Button, Switch, Checkbox, FormGroup, TextInput, TableView, ButtonGroup, Dialog, ProgressBar } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
 import { API_ORIGIN, SECRET_PLACEHOLDER } from '../../constants.js';
 import { download } from '../../utils.js';
@@ -50,13 +50,15 @@ const editError = ref('');
 const editBackup = ref({});
 const editPersist = ref(false);
 const editLabel = ref('');
-const createBusy = ref(false);
 const importBusy = ref(false);
 const autoBackupsEnabled = ref(false);
 const backups = ref([]);
 const editDialog = useTemplateRef('editDialog');
 const restoreDialog = useTemplateRef('restoreDialog');
 const taskLogsMenu = ref([]);
+const lastTask = ref({});
+const startBackupBusy = ref(false);
+const stopBackupBusy = ref(false);
 
 async function onChangeAutoBackups(value) {
   const [error] = await appsModel.configure(props.app.id, 'automatic_backup', { enable: value });
@@ -66,25 +68,31 @@ async function onChangeAutoBackups(value) {
   }
 }
 
-async function waitForTask(taskId) {
-  if (!taskId) return;
+async function waitForTask() {
+  if (!lastTask.value.id) return;
 
-  const [error, result] = await tasksModel.get(taskId);
+  const [error, result] = await tasksModel.get(lastTask.value.id);
   if (error) return console.error(error);
 
+  lastTask.value = result;
+
+  // task done, refresh menu
   if (!result.active) {
-    createBusy.value = false;
+    startBackupBusy.value = false;
     await refreshTasks();
-    return refreshBackupList();
+    refreshBackupList();
+    return;
   }
 
-  setTimeout(waitForTask.bind(null, taskId), 2000);
+  setTimeout(waitForTask, 2000);
 }
 
 async function refreshTasks() {
   const [error, result] = await tasksModel.getByType(`appBackup_${props.app.id}`);
   if (error) return console.error(error);
 
+  lastTask.value = result[0] || {};
+
   // limit to last 10
   taskLogsMenu.value = result.slice(0,10).map(t => {
     return {
@@ -95,11 +103,11 @@ async function refreshTasks() {
   });
 
   // if last task is currently active, start polling
-  if (result[0] && result[0].active) waitForTask(result[0].id);
+  if (lastTask.value.active) waitForTask();
 }
 
-async function onCreate() {
-  createBusy.value = true;
+async function onStartBackup() {
+  startBackupBusy.value = true;
 
   const [error] = await appsModel.backup(props.app.id);
   if (error) return console.error(error);
@@ -107,6 +115,18 @@ async function onCreate() {
   await refreshTasks();
 }
 
+async function onStopBackup() {
+  stopBackupBusy.value = true;
+
+  const [error] = await tasksModel.stop(lastTask.value.id);
+  if (error) return console.error(error);
+
+  await refreshTasks();
+
+  stopBackupBusy.value = false;
+}
+
+
 function onEdit(backup) {
   editBusy.value = false;
   editBackup.value = backup;
@@ -302,9 +322,8 @@ onMounted(async () => {
         <label>{{ $t('app.backups.backups.title') }}</label>
         <div>{{ $t('app.backups.backups.description') }}</div>
       </FormGroup>
-      <div style="display: flex; align-items: center; gap: 6px">
-        <Button tool secondary :menu="taskLogsMenu" :disabled="!taskLogsMenu.length">{{ $t('main.action.logs') }}</Button>
-        <Button @click="onCreate()" :loading="createBusy" :disabled="createBusy || app.taskId || app.error || app.runState === 'stopped'" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'Task active' : (app.runState === 'stopped' ? 'App is not running' : ''))">{{ $t('app.backups.backups.createBackupAction') }}</Button>
+      <div style="display: flex; align-items: center;">
+        <Button tool :menu="taskLogsMenu" :disabled="!taskLogsMenu.length">{{ $t('main.action.logs') }}</Button>
       </div>
     </SettingsItem>
 
@@ -329,5 +348,18 @@ onMounted(async () => {
         </div>
       </template>
     </TableView>
+
+    <br/>
+
+    <div v-if="lastTask.active">
+      <ProgressBar :value="lastTask.percent" />
+      <div>{{ lastTask.message }}</div>
+      <br/>
+    </div>
+
+    <div class="button-bar">
+      <Button danger @click="onStopBackup()" v-if="lastTask.active" :loading="stopBackupBusy" :disabled="stopBackupBusy">{{ $t('backups.listing.stopTask') }}</Button>
+      <Button @click="onStartBackup()" v-else :loading="startBackupBusy" :disabled="startBackupBusy">{{ $t('app.backups.backups.createBackupAction') }}</Button>
+    </div>
   </div>
 </template>