87 lines
4.0 KiB
Vue
87 lines
4.0 KiB
Vue
|
<script setup>
|
||
|
|
|
||
|
|
import { ref, useTemplateRef, watch } from 'vue';
|
||
|
|
import { Dialog, FormGroup, TextInput, PasswordInput, Button, Checkbox } 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';
|
||
|
|
import BackupProviderForm from './BackupProviderForm.vue';
|
||
|
|
import BackupTargetsModel from '../models/BackupTargetsModel.js';
|
||
|
|
import SystemModel from '../models/SystemModel.js';
|
||
|
|
|
||
|
|
const emit = defineEmits([ 'success' ]);
|
||
|
|
|
||
|
|
const backupTargetsModel = BackupTargetsModel.create();
|
||
|
|
const systemModel = SystemModel.create();
|
||
|
|
|
||
|
|
const dialog = useTemplateRef('dialog');
|
||
|
|
const target = ref({});
|
||
|
|
const formError = ref({});
|
||
|
|
const busy = ref(false);
|
||
|
|
|
||
|
|
async function onSubmit() {
|
||
|
|
emit('success');
|
||
|
|
dialog.value.close();
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
async open(t) {
|
||
|
|
formError.value = {};
|
||
|
|
busy.value = false;
|
||
|
|
target.value = t;
|
||
|
|
|
||
|
|
console.log(t)
|
||
|
|
|
||
|
|
dialog.value.open();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Dialog ref="dialog"
|
||
|
|
:title="$t('backups.configureBackupStorage.title')"
|
||
|
|
:reject-label="$t('main.dialog.close')"
|
||
|
|
reject-style="secondary"
|
||
|
|
:confirm-label="$t('main.dialog.save')"
|
||
|
|
confirm-style="primary"
|
||
|
|
@confirm="onSubmit()"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<div>
|
||
|
|
<div class="info-row">
|
||
|
|
<div class="info-label">{{ $t('backups.configureBackupStorage.provider') }}</div>
|
||
|
|
<div class="info-value">{{ target.provider }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row" v-if="target.provider !== 'noop'">
|
||
|
|
<div class="info-label">{{ $t('backups.configureBackupStorage.format') }}</div>
|
||
|
|
<div class="info-value">{{ target.format }} <i v-if="target.encrypted" class="fa-solid fa-lock"></i></div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row" v-if="target.provider !== 'noop'">
|
||
|
|
<div class="info-label">{{ $t('backups.location.location') }}</div>
|
||
|
|
<div class="info-value">
|
||
|
|
<span v-if="mountlike(target.provider) || target.provider === 'filesystem'">
|
||
|
|
<span v-if="target.provider === 'filesystem'">{{ target.config.backupDir }}{{ (target.config.prefix ? `/${target.config.prefix}` : '') }}</span>
|
||
|
|
<span v-if="target.provider === 'disk' || target.provider === 'ext4' || target.provider === 'xfs' || target.provider === 'mountpoint'">{{ target.config.mountOptions.diskPath || target.config.mountPoint }}{{ (target.config.prefix ? '/' : '') + target.config.prefix }}</span>
|
||
|
|
<span v-if="target.provider === 'cifs' || target.provider === 'nfs' || target.provider === 'sshfs'">{{ target.config.mountOptions.host }}:{{ target.config.mountOptions.remoteDir }}{{ (target.prefix ? '/' : '') + target.config.prefix }}</span>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<span v-if="target.provider !== 's3' && target.provider !== 'minio' && (s3like(target.provider) || target.provider === 'gcs')">{{ target.config.bucket + (target.config.prefix ? '/' : '') + target.config.prefix }}</span>
|
||
|
|
<span v-if="target.provider === 's3'">{{ target.config.region + ' ' + target.config.bucket + (target.config.prefix ? '/' : '') + target.config.prefix }}</span>
|
||
|
|
<span v-if="target.provider === 'minio'">{{ target.config.endpoint + ' ' + target.config.bucket + (target.config.prefix ? '/' : '') + target.config.prefix }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row" v-if="target.provider !== 'minio' && target.config?.endpoint">
|
||
|
|
<div class="info-label">{{ $t('backups.location.endpoint') }}</div>
|
||
|
|
<div class="info-value">{{ target.config.endpoint || target.config.region }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="info-row" v-if="target.encrypted">
|
||
|
|
<!-- TODO translate -->
|
||
|
|
<div class="info-label">Encryption Password Hint</div>
|
||
|
|
<div class="info-value">{{ target.encryptionPasswordHint }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Dialog>
|
||
|
|
</template>
|