Move platform backup listing to backup sites view

dashboard/src/components/PlatformBackupList.vue

@@ -0,0 +1,356 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted, useTemplateRef } from 'vue';
+import { Button, ClipboardAction, Menu, FormGroup, TextInput, Checkbox, TableView, Dialog } from '@cloudron/pankow';
+import { prettyLongDate } from '@cloudron/pankow/utils';
+import { TASK_TYPES } from '../constants.js';
+import Section from  '../components/Section.vue';
+import BackupsModel from '../models/BackupsModel.js';
+import BackupSitesModel from '../models/BackupSitesModel.js';
+import AppsModel from '../models/AppsModel.js';
+import TasksModel from '../models/TasksModel.js';
+import DashboardModel from '../models/DashboardModel.js';
+import { download } from '../utils.js';
+
+const backupsModel = BackupsModel.create();
+const backupSitesModel = BackupSitesModel.create();
+const appsModel = AppsModel.create();
+const tasksModel = TasksModel.create();
+const dashboardModel = DashboardModel.create();
+
+const columns = {
+  preserveSecs: {
+    label: '',
+    icon: 'fa-solid fa-archive',
+    width: '40px',
+    sort: true
+  },
+  packageVersion: {
+    label: t('backups.listing.version'),
+    sort: true,
+    hideMobile: true,
+  },
+  site: {
+    label: t('backup.target.label'),
+    sort(a, b) {
+      return b.name <= a.name ? 1 : -1;
+    },
+  },
+  content: {
+    label: t('backups.listing.contents'),
+    sort: false,
+    hideMobile: true,
+  },
+  creationTime: {
+    label: t('main.table.date'),
+    sort: true
+  },
+  actions: {}
+};
+
+const actionMenuModel = ref([]);
+const actionMenuElement = useTemplateRef('actionMenuElement');
+function onActionMenu(backup, event) {
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-circle-info',
+    label: t('backups.archives.info'),
+    action: onInfo.bind(null, backup),
+  }, {
+    icon: 'fa-solid fa-pencil-alt',
+    label: t('main.action.edit'),
+    action: onEdit.bind(null, backup),
+  }, {
+    icon: 'fa-solid fa-file-alt',
+    label: t('backups.listing.tooltipDownloadBackupConfig'),
+    action: onDownloadConfig.bind(null, backup),
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
+const busy = ref(true);
+const backups = ref([]);
+const taskLogsMenu = ref([]);
+const trackingBackupTask = ref({});
+const trackingCleanupTask = ref({});
+const sites = ref([]);
+const backupBusy = ref(false);
+const sitesMenu =  ref([]);
+
+async function waitForBackupTask(id) {
+  if (!id || (trackingBackupTask.value.id && trackingBackupTask.value.id !== id)) return;
+
+  const [error, result] = await tasksModel.get(id);
+  if (error) return console.error(error);
+
+  trackingBackupTask.value = result;
+
+  // task done, refresh menu
+  if (!result.active) {
+    trackingBackupTask.value = {};
+    refreshBackups();
+    refreshTasks();
+    return;
+  }
+
+  setTimeout(waitForBackupTask.bind(null, id), 2000);
+}
+
+async function waitForCleanupTask(id) {
+  if (!id || (trackingCleanupTask.value.id && trackingCleanupTask.value.id !== id)) return;
+
+  const [error, result] = await tasksModel.get(id);
+  if (error) return console.error(error);
+
+  trackingCleanupTask.value = result;
+
+  // task done, refresh menu
+  if (!result.active) {
+    trackingCleanupTask.value = {};
+    refreshBackups();
+    refreshTasks();
+    return;
+  }
+
+  setTimeout(waitForCleanupTask.bind(null, id), 2000);
+}
+
+async function refreshTasks() {
+  let tasks = [];
+
+  for (const site of sites.value) {
+    const [error, results] = await tasksModel.getByType(TASK_TYPES.TASK_FULL_BACKUP_PREFIX + site.id);
+    if (error) return console.error(error);
+
+    results.forEach(r => r.siteName = site.name);
+    tasks = tasks.concat(results);
+
+    // if last task is currently active, start polling
+    if (results[0] && results[0].active) waitForBackupTask(results[0].id);
+  }
+
+  for (const site of sites.value) {
+    const [error, results] = await tasksModel.getByType(TASK_TYPES.TASK_CLEAN_BACKUPS_PREFIX + site.id);
+    if (error) return console.error(error);
+
+    results.forEach(r => r.siteName = site.name);
+    tasks = tasks.concat(results);
+
+    // if last task is currently active, start polling
+    if (results[0] && results[0].active) waitForCleanupTask(results[0].id);
+  }
+
+
+  // limit to last 10
+  tasks.sort((a, b) => b.creationTime < a.creationTime ? -1 : 1);
+  taskLogsMenu.value = tasks.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)} - ${t.siteName} ${t.type.indexOf(TASK_TYPES.TASK_CLEAN_BACKUPS_PREFIX) === 0 ? 'cleanup' : 'backup'}`,
+      action: () => { window.open(`/logs.html?taskId=${t.id}`); }
+    };
+  });
+}
+
+async function refreshBackups() {
+  const [error, result] = await backupsModel.list();
+  if (error) return console.error(error);
+
+  result.forEach(function (backup) {
+    backup.site = sites.value.find(t => t.id === backup.siteId);
+
+    // filled when opening the info dialog - we only show apps for the moment
+    backup.contents = backup.dependsOn.filter(c => c.indexOf('app_') === 0).map(c => {
+      return {
+        id: c,
+        label: null,
+        fqdn: null
+      };
+    });
+  });
+
+  backups.value = result;
+}
+
+async function onDownloadConfig(backup) {
+  const [error, dashboardConfig] = await dashboardModel.config();
+  if (error) return console.error(error);
+
+  const [backupConfigError, backupConfig] = await backupSitesModel.generateBackupConfig(backup);
+  if (backupConfigError) return console.error(backupConfigError);
+
+  const filename = `${dashboardConfig.adminFqdn}-backup-config-${(new Date(backup.creationTime)).toISOString().split('T')[0]}.json`;
+  download(filename, JSON.stringify(backupConfig, null, 4));
+}
+
+// backups info dialog
+const infoDialog = useTemplateRef('infoDialog');
+const infoBackup = ref({ contents: [] });
+async function onInfo(backup) {
+  infoBackup.value = backup;
+  infoDialog.value.open();
+
+  // amend detailed app info
+  const appsById = {};
+
+  const [appsError, apps] = await appsModel.list();
+  if (appsError) console.error('Failed to get apps list:', appsError);
+
+  (apps || []).forEach(function (app) {
+    appsById[app.id] = app;
+  });
+
+  infoBackup.value.contents.forEach(function (content) {
+    const match = content.id.match(/app_(.*?)_.*/); // *? means non-greedy
+    if (!match) return;
+    const app = appsById[match[1]];
+    if (app) {
+      content.id = app.id;
+      content.label = app.label;
+      content.fqdn = app.fqdn;
+    } else {
+      content.id = match[1];
+    }
+  });
+}
+
+// edit backups dialog
+const editDialog = useTemplateRef('editDialog');
+const editBackupError = ref('');
+const editBackupBusy = ref(false);
+const editBackupId = ref('');
+const editBackupLabel = ref('');
+const editBackupPersist = ref(false);
+function onEdit(backup) {
+  editBackupError.value = '';
+  editBackupBusy.value = false;
+  editBackupId.value = backup.id;
+  editBackupLabel.value = backup.label;
+  editBackupPersist.value = backup.preserveSecs === -1;
+  editDialog.value.open();
+}
+
+async function onEditSubmit() {
+  editBackupBusy.value = true;
+
+  const [error] = await backupsModel.update(editBackupId.value, editBackupLabel.value, editBackupPersist.value ? -1 : 0);
+  if (error) {
+    return console.error(error);
+  }
+
+  await refreshBackups();
+  editBackupBusy.value = false;
+  editDialog.value.close();
+}
+
+onMounted(async () => {
+  const [error, result] = await backupSitesModel.list();
+  if (error) return console.error(error);
+
+  sites.value = result;
+
+  await refreshBackups();
+
+  busy.value = false;
+
+  await refreshTasks();
+});
+
+</script>
+
+<template>
+  <Section :title="$t('backups.listing.title')">
+    <Menu ref="actionMenuElement" :model="actionMenuModel" />
+
+    <Dialog ref="infoDialog"
+      :title="$t('backups.backupDetails.title')"
+      :reject-label="$t('main.dialog.close')"
+    >
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupDetails.id') }}</div>
+        <div class="info-value">{{ infoBackup.id }}</div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupEdit.label') }}</div>
+        <div class="info-value">{{ infoBackup.label }}</div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
+        <div class="info-value">
+          <div>
+            {{ infoBackup.remotePath }}
+            <ClipboardAction plain :value="infoBackup.remotePath"/>
+          </div>
+        </div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupDetails.date') }}</div>
+        <div class="info-value">{{ prettyLongDate(infoBackup.creationTime) }}</div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupDetails.version') }}</div>
+        <div class="info-value">{{ infoBackup.packageVersion }}</div>
+      </div>
+
+      <br/>
+
+      <p class="text-muted">{{ $t('backups.backupDetails.list', { appCount: infoBackup.contents.length }) }}:</p>
+      <div v-for="content in infoBackup.contents" :key="content.id">
+        <a v-if="content.fqdn" :href="`/#/app/${content.id}/backups`">{{ content.label || content.fqdn }}</a>
+        <a v-else :href="`/#/system-eventlog?search=${content.id}`">{{ content.id }}</a>
+      </div>
+    </Dialog>
+
+    <Dialog ref="editDialog"
+      :title="$t('backups.backupEdit.title')"
+      :reject-label="editBackupBusy ? '' : $t('main.dialog.cancel')"
+       reject-style="secondary"
+      :confirm-label="$t('main.dialog.save')"
+      :confirm-busy="editBackupBusy"
+      @confirm="onEditSubmit()"
+    >
+      <p class="has-error text-center" v-show="editBackupError">{{ editBackupError }}</p>
+
+      <form @submit.prevent="onEditSubmit()" autocomplete="off">
+        <fieldset>
+          <FormGroup>
+            <label for="backupLabelInput">{{ $t('backups.backupEdit.label') }}</label>
+            <TextInput id="backupLabelInput" v-model="editBackupLabel" />
+          </FormGroup>
+
+          <Checkbox v-model="editBackupPersist" :label="$t('backups.backupEdit.preserved.description')" />
+          <!-- <sup><a popover-placement="top-right" popover-trigger="outsideClick" uib-popover="{{ 'backups.backupEdit.preserved.tooltip' | tr: { appsLength: editBackup.backup.contents.length} }}"><i class="fa fa-question-circle"></i></a></sup> -->
+        </fieldset>
+      </form>
+    </Dialog>
+
+    <template #header-buttons>
+      <Button tool secondary :menu="taskLogsMenu" :disabled="!taskLogsMenu.length">{{ $t('main.action.logs') }}</Button>
+    </template>
+
+    <TableView :columns="columns" :model="backups" :busy="busy" :placeholder="$t('backups.listing.noBackups')">
+      <template #preserveSecs="backup">
+        <i class="fas fa-archive" v-show="backup.preserveSecs === -1" v-tooltip="$t('backups.listing.tooltipPreservedBackup')"></i>
+      </template>
+
+      <template #creationTime="backup">{{ prettyLongDate(backup.creationTime) }} <b v-show="backup.label">({{ backup.label }})</b></template>
+
+      <template #content="backup">
+        <span v-if="backup.contents.length">{{ $t('backups.listing.appCount', { appCount: backup.contents.length }) }}</span>
+        <span v-else>{{ $t('backups.listing.noApps') }}</span>
+      </template>
+
+      <template #site="backup">{{ backup.site.name }}</template>
+
+      <template #actions="backup">
+        <div style="text-align: right;">
+          <Button tool plain secondary @click.capture="onActionMenu(backup, $event)" icon="fa-solid fa-ellipsis" />
+        </div>
+      </template>
+    </TableView>
+  </Section>
+</template>

dashboard/src/views/BackupSitesView.vue

@@ -12,6 +12,7 @@ import StateLED from  '../components/StateLED.vue';
 import BackupScheduleDialog from  '../components/BackupScheduleDialog.vue';
 import BackupSiteAddDialog from  '../components/BackupSiteAddDialog.vue';
 import BackupSiteEditDialog from  '../components/BackupSiteEditDialog.vue';
+import PlatformBackupList from  '../components/PlatformBackupList.vue';
 import { TASK_TYPES } from '../constants.js';
 import BackupSitesModel from '../models/BackupSitesModel.js';
 import ProfileModel from '../models/ProfileModel.js';
@@ -283,9 +284,9 @@ onMounted(async () => {
               {{ $t('backups.schedule.retentionPolicy') }}: <b>{{ prettyBackupRetention(site.retention) }}</b>
             </div>
             <div class="backup-site-task">
-              <div v-if="!site.task">Last backup: <b>Never</b></div>
+              <div v-if="!site.task">Last run: <b>Never</b></div>
-              <div v-if="site.task && site.task.success">Last backup: <b>{{ prettyLongDate(site.task.ts) }}</b></div>
+              <div v-if="site.task && site.task.success">Last run: <b>{{ prettyLongDate(site.task.ts) }}</b></div>
-              <div v-if="site.task && site.task.error">Last backup error: <a :href="`/logs.html?taskId=${site.task.id}`" target="_blank"><span class="error-label">{{ site.task.error.message }} <Button small plain tool>Logs</Button></span></a></div>
+              <div v-if="site.task && site.task.error">Last run error: <a :href="`/logs.html?taskId=${site.task.id}`" target="_blank"><span class="error-label">{{ site.task.error.message }} <Button small plain tool>Logs</Button></span></a></div>
               <div v-if="site.task && site.task.running">
                 <ProgressBar :busy="true" :show-label="false" :value="site.task.percent" :mode="site.task.percent <= 0 ? 'indeterminate' : null" />
                 <div style="margin-top: 3px; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{ site.task.percent }}% {{ site.task.message }}</div>
@@ -298,6 +299,8 @@ onMounted(async () => {
         </div>
       </div>
     </Section>
+
+    <PlatformBackupList/>
   </div>
 </template>