Track platform backup tasks in the backup list view

dashboard/src/components/BackupList.vue

@@ -9,6 +9,7 @@ import { Button, ButtonGroup, ProgressBar, FormGroup, TextInput, Checkbox, Table
 import { prettyLongDate, copyToClipboard } from '@cloudron/pankow/utils';
 import { TASK_TYPES } from '../constants.js';
 import Section from  '../components/Section.vue';
+import SettingsItem from  '../components/SettingsItem.vue';
 import BackupsModel from '../models/BackupsModel.js';
 import BackupTargetsModel from '../models/BackupTargetsModel.js';
 import AppsModel from '../models/AppsModel.js';
@@ -49,43 +50,50 @@ const columns = {
 const busy = ref(true);
 const backups = ref([]);
 const taskLogsMenu = ref([]);
-const lastTask = ref({});
+const trackingTask = ref({});
+const targets = ref([]);
 
-async function waitForTask() {
-  if (!lastTask.value.id) return;
+async function waitForTask(id) {
+  if (!id || (trackingTask.value.id && trackingTask.value.id !== id)) return;
 
-  const [error, result] = await tasksModel.get(lastTask.value.id);
+  const [error, result] = await tasksModel.get(id);
   if (error) return console.error(error);
 
-  lastTask.value = result;
+  trackingTask.value = result;
 
   // task done, refresh menu
   if (!result.active) {
+    trackingTask.value = {};
     refreshBackups();
     refreshTasks();
     return;
   }
 
-  setTimeout(waitForTask, 2000);
+  setTimeout(waitForTask.bind(null, id), 2000);
 }
 
 async function refreshTasks() {
-  const [error, result] = await tasksModel.getByType(TASK_TYPES.TASK_BACKUP);
-  if (error) return console.error(error);
+  let tasks = [];
 
-  lastTask.value = result[0] || {};
+  for (const target of targets.value) {
+    const [error, result] = await tasksModel.getByType(TASK_TYPES.TASK_FULL_BACKUP_PREFIX + target.id);
+    if (error) return console.error(error);
+
+    tasks = tasks.concat(result);
+
+    // if last task is currently active, start polling
+    if (result[0] && result[0].active) waitForTask(result[0].id);
+  }
 
   // limit to last 10
-  taskLogsMenu.value = result.slice(0,10).map(t => {
+  tasks.sort((a, b) => a.creationTime - b.creationTime);
+  taskLogsMenu.value = tasks.slice(0,10).map(t => {
     return {
       icon: 'fa-solid ' + ((!t.active && t.success) ? 'status-active fa-check-circle' : (t.active ? 'fa-circle-notch fa-spin' : 'status-error fa-times-circle')),
       label: prettyLongDate(t.ts),
       action: () => { window.open(`/logs.html?taskId=${t.id}`); }
     };
   });
-
-  // if last task is currently active, start polling
-  if (lastTask.value.active) waitForTask();
 }
 
 async function refreshBackups() {
@@ -157,7 +165,7 @@ const stopBackupBusy = ref(false);
 async function onStopBackup() {
   stopBackupBusy.value = true;
 
-  const [error] = await tasksModel.stop(lastTask.value.id);
+  const [error] = await tasksModel.stop(trackingTask.value.id);
   if (error) return console.error(error);
 
   await refreshTasks();
@@ -230,6 +238,8 @@ onMounted(async () => {
   const [error, result] = await backupTargetsModel.list();
   if (error) return console.error(error);
 
+  targets.value = result;
+
   const primaryTarget = result.find(t => t.primary);
   if (!primaryTarget) return;
 
@@ -307,10 +317,21 @@ onMounted(async () => {
     </Dialog>
 
     <template #header-buttons>
-      <Button @click="onStartBackup()" :loading="startBackupBusy || lastTask.active" :disabled="startBackupBusy || lastTask.active">{{ $t('backups.listing.backupNow') }}</Button>
+      <Button @click="onStartBackup()" :loading="startBackupBusy || trackingTask.active" :disabled="startBackupBusy || trackingTask.active">{{ $t('backups.listing.backupNow') }}</Button>
       <Button tool :menu="taskLogsMenu" :disabled="!taskLogsMenu.length">{{ $t('main.action.logs') }}</Button>
     </template>
 
+    <SettingsItem v-if="trackingTask.active">
+      <div style="flex-grow: 1">
+        <ProgressBar :value="trackingTask.percent" />
+        <div>{{ trackingTask.message }}</div>
+        <div class="error-label" v-if="startBackupError">{{ startBackupError }}</div>
+      </div>
+      <div style="display: flex; align-items: center">
+        <Button danger @click="onStopBackup()" v-if="trackingTask.active" :loading="stopBackupBusy" :disabled="stopBackupBusy">{{ $t('backups.listing.stopTask') }}</Button>
+      </div>
+    </SettingsItem>
+
     <p v-html="$t('backups.schedule.description')"></p>
 
     <TableView :columns="columns" :model="backups" :busy="busy">
@@ -335,19 +356,5 @@ 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>
-
-      <div class="error-label" v-if="startBackupError">{{ startBackupError }}</div>
-    </div>
   </Section>
 </template>