Track backup cleanup task in UI

dashboard/src/components/AccessControl.vue

@@ -16,7 +16,6 @@ const accessRestriction = defineModel('acl');
 const users = ref([]);
 const groups = ref([]);
 
-// TODO check if we should offer this for already installed apps!
 const optionalSso = !!props.manifest.optionalSso;
 const cloudronAuth = !!(props.manifest.addons['ldap'] || props.manifest.addons['oidc'] || props.manifest.addons['proxyAuth']) && !props.hideOptionalSsoOption;
 

dashboard/src/components/BackupSchedule.vue

@@ -75,7 +75,6 @@ const policy = ref({
   schedule: '',
   retention: ''
 });
-const cleanupBusy = ref(false);
 const cleanupTask = ref({});
 
 async function onCleanup() {
@@ -255,9 +254,13 @@ onMounted(async () => {
       <div class="info-value">{{ prettyBackupRetention(policy.retention) }}</div>
     </div>
 
-    <!-- TODO maybe track the cleanup -->
+    <div v-if="cleanupTask.active">
+      <ProgressBar :value="cleanupTask.percent" />
+      <div>{{ cleanupTask.message }}</div>
+    </div>
+
     <div class="button-bar">
-      <Button @click="onCleanup()" :disabled="cleanupBusy" :loading="cleanupBusy">{{ $t('backups.listing.cleanupBackups') }}</Button>
+      <Button @click="onCleanup()" :disabled="cleanupTask.active" :loading="cleanupTask.active">{{ $t('backups.listing.cleanupBackups') }}</Button>
       <Button v-show="props.profile.isAtLeastOwner" @click="onConfigure()">{{ $t('backups.schedule.configure') }}</Button>
     </div>
   </Section>