feat(lite/dashboard): revamp pool dashboard (#6815)

Reworked the pool dashboard to reorder components, simplify the code, and make
the design closer to the Figma mockups.
Added a new `PoolDashboardComingSoon` component for dashboard items that are not
ready yet.
Removed `height: fit-content` from UiCard which should not be needed anymore and
have only recent (~1.4 year) support on Firefox.

@xen-orchestra/lite/src/components/ui/UiCard.vue

@@ -12,7 +12,6 @@ defineProps<{
 
 <style lang="postcss" scoped>
 .ui-card {
-  height: fit-content;
   padding: 2.1rem;
   border-radius: 0.8rem;
   background-color: var(--background-color-primary);

@xen-orchestra/lite/src/components/ui/UiCardComingSoon.vue

@@ -0,0 +1,30 @@
+<template>
+  <UiCard class="ui-card-coming-soon">
+    <UiCardTitle>{{ title }}</UiCardTitle>
+    <div class="content">
+      <img alt="" src="@/assets/under-construction.svg" />
+    </div>
+    <div class="content">Coming soon</div>
+  </UiCard>
+</template>
+
+<script setup lang="ts">
+import UiCard from "@/components/ui/UiCard.vue";
+import UiCardTitle from "@/components/ui/UiCardTitle.vue";
+
+defineProps<{
+  title: string;
+}>();
+</script>
+
+<style scoped lang="postcss">
+.ui-card-coming-soon {
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  padding: 1rem 0;
+  text-align: center;
+}
+</style>

@xen-orchestra/lite/src/components/ui/UiCardGroup.vue

@@ -0,0 +1,28 @@
+<template>
+  <div :class="{ vertical }" class="ui-card-group">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject, provide } from "vue";
+
+const vertical = inject("isCardGroupVertical", false);
+
+provide("isCardGroupVertical", !vertical);
+</script>
+
+<style lang="postcss" scoped>
+.ui-card-group {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+  flex: 1;
+}
+
+@media (min-width: 1500px) {
+  .ui-card-group:not(.vertical) {
+    flex-direction: row;
+  }
+}
+</style>

@xen-orchestra/lite/src/views/pool/PoolDashboardView.vue

@@ -1,29 +1,28 @@
 <template>
   <div class="pool-dashboard-view">
-    <div class="item">
+    <UiCardGroup>
       <PoolDashboardStatus />
-    </div>
-    <div class="item">
-      <PoolDashboardStorageUsage />
-    </div>
-    <div class="item">
-      <PoolDashboardCpuUsage />
-    </div>
-    <div class="item">
-      <PoolDashboardRamUsage />
-    </div>
-    <div class="item">
-      <PoolDashboardCpuProvisioning />
-    </div>
-    <div class="item">
-      <PoolDashboardNetworkChart />
-    </div>
-    <div class="item">
-      <PoolDashboardRamUsageChart />
-    </div>
-    <div class="item">
-      <PoolCpuUsageChart />
-    </div>
+      <UiCardComingSoon class="alarms" title="Alarms" />
+      <UiCardComingSoon title="Patches" />
+    </UiCardGroup>
+    <UiCardGroup>
+      <UiCardGroup>
+        <PoolDashboardStorageUsage />
+        <PoolDashboardNetworkChart />
+      </UiCardGroup>
+      <UiCardGroup>
+        <PoolDashboardRamUsage />
+        <PoolDashboardRamUsageChart />
+      </UiCardGroup>
+      <UiCardGroup>
+        <PoolDashboardCpuProvisioning />
+        <PoolDashboardCpuUsage />
+        <PoolCpuUsageChart />
+      </UiCardGroup>
+    </UiCardGroup>
+    <UiCardGroup>
+      <UiCardComingSoon class="tasks" title="Tasks" />
+    </UiCardGroup>
   </div>
 </template>
 
@@ -32,9 +31,11 @@ export const N_ITEMS = 5;
 </script>
 
 <script lang="ts" setup>
+import UiCardGroup from "@/components/ui/UiCardGroup.vue";
 import { useHostMetricsStore } from "@/stores/host-metrics.store";
 import { differenceBy } from "lodash-es";
 import { provide, watch } from "vue";
+import UiCardComingSoon from "@/components/ui/UiCardComingSoon.vue";
 import PoolCpuUsageChart from "@/components/pool/dashboard/cpuUsage/PoolCpuUsageChart.vue";
 import PoolDashboardCpuUsage from "@/components/pool/dashboard/PoolDashboardCpuUsage.vue";
 import PoolDashboardNetworkChart from "@/components/pool/dashboard/PoolDashboardNetworkChart.vue";
@@ -112,32 +113,14 @@ runningVms.value.forEach((vm) => vmRegister(vm));
 
 <style lang="postcss" scoped>
 .pool-dashboard-view {
-  column-gap: 0;
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
 }
 
-@media (min-width: 768px) {
-  .pool-dashboard-view {
-    column-count: 2;
-  }
-}
-
-@media (min-width: 1500px) {
-  .pool-dashboard-view {
-    column-count: 3;
-  }
-}
-
-.item {
-  margin: 0;
-  padding: 0.5rem;
-  overflow: hidden;
-}
-
-@media (min-width: 768px) {
-  .item {
-    page-break-inside: avoid;
-    break-inside: avoid;
-  }
+.alarms,
+.tasks {
+  flex: 1;
 }
 </style>