Files
cloudron-box/dashboard/src/components/AppImportDialog.vue
T
2025-07-10 11:55:11 +02:00

243 lines
9.9 KiB
Vue

<script setup>
import { ref, useTemplateRef } from 'vue';
import { Dialog, FormGroup, TextInput } from '@cloudron/pankow';
import { s3like } from '../utils.js';
import BackupProviderForm from './BackupProviderForm.vue';
import AppsModel from '../models/AppsModel.js';
import { REGIONS_CONTABO, REGIONS_VULTR, REGIONS_IONOS, REGIONS_OVH, REGIONS_LINODE, REGIONS_SCALEWAY, REGIONS_WASABI } from '../constants.js';
const appsModel = AppsModel.create();
const dialog = useTemplateRef('dialog');
const form = useTemplateRef('form');
const backupConfigInput = useTemplateRef('backupConfigInput');
const appId = ref('');
const busy = ref(false);
const formError = ref({});
const providerConfig = ref({});
const provider = ref('');
const remotePath = ref('');
async function onSubmit() {
if (!form.value.reportValidity()) return;
formError.value = {};
busy.value = true;
const backupConfig = {
provider: provider.value,
};
if (providerConfig.value.encryptionPassword) {
backupConfig.password = providerConfig.value.encryptionPassword;
backupConfig.encryptedFilenames = providerConfig.value.encryptedFilenames;
}
const format = providerConfig.value.format;
let backupId = remotePath.value;
// only set provider specific fields, this will clear them in the db
if (s3like(provider.value)) {
backupConfig.bucket = providerConfig.value.bucket;
backupConfig.prefix = providerConfig.value.prefix;
backupConfig.accessKeyId = providerConfig.value.accessKeyId;
backupConfig.secretAccessKey = providerConfig.value.secretAccessKey;
if (providerConfig.value.endpoint) backupConfig.endpoint = providerConfig.value.endpoint;
if (provider.value === 's3') {
if (providerConfig.value.region) backupConfig.region = providerConfig.value.region;
delete backupConfig.endpoint;
} else if (provider.value === 'minio' || provider.value === 's3-v4-compat') {
backupConfig.region = providerConfig.value.region || 'us-east-1';
backupConfig.acceptSelfSignedCerts = !!providerConfig.value.acceptSelfSignedCerts;
backupConfig.s3ForcePathStyle = true; // might want to expose this in the UI
} else if (provider.value === 'exoscale-sos') {
backupConfig.region = 'us-east-1';
backupConfig.signatureVersion = 'v4';
} else if (provider.value === 'wasabi') {
backupConfig.region = REGIONS_WASABI.find(function (x) { return x.value === backupConfig.endpoint; }).region;
backupConfig.signatureVersion = 'v4';
} else if (provider.value === 'scaleway-objectstorage') {
backupConfig.region = REGIONS_SCALEWAY.find(function (x) { return x.value === backupConfig.endpoint; }).region;
backupConfig.signatureVersion = 'v4';
} else if (provider.value === 'linode-objectstorage') {
backupConfig.region = REGIONS_LINODE.find(function (x) { return x.value === backupConfig.endpoint; }).region;
backupConfig.signatureVersion = 'v4';
} else if (provider.value === 'ovh-objectstorage') {
backupConfig.region = REGIONS_OVH.find(function (x) { return x.value === backupConfig.endpoint; }).region;
backupConfig.signatureVersion = 'v4';
} else if (provider.value === 'ionos-objectstorage') {
backupConfig.region = REGIONS_IONOS.find(function (x) { return x.value === backupConfig.endpoint; }).region;
backupConfig.signatureVersion = 'v4';
} else if (provider.value === 'vultr-objectstorage') {
backupConfig.region = REGIONS_VULTR.find(function (x) { return x.value === backupConfig.endpoint; }).region;
backupConfig.signatureVersion = 'v4';
} else if (provider.value === 'contabo-objectstorage') {
backupConfig.region = REGIONS_CONTABO.find(function (x) { return x.value === backupConfig.endpoint; }).region;
backupConfig.signatureVersion = 'v4';
backupConfig.s3ForcePathStyle = true; // https://docs.contabo.com/docs/products/Object-Storage/technical-description (no virtual buckets)
} else if (provider.value === 'upcloud-objectstorage') {
const m = /^.*\.(.*)\.upcloudobjects.com$/.exec(providerConfig.value.endpoint);
backupConfig.region = m ? m[1] : 'us-east-1'; // let it fail in validation phase if m is not valid
backupConfig.signatureVersion = 'v4';
} else if (provider.value === 'digitalocean-spaces') {
backupConfig.region = 'us-east-1';
} else if (provider.value === 'hetzner-objectstorage') {
backupConfig.region = 'us-east-1';
backupConfig.signatureVersion = 'v4';
}
} else if (provider.value === 'gcs') {
backupConfig.bucket = providerConfig.value.bucket;
backupConfig.prefix = providerConfig.value.prefix;
backupConfig.projectId = providerConfig.value.projectId;
backupConfig.credentials = providerConfig.value.credentials;
} else if (provider.value === 'sshfs' || provider.value === 'cifs' || provider.value === 'nfs' || provider.value === 'ext4' || provider.value === 'xfs') {
backupConfig.mountOptions = providerConfig.value.mountOptions;
backupConfig.prefix = providerConfig.value.prefix;
} else if (provider.value === 'mountpoint') {
backupConfig.prefix = providerConfig.value.prefix;
backupConfig.mountPoint = providerConfig.value.mountPoint;
} else if (provider.value === 'filesystem') {
const parts = remotePath.value.split('/');
backupId = parts.pop() || parts.pop(); // removes any trailing slash. this is basename()
backupConfig.backupFolder = parts.join('/'); // this is dirname()
}
if (format === 'tgz') {
if (backupId.substring(backupId.length - '.tar.gz'.length, backupId.length) === '.tar.gz') { // endsWith
backupId = backupId.replace(/.tar.gz$/, '');
} else if (backupId.substring(backupId.length - '.tar.gz.enc'.length, backupId.length) === '.tar.gz.enc') { // endsWith
backupId = backupId.replace(/.tar.gz.enc$/, '');
}
}
const [error] = await appsModel.import(appId.value, backupId, format, backupConfig);
if (error) {
busy.value = false;
formError.value = {};
if (error.status === 424) {
formError.value.generic = error.body.message;
if (error.body.message.indexOf('AWS Access Key Id') !== -1) {
formError.value.accessKeyId = true;
} else if (error.body.message.indexOf('not match the signature') !== -1 || error.body.message.indexOf('Signature') !== -1) {
formError.value.secretAccessKey = true;
} else if (error.body.message.toLowerCase() === 'access denied') {
formError.value.accessKeyId = true;
} else if (error.body.message.indexOf('ECONNREFUSED') !== -1) {
formError.value.generic = 'Unknown region';
formError.value.region = true;
} else if (error.body.message.toLowerCase() === 'wrong region') {
formError.value.generic = 'Wrong S3 Region';
formError.value.region = true;
} else {
formError.value.bucket = true;
}
} else if (error.status === 400) {
formError.value.generic = error.body.message;
if (provider.value === 'filesystem') {
formError.value.backupFolder = true;
}
} else {
formError.value.generic = 'Internal error';
console.error(error);
}
return;
}
dialog.value.close();
busy.value = false;
formError.value = {};
// clear potential post-install flag
delete localStorage['confirmPostInstall_' + appId.value];
}
function onBackupConfigChanged(event) {
const reader = new FileReader();
reader.onload = function (result) {
if (!result.target || !result.target.result) return console.error('Unable to read backup config');
let config;
try {
config = JSON.parse(result.target.result);
if (config.provider === 'filesystem') { // this allows a user to upload a backup to server and import easily with an absolute path
config.remotePath = config.backupFolder + '/' + config.remotePath;
delete config.backupFolder;
}
} catch (e) {
console.error('Unable to parse backup config', e);
return;
}
provider.value = config.provider;
remotePath.value = config.remotePath;
// we assume property names match here, this does not yet work for gcs keys
Object.keys(config).forEach(function (k) {
providerConfig.value[k] = config[k];
});
};
reader.readAsText(event.target.files[0]);
}
function onUploadBackupConfig() {
backupConfigInput.value.click();
}
defineExpose({
async open(id) {
appId.value = id;
busy.value = false;
formError.value = {};
provider.value = '';
providerConfig.value = {};
remotePath.value = '';
dialog.value.open();
}
});
</script>
<template>
<div>
<input ref="backupConfigInput" type="file" style="display: none" accept="application/json, text/json" @change="onBackupConfigChanged"/>
<Dialog ref="dialog" :title="$t('app.importBackupDialog.title')"
:confirm-label="$t('app.importBackupDialog.importAction')"
:confirm-active="!busy"
:confirm-busy="busy"
:reject-label="busy ? '' : $t('main.dialog.cancel')"
reject-style="secondary"
:alternate-label="$t('app.importBackupDialog.uploadAction')"
@alternate="onUploadBackupConfig()"
@confirm="onSubmit()"
>
<div>
<div>{{ $t('app.importBackupDialog.description') }}</div>
<form @submit.prevent="onSubmit()" autocomplete="off" ref="form">
<fieldset :disabled="busy">
<input style="display: none;" type="submit"/>
<!-- remotePath contains the prefix as well -->
<FormGroup>
<label for="inputRemotePath">{{ $t('app.importBackupDialog.remotePath') }} <sup><a href="https://docs.cloudron.io/backups/#import-app-backup" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<TextInput id="inputRemotePath" v-model="remotePath" required />
</FormGroup>
<BackupProviderForm ref="form" v-model:provider="provider" v-model:provider-config="providerConfig" :form-error="formError" :import-only="true" />
</fieldset>
</form>
</div>
</Dialog>
</div>
</template>