141 lines
4.9 KiB
Vue
141 lines
4.9 KiB
Vue
<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 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); });
|
|
|
|
if (tmpHours[0] === '*') hours.value = cronHours.map(h => h.id);
|
|
else 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>
|