Move schedule and retention settings back to a separate dialog
This commit is contained in:
Johannes Zellner
@@ -0,0 +1,143 @@
|
||||
<script setup>
|
||||
|
||||
import { ref, useTemplateRef, computed } from 'vue';
|
||||
import { Dialog, FormGroup, MultiSelect } from '@cloudron/pankow';
|
||||
import BackupTargetsModel from '../models/BackupTargetsModel.js';
|
||||
|
||||
const emit = defineEmits([ 'success' ]);
|
||||
|
||||
const backupTargetsModel = BackupTargetsModel.create();
|
||||
|
||||
const backupRetentions = [
|
||||
{ name: '2 days', id: { keepWithinSecs: 2 * 24 * 60 * 60 }},
|
||||
{ name: '1 week', id: { keepWithinSecs: 7 * 24 * 60 * 60 }}, // default
|
||||
{ name: '1 month', id: { keepWithinSecs: 30 * 24 * 60 * 60 }},
|
||||
{ name: '3 months', id: { keepWithinSecs: 3 * 30 * 24 * 60 * 60 }},
|
||||
{ name: '2 daily, 4 weekly', id: { keepDaily: 2, keepWeekly: 4 }},
|
||||
{ name: '3 daily, 4 weekly, 6 monthly', id: { keepDaily: 3, keepWeekly: 4, keepMonthly: 6 }},
|
||||
{ name: '7 daily, 4 weekly, 12 monthly', id: { keepDaily: 7, keepWeekly: 4, keepMonthly: 12 }},
|
||||
{ name: 'Forever', id: { keepWithinSecs: -1 }}
|
||||
];
|
||||
|
||||
// values correspond to cron days
|
||||
const cronDays = [
|
||||
{ id: 0, name: 'Sunday' },
|
||||
{ id: 1, name: 'Monday' },
|
||||
{ id: 2, name: 'Tuesday' },
|
||||
{ id: 3, name: 'Wednesday' },
|
||||
{ id: 4, name: 'Thursday' },
|
||||
{ id: 5, name: 'Friday' },
|
||||
{ id: 6, name: 'Saturday' },
|
||||
];
|
||||
|
||||
// generates 24h time sets (instead of american 12h) to avoid having to translate everything to locales eg. 12:00
|
||||
const cronHours = Array.from({ length: 24 }).map(function (v, i) { return { id: i, name: (i < 10 ? '0' : '') + i + ':00' }; });
|
||||
|
||||
const policy = ref({
|
||||
schedule: '',
|
||||
retention: ''
|
||||
});
|
||||
|
||||
const id = ref('');
|
||||
const busy = ref(false);
|
||||
const formError = ref('');
|
||||
const dialog = useTemplateRef('dialog');
|
||||
const days = ref([]);
|
||||
const hours = ref([]);
|
||||
const configureRetention = ref('');
|
||||
const isConfigureValid = computed(() => {
|
||||
return !!days.value.length && !!hours.value.length;
|
||||
});
|
||||
|
||||
async function onSubmit() {
|
||||
if (!isConfigureValid.value) return;
|
||||
|
||||
busy.value = true;
|
||||
|
||||
let daysPattern;
|
||||
if (days.value.length === 7) daysPattern = '*';
|
||||
else daysPattern = days.value;
|
||||
|
||||
let hoursPattern;
|
||||
if (hours.value.length === 24) hoursPattern = '*';
|
||||
else hoursPattern = hours.value;
|
||||
|
||||
let [error] = await backupTargetsModel.setSchedule(id.value, `00 00 ${hoursPattern} * * ${daysPattern}`);
|
||||
if (error) {
|
||||
busy.value = false;
|
||||
formError.value = error.body ? error.body.message : 'Internal error';
|
||||
return console.error(error);
|
||||
}
|
||||
|
||||
[error] = await backupTargetsModel.setRetention(id.value, configureRetention.value);
|
||||
if (error) {
|
||||
busy.value = false;
|
||||
formError.value = error.body ? error.body.message : 'Internal error';
|
||||
return console.error(error);
|
||||
}
|
||||
|
||||
emit('success');
|
||||
dialog.value.close();
|
||||
|
||||
busy.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
async open(target) {
|
||||
id.value = target.id;
|
||||
busy.value = false;
|
||||
formError.value = false;
|
||||
|
||||
const currentRetentionString = JSON.stringify(target.retention);
|
||||
let selectedRetention = backupRetentions.find(function (x) { return JSON.stringify(x.id) === currentRetentionString; });
|
||||
if (!selectedRetention) selectedRetention = backupRetentions[0];
|
||||
configureRetention.value = selectedRetention.id;
|
||||
|
||||
const tmp = target.schedule.split(' ');
|
||||
const tmpHours = tmp[2].split(',');
|
||||
const tmpDays = tmp[5].split(',');
|
||||
if (tmpDays[0] === '*') days.value = cronDays.map((day) => { return day.id; });
|
||||
else days.value = tmpDays.map((day) => { return parseInt(day, 10); });
|
||||
|
||||
hours.value = tmpHours.map((hour) => { return parseInt(hour, 10); });
|
||||
|
||||
dialog.value.open();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog ref="dialog"
|
||||
:title="$t('backups.configureBackupSchedule.title')"
|
||||
reject-style="secondary"
|
||||
:reject-label="busy ? null : $t('main.dialog.cancel')"
|
||||
:confirm-label="$t('main.dialog.save')"
|
||||
:confirm-busy="busy"
|
||||
:confirm-active="isConfigureValid"
|
||||
@confirm="onSubmit()"
|
||||
>
|
||||
<div class="error-label" v-show="formError">{{ formError }}</div>
|
||||
|
||||
<form @submit.prevent="onSubmit()" autocomplete="off">
|
||||
<fieldset>
|
||||
<FormGroup>
|
||||
<label for="daysInput">{{ $t('backups.configureBackupSchedule.schedule') }}</label>
|
||||
<p v-html="$t('backups.configureBackupSchedule.scheduleDescription')"></p>
|
||||
|
||||
<div style="display: flex; gap: 10px;">
|
||||
<div>{{ $t('backups.configureBackupSchedule.days') }}: <MultiSelect id="daysInput" v-model="days" :options="cronDays" option-key="id" option-label="name"></MultiSelect></div>
|
||||
<div>{{ $t('backups.configureBackupSchedule.hours') }}: <MultiSelect v-model="hours" :options="cronHours" option-key="id" option-label="name"></MultiSelect></div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<label for="retentionInput">{{ $t('backups.configureBackupSchedule.retentionPolicy') }}</label>
|
||||
<select id="retentionInput" v-model="configureRetention">
|
||||
<option v-for="elem in backupRetentions" :key="elem.id" :value="elem.id">{{ elem.name }}</option>
|
||||
</select>
|
||||
</FormGroup>
|
||||
</fieldset>
|
||||
</form>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
|
||||
import { ref, useTemplateRef } from 'vue';
|
||||
import { Dialog, FormGroup, TextInput, MultiSelect } from '@cloudron/pankow';
|
||||
import { Dialog, FormGroup, TextInput } from '@cloudron/pankow';
|
||||
import { prettyBinarySize } from '@cloudron/pankow/utils';
|
||||
import { REGIONS_CONTABO, REGIONS_VULTR, REGIONS_IONOS, REGIONS_OVH, REGIONS_LINODE, REGIONS_SCALEWAY, REGIONS_WASABI } from '../constants.js';
|
||||
import { mountlike, s3like } from '../utils.js';
|
||||
@@ -30,59 +30,16 @@ const providerConfig = ref({
|
||||
const isPrimary = ref(false);
|
||||
const limits = ref({});
|
||||
const format = ref('');
|
||||
const retention = ref({
|
||||
keepWithinSecs: 0
|
||||
});
|
||||
|
||||
const configureDays = ref([]);
|
||||
const configureHours = ref([]);
|
||||
const configureRetention = ref('');
|
||||
|
||||
const minMemoryLimit = ref(1024 * 1024 * 1024); // 1 GB
|
||||
const maxMemoryLimit = ref(minMemoryLimit.value); // set later
|
||||
|
||||
const backupRetentions = [
|
||||
{ name: '2 days', id: { keepWithinSecs: 2 * 24 * 60 * 60 }},
|
||||
{ name: '1 week', id: { keepWithinSecs: 7 * 24 * 60 * 60 }}, // default
|
||||
{ name: '1 month', id: { keepWithinSecs: 30 * 24 * 60 * 60 }},
|
||||
{ name: '3 months', id: { keepWithinSecs: 3 * 30 * 24 * 60 * 60 }},
|
||||
{ name: '2 daily, 4 weekly', id: { keepDaily: 2, keepWeekly: 4 }},
|
||||
{ name: '3 daily, 4 weekly, 6 monthly', id: { keepDaily: 3, keepWeekly: 4, keepMonthly: 6 }},
|
||||
{ name: '7 daily, 4 weekly, 12 monthly', id: { keepDaily: 7, keepWeekly: 4, keepMonthly: 12 }},
|
||||
{ name: 'Forever', id: { keepWithinSecs: -1 }}
|
||||
];
|
||||
|
||||
// values correspond to cron days
|
||||
const cronDays = [
|
||||
{ id: 0, name: 'Sunday' },
|
||||
{ id: 1, name: 'Monday' },
|
||||
{ id: 2, name: 'Tuesday' },
|
||||
{ id: 3, name: 'Wednesday' },
|
||||
{ id: 4, name: 'Thursday' },
|
||||
{ id: 5, name: 'Friday' },
|
||||
{ id: 6, name: 'Saturday' },
|
||||
];
|
||||
|
||||
// generates 24h time sets (instead of american 12h) to avoid having to translate everything to locales eg. 12:00
|
||||
const cronHours = Array.from({ length: 24 }).map(function (v, i) { return { id: i, name: (i < 10 ? '0' : '') + i + ':00' }; });
|
||||
|
||||
function isScheduleValid() {
|
||||
return !!configureDays.value.length && !!configureHours.value.length;
|
||||
}
|
||||
|
||||
async function onSubmitAdd() {
|
||||
if (!form.value.reportValidity() || !isScheduleValid()) return;
|
||||
if (!form.value.reportValidity()) return;
|
||||
|
||||
// build schedule pattern
|
||||
let daysPattern;
|
||||
if (configureDays.value.length === 7) daysPattern = '*';
|
||||
else daysPattern = configureDays.value;
|
||||
|
||||
let hoursPattern;
|
||||
if (configureHours.value.length === 24) hoursPattern = '*';
|
||||
else hoursPattern = configureHours.value;
|
||||
|
||||
const schedulePattern = `00 00 ${hoursPattern} * * ${daysPattern}`;
|
||||
// TODO define good default
|
||||
const schedulePattern = '00 00 2,23,11,7,8 * * 3,5,6,0';
|
||||
const retention = { keepWithinSecs: 7 * 24 * 60 * 60 };
|
||||
|
||||
// build provider config
|
||||
const data = {};
|
||||
@@ -189,7 +146,7 @@ async function onSubmitAdd() {
|
||||
|
||||
formError.value = {};
|
||||
busy.value = true;
|
||||
const [error, targetId] = await backupTargetsModel.add(label.value, format.value, provider.value, data, schedulePattern, retention.value, limitsConfig, encryptionPassword, encryptedFilenames);
|
||||
const [error, targetId] = await backupTargetsModel.add(label.value, format.value, provider.value, data, schedulePattern, retention, limitsConfig, encryptionPassword, encryptedFilenames);
|
||||
if (error) {
|
||||
formError.value.generic = error.body ? error.body.message : 'Internal error';
|
||||
busy.value = false;
|
||||
@@ -213,31 +170,6 @@ async function onSubmitEdit() {
|
||||
// TODO set config (eg. provider config passwords)
|
||||
// TODO set label somehow?
|
||||
|
||||
// schedule
|
||||
let daysPattern;
|
||||
if (configureDays.value.length === 7) daysPattern = '*';
|
||||
else daysPattern = configureDays.value;
|
||||
|
||||
let hoursPattern;
|
||||
if (configureHours.value.length === 24) hoursPattern = '*';
|
||||
else hoursPattern = configureHours.value;
|
||||
|
||||
const schedulePattern = `00 00 ${hoursPattern} * * ${daysPattern}`;
|
||||
let [error] = await backupTargetsModel.setSchedule(target.value.id, schedulePattern);
|
||||
if (error) {
|
||||
formError.value.generic = 'Failed to set schdule';
|
||||
busy.value = false;
|
||||
return console.error(error);
|
||||
}
|
||||
|
||||
// retention
|
||||
[error] = await backupTargetsModel.setRetention(target.value.id, retention.value);
|
||||
if (error) {
|
||||
formError.value.generic = 'Failed to set retention';
|
||||
busy.value = false;
|
||||
return console.error(error);
|
||||
}
|
||||
|
||||
// limits
|
||||
const limitsConfig = {
|
||||
memoryLimit: parseInt(limits.value.memoryLimit),
|
||||
@@ -248,7 +180,7 @@ async function onSubmitEdit() {
|
||||
// deleteConcurrency: parseInt(providerConfig.value.limits.deleteConcurrency),
|
||||
};
|
||||
|
||||
[error] = await backupTargetsModel.setLimits(target.value.id, limitsConfig);
|
||||
const [error] = await backupTargetsModel.setLimits(target.value.id, limitsConfig);
|
||||
if (error) {
|
||||
formError.value.generic = 'Failed to set limits';
|
||||
busy.value = false;
|
||||
@@ -302,24 +234,8 @@ defineExpose({
|
||||
providerConfig.value = t?.config || {};
|
||||
encrypted.value = t?.encrypted || false;
|
||||
encryptedFilenames.value = t?.encryptedFilenames || false;
|
||||
retention.value = t?.rentention || { keepWithinSecs: 0 };
|
||||
limits.value = t?.limits || {};
|
||||
|
||||
const currentRetentionString = JSON.stringify(t?.retention || {});
|
||||
let selectedRetention = backupRetentions.find(function (x) { return JSON.stringify(x.id) === currentRetentionString; });
|
||||
if (!selectedRetention) selectedRetention = backupRetentions[0];
|
||||
retention.value = selectedRetention.id;
|
||||
|
||||
// TODO define some default
|
||||
const tmp = t?.schedule.split(' ') || '00 00 2,23,11,7,8 * * 3,5,6,0';
|
||||
const hours = tmp[2].split(',');
|
||||
const days = tmp[5].split(',');
|
||||
if (days[0] === '*') configureDays.value = cronDays.map((day) => { return day.id; });
|
||||
else configureDays.value = days.map((day) => { return parseInt(day, 10); });
|
||||
|
||||
configureHours.value = hours.map((hour) => { return parseInt(hour, 10); });
|
||||
|
||||
|
||||
// ensure we have all required child objects
|
||||
if (!providerConfig.value.mountOptions) providerConfig.value.mountOptions = {};
|
||||
|
||||
@@ -407,24 +323,6 @@ defineExpose({
|
||||
</div>
|
||||
<input type="range" id="copyConcurrencyInput" v-model="limits.copyConcurrency" step="10" min="10" max="500" />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<label for="daysInput">{{ $t('backups.configureBackupSchedule.schedule') }}</label>
|
||||
<p v-html="$t('backups.configureBackupSchedule.scheduleDescription')"></p>
|
||||
|
||||
<div style="display: flex; gap: 10px;">
|
||||
<div>{{ $t('backups.configureBackupSchedule.days') }}: <MultiSelect id="daysInput" v-model="configureDays" :options="cronDays" option-key="id" option-label="name"></MultiSelect></div>
|
||||
<div>{{ $t('backups.configureBackupSchedule.hours') }}: <MultiSelect v-model="configureHours" :options="cronHours" option-key="id" option-label="name"></MultiSelect></div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<label for="retentionInput">{{ $t('backups.configureBackupSchedule.retentionPolicy') }}</label>
|
||||
<select id="retentionInput" v-model="retention">
|
||||
<option v-for="elem in backupRetentions" :key="elem.id" :value="elem.id">{{ elem.name }}</option>
|
||||
</select>
|
||||
</FormGroup>
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user