414 lines
17 KiB
Vue
414 lines
17 KiB
Vue
<script setup>
|
|
|
|
import { ref, onMounted, useTemplateRef } from 'vue';
|
|
import { Spinner, Button, SingleSelect, FormGroup, TextInput, Checkbox } from 'pankow';
|
|
import { REGIONS_CONTABO, REGIONS_VULTR, REGIONS_IONOS, REGIONS_OVH, REGIONS_LINODE, REGIONS_SCALEWAY, REGIONS_WASABI } from '../constants.js';
|
|
import { redirectIfNeeded, mountlike, s3like } from '../utils.js';
|
|
import ProvisionModel from '../models/ProvisionModel.js';
|
|
import BackupProviderForm from '../components/BackupProviderForm.vue';
|
|
|
|
const provisionModel = ProvisionModel.create();
|
|
|
|
const ipProviders = [
|
|
{ name: 'Disabled', value: 'noop' },
|
|
{ name: 'Public IP', value: 'generic' },
|
|
{ name: 'Static IP Address', value: 'fixed' },
|
|
{ name: 'Network Interface', value: 'network-interface' }
|
|
];
|
|
|
|
const formError = ref({});
|
|
const busy = ref(false);
|
|
const ready = ref(false);
|
|
const waitingForRestore = ref(false);
|
|
const progressMessage = ref('');
|
|
const taskMinutesActive = ref(0);
|
|
const provider = ref('');
|
|
const providerConfig = ref({});
|
|
const remotePath = ref('');
|
|
const showAdvanced = ref(false);
|
|
const ipv4Provider = ref('generic');
|
|
const ipv4Address = ref('');
|
|
const ipv4Interface = ref('');
|
|
const ipv6Provider = ref('generic');
|
|
const ipv6Address = ref('');
|
|
const ipv6Interface = ref('');
|
|
const skipDnsSetup = ref(false);
|
|
|
|
const form = useTemplateRef('form');
|
|
const isFormValid = ref(false);
|
|
function checkValidity() {
|
|
if (!provider.value) return false;
|
|
isFormValid.value = form.value.checkValidity();
|
|
}
|
|
|
|
async function waitForRestore () {
|
|
waitingForRestore.value = true;
|
|
formError.value = {};
|
|
|
|
const [error, result] = await provisionModel.status();
|
|
if (error) {
|
|
setTimeout(waitForRestore, 5000);
|
|
return console.error(error);
|
|
}
|
|
|
|
if (!result.restore.active) {
|
|
if (!result.adminFqdn || result.restore.errorMessage) { // restore reset or errored. start over
|
|
formError.value.dnsWait = result.restore.errorMessage;
|
|
waitingForRestore.value = false;
|
|
} else { // proceed to dashboard
|
|
window.location.href = 'https://' + result.adminFqdn;
|
|
}
|
|
return;
|
|
}
|
|
|
|
progressMessage.value = result.restore.message;
|
|
// TODO do we have the time here?
|
|
taskMinutesActive.value = (new Date() - new Date(result.restore.startTime)) / 60000;
|
|
|
|
setTimeout(waitForRestore, 5000);
|
|
}
|
|
|
|
async function onSubmit() {
|
|
if (!isFormValid.value) return;
|
|
|
|
busy.value = true;
|
|
formError.value = {};
|
|
|
|
if (remotePath.value.indexOf('/') === -1) {
|
|
error.value.generic = 'Backup id must include the directory path';
|
|
error.value.remotePath = true;
|
|
busy.value = false;
|
|
return;
|
|
}
|
|
|
|
if (remotePath.value.indexOf('box') === -1) {
|
|
error.value.generic = 'Backup id must contain "box"';
|
|
error.value.remotePath = true;
|
|
busy.value = false;
|
|
return;
|
|
}
|
|
|
|
const version = remotePath.value.match(/_v(\d+.\d+.\d+)/);
|
|
if (!version) {
|
|
formError.value.generic = 'Backup id is missing version information';
|
|
formError.value.remotePath = true;
|
|
busy.value = false;
|
|
return;
|
|
}
|
|
|
|
const data = {
|
|
backupConfig: {
|
|
provider: provider.value,
|
|
format: providerConfig.value.format,
|
|
},
|
|
remotePath: remotePath.value.replace(/\.tar\.gz(\.enc)?$/, ''),
|
|
version: version ? version[1] : '',
|
|
ipv4Config: {
|
|
provider: ipv4Provider.value,
|
|
ip: ipv4Address.value,
|
|
ifname: ipv4Interface.value,
|
|
},
|
|
ipv6Config: {
|
|
provider: ipv6Provider.value,
|
|
ip: ipv6Address.value,
|
|
ifname: ipv6Interface.value,
|
|
},
|
|
skipDnsSetup: skipDnsSetup.value,
|
|
};
|
|
|
|
if (providerConfig.value.encryptionPassword) {
|
|
data.backupConfig.encryptedFilenames = providerConfig.value.encryptedFilenames;
|
|
data.backupConfig.password = providerConfig.value.encryptionPassword;
|
|
}
|
|
|
|
if (s3like(provider.value)) {
|
|
data.backupConfig.endpoint = providerConfig.value.endpoint;
|
|
data.backupConfig.prefix = providerConfig.value.prefix;
|
|
data.backupConfig.bucket = providerConfig.value.bucket;
|
|
data.backupConfig.accessKeyId = providerConfig.value.accessKeyId;
|
|
data.backupConfig.secretAccessKey = providerConfig.value.secretAccessKey;
|
|
|
|
if (provider.value === 's3') {
|
|
data.backupConfig.region = providerConfig.value.region || undefined;
|
|
delete data.endpoint;
|
|
} else if (provider.value === 'minio' || provider.value === 's3-v4-compat') {
|
|
data.backupConfig.region = providerConfig.value.region || 'us-east-1';
|
|
data.backupConfig.acceptSelfSignedCerts = providerConfig.value.acceptSelfSignedCerts;
|
|
data.backupConfig.s3ForcePathStyle = true;
|
|
} else if (provider.value === 'exoscale-sos') {
|
|
data.backupConfig.region = 'us-east-1';
|
|
data.backupConfig.signatureVersion = 'v4';
|
|
} else if (provider.value === 'wasabi') {
|
|
data.backupConfig.region = REGIONS_WASABI.find(function (x) { return x.value === data.backupConfig.endpoint; }).region;
|
|
data.backupConfig.signatureVersion = 'v4';
|
|
} else if (provider.value === 'scaleway-objectstorage') {
|
|
data.backupConfig.region = REGIONS_SCALEWAY.find(function (x) { return x.value === data.backupConfig.endpoint; }).region;
|
|
data.backupConfig.signatureVersion = 'v4';
|
|
} else if (provider.value === 'linode-objectstorage') {
|
|
data.backupConfig.region = REGIONS_LINODE.find(function (x) { return x.value === data.backupConfig.endpoint; }).region;
|
|
data.backupConfig.signatureVersion = 'v4';
|
|
} else if (provider.value === 'ovh-objectstorage') {
|
|
data.backupConfig.region = REGIONS_OVH.find(function (x) { return x.value === data.backupConfig.endpoint; }).region;
|
|
data.backupConfig.signatureVersion = 'v4';
|
|
} else if (provider.value === 'ionos-objectstorage') {
|
|
data.backupConfig.region = REGIONS_IONOS.find(function (x) { return x.value === data.backupConfig.endpoint; }).region;
|
|
data.backupConfig.signatureVersion = 'v4';
|
|
} else if (provider.value === 'vultr-objectstorage') {
|
|
data.backupConfig.region = REGIONS_VULTR.find(function (x) { return x.value === data.backupConfig.endpoint; }).region;
|
|
data.backupConfig.signatureVersion = 'v4';
|
|
} else if (provider.value === 'contabo-objectstorage') {
|
|
data.backupConfig.region = REGIONS_CONTABO.find(function (x) { return x.value === data.backupConfig.endpoint; }).region;
|
|
data.backupConfig.signatureVersion = 'v4';
|
|
data.backupConfig.s3ForcePathStyle = true;
|
|
} else if (provider.value === 'upcloud-objectstorage') { // the UI sets region and endpoint
|
|
const m = /^.*\.(.*)\.upcloudobjects.com$/.exec(data.backupConfig.endpoint);
|
|
data.backupConfig.region = m ? m[1] : 'us-east-1'; // let it fail in validation phase if m is not valid
|
|
data.backupConfig.signatureVersion = 'v4';
|
|
} else if (provider.value === 'digitalocean-spaces') {
|
|
data.backupConfig.region = 'us-east-1';
|
|
} else if (provider.value === 'hetzner-objectstorage') {
|
|
data.backupConfig.region = 'us-east-1';
|
|
data.backupConfig.signatureVersion = 'v4';
|
|
}
|
|
} else if (mountlike(provider.value)) {
|
|
data.backupConfig.prefix = providerConfig.value.prefix;
|
|
data.backupConfig.noHardlinks = !providerConfig.value.useHardlinks;
|
|
data.backupConfig.mountOptions = {};
|
|
|
|
if (provider.value === 'cifs' || provider.value === 'sshfs' || provider.value === 'nfs') {
|
|
data.backupConfig.mountOptions.host = providerConfig.value.mountOptionHost;
|
|
data.backupConfig.mountOptions.remoteDir = providerConfig.value.mountOptionRemoteDir;
|
|
|
|
if (provider.value === 'cifs') {
|
|
data.backupConfig.mountOptions.username = providerConfig.value.mountOptionUsername;
|
|
data.backupConfig.mountOptions.password = providerConfig.value.mountOptionPassword;
|
|
data.backupConfig.mountOptions.seal = !!providerConfig.value.mountOptionSeal;
|
|
data.backupConfig.preserveAttributes = !!providerConfig.value.preserveAttributes;
|
|
} else if (provider.value === 'sshfs') {
|
|
data.backupConfig.mountOptions.user = providerConfig.value.mountOptionUser;
|
|
data.backupConfig.mountOptions.port = parseInt(providerConfig.value.mountOptionPort);
|
|
data.backupConfig.mountOptions.privateKey = providerConfig.value.mountOptionPrivateKey;
|
|
data.backupConfig.preserveAttributes = true;
|
|
}
|
|
} else if (provider.value === 'ext4' || provider.value === 'xfs' || provider.value === 'disk') {
|
|
data.backupConfig.mountOptions.diskPath = providerConfig.value.mountOptionDiskPath;
|
|
data.backupConfig.preserveAttributes = true;
|
|
} else if (provider.value === 'mountpoint') {
|
|
data.backupConfig.mountPoint = providerConfig.value.mountPoint;
|
|
data.backupConfig.chown = !!providerConfig.value.chown;
|
|
data.backupConfig.preserveAttributes = !!providerConfig.value.preserveAttributes;
|
|
}
|
|
} else if (provider.value === 'filesystem') {
|
|
data.backupConfig.backupFolder = providerConfig.value.backupFolder;
|
|
data.backupConfig.noHardlinks = !providerConfig.value.useHardlinks;
|
|
data.backupConfig.preserveAttributes = true;
|
|
} else if (provider.value === 'gcs') {
|
|
data.backupConfig.bucket = providerConfig.value.bucket;
|
|
data.backupConfig.prefix = providerConfig.value.prefix;
|
|
data.backupConfig.projectId = providerConfig.value.projectId;
|
|
data.backupConfig.credentials = providerConfig.value.credentials;
|
|
}
|
|
|
|
const [error] = await provisionModel.restore(data);
|
|
if (error) {
|
|
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 ) {
|
|
formError.value.secretAccessKey = true;
|
|
} else if (error.body.message.toLowerCase() === 'access denied') {
|
|
formError.value.bucket = 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.generic = error.body.message;
|
|
}
|
|
} else {
|
|
formError.value.generic = error.body ? error.body.message : 'Internal error';
|
|
console.error(error);
|
|
}
|
|
|
|
busy.value = false;
|
|
return;
|
|
}
|
|
|
|
waitForRestore();
|
|
}
|
|
|
|
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]);
|
|
}
|
|
|
|
const backupConfigFileInput = useTemplateRef('backupConfigFileInput');
|
|
function onUploadBackupConfig() {
|
|
backupConfigFileInput.value.click();
|
|
}
|
|
|
|
onMounted(async () => {
|
|
let [error, result] = await provisionModel.status();
|
|
if (error) return console.error(error);
|
|
|
|
if (redirectIfNeeded(result, 'restore')) return; // redirected to some other view...
|
|
|
|
[error, result] = await provisionModel.detectIp();
|
|
if (error) return console.error(error);
|
|
|
|
ipv4Provider.value = result.ipv4 ? 'generic' : 'noop';
|
|
ipv6Provider.value = result.ipv6 ? 'generic' : 'noop';
|
|
|
|
ready.value = true;
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container" v-if="ready">
|
|
<Transition name="slide-fade" mode="out-in">
|
|
<div class="view" v-if="waitingForRestore" style="text-align: center; max-width: unset;">
|
|
<Spinner class="pankow-spinner-large"/>
|
|
<h3>{{ progressMessage }} ...</h3>
|
|
<div>
|
|
Please wait while Cloudron is restoring.
|
|
<br/>
|
|
<br/>
|
|
You can follow the logs on the server at <code class="clipboard hand" data-clipboard-text="/home/yellowtent/platformdata/logs/box.log" v-tooltip="clipboardDone ? 'Copied' : 'Click to copy'">/home/yellowtent/platformdata/logs/box.log</code>
|
|
<br/>
|
|
<br/>
|
|
<span v-show="taskMinutesActive >= 4">If restore appears stuck, it can be restarted by running <code>systemctl restart box</code> and reloading this page.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="view" v-else>
|
|
<h1>Cloudron Restore</h1>
|
|
<p>Provide the backup to restore from</p>
|
|
|
|
<input type="file" ref="backupConfigFileInput" @change="onBackupConfigChanged" accept="application/json, text/json" style="display:none"/>
|
|
<Button @click="onUploadBackupConfig()">Upload Backup Config</button>
|
|
|
|
<div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
|
|
|
|
<form ref="form" @submit.prevent="onSubmit()" @input="checkValidity()">
|
|
<fieldset :disabled="busy">
|
|
<input type="submit" style="display: none;"/>
|
|
|
|
<!-- 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" :provisioning="true" />
|
|
|
|
<div v-show="showAdvanced">
|
|
<!-- IPv4 provider -->
|
|
<FormGroup>
|
|
<label class="control-label">IPv4 Configuration <sup><a href="https://docs.cloudron.io/networking/#ip-configuration" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
|
|
<SingleSelect v-model="ipv4Provider" :options="ipProviders" option-key="value" option-label="name" />
|
|
</FormGroup>
|
|
|
|
<!-- IPv4 Fixed -->
|
|
<FormGroup v-if="ipv4Provider === 'fixed'">
|
|
<label for="ipv4AddressInput">IPv4 Address</label>
|
|
<TextInput id="ipv4AddressInput" v-model="ipv4Address" required />
|
|
</FormGroup>
|
|
|
|
<!-- IPv4 Network Interface -->
|
|
<FormGroup v-if="ipv4Provider === 'network-interface'">
|
|
<label for="ipv4InterfaceInput">IPv4 Interface Name</label>
|
|
<TextInput id="ipv4InterfaceInput" v-model="ipv4Interface" required />
|
|
</FormGroup>
|
|
|
|
<!-- IPv6 provider -->
|
|
<FormGroup>
|
|
<label class="control-label">IPv6 Configuration <sup><a href="https://docs.cloudron.io/networking/#ip-configuration" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
|
|
<SingleSelect v-model="ipv6Provider" :options="ipProviders" option-key="value" option-label="name" />
|
|
</FormGroup>
|
|
|
|
<!-- IPv6 Fixed -->
|
|
<FormGroup v-if="ipv6Provider === 'fixed'">
|
|
<label for="ipv6AddressInput">IPv6 Address</label>
|
|
<TextInput id="ipv6AddressInput" v-model="ipv6Address" required />
|
|
</FormGroup>
|
|
|
|
<!-- IPv6 Network Interface -->
|
|
<FormGroup v-if="ipv6Provider === 'network-interface'">
|
|
<label for="ipv6InterfaceInpt">IPv6 Interface Name</label>
|
|
<TextInput id="ipv6InterfaceInpt" v-model="ipv6Interface" required />
|
|
</FormGroup>
|
|
</div>
|
|
|
|
<div class="actionable" @click="showAdvanced = false" v-if="showAdvanced">Hide Advanced settings</div>
|
|
<div class="actionable" @click="showAdvanced = true" v-else>Advanced settings...</div>
|
|
|
|
<div style="margin-top: 18px">
|
|
<Checkbox v-model="skipDnsSetup" label="Dry run"/>
|
|
<small>
|
|
When enabled, apps are restored but the DNS records are not updated to point to this server.
|
|
To access the dashboard, this browser's host must have an entry in <code>/etc/hosts</code> for the dashboard domain to this server's IP.
|
|
See the <a href="https://docs.cloudron.io/backups/#dry-run" target="_blank">docs</a> for more information.
|
|
</small>
|
|
</div>
|
|
|
|
</fieldset>
|
|
</form>
|
|
|
|
<Button @click="onSubmit()" style="margin-top: 12px" :disabled="busy || !isFormValid" :loading="busy">Restore</Button>
|
|
<a href="/setup.html" style="margin-left: 10px;">Looking to setup?</a>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.view {
|
|
margin: 60px 0;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
|
|
</style>
|