Add backup target edit dialog

2025-08-06 16:26:00 +02:00
parent 8ba56f8b66
commit bf8f8d32a9
4 changed files with 104 additions and 18 deletions
@@ -0,0 +1,86 @@
+<script setup>
+
+import { ref, useTemplateRef, watch } from 'vue';
+import { Dialog, FormGroup, TextInput, PasswordInput, Button, Checkbox } from '@cloudron/pankow';
+import { prettyBinarySize } from '@cloudron/pankow/utils';
+import { REGIONS_CONTABO, REGIONS_VULTR, REGIONS_IONOS, REGIONS_OVH, REGIONS_LINODE, REGIONS_SCALEWAY, REGIONS_WASABI } from '../constants.js';
+import { mountlike, s3like } from  '../utils.js';
+import BackupProviderForm from './BackupProviderForm.vue';
+import BackupTargetsModel from '../models/BackupTargetsModel.js';
+import SystemModel from '../models/SystemModel.js';
+
+const emit = defineEmits([ 'success' ]);
+
+const backupTargetsModel = BackupTargetsModel.create();
+const systemModel = SystemModel.create();
+
+const dialog = useTemplateRef('dialog');
+const target = ref({});
+const formError = ref({});
+const busy = ref(false);
+
+async function onSubmit() {
+  emit('success');
+  dialog.value.close();
+}
+
+defineExpose({
+  async open(t) {
+    formError.value = {};
+    busy.value = false;
+    target.value = t;
+
+    console.log(t)
+
+    dialog.value.open();
+  }
+});
+
+</script>
+
+<template>
+  <Dialog ref="dialog"
+    :title="$t('backups.configureBackupStorage.title')"
+    :reject-label="$t('main.dialog.close')"
+     reject-style="secondary"
+    :confirm-label="$t('main.dialog.save')"
+     confirm-style="primary"
+    @confirm="onSubmit()"
+  >
+    <div>
+      <div>
+        <div class="info-row">
+          <div class="info-label">{{ $t('backups.configureBackupStorage.provider') }}</div>
+          <div class="info-value">{{ target.provider }}</div>
+        </div>
+        <div class="info-row" v-if="target.provider !== 'noop'">
+          <div class="info-label">{{ $t('backups.configureBackupStorage.format') }}</div>
+          <div class="info-value">{{ target.format }} <i v-if="target.encrypted" class="fa-solid fa-lock"></i></div>
+        </div>
+        <div class="info-row" v-if="target.provider !== 'noop'">
+          <div class="info-label">{{ $t('backups.location.location') }}</div>
+          <div class="info-value">
+            <span v-if="mountlike(target.provider) || target.provider === 'filesystem'">
+              <span v-if="target.provider === 'filesystem'">{{ target.config.backupDir }}{{ (target.config.prefix ? `/${target.config.prefix}` : '') }}</span>
+              <span v-if="target.provider === 'disk' || target.provider === 'ext4' || target.provider === 'xfs' || target.provider === 'mountpoint'">{{ target.config.mountOptions.diskPath || target.config.mountPoint }}{{ (target.config.prefix ? '/' : '') + target.config.prefix }}</span>
+              <span v-if="target.provider === 'cifs' || target.provider === 'nfs' || target.provider === 'sshfs'">{{ target.config.mountOptions.host }}:{{ target.config.mountOptions.remoteDir }}{{ (target.prefix ? '/' : '') + target.config.prefix }}</span>
+            </span>
+
+            <span v-if="target.provider !== 's3' && target.provider !== 'minio' && (s3like(target.provider) || target.provider === 'gcs')">{{ target.config.bucket + (target.config.prefix ? '/' : '') + target.config.prefix }}</span>
+            <span v-if="target.provider === 's3'">{{ target.config.region + '   ' + target.config.bucket + (target.config.prefix ? '/' : '') + target.config.prefix }}</span>
+            <span v-if="target.provider === 'minio'">{{ target.config.endpoint + '   ' + target.config.bucket + (target.config.prefix ? '/' : '') + target.config.prefix }}</span>
+          </div>
+        </div>
+        <div class="info-row" v-if="target.provider !== 'minio' && target.config?.endpoint">
+          <div class="info-label">{{ $t('backups.location.endpoint') }}</div>
+          <div class="info-value">{{ target.config.endpoint || target.config.region }}</div>
+        </div>
+        <div class="info-row" v-if="target.encrypted">
+          <!-- TODO translate -->
+          <div class="info-label">Encryption Password Hint</div>
+          <div class="info-value">{{ target.encryptionPasswordHint }}</div>
+        </div>
+      </div>
+    </div>
+  </Dialog>
+</template>