Add backup cleanup job tracking and triggering to backup listing

2025-08-05 16:07:36 +02:00
parent 70cf212178
commit ae747aa426
2 changed files with 107 additions and 24 deletions
@@ -50,26 +50,52 @@ const columns = {
 const busy = ref(true);
 const backups = ref([]);
 const taskLogsMenu = ref([]);
-const trackingTask = ref({});
+const trackingBackupTask = ref({});
+const trackingCleanupTask = ref({});
 const targets = ref([]);
+const startBackupError = ref('');
+const startBackupBusy = ref(false);
+const startCleanupError = ref('');
+const startCleanupBusy = ref(false);

-async function waitForTask(id) {
-  if (!id || (trackingTask.value.id && trackingTask.value.id !== id)) return;
+let primaryTargetId = null;
+
+async function waitForBackupTask(id) {
+  if (!id || (trackingBackupTask.value.id && trackingBackupTask.value.id !== id)) return;

  const [error, result] = await tasksModel.get(id);
  if (error) return console.error(error);

-  trackingTask.value = result;
+  trackingBackupTask.value = result;

  // task done, refresh menu
  if (!result.active) {
-    trackingTask.value = {};
+    trackingBackupTask.value = {};
    refreshBackups();
    refreshTasks();
    return;
  }

-  setTimeout(waitForTask.bind(null, id), 2000);
+  setTimeout(waitForBackupTask.bind(null, id), 2000);
+}
+
+async function waitForCleanupTask(id) {
+  if (!id || (trackingCleanupTask.value.id && trackingCleanupTask.value.id !== id)) return;
+
+  const [error, result] = await tasksModel.get(id);
+  if (error) return console.error(error);
+
+  trackingCleanupTask.value = result;
+
+  // task done, refresh menu
+  if (!result.active) {
+    trackingCleanupTask.value = {};
+    refreshBackups();
+    refreshTasks();
+    return;
+  }
+
+  setTimeout(waitForCleanupTask.bind(null, id), 2000);
 }

 async function refreshTasks() {
@@ -82,15 +108,26 @@ async function refreshTasks() {
    tasks = tasks.concat(result);

    // if last task is currently active, start polling
-    if (result[0] && result[0].active) waitForTask(result[0].id);
+    if (result[0] && result[0].active) waitForBackupTask(result[0].id);
  }

+  for (const target of targets.value) {
+    const [error, result] = await tasksModel.getByType(TASK_TYPES.TASK_CLEAN_BACKUPS_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) waitForCleanupTask(result[0].id);
+  }
+
+
  // limit to last 10
-  tasks.sort((a, b) => a.creationTime - b.creationTime);
+  tasks.sort((a, b) => b.creationTime < a.creationTime ? -1 : 1);
  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),
+      label: `${prettyLongDate(t.ts)} - ${t.type.indexOf(TASK_TYPES.TASK_CLEAN_BACKUPS_PREFIX) === 0 ? 'cleanup' : 'backup'}`,
      action: () => { window.open(`/logs.html?taskId=${t.id}`); }
    };
  });
@@ -137,10 +174,6 @@ async function refreshBackups() {
  backups.value = result;
 }

-const startBackupError = ref('');
-const startBackupBusy = ref(false);
-let primaryTargetId = null;
-
 async function onStartBackup() {
  startBackupBusy.value = true;
  startBackupError.value = '';
@@ -152,6 +185,7 @@ async function onStartBackup() {
      else startBackupError.value = 'App task is currently in progress. Please retry later.';
    }

+    startBackupBusy.value = false;
    return console.error(error);
  }

@@ -165,7 +199,7 @@ const stopBackupBusy = ref(false);
 async function onStopBackup() {
  stopBackupBusy.value = true;

-  const [error] = await tasksModel.stop(trackingTask.value.id);
+  const [error] = await tasksModel.stop(trackingBackupTask.value.id);
  if (error) return console.error(error);

  await refreshTasks();
@@ -173,6 +207,39 @@ async function onStopBackup() {
  stopBackupBusy.value = false;
 }

+async function onStartCleanup() {
+  startCleanupBusy.value = true;
+  startCleanupError.value = '';
+
+  const [error] = await backupTargetsModel.cleanup(primaryTargetId);
+  if (error) {
+    if (error.status === 409) {
+      if (error.body.message.indexOf('full_backup') !== -1) startCleanupError.value = 'Cleanup already in progress. Please retry later.';
+      else startCleanupError.value = 'App task is currently in progress. Please retry later.';
+    }
+
+    startCleanupBusy.value = false;
+    return console.error(error);
+  }
+
+  await refreshTasks();
+
+  startCleanupBusy.value = false;
+}
+
+const stopCleanupBusy = ref(false);
+
+async function onStopCleanup() {
+  stopCleanupBusy.value = true;
+
+  const [error] = await tasksModel.stop(trackingCleanupTask.value.id);
+  if (error) return console.error(error);
+
+  await refreshTasks();
+
+  stopCleanupBusy.value = false;
+}
+
 async function onDownloadConfig(backup) {
  const [error, dashboardConfig] = await dashboardModel.config();
  if (error) return console.error(error);
@@ -254,7 +321,7 @@ onMounted(async () => {

 <template>
  <div class="content">
-    <Section :title="$t('backups.listing.title')">
+    <Section :title="$t('backups.listing.title')" :padding="false">
      <Dialog ref="infoDialog"
        :title="$t('backups.backupDetails.title')"
        :reject-label="$t('main.dialog.close')"
@@ -318,24 +385,40 @@ onMounted(async () => {
      </Dialog>

      <template #header-buttons>
-        <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>
+      <SettingsItem>
+        <div style="flex-grow: 1; max-width: unset;">
+          <div v-html="$t('backups.schedule.description')"></div>
+          <div v-if="trackingBackupTask.active" style="margin-top: 10px;">
+            <ProgressBar :value="trackingBackupTask.percent" />
+            <div>{{ trackingBackupTask.message }}</div>
+          </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>
+          <Button danger @click="onStopBackup()" v-if="trackingBackupTask.active" :loading="stopBackupBusy" :disabled="stopBackupBusy">{{ $t('backups.listing.stopTask') }}</Button>
+          <Button plain @click="onStartBackup()" v-else :loading="startBackupBusy || trackingBackupTask.active" :disabled="startBackupBusy || trackingBackupTask.active">{{ $t('backups.listing.backupNow') }}</Button>
        </div>
      </SettingsItem>

-      <p v-html="$t('backups.schedule.description')"></p>
+      <SettingsItem>
+        <div style="flex-grow: 1; max-width: unset;">
+          <div v-html="$t('backups.cleanupBackups.description')"></div>
+          <div v-if="trackingCleanupTask.active" style="margin-top: 10px;">
+            <ProgressBar :value="trackingCleanupTask.percent" />
+            <div>{{ trackingCleanupTask.message }}</div>
+          </div>
+          <div class="error-label" v-if="startCleanupError">{{ startCleanupError }}</div>
+        </div>
+        <div style="display: flex; align-items: center">
+          <Button danger @click="onStopCleanup()" v-if="trackingCleanupTask.active" :loading="stopCleanupBusy" :disabled="stopCleanupBusy">{{ $t('backups.listing.stopTask') }}</Button>
+          <Button plain @click="onStartCleanup()" v-else :loading="startCleanupBusy || trackingCleanupTask.active" :disabled="startBackupBusy || trackingCleanupTask.active">{{ $t('backups.cleanupBackups.cleanupNow') }}</Button>
+        </div>
+      </SettingsItem>

-      <TableView :columns="columns" :model="backups" :busy="busy">
+      <TableView :columns="columns" :model="backups" :busy="busy" style="margin-top: 30px;">
        <template #preserveSecs="backup">
          <i class="fas fa-archive" v-show="backup.preserveSecs === -1" v-tooltip="$t('backups.listing.tooltipPreservedBackup')"></i>
        </template>