Fix backup task state for sites

dashboard/src/views/BackupSitesView.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted, useTemplateRef } from 'vue';
+import { ref, onMounted, useTemplateRef, reactive } from 'vue';
 import { Button, Menu, ProgressBar, InputDialog } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
 import Section from  '../components/Section.vue';
@@ -113,6 +113,10 @@ async function onStartBackup(site) {
   setTimeout(waitForSiteTask.bind(null,site), 2000);
 }
 
+async function onStartCleanup(site) {
+
+}
+
 const actionMenuModel = ref([]);
 
 const actionMenuElement = useTemplateRef('actionMenuElement');
@@ -121,6 +125,10 @@ function onActionMenu(site, event) {
     icon: 'fa-solid fa-plus',
     label: t('backups.listing.backupNow'),
     action: onStartBackup.bind(null, site),
+  }, {
+    icon: 'fa-solid fa-broom',
+    label: t('backups.listing.cleanupBackups'),
+    action: onStartCleanup.bind(null, site),
   }, {
     icon: 'fa-solid fa-sync-alt',
     label: t('backups.location.remount'),
@@ -154,6 +162,7 @@ function onActionMenu(site, event) {
 
 async function waitForSiteTask(site) {
   const [error, result] = await tasksModel.get(site.task.id);
+  site.progress = result.percent;
   if (error) {
     console.error(error);
     setTimeout(waitForSiteTask.bind(null, site), 2000);
@@ -171,11 +180,11 @@ async function refresh() {
   const [error, result] = await backupSitesModels.list();
   if (error) return console.error(error);
 
-  for (const site of result) {
+  for (let i = 0 ; i < result.length; i++) {
+    // have to make it a reactive object as we manipulate property objects
+    const site = reactive(result[i]);
     site.status = { busy: true, state: '', message: '' };
-  }
 
-  for (const site of result) {
     const [error, status] = await backupSitesModels.status(site.id);
     if (error) {
       console.error(error);
@@ -193,10 +202,11 @@ async function refresh() {
 
     site.task = tasks[0] || null;
 
-    if (site.task && site.task.active) waitForSiteTask(site);
+    if (site.task && site.task.active) setTimeout(waitForSiteTask.bind(null, site), 2000);
+
+    sites.value.push(site);
   }
 
-  sites.value = result;
   busy.value = false;
 }
 
@@ -240,7 +250,7 @@ onMounted(async () => {
               <div v-if="site.task && site.task.error">Error: <b>{{ site.task.error }}</b></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;">{{ site.task.percent }}% {{ site.task.message }}</div>
+                <div style="margin-top: 3px; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{ site.task.percent }}% {{ site.task.message }}</div>
               </div>
             </div>
           </div>