cloudron-box/dashboard/src/components/app/Backups.vue

<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import { ref, onMounted, useTemplateRef } from 'vue';
import { Icon, Button, Switch, Checkbox, FormGroup, TextInput, TableView, ButtonGroup, Dialog, ProgressBar } from '@cloudron/pankow';
import { prettyLongDate } from '@cloudron/pankow/utils';
import { API_ORIGIN } from '../../constants.js';
import { download } from '../../utils.js';
import AppImportDialog from '../AppImportDialog.vue';
import AppRestoreDialog from '../AppRestoreDialog.vue';
import SettingsItem from '../SettingsItem.vue';
import AppsModel from '../../models/AppsModel.js';
import BackupTargetsModel from '../../models/BackupTargetsModel.js';
import TasksModel from '../../models/TasksModel.js';

const appsModel = AppsModel.create();
const backupTargetsModel = BackupTargetsModel.create();
const tasksModel = TasksModel.create();

const props = defineProps([ 'app' ]);

const columns = ref({
  preserveSecs: {
    label: '',
    icon: 'fa-solid fa-archive',
    width: '40px',
    sort: true
  },
  packageVersion: {
    label: t('app.backups.backups.packageVersion'),
    sort: true,
  },
  creationTime: {
    label: t('app.backups.backups.time'),
    sort: true,
  },
  actions: {
    label: '',
    sort: false,
  }
});

const busy = ref(true);
const errorMessage = ref('');
const editBusy = ref(false);
const editError = ref('');
const editBackup = ref({});
const editPersist = ref(false);
const editLabel = ref('');
const importBusy = ref(false);
const autoBackupsEnabled = ref(false);
const backups = ref([]);
const editDialog = useTemplateRef('editDialog');
const restoreDialog = useTemplateRef('restoreDialog');
const taskLogsMenu = ref([]);
const lastTask = ref({});
const startBackupBusy = ref(false);
const stopBackupBusy = ref(false);

async function onChangeAutoBackups(value) {
  const [error] = await appsModel.configure(props.app.id, 'automatic_backup', { enable: value });
  if (error) {
    autoBackupsEnabled.value = !value;
    return console.error(error);
  }
}

async function waitForTask() {
  if (!lastTask.value.id) return;

  const [error, result] = await tasksModel.get(lastTask.value.id);
  if (error) return console.error(error);

  lastTask.value = result;

  // task done, refresh menu
  if (!result.active) {
    startBackupBusy.value = false;
    await refreshTasks();
    refreshBackupList();
    return;
  }

  setTimeout(waitForTask, 2000);
}

async function refreshTasks() {
  const [error, result] = await tasksModel.getByType(`appBackup_${props.app.id}`);
  if (error) return console.error(error);

  lastTask.value = result[0] || {};

  // limit to last 10
  taskLogsMenu.value = result.slice(0,10).map(t => {
    return {
      icon: 'fa-solid ' + ((!t.active && t.success) ? 'status-active fa-check-circle' : (t.active ? 'fa-circle-notch fa-spin' : 'status-error fa-times-circle')),
      label: prettyLongDate(t.ts),
      action: () => { window.open(`/logs.html?taskId=${t.id}`); }
    };
  });

  // if last task is currently active, start polling
  if (lastTask.value.active) waitForTask();
}

async function onStartBackup() {
  startBackupBusy.value = true;

  const [error] = await appsModel.backup(props.app.id);
  if (error) return console.error(error);

  await refreshTasks();
}

async function onStopBackup() {
  stopBackupBusy.value = true;

  const [error] = await tasksModel.stop(lastTask.value.id);
  if (error) return console.error(error);

  await refreshTasks();

  stopBackupBusy.value = false;
}

function onEdit(backup) {
  editBusy.value = false;
  editBackup.value = backup;
  editPersist.value = backup.preserveSecs === -1;
  editLabel.value = backup.label || '';
  editError.value = '';
  editDialog.value.open();
}

async function onEditSubmit() {
  const [error] = await appsModel.updateBackup(props.app.id, editBackup.value.id, editLabel.value, editPersist.value  ? -1 : 0);
  if (error) {
    editError.value = error.body ? error.body.message : 'Internal error';
    editBusy.value = false;
    return console.error(error);
  }

  refreshBackupList();
  editDialog.value.close();
}

function getDownloadLink(backup) {
  const accessToken = localStorage.token;
  return `${API_ORIGIN}/api/v1/apps/${props.app.id}/backups/${backup.id}/download?access_token=${accessToken}`;
}

async function onDownloadConfig(backup) {
  const [error, backupTarget] = await backupTargetsModel.get(backup.targetId);
  if (error) return console.error(error);

  const tmp = {
    remotePath: backup.remotePath
  };
  for (const k of ['provider', 'config', 'limits', 'format', 'encrypted', 'encryptedFilenames', 'encryptionPasswordHint']) {
    tmp[k] = backupTarget[k];
  }

  const filename = `${props.app.fqdn}-backup-config-${(new Date(backup.creationTime)).toISOString().split('T')[0]}.json`;
  download(filename, JSON.stringify(tmp, null, 4));
}

const restoreBusy = ref(false);
const restoreBackup = ref({});

async function onRestore(backup) {
  restoreBusy.value = false;
  restoreBackup.value = backup;
  restoreDialog.value.open();
}

async function onRestoreSubmit() {
  restoreBusy.value = true;

  const [error] = await appsModel.restore(props.app.id, restoreBackup.value.id);
  if (error) {
    restoreBusy.value = false;
    return console.error(error);
  }

  restoreDialog.value.close();
}

const importDialog = useTemplateRef('importDialog');
function onImport() {
  importDialog.value.open(props.app.id);
}

const cloneDialog = useTemplateRef('cloneDialog');
function onClone(backup) {
  cloneDialog.value.open(backup, props.app.id);
}

async function refreshBackupList() {
  const [error, result] = await appsModel.backups(props.app.id);
  if (error) return console.error(error);

  backups.value = result;
}

onMounted(async () => {
  autoBackupsEnabled.value = props.app.enableBackup;

  await refreshBackupList();
  await refreshTasks();

  busy.value = false;
});

</script>

<template>

  <div>
    <AppRestoreDialog ref="cloneDialog"/>
    <AppImportDialog ref="importDialog"/>
    <Dialog ref="editDialog"
      :title="$t('backups.backupEdit.title')"
      :reject-label="$t('main.dialog.cancel')"
       reject-style="secondary"
      :confirm-label="$t('main.dialog.save')"
      :confirm-active="true"
      :confirm-busy="editBusy"
      @confirm="onEditSubmit()"
    >
      <div>
        <div class="info-row">
          <div class="info-label">{{ $t('backups.backupDetails.id') }}</div>
          <div class="info-value">{{ editBackup.id }}</div>
        </div>
        <div class="info-row">
          <div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
          <div class="info-value">{{ editBackup.emotePath }}</div>
        </div>
        <div class="info-row">
          <div class="info-label">{{ $t('backups.backupDetails.date') }}</div>
          <div class="info-value">{{ prettyLongDate(editBackup.creationTime) }}</div>
        </div>
        <div class="info-row">
          <div class="info-label">{{ $t('backups.backupDetails.version') }}</div>
          <div class="info-value">{{ editBackup.packageVersion }}</div>
        </div>
        <div class="info-row">
          <div class="info-label">{{ $t('backups.backupDetails.format') }}</div>
          <div class="info-value">{{ editBackup.format }}</div>
        </div>

        <form @submit.prevent="onEditSubmit()" autocomplete="off">
          <fieldset :disabled="editBusy">
            <p class="has-error" v-show="editError">{{ editError }}</p>

            <FormGroup>
              <label for="labelInput">{{ $t('backups.backupEdit.label') }}</label>
              <TextInput v-model="editLabel" id="labelInput" />
            </FormGroup>

            <br/>

            <Checkbox v-model="editPersist" :label="$t('backups.backupEdit.preserved.description')"/>
          </fieldset>
        </form>
      </div>
    </Dialog>

    <Dialog ref="restoreDialog"
      :title="$t('app.restoreDialog.title', { app: app.fqdn })"
      :reject-label="$t('main.dialog.close')"
       reject-style="secondary"
      :confirm-label="$t('app.restoreDialog.restoreAction')"
      :confirm-active="true"
      :confirm-busy="restoreBusy"
      @confirm="onRestoreSubmit()"
    >
      <div>
        <p>{{ $t('app.restoreDialog.description', { creationTime: prettyLongDate(restoreBackup.creationTime) }) }}</p>
        <p class="text-danger">{{ $t('app.restoreDialog.warning') }}</p>
        <br/>
      </div>
    </Dialog>

    <SettingsItem>
      <FormGroup>
        <label>{{ $t('app.backups.auto.title') }}</label>
        <div v-html="$t('app.backups.auto.description', { backupLink: '/#/backups' })"></div>
      </FormGroup>
      <Switch v-model="autoBackupsEnabled" @change="onChangeAutoBackups"/>
    </SettingsItem>

    <SettingsItem>
      <FormGroup>
        <label>{{ $t('app.backups.import.title') }}</label>
        <div>{{ $t('app.backups.import.description') }}</div>
      </FormGroup>
      <div style="display: flex; align-items: center">
        <Button @click="onImport()" :loading="importBusy" :disabled="importBusy || app.taskId || app.runState === 'stopped'" v-tooltip="app.taskId ? 'App is not running' : ''">{{ $t('app.backups.backups.importAction') }}</Button>
      </div>
    </SettingsItem>

    <hr/>

    <SettingsItem>
      <FormGroup>
        <label>{{ $t('app.backups.backups.title') }}</label>
        <div>{{ $t('app.backups.backups.description') }}</div>
      </FormGroup>
      <div style="display: flex; align-items: center;">
        <Button tool :menu="taskLogsMenu" :disabled="!taskLogsMenu.length">{{ $t('main.action.logs') }}</Button>
      </div>
    </SettingsItem>

    <p class="has-error" v-if="errorMessage">{{ errorMessage }}</p>

    <TableView :model="backups" :columns="columns" :busy="busy" :placeholder="$t('backups.listing.noBackups')" style="max-height: 400px;" >
      <template #preserveSecs="backup">
        <Icon icon="fa-solid fa-archive" v-show="backup.preserveSecs === -1" />
      </template>
      <template #creationTime="backup">
        {{ prettyLongDate(backup.creationTime) }} <b v-show="backup.label">({{ backup.label }})</b>
      </template>
      <template #actions="backup">
        <div class="table-actions">
          <ButtonGroup>
            <Button secondary tool small icon="fa-solid fa-pencil-alt" v-if="app.accessLevel === 'admin'" v-tooltip="$t('backups.listing.tooltipEditBackup')" @click="onEdit(backup)"></Button>
            <Button secondary tool small icon="fa-solid fa-download" v-if="backup.format === 'tgz' && app.accessLevel === 'admin'" v-tooltip="$t('app.backups.backups.downloadBackupTooltip')" :href="getDownloadLink(backup)"></Button>
            <Button secondary tool small icon="fa-solid fa-file-alt" v-if="app.accessLevel === 'admin'" v-tooltip="$t('app.backups.backups.downloadConfigTooltip')" @click="onDownloadConfig(backup)"></Button>
            <Button secondary tool small icon="fa-solid fa-clone" v-if="app.accessLevel === 'admin'" v-tooltip="$t('app.backups.backups.cloneTooltip')" @click="onClone(backup)"></Button>
            <Button secondary tool small icon="fa-solid fa-history" :disabled="app.taskId || app.runState === 'stopped'" v-tooltip="$t('app.backups.backups.restoreTooltip')" @click="onRestore(backup)"></Button>
          </ButtonGroup>
        </div>
      </template>
    </TableView>

    <br/>

    <div v-if="lastTask.active">
      <ProgressBar :value="lastTask.percent" :busy="true" />
      <div>{{ lastTask.message }}</div>
      <br/>
    </div>

    <div class="button-bar">
      <Button danger @click="onStopBackup()" v-if="lastTask.active" :loading="stopBackupBusy" :disabled="stopBackupBusy">{{ $t('backups.listing.stopTask') }}</Button>
      <Button @click="onStartBackup()" v-else :loading="startBackupBusy" :disabled="startBackupBusy || app.error">{{ $t('app.backups.backups.createBackupAction') }}</Button>
    </div>
  </div>
</template>