cloudron-box/dashboard/src/components/BackupProviderForm.vue

<script setup>

import { ref, onMounted, watch } from 'vue';
import { Button, InputGroup, SingleSelect, FormGroup, TextInput, Checkbox, PasswordInput, NumberInput } from 'pankow';
import { prettyBinarySize } from  'pankow/utils';
import { BACKUP_FORMATS, STORAGE_PROVIDERS, REGIONS_CONTABO, REGIONS_VULTR, REGIONS_IONOS, REGIONS_OVH, REGIONS_LINODE, REGIONS_SCALEWAY, REGIONS_EXOSCALE, REGIONS_DIGITALOCEAN, REGIONS_HETZNER, REGIONS_WASABI, REGIONS_S3 } from '../constants.js';
import ProvisionModel from '../models/ProvisionModel.js';
import SystemModel from '../models/SystemModel.js';
import { mountlike, s3like } from  '../utils.js';

const provider = defineModel('provider');
const providerConfig = defineModel('providerConfig');
const props = defineProps({
  formError: {},
  importOnly: {
    type: Boolean,
    default: false,
  },
  provisioning: {
    type: Boolean,
    default: false,
  },
});

const systemModel = SystemModel.create();
const provisionModel = ProvisionModel.create();

const storageProviders = STORAGE_PROVIDERS.concat([
  { name: 'No-op (Only for testing)', value: 'noop' }
]);

const blockDevices = ref([]);
const disk = ref('');
const gcsKeyFileName = ref('');
const gcsFileParseError = ref('');
const advancedVisible = ref(false);

const minMemoryLimit = ref(1024 * 1024 * 1024); // 1 GB
const maxMemoryLimit = ref(minMemoryLimit.value); // set later

function onGcsKeyChange(event) {
  gcsFileParseError.value = '';

  const fr = new FileReader();

  fr.onload = () => {
    // validate input file
    try {
      const keyJson = JSON.parse(fr.result);
      if (!keyJson.project_id) throw new Error('project_id field missing in JSON key file');
      if (!keyJson.client_email) throw new Error('client_email field missing in JSON key file');
      if (!keyJson.private_key) throw new Error('private_key field missing in JSON key file');

      providerConfig.value.projectId = keyJson.project_id;
      providerConfig.value.credentials = {
        client_email: keyJson.client_email,
        private_key: keyJson.private_key,
      };
    } catch (e) {
      if (e.name === 'SyntaxError') gcsFileParseError.value = 'Invalid JSON';
      else gcsFileParseError.value = e.message;

      providerConfig.value.projectId = '';
      providerConfig.value.credentials = {
        client_email: '',
        private_key: '',
      };
    }
  };
  fr.readAsText(event.target.files[0]);

  gcsKeyFileName.value = event.target.files[0].name;
}

async function getBlockDevices() {
  let error, result;

  if (props.provisioning) [error, result] = await provisionModel.blockDevices();
  else [error, result] = await systemModel.blockDevices();

  if (error) return console.error(error);

  // amend label for UI
  result.forEach(d => {
    d.label = d.path;

    // pre-select current if set
    if (d.path === providerConfig.value.mountOptionDiskPath || ('/dev/disk/by-uuid/' + d.uuid) === providerConfig.value.mountOptionDiskPath) {
      disk.value = d.path;
    }
  });

  // only offer non /, /boot or /home disks
  // only offer xfs and ext4 disks
  blockDevices.value = result
    .filter(d => { return d.mountpoint !== '/' && d.mountpoint !== '/home' && d.mountpoint !== '/boot'; })
    .filter(d => { return d.type === 'xfs' || d.type === 'ext4'; });
}

async function getMemory() {
  if (props.provisioning) {
    maxMemoryLimit.value = 4 * 1024 * 1024 * 1024;
    return;
  }

  const [error, result]  = await systemModel.memory();
  if (error) return console.error(error);

  maxMemoryLimit.value = Math.ceil(result.memory / (1024*1024*1024)) * 1024 * 1024 * 1024;
}

watch(provider, (newProvider) => {
  if (newProvider === 'scaleway-objectstorage') {
    // scaleway only supports 1000 parts per object (https://www.scaleway.com/en/docs/s3-multipart-upload/)
    if (parseInt(providerConfig.value.uploadPartSize) < 100 * 1024 * 1024) providerConfig.value.uploadPartSize = 100 * 1024 * 1024;
  } else if (newProvider === 's3') {
    if (parseInt(providerConfig.value.downloadConcurrency) < 30) providerConfig.value.downloadConcurrency = 30;
    if (parseInt(providerConfig.value.syncConcurrency) < 20) providerConfig.value.syncConcurrency = 20;
    if (parseInt(providerConfig.value.copyConcurrency) < 500) providerConfig.value.downloadConcurrency = 500;
  }
});

onMounted(async () => {
  await getMemory();
  await getBlockDevices();
});

</script>

<template>
  <div>
    <div class="error-label" v-show="formError.generic">{{ formError.generic }}</div>

    <FormGroup>
      <label for="providerInput">{{ $t('backups.configureBackupStorage.provider') }} <sup><a href="https://docs.cloudron.io/backups/#storage-providers" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
      <SingleSelect id="providerInput" v-model="provider" :options="storageProviders" option-key="value" option-label="name" />
    </FormGroup>

    <!-- Noop -->
    <div class="warning-label" v-show="provider === 'noop'">{{ $t('backups.configureBackupStorage.noopNote') }}</div>

    <!-- mountpoint -->
    <FormGroup v-if="provider === 'mountpoint'">
      <label for="mountPointInput">{{ $t('backups.configureBackupStorage.mountPoint') }}</label>
      <TextInput id="mountPointInput" v-model="providerConfig.mountPoint" placeholder="/mnt/backups" required/>
      <div v-html="$t('backups.configureBackupStorage.mountPointDescription', { providerDocsLink: `https://docs.cloudron.io/backups/#${provider}` })"></div>
    </FormGroup>

    <!-- CIFS/NFS/SSHFS -->
    <FormGroup v-if="provider === 'cifs' || provider === 'nfs' || provider === 'sshfs'">
      <label for="mountOptionHostInput">{{ $t('backups.configureBackupStorage.server') }} ({{ provider }})</label>
      <TextInput id="mountOptionHostInput" v-model="providerConfig.mountOptionHost" placeholder="Server IP or hostname" required />
    </FormGroup>

    <!-- CIFS -->
    <Checkbox v-if="provider === 'cifs'" v-model="providerConfig.mountOptionSeal" :label="$t('backups.configureBackupStorage.cifsSealSupport')" />

    <!-- CIFS/NFS/SSHFS -->
    <FormGroup v-if="provider === 'cifs' || provider === 'nfs' || provider === 'sshfs'">
      <label for="mountOptionRemoteDirInput">{{ $t('backups.configureBackupStorage.remoteDirectory') }} ({{ provider }})</label>
      <TextInput id="mountOptionRemoteDirInput" v-model="providerConfig.mountOptionRemoteDir" placeholder="/share" required />
    </FormGroup>

    <!-- CIFS -->
    <FormGroup v-if="provider === 'cifs'">
      <label for="mountOptionUsernameInput">{{ $t('backups.configureBackupStorage.username') }} ({{ provider }})</label>
      <TextInput id="mountOptionUsernameInput" v-model="providerConfig.mountOptionUsername" required />
    </FormGroup>

    <!-- CIFS -->
    <FormGroup v-if="provider === 'cifs'">
      <label for="mountOptionPasswordInput">{{ $t('backups.configureBackupStorage.password') }} ({{ provider }})</label>
      <PasswordInput id="mountOptionPasswordInput" v-model="providerConfig.mountOptionPassword" required />
    </FormGroup>

    <!-- EXT4/XFS -->
    <FormGroup v-if="provider === 'xfs' || provider === 'ext4'">
      <label for="mountOptionDiskPathInput">{{ $t('backups.configureBackupStorage.diskPath') }}</label>
      <TextInput id="mountOptionDiskPathInput" v-model="providerConfig.mountOptionDiskPath" placeholder="/dev/disk/by-uuid/uuid" required />
    </FormGroup>

    <!-- Disk -->
    <FormGroup v-if="provider === 'disk'">
      <label class="control-label">{{ $t('backups.configureBackupStorage.diskPath') }}</label>
      <SingleSelect v-model="disk" :options="providerConfig.blockDevices" option-label="label" option-key="path" required />
    </FormGroup>

    <!-- SSHFS -->
    <FormGroup v-if="provider === 'sshfs'">
      <label for="mountOptionPortInput">{{ $t('backups.configureBackupStorage.port') }}</label>
      <NumberInput v-model="providerConfig.mountOptionPort" id="mountOptionPortInput" required />
    </FormGroup>

    <!-- SSHFS -->
    <FormGroup v-if="provider === 'sshfs'">
      <label for="mountOptionUserInput">{{ $t('backups.configureBackupStorage.user') }}</label>
      <TextInput id="mountOptionUserInput" v-model="providerConfig.mountOptionUser" required />
    </FormGroup>

    <!-- SSHFS -->
    <FormGroup v-if="provider === 'sshfs'">
      <label for="mountOptionPrivateKeyInput">{{ $t('backups.configureBackupStorage.privateKey') }}</label>
      <textarea id="mountOptionPrivateKeyInput" v-model="providerConfig.mountOptionPrivateKey" required></textarea>
    </FormGroup>

    <!-- Filesystem -->
    <FormGroup v-if="provider === 'filesystem' && !importOnly">
      <label for="backupFolderInput">{{ $t('backups.configureBackupStorage.localDirectory') }}</label>
      <TextInput id="backupFolderInput" v-model="providerConfig.backupFolder" placeholder="Directory for backups" required />
    </FormGroup>

    <!-- Filesystem/SSHFS/CIFS/NFS/EXT4/mountpoint -->
    <Checkbox v-if="(provider === 'filesystem' || mountlike(provider)) && !importOnly" v-model="providerConfig.useHardlinks" :label="$t('backups.configureBackupStorage.hardlinksLabel')"/>

    <!-- CIFS/mountpoint -->
    <Checkbox v-if="(provider === 'mountpoint' || provider === 'cifs') && !importOnly" v-model="providerConfig.preserveAttributes" :label="$t('backups.configureBackupStorage.preserveAttributesLabel')"/>

    <!-- mountpoint -->
    <Checkbox v-if="provider === 'mountpoint' && !importOnly" v-model="providerConfig.chown" :label="$t('backups.configureBackupStorage.chown')"/>

    <!-- S3/Minio/SOS/GCS/UpCloud/B2/R2 -->
    <FormGroup v-if="provider === 'minio' || provider === 'upcloud-objectstorage' || provider === 'backblaze-b2' || provider === 'cloudflare-r2' || provider === 's3-v4-compat' || provider === 'idrive-e2'">
      <label for="endpointInput">{{ $t('backups.configureBackupStorage.s3Endpoint') }}</label>
      <TextInput id="endpointInput" v-model="providerConfig.endpoint" placeholder="URL" required />
    </FormGroup>

    <Checkbox v-if="provider === 'minio' || provider === 's3-v4-compat'" v-model="providerConfig.acceptSelfSignedCerts" :label="$t('backups.configureBackupStorage.acceptSelfSignedCerts')"/>

    <FormGroup v-if="s3like(provider) || provider === 'gcs'">
      <label for="bucketInput">{{ $t('backups.configureBackupStorage.bucketName') }}</label>
      <TextInput id="bucketInput" v-model="providerConfig.bucket" required />
    </FormGroup>

    <FormGroup v-if="(provider !== 'filesystem' && provider !== 'noop') && !importOnly">
      <label for="prefixInput">{{ $t('backups.configureBackupStorage.prefix') }}</label>
      <TextInput id="prefixInput" v-model="providerConfig.prefix" placeholder="Prefix for backup file names" />
    </FormGroup>

    <!-- S3/Minio/SOS/GCS -->
    <FormGroup v-if="
      provider === 's3' ||
      provider === 'digitalocean-spaces' ||
      provider === 'hetzner-objectstorage' ||
      provider === 'wasabi' ||
      provider === 'scaleway-objectstorage' ||
      provider === 'linode-objectstorage' ||
      provider === 'ovh-objectstorage' ||
      provider === 'ionos-objectstorage' ||
      provider === 'vultr-objectstorage' ||
      provider === 'contabo-objectstorage' ||
      provider === 'exoscale-sos'
      "
     >
      <label for="regionInput">{{ $t('backups.configureBackupStorage.region') }}</label>
      <SingleSelect id="regionInput" v-if="provider === 's3'" v-model="providerConfig.region" :options="REGIONS_S3" option-label="name" option-key="value" required />
      <SingleSelect id="regionInput" v-if="provider === 'digitalocean-spaces'" v-model="providerConfig.endpoint" :options="REGIONS_DIGITALOCEAN" option-label="name" option-key="value" required />
      <SingleSelect id="regionInput" v-if="provider === 'hetzner-objectstorage'" v-model="providerConfig.endpoint" :options="REGIONS_HETZNER" option-label="name" option-key="value" required />
      <SingleSelect id="regionInput" v-if="provider === 'exoscale-sos'" v-model="providerConfig.endpoint" :options="REGIONS_EXOSCALE" option-label="name" option-key="value" required />
      <SingleSelect id="regionInput" v-if="provider === 'wasabi'" v-model="providerConfig.endpoint" :options="REGIONS_WASABI" option-label="name" option-key="value" required />
      <SingleSelect id="regionInput" v-if="provider === 'scaleway-objectstorage'" v-model="providerConfig.endpoint" :options="REGIONS_SCALEWAY" option-label="name" option-key="value" required />
      <SingleSelect id="regionInput" v-if="provider === 'linode-objectstorage'" v-model="providerConfig.endpoint" :options="REGIONS_LINODE" option-label="name" option-key="value" required />
      <SingleSelect id="regionInput" v-if="provider === 'ovh-objectstorage'" v-model="providerConfig.endpoint" :options="REGIONS_OVH" option-label="name" option-key="value" required />
      <SingleSelect id="regionInput" v-if="provider === 'ionos-objectstorage'" v-model="providerConfig.endpoint" :options="REGIONS_IONOS" option-label="name" option-key="value" required />
      <SingleSelect id="regionInput" v-if="provider === 'vultr-objectstorage'" v-model="providerConfig.endpoint" :options="REGIONS_VULTR" option-label="name" option-key="value" required />
      <SingleSelect id="regionInput" v-if="provider === 'contabo-objectstorage'" v-model="providerConfig.endpoint" :options="REGIONS_CONTABO" option-label="name" option-key="value" required />
    </FormGroup>

    <FormGroup v-if="provider === 's3-v4-compat'">
      <label for="s3v4CompatRegionInput">{{ $t('backups.configureBackupStorage.region') }}</label>
      <TextInput id="s3v4CompatRegionInput" v-model="providerConfig.region" placeholder="Leave empty to use us-east-1 as default" />
    </FormGroup>

    <FormGroup v-if="s3like(provider)">
      <label for="accessKeyIdInput">{{ $t('backups.configureBackupStorage.s3AccessKeyId') }}</label>
      <TextInput id="accessKeyIdInput" v-model="providerConfig.accessKeyId" required />
    </FormGroup>

    <FormGroup v-if="s3like(provider)">
      <label for="accessKeyInput">{{ $t('backups.configureBackupStorage.s3SecretAccessKey') }}</label>
      <TextInput id="accessKeyInput" v-model="providerConfig.secretAccessKey" required />
    </FormGroup>

    <FormGroup v-if="provider === 'gcs'">
      <input type="file" id="gcsKeyFileInput" style="display:none" accept="application/json, text/json" @change="onGcsKeyChange"/>
      <label for="gcsKeyInput">{{ $t('backups.configureBackupStorage.gcsServiceKey') }}{{ providerConfig.projectId ? ` - project: ${providerConfig.projectId}` : '' }}</label>
      <InputGroup>
        <TextInput readonly required style="flex-grow: 1" v-model="providerConfig.credentials.client_email" placeholder="Service Account Key" onclick="document.getElementById('gcsKeyFileInput').click();"/>
        <Button tool icon="fa fa-upload" onclick="document.getElementById('gcsKeyFileInput').click();"/>
      </InputGroup>
      <div class="error-label" v-show="gcsFileParseError">{{ gcsFileParseError }}</div>
    </FormGroup>

    <FormGroup v-if="provider !== 'noop'">
      <label for="formatInput">{{ $t('backups.configureBackupStorage.format') }} <sup><a href="https://docs.cloudron.io/backups/#backup-formats" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
      <SingleSelect id="formatInput" v-model="providerConfig.format" :options="BACKUP_FORMATS" option-label="name" option-key="value" required />
      <div class="warning-label" v-show="providerConfig.format === 'rsync' && (s3like(provider) || provider === 'gcs')">{{ $t('backups.configureBackupStorage.s3LikeNote') }} <sup><a href="https://docs.cloudron.io/backups/#amazon-s3" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
    </FormGroup>

    <FormGroup v-if="provider !== 'noop'">
      <label for="encryptionPassswordInput">{{ $t('backups.configureBackupStorage.encryptionPassword') }} <sup><a href="https://docs.cloudron.io/backups/#encryption" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
      <TextInput id="encryptionPassswordInput" v-model="providerConfig.encryptionPassword" :placeholder="$t('backups.configureBackupStorage.encryptionPasswordPlaceholder')" />
    </FormGroup>
    <Checkbox v-if="providerConfig.format === 'rsync' && providerConfig.encryptionPassword" v-model="providerConfig.encryptedFilenames" :label="$t(importOnly ? 'backups.configureBackupStorage.encryptedFilenames' : 'backups.configureBackupStorage.encryptFilenames')"/>
    <div class="warning-label" v-show="providerConfig.encryptionPassword && !importOnly">{{ $t('backups.configureBackupStorage.encryptionDescription') }}</div>

    <p class="actionable" @click="advancedVisible = true" v-if="!advancedVisible && !importOnly">{{ $t('backups.configureBackupStorage.advancedSettings') }}</p>
    <div v-if="advancedVisible && !importOnly">
      <FormGroup>
        <label for="memoryLimitInput">{{ $t('backups.configureBackupStorage.memoryLimit') }}: <b>{{ prettyBinarySize(memoryLimit, '1024 MB') }}</b></label>
        <p class="small">{{ $t('backups.configureBackupStorage.memoryLimitDescription') }}</p>
        <input type="range" id="memoryLimitInput" v-model="providerConfig.limits.memoryLimit" :step="256*1024*1024" :min="minMemoryLimit" :max="maxMemoryLimit" />
      </FormGroup>

      <FormGroup v-if="s3like(provider)">
        <label for="uploadPartSizeInput">{{ $t('backups.configureBackupStorage.uploadPartSize') }}: <b>{{ prettyBinarySize(providerConfig.limits.uploadPartSize, 'Default (50 MiB)') }}</b></label>
        <p class="small">{{ $t('backups.configureBackupStorage.uploadPartSizeDescription') }}</p>
        <input type="range" id="uploadPartSizeInput" v-model="providerConfig.limits.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="format === 'rsync' && provider !== 'noop'">
        <label for="syncConcurrencyInput">{{ $t('backups.configureBackupStorage.uploadConcurrency') }}: <b>{{ providerConfig.limits.syncConcurrency }}</b></label>
        <p class="small">{{ $t('backups.configureBackupStorage.uploadConcurrencyDescription') }}</p>
        <input type="range" id="syncConcurrencyInput" v-model="providerConfig.limits.syncConcurrency" step="10" min="10" max="200" />
      </FormGroup>

      <FormGroup v-if="format === 'rsync' && (s3like(provider) || provider === 'gcs')">
        <label for="downloadConcurrencyInput">{{ $t('backups.configureBackupStorage.downloadConcurrency') }}: <b>{{ providerConfig.limits.downloadConcurrency }}</b></label>
        <p class="small">{{ $t('backups.configureBackupStorage.downloadConcurrencyDescription') }}</p>
        <input type="range" id="downloadConcurrencyInput" v-model="providerConfig.limits.downloadConcurrency" step="10" min="10" max="200" />
      </FormGroup>

      <FormGroup v-if="format === 'rsync' && (s3like(provider) || provider === 'gcs')">
        <label for="copyConcurrencyInput">{{ $t('backups.configureBackupStorage.copyConcurrency') }}: <b>{{ providerConfig.limits.copyConcurrency }}</b></label>
        <p class="small">{{ $t('backups.configureBackupStorage.copyConcurrencyDescription') }}
          <span v-show="provider === 'digitalocean-spaces'">{{ $t('backups.configureBackupStorage.copyConcurrencyDigitalOceanNote') }}</span>
        </p>
        <input type="range" id="copyConcurrencyInput" v-model="providerConfig.limits.copyConcurrency" step="10" min="10" max="500" />
      </FormGroup>
    </div>
  </div>
</template>