From b4fa2d7ce632bd0b21030e3543ac8f4e83a467f0 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Sun, 21 Sep 2025 18:01:27 +0200
Subject: [PATCH] Rework create backup now button backup listing view

---
 dashboard/src/views/BackupListView.vue | 60 ++++++++------------------
 1 file changed, 19 insertions(+), 41 deletions(-)

diff --git a/dashboard/src/views/BackupListView.vue b/dashboard/src/views/BackupListView.vue
index 0129f245e..378595e4c 100644
--- a/dashboard/src/views/BackupListView.vue
+++ b/dashboard/src/views/BackupListView.vue
@@ -79,10 +79,10 @@ const taskLogsMenu = ref([]);
 const trackingBackupTask = ref({});
 const trackingCleanupTask = ref({});
 const sites = ref([]);
-const startBackupError = ref('');
-const startBackupBusy = ref(false);
+const backupBusy = ref(false);
 const startCleanupError = ref('');
 const startCleanupBusy = ref(false);
+const sitesMenu =  ref([]);
 
 let primarySiteId = null;
 
@@ -201,37 +201,21 @@ async function refreshBackups() {
   backups.value = result;
 }
 
-async function onStartBackup() {
-  startBackupBusy.value = true;
-  startBackupError.value = '';
+async function onBackup(siteId) {
+  backupBusy.value = true;
 
-  const [error] = await backupSitesModel.createBackup(primarySiteId);
+  const [error] = await backupSitesModel.createBackup(siteId);
   if (error) {
     if (error.status === 409) {
-      if (error.body.message.indexOf('full_backup') !== -1) startBackupError.value = 'Backup already in progress. Please retry later.';
-      else startBackupError.value = 'App task is currently in progress. Please retry later.';
+      if (error.body.message.indexOf('full_backup') !== -1) window.pankow.notify({ text: 'Backup already in progress. Please retry later.', type: 'danger' });
+      else window.pankow.notify({ text: 'App task is currently in progress. Please retry later.', type: 'danger' });
     }
 
-    startBackupBusy.value = false;
+    backupBusy.value = false;
     return console.error(error);
   }
 
-  await refreshTasks();
-
-  startBackupBusy.value = false;
-}
-
-const stopBackupBusy = ref(false);
-
-async function onStopBackup() {
-  stopBackupBusy.value = true;
-
-  const [error] = await tasksModel.stop(trackingBackupTask.value.id);
-  if (error) return console.error(error);
-
-  await refreshTasks();
-
-  stopBackupBusy.value = false;
+  window.location.href = '/#/backup-sites';
 }
 
 async function onStartCleanup() {
@@ -329,6 +313,13 @@ onMounted(async () => {
 
   sites.value = result;
 
+  sitesMenu.value = result.map(site => {
+    return {
+      label: site.name,
+      action: onBackup.bind(null, site.id),
+    };
+  });
+
   const primarySite = result.find(t => t.primary);
   if (!primarySite) return;
 
@@ -409,24 +400,11 @@ onMounted(async () => {
       </Dialog>
 
       <template #header-buttons>
+        <Button v-if="sites.length === 1" secondary @click="onBackup(sites[0].id)" :loading="backupBusy" :disabled="backupBusy">{{ $t('backups.listing.backupNow') }}</Button>
+        <Button v-else secondary :menu="sitesMenu" :loading="backupBusy" :disabled="backupBusy">{{ $t('backups.listing.backupNow') }}</Button>
         <Button tool :menu="taskLogsMenu" :disabled="!taskLogsMenu.length">{{ $t('main.action.logs') }}</Button>
       </template>
 
-      <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" :busy="true" />
-            <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="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>
-
       <SettingsItem>
         <div style="flex-grow: 1; max-width: unset;">
           <div v-html="$t('backups.cleanupBackups.description')"></div>
@@ -438,7 +416,7 @@ onMounted(async () => {
         </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>
+          <Button plain @click="onStartCleanup()" v-else :loading="startCleanupBusy || trackingCleanupTask.active" :disabled="backupBusy || trackingCleanupTask.active">{{ $t('backups.cleanupBackups.cleanupNow') }}</Button>
         </div>
       </SettingsItem>