cloudron-box/dashboard/src/views/BackupsView.vue

<script setup>

import { ref, onMounted, useTemplateRef } from 'vue';
import { marked } from 'marked';
import { Button } from 'pankow';
import Section from  '../components/Section.vue';
import StateLED from  '../components/StateLED.vue';
import BackupDialog from  '../components/BackupDialog.vue';
import BackupSchedule from  '../components/BackupSchedule.vue';
import BackupList from  '../components/BackupList.vue';
import AppArchive from  '../components/AppArchive.vue';
import BackupsModel from '../models/BackupsModel.js';
import ProfileModel from '../models/ProfileModel.js';
import { mountlike, s3like } from  '../utils.js';

const profileModel = ProfileModel.create();
const backupsModel = BackupsModel.create();

const profile = ref({});
const manualBackupApps = ref([]);
const config = ref({});
const mountOptions = ref({});
const mountStatus = ref({});

const backupDialog = useTemplateRef('backupDialog');
function onConfigure() {
  backupDialog.value.open();
}

const remountBusy = ref(false);

async function onRemount() {
  if (!mountlike(config.value.provider)) return;

  remountBusy.value = true;

  const [error] = await backupsModel.remount();
  if (error) {
    console.error('Failed to remount backup storage.', error);
    window.pankow.notify({ text: `Remount failed: ${error.message}`, persistent: true, type: 'danger' });
  }

  // give the backend some time
  setTimeout(() => {
    remountBusy.value = false;
    refresh();
  }, 2000);
}

async function refresh() {
  let [error, result] = await backupsModel.getConfig();
  if (error) return console.error(error);

  config.value = result;
  mountOptions.value = result.mountOptions || {};
  mountStatus.value = {};

  if (!mountlike(config.value.provider)) return;

  [error, result] = await backupsModel.mountStatus();
  if (error) return console.error(error);

  mountStatus.value = result;
}

onMounted(async () => {
  const [error, result] = await profileModel.get();
  if (error) return console.error(error);

  profile.value = result;

  await refresh();
});

</script>

<template>
  <div class="content">
    <BackupDialog ref="backupDialog" @success="refresh()"/>

    <Section :title="$t('backups.title')">
      <p>{{ $t('backups.location.description') }}
        <span v-show="manualBackupApps.length">
          {{ $t('backups.location.disabledList') }}
          <span v-for="app in manualBackupApps" :key="app.id">
            <a :href="`/#/app/${app.id}/backups`">{{ app.label || app.fqdn }}</a>,
          </span>
        </span>
      </p>

      <p v-show="config.provider === 'noop'" class="text-danger" v-html="marked.parse($t('backups.check.noop'))"></p>
      <p v-show="config.provider === 'filesystem'" class="text-danger" v-html="marked.parse($t('backups.check.sameDisk'))"></p>

      <div class="info-row">
        <div class="info-label">{{ $t('backups.location.provider') }}</div>
        <div class="info-value">{{ config.provider }}</div>
      </div>
      <div class="info-row" v-show="config.provider !== 'noop'">
        <div class="info-label">{{ $t('backups.location.location') }}</div>
        <div class="info-value">
          <span v-show="config.provider === 'filesystem'">{{ config.backupFolder }}</span>
          <span v-show="mountlike(config.provider)">
            <StateLED v-if="mountStatus" :state="mountStatus.state === 'active' ? 'success' : 'danger'" v-tooltip="mountStatus.message" style="margin-right: 6px"/>
            <span v-show="config.provider === 'disk' || config.provider === 'filesystem' || config.provider === 'ext4' || config.provider === 'xfs' || config.provider === 'mountpoint'">{{ mountOptions.diskPath || config.mountPoint }}{{ (config.prefix ? '/' : '') + config.prefix }}</span>
            <span v-show="config.provider === 'cifs' || config.provider === 'nfs' || config.provider === 'sshfs'">{{ mountOptions.host }}:{{ mountOptions.remoteDir }}{{ (config.prefix ? '/' : '') + config.prefix }}</span>
          </span>

          <span v-show="config.provider !== 's3' && config.provider !== 'minio' && (s3like(config.provider) || config.provider === 'gcs')">{{ config.bucket + (config.prefix ? '/' : '') + config.prefix }}</span>
          <span v-show="config.provider === 's3'">{{ config.region + '   ' + config.bucket + (config.prefix ? '/' : '') + config.prefix }}</span>
          <span v-show="config.provider === 'minio'">{{ config.endpoint + '   ' + config.bucket + (config.prefix ? '/' : '') + config.prefix }}</span>
        </div>
      </div>
      <div class="info-row" v-show="config.endpoint && config.provider !== 'minio'">
        <div class="info-label">{{ $t('backups.location.endpoint') }}</div>
        <div class="info-value">{{ config.endpoint || config.region }}</div>
      </div>
      <div class="info-row">
        <div class="info-label">{{ $t('backups.location.format') }}</div>
        <div class="info-value">{{ config.format }} <i class="fas fa-lock" v-show="config.password" ></i></div>
      </div>

      <div class="button-bar">
        <Button v-show="profile.isAtLeastOwner" @click="onConfigure()">{{ $t('backups.location.configure') }}</Button>
        <Button v-show="profile.isAtLeastOwner && mountlike(config.provider)" :disabled="remountBusy" :loading="remountBusy" @click="onRemount()">{{ $t('backups.location.remount') }}</Button>
      </div>
    </Section>

    <BackupSchedule :profile="profile"/>
    <BackupList :config="config"/>
    <AppArchive :config="config"/>
  </div>
</template>