Johannes Zellner
290 lines
12 KiB
Vue
290 lines
12 KiB
Vue
<script setup>
|
|
|
|
import { ref, useTemplateRef, watch } from 'vue';
|
|
import { MaskedInput, Dialog, FormGroup, TextInput, Checkbox } from '@cloudron/pankow';
|
|
import { prettyBinarySize } from '@cloudron/pankow/utils';
|
|
import { s3like, mountlike, prettySiteLocation } from '../utils.js';
|
|
import BackupSitesModel from '../models/BackupSitesModel.js';
|
|
import SystemModel from '../models/SystemModel.js';
|
|
|
|
const emit = defineEmits([ 'success' ]);
|
|
|
|
const backupSitesModel = BackupSitesModel.create();
|
|
const systemModel = SystemModel.create();
|
|
|
|
const minMemoryLimit = ref(1024 * 1024 * 1024); // 1 GB
|
|
const maxMemoryLimit = ref(minMemoryLimit.value); // set later
|
|
|
|
const dialog = useTemplateRef('dialog');
|
|
const site = ref({});
|
|
const provider = ref('');
|
|
const formError = ref({});
|
|
const busy = ref(false);
|
|
const name = ref('');
|
|
const enableForUpdates = ref(false);
|
|
const memoryLimit = ref(0);
|
|
const uploadPartSize = ref(0);
|
|
const syncConcurrency = ref(0);
|
|
const downloadConcurrency = ref(0);
|
|
const copyConcurrency = ref(0);
|
|
|
|
const accessKeyId = ref('');
|
|
const secretAccessKey = ref('');
|
|
const mountOptionsUsername = ref('');
|
|
const mountOptionsPassword = ref('');
|
|
const mountOptionsUser = ref('');
|
|
const mountOptionsPrivateKey = ref('');
|
|
const useHardlinks = ref(false);
|
|
const chown = ref(false);
|
|
const preserveAttributes = ref(false);
|
|
|
|
watch(mountOptionsPrivateKey, () => {
|
|
if (!mountOptionsPrivateKey.value) return;
|
|
mountOptionsPrivateKey.value = mountOptionsPrivateKey.value.replaceAll('\\n', '\n');
|
|
});
|
|
|
|
async function onSubmit() {
|
|
busy.value = true;
|
|
|
|
if (site.value.name !== name.value) {
|
|
const [error] = await backupSitesModel.setName(site.value.id, name.value);
|
|
if (error) {
|
|
if (error.status === 400) formError.value.name = error.body.message;
|
|
else formError.value.generic = error.body ? error.body.message : 'Internal error';
|
|
|
|
busy.value = false;
|
|
return console.error(error);
|
|
}
|
|
}
|
|
|
|
const data = site.value.config;
|
|
|
|
// TODO maybe deal with gcs??
|
|
if (s3like(provider.value)) {
|
|
data.accessKeyId = accessKeyId.value;
|
|
if (secretAccessKey.value) data.secretAccessKey = secretAccessKey.value;
|
|
}
|
|
|
|
if (provider.value === 'cifs') {
|
|
data.mountOptions.username = mountOptionsUsername.value;
|
|
if (mountOptionsPassword.value) data.mountOptions.password = mountOptionsPassword.value;
|
|
}
|
|
|
|
if (provider.value === 'sshfs') {
|
|
data.mountOptions.user = mountOptionsUser.value;
|
|
if (mountOptionsPrivateKey.value) data.mountOptions.privateKey = mountOptionsPrivateKey.value;
|
|
}
|
|
|
|
if ((provider.value === 'filesystem' || mountlike(provider.value)) && site.value.format === 'rsync') {
|
|
data.noHardlinks = !useHardlinks.value;
|
|
}
|
|
|
|
if ((provider.value === 'mountpoint' || provider.value === 'cifs') && site.value.format === 'rsync') {
|
|
data.preserveAttributes = preserveAttributes.value;
|
|
}
|
|
|
|
if (provider.value === 'mountpoint' && site.value.format === 'rsync') {
|
|
data.chown = chown.value;
|
|
}
|
|
|
|
// only call if anything has changed
|
|
if (Object.keys(data).length) {
|
|
const [error] = await backupSitesModel.setConfig(site.value.id, data);
|
|
if (error) {
|
|
if (error.status === 400) {
|
|
// if (error.body.message.indexOf('password') === 0) formError.value.generic = 'Username or password is wrong';
|
|
formError.value.generic = error.body ? error.body.message : 'Internal error';
|
|
} else {
|
|
formError.value.generic = error.body ? error.body.message : 'Internal error';
|
|
console.error(error);
|
|
}
|
|
|
|
busy.value = false;
|
|
return;
|
|
}
|
|
}
|
|
|
|
const limits = {
|
|
memoryLimit: parseInt(memoryLimit.value),
|
|
uploadPartSize: parseInt(uploadPartSize.value),
|
|
syncConcurrency: parseInt(syncConcurrency.value),
|
|
downloadConcurrency: parseInt(downloadConcurrency.value),
|
|
copyConcurrency: parseInt(copyConcurrency.value),
|
|
};
|
|
|
|
const [error] = await backupSitesModel.setLimits(site.value.id, limits);
|
|
if (error) {
|
|
formError.value.generic = error.body ? error.body.message : 'Internal error';
|
|
busy.value = false;
|
|
return console.error(error);
|
|
}
|
|
|
|
emit('success');
|
|
dialog.value.close();
|
|
busy.value = false;
|
|
}
|
|
|
|
async function getMemory() {
|
|
const [error, result] = await systemModel.memory();
|
|
if (error) return console.error(error);
|
|
|
|
maxMemoryLimit.value = Math.ceil(result.memory / (1024*1024*1024)) * 1024 * 1024 * 1024;
|
|
}
|
|
|
|
defineExpose({
|
|
async open(t) {
|
|
t = JSON.parse(JSON.stringify(t)); // make a copy
|
|
formError.value = {};
|
|
busy.value = false;
|
|
site.value = t;
|
|
provider.value = t.provider;
|
|
|
|
name.value = t.name || '';
|
|
enableForUpdates.value = !!t.enableForUpdates;
|
|
memoryLimit.value = t.limits.memoryLimit || 1024 * 1024 * 1024; // 1 GB
|
|
uploadPartSize.value = t.limits.uploadPartSize || 10 * 1024 * 1024;
|
|
syncConcurrency.value = t.limits.syncConcurrency || 10;
|
|
downloadConcurrency.value = t.limits.downloadConcurrency || 10;
|
|
copyConcurrency.value = t.limits.copyConcurrency || 10;
|
|
|
|
if (s3like(provider.value)) {
|
|
accessKeyId.value = t.config.accessKeyId;
|
|
secretAccessKey.value = null;
|
|
} else if (provider.value === 'cifs') {
|
|
mountOptionsUsername.value = t.config.mountOptions.username;
|
|
mountOptionsPassword.value = null;
|
|
} else if (provider.value === 'sshfs') {
|
|
mountOptionsUser.value = t.config.mountOptions.user;
|
|
mountOptionsPrivateKey.value = null;
|
|
}
|
|
|
|
if ((provider.value === 'filesystem' || mountlike(provider.value)) && site.value.format === 'rsync') {
|
|
useHardlinks.value = !t.config.noHardlinks;
|
|
}
|
|
|
|
if ((provider.value === 'mountpoint' || provider.value === 'cifs') && site.value.format === 'rsync') {
|
|
preserveAttributes.value = !!t.config.preserveAttributes;
|
|
}
|
|
|
|
if (provider.value === 'mountpoint' && site.value.format === 'rsync') {
|
|
chown.value = !!t.config.chown;
|
|
}
|
|
|
|
await getMemory();
|
|
|
|
dialog.value.open();
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog ref="dialog"
|
|
:title="$t('backups.configureBackupStorage.title')"
|
|
:reject-label="$t('main.dialog.close')"
|
|
:reject-active="!busy"
|
|
reject-style="secondary"
|
|
:confirm-label="$t('main.dialog.save')"
|
|
:confirm-busy="busy"
|
|
confirm-style="primary"
|
|
@confirm="onSubmit()"
|
|
>
|
|
<div>
|
|
<div>
|
|
<form @submit.prevent="onSubmit()" autocomplete="off" ref="form">
|
|
<fieldset :disabled="busy">
|
|
<input style="display: none;" type="submit"/>
|
|
|
|
<FormGroup>
|
|
<label for="backupSiteNameInput">{{ $t('backups.configureBackupStorage.name') }}</label>
|
|
<TextInput id="backupSiteNameInput" v-model="name" required/>
|
|
<div class="error-label" v-if="formError.name">{{ formError.name }}</div>
|
|
</FormGroup>
|
|
|
|
<div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
|
|
|
|
<FormGroup v-if="site.provider && site.config">
|
|
<label><i v-if="site.encrypted" class="fa-solid fa-lock"></i> Storage: <b>{{ site.provider }} ({{ site.format }}) </b></label>
|
|
<div>{{ prettySiteLocation(site) }}</div>
|
|
</FormGroup>
|
|
|
|
<FormGroup v-if="provider === 'sshfs'">
|
|
<label for="mountOptionsUserInput">{{ $t('backups.configureBackupStorage.user') }}</label>
|
|
<TextInput id="mountOptionsUserInput" v-model="mountOptionsUser" required />
|
|
</FormGroup>
|
|
|
|
<FormGroup v-if="provider === 'sshfs'">
|
|
<label for="mountOptionsPrivateKeyInput">{{ $t('backups.configureBackupStorage.privateKey') }}</label>
|
|
<MaskedInput id="mountOptionsPrivateKeyInput" :multiline="true" v-model="mountOptionsPrivateKey" required/>
|
|
</FormGroup>
|
|
|
|
<FormGroup v-if="provider === 'cifs'">
|
|
<label for="mountOptionsUsernameInput">{{ $t('backups.configureBackupStorage.username') }} ({{ provider }})</label>
|
|
<TextInput id="mountOptionsUsernameInput" v-model="mountOptionsUsername" required />
|
|
</FormGroup>
|
|
|
|
<FormGroup v-if="provider === 'cifs'">
|
|
<label for="mountOptionsPasswordInput">{{ $t('backups.configureBackupStorage.password') }} ({{ provider }})</label>
|
|
<MaskedInput id="mountOptionsPasswordInput" v-model="mountOptionsPassword" required />
|
|
</FormGroup>
|
|
|
|
<Checkbox v-if="(provider === 'filesystem' || mountlike(provider)) && site.format === 'rsync'" v-model="useHardlinks" :label="$t('backups.configureBackupStorage.hardlinksLabel')"/>
|
|
|
|
<Checkbox v-if="(provider === 'mountpoint' || provider === 'cifs') && site.format === 'rsync'" v-model="preserveAttributes" :label="$t('backups.configureBackupStorage.preserveAttributesLabel')"/>
|
|
|
|
<Checkbox v-if="provider === 'mountpoint' && format === 'rsync'" v-model="chown" :label="$t('backups.configureBackupStorage.chown')"/>
|
|
|
|
<FormGroup v-if="s3like(provider)">
|
|
<label for="accessKeyIdInput">{{ $t('backups.configureBackupStorage.s3AccessKeyId') }}</label>
|
|
<TextInput id="accessKeyIdInput" v-model="accessKeyId" required />
|
|
</FormGroup>
|
|
|
|
<FormGroup v-if="s3like(provider)">
|
|
<label for="secretAccessKeyInput">{{ $t('backups.configureBackupStorage.s3SecretAccessKey') }}</label>
|
|
<MaskedInput id="secretAccessKeyInput" v-model="secretAccessKey" required />
|
|
</FormGroup>
|
|
|
|
<FormGroup>
|
|
<label for="memoryLimitInput">{{ $t('backups.configureBackupStorage.memoryLimit') }}: <b>{{ prettyBinarySize(memoryLimit, '1024 MB') }}</b></label>
|
|
<div description class="small">{{ $t('backups.configureBackupStorage.memoryLimitDescription') }}</div>
|
|
<input type="range" id="memoryLimitInput" v-model="memoryLimit" :step="256*1024*1024" :min="minMemoryLimit" :max="maxMemoryLimit" />
|
|
</FormGroup>
|
|
|
|
<FormGroup v-if="s3like(provider)">
|
|
<label for="uploadPartSizeInput">{{ $t('backups.configureBackupStorage.uploadPartSize') }}: <b>{{ prettyBinarySize(uploadPartSize, 'Default (50 MiB)') }}</b></label>
|
|
<div description class="small">{{ $t('backups.configureBackupStorage.uploadPartSizeDescription') }}</div>
|
|
<input type="range" id="uploadPartSizeInput" v-model="uploadPartSize" list="uploadPartSizeTicks" :step="1024*1024" :min="10*1024*1024" :max="1024*1024*1024" />
|
|
<datalist id="uploadPartSizeTicks">
|
|
<option :value="1024*1024*10"></option>
|
|
<option :value="1024*1024*64"></option>
|
|
<option :value="1024*1024*128"></option>
|
|
<option :value="1024*1024*256"></option>
|
|
<option :value="1024*1024*512"></option>
|
|
<option :value="1024*1024*1024"></option>
|
|
</datalist>
|
|
</FormGroup>
|
|
|
|
<FormGroup v-if="site.format === 'rsync'">
|
|
<label for="syncConcurrencyInput">{{ $t('backups.configureBackupStorage.uploadConcurrency') }}: <b>{{ syncConcurrency }}</b></label>
|
|
<div description class="small">{{ $t('backups.configureBackupStorage.uploadConcurrencyDescription') }}</div>
|
|
<input type="range" id="syncConcurrencyInput" v-model="syncConcurrency" step="10" min="10" max="200" />
|
|
</FormGroup>
|
|
|
|
<FormGroup v-if="site.format === 'rsync' && (s3like(provider) || provider === 'gcs')">
|
|
<label for="downloadConcurrencyInput">{{ $t('backups.configureBackupStorage.downloadConcurrency') }}: <b>{{ downloadConcurrency }}</b></label>
|
|
<div description class="small">{{ $t('backups.configureBackupStorage.downloadConcurrencyDescription') }}</div>
|
|
<input type="range" id="downloadConcurrencyInput" v-model="downloadConcurrency" step="10" min="10" max="200" />
|
|
</FormGroup>
|
|
|
|
<FormGroup v-if="site.format === 'rsync' && (s3like(provider) || provider === 'gcs')">
|
|
<label for="copyConcurrencyInput">{{ $t('backups.configureBackupStorage.copyConcurrency') }}: <b>{{ copyConcurrency }}</b></label>
|
|
<div description class="small">{{ $t('backups.configureBackupStorage.copyConcurrencyDescription') }}</div>
|
|
<input type="range" id="copyConcurrencyInput" v-model="copyConcurrency" step="10" min="10" max="500" />
|
|
</FormGroup>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</template>
|