Johannes Zellner
469 lines
16 KiB
Vue
469 lines
16 KiB
Vue
<script setup>
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
const i18n = useI18n();
|
|
const t = i18n.t;
|
|
|
|
import { ref, onMounted, useTemplateRef } from 'vue';
|
|
import { Button, Menu, ProgressBar, FormGroup, TextInput, Checkbox, TableView, Dialog } from '@cloudron/pankow';
|
|
import { prettyLongDate, copyToClipboard } from '@cloudron/pankow/utils';
|
|
import { TASK_TYPES } from '../constants.js';
|
|
import Section from '../components/Section.vue';
|
|
import SettingsItem from '../components/SettingsItem.vue';
|
|
import BackupsModel from '../models/BackupsModel.js';
|
|
import BackupTargetsModel from '../models/BackupTargetsModel.js';
|
|
import AppsModel from '../models/AppsModel.js';
|
|
import TasksModel from '../models/TasksModel.js';
|
|
import DashboardModel from '../models/DashboardModel.js';
|
|
import { download } from '../utils.js';
|
|
|
|
const backupsModel = BackupsModel.create();
|
|
const backupTargetsModel = BackupTargetsModel.create();
|
|
const appsModel = AppsModel.create();
|
|
const tasksModel = TasksModel.create();
|
|
const dashboardModel = DashboardModel.create();
|
|
|
|
const columns = {
|
|
preserveSecs: {
|
|
label: '',
|
|
icon: 'fa-solid fa-archive',
|
|
width: '40px',
|
|
sort: true
|
|
},
|
|
packageVersion: {
|
|
label: t('backups.listing.version'),
|
|
sort: true,
|
|
hideMobile: true,
|
|
},
|
|
creationTime: {
|
|
label: t('main.table.date'),
|
|
sort: true
|
|
},
|
|
content: {
|
|
label: t('backups.listing.contents'),
|
|
sort: false,
|
|
hideMobile: true,
|
|
},
|
|
target: {
|
|
label: 'Storage',
|
|
sort: true
|
|
},
|
|
actions: {}
|
|
};
|
|
|
|
const actionMenuModel = ref([]);
|
|
const actionMenuElement = useTemplateRef('actionMenuElement');
|
|
function onActionMenu(backup, event) {
|
|
actionMenuModel.value = [{
|
|
icon: 'fa-solid fa-circle-info',
|
|
// TODO translate
|
|
label: 'Info',
|
|
action: onInfo.bind(null, backup),
|
|
}, {
|
|
icon: 'fa-solid fa-pencil-alt',
|
|
label: t('backups.listing.tooltipEditBackup'),
|
|
action: onEdit.bind(null, backup),
|
|
}, {
|
|
icon: 'fa-solid fa-file-alt',
|
|
label: t('backups.listing.tooltipDownloadBackupConfig'),
|
|
action: onDownloadConfig.bind(null, backup),
|
|
}];
|
|
|
|
actionMenuElement.value.open(event, event.currentTarget);
|
|
}
|
|
|
|
|
|
const busy = ref(true);
|
|
const backups = ref([]);
|
|
const taskLogsMenu = ref([]);
|
|
const trackingBackupTask = ref({});
|
|
const trackingCleanupTask = ref({});
|
|
const targets = ref([]);
|
|
const startBackupError = ref('');
|
|
const startBackupBusy = ref(false);
|
|
const startCleanupError = ref('');
|
|
const startCleanupBusy = ref(false);
|
|
|
|
let primaryTargetId = null;
|
|
|
|
async function waitForBackupTask(id) {
|
|
if (!id || (trackingBackupTask.value.id && trackingBackupTask.value.id !== id)) return;
|
|
|
|
const [error, result] = await tasksModel.get(id);
|
|
if (error) return console.error(error);
|
|
|
|
trackingBackupTask.value = result;
|
|
|
|
// task done, refresh menu
|
|
if (!result.active) {
|
|
trackingBackupTask.value = {};
|
|
refreshBackups();
|
|
refreshTasks();
|
|
return;
|
|
}
|
|
|
|
setTimeout(waitForBackupTask.bind(null, id), 2000);
|
|
}
|
|
|
|
async function waitForCleanupTask(id) {
|
|
if (!id || (trackingCleanupTask.value.id && trackingCleanupTask.value.id !== id)) return;
|
|
|
|
const [error, result] = await tasksModel.get(id);
|
|
if (error) return console.error(error);
|
|
|
|
trackingCleanupTask.value = result;
|
|
|
|
// task done, refresh menu
|
|
if (!result.active) {
|
|
trackingCleanupTask.value = {};
|
|
refreshBackups();
|
|
refreshTasks();
|
|
return;
|
|
}
|
|
|
|
setTimeout(waitForCleanupTask.bind(null, id), 2000);
|
|
}
|
|
|
|
async function refreshTasks() {
|
|
let tasks = [];
|
|
|
|
for (const target of targets.value) {
|
|
const [error, result] = await tasksModel.getByType(TASK_TYPES.TASK_FULL_BACKUP_PREFIX + target.id);
|
|
if (error) return console.error(error);
|
|
|
|
tasks = tasks.concat(result);
|
|
|
|
// if last task is currently active, start polling
|
|
if (result[0] && result[0].active) waitForBackupTask(result[0].id);
|
|
}
|
|
|
|
for (const target of targets.value) {
|
|
const [error, result] = await tasksModel.getByType(TASK_TYPES.TASK_CLEAN_BACKUPS_PREFIX + target.id);
|
|
if (error) return console.error(error);
|
|
|
|
tasks = tasks.concat(result);
|
|
|
|
// if last task is currently active, start polling
|
|
if (result[0] && result[0].active) waitForCleanupTask(result[0].id);
|
|
}
|
|
|
|
|
|
// limit to last 10
|
|
tasks.sort((a, b) => b.creationTime < a.creationTime ? -1 : 1);
|
|
taskLogsMenu.value = tasks.slice(0,10).map(t => {
|
|
return {
|
|
icon: 'fa-solid ' + ((!t.active && t.success) ? 'status-active fa-check-circle' : (t.active ? 'fa-circle-notch fa-spin' : 'status-error fa-times-circle')),
|
|
label: `${prettyLongDate(t.ts)} - ${t.type.indexOf(TASK_TYPES.TASK_CLEAN_BACKUPS_PREFIX) === 0 ? 'cleanup' : 'backup'}`,
|
|
action: () => { window.open(`/logs.html?taskId=${t.id}`); }
|
|
};
|
|
});
|
|
}
|
|
|
|
async function refreshBackups() {
|
|
const [error, result] = await backupsModel.list();
|
|
if (error) return console.error(error);
|
|
|
|
// add contents property
|
|
const appsById = {};
|
|
const appsByFqdn = {};
|
|
|
|
const [appsError, apps] = await appsModel.list();
|
|
if (appsError) console.error(error);
|
|
|
|
(apps || []).forEach(function (app) {
|
|
appsById[app.id] = app;
|
|
appsByFqdn[app.fqdn] = app;
|
|
});
|
|
|
|
result.forEach(function (backup) {
|
|
backup.target = targets.value.find(t => t.id === backup.targetId);
|
|
backup.contents = []; // { id, label, fqdn }
|
|
backup.dependsOn.forEach(function (appBackupId) {
|
|
const match = appBackupId.match(/app_(.*?)_.*/); // *? means non-greedy
|
|
if (!match) return; // for example, 'mail'
|
|
const app = appsById[match[1]];
|
|
if (app) {
|
|
backup.contents.push({
|
|
id: app.id,
|
|
label: app.label,
|
|
fqdn: app.fqdn
|
|
});
|
|
} else {
|
|
backup.contents.push({
|
|
id: match[1],
|
|
label: null,
|
|
fqdn: null
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
backups.value = result;
|
|
}
|
|
|
|
async function onStartBackup() {
|
|
startBackupBusy.value = true;
|
|
startBackupError.value = '';
|
|
|
|
const [error] = await backupTargetsModel.createBackup(primaryTargetId);
|
|
if (error) {
|
|
if (error.status === 409) {
|
|
if (error.body.message.indexOf('full_backup') !== -1) startBackupError.value = 'Backup already in progress. Please retry later.';
|
|
else startBackupError.value = 'App task is currently in progress. Please retry later.';
|
|
}
|
|
|
|
startBackupBusy.value = false;
|
|
return console.error(error);
|
|
}
|
|
|
|
await refreshTasks();
|
|
|
|
startBackupBusy.value = false;
|
|
}
|
|
|
|
const stopBackupBusy = ref(false);
|
|
|
|
async function onStopBackup() {
|
|
stopBackupBusy.value = true;
|
|
|
|
const [error] = await tasksModel.stop(trackingBackupTask.value.id);
|
|
if (error) return console.error(error);
|
|
|
|
await refreshTasks();
|
|
|
|
stopBackupBusy.value = false;
|
|
}
|
|
|
|
async function onStartCleanup() {
|
|
startCleanupBusy.value = true;
|
|
startCleanupError.value = '';
|
|
|
|
const [error] = await backupTargetsModel.cleanup(primaryTargetId);
|
|
if (error) {
|
|
if (error.status === 409) {
|
|
if (error.body.message.indexOf('full_backup') !== -1) startCleanupError.value = 'Cleanup already in progress. Please retry later.';
|
|
else startCleanupError.value = 'App task is currently in progress. Please retry later.';
|
|
}
|
|
|
|
startCleanupBusy.value = false;
|
|
return console.error(error);
|
|
}
|
|
|
|
await refreshTasks();
|
|
|
|
startCleanupBusy.value = false;
|
|
}
|
|
|
|
const stopCleanupBusy = ref(false);
|
|
|
|
async function onStopCleanup() {
|
|
stopCleanupBusy.value = true;
|
|
|
|
const [error] = await tasksModel.stop(trackingCleanupTask.value.id);
|
|
if (error) return console.error(error);
|
|
|
|
await refreshTasks();
|
|
|
|
stopCleanupBusy.value = false;
|
|
}
|
|
|
|
async function onDownloadConfig(backup) {
|
|
const [error, dashboardConfig] = await dashboardModel.config();
|
|
if (error) return console.error(error);
|
|
|
|
const [backupTargetError, backupTarget] = await backupTargetsModel.get(backup.targetId);
|
|
if (backupTargetError) return console.error(backupTargetError);
|
|
|
|
const tmp = {
|
|
remotePath: backup.remotePath
|
|
};
|
|
for (const k of ['provider', 'config', 'limits', 'format', 'encrypted', 'encryptedFilenames', 'encryptionPasswordHint']) {
|
|
tmp[k] = backupTarget[k];
|
|
}
|
|
|
|
const filename = `${dashboardConfig.adminFqdn}-backup-config-${(new Date(backup.creationTime)).toISOString().split('T')[0]}.json`;
|
|
download(filename, JSON.stringify(tmp, null, 4));
|
|
}
|
|
|
|
// backups info dialog
|
|
const infoDialog = useTemplateRef('infoDialog');
|
|
const infoBackup = ref({ contents: [] });
|
|
function onInfo(backup) {
|
|
infoBackup.value = backup;
|
|
infoDialog.value.open();
|
|
}
|
|
|
|
|
|
// edit backups dialog
|
|
const editDialog = useTemplateRef('editDialog');
|
|
const editBackupError = ref('');
|
|
const editBackupBusy = ref(false);
|
|
const editBackupId = ref('');
|
|
const editBackupLabel = ref('');
|
|
const editBackupPersist = ref(false);
|
|
function onEdit(backup) {
|
|
editBackupError.value = '';
|
|
editBackupBusy.value = false;
|
|
editBackupId.value = backup.id;
|
|
editBackupLabel.value = backup.label;
|
|
editBackupPersist.value = backup.preserveSecs === -1;
|
|
editDialog.value.open();
|
|
}
|
|
|
|
async function onEditSubmit() {
|
|
editBackupBusy.value = true;
|
|
|
|
const [error] = await backupsModel.update(editBackupId.value, editBackupLabel.value, editBackupPersist.value ? -1 : 0);
|
|
if (error) {
|
|
return console.error(error);
|
|
}
|
|
|
|
await refreshBackups();
|
|
editBackupBusy.value = false;
|
|
editDialog.value.close();
|
|
}
|
|
|
|
function onCopyToClipboard(value) {
|
|
copyToClipboard(value);
|
|
window.pankow.notify({ type: 'success', text: 'Copied to clipboard!' });
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const [error, result] = await backupTargetsModel.list();
|
|
if (error) return console.error(error);
|
|
|
|
targets.value = result;
|
|
|
|
const primaryTarget = result.find(t => t.primary);
|
|
if (!primaryTarget) return;
|
|
|
|
primaryTargetId = primaryTarget.id;
|
|
|
|
await refreshBackups();
|
|
await refreshTasks();
|
|
busy.value = false;
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="content">
|
|
<Menu ref="actionMenuElement" :model="actionMenuModel" />
|
|
|
|
<Section :title="$t('backups.listing.title')" :padding="false">
|
|
<Dialog ref="infoDialog"
|
|
:title="$t('backups.backupDetails.title')"
|
|
:reject-label="$t('main.dialog.close')"
|
|
>
|
|
<div class="info-row">
|
|
<div class="info-label">{{ $t('backups.backupDetails.id') }}</div>
|
|
<div class="info-value">{{ infoBackup.id }}</div>
|
|
</div>
|
|
<div class="info-row">
|
|
<div class="info-label">{{ $t('backups.backupEdit.label') }}</div>
|
|
<div class="info-value">{{ infoBackup.label }}</div>
|
|
</div>
|
|
<div class="info-row">
|
|
<div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
|
|
<div class="info-value" style="cursor: copy;" @click="onCopyToClipboard(infoBackup.remotePath)">{{ infoBackup.remotePath }}</div>
|
|
<div style="cursor: copy; padding-left: 6px;" @click="onCopyToClipboard(infoBackup.remotePath)"><i class="fa fa-clipboard"></i></div>
|
|
</div>
|
|
<div class="info-row">
|
|
<div class="info-label">{{ $t('backups.backupDetails.date') }}</div>
|
|
<div class="info-value">{{ prettyLongDate(infoBackup.creationTime) }}</div>
|
|
</div>
|
|
<div class="info-row">
|
|
<div class="info-label">{{ $t('backups.backupDetails.version') }}</div>
|
|
<div class="info-value">{{ infoBackup.packageVersion }}</div>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
<p class="text-muted">{{ $t('backups.backupDetails.list', { appCount: infoBackup.contents.length }) }}:</p>
|
|
<div v-for="content in infoBackup.contents" :key="content.id">
|
|
<a v-if="content.fqdn" :href="`/#/app/${content.id}/backups`">{{ content.label || content.fqdn }}</a>
|
|
<a v-else :href="`/#/system-eventlog?search=${content.id}`">{{ content.id }}</a>
|
|
</div>
|
|
</Dialog>
|
|
|
|
<Dialog ref="editDialog"
|
|
:title="$t('backups.backupEdit.title')"
|
|
:reject-label="editBackupBusy ? '' : $t('main.dialog.cancel')"
|
|
reject-style="secondary"
|
|
:confirm-label="$t('main.dialog.save')"
|
|
:confirm-busy="editBackupBusy"
|
|
@confirm="onEditSubmit()"
|
|
>
|
|
<p class="has-error text-center" v-show="editBackupError">{{ editBackupError }}</p>
|
|
|
|
<form @submit.prevent="onEditSubmit()" autocomplete="off">
|
|
<fieldset>
|
|
<FormGroup>
|
|
<label for="backupLabelInput">{{ $t('backups.backupEdit.label') }}</label>
|
|
<TextInput id="backupLabelInput" v-model="editBackupLabel" />
|
|
</FormGroup>
|
|
|
|
<Checkbox v-model="editBackupPersist" :label="$t('backups.backupEdit.preserved.description')" />
|
|
<!-- <sup><a popover-placement="top-right" popover-trigger="outsideClick" uib-popover="{{ 'backups.backupEdit.preserved.tooltip' | tr: { appsLength: editBackup.backup.contents.length} }}"><i class="fa fa-question-circle"></i></a></sup> -->
|
|
</fieldset>
|
|
</form>
|
|
</Dialog>
|
|
|
|
<template #header-buttons>
|
|
<Button tool :menu="taskLogsMenu" :disabled="!taskLogsMenu.length">{{ $t('main.action.logs') }}</Button>
|
|
</template>
|
|
|
|
<SettingsItem>
|
|
<div style="flex-grow: 1; max-width: unset;">
|
|
<div v-html="$t('backups.schedule.description')"></div>
|
|
<div v-if="trackingBackupTask.active" style="margin-top: 10px;">
|
|
<ProgressBar :value="trackingBackupTask.percent" :busy="true" />
|
|
<div>{{ trackingBackupTask.message }}</div>
|
|
</div>
|
|
<div class="error-label" v-if="startBackupError">{{ startBackupError }}</div>
|
|
</div>
|
|
<div style="display: flex; align-items: center">
|
|
<Button danger @click="onStopBackup()" v-if="trackingBackupTask.active" :loading="stopBackupBusy" :disabled="stopBackupBusy">{{ $t('backups.listing.stopTask') }}</Button>
|
|
<Button plain @click="onStartBackup()" v-else :loading="startBackupBusy || trackingBackupTask.active" :disabled="startBackupBusy || trackingBackupTask.active">{{ $t('backups.listing.backupNow') }}</Button>
|
|
</div>
|
|
</SettingsItem>
|
|
|
|
<SettingsItem>
|
|
<div style="flex-grow: 1; max-width: unset;">
|
|
<div v-html="$t('backups.cleanupBackups.description')"></div>
|
|
<div v-if="trackingCleanupTask.active" style="margin-top: 10px;">
|
|
<ProgressBar :value="trackingCleanupTask.percent" :busy="true" />
|
|
<div>{{ trackingCleanupTask.message }}</div>
|
|
</div>
|
|
<div class="error-label" v-if="startCleanupError">{{ startCleanupError }}</div>
|
|
</div>
|
|
<div style="display: flex; align-items: center">
|
|
<Button danger @click="onStopCleanup()" v-if="trackingCleanupTask.active" :loading="stopCleanupBusy" :disabled="stopCleanupBusy">{{ $t('backups.listing.stopTask') }}</Button>
|
|
<Button plain @click="onStartCleanup()" v-else :loading="startCleanupBusy || trackingCleanupTask.active" :disabled="startBackupBusy || trackingCleanupTask.active">{{ $t('backups.cleanupBackups.cleanupNow') }}</Button>
|
|
</div>
|
|
</SettingsItem>
|
|
|
|
<TableView :columns="columns" :model="backups" :busy="busy" style="margin-top: 30px;" :placeholder="$t('backups.listing.noBackups')">
|
|
<template #preserveSecs="backup">
|
|
<i class="fas fa-archive" v-show="backup.preserveSecs === -1" v-tooltip="$t('backups.listing.tooltipPreservedBackup')"></i>
|
|
</template>
|
|
|
|
<template #creationTime="backup">{{ prettyLongDate(backup.creationTime) }} <b v-show="backup.label">({{ backup.label }})</b></template>
|
|
|
|
<template #content="backup">
|
|
<span v-if="backup.contents.length">{{ $t('backups.listing.appCount', { appCount: backup.contents.length }) }}</span>
|
|
<span v-else>{{ $t('backups.listing.noApps') }}</span>
|
|
</template>
|
|
|
|
<template #target="backup">{{ backup.target.name }}</template>
|
|
|
|
<template #actions="backup">
|
|
<div style="text-align: right;">
|
|
<Button tool plain secondary @click.capture="onActionMenu(backup, $event)" icon="fa-solid fa-ellipsis" />
|
|
</div>
|
|
</template>
|
|
</TableView>
|
|
</Section>
|
|
</div>
|
|
</template>
|