Add app configure backups view

2025-02-26 17:22:28 +01:00
parent d153a734cb
commit 2dea8309a7
3 changed files with 153 additions and 1 deletions
@@ -0,0 +1,128 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, watch, onMounted } from 'vue';
+import { Icon, Button, Switch, TableView, ButtonGroup } from 'pankow';
+import { prettyLongDate } from 'pankow/utils';
+import AppsModel from '../../models/AppsModel.js';
+
+const appsModel = AppsModel.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 createBusy = ref(false);
+const importBusy = ref(false);
+const autoBackupsEnabled = ref(false);
+const backups = ref([]);
+
+watch(autoBackupsEnabled, async (newValue) => {
+  const [error] = await appsModel.configure(props.app.id, 'automatic_backup', { enable: newValue });
+  if (error) return console.error(error);
+});
+
+async function onCreate() {
+  createBusy.value = true;
+  const [error] = await appsModel.backup(props.app.id);
+  if (error) return console.error(error);
+
+  setTimeout(() => createBusy.value = false, 2000);
+}
+
+function getDownloadLink(backup) {
+  const accessToken = localStorage.token;
+  const origin = import.meta.env.VITE_API_ORIGIN || window.location.origin;
+
+  return `${origin}/api/v1/apps/${props.app.id}/backups/${backup.id}/download?access_token=${accessToken}`;
+}
+
+async function refresh() {
+  const [error, result] = await appsModel.backups(props.app.id);
+  if (error) return console.error(error);
+
+  backups.value = result;
+}
+
+onMounted(async () => {
+  await refresh();
+  busy.value = false;
+
+  autoBackupsEnabled.value = props.app.enableBackup;
+});
+
+</script>
+
+<template>
+  <div>
+    <label>{{ $t('app.backups.backups.title') }}</label>
+    <p>{{ $t('app.backups.backups.description') }}</p>
+
+    <br/>
+
+    <TableView :model="backups" :columns="columns" :busy="busy">
+      <template #preserveSecs="backup">
+        <Icon icon="fa-solid fa-archive" v-show="backup.preseveSecs === -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/>
+
+    <p class="has-error" v-if="errorMessage">{{ errorMessage }}</p>
+    <Button @click="onCreate()" :loading="createBusy" :disabled="createBusy || app.taskId || app.error || app.runState === 'stopped'" tooltip-enable="app.error || app.taskId || app.runState === 'stopped'" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'Task active' : (app.runState === 'stopped' ? 'App is not running' : ''))">{{ $t('app.backups.backups.createBackupAction') }}</Button>
+
+    <hr/>
+
+    <label>{{ $t('app.backups.import.title') }}</label>
+    <p>{{ $t('app.backups.import.description') }}</p>
+
+    <Button @click="onImport()" :loading="importBusy" :disabled="importBusy || app.taskId || app.runState === 'stopped'" tooltip-enable="app.taskId" uib-tooltip="App is not running">{{ $t('app.backups.backups.importAction') }}</Button>
+
+    <hr/>
+
+    <label>{{ $t('app.backups.auto.title') }}</label>
+    <p v-html="$t('app.backups.auto.description', { backupLink: '/#/backups' })"></p>
+    <p class="text-success" v-if="autoBackupsEnabled">{{ $t('app.backups.auto.enabled') }}</p>
+    <p class="text-danger" v-else>{{ $t('app.backups.auto.disabled') }}</p>
+
+    <Switch v-model="autoBackupsEnabled" :label="$t(autoBackupsEnabled ? 'app.backups.auto.disableAction' : 'app.backups.auto.enableAction')"/>
+  </div>
+</template>