Show storage target in backup listings

dashboard/src/components/app/Backups.vue

@@ -38,6 +38,10 @@ const columns = ref({
     label: t('app.backups.backups.time'),
     sort: true,
   },
+  target: {
+    label: t('backup.target.label'),
+    sort: true,
+  },
   actions: {
     label: '',
     sort: false,
@@ -55,8 +59,7 @@ function onActionMenu(backup, event) {
   }, {
     icon: 'fa-solid fa-download',
     label: t('app.backups.backups.downloadBackupTooltip'),
-    // TODO backup.format is now part of the backup target!
-    visible: backup.format === 'tgz' && props.app.accessLevel === 'admin',
+    visible: backup.target.format === 'tgz' && props.app.accessLevel === 'admin',
     action: getDownloadLink.bind(null, backup),
   }, {
     icon: 'fa-solid fa-file-alt',
@@ -99,6 +102,7 @@ const taskLogsMenu = ref([]);
 const lastTask = ref({});
 const startBackupBusy = ref(false);
 const stopBackupBusy = ref(false);
+let backupTargets = [];
 
 async function onChangeAutoBackups(value) {
   const [error] = await appsModel.configure(props.app.id, 'automatic_backup', { enable: value });
@@ -248,12 +252,20 @@ async function refreshBackupList() {
   const [error, result] = await appsModel.backups(props.app.id);
   if (error) return console.error(error);
 
+  result.forEach(backup => {
+    backup.target = backupTargets.find(t => t.id === backup.targetId);
+  });
   backups.value = result;
 }
 
 onMounted(async () => {
   autoBackupsEnabled.value = props.app.enableBackup;
 
+  const [error, result] = await backupTargetsModel.list();
+  if (error) return console.error(error);
+
+  backupTargets = result;
+
   await refreshBackupList();
   await refreshTasks();
 
@@ -366,6 +378,9 @@ onMounted(async () => {
       <template #creationTime="backup">
         {{ prettyLongDate(backup.creationTime) }} <b v-show="backup.label">({{ backup.label }})</b>
       </template>
+      <template #target="backup">
+        {{ backup.target ? backup.target.name : 'unknown' }}
+      </template>
       <template #actions="backup">
         <div style="text-align: right;">
           <Button tool plain secondary @click.capture="onActionMenu(backup, $event)" icon="fa-solid fa-ellipsis" />

dashboard/src/views/BackupListView.vue

@@ -45,7 +45,7 @@ const columns = {
     hideMobile: true,
   },
   target: {
-    label: 'Storage',
+    label: t('backup.target.label'),
     sort(a, b) {
       return b.name <= a.name ? 1 : -1;
     },