Fixup all toplevel views to only have one child node and test with basic animation

dashboard/src/components/BackupList.vue

@@ -25,7 +25,6 @@ const tasksModel = TasksModel.create();
 const dashboardModel = DashboardModel.create();
 
 const columns = {
-  preserveSecs: {}, // archived
   packageVersion: {
     label: t('backups.listing.version'),
     sort: true,
@@ -35,6 +34,7 @@ const columns = {
     label: t('main.table.date'),
     sort: true
   },
+  preserveSecs: {}, // archived
   content: {
     label: t('backups.listing.contents'),
     sort: false,
@@ -211,68 +211,68 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Dialog ref="infoDialog"
-    :title="$t('backups.backupDetails.title')"
-    :reject-label="$t('main.dialog.cancel')"
-  >
-    <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.label') }}</div>
-      <div class="info-value">{{ infoBackup.label }}</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 class="info-row">
-      <div class="info-label">{{ $t('backups.backupDetails.format') }}</div>
-      <div class="info-value">{{ infoBackup.format }}</div>
-    </div>
-
-    <br/>
-
-    <p class="text-muted">{{ $t('backups.backupDetails.list', { appCount: infoBackup.contents.length }) }}:</p>
-    <div v-for="content in infoBackup.contents" :key="content.id">
-      <a v-if="content.fqdn" :href="`/#/app/${content.id}/backups`">{{ content.label || content.fqdn }}</a>
-      <a v-else :href="`/#/eventlog?search=${content.id}`">{{ content.id }}</a>
-    </div>
-  </Dialog>
-
-  <Dialog ref="editDialog"
-    :title="$t('backups.backupEdit.title')"
-    :reject-label="editBackupBusy ? '' : $t('main.dialog.cancel')"
-     reject-style="secondary"
-    :confirm-label="$t('main.dialog.save')"
-    :confirm-busy="editBackupBusy"
-    @confirm="onEditSubmit()"
-  >
-    <p class="has-error text-center" v-show="editBackupError">{{ editBackupError }}</p>
-
-    <form @submit.prevent="onEditSubmit()" autocomplete="off">
-      <fieldset>
-        <FormGroup>
-          <label for="backupLabelInput">{{ $t('backups.backupEdit.label') }}</label>
-          <TextInput id="backupLabelInput" v-model="editBackupLabel" />
-        </FormGroup>
-
-        <Checkbox v-model="editBackupPersist" :label="$t('backups.backupEdit.preserved.description')" />
-        <!-- <sup><a popover-placement="top-right" popover-trigger="outsideClick" uib-popover="{{ 'backups.backupEdit.preserved.tooltip' | tr: { appsLength: editBackup.backup.contents.length} }}"><i class="fa fa-question-circle"></i></a></sup> -->
-      </fieldset>
-    </form>
-  </Dialog>
-
   <Section :title="$t('backups.listing.title')">
+    <Dialog ref="infoDialog"
+      :title="$t('backups.backupDetails.title')"
+      :reject-label="$t('main.dialog.cancel')"
+    >
+      <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.label') }}</div>
+        <div class="info-value">{{ infoBackup.label }}</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 class="info-row">
+        <div class="info-label">{{ $t('backups.backupDetails.format') }}</div>
+        <div class="info-value">{{ infoBackup.format }}</div>
+      </div>
+
+      <br/>
+
+      <p class="text-muted">{{ $t('backups.backupDetails.list', { appCount: infoBackup.contents.length }) }}:</p>
+      <div v-for="content in infoBackup.contents" :key="content.id">
+        <a v-if="content.fqdn" :href="`/#/app/${content.id}/backups`">{{ content.label || content.fqdn }}</a>
+        <a v-else :href="`/#/eventlog?search=${content.id}`">{{ content.id }}</a>
+      </div>
+    </Dialog>
+
+    <Dialog ref="editDialog"
+      :title="$t('backups.backupEdit.title')"
+      :reject-label="editBackupBusy ? '' : $t('main.dialog.cancel')"
+       reject-style="secondary"
+      :confirm-label="$t('main.dialog.save')"
+      :confirm-busy="editBackupBusy"
+      @confirm="onEditSubmit()"
+    >
+      <p class="has-error text-center" v-show="editBackupError">{{ editBackupError }}</p>
+
+      <form @submit.prevent="onEditSubmit()" autocomplete="off">
+        <fieldset>
+          <FormGroup>
+            <label for="backupLabelInput">{{ $t('backups.backupEdit.label') }}</label>
+            <TextInput id="backupLabelInput" v-model="editBackupLabel" />
+          </FormGroup>
+
+          <Checkbox v-model="editBackupPersist" :label="$t('backups.backupEdit.preserved.description')" />
+          <!-- <sup><a popover-placement="top-right" popover-trigger="outsideClick" uib-popover="{{ 'backups.backupEdit.preserved.tooltip' | tr: { appsLength: editBackup.backup.contents.length} }}"><i class="fa fa-question-circle"></i></a></sup> -->
+        </fieldset>
+      </form>
+    </Dialog>
+
     <template #header-buttons>
       <Button tool icon="fas fa-align-left" v-tooltip="$t('settings.updates.showLogsAction')" :menu="taskLogsMenu" :disabled="!taskLogsMenu.length"/>
     </template>