Girish Ramakrishnan
446 lines
14 KiB
Vue
446 lines
14 KiB
Vue
<script setup>
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
const i18n = useI18n();
|
|
const t = i18n.t;
|
|
|
|
import { ref, onMounted, useTemplateRef } from 'vue';
|
|
import { Icon, Button, Switch, Checkbox, FormGroup, TextInput, TableView, Menu, Dialog, ProgressBar } from '@cloudron/pankow';
|
|
import { prettyLongDate, prettyFileSize } from '@cloudron/pankow/utils';
|
|
import { API_ORIGIN, RSTATES } from '../../constants.js';
|
|
import { download } from '../../utils.js';
|
|
import AppImportDialog from '../AppImportDialog.vue';
|
|
import AppRestoreDialog from '../AppRestoreDialog.vue';
|
|
import SettingsItem from '../SettingsItem.vue';
|
|
import AppsModel from '../../models/AppsModel.js';
|
|
import BackupSitesModel from '../../models/BackupSitesModel.js';
|
|
import TasksModel from '../../models/TasksModel.js';
|
|
import { TASK_TYPES } from '../../constants.js';
|
|
|
|
const appsModel = AppsModel.create();
|
|
const backupSitesModel = BackupSitesModel.create();
|
|
const tasksModel = TasksModel.create();
|
|
|
|
const props = defineProps([ 'app' ]);
|
|
|
|
const columns = ref({
|
|
preserveSecs: {
|
|
label: '',
|
|
icon: 'fa-solid fa-archive',
|
|
width: '40px',
|
|
sort: true
|
|
},
|
|
packageVersion: {
|
|
label: t('app.backups.backups.packageVersion'),
|
|
sort: true,
|
|
},
|
|
site: {
|
|
label: t('backup.target.label'),
|
|
sort: true,
|
|
},
|
|
size: {
|
|
label: t('backup.target.size'),
|
|
sort: true,
|
|
},
|
|
creationTime: {
|
|
label: t('app.backups.backups.time'),
|
|
sort: true,
|
|
},
|
|
actions: {
|
|
label: '',
|
|
sort: false,
|
|
}
|
|
});
|
|
|
|
const actionMenuModel = ref([]);
|
|
const actionMenuElement = useTemplateRef('actionMenuElement');
|
|
function onActionMenu(backup, event) {
|
|
actionMenuModel.value = [{
|
|
icon: 'fa-solid fa-info',
|
|
label: t('backups.archives.info'),
|
|
action: onInfo.bind(null, backup),
|
|
}, {
|
|
icon: 'fa-solid fa-pencil-alt',
|
|
label: t('main.action.edit'),
|
|
visible: props.app.accessLevel === 'admin',
|
|
action: onEdit.bind(null, backup),
|
|
}, {
|
|
separator: true,
|
|
}, {
|
|
icon: 'fa-solid fa-download',
|
|
label: t('app.backups.backups.downloadBackupTooltip'),
|
|
visible: backup.site.format === 'tgz' && props.app.accessLevel === 'admin',
|
|
action: getDownloadLink.bind(null, backup),
|
|
}, {
|
|
icon: 'fa-solid fa-file-alt',
|
|
label: t('app.backups.backups.downloadConfigTooltip'),
|
|
visible: props.app.accessLevel === 'admin',
|
|
action: onDownloadConfig.bind(null, backup),
|
|
}, {
|
|
separator: true,
|
|
}, {
|
|
icon: 'fa-solid fa-clone',
|
|
label: t('app.backups.backups.cloneTooltip'),
|
|
visible: props.app.accessLevel === 'admin',
|
|
action: onClone.bind(null, backup),
|
|
}, {
|
|
icon: 'fa-solid fa-history',
|
|
label: t('app.backups.backups.restoreTooltip'),
|
|
disabled: !!props.app.taskId || props.app.runState === 'stopped',
|
|
action: onRestore.bind(null, backup),
|
|
// }, {
|
|
// separator: true,
|
|
// }, {
|
|
// icon: 'fa-solid fa-key',
|
|
// label: t('app.backups.backups.checkIntegrity'),
|
|
// visible: props.app.accessLevel === 'admin',
|
|
// action: onCheckIntegrity.bind(null, backup),
|
|
}];
|
|
|
|
actionMenuElement.value.open(event, event.currentTarget);
|
|
}
|
|
|
|
const busy = ref(true);
|
|
const errorMessage = ref('');
|
|
const infoBackup = ref({});
|
|
const editBusy = ref(false);
|
|
const editError = ref('');
|
|
const editBackup = ref({});
|
|
const editPersist = ref(false);
|
|
const editLabel = ref('');
|
|
const importBusy = ref(false);
|
|
const autoBackupsEnabled = ref(false);
|
|
const backups = ref([]);
|
|
const infoDialog = useTemplateRef('infoDialog');
|
|
const editDialog = useTemplateRef('editDialog');
|
|
const restoreDialog = useTemplateRef('restoreDialog');
|
|
const taskLogsMenu = ref([]);
|
|
const lastTask = ref({});
|
|
const startBackupBusy = ref(false);
|
|
const stopBackupBusy = ref(false);
|
|
const backupSitesMenu = ref([]);
|
|
const backupSites = ref([]);
|
|
|
|
async function onChangeAutoBackups(value) {
|
|
const [error] = await appsModel.configure(props.app.id, 'automatic_backup', { enable: value });
|
|
if (error) {
|
|
autoBackupsEnabled.value = !value;
|
|
return console.error(error);
|
|
}
|
|
}
|
|
|
|
async function waitForTask() {
|
|
if (!lastTask.value.id) return;
|
|
|
|
const [error, result] = await tasksModel.get(lastTask.value.id);
|
|
if (error) return console.error(error);
|
|
|
|
lastTask.value = result;
|
|
|
|
// task done, refresh menu
|
|
if (!result.active) {
|
|
startBackupBusy.value = false;
|
|
await refreshTasks();
|
|
refreshBackupList();
|
|
return;
|
|
}
|
|
|
|
setTimeout(waitForTask, 2000);
|
|
}
|
|
|
|
async function refreshTasks() {
|
|
const [error, result] = await tasksModel.getByType(TASK_TYPES.TASK_APP_BACKUP_PREFIX + props.app.id);
|
|
if (error) return console.error(error);
|
|
|
|
lastTask.value = result[0] || {};
|
|
|
|
// limit to last 10
|
|
taskLogsMenu.value = result.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),
|
|
action: () => { window.open(`/logs.html?taskId=${t.id}`); }
|
|
};
|
|
});
|
|
|
|
// if last task is currently active, start polling
|
|
if (lastTask.value.active) waitForTask();
|
|
}
|
|
|
|
async function onStartBackup(backupSiteId) {
|
|
startBackupBusy.value = true;
|
|
|
|
const [error] = await appsModel.backup(props.app.id, backupSiteId);
|
|
if (error) return console.error(error);
|
|
|
|
await refreshTasks();
|
|
}
|
|
|
|
async function onStopBackup() {
|
|
stopBackupBusy.value = true;
|
|
|
|
const [error] = await tasksModel.stop(lastTask.value.id);
|
|
if (error) return console.error(error);
|
|
|
|
await refreshTasks();
|
|
|
|
stopBackupBusy.value = false;
|
|
}
|
|
|
|
function onInfo(backup) {
|
|
infoBackup.value = backup;
|
|
infoDialog.value.open();
|
|
}
|
|
|
|
function onEdit(backup) {
|
|
editBusy.value = false;
|
|
editBackup.value = backup;
|
|
editPersist.value = backup.preserveSecs === -1;
|
|
editLabel.value = backup.label || '';
|
|
editError.value = '';
|
|
editDialog.value.open();
|
|
}
|
|
|
|
async function onEditSubmit() {
|
|
const [error] = await appsModel.updateBackup(props.app.id, editBackup.value.id, editLabel.value, editPersist.value ? -1 : 0);
|
|
if (error) {
|
|
editError.value = error.body ? error.body.message : 'Internal error';
|
|
editBusy.value = false;
|
|
return console.error(error);
|
|
}
|
|
|
|
refreshBackupList();
|
|
editDialog.value.close();
|
|
}
|
|
|
|
function getDownloadLink(backup) {
|
|
const accessToken = localStorage.token;
|
|
return `${API_ORIGIN}/api/v1/apps/${props.app.id}/backups/${backup.id}/download?access_token=${accessToken}`;
|
|
}
|
|
|
|
async function onDownloadConfig(backup) {
|
|
const [error, backupSite] = await backupSitesModel.get(backup.siteId);
|
|
if (error) return console.error(error);
|
|
|
|
const tmp = {
|
|
remotePath: backup.remotePath
|
|
};
|
|
for (const k of ['provider', 'config', 'limits', 'format', 'encrypted', 'encryptedFilenames', 'encryptionPasswordHint']) {
|
|
tmp[k] = backupSite[k];
|
|
}
|
|
|
|
tmp.siteId = backupSite.id;
|
|
|
|
const filename = `${props.app.fqdn}-backup-config-${(new Date(backup.creationTime)).toISOString().split('T')[0]}.json`;
|
|
download(filename, JSON.stringify(tmp, null, 4));
|
|
}
|
|
|
|
const restoreBusy = ref(false);
|
|
const restoreBackup = ref({});
|
|
|
|
async function onRestore(backup) {
|
|
restoreBusy.value = false;
|
|
restoreBackup.value = backup;
|
|
restoreDialog.value.open();
|
|
}
|
|
|
|
// const backupsModel = BackupsModel.create();
|
|
|
|
// async function onCheckIntegrity(backup) {
|
|
// await backupsModel.checkIntegrity(backup.id);
|
|
// }
|
|
|
|
async function onRestoreSubmit() {
|
|
restoreBusy.value = true;
|
|
|
|
const [error] = await appsModel.restore(props.app.id, restoreBackup.value.id);
|
|
if (error) {
|
|
restoreBusy.value = false;
|
|
return console.error(error);
|
|
}
|
|
|
|
restoreDialog.value.close();
|
|
}
|
|
|
|
const importDialog = useTemplateRef('importDialog');
|
|
function onImport() {
|
|
importDialog.value.open(props.app.id);
|
|
}
|
|
|
|
const cloneDialog = useTemplateRef('cloneDialog');
|
|
function onClone(backup) {
|
|
cloneDialog.value.open(backup, props.app.id);
|
|
}
|
|
|
|
async function refreshBackupList() {
|
|
const [error, result] = await appsModel.backups(props.app.id);
|
|
if (error) return console.error(error);
|
|
|
|
result.forEach(backup => {
|
|
backup.site = backupSites.value.find(t => t.id === backup.siteId);
|
|
});
|
|
backups.value = result;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
autoBackupsEnabled.value = props.app.enableBackup;
|
|
|
|
const [error, result] = await backupSitesModel.list();
|
|
if (error) return console.error(error);
|
|
|
|
backupSites.value = result;
|
|
backupSitesMenu.value = result.map(site => {
|
|
return {
|
|
label: site.name,
|
|
action: onStartBackup.bind(null, site.id),
|
|
};
|
|
});
|
|
|
|
await refreshBackupList();
|
|
await refreshTasks();
|
|
|
|
busy.value = false;
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<Menu ref="actionMenuElement" :model="actionMenuModel" />
|
|
<AppRestoreDialog ref="cloneDialog"/>
|
|
<AppImportDialog ref="importDialog"/>
|
|
|
|
<Dialog ref="infoDialog"
|
|
:title="$t('backups.backupDetails.title')"
|
|
:reject-label="$t('main.dialog.close')"
|
|
>
|
|
<div>
|
|
<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.remotePath') }}</div>
|
|
<div class="info-value">{{ infoBackup.remotePath }}</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>
|
|
</div>
|
|
</Dialog>
|
|
|
|
<Dialog ref="editDialog"
|
|
:title="$t('backups.backupEdit.title')"
|
|
:reject-label="$t('main.dialog.cancel')"
|
|
reject-style="secondary"
|
|
:confirm-label="$t('main.dialog.save')"
|
|
:confirm-active="true"
|
|
:confirm-busy="editBusy"
|
|
@confirm="onEditSubmit()"
|
|
>
|
|
<div>
|
|
<form @submit.prevent="onEditSubmit()" autocomplete="off">
|
|
<fieldset :disabled="editBusy">
|
|
<p class="has-error" v-show="editError">{{ editError }}</p>
|
|
|
|
<FormGroup>
|
|
<label for="labelInput">{{ $t('backups.backupEdit.label') }}</label>
|
|
<TextInput v-model="editLabel" id="labelInput" />
|
|
</FormGroup>
|
|
|
|
<Checkbox v-model="editPersist" :label="$t('backups.backupEdit.preserved.description')"/>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</Dialog>
|
|
|
|
<Dialog ref="restoreDialog"
|
|
:title="$t('app.restoreDialog.title', { app: app.fqdn })"
|
|
:reject-label="$t('main.dialog.close')"
|
|
reject-style="secondary"
|
|
:confirm-label="$t('app.restoreDialog.restoreAction')"
|
|
:confirm-active="true"
|
|
:confirm-busy="restoreBusy"
|
|
@confirm="onRestoreSubmit()"
|
|
>
|
|
<div>
|
|
<p>{{ $t('app.restoreDialog.description', { creationTime: prettyLongDate(restoreBackup.creationTime) }) }}</p>
|
|
<p class="text-danger">{{ $t('app.restoreDialog.warning') }}</p>
|
|
<br/>
|
|
</div>
|
|
</Dialog>
|
|
|
|
<SettingsItem>
|
|
<FormGroup>
|
|
<label>{{ $t('app.backups.auto.title') }}</label>
|
|
<div v-html="$t('app.backups.auto.description', { backupLink: '/#/backups' })"></div>
|
|
</FormGroup>
|
|
<Switch v-model="autoBackupsEnabled" @change="onChangeAutoBackups"/>
|
|
</SettingsItem>
|
|
|
|
<hr style="margin-top: 20px"/>
|
|
|
|
<div>
|
|
<label>{{ $t('app.backups.import.title') }}</label>
|
|
<div>{{ $t('app.backups.import.description') }}</div>
|
|
</div>
|
|
<br/>
|
|
<Button @click="onImport()" :loading="importBusy" :disabled="importBusy || !!app.taskId || app.runState === 'stopped'" v-tooltip="app.taskId ? 'App is not running' : ''">{{ $t('app.backups.backups.importAction') }}</Button>
|
|
|
|
<hr style="margin-top: 20px"/>
|
|
|
|
<SettingsItem>
|
|
<FormGroup>
|
|
<label>{{ $t('app.backups.backups.title') }}</label>
|
|
<div>{{ $t('app.backups.backups.description') }}</div>
|
|
</FormGroup>
|
|
<div style="display: flex; align-items: center;">
|
|
<Button tool secondary :menu="taskLogsMenu" :disabled="!taskLogsMenu.length">{{ $t('main.action.logs') }}</Button>
|
|
</div>
|
|
</SettingsItem>
|
|
|
|
<p class="has-error" v-if="errorMessage">{{ errorMessage }}</p>
|
|
|
|
<TableView :model="backups" :columns="columns" :busy="busy" :placeholder="$t('backups.listing.noBackups')" style="max-height: 400px;" >
|
|
<template #preserveSecs="backup">
|
|
<Icon icon="fa-solid fa-archive" v-show="backup.preserveSecs === -1" />
|
|
</template>
|
|
<template #creationTime="backup">
|
|
{{ prettyLongDate(backup.creationTime) }} <b v-show="backup.label">({{ backup.label }})</b>
|
|
</template>
|
|
<template #site="backup">
|
|
{{ backup.site.name }}
|
|
</template>
|
|
<template #size="backup">
|
|
<span v-if="backup.stats">{{ prettyFileSize(backup.stats.size) }} - {{ backup.stats.fileCount }} file(s)</span>
|
|
</template>
|
|
<template #actions="backup">
|
|
<div style="text-align: right;">
|
|
<Button tool plain secondary @click="onActionMenu(backup, $event)" icon="fa-solid fa-ellipsis" />
|
|
</div>
|
|
</template>
|
|
</TableView>
|
|
|
|
<br/>
|
|
|
|
<div v-if="lastTask.active">
|
|
<ProgressBar :value="lastTask.percent" :show-label="false" :busy="true" :mode="lastTask.percent <= 0 ? 'indeterminate' : ''"/>
|
|
<div>{{ lastTask.message }}</div>
|
|
<br/>
|
|
</div>
|
|
|
|
<div class="button-bar">
|
|
<Button danger @click="onStopBackup()" v-if="lastTask.active" :loading="stopBackupBusy" :disabled="stopBackupBusy">{{ $t('backups.listing.stopTask') }}</Button>
|
|
<div v-else>
|
|
<Button v-if="backupSites.length <= 1" @click="onStartBackup(backupSites[0].id)" :loading="startBackupBusy" :disabled="!backupSites.length || app.runState === RSTATES.STOPPED || startBackupBusy || !!app.error">{{ $t('app.backups.backups.createBackupAction') }}</Button>
|
|
<Button v-else :menu="backupSitesMenu" :loading="startBackupBusy" :disabled="app.runState === RSTATES.STOPPED || startBackupBusy || !!app.error">{{ $t('app.backups.backups.createBackupAction') }}</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|