From f8aeaa2ea6224fa86ed19c0f1e40f78c1ace60a6 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Tue, 3 Sep 2024 10:44:29 +0300
Subject: [PATCH 01/10] chore: Build the grafana URL on mount.

---
 .../playground/src/components/deployment_data_dialog.vue   | 6 +++---
 packages/playground/src/weblets/tf_deployment_list.vue     | 7 +------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/playground/src/components/deployment_data_dialog.vue b/packages/playground/src/components/deployment_data_dialog.vue
index 453c14e320..55f25e2e0b 100644
--- a/packages/playground/src/components/deployment_data_dialog.vue
+++ b/packages/playground/src/components/deployment_data_dialog.vue
@@ -9,7 +9,6 @@
               <v-btn> JSON</v-btn>
             </v-btn-toggle>
           </div>
-
           <v-tabs v-model="activeTab" align-tabs="center" class="my-4 mx-auto" v-if="showType === 0">
             <v-tab
               v-for="(item, index) in contracts"
@@ -228,7 +227,8 @@ async function getGrafanaUrl() {
   }
   isLoading.value = false;
 }
-getGrafanaUrl();
+
+onMounted(getGrafanaUrl);
 
 async function getGPUInfo() {
   loadingCard.value = true;
@@ -320,6 +320,7 @@ function getTooltipText(contract: any, index: number) {
 
 <script lang="ts">
 import type { GridClient } from "@threefold/grid_client";
+import { onMounted } from "vue";
 
 import { ContractType } from "@/utils/contracts";
 import { createCustomToast, ToastType } from "@/utils/custom_toast";
@@ -339,4 +340,3 @@ export default {
   },
 };
 </script>
-@/utils/get_metrics_url
diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index 0332d31b71..42a59c47ae 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -106,12 +106,7 @@
             icon="mdi-eye-outline"
             @click="openDialog(tabs[activeTab].value, item)"
           />
-          <IconActionBtn
-            tooltip="Visit"
-            icon="mdi-web"
-            color="anchor"
-            :href="'https://' + item.env.JENKINS_HOSTNAME"
-          />
+          <IconActionBtn tooltip="Visit" icon="mdi-web" color="anchor" :href="'https://' + item.env.JENKINS_HOSTNAME" />
         </template>
 
         <template #Taiga-actions="{ item }">

From 7cf41c24883302a14ef9dcab569b5263bfe70cfa Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Tue, 3 Sep 2024 14:53:22 +0300
Subject: [PATCH 02/10] fix: Fix an issue with loading Grafana URL

---
 packages/playground/src/components/deployment_data_dialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/components/deployment_data_dialog.vue b/packages/playground/src/components/deployment_data_dialog.vue
index 55f25e2e0b..df3fe2bc81 100644
--- a/packages/playground/src/components/deployment_data_dialog.vue
+++ b/packages/playground/src/components/deployment_data_dialog.vue
@@ -228,7 +228,7 @@ async function getGrafanaUrl() {
   isLoading.value = false;
 }
 
-onMounted(getGrafanaUrl);
+onMounted(() => getGrafanaUrl());
 
 async function getGPUInfo() {
   loadingCard.value = true;

From b70ee99a9dd874aafd43c07106dc1f0acde3328c Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Tue, 3 Sep 2024 17:25:46 +0300
Subject: [PATCH 03/10] fix: Fix the listing issue:

- Send the both of the deployments, leader and workers.
- Call the 'getGrafanaUrl' on mounting the component.
---
 .../playground/src/components/deployment_data_dialog.vue     | 2 +-
 packages/playground/src/weblets/tf_deployment_list.vue       | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/playground/src/components/deployment_data_dialog.vue b/packages/playground/src/components/deployment_data_dialog.vue
index df3fe2bc81..c27d3f03d1 100644
--- a/packages/playground/src/components/deployment_data_dialog.vue
+++ b/packages/playground/src/components/deployment_data_dialog.vue
@@ -228,7 +228,7 @@ async function getGrafanaUrl() {
   isLoading.value = false;
 }
 
-onMounted(() => getGrafanaUrl());
+onMounted(async () => await getGrafanaUrl());
 
 async function getGPUInfo() {
   loadingCard.value = true;
diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index d7c591359e..aa82286df2 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -511,6 +511,11 @@ function openDialog(project: string, item?: any): void {
     : project === ProjectName.Kubernetes
     ? "k8s"
     : (project.toLowerCase() as any);
+
+  if (item && item.projectName.includes(ProjectName.Caprover.toLocaleLowerCase())) {
+    item = [item, ...item.workers];
+  }
+
   layout.value.openDialog(item, deploymentListEnvironments[key]);
 }
 

From ebd4a8932ef7176125cd0ad0d387be8131193e71 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Wed, 4 Sep 2024 10:38:42 +0300
Subject: [PATCH 04/10] feat: Enhance Deletion of Caprover Cluster:

- Enhanced Deletion Dialog: displays all attached workers in the deletion dialog to prompt user confirmation before proceeding.
- Worker Deletion Logic: Iterates through the machine's interface, extracts the associated worker nodes, and deletes them efficiently.
- Refactored Delete Function: Improved the delete function.
---
 .../src/weblets/tf_deployment_list.vue        | 128 +++++++++++++-----
 1 file changed, 97 insertions(+), 31 deletions(-)

diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index aa82286df2..59c7bbe9be 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -400,9 +400,19 @@
         <strong>Delete the following deployments?</strong>
       </v-card-title>
       <v-card-text>
-        <v-chip class="ma-1" v-for="item in selectedItems" :key="item.name">
-          {{ item.name }}
-        </v-chip>
+        <template v-if="hasWorkers">
+          <v-alert type="warning">Please note that: This deployment contains workers workloads.</v-alert>
+        </template>
+        <template v-for="item in selectedItems" :key="item.name">
+          <template v-if="item.workers">
+            <v-chip class="ma-3" v-for="worker in item.workers" :key="worker.name">
+              {{ worker.name }}
+            </v-chip>
+          </template>
+          <v-chip class="ma-3">
+            {{ item.name }}
+          </v-chip>
+        </template>
         <v-divider />
       </v-card-text>
       <v-card-actions class="justify-end my-1 mr-2">
@@ -414,7 +424,7 @@
 </template>
 
 <script lang="ts" setup>
-import { getCurrentInstance, onUnmounted, type Ref, ref, watch } from "vue";
+import { computed, getCurrentInstance, onUnmounted, type Ref, ref, watch } from "vue";
 
 import type { Tab } from "../components/dynamic_tabs.vue";
 import { useLayout } from "../components/weblet_layout.vue";
@@ -464,46 +474,102 @@ const deletingDialog = ref(false);
 const table = ref() as Ref<{ loadDeployments(): void }>;
 const gridStore = useGrid();
 const grid = gridStore.client as GridClient;
+const hasWorkers = computed(
+  () => selectedItems.value.map(item => item.projectName.includes(ProjectName.Caprover.toLocaleLowerCase())).length > 0,
+);
 
 const _idx = tabs.findIndex(t => t.value === props.projectName);
 const activeTab = ref(!props.projectName ? 0 : _idx) as Ref<number>;
 watch(activeTab, () => (selectedItems.value = []));
 
 async function onDelete(k8s = false) {
+  try {
+    prepareForDeletion();
+    await processSelectedItems(k8s);
+    refreshDeployments();
+  } catch (e) {
+    handleError(e);
+  } finally {
+    finalizeDeletion();
+  }
+}
+
+function prepareForDeletion() {
   deletingDialog.value = false;
   deleting.value = true;
+}
+
+async function processSelectedItems(k8s: boolean) {
+  const itemsToDelete = getAllItemsToDelete();
+
+  for (const item of itemsToDelete) {
+    await deleteItem(item, k8s);
+  }
+}
+
+function getAllItemsToDelete() {
+  const itemsToDelete = [...selectedItems.value];
+
+  selectedItems.value.forEach(item => {
+    if (item?.projectName.toLowerCase().includes(ProjectName.Caprover.toLowerCase())) {
+      itemsToDelete.push(...item.workers);
+    }
+  });
+
+  return itemsToDelete;
+}
+
+async function deleteItem(item: any, k8s: boolean) {
   try {
-    for (const item of selectedItems.value) {
-      try {
-        if (props.projectName?.toLowerCase() === ProjectName.Domains.toLowerCase()) {
-          await deleteGatewayDeployment(
-            updateGrid(grid, { projectName: props.projectName.toLocaleLowerCase() }),
-            item[0].workloads[0].name as string,
-          );
-        } else {
-          await deleteDeployment(updateGrid(grid!, { projectName: item.projectName }), {
-            deploymentName: item.deploymentName,
-            name: k8s ? item.deploymentName : item.name,
-            projectName: item.projectName,
-            ip: item.interfaces?.[0]?.ip,
-            k8s,
-          });
-        }
-      } catch (e: any) {
-        createCustomToast(`Failed to delete deployment with name: ${item.name}`, ToastType.danger);
-        console.log("Error while deleting deployment", e.message);
-        continue;
-      }
+    if (isDomainProject()) {
+      await deleteDomainProject(item);
+    } else {
+      await deleteStandardItem(item, k8s);
     }
-    table.value?.loadDeployments();
-  } catch (e) {
-    createCustomToast((e as Error).message, ToastType.danger);
-  } finally {
-    selectedItems.value = [];
-    deleting.value = false;
+  } catch (e: any) {
+    logDeletionError(item.name, e);
   }
 }
 
+function isDomainProject() {
+  return props.projectName?.toLowerCase() === ProjectName.Domains.toLowerCase();
+}
+
+async function deleteDomainProject(item: any) {
+  await deleteGatewayDeployment(
+    updateGrid(grid, { projectName: props.projectName!.toLowerCase() }),
+    item.workloads[0].name as string,
+  );
+}
+
+async function deleteStandardItem(item: any, k8s: boolean) {
+  await deleteDeployment(updateGrid(grid!, { projectName: item.projectName }), {
+    deploymentName: item.deploymentName,
+    name: k8s ? item.deploymentName : item.name,
+    projectName: item.projectName,
+    ip: item.interfaces?.[0]?.ip,
+    k8s,
+  });
+}
+
+function logDeletionError(itemName: string, error: any) {
+  createCustomToast(`Failed to delete deployment with name: ${itemName}`, ToastType.danger);
+  console.error("Error while deleting deployment", error.message);
+}
+
+function refreshDeployments() {
+  table.value?.loadDeployments();
+}
+
+function handleError(e: any) {
+  createCustomToast((e as Error).message, ToastType.danger);
+}
+
+function finalizeDeletion() {
+  selectedItems.value = [];
+  deleting.value = false;
+}
+
 const VMS: string[] = [ProjectName.Fullvm, ProjectName.VM, ProjectName.NodePilot];
 function openDialog(project: string, item?: any): void {
   const key: keyof typeof deploymentListEnvironments = VMS.includes(project)

From 0f1d968d6a78459d1dc12c141a76452f82d4e76c Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Wed, 4 Sep 2024 16:33:13 +0300
Subject: [PATCH 05/10] fix: Use `map.some()` instead of map.length.

- Used the some() method since it'll be faster than the `filter` method.
- Update the checker to check if the selected items have workers.
---
 packages/playground/src/weblets/tf_deployment_list.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index 59c7bbe9be..8c6b8fab8a 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -474,9 +474,7 @@ const deletingDialog = ref(false);
 const table = ref() as Ref<{ loadDeployments(): void }>;
 const gridStore = useGrid();
 const grid = gridStore.client as GridClient;
-const hasWorkers = computed(
-  () => selectedItems.value.map(item => item.projectName.includes(ProjectName.Caprover.toLocaleLowerCase())).length > 0,
-);
+const hasWorkers = computed(() => selectedItems.value.map(item => item.workers && item.workers.length).some(i => i));
 
 const _idx = tabs.findIndex(t => t.value === props.projectName);
 const activeTab = ref(!props.projectName ? 0 : _idx) as Ref<number>;

From c0367be20b1b7d7ed1f52b620311521e8ae0ab84 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Sun, 22 Sep 2024 12:40:04 +0300
Subject: [PATCH 06/10] fix: Fix listing Caprover:

- Push the master into the first index of the result array
- Push the workers into the master, second index of the result array
- Tested the code well
---
 .../src/components/vm_deployment_table.vue    | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index a041518947..19d91806d1 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -257,19 +257,26 @@ async function loadDeployments() {
 
     const vms = mergeLoadedDeployments(chunk1, chunk2, chunk3 as any);
     failedDeployments.value = vms.failedDeployments;
-
     count.value = vms.count;
-    items.value = vms.items
-      .map((vm: any) => {
-        if (props.projectName.toLowerCase() === ProjectName.Caprover.toLowerCase()) {
-          const [leader, ...workers] = vm;
-          leader.workers = workers;
-          return leader;
+
+    items.value = vms.items.map((item: any) => {
+      let leader: any = null;
+      const workers: any[] = [];
+
+      item.forEach((vm: any) => {
+        if (vm.env["SWM_NODE_MODE"] === "leader") {
+          leader = vm;
+        } else if (vm.env["SWM_NODE_MODE"] === "worker") {
+          workers.push(vm);
         }
+      });
 
-        return vm;
-      })
-      .flat();
+      if (leader) {
+        leader.workers = workers;
+      }
+
+      return leader || item;
+    });
   } catch (err) {
     errorMessage.value = `Failed to load Deployments: ${err}`;
   } finally {

From 4336eb67df43f202f1de14ae7f8af5f8e84d64d8 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Thu, 26 Sep 2024 10:41:20 +0300
Subject: [PATCH 07/10] fix: Fix deleting Caprover cluster:

- Defined a new function to set the Caprover workers on the Caprover leader
- Delete the workers when delete the leader
- Remove not needed functions
---
 .../manage_caprover_worker_dialog.vue         |  11 +-
 .../src/components/vm_deployment_table.vue    |  21 +---
 .../playground/src/utils/deploy_helpers.ts    |  26 +++-
 .../src/weblets/tf_deployment_list.vue        | 117 ++++++------------
 4 files changed, 70 insertions(+), 105 deletions(-)

diff --git a/packages/playground/src/components/manage_caprover_worker_dialog.vue b/packages/playground/src/components/manage_caprover_worker_dialog.vue
index af4ce86802..a6aea0cf4f 100644
--- a/packages/playground/src/components/manage_caprover_worker_dialog.vue
+++ b/packages/playground/src/components/manage_caprover_worker_dialog.vue
@@ -114,7 +114,7 @@ async function deploy(layout: any) {
 
     await layout.validateBalance(grid);
 
-    const vm = await addMachine(grid!, {
+    const vms = await addMachine(grid!, {
       name: worker.value.name,
       deploymentName: props.master.name,
       cpu: worker.value.solution!.cpu,
@@ -144,10 +144,7 @@ async function deploy(layout: any) {
       }),
     });
 
-    const [leader, ...workers] = vm;
-    leader.workers = workers;
-    leader.projectName = props.projectName;
-    leader.deploymentName = leader.name;
+    const leader = setCaproverWorkers(vms, props.projectName);
     caproverData.value = leader;
     deployedDialog.value = true;
     layout.setStatus("success", `Successfully add a new worker to Caprover('${props.master.name}') Instance.`);
@@ -159,8 +156,6 @@ async function deploy(layout: any) {
 async function onDelete(cb: (workers: any[]) => void) {
   deleting.value = true;
   for (const worker of selectedWorkers.value) {
-    console.log(props.master.name, worker.name);
-
     try {
       await deleteMachine(grid!, {
         deploymentName: props.master.name,
@@ -185,6 +180,8 @@ async function onDelete(cb: (workers: any[]) => void) {
 <script lang="ts">
 import { calculateRootFileSystem, type GridClient } from "@threefold/grid_client";
 
+import { setCaproverWorkers } from "@/utils/deploy_helpers";
+
 import CaproverWorker, { createWorker } from "../components/caprover_worker.vue";
 import ListTable from "../components/list_table.vue";
 import { updateGrid } from "../utils/grid";
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index 19d91806d1..ca084a9801 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -259,23 +259,9 @@ async function loadDeployments() {
     failedDeployments.value = vms.failedDeployments;
     count.value = vms.count;
 
-    items.value = vms.items.map((item: any) => {
-      let leader: any = null;
-      const workers: any[] = [];
-
-      item.forEach((vm: any) => {
-        if (vm.env["SWM_NODE_MODE"] === "leader") {
-          leader = vm;
-        } else if (vm.env["SWM_NODE_MODE"] === "worker") {
-          workers.push(vm);
-        }
-      });
-
-      if (leader) {
-        leader.workers = workers;
-      }
-
-      return leader || item;
+    items.value = vms.items.map((_vms: any) => {
+      const leader = setCaproverWorkers(_vms);
+      return leader || _vms;
     });
   } catch (err) {
     errorMessage.value = `Failed to load Deployments: ${err}`;
@@ -467,6 +453,7 @@ defineExpose({ loadDeployments });
 
 <script lang="ts">
 import toHumanDate from "@/utils/date";
+import { setCaproverWorkers } from "@/utils/deploy_helpers";
 
 import { ProjectName } from "../types";
 import { migrateModule } from "../utils/migration";
diff --git a/packages/playground/src/utils/deploy_helpers.ts b/packages/playground/src/utils/deploy_helpers.ts
index dfdf9ce6a2..7dfaad5204 100644
--- a/packages/playground/src/utils/deploy_helpers.ts
+++ b/packages/playground/src/utils/deploy_helpers.ts
@@ -1,4 +1,4 @@
-import { NetworkModel } from "@threefold/grid_client";
+import { NetworkModel, type ZmachineData } from "@threefold/grid_client";
 
 import { generateName } from "./strings";
 
@@ -11,6 +11,30 @@ export function createNetwork(network: Network = {}): NetworkModel {
   return nw;
 }
 
+export function setCaproverWorkers(vms: ZmachineData[], projectName: string | undefined = undefined): ZmachineData {
+  let leader: any = null;
+  const workers: any[] = [];
+
+  vms.forEach((vm: any) => {
+    if (vm.env["SWM_NODE_MODE"] === "leader") {
+      leader = vm;
+    } else if (vm.env["SWM_NODE_MODE"] === "worker") {
+      workers.push(vm);
+    }
+
+    if (projectName) {
+      vm.projectName = projectName;
+      vm.deploymentName = leader.name;
+    }
+  });
+
+  if (leader) {
+    leader.workers = workers;
+  }
+
+  return leader as ZmachineData;
+}
+
 export interface Network {
   name?: string;
   ipRange?: string;
diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index a4146cd28b..136b55b0c5 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -493,93 +493,50 @@ const activeTab = ref(!props.projectName ? 0 : _idx) as Ref<number>;
 watch(activeTab, () => (selectedItems.value = []));
 
 async function onDelete(k8s = false) {
-  try {
-    prepareForDeletion();
-    await processSelectedItems(k8s);
-    refreshDeployments();
-  } catch (e) {
-    handleError(e);
-  } finally {
-    finalizeDeletion();
-  }
-}
-
-function prepareForDeletion() {
   deletingDialog.value = false;
   deleting.value = true;
-}
-
-async function processSelectedItems(k8s: boolean) {
-  const itemsToDelete = getAllItemsToDelete();
 
-  for (const item of itemsToDelete) {
-    await deleteItem(item, k8s);
-  }
-}
-
-function getAllItemsToDelete() {
-  const itemsToDelete = [...selectedItems.value];
-
-  selectedItems.value.forEach(item => {
-    if (item?.projectName.toLowerCase().includes(ProjectName.Caprover.toLowerCase())) {
-      itemsToDelete.push(...item.workers);
-    }
-  });
-
-  return itemsToDelete;
-}
-
-async function deleteItem(item: any, k8s: boolean) {
   try {
-    if (isDomainProject()) {
-      await deleteDomainProject(item);
-    } else {
-      await deleteStandardItem(item, k8s);
-    }
-  } catch (e: any) {
-    logDeletionError(item.name, e);
+    const projectNameLower = props.projectName?.toLowerCase();
+    const allSelectedItems = [...selectedItems.value];
+    selectedItems.value.forEach(item => {
+      if (item.projectName.toLowerCase().includes(ProjectName.Caprover.toLowerCase()) && item.workers) {
+        allSelectedItems.push(...item.workers);
+      }
+    });
+
+    await Promise.all(
+      allSelectedItems.map(async item => {
+        try {
+          if (projectNameLower === ProjectName.Domains.toLowerCase()) {
+            await deleteGatewayDeployment(
+              updateGrid(grid, { projectName: projectNameLower }),
+              item[0].workloads[0].name as string,
+            );
+          } else {
+            await deleteDeployment(updateGrid(grid!, { projectName: item.projectName }), {
+              deploymentName: item.deploymentName,
+              name: k8s ? item.deploymentName : item.name,
+              projectName: item.projectName,
+              ip: item.interfaces?.[0]?.ip,
+              k8s,
+            });
+          }
+        } catch (e: any) {
+          createCustomToast(`Failed to delete deployment with name: ${item.name}`, ToastType.danger);
+          console.log("Error while deleting deployment", e.message);
+        }
+      }),
+    );
+    table.value?.loadDeployments();
+  } catch (e) {
+    createCustomToast((e as Error).message, ToastType.danger);
+  } finally {
+    selectedItems.value = [];
+    deleting.value = false;
   }
 }
 
-function isDomainProject() {
-  return props.projectName?.toLowerCase() === ProjectName.Domains.toLowerCase();
-}
-
-async function deleteDomainProject(item: any) {
-  await deleteGatewayDeployment(
-    updateGrid(grid, { projectName: props.projectName!.toLowerCase() }),
-    item.workloads[0].name as string,
-  );
-}
-
-async function deleteStandardItem(item: any, k8s: boolean) {
-  await deleteDeployment(updateGrid(grid!, { projectName: item.projectName }), {
-    deploymentName: item.deploymentName,
-    name: k8s ? item.deploymentName : item.name,
-    projectName: item.projectName,
-    ip: item.interfaces?.[0]?.ip,
-    k8s,
-  });
-}
-
-function logDeletionError(itemName: string, error: any) {
-  createCustomToast(`Failed to delete deployment with name: ${itemName}`, ToastType.danger);
-  console.error("Error while deleting deployment", error.message);
-}
-
-function refreshDeployments() {
-  table.value?.loadDeployments();
-}
-
-function handleError(e: any) {
-  createCustomToast((e as Error).message, ToastType.danger);
-}
-
-function finalizeDeletion() {
-  selectedItems.value = [];
-  deleting.value = false;
-}
-
 const VMS: string[] = [ProjectName.Fullvm, ProjectName.VM, ProjectName.NodePilot];
 function openDialog(project: string, item?: any): void {
   const key: keyof typeof deploymentListEnvironments = VMS.includes(project)

From 19dc37cef6c43bd3a7001e79f33083076df8f349 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Thu, 26 Sep 2024 13:20:58 +0300
Subject: [PATCH 08/10] fix: Check if there is a project name before getting
 its data.

---
 packages/playground/src/weblets/tf_deployment_list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index 136b55b0c5..f7da50c72e 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -545,7 +545,7 @@ function openDialog(project: string, item?: any): void {
     ? "k8s"
     : (project.toLowerCase() as any);
 
-  if (item && item.projectName.includes(ProjectName.Caprover.toLocaleLowerCase())) {
+  if (item && item.projectName && item.projectName.includes(ProjectName.Caprover.toLocaleLowerCase())) {
     item = [item, ...item.workers];
   }
 

From 546a9dbd3b4594dd0af1d31995163db27110cfde Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Sun, 29 Sep 2024 10:47:28 +0300
Subject: [PATCH 09/10] fix: Use console.error instead of console.log

---
 packages/playground/src/weblets/tf_deployment_list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index f7da50c72e..741fc06977 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -524,7 +524,7 @@ async function onDelete(k8s = false) {
           }
         } catch (e: any) {
           createCustomToast(`Failed to delete deployment with name: ${item.name}`, ToastType.danger);
-          console.log("Error while deleting deployment", e.message);
+          console.error("Error while deleting deployment", e.message);
         }
       }),
     );

From b781475766a3a0b1ff90d8facf1ee437a3b6d0d1 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Thu, 17 Oct 2024 14:10:27 +0300
Subject: [PATCH 10/10] fix: Remove workers from the deployment list of the
 leader deleted

- Ensure that workers are correctly removed from the deployment list when the leader is deleted to maintain data integrity.
- Merged the latest changes from the development branch to keep the codebase up to date.
- Conducted thorough testing to verify the complete functionality and ensure no regressions were introduced.

Test Scenarios

1. Deploy `leader`, and `worker`, Go go to the contracts page and delete the deployed `leader`.
2. Deploy `leader`, attach a `worker` to it then delete the whole cluster just in time without refreshing the page.
3. Deploy `leader`, and `worker`, delete the deployed `worker` and attach another, then delete the whole cluster just in time without refreshing the page.
4. Deploy a cluster with 1 leader and 2 workers check the deployment listing dialog and make sure all of them are listed
3. Delete a cluster with the leader and more than 3 workers and make sure all of them are deleted.

PS: Make sure no errors on the Caprover listing page.
---
 .../src/components/vm_deployment_table.vue     |  9 +++++++--
 .../playground/src/utils/deploy_helpers.ts     |  2 +-
 yarn.lock                                      | 18 +++++++++---------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index ca084a9801..d5ee54739d 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -258,11 +258,16 @@ async function loadDeployments() {
     const vms = mergeLoadedDeployments(chunk1, chunk2, chunk3 as any);
     failedDeployments.value = vms.failedDeployments;
     count.value = vms.count;
-
-    items.value = vms.items.map((_vms: any) => {
+    const updatedVMS = vms.items.map((_vms: any) => {
       const leader = setCaproverWorkers(_vms);
       return leader || _vms;
     });
+
+    const has_leader = updatedVMS.filter(vm => vm.env && vm.env["SWM_NODE_MODE"] === "leader").length > 0;
+
+    if (has_leader) {
+      items.value = updatedVMS;
+    }
   } catch (err) {
     errorMessage.value = `Failed to load Deployments: ${err}`;
   } finally {
diff --git a/packages/playground/src/utils/deploy_helpers.ts b/packages/playground/src/utils/deploy_helpers.ts
index 7dfaad5204..63e165424d 100644
--- a/packages/playground/src/utils/deploy_helpers.ts
+++ b/packages/playground/src/utils/deploy_helpers.ts
@@ -22,7 +22,7 @@ export function setCaproverWorkers(vms: ZmachineData[], projectName: string | un
       workers.push(vm);
     }
 
-    if (projectName) {
+    if (projectName && leader) {
       vm.projectName = projectName;
       vm.deploymentName = leader.name;
     }
diff --git a/yarn.lock b/yarn.lock
index 96d5cff6ee..62e19cc281 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5861,10 +5861,10 @@ cookie-signature@1.0.6:
   resolved "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz"
   integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
-cookie@0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
-  integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
+cookie@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.1.tgz#2f73c42142d5d5cf71310a74fc4ae61670e5dbc9"
+  integrity sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==
 
 core-js@^3.6.0, core-js@^3.8.3:
   version "3.36.1"
@@ -7178,17 +7178,17 @@ expect@^29.7.0:
     jest-message-util "^29.7.0"
     jest-util "^29.7.0"
 
-express@^4.21.0:
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.21.0.tgz#d57cb706d49623d4ac27833f1cbc466b668eb915"
-  integrity sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==
+express@^4.21.1:
+  version "4.21.1"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.21.1.tgz#9dae5dda832f16b4eec941a4e44aa89ec481b281"
+  integrity sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
     body-parser "1.20.3"
     content-disposition "0.5.4"
     content-type "~1.0.4"
-    cookie "0.6.0"
+    cookie "0.7.1"
     cookie-signature "1.0.6"
     debug "2.6.9"
     depd "2.0.0"