Girish Ramakrishnan
c5f97e8bb0
in some old instances, we had "00 00 * * *" (note double space and only 5 components).
374 lines
14 KiB
Vue
374 lines
14 KiB
Vue
<script setup>
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
const i18n = useI18n();
|
|
const t = i18n.t;
|
|
|
|
import { ref, onMounted, useTemplateRef, reactive, inject } from 'vue';
|
|
import { Button, Menu, ProgressBar, InputDialog } from '@cloudron/pankow';
|
|
import { prettyLongDate } from '@cloudron/pankow/utils';
|
|
import Section from '../components/Section.vue';
|
|
import StateLED from '../components/StateLED.vue';
|
|
import BackupSiteScheduleDialog from '../components/BackupSiteScheduleDialog.vue';
|
|
import BackupSiteAddDialog from '../components/BackupSiteAddDialog.vue';
|
|
import BackupSiteContentDialog from '../components/BackupSiteContentDialog.vue';
|
|
import BackupSiteConfigDialog from '../components/BackupSiteConfigDialog.vue';
|
|
import SystemBackupList from '../components/SystemBackupList.vue';
|
|
import { TASK_TYPES } from '../constants.js';
|
|
import BackupSitesModel from '../models/BackupSitesModel.js';
|
|
import TasksModel from '../models/TasksModel.js';
|
|
import { prettySchedule, regionName } from '../utils.js';
|
|
|
|
const profile = inject('profile');
|
|
|
|
const tasksModel = TasksModel.create();
|
|
const backupSitesModels = BackupSitesModel.create();
|
|
|
|
const inputDialog = useTemplateRef('inputDialog');
|
|
const systemBackupList = useTemplateRef('systemBackupList');
|
|
|
|
const sites = ref([]);
|
|
const busy = ref(true);
|
|
|
|
const backupSiteAddDialog = useTemplateRef('backupSiteAddDialog');
|
|
function onAdd() {
|
|
backupSiteAddDialog.value.open();
|
|
}
|
|
|
|
const backupSiteContentDialog = useTemplateRef('backupSiteContentDialog');
|
|
function onEditContent(site) {
|
|
backupSiteContentDialog.value.open(site);
|
|
}
|
|
|
|
const backupSiteScheduleDialog = useTemplateRef('backupSiteScheduleDialog');
|
|
function onEditSchedule(site) {
|
|
backupSiteScheduleDialog.value.open(site);
|
|
}
|
|
|
|
const backupSiteConfigDialog = useTemplateRef('backupSiteConfigDialog');
|
|
function onEditConfig(site) {
|
|
backupSiteConfigDialog.value.open(site);
|
|
}
|
|
|
|
function prettyBackupRetention(retention) {
|
|
function stableStringify(obj) { return JSON.stringify(obj, Object.keys(obj).sort()); }
|
|
const tmp = BackupSitesModel.backupRetentions.find(function (p) { return stableStringify(p.id) === stableStringify(retention); });
|
|
return tmp ? tmp.name : '';
|
|
}
|
|
|
|
function prettyBackupContents(contents) {
|
|
if (!contents) return 'Everything';
|
|
if (contents.include) return `Only ${contents.include.length} item(s)`;
|
|
if (contents.exclude) return `Exclude ${contents.exclude.length} item(s)`;
|
|
return '';
|
|
}
|
|
|
|
async function onRemoveSite(site) {
|
|
const yes = await inputDialog.value.confirm({
|
|
title: t('backup.site.removeDialog.title'),
|
|
message: t('backup.site.removeDialog.description', { name: site.name }),
|
|
confirmLabel: t('main.action.remove'),
|
|
confirmStyle: 'danger',
|
|
rejectLabel: t('main.dialog.cancel'),
|
|
rejectStyle: 'secondary',
|
|
});
|
|
|
|
if (!yes) return;
|
|
|
|
const [error] = await backupSitesModels.del(site.id);
|
|
if (error) console.error(error);
|
|
|
|
await refresh();
|
|
|
|
systemBackupList.value.refresh();
|
|
}
|
|
|
|
async function onRemount(site) {
|
|
site.status.busy = true;
|
|
|
|
const [error] = await backupSitesModels.remount(site.id);
|
|
if (error) return console.error(error);
|
|
|
|
const [statusError, status] = await backupSitesModels.status(site.id);
|
|
if (statusError) console.error(statusError);
|
|
|
|
site.status.state = status.state === 'active' ? 'success' : 'danger';
|
|
site.status.message = status.message;
|
|
site.status.busy = false;
|
|
}
|
|
|
|
async function onStartBackup(site) {
|
|
const [error, result] = await backupSitesModels.createBackup(site.id);
|
|
if (error) {
|
|
if (error.status === 409) {
|
|
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' });
|
|
}
|
|
|
|
return console.error(error);
|
|
}
|
|
|
|
const [taskError, task] = await tasksModel.get(result);
|
|
if (taskError) return console.error(taskError);
|
|
|
|
site.task = task;
|
|
|
|
setTimeout(waitForSiteTask.bind(null,site), 2000);
|
|
|
|
systemBackupList.value.refresh();
|
|
}
|
|
|
|
async function onStartCleanup(site) {
|
|
const [error, result] = await backupSitesModels.cleanup(site.id);
|
|
if (error) return console.error(error);
|
|
|
|
const [taskError, task] = await tasksModel.get(result);
|
|
if (taskError) return console.error(taskError);
|
|
|
|
site.task = task;
|
|
|
|
setTimeout(waitForSiteTask.bind(null,site), 2000);
|
|
|
|
systemBackupList.value.refresh();
|
|
}
|
|
|
|
const actionMenuModel = ref([]);
|
|
|
|
const actionMenuElement = useTemplateRef('actionMenuElement');
|
|
function onActionMenu(site, event) {
|
|
actionMenuModel.value = [{
|
|
icon: 'fa-solid fa-screwdriver-wrench',
|
|
label: t('backups.configAction'),
|
|
visible: profile.value.isAtLeastOwner,
|
|
action: onEditConfig.bind(null, site),
|
|
}, {
|
|
icon: 'fa-solid fa-box-open',
|
|
label: t('backups.contentAction'),
|
|
visible: profile.value.isAtLeastOwner,
|
|
action: onEditContent.bind(null, site),
|
|
}, {
|
|
icon: 'fa-solid fa-clock',
|
|
label: t('backups.schedule.title'),
|
|
visible: profile.value.isAtLeastOwner,
|
|
action: onEditSchedule.bind(null, site),
|
|
},{
|
|
visible: profile.value.isAtLeastOwner,
|
|
separator: true,
|
|
}, {
|
|
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'),
|
|
visible: site.provider === 'sshfs' || site.provider === 'cifs' || site.provider === 'nfs' || site.provider === 'ext4' || site.provider === 'xfs',
|
|
action: onRemount.bind(null, site),
|
|
}, {
|
|
visible: profile.value.isAtLeastOwner,
|
|
separator: true,
|
|
}, {
|
|
icon: 'fa-solid fa-trash',
|
|
label: t('volumes.removeVolumeDialog.removeAction'),
|
|
visible: profile.value.isAtLeastOwner,
|
|
action: onRemoveSite.bind(null, site),
|
|
}];
|
|
|
|
actionMenuElement.value.open(event, event.currentTarget);
|
|
}
|
|
|
|
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);
|
|
} else if (result.active) {
|
|
site.task = result;
|
|
setTimeout(waitForSiteTask.bind(null, site), 2000);
|
|
} else {
|
|
site.task = result;
|
|
}
|
|
}
|
|
|
|
async function onCancelTask(taskId) {
|
|
const [error] = await tasksModel.stop(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.message = status.message;
|
|
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;
|
|
|
|
const [error, results] = await backupSitesModels.list();
|
|
if (error) return console.error(error);
|
|
|
|
const sortedResults = results.sort((a, b) => a.name.localeCompare(b.name));
|
|
|
|
const sitesWithDetails = [];
|
|
for (const result of sortedResults) {
|
|
// 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;
|
|
|
|
// do not wait for it
|
|
refreshStatusForSite(site);
|
|
refreshTaskForSite(site);
|
|
|
|
sitesWithDetails.push(site);
|
|
}
|
|
|
|
sites.value = sitesWithDetails;
|
|
busy.value = false;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await refresh();
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="content">
|
|
<Menu ref="actionMenuElement" :model="actionMenuModel" />
|
|
<InputDialog ref="inputDialog" />
|
|
<BackupSiteAddDialog ref="backupSiteAddDialog" @success="refresh()"/>
|
|
<BackupSiteContentDialog ref="backupSiteContentDialog" @success="refresh()"/>
|
|
<BackupSiteConfigDialog ref="backupSiteConfigDialog" @success="refresh()"/>
|
|
<BackupSiteScheduleDialog ref="backupSiteScheduleDialog" @success="refresh()"/>
|
|
|
|
<Section :title="$t('backup.sites.title')">
|
|
<template #header-buttons>
|
|
<Button v-if="profile.isAtLeastOwner" @click="onAdd()"> {{ $t('main.action.add') }}</Button>
|
|
</template>
|
|
|
|
<div>
|
|
<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; 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;">
|
|
<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 v-if="site.encrypted">
|
|
<span v-if="site.encryptedFilenames">{{ $t('backups.useFileAndFileNameEncryption') }}</span>
|
|
<span v-else>{{ $t('backups.useFileEncryption') }}</span>
|
|
<i class="fa-solid fa-lock"></i>
|
|
</div>
|
|
|
|
<div>
|
|
Storage: <b>{{ site.provider }} ({{ site.format }}) </b>
|
|
<span>at
|
|
<span v-if="site.provider === 'filesystem'">{{ site.config.backupDir }}{{ (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
|
|
<span v-else-if="site.provider === 'disk' || site.provider === 'ext4' || site.provider === 'xfs' || site.provider === 'mountpoint'">{{ site.config.mountOptions.diskPath || site.config.mountPoint }}{{ (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
|
|
<span v-else-if="site.provider === 'cifs' || site.provider === 'nfs' || site.provider === 'sshfs'">{{ site.config.mountOptions.host }}:{{ site.config.mountOptions.remoteDir }}{{ (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
|
|
<span v-else-if="site.provider === 's3'">{{ site.config.region + ' ' + site.config.bucket + (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
|
|
<span v-else-if="site.provider === 'minio'">{{ site.config.endpoint + ' ' + site.config.bucket + (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
|
|
<span v-else-if="site.provider === 'gcs'">{{ site.config.endpoint + ' ' + site.config.bucket + (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
|
|
<span v-else>{{ regionName(site.provider, site.config.endpoint) + ' ' + site.config.bucket + (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
{{ $t('backups.schedule.schedule') }}: <b>{{ prettySchedule(site.schedule) }}</b>
|
|
</div>
|
|
<div>
|
|
{{ $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 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>
|
|
<div style="margin-top: 5px">
|
|
<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>
|
|
<div style="margin-top: 10px;" class="text-danger" v-if="site.status.message" v-html="site.status.message"></div>
|
|
<div v-if="site.task && site.task.running">
|
|
<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="display: block; margin-top: 3px; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{ site.task.percent }}% {{ site.task.message }}</div>
|
|
</div>
|
|
<Button plain tool :href="`/logs.html?taskId=${site.task.id}`" target="_blank">Logs</Button>
|
|
<Button danger plain tool icon="fa-solid fa-xmark" @click="onCancelTask(site.task.id)"></Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
|
|
<SystemBackupList ref="systemBackupList"/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
/* should match pankow-table-placeholder */
|
|
.empty-placeholder {
|
|
text-align: center;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.backup-site {
|
|
display: flex;
|
|
border-radius: var(--pankow-border-radius);
|
|
padding: 10px;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.backup-site-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.backup-site-action {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
</style> |