Refresh backup site status and task in the background

This commit is contained in:
Johannes Zellner
2025-10-16 15:41:52 +02:00
parent 72030ee8fc
commit f5978a524d
+35 -19
View File
@@ -5,7 +5,7 @@ const i18n = useI18n();
const t = i18n.t;
import { ref, onMounted, useTemplateRef, reactive, inject } from 'vue';
import { Button, Menu, ProgressBar, InputDialog } from '@cloudron/pankow';
import { Button, Menu, ProgressBar, InputDialog, Spinner } from '@cloudron/pankow';
import { prettyLongDate } from '@cloudron/pankow/utils';
import Section from '../components/Section.vue';
import StateLED from '../components/StateLED.vue';
@@ -211,6 +211,28 @@ async function onCancelTask(taskId) {
if (error) console.error('Failed to cancel task:', error);
}
async function refreshStatusForSite(site) {
const [error, status] = await backupSitesModels.status(site.id);
if (error) return console.error(error);
site.status.state = status?.state === 'active' ? 'success' : 'danger';
site.status.busy = false;
}
async function refreshTaskForSite(site) {
const [error, tasks] = await tasksModel.getByType(TASK_TYPES.TASK_FULL_BACKUP_PREFIX + site.id);
if (error) return console.error(error);
if (tasks[0]) {
site.task = tasks[0];
if (site.task.active) setTimeout(waitForSiteTask.bind(null, site), 2000);
} else {
site.task = null;
}
site.taskLoaded = true;
}
async function refresh() {
busy.value = true;
@@ -224,22 +246,12 @@ async function refresh() {
// have to make it a reactive object as we manipulate property objects
const site = reactive(result);
site.status = { busy: true, state: '', message: '' };
site.task = null;
site.taskLoaded = false;
const [error, status] = await backupSitesModels.status(site.id);
if (error) console.error(error);
site.status.state = status?.state === 'active' ? 'success' : 'danger';
site.status.busy = false;
const [taskError, tasks] = await tasksModel.getByType(TASK_TYPES.TASK_FULL_BACKUP_PREFIX + site.id);
if (taskError) {
console.error(error);
continue;
}
site.task = tasks[0] || null;
if (site.task && site.task.active) setTimeout(waitForSiteTask.bind(null, site), 2000);
// do not wait for it
refreshStatusForSite(site);
refreshTaskForSite(site);
sitesWithDetails.push(site);
}
@@ -272,8 +284,8 @@ onMounted(async () => {
<ProgressBar mode="indeterminate" v-if="busy" slim :show-label="false" />
<div v-if="!busy && sites.length === 0" class="empty-placeholder">{{ $t('backup.sites.emptyPlaceholder') }}</div>
<div class="backup-site" v-for="site in sites" :key="site.id">
<div style="display: flex; align-items: start;">
<StateLED style="padding-top: 5px;" :busy="site.status.busy" :state="site.status.state"/>
<div style="display: flex; align-items: start; margin-top: 6px;">
<StateLED :busy="site.status.busy" :state="site.status.state"/>
</div>
<div class="backup-site-details">
<div style="margin-bottom: 5px; display: flex; justify-content: space-between; align-items: baseline;">
@@ -307,7 +319,11 @@ onMounted(async () => {
{{ $t('backups.schedule.retentionPolicy') }}: <b>{{ prettyBackupRetention(site.retention) }}</b>
</div>
<div class="backup-site-task">
<div v-if="!site.task">{{ $t('backup.sites.lastRun') }}: <b>Never</b></div>
<div v-if="!site.task">
{{ $t('backup.sites.lastRun') }}:
<b v-if="site.taskLoaded">Never</b>
<span v-else>...</span>
</div>
<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') }}: <b>{{ prettyLongDate(site.task.ts) }}</b>