Move update backup target selector into backup target view

dashboard/src/views/BackupTargetsView.vue

@@ -5,8 +5,9 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, Menu, TableView, InputDialog } from '@cloudron/pankow';
+import { Button, Menu, TableView, InputDialog, SingleSelect } from '@cloudron/pankow';
 import Section from  '../components/Section.vue';
+import SettingsItem from '../components/SettingsItem.vue';
 import StateLED from  '../components/StateLED.vue';
 import BackupScheduleDialog from  '../components/BackupScheduleDialog.vue';
 import BackupTargetAddDialog from  '../components/BackupTargetAddDialog.vue';
@@ -91,31 +92,6 @@ async function onRemount(target) {
   target.status.busy = false;
 }
 
-async function refresh() {
-  busy.value = true;
-
-  const [error, result] = await backupTargetsModel.list();
-  if (error) return console.error(error);
-
-  for (const target of result) {
-    target.status = { busy: true, state: '', message: '' };
-  }
-
-  for (const target of result) {
-    const [error, status] = await backupTargetsModel.status(target.id);
-    if (error) {
-      console.error(error);
-      continue;
-    }
-
-    target.status.state = status.state === 'active' ? 'success' : 'danger';
-    target.status.busy = false;
-  }
-
-  targets.value = result;
-  busy.value = false;
-}
-
 const actionMenuModel = ref([]);
 
 const actionMenuElement = useTemplateRef('actionMenuElement');
@@ -149,6 +125,46 @@ function onActionMenu(target, event) {
   actionMenuElement.value.open(event, event.currentTarget);
 }
 
+const primaryTargetId = ref('');
+const primaryTargetChangeBusy = ref(false);
+
+async function onPrimaryTargetChanged(value) {
+  primaryTargetChangeBusy.value = true;
+
+  const [error] = await backupTargetsModel.setPrimary(value);
+  if (error) return console.error(error);
+
+  primaryTargetId.value = value;
+  primaryTargetChangeBusy.value = false;
+}
+
+async function refresh() {
+  busy.value = true;
+
+  const [error, result] = await backupTargetsModel.list();
+  if (error) return console.error(error);
+
+  for (const target of result) {
+    target.status = { busy: true, state: '', message: '' };
+  }
+
+  for (const target of result) {
+    const [error, status] = await backupTargetsModel.status(target.id);
+    if (error) {
+      console.error(error);
+      continue;
+    }
+
+    target.status.state = status.state === 'active' ? 'success' : 'danger';
+    target.status.busy = false;
+  }
+
+  primaryTargetId.value = result.find(t => t.primary)?.id;
+
+  targets.value = result;
+  busy.value = false;
+}
+
 onMounted(async () => {
   const [error, result] = await profileModel.get();
   if (error) return console.error(error);
@@ -201,5 +217,17 @@ onMounted(async () => {
         </template>
       </TableView>
     </Section>
+
+    <Section title="Backup Configuration for Updates">
+      <SettingsItem>
+        <div>
+          <label>Storage</label>
+          <div>For backups created during automatic or manual app and platform updates.</div>
+        </div>
+        <div style="display: flex; align-items: center">
+          <SingleSelect style="min-width: 160px" :disabled="primaryTargetChangeBusy" v-model="primaryTargetId" :searchThreshold="10" :options="targets" option-key="id" option-label="name" @select="onPrimaryTargetChanged" />
+        </div>
+      </SettingsItem>
+    </Section>
   </div>
 </template>