From 71c52a87ec3396776a4106b168c3e3efea600011 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 8 Oct 2025 11:01:56 +0200
Subject: [PATCH] Add backup task cancel button if task is active

---
 dashboard/src/views/BackupSitesView.vue | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/dashboard/src/views/BackupSitesView.vue b/dashboard/src/views/BackupSitesView.vue
index 69bae6d70..bb65b4b34 100644
--- a/dashboard/src/views/BackupSitesView.vue
+++ b/dashboard/src/views/BackupSitesView.vue
@@ -190,6 +190,11 @@ async function waitForSiteTask(site) {
   }
 }
 
+async function onCancelTask(taskId) {
+  const [error] = await tasksModel.stop(taskId);
+  if (error) console.error('Failed to cancel task:', error);
+}
+
 async function refresh() {
   busy.value = true;
 
@@ -262,7 +267,10 @@ onMounted(async () => {
             <StateLED style="padding-top: 5px;" :busy="site.status.busy" :state="site.status.state"/>
           </div>
           <div class="backup-site-details">
-            <div style="margin-bottom: 5px;"><b style="font-size: 18px">{{ site.name }}</b><i style="margin-left: 10px">{{ prettyBackupContents(site.contents) }}</i></div>
+            <div style="margin-bottom: 5px; display: flex; justify-content: space-between; align-items: baseline;">
+              <div><b style="font-size: 18px">{{ site.name }}</b><i style="margin-left: 10px">{{ prettyBackupContents(site.contents) }}</i></div>
+              <Button tool plain secondary @click.capture="onActionMenu(site, $event)" icon="fa-solid fa-ellipsis" />
+            </div>
             <div>
               <i v-if="site.encrypted" class="fa-solid fa-lock"></i>
               Storage: <b>{{ site.provider }} ({{ site.format }}) </b>
@@ -288,14 +296,16 @@ onMounted(async () => {
               <div v-if="site.task && site.task.success">{{ $t('backup.sites.lastRun') }}: <b>{{ prettyLongDate(site.task.ts) }}</b></div>
               <div v-if="site.task && site.task.error">{{ $t('backup.sites.lastRun') }}: <a :href="`/logs.html?taskId=${site.task.id}`" target="_blank"><span class="error-label">{{ site.task.error.message }} <Button small plain tool>Logs</Button></span></a></div>
               <div v-if="site.task && site.task.running">
-                <ProgressBar :busy="true" :show-label="false" :value="site.task.percent" :mode="site.task.percent <= 0 ? 'indeterminate' : null" />
-                <div style="margin-top: 3px; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{ site.task.percent }}% {{ site.task.message }}</div>
+                <div style="margin-top: 10px; display: flex; align-items: center; gap: 10px; overflow: hidden;">
+                  <div style="flex-grow: 1; overflow: hidden;">
+                    <ProgressBar :busy="true" :show-label="false" :value="site.task.percent" :mode="site.task.percent <= 0 ? 'indeterminate' : null" />
+                    <div style="margin-top: 3px; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{ site.task.percent }}% {{ site.task.message }}</div>
+                  </div>
+                  <Button danger plain tool icon="fa-solid fa-xmark" @click="onCancelTask(site.task.id)"></Button>
+                </div>
               </div>
             </div>
           </div>
-          <div style="display: flex; align-items: center;">
-            <Button tool plain secondary @click.capture="onActionMenu(site, $event)" icon="fa-solid fa-ellipsis" />
-          </div>
         </div>
       </div>
     </Section>