From bf8f8d32a90e51be8b595c4c87e9043283cfeda3 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 6 Aug 2025 16:26:00 +0200
Subject: [PATCH] Add backup target edit dialog

---
 .../src/components/BackupProviderForm.vue     |  1 -
 ...etDialog.vue => BackupTargetAddDialog.vue} | 21 +++--
 .../src/components/BackupTargetEditDialog.vue | 86 +++++++++++++++++++
 dashboard/src/views/BackupTargetsView.vue     | 14 +--
 4 files changed, 104 insertions(+), 18 deletions(-)
 rename dashboard/src/components/{NewBackupTargetDialog.vue => BackupTargetAddDialog.vue} (95%)
 create mode 100644 dashboard/src/components/BackupTargetEditDialog.vue

diff --git a/dashboard/src/components/BackupProviderForm.vue b/dashboard/src/components/BackupProviderForm.vue
index c908d24b8..9f5ac1373 100644
--- a/dashboard/src/components/BackupProviderForm.vue
+++ b/dashboard/src/components/BackupProviderForm.vue
@@ -77,7 +77,6 @@ async function getBlockDevices() {
 
   if (error) return console.error(error);
 
-  console.log(providerConfig.value)
   // amend label for UI
   result.forEach(d => {
     d.label = d.path;
diff --git a/dashboard/src/components/NewBackupTargetDialog.vue b/dashboard/src/components/BackupTargetAddDialog.vue
similarity index 95%
rename from dashboard/src/components/NewBackupTargetDialog.vue
rename to dashboard/src/components/BackupTargetAddDialog.vue
index 88fe3e05c..44fa36d1c 100644
--- a/dashboard/src/components/NewBackupTargetDialog.vue
+++ b/dashboard/src/components/BackupTargetAddDialog.vue
@@ -226,17 +226,16 @@ defineExpose({
     encryptedFilenames.value = false;
     limits.value = {};
 
-    // ensure we have all required child objects
-    if (!providerConfig.value.mountOptions) providerConfig.value.mountOptions = {};
-
     // some sane defaults
-    if (!limits.value.memoryLimit) limits.value.memoryLimit = 1024 * 1024 * 1024; // 1 GB
-    if (!limits.value.uploadPartSize) limits.value.uploadPartSize = 10 * 1024 * 1024;
-    if (!limits.value.syncConcurrency) limits.value.syncConcurrency = 10;
-    if (!limits.value.downloadConcurrency) limits.value.downloadConcurrency = 10;
-    if (!limits.value.copyConcurrency) limits.value.copyConcurrency = 10;
+    limits.value.memoryLimit = 1024 * 1024 * 1024; // 1 GB
+    limits.value.uploadPartSize = 10 * 1024 * 1024;
+    limits.value.syncConcurrency = 10;
+    limits.value.downloadConcurrency = 10;
+    limits.value.copyConcurrency = 10;
 
+    // ensure we have all required child objects
     // needs translation for UI
+    providerConfig.value.mountOptions = {};
     providerConfig.value.useHardlinks = false;
     providerConfig.value.encryptionPassword = null;
 
@@ -249,13 +248,13 @@ defineExpose({
 </script>
 
 <template>
-  <Dialog ref="dialog" :title="$t('backups.configureBackupStorage.title')">
+  <!-- TODO translate -->
+  <Dialog ref="dialog" title="Add Backup Storage">
     <div>
       <div v-if="step === 'storage'">
         <form @submit.prevent="onSubmit()" autocomplete="off" ref="form">
           <fieldset :disabled="busy">
             <input style="display: none;" type="submit"/>
-            <!-- TODO <div class="warning-label" v-show="oldProvider !== provider || oldFormat !== providerConfig.format">{{ $t('backups.configureBackupStorage.formatChangeNote') }}</div> -->
 
             <FormGroup>
               <!-- TODO translate -->
@@ -337,7 +336,7 @@ defineExpose({
             </FormGroup>
             <FormGroup>
               <!-- TODO translate -->
-              <label for="encryptionPassswordHintInput">Password Hint</label>
+              <label for="encryptionPassswordHintInput">Encryption Password Hint</label>
               <TextInput id="encryptionPassswordHintInput" v-model="encryptionPasswordHint" />
             </FormGroup>
             <Checkbox v-if="format === 'rsync'" v-model="encryptedFilenames" :label="$t('backups.configureBackupStorage.encryptFilenames')"/>
diff --git a/dashboard/src/components/BackupTargetEditDialog.vue b/dashboard/src/components/BackupTargetEditDialog.vue
new file mode 100644
index 000000000..6250314c2
--- /dev/null
+++ b/dashboard/src/components/BackupTargetEditDialog.vue
@@ -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>
diff --git a/dashboard/src/views/BackupTargetsView.vue b/dashboard/src/views/BackupTargetsView.vue
index e94075ce1..4e95d6e91 100644
--- a/dashboard/src/views/BackupTargetsView.vue
+++ b/dashboard/src/views/BackupTargetsView.vue
@@ -9,7 +9,8 @@ import { Button, Menu, TableView, InputDialog } from '@cloudron/pankow';
 import Section from  '../components/Section.vue';
 import StateLED from  '../components/StateLED.vue';
 import BackupScheduleDialog from  '../components/BackupScheduleDialog.vue';
-import NewBackupTargetDialog from  '../components/NewBackupTargetDialog.vue';
+import BackupTargetAddDialog from  '../components/BackupTargetAddDialog.vue';
+import BackupTargetEditDialog from  '../components/BackupTargetEditDialog.vue';
 import BackupTargetsModel from '../models/BackupTargetsModel.js';
 import ProfileModel from '../models/ProfileModel.js';
 
@@ -43,13 +44,14 @@ const columns = {
   actions: {}
 };
 
-const newBackupTargetDialog = useTemplateRef('newBackupTargetDialog');
+const backupTargetAddDialog = useTemplateRef('backupTargetAddDialog');
 function onAdd() {
-  newBackupTargetDialog.value.open();
+  backupTargetAddDialog.value.open();
 }
 
+const backupTargetEditDialog = useTemplateRef('backupTargetEditDialog');
 function onEdit(target) {
-  console.log(target);
+  backupTargetEditDialog.value.open(target);
 }
 
 const backupScheduleDialog = useTemplateRef('backupScheduleDialog');
@@ -162,7 +164,8 @@ onMounted(async () => {
   <div class="content">
     <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
-    <NewBackupTargetDialog ref="newBackupTargetDialog" @success="refresh()"/>
+    <BackupTargetAddDialog ref="backupTargetAddDialog" @success="refresh()"/>
+    <BackupTargetEditDialog ref="backupTargetEditDialog" @success="refresh()"/>
     <BackupScheduleDialog ref="backupScheduleDialog" @success="refresh()"/>
 
     <!-- TODO translate -->
@@ -170,7 +173,6 @@ onMounted(async () => {
       <template #header-buttons>
         <Button @click="onAdd()" icon="fa-solid fa-plus"> Add Storage</Button>
       </template>
-      <p>TODO Explain what backup targets are and what primary/secondary is</p>
 
       <TableView :columns="columns" :model="targets" :busy="busy">
         <template #status="target">