Split backup site config and contents

dashboard/src/components/BackupSiteConfigDialog.vue

@@ -1,16 +1,14 @@
 <script setup>
 
 import { ref, useTemplateRef } from 'vue';
-import { Checkbox, Radiobutton, MultiSelect, MaskedInput, Dialog, FormGroup, TextInput } from '@cloudron/pankow';
+import { MaskedInput, Dialog, FormGroup, TextInput } from '@cloudron/pankow';
 import { prettyBinarySize } from '@cloudron/pankow/utils';
 import { s3like } from  '../utils.js';
-import AppsModel from '../models/AppsModel.js';
 import BackupSitesModel from '../models/BackupSitesModel.js';
 import SystemModel from '../models/SystemModel.js';
 
 const emit = defineEmits([ 'success' ]);
 
-const appsModel = AppsModel.create();
 const backupSitesModel = BackupSitesModel.create();
 const systemModel = SystemModel.create();
 
@@ -29,10 +27,6 @@ const uploadPartSize = ref(0);
 const syncConcurrency = ref(0);
 const downloadConcurrency = ref(0);
 const copyConcurrency = ref(0);
-const includeExclude = ref('everything'); // or include, exclude
-const contentOptions = ref([]);
-const contentInclude = ref([]);
-const contentExclude = ref([]);
 
 const accessKeyId = ref('');
 const secretAccessKey = ref('');
@@ -76,29 +70,6 @@ async function onSubmit() {
     return console.error(error);
   }
 
-  [error] = await backupSitesModel.setEnableForUpdates(site.value.id, enableForUpdates.value);
-  if (error) {
-    formError.value.generic = error.body ? error.body.message : 'Internal error';
-    busy.value = false;
-    return console.error(error);
-  }
-
-  let contents;
-  if (includeExclude.value === 'everything') {
-    contents = null;
-  } else if (includeExclude.value === 'exclude') {
-    contents = { exclude: contentExclude.value };
-  } else if (includeExclude.value === 'include' && contentInclude.value.length) {
-    contents = { include: contentInclude.value };
-  }
-
-  [error] = await backupSitesModel.setContents(site.value.id, contents);
-  if (error) {
-    formError.value.generic = error.body ? error.body.message : 'Internal error';
-    busy.value = false;
-    return console.error(error);
-  }
-
   const limits = {
     memoryLimit: parseInt(memoryLimit.value),
     uploadPartSize: parseInt(uploadPartSize.value),
@@ -155,33 +126,6 @@ defineExpose({
 
     await getMemory();
 
-    const [error, result] = await appsModel.list();
-    if (error) return console.error(error);
-
-    contentOptions.value = [{
-      id: 'box',
-      label: 'Platform',
-    }];
-
-    result.forEach(a => {
-      contentOptions.value.push({
-        id: a.id,
-        label: `${a.label || a.fqdn} - ${a.manifest.title}`,
-      });
-    });
-
-    if (t.contents !== null) {
-      if (t.contents.exclude) {
-        includeExclude.value = 'exclude';
-        contentExclude.value = t.contents.exclude;
-      } else if (t.contents.include) {
-        includeExclude.value = 'include';
-        contentInclude.value = t.contents.include;
-      }
-    } else {
-      includeExclude.value = 'everything';
-    }
-
     dialog.value.open();
   }
 });
@@ -210,24 +154,6 @@ defineExpose({
               <TextInput id="backupSiteNameInput" v-model="name" required/>
             </FormGroup>
 
-            <FormGroup>
-              <label>{{  $t('backups.configureBackupStorage.backupContents.title') }}</label>
-              <div>{{ $t('backups.configureBackupStorage.backupContents.description') }}</div>
-              <div style="padding-top: 10px">
-                <Radiobutton v-model="includeExclude" value="everything" :label="$t('backups.configureBackupStorage.backupContents.everything')"/>
-                <Radiobutton v-model="includeExclude" value="exclude" :label="$t('backups.configureBackupStorage.backupContents.excludeSelected')"/>
-                <MultiSelect v-model="contentExclude" v-if="includeExclude === 'exclude'" :options="contentOptions" :search-threshold="10" option-key="id" style="margin: 6px 0 6px 25px;"/>
-                <Radiobutton v-model="includeExclude" value="include" :label="$t('backups.configureBackupStorage.backupContents.includeOnlySelected')"/>
-                <MultiSelect v-model="contentInclude" v-if="includeExclude === 'include'" :options="contentOptions" :search-threshold="10" option-key="id" style="margin: 6px 0 6px 25px;"/>
-              </div>
-            </FormGroup>
-
-            <FormGroup>
-              <label>{{ $t('backups.configureBackupStorage.automaticUpdates.title') }}</label>
-              <div description>{{ $t('backups.configureBackupStorage.automaticUpdates.description') }}</div>
-              <Checkbox v-model="enableForUpdates" :label="$t('backups.configureBackupStorage.useForUpdates')" />
-            </FormGroup>
-
             <FormGroup v-if="provider === 'sshfs'">
               <label for="mountOptionUserInput">{{ $t('backups.configureBackupStorage.user') }}</label>
               <TextInput id="mountOptionUserInput" v-model="mountOptionUser" required />

dashboard/src/components/BackupSiteContentDialog.vue

@@ -0,0 +1,138 @@
+<script setup>
+
+import { ref, useTemplateRef } from 'vue';
+import { Checkbox, Radiobutton, MultiSelect, Dialog, FormGroup } from '@cloudron/pankow';
+import AppsModel from '../models/AppsModel.js';
+import BackupSitesModel from '../models/BackupSitesModel.js';
+
+const emit = defineEmits([ 'success' ]);
+
+const appsModel = AppsModel.create();
+const backupSitesModel = BackupSitesModel.create();
+
+const dialog = useTemplateRef('dialog');
+const site = ref({});
+const provider = ref('');
+const formError = ref({});
+const busy = ref(false);
+const enableForUpdates = ref(false);
+const includeExclude = ref('everything'); // or include, exclude
+const contentOptions = ref([]);
+const contentInclude = ref([]);
+const contentExclude = ref([]);
+
+async function onSubmit() {
+  busy.value = true;
+
+  let [error] = await backupSitesModel.setEnableForUpdates(site.value.id, enableForUpdates.value);
+  if (error) {
+    formError.value.generic = error.body ? error.body.message : 'Internal error';
+    busy.value = false;
+    return console.error(error);
+  }
+
+  let contents;
+  if (includeExclude.value === 'everything') {
+    contents = null;
+  } else if (includeExclude.value === 'exclude') {
+    contents = { exclude: contentExclude.value };
+  } else if (includeExclude.value === 'include' && contentInclude.value.length) {
+    contents = { include: contentInclude.value };
+  }
+
+  [error] = await backupSitesModel.setContents(site.value.id, contents);
+  if (error) {
+    formError.value.generic = error.body ? error.body.message : 'Internal error';
+    busy.value = false;
+    return console.error(error);
+  }
+
+  emit('success');
+  dialog.value.close();
+  busy.value = false;
+}
+
+defineExpose({
+  async open(t) {
+    t = JSON.parse(JSON.stringify(t)); // make a copy
+
+    formError.value = {};
+    busy.value = false;
+    site.value = t;
+    provider.value = t.provider;
+
+    enableForUpdates.value = !!t.enableForUpdates;
+
+    const [error, result] = await appsModel.list();
+    if (error) return console.error(error);
+
+    contentOptions.value = [{
+      id: 'box',
+      label: 'Platform',
+    }];
+
+    result.forEach(a => {
+      contentOptions.value.push({
+        id: a.id,
+        label: `${a.label || a.fqdn} - ${a.manifest.title}`,
+      });
+    });
+
+    if (t.contents !== null) {
+      if (t.contents.exclude) {
+        includeExclude.value = 'exclude';
+        contentExclude.value = t.contents.exclude;
+      } else if (t.contents.include) {
+        includeExclude.value = 'include';
+        contentInclude.value = t.contents.include;
+      }
+    } else {
+      includeExclude.value = 'everything';
+    }
+
+    dialog.value.open();
+  }
+});
+
+</script>
+
+<template>
+  <Dialog ref="dialog"
+    :title="'Configure Backup Contents'"
+    :reject-label="$t('main.dialog.close')"
+    :reject-active="!busy"
+     reject-style="secondary"
+    :confirm-label="$t('main.dialog.save')"
+    :confirm-busy="busy"
+     confirm-style="primary"
+    @confirm="onSubmit()"
+  >
+    <div>
+      <div>
+        <form @submit.prevent="onSubmit()" autocomplete="off" ref="form">
+          <fieldset :disabled="busy">
+            <input style="display: none;" type="submit"/>
+
+            <FormGroup>
+              <label>{{  $t('backups.configureBackupStorage.backupContents.title') }}</label>
+              <div>{{ $t('backups.configureBackupStorage.backupContents.description') }}</div>
+              <div style="padding-top: 10px">
+                <Radiobutton v-model="includeExclude" value="everything" :label="$t('backups.configureBackupStorage.backupContents.everything')"/>
+                <Radiobutton v-model="includeExclude" value="exclude" :label="$t('backups.configureBackupStorage.backupContents.excludeSelected')"/>
+                <MultiSelect v-model="contentExclude" v-if="includeExclude === 'exclude'" :options="contentOptions" :search-threshold="10" option-key="id" style="margin: 6px 0 6px 25px;"/>
+                <Radiobutton v-model="includeExclude" value="include" :label="$t('backups.configureBackupStorage.backupContents.includeOnlySelected')"/>
+                <MultiSelect v-model="contentInclude" v-if="includeExclude === 'include'" :options="contentOptions" :search-threshold="10" option-key="id" style="margin: 6px 0 6px 25px;"/>
+              </div>
+            </FormGroup>
+
+            <FormGroup>
+              <label>{{ $t('backups.configureBackupStorage.automaticUpdates.title') }}</label>
+              <div description>{{ $t('backups.configureBackupStorage.automaticUpdates.description') }}</div>
+              <Checkbox v-model="enableForUpdates" :label="$t('backups.configureBackupStorage.useForUpdates')" />
+            </FormGroup>
+          </fieldset>
+        </form>
+      </div>
+    </div>
+  </Dialog>
+</template>

dashboard/src/views/BackupSitesView.vue

@@ -11,7 +11,8 @@ import Section from  '../components/Section.vue';
 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 BackupSiteContentDialog from  '../components/BackupSiteContentDialog.vue';
+import BackupSiteConfigDialog from  '../components/BackupSiteConfigDialog.vue';
 import SystemBackupList from  '../components/SystemBackupList.vue';
 import { TASK_TYPES } from '../constants.js';
 import BackupSitesModel from '../models/BackupSitesModel.js';
@@ -35,9 +36,9 @@ function onAdd() {
   backupSiteAddDialog.value.open();
 }
 
-const backupSiteEditDialog = useTemplateRef('backupSiteEditDialog');
-function onEdit(site) {
-  backupSiteEditDialog.value.open(site);
+const backupSiteContentDialog = useTemplateRef('backupSiteContentDialog');
+function onEditContent(site) {
+  backupSiteContentDialog.value.open(site);
 }
 
 const backupScheduleDialog = useTemplateRef('backupScheduleDialog');
@@ -45,6 +46,11 @@ function onEditSchedule(site) {
   backupScheduleDialog.value.open(site);
 }
 
+const backupSiteConfigDialog = useTemplateRef('backupSiteConfigDialog');
+function onEditConfig(site) {
+  backupSiteConfigDialog.value.open(site);
+}
+
 function prettyBackupSchedule(pattern) {
   if (!pattern) return '';
 
@@ -148,13 +154,18 @@ const actionMenuModel = ref([]);
 const actionMenuElement = useTemplateRef('actionMenuElement');
 function onActionMenu(site, event) {
   actionMenuModel.value = [{
-    icon: 'fa-solid fa-pencil-alt',
-    label: t('main.dialog.edit'),
-    action: onEdit.bind(null, site),
+    icon: 'fa-solid fa-box-open',
+    // TODO translate
+    label: 'Content',
+    action: onEditContent.bind(null, site),
   }, {
     icon: 'fa-solid fa-clock',
     label: t('backups.schedule.title'),
     action: onEditSchedule.bind(null, site),
+  }, {
+    icon: 'fa-solid fa-pencil-alt',
+    label: 'Config',
+    action: onEditConfig.bind(null, site),
   }, {
     separator: true
   }, {
@@ -256,7 +267,8 @@ onMounted(async () => {
     <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
     <BackupSiteAddDialog ref="backupSiteAddDialog" @success="refresh()"/>
-    <BackupSiteEditDialog ref="backupSiteEditDialog" @success="refresh()"/>
+    <BackupSiteContentDialog ref="backupSiteContentDialog" @success="refresh()"/>
+    <BackupSiteConfigDialog ref="backupSiteConfigDialog" @success="refresh()"/>
     <BackupScheduleDialog ref="backupScheduleDialog" @success="refresh()"/>
 
     <Section :title="$t('backup.sites.title')">