Add app backup task logs dropdown and improve task tracking

dashboard/src/components/app/Backups.vue

@@ -56,7 +56,7 @@ const autoBackupsEnabled = ref(false);
 const backups = ref([]);
 const editDialog = useTemplateRef('editDialog');
 const restoreDialog = useTemplateRef('restoreDialog');
-const backupTasks = ref([]);
+const taskLogsMenu = ref([]);
 
 async function onChangeAutoBackups(value) {
   const [error] = await appsModel.configure(props.app.id, 'automatic_backup', { enable: value });
@@ -74,19 +74,37 @@ async function waitForTask(taskId) {
 
   if (!result.active) {
     createBusy.value = false;
-    return refresh();
+    await refreshTasks();
+    return refreshBackupList();
   }
 
   setTimeout(waitForTask.bind(null, taskId), 2000);
 }
 
+async function refreshTasks() {
+  const [error, result] = await tasksModel.getByType(`appBackup_${props.app.id}`);
+  if (error) return console.error(error);
+
+  // limit to last 10
+  taskLogsMenu.value = result.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 (result[0] && result[0].active) waitForTask(result[0].id);
+}
+
 async function onCreate() {
   createBusy.value = true;
 
-  const [error, result] = await appsModel.backup(props.app.id);
+  const [error] = await appsModel.backup(props.app.id);
   if (error) return console.error(error);
 
-  await waitForTask(result);
+  await refreshTasks();
 }
 
 function onEdit(backup) {
@@ -106,7 +124,7 @@ async function onEditSubmit() {
     return console.error(error);
   }
 
-  refresh();
+  refreshBackupList();
   editDialog.value.close();
 }
 
@@ -172,7 +190,7 @@ function onClone(backup) {
   cloneDialog.value.open(backup, props.app.id);
 }
 
-async function refresh() {
+async function refreshBackupList() {
   const [error, result] = await appsModel.backups(props.app.id);
   if (error) return console.error(error);
 
@@ -180,20 +198,12 @@ async function refresh() {
 }
 
 onMounted(async () => {
-  await refresh();
-  busy.value = false;
-
   autoBackupsEnabled.value = props.app.enableBackup;
 
-  const [error, result] = await tasksModel.getByType(`appBackup_${props.app.id}`);
-  if (error) return console.error(error);
+  await refreshBackupList();
+  await refreshTasks();
 
-  if (result[0] && result[0].active) {
-    createBusy.value = true;
-    waitForTask(result[0].id);
-  }
-
-  backupTasks.value = result;
+  busy.value = false;
 });
 
 </script>
@@ -292,7 +302,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">
+      <div style="display: flex; align-items: center; gap: 6px">
+        <Button tool :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>
     </SettingsItem>