Make basic backup target add and edit work

dashboard/src/views/BackupTargetsView.vue

@@ -1,12 +1,15 @@
 <script setup>
 
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
 import { ref, onMounted, useTemplateRef } from 'vue';
 import { marked } from 'marked';
-import { Button } from '@cloudron/pankow';
+import { Button, ButtonGroup, TableView } from '@cloudron/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 BackupTargetDialog from  '../components/BackupTargetDialog.vue';
 import BackupList from  '../components/BackupList.vue';
 import BackupsModel from '../models/BackupsModel.js';
 import BackupTargetsModel from '../models/BackupTargetsModel.js';
@@ -24,9 +27,30 @@ const mountOptions = ref({});
 const mountStatus = ref({});
 const targets = ref([]);
 
-const backupDialog = useTemplateRef('backupDialog');
-function onConfigure() {
-  backupDialog.value.open();
+const columns = {
+  primary: {
+    label: 'Primary',
+    sort: true
+  },
+  provider: {
+    label: 'Provider',
+    sort: true,
+  },
+  label: {
+    label: 'Label',
+    sort: true,
+  },
+  format: {
+    label: 'Format',
+    sort: false,
+    hideMobile: true,
+  },
+  actions: {}
+};
+
+const backupTargetDialog = useTemplateRef('backupTargetDialog');
+function onAddOrEdit(target = null) {
+  backupTargetDialog.value.open(target);
 }
 
 const remountBusy = ref(false);
@@ -80,56 +104,41 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <BackupDialog ref="backupDialog" @success="refresh()"/>
+    <BackupTargetDialog ref="backupTargetDialog" @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>
+    <Section title="Backup Targets">
+      <template #header-buttons>
+        <Button @click="onAddOrEdit()" icon="fa-solid fa-plus"> Add Target</Button>
+      </template>
+      <p>TODO Explain what backup targets are and what primary/secondary is</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>
+      <TableView :columns="columns" :model="targets" :busy="busy">
+        <template #primary="target">
+          <i class="fa-solid fa-check" v-if="target.primary"></i>
+        </template>
 
-      <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>
+        <template #provider="target">
+          {{ target.provider }}
+        </template>
 
-          <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>
+        <template #label="target">
+          {{ target.label }}
+        </template>
 
-      <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>
+        <template #format="target">
+          {{ target.format }}
+        </template>
+
+        <template #actions="target">
+          <div class="table-actions">
+            <ButtonGroup>
+              <Button tool secondary small icon="fa-solid fa-pencil-alt" @click.stop="onAddOrEdit(target)"></Button>
+            </ButtonGroup>
+          </div>
+        </template>
+      </TableView>
     </Section>
 
-    <BackupSchedule :profile="profile"/>
     <BackupList :config="config"/>
   </div>
 </template>