feat(lite/pool/VMs): ability to delete selected VMs (#6860)

@xen-orchestra/lite/CHANGELOG.md

@@ -17,6 +17,7 @@
 - Add "Under Construction" views (PR [#6673](https://github.com/vatesfr/xen-orchestra/pull/6673))
 - Ability to change the state of selected VMs from the pool's list of VMs (PR [#6782](https://github.com/vatesfr/xen-orchestra/pull/6782))
 - Ability to copy selected VMs from the pool's list of VMs (PR [#6847](https://github.com/vatesfr/xen-orchestra/pull/6847))
+- Ability to delete selected VMs from the pool's list of VMs (PR [#6673](https://github.com/vatesfr/xen-orchestra/pull/6860))
 
 ## **0.1.0**
 

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

@@ -120,7 +120,7 @@ const className = computed(() => {
   color: var(--modal-color);
 }
 
-.container :slotted(.accent) {
+.container :deep(.accent) {
   color: var(--modal-color);
 }
 

@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionDeleteItem.vue

@@ -0,0 +1,73 @@
+<template>
+  <MenuItem
+    :disabled="areSomeVmsInExecution"
+    :icon="faTrashCan"
+    v-tooltip="areSomeVmsInExecution && $t('selected-vms-in-execution')"
+    @click="openDeleteModal"
+  >
+    {{ $t("delete") }}
+  </MenuItem>
+  <UiModal
+    v-if="isDeleteModalOpen"
+    :icon="faSatellite"
+    @close="closeDeleteModal"
+  >
+    <template #title>
+      <i18n-t keypath="confirm-delete" scope="global" tag="div">
+        <span class="accent">
+          {{ $t("n-vms", { n: vmRefs.length }) }}
+        </span>
+      </i18n-t>
+    </template>
+    <template #subtitle>
+      {{ $t("please-confirm") }}
+    </template>
+    <template #buttons>
+      <UiButton outlined @click="closeDeleteModal">
+        {{ $t("go-back") }}
+      </UiButton>
+      <UiButton @click="deleteVms">
+        {{ $t("delete-vms", { n: vmRefs.length }) }}
+      </UiButton>
+    </template>
+  </UiModal>
+</template>
+
+<script lang="ts" setup>
+import MenuItem from "@/components/menu/MenuItem.vue";
+import { POWER_STATE } from "@/libs/xen-api";
+import UiButton from "@/components/ui/UiButton.vue";
+import UiModal from "@/components/ui/UiModal.vue";
+import useModal from "@/composables/modal.composable";
+import { useVmStore } from "@/stores/vm.store";
+import { useXenApiStore } from "@/stores/xen-api.store";
+import { faSatellite, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { computed } from "vue";
+import { vTooltip } from "@/directives/tooltip.directive";
+import type { XenApiVm } from "@/libs/xen-api";
+
+const props = defineProps<{
+  vmRefs: string[];
+}>();
+
+const xenApi = useXenApiStore().getXapi();
+const { getByOpaqueRef: getVm } = useVmStore().subscribe();
+const {
+  open: openDeleteModal,
+  close: closeDeleteModal,
+  isOpen: isDeleteModalOpen,
+} = useModal();
+
+const vms = computed<XenApiVm[]>(() =>
+  props.vmRefs.map(getVm).filter((vm): vm is XenApiVm => vm !== undefined)
+);
+
+const areSomeVmsInExecution = computed(() =>
+  vms.value.some((vm) => vm.power_state !== POWER_STATE.HALTED)
+);
+
+const deleteVms = async () => {
+  await xenApi.vm.delete(props.vmRefs);
+  closeDeleteModal();
+};
+</script>

@xen-orchestra/lite/src/components/vm/VmsActionsBar.vue

@@ -25,9 +25,7 @@
     <MenuItem v-tooltip="$t('coming-soon')" :icon="faCamera">
       {{ $t("snapshot") }}
     </MenuItem>
-    <MenuItem v-tooltip="$t('coming-soon')" :icon="faTrashCan">
-      {{ $t("delete") }}
-    </MenuItem>
+    <VmActionDeleteItem :vm-refs="selectedRefs" />
     <MenuItem :icon="faFileExport">
       {{ $t("export") }}
       <template #submenu>
@@ -58,10 +56,10 @@
 import AppMenu from "@/components/menu/AppMenu.vue";
 import MenuItem from "@/components/menu/MenuItem.vue";
 import UiButton from "@/components/ui/UiButton.vue";
-import VmActionCopyItem from "@/components/vm/VmActionItems/VmActionCopyItem.vue";
 import { useUiStore } from "@/stores/ui.store";
 import VmActionPowerStateItems from "@/components/vm/VmActionItems/VmActionPowerStateItems.vue";
-import { vTooltip } from "@/directives/tooltip.directive";
+import VmActionCopyItem from "@/components/vm/VmActionItems/VmActionCopyItem.vue";
+import VmActionDeleteItem from "@/components/vm/VmActionItems/VmActionDeleteItem.vue";
 import {
   faCamera,
   faCode,
@@ -72,9 +70,9 @@ import {
   faFileExport,
   faPowerOff,
   faRoute,
-  faTrashCan,
 } from "@fortawesome/free-solid-svg-icons";
 import { storeToRefs } from "pinia";
+import { vTooltip } from "@/directives/tooltip.directive";
 
 defineProps<{
   disabled?: boolean;

@xen-orchestra/lite/src/libs/xen-api.ts

@@ -341,6 +341,10 @@ export default class XenApi {
     type VmRefsToClone = Record<XenApiVm["$ref"], /* Cloned VM name */ string>;
 
     return {
+      delete: (vmRefs: VmRefs) =>
+        Promise.all(
+          castArray(vmRefs).map((vmRef) => this._call("VM.destroy", [vmRef]))
+        ),
       start: (vmRefs: VmRefs) =>
         Promise.all(
           castArray(vmRefs).map((vmRef) =>

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

@@ -14,6 +14,7 @@
   "cancel": "Cancel",
   "change-power-state": "Change power state",
   "change-state": "Change state",
+  "confirm-delete": "You're about to delete {0}",
   "coming-soon": "Coming soon!",
   "community": "Community",
   "community-name": "{name} community",
@@ -23,6 +24,7 @@
   "cpu-usage": "CPU usage",
   "dashboard": "Dashboard",
   "delete": "Delete",
+  "delete-vms": "Delete 1 VM | Delete {n} VMs",
   "descending": "descending",
   "description": "Description",
   "display": "Display",
@@ -56,6 +58,7 @@
   "following-hosts-unreachable": "The following hosts are unreachable",
   "force-reboot": "Force reboot",
   "force-shutdown": "Force shutdown",
+  "go-back": "Go back",
   "here": "Here",
   "hosts": "Hosts",
   "language": "Language",
@@ -64,6 +67,7 @@
   "log-out": "Log out",
   "login": "Login",
   "migrate": "Migrate",
+  "n-vms": "1 VM | {n} VMs",
   "name": "Name",
   "network": "Network",
   "network-download": "Download",
@@ -79,6 +83,7 @@
   "password": "Password",
   "password-invalid": "Password invalid",
   "pause": "Pause",
+  "please-confirm": "Please confirm",
   "pool-cpu-usage": "Pool CPU Usage",
   "pool-ram-usage": "Pool RAM Usage",
   "power-state": "Power state",
@@ -104,6 +109,7 @@
   "settings": "Settings",
   "shutdown": "Shutdown",
   "snapshot": "Snapshot",
+  "selected-vms-in-execution": "Some selected VMs are running",
   "sort-by": "Sort by",
   "stacked-cpu-usage": "Stacked CPU usage",
   "stacked-ram-usage": "Stacked RAM usage",

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

@@ -13,6 +13,7 @@
   "backup": "Sauvegarde",
   "cancel": "Annuler",
   "change-power-state": "Changer l'état d'alimentation",
+  "confirm-delete": "Vous êtes sur le point de supprimer {0}",
   "change-state": "Changer l'état",
   "coming-soon": "Bientôt disponible !",
   "community": "Communauté",
@@ -23,6 +24,7 @@
   "cpu-usage": "Utilisation CPU",
   "dashboard": "Tableau de bord",
   "delete": "Supprimer",
+  "delete-vms": "Supprimer 1 VM | Supprimer {n} VMs",
   "descending": "descendant",
   "description": "Description",
   "display": "Affichage",
@@ -56,6 +58,7 @@
   "following-hosts-unreachable": "Les hôtes suivants sont inaccessibles",
   "force-reboot": "Forcer le redémarrage",
   "force-shutdown": "Forcer l'arrêt",
+  "go-back": "Revenir en arrière",
   "here": "Ici",
   "hosts": "Hôtes",
   "language": "Langue",
@@ -64,6 +67,7 @@
   "log-out": "Se déconnecter",
   "login": "Connexion",
   "migrate": "Migrer",
+  "n-vms": "1 VM | {n} VMs",
   "name": "Nom",
   "network": "Réseau",
   "network-download": "Descendant",
@@ -79,6 +83,7 @@
   "password": "Mot de passe",
   "password-invalid": "Mot de passe incorrect",
   "pause": "Pause",
+  "please-confirm": "Veuillez confirmer",
   "pool-cpu-usage": "Utilisation CPU du Pool",
   "pool-ram-usage": "Utilisation RAM du Pool",
   "power-state": "État d'alimentation",
@@ -104,6 +109,7 @@
   "settings": "Paramètres",
   "shutdown": "Arrêter",
   "snapshot": "Instantané",
+  "selected-vms-in-execution": "Certaines VMs sélectionnées sont en cours d'exécution",
   "sort-by": "Trier par",
   "stacked-cpu-usage": "Utilisation CPU empilée",
   "stacked-ram-usage": "Utilisation RAM empilée",