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

<script setup>

import { ref, useTemplateRef } from 'vue';
import { MaskedInput, Dialog, FormGroup, TextInput, Checkbox } from '@cloudron/pankow';
import { prettyBinarySize } from '@cloudron/pankow/utils';
import { s3like, regionName } 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('');

async function onSubmit() {
  busy.value = true;

  let [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;
  }

  // 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),
  };

  [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;
    }

    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>
                <span v-if="site.provider === 'filesystem'">{{ site.config.backupDir }}{{ (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
                <span v-else-if="site.provider === 'disk' || site.provider === 'ext4' || site.provider === 'xfs' || site.provider === 'mountpoint'">{{ site.config.mountOptions.diskPath || site.config.mountPoint }}{{ (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
                <span v-else-if="site.provider === 'cifs' || site.provider === 'nfs' || site.provider === 'sshfs'">{{ site.config.mountOptions.host }}:{{ site.config.mountOptions.remoteDir }}{{ (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
                <span v-else-if="site.provider === 's3'">{{ site.config.region + '   ' + site.config.bucket + (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
                <span v-else-if="site.provider === 'minio'">{{ site.config.endpoint + '   ' + site.config.bucket + (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
                <span v-else-if="site.provider === 'gcs'">{{ site.config.endpoint + '   ' + site.config.bucket + (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
                <span v-else>{{ regionName(site.provider, site.config.endpoint) + ' ' + site.config.bucket + (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
              </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>

            <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 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>
              <p class="small">{{ $t('backups.configureBackupStorage.uploadPartSizeDescription') }}</p>
              <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 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 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 class="small">{{ $t('backups.configureBackupStorage.copyConcurrencyDescription') }}
                <span v-show="provider === 'digitalocean-spaces'">{{ $t('backups.configureBackupStorage.copyConcurrencyDigitalOceanNote') }}</span>
              </div>
              <input type="range" id="copyConcurrencyInput" v-model="copyConcurrency" step="10" min="10" max="500" />
            </FormGroup>
          </fieldset>
        </form>
      </div>
    </div>
  </Dialog>
</template>