Trigger backups for primary targets in backup listing

dashboard/src/components/BackupList.vue

@@ -131,12 +131,13 @@ async function refreshBackups() {
 
 const startBackupError = ref('');
 const startBackupBusy = ref(false);
+let primaryTargetId = null;
 
 async function onStartBackup() {
   startBackupBusy.value = true;
   startBackupError.value = '';
 
-  const [error] = await backupsModel.create();
+  const [error] = await backupTargetsModel.createBackup(primaryTargetId);
   if (error) {
     if (error.status === 409) {
       if (error.body.message.indexOf('full_backup') !== -1) startBackupError.value = 'Backup already in progress. Please retry later.';
@@ -226,6 +227,14 @@ function onCopyToClipboard(value) {
 }
 
 onMounted(async () => {
+  const [error, result] = await backupTargetsModel.list();
+  if (error) return console.error(error);
+
+  const primaryTarget = result.find(t => t.primary);
+  if (!primaryTarget) return;
+
+  primaryTargetId = primaryTarget.id;
+
   await refreshBackups();
   await refreshTasks();
   busy.value = false;
@@ -298,6 +307,7 @@ onMounted(async () => {
     </Dialog>
 
     <template #header-buttons>
+      <Button @click="onStartBackup()" :loading="startBackupBusy || lastTask.active" :disabled="startBackupBusy || lastTask.active">{{ $t('backups.listing.backupNow') }}</Button>
       <Button tool :menu="taskLogsMenu" :disabled="!taskLogsMenu.length">{{ $t('main.action.logs') }}</Button>
     </template>
 
@@ -336,7 +346,6 @@ onMounted(async () => {
 
     <div class="button-bar">
       <Button danger @click="onStopBackup()" v-if="lastTask.active" :loading="stopBackupBusy" :disabled="stopBackupBusy">{{ $t('backups.listing.stopTask') }}</Button>
-      <Button @click="onStartBackup()" v-else :loading="startBackupBusy" :disabled="startBackupBusy">{{ $t('backups.listing.backupNow') }}</Button>
 
       <div class="error-label" v-if="startBackupError">{{ startBackupError }}</div>
     </div>