feat(lite/pool): add tasks to Pool Dashboard (#6713)

Other updates:
- Move pending/finished tasks logic to store subscription
- Add `count` prop to `UiCardTitle`
- Add "No tasks" message on Task table if empty
- Make the `finishedTasks` prop optional
- Add ability to have full width dashboard cards

@xen-orchestra/lite/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Ability to export selected VMs as CSV file (PR [#6915](https://github.com/vatesfr/xen-orchestra/pull/6915))
 - [Pool/VMs] Ability to export selected VMs as JSON file (PR [#6911](https://github.com/vatesfr/xen-orchestra/pull/6911))
+- Add Tasks to Pool Dashboard (PR [#6713](https://github.com/vatesfr/xen-orchestra/pull/6713))
 
 ## **0.1.1** (2023-07-03)
 

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardStatus.vue

@@ -34,7 +34,6 @@ const {
   isReady: isVmReady,
   records: vms,
   hasError: hasVmError,
-  runningVms,
 } = useVmStore().subscribe();
 
 const {
@@ -55,5 +54,7 @@ const activeHostsCount = computed(
 
 const totalVmsCount = computed(() => vms.value.length);
 
-const activeVmsCount = computed(() => runningVms.value.length);
+const activeVmsCount = computed(
+  () => vms.value.filter((vm) => vm.power_state === "Running").length
+);
 </script>

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardTasks.vue

@@ -0,0 +1,17 @@
+<template>
+  <UiCard>
+    <UiCardTitle :count="pendingTasks.length">{{ $t("tasks") }}</UiCardTitle>
+    <TasksTable :pending-tasks="pendingTasks" />
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+import TasksTable from "@/components/tasks/TasksTable.vue";
+import UiCard from "@/components/ui/UiCard.vue";
+import UiCardTitle from "@/components/ui/UiCardTitle.vue";
+import { useTaskStore } from "@/stores/task.store";
+
+const { pendingTasks } = useTaskStore().subscribe();
+</script>
+
+<style lang="postcss" scoped></style>

@xen-orchestra/lite/src/components/tasks/TasksTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <UiTable class="tasks-table" :color="hasError ? 'error' : undefined">
+  <UiTable :color="hasError ? 'error' : undefined" class="tasks-table">
     <thead>
       <tr>
         <th>{{ $t("name") }}</th>
@@ -20,6 +20,9 @@
           <UiSpinner class="loader" />
         </td>
       </tr>
+      <tr v-else-if="!hasTasks">
+        <td class="no-tasks" colspan="5">{{ $t("no-tasks") }}</td>
+      </tr>
       <template v-else>
         <TaskRow
           v-for="task in pendingTasks"
@@ -35,20 +38,35 @@
 
 <script lang="ts" setup>
 import TaskRow from "@/components/tasks/TaskRow.vue";
-import UiTable from "@/components/ui/UiTable.vue";
 import UiSpinner from "@/components/ui/UiSpinner.vue";
-import { useTaskStore } from "@/stores/task.store";
+import UiTable from "@/components/ui/UiTable.vue";
 import type { XenApiTask } from "@/libs/xen-api";
+import { useTaskStore } from "@/stores/task.store";
+import { computed } from "vue";
 
-defineProps<{
+const props = defineProps<{
   pendingTasks: XenApiTask[];
-  finishedTasks: XenApiTask[];
+  finishedTasks?: XenApiTask[];
 }>();
 
 const { hasError, isFetching } = useTaskStore().subscribe();
+
+const hasTasks = computed(
+  () => props.pendingTasks.length > 0 || (props.finishedTasks?.length ?? 0) > 0
+);
 </script>
 
 <style lang="postcss" scoped>
+.tasks-table {
+  width: 100%;
+}
+
+.no-tasks {
+  text-align: center;
+  color: var(--color-blue-scale-300);
+  font-style: italic;
+}
+
 td[colspan="5"] {
   text-align: center;
 }

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

@@ -6,6 +6,7 @@
       class="left"
     >
       <slot>{{ left }}</slot>
+      <UiCounter class="count" v-if="count > 0" :value="count" color="info" />
     </component>
     <component
       :is="subtitle ? 'h6' : 'h5'"
@@ -18,11 +19,17 @@
 </template>
 
 <script lang="ts" setup>
-defineProps<{
-  subtitle?: boolean;
-  left?: string;
-  right?: string;
-}>();
+import UiCounter from "@/components/ui/UiCounter.vue";
+
+withDefaults(
+  defineProps<{
+    subtitle?: boolean;
+    left?: string;
+    right?: string;
+    count?: number;
+  }>(),
+  { count: 0 }
+);
 </script>
 
 <style lang="postcss" scoped>
@@ -55,6 +62,9 @@ defineProps<{
   font-size: var(--section-title-left-size);
   font-weight: var(--section-title-left-weight);
   color: var(--section-title-left-color);
+  display: flex;
+  align-items: center;
+  gap: 2rem;
 }
 
 .right {
@@ -62,4 +72,8 @@ defineProps<{
   font-weight: var(--section-title-right-weight);
   color: var(--section-title-right-color);
 }
+
+.count {
+  font-size: 1.6rem;
+}
 </style>

@xen-orchestra/lite/src/locales/en.json

@@ -77,6 +77,7 @@
   "news": "News",
   "news-name": "{name} news",
   "new-features-are-coming": "New features are coming soon!",
+  "no-tasks": "No tasks",
   "not-found": "Not found",
   "object": "Object",
   "object-not-found": "Object {id} can't be found…",

@xen-orchestra/lite/src/locales/fr.json

@@ -77,6 +77,7 @@
   "news": "Actualités",
   "news-name": "Actualités {name}",
   "new-features-are-coming": "De nouvelles fonctionnalités arrivent bientôt !",
+  "no-tasks": "Aucune tâche",
   "not-found": "Non trouvé",
   "object": "Objet",
   "object-not-found": "L'objet {id} est introuvable…",

@xen-orchestra/lite/src/stores/task.store.ts

@@ -1,6 +1,64 @@
+import useArrayRemovedItemsHistory from "@/composables/array-removed-items-history.composable";
+import useCollectionFilter from "@/composables/collection-filter.composable";
+import useCollectionSorter from "@/composables/collection-sorter.composable";
+import useFilteredCollection from "@/composables/filtered-collection.composable";
+import useSortedCollection from "@/composables/sorted-collection.composable";
+import type { XenApiTask } from "@/libs/xen-api";
 import { useXapiCollectionStore } from "@/stores/xapi-collection.store";
+import { createSubscribe } from "@/types/xapi-collection";
 import { defineStore } from "pinia";
+import type { ComputedRef, Ref } from "vue";
 
-export const useTaskStore = defineStore("task", () =>
-  useXapiCollectionStore().get("task")
-);
+type PendingTasksExtension = {
+  pendingTasks: ComputedRef<XenApiTask[]>;
+};
+
+type FinishedTasksExtension = {
+  finishedTasks: Ref<XenApiTask[]>;
+};
+
+type Extensions = [PendingTasksExtension, FinishedTasksExtension];
+
+export const useTaskStore = defineStore("task", () => {
+  const tasksCollection = useXapiCollectionStore().get("task");
+
+  const subscribe = createSubscribe<XenApiTask, Extensions>(() => {
+    const subscription = tasksCollection.subscribe();
+
+    const { compareFn } = useCollectionSorter<XenApiTask>({
+      initialSorts: ["-created"],
+    });
+
+    const sortedTasks = useSortedCollection(subscription.records, compareFn);
+
+    const { predicate } = useCollectionFilter({
+      initialFilters: [
+        "!name_label:|(SR.scan host.call_plugin)",
+        "status:pending",
+      ],
+    });
+
+    const extendedSubscription = {
+      pendingTasks: useFilteredCollection<XenApiTask>(sortedTasks, predicate),
+      finishedTasks: useArrayRemovedItemsHistory(
+        sortedTasks,
+        (task) => task.uuid,
+        {
+          limit: 50,
+          onRemove: (tasks) =>
+            tasks.map((task) => ({
+              ...task,
+              finished: new Date().toISOString(),
+            })),
+        }
+      ),
+    };
+
+    return {
+      ...subscription,
+      ...extendedSubscription,
+    };
+  });
+
+  return { ...tasksCollection, subscribe };
+});

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

@@ -21,7 +21,7 @@
       </UiCardGroup>
     </UiCardGroup>
     <UiCardGroup>
-      <UiCardComingSoon class="tasks" title="Tasks" />
+      <PoolDashboardTasks class="tasks" />
     </UiCardGroup>
   </div>
 </template>
@@ -31,6 +31,7 @@ export const N_ITEMS = 5;
 </script>
 
 <script lang="ts" setup>
+import PoolDashboardTasks from "@/components/pool/dashboard/PoolDashboardTasks.vue";
 import PoolCpuUsageChart from "@/components/pool/dashboard/cpuUsage/PoolCpuUsageChart.vue";
 import PoolDashboardCpuProvisioning from "@/components/pool/dashboard/PoolDashboardCpuProvisioning.vue";
 import PoolDashboardCpuUsage from "@/components/pool/dashboard/PoolDashboardCpuUsage.vue";
@@ -128,6 +129,18 @@ runningVms.value.forEach((vm) => vmRegister(vm));
   padding: 1rem;
 }
 
+@media (min-width: 768px) {
+  .pool-dashboard-view {
+    column-count: 2;
+  }
+}
+
+@media (min-width: 1500px) {
+  .pool-dashboard-view {
+    column-count: 3;
+  }
+}
+
 .alarms,
 .tasks {
   flex: 1;

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

@@ -4,54 +4,24 @@
       {{ $t("tasks") }}
       <UiCounter :value="pendingTasks.length" color="info" />
     </UiTitle>
-
     <TasksTable :finished-tasks="finishedTasks" :pending-tasks="pendingTasks" />
+    <UiCardSpinner v-if="!isReady" />
   </UiCard>
 </template>
 
 <script lang="ts" setup>
 import TasksTable from "@/components/tasks/TasksTable.vue";
 import UiCard from "@/components/ui/UiCard.vue";
+import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
 import UiCounter from "@/components/ui/UiCounter.vue";
 import UiTitle from "@/components/ui/UiTitle.vue";
-import useArrayRemovedItemsHistory from "@/composables/array-removed-items-history.composable";
-import useCollectionFilter from "@/composables/collection-filter.composable";
-import useCollectionSorter from "@/composables/collection-sorter.composable";
-import useFilteredCollection from "@/composables/filtered-collection.composable";
-import useSortedCollection from "@/composables/sorted-collection.composable";
-import type { XenApiTask } from "@/libs/xen-api";
 import { useTaskStore } from "@/stores/task.store";
 import { usePageTitleStore } from "@/stores/page-title.store";
 import { useI18n } from "vue-i18n";
 
-const { records, hasError } = useTaskStore().subscribe();
+const { pendingTasks, finishedTasks, isReady, hasError } = useTaskStore().subscribe();
 const { t } = useI18n();
 
-const { compareFn } = useCollectionSorter<XenApiTask>({
-  initialSorts: ["-created"],
-});
-
-const allTasks = useSortedCollection(records, compareFn);
-
-const { predicate } = useCollectionFilter({
-  initialFilters: ["!name_label:|(SR.scan host.call_plugin)", "status:pending"],
-});
-
-const pendingTasks = useFilteredCollection<XenApiTask>(allTasks, predicate);
-
-const finishedTasks = useArrayRemovedItemsHistory(
-  allTasks,
-  (task) => task.uuid,
-  {
-    limit: 50,
-    onRemove: (tasks) =>
-      tasks.map((task) => ({
-        ...task,
-        finished: new Date().toISOString(),
-      })),
-  }
-);
-
 const titleStore = usePageTitleStore();
 titleStore.setTitle(t("tasks"));
 titleStore.setCount(() => pendingTasks.value.length);