refactor backup info into separate component

app backups now have the size and duration information

dashboard/src/components/app/Backups.vue

@@ -16,6 +16,7 @@ import AppsModel from '../../models/AppsModel.js';
 import BackupSitesModel from '../../models/BackupSitesModel.js';
 import TasksModel from '../../models/TasksModel.js';
 import { TASK_TYPES } from '../../constants.js';
+import BackupInfoDialog from '../BackupInfoDialog.vue';
 
 const appsModel = AppsModel.create();
 const backupSitesModel = BackupSitesModel.create();
@@ -103,7 +104,6 @@ function onActionMenu(backup, event) {
 
 const busy = ref(true);
 const errorMessage = ref('');
-const infoBackup = ref({});
 const editBusy = ref(false);
 const editError = ref('');
 const editBackup = ref({});
@@ -189,8 +189,7 @@ async function onStopBackup() {
 }
 
 function onInfo(backup) {
-  infoBackup.value = backup;
-  infoDialog.value.open();
+  infoDialog.value.open(backup);
 }
 
 function onEdit(backup) {
@@ -302,29 +301,7 @@ onMounted(async () => {
     <AppRestoreDialog ref="cloneDialog"/>
     <AppImportDialog ref="importDialog"/>
 
-    <Dialog ref="infoDialog"
-      :title="$t('backups.backupDetails.title')"
-      :reject-label="$t('main.dialog.close')"
-    >
-      <div>
-        <div class="info-row">
-          <div class="info-label">{{ $t('backups.backupDetails.id') }}</div>
-          <div class="info-value">{{ infoBackup.id }}</div>
-        </div>
-        <div class="info-row">
-          <div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
-          <div class="info-value">{{ infoBackup.remotePath }}</div>
-        </div>
-        <div class="info-row">
-          <div class="info-label">{{ $t('backups.backupDetails.date') }}</div>
-          <div class="info-value">{{ prettyLongDate(infoBackup.creationTime) }}</div>
-        </div>
-        <div class="info-row">
-          <div class="info-label">{{ $t('backups.backupDetails.version') }}</div>
-          <div class="info-value">{{ infoBackup.packageVersion }}</div>
-        </div>
-      </div>
-    </Dialog>
+    <BackupInfoDialog ref="infoDialog" />
 
     <Dialog ref="editDialog"
       :title="$t('backups.backupEdit.title')"