226 lines
8.3 KiB
Vue
226 lines
8.3 KiB
Vue
<script setup>
|
|
|
|
import { ref, onMounted, useTemplateRef } from 'vue';
|
|
import { Button, Dialog, ProgressBar, Radiobutton, MultiSelect } from 'pankow';
|
|
import { prettyLongDate } from 'pankow/utils';
|
|
import { TASK_TYPES } from '../constants.js';
|
|
import Section from '../components/Section.vue';
|
|
import UpdaterModel from '../models/UpdaterModel.js';
|
|
import TasksModel from '../models/TasksModel.js';
|
|
import DashboardModel from '../models/DashboardModel.js';
|
|
|
|
const tasksModel = TasksModel.create();
|
|
const updaterModel = UpdaterModel.create();
|
|
const dashboardModel = DashboardModel.create();
|
|
|
|
// values correspond to cron days
|
|
const cronDays = [
|
|
{ name: 'Sunday', value: 0 },
|
|
{ name: 'Monday', value: 1 },
|
|
{ name: 'Tuesday', value: 2 },
|
|
{ name: 'Wednesday', value: 3 },
|
|
{ name: 'Thursday', value: 4 },
|
|
{ name: 'Friday', value: 5 },
|
|
{ name: 'Saturday', value: 6 },
|
|
];
|
|
|
|
// 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((v, i) => { return { name: (i < 10 ? '0' : '') + i + ':00', value: i }; });
|
|
|
|
function prettyAutoUpdateSchedule(pattern) {
|
|
if (!pattern) return '';
|
|
const tmp = pattern.split(' ');
|
|
|
|
if (tmp.length === 1) return tmp[0];
|
|
|
|
const hours = tmp[2].split(',');
|
|
const days = tmp[5].split(',');
|
|
const prettyDay = (days.length === 7 || days[0] === '*') ? 'Everyday' : days.map((day) => { return cronDays[parseInt(day, 10)].name.substr(0, 3); }).join(',');
|
|
|
|
try {
|
|
const prettyHour = hours.map((hour) => { return cronHours[parseInt(hour, 10)].name; }).join(',');
|
|
return prettyDay + ' at ' + prettyHour;
|
|
} catch (error) {
|
|
console.error('Unable to build pattern.', error);
|
|
return 'Custom pattern';
|
|
}
|
|
}
|
|
|
|
const taskLogsMenu = ref([]);
|
|
const version = ref('');
|
|
const ubuntuVersion = ref('');
|
|
const currentPattern = ref('');
|
|
const percent = ref(0);
|
|
const message = ref('');
|
|
const updateBusy = ref(false);
|
|
const checkingBusy = ref(false);
|
|
const pendingUpdate = ref(null);
|
|
|
|
const configureDialog = useTemplateRef('configureDialog');
|
|
const configureBusy = ref(false);
|
|
const configureError = ref('');
|
|
const configureType = ref('');
|
|
const configurePattern = ref('');
|
|
const configureDays = ref([]);
|
|
const configureHours = ref([]);
|
|
|
|
async function refreshAutoupdatePattern() {
|
|
const [error, result] = await updaterModel.getAutoupdatePattern();
|
|
if (error) return console.error(error);
|
|
|
|
// just keep the UI sane by supporting previous default pattern
|
|
if (result.pattern === '00 30 1,3,5,23 * * *') result.pattern = '00 15 1,3,5,23 * * *';
|
|
|
|
currentPattern.value = result.pattern;
|
|
configurePattern.value = result.pattern;
|
|
}
|
|
|
|
async function refreshInfo() {
|
|
const [error, result] = await updaterModel.info();
|
|
if (error) return console.error(error);
|
|
|
|
pendingUpdate.value = result.box || null;
|
|
}
|
|
|
|
function onShowConfigure() {
|
|
configureType.value = configurePattern.value === 'never' ? 'never' : 'pattern';
|
|
const tmp = currentPattern.value.split(' ');
|
|
const hours = tmp[2] ? tmp[2].split(',') : [];
|
|
const days = tmp[5] ? tmp[5].split(',') : [];
|
|
if (days[0] === '*') configureDays.value = cronDays;
|
|
else configureDays.value = days.map(day => { return parseInt(day, 10); });
|
|
|
|
try {
|
|
configureHours.value = hours.map(hour => { return parseInt(hour, 10); });
|
|
} catch (error) {
|
|
console.error('Error parsing hour', error);
|
|
}
|
|
|
|
configureDialog.value.open();
|
|
}
|
|
|
|
async function onSubmitConfigure() {
|
|
let pattern = 'never';
|
|
if (configureType.value === 'pattern') {
|
|
let daysPattern;
|
|
if (configureDays.value.length === 7) daysPattern = '*';
|
|
else daysPattern = configureDays.value.join(',');
|
|
|
|
let hoursPattern;
|
|
if (configureHours.value.length === 24) hoursPattern = '*';
|
|
else hoursPattern = configureHours.value.join(',');
|
|
|
|
pattern ='00 00 ' + hoursPattern + ' * * ' + daysPattern;
|
|
}
|
|
|
|
configureBusy.value = true;
|
|
const [error] = await updaterModel.setAutoupdatePattern(pattern);
|
|
if (error) {
|
|
configureError.value = error.body ? error.body.message : 'Internal error';
|
|
configureBusy.value = false;
|
|
return console.error(error);
|
|
}
|
|
|
|
await refreshAutoupdatePattern();
|
|
|
|
configureBusy.value = false;
|
|
configureDialog.value.close();
|
|
}
|
|
|
|
function onShowUpdate() {
|
|
|
|
}
|
|
|
|
async function onCheck() {
|
|
checkingBusy.value = true;
|
|
|
|
const [error] = await updaterModel.check();
|
|
if (error) return console.error(error);
|
|
|
|
await refreshInfo();
|
|
checkingBusy.value = false;
|
|
}
|
|
|
|
async function refreshTasks() {
|
|
const [error, result] = await tasksModel.getByType(TASK_TYPES.TASK_UPDATE);
|
|
if (error) return console.error(error);
|
|
|
|
taskLogsMenu.value = result.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}`); }
|
|
};
|
|
});
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const [error, result] = await dashboardModel.config();
|
|
if (error) return console.error(error);
|
|
|
|
version.value = result.version;
|
|
ubuntuVersion.value = result.ubuntuVersion;
|
|
|
|
await refreshInfo();
|
|
await refreshAutoupdatePattern();
|
|
await refreshTasks();
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<Dialog ref="configureDialog"
|
|
:title="$t('settings.updateScheduleDialog.title')"
|
|
:confirm-label="$t('main.dialog.save')"
|
|
:confirm-active="configureType === 'never' ? true : (configureHours.length > 0 && configureDays.length > 0)"
|
|
:reject-label="$t('main.dialog.cancel')"
|
|
reject-style="secondary"
|
|
@confirm="onSubmitConfigure()"
|
|
>
|
|
<p v-html="$t('settings.updateScheduleDialog.description')"></p>
|
|
|
|
<p class="has-error text-center" v-show="configureError">{{ configureError }}</p>
|
|
|
|
<Radiobutton v-model="configureType" value="never" :label="$t('settings.updateScheduleDialog.disableCheckbox')" />
|
|
<Radiobutton v-model="configureType" value="pattern" :label="$t('settings.updateScheduleDialog.enableCheckbox')" style="margin-top: 10px"/>
|
|
|
|
<div v-show="configureType === 'pattern'" style="display: flex; gap: 10px; align-items: center; margin-top: 10px">
|
|
<div>{{ $t('settings.updateScheduleDialog.days') }}: <MultiSelect v-model="configureDays" :options="cronDays" option-label="name" option-key="value"/></div>
|
|
<div>{{ $t('settings.updateScheduleDialog.hours') }}: <MultiSelect v-model="configureHours" :options="cronHours" option-label="name" option-key="value"/></div>
|
|
<div class="text-small text-danger" v-show="configureType === 'pattern' && !(configureHours.length !== 0 && configureDays.length !== 0)">{{ $t('settings.updateScheduleDialog.selectOne') }}</div>
|
|
</div>
|
|
</Dialog>
|
|
|
|
<Section :title="$t('settings.updates.title')">
|
|
<template #header-buttons>
|
|
<Button tool icon="fas fa-align-left" v-tooltip="$t('settings.updates.showLogsAction')" :menu="taskLogsMenu"/>
|
|
</template>
|
|
|
|
<p v-html="$t('settings.updates.description')"></p>
|
|
|
|
<div class="info-row">
|
|
<div class="info-label">{{ $t('settings.updates.version') }}</div>
|
|
<div class="info-value">v{{ version }} ({{ ubuntuVersion }})
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<div class="info-label">{{ $t('settings.updates.schedule') }}</div>
|
|
<div class="info-value actionable" @click="onShowConfigure()">
|
|
<span v-show="currentPattern !== 'never'">{{ prettyAutoUpdateSchedule(currentPattern) }}</span>
|
|
<span v-show="currentPattern === 'never'">{{ $t('settings.updates.disabled') }}</span>
|
|
<i class="fa-solid fa-edit text-small" style="margin-left: 10px;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<ProgressBar :value="percent" v-if="updateBusy" />
|
|
<p v-if="updateBusy">{{ message }}</p>
|
|
|
|
<Button danger v-show="updateBusy" @click="onStop()">{{ $t('settings.updates.stopUpdateAction') }}</Button>
|
|
<Button v-show="!pendingUpdate" :disabled="checkingBusy" :loading="checkingBusy" @click="onCheck()">{{ $t('settings.updates.checkForUpdatesAction') }}</Button>
|
|
<Button :danger="(pendingUpdate && pendingUpdate.unstable) ? true : undefined" :success="(pendingUpdate && !pendingUpdate.unstable) ? true : undefined" v-show="pendingUpdate && pendingUpdate.version !== version && !updateBusy" @click="onShowUpdate()">{{ $t('settings.updates.updateAvailableAction') }}</Button>
|
|
</Section>
|
|
</div>
|
|
</template>
|