Fix deployment list

packages/playground/src/components/manage_caprover_worker_dialog.vue

@@ -7,6 +7,7 @@
     @deploy="deploy"
     @delete="onDelete"
     @back="updateCaprover"
+    @click:outside="updateCaprover"
   >
     <template #title>Manage Caprover({{ $props.master.name }}) Workers</template>
 
@@ -144,9 +145,17 @@ async function deploy(layout: any) {
       }),
     });
 
-    const leader = setCaproverWorkers(vms, props.projectName);
+    const [leader, ...workers] = vms;
+    leader.workers = workers;
+    leader.projectName = props.projectName;
+    leader.deploymentName = leader.name;
     caproverData.value = leader;
     deployedDialog.value = true;
+    workers.forEach((worker: any) => {
+      if (!worker.projectName) worker.projectName = props.projectName;
+      if (!worker.deploymentName) worker.deploymentName = leader.name;
+    });
+    emits("update:caprover", leader);
     layout.setStatus("success", `Successfully add a new worker to Caprover('${props.master.name}') Instance.`);
   } catch (e) {
     layout.setStatus("failed", normalizeError(e, "Failed to deploy a caprover worker."));
@@ -180,8 +189,6 @@ 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";

packages/playground/src/components/vm_deployment_table.vue

@@ -241,6 +241,7 @@ async function loadDeployments() {
     if (chunk2.count > 0 && migrateGateways) {
       await migrateModule(grid!.gateway);
     }
+
     let chunk3: LoadedDeployments<any[]> = { count: 0, items: [], failedDeployments: [] };
     if (showAllDeployments.value) {
       chunk3 =
@@ -258,16 +259,7 @@ async function loadDeployments() {
     const vms = mergeLoadedDeployments(chunk1, chunk2, chunk3 as any);
     failedDeployments.value = vms.failedDeployments;
     count.value = vms.count;
-    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;
-    }
+    items.value = mergeCaproverDeployments(vms.items);
   } catch (err) {
     errorMessage.value = `Failed to load Deployments: ${err}`;
   } finally {
@@ -458,7 +450,7 @@ defineExpose({ loadDeployments });
 
 <script lang="ts">
 import toHumanDate from "@/utils/date";
-import { setCaproverWorkers } from "@/utils/deploy_helpers";
+import { mergeCaproverDeployments } from "@/utils/deploy_helpers";
 
 import { ProjectName } from "../types";
 import { migrateModule } from "../utils/migration";

packages/playground/src/utils/deploy_helpers.ts

@@ -1,5 +1,7 @@
 import { NetworkModel, type ZmachineData } from "@threefold/grid_client";
 
+import { ProjectName } from "@/types";
+
 import { generateName } from "./strings";
 
 export function createNetwork(network: Network = {}): NetworkModel {
@@ -11,29 +13,46 @@ 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[] = [];
+export const mergeCaproverDeployments = (clusters: ZmachineData[][]) => {
+  const vms: ZmachineData[] = [];
 
-  vms.forEach((vm: any) => {
-    if (vm.env["SWM_NODE_MODE"] === "leader") {
-      leader = vm;
-    } else if (vm.env["SWM_NODE_MODE"] === "worker") {
-      workers.push(vm);
-    }
+  for (const cluster of clusters) {
+    let clusterLeader = null;
+    const clusterWorkers: any[] = [];
 
-    if (projectName && leader) {
-      vm.projectName = projectName;
-      vm.deploymentName = leader.name;
+    if (!Array.isArray(cluster)) {
+      vms.push(cluster);
+      continue;
     }
-  });
 
-  if (leader) {
-    leader.workers = workers;
+    for (const vm of cluster) {
+      const isCaprover = String((vm as any).projectName)
+        .toLowerCase()
+        .includes(ProjectName.Caprover.toLowerCase());
+      if (!isCaprover) {
+        if (!vms.includes(vm)) {
+          vms.push(vm);
+        }
+        continue;
+      }
+
+      if (vm.env["SWM_NODE_MODE"] === "leader") {
+        clusterLeader = vm;
+      } else if (vm.env["SWM_NODE_MODE"] === "worker") {
+        clusterWorkers.push(vm);
+      }
+
+      if (clusterLeader) {
+        (clusterLeader as any).workers = clusterWorkers;
+        if (!vms.includes(clusterLeader)) {
+          vms.push(clusterLeader);
+        }
+      }
+    }
   }
 
-  return leader as ZmachineData;
-}
+  return vms;
+};
 
 export interface Network {
   name?: string;

packages/playground/src/weblets/tf_deployment_list.vue

@@ -56,12 +56,18 @@
             @click="openDialog(tabs[activeTab].value, item)"
           />
           <IconActionBtn
+            v-if="isCaproverLeader(item)"
             tooltip="Admin Panel"
             color="anchor"
             icon="mdi-view-dashboard"
             :href="'http://captain.' + item.env.CAPROVER_ROOT_DOMAIN"
           />
-          <IconActionBtn icon="mdi-cog" tooltip="Manage Workers" @click="dialog = item.name" />
+          <IconActionBtn
+            v-if="isCaproverLeader(item)"
+            icon="mdi-cog"
+            tooltip="Manage Workers"
+            @click="dialog = item.name"
+          />
 
           <ManageCaproverWorkerDialog
             v-if="dialog === item.name"
@@ -487,6 +493,7 @@ const table = ref() as Ref<{ loadDeployments(): void }>;
 const gridStore = useGrid();
 const grid = gridStore.client as GridClient;
 const hasWorkers = computed(() => selectedItems.value.map(item => item.workers && item.workers.length).some(i => i));
+const isCaproverLeader = (vm: ZmachineData) => vm.env["SWM_NODE_MODE"] === "leader";
 
 const _idx = tabs.findIndex(t => t.value === props.projectName);
 const activeTab = ref(!props.projectName ? 0 : _idx) as Ref<number>;
@@ -505,29 +512,29 @@ async function onDelete(k8s = false) {
       }
     });
 
-    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.error("Error while deleting deployment", e.message);
+    await allSelectedItems.reduce(async (acc, item) => {
+      await acc;
+      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.error("Error while deleting deployment", e.message);
+      }
+    }, Promise.resolve());
+
     table.value?.loadDeployments();
   } catch (e) {
     createCustomToast((e as Error).message, ToastType.danger);
@@ -546,7 +553,11 @@ function openDialog(project: string, item?: any): void {
     : (project.toLowerCase() as any);
 
   if (item && item.projectName && item.projectName.includes(ProjectName.Caprover.toLocaleLowerCase())) {
-    item = [item, ...item.workers];
+    if (!item.workers) {
+      item = [item];
+    } else {
+      item = [item, ...item.workers];
+    }
   }
 
   layout.value.openDialog(item, deploymentListEnvironments[key]);
@@ -568,7 +579,7 @@ onUnmounted(() => deploymentListManager?.unregister(uid));
 </script>
 
 <script lang="ts">
-import type { GridClient } from "@threefold/grid_client";
+import type { GridClient, ZmachineData } from "@threefold/grid_client";
 
 import { useDeploymentListManager } from "../components/deployment_list_manager.vue";
 import IconActionBtn from "../components/icon_action_btn.vue";