Merge pull request #2944 from threefoldtech/development_fix_manage_mu…

…ltiple_vms_deployment Fix manage multiple vms deployment
threefoldtech · Jun 11, 2024 · 9fd76a5 · 9fd76a5
2 parents ad4143f + c83d078
commit 9fd76a5
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 20 deletions.
diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -273,7 +273,9 @@ export default {
         loadingGateways.value = true;
         updateGrid(grid, { projectName: props.vm.projectName });
 
-        const { gateways: gws, failedToList } = await loadDeploymentGateways(grid!);
+        const { gateways: gws, failedToList } = await loadDeploymentGateways(grid!, {
+          filter: gw => gw.backends.some(bk => bk.includes(ip)),
+        });
         gateways.value = gws;
         failedToListGws.value = failedToList;
       } catch (error) {

diff --git a/packages/playground/src/utils/delete_deployment.ts b/packages/playground/src/utils/delete_deployment.ts
@@ -7,8 +7,10 @@ import { getSubdomain, loadDeploymentGateways } from "./gateway";
 import { updateGrid } from "./grid";
 
 export interface DeleteDeploymentOptions {
+  deploymentName?: string;
   name: string;
   projectName: ProjectName;
+  ip?: string;
   k8s?: boolean;
 }
 
@@ -25,7 +27,7 @@ export async function deleteDeployment(grid: GridClient, options: DeleteDeployme
 
   /* For fvm/vm */
   if (isVm(options.projectName)) {
-    await deleteVmGateways(grid);
+    await deleteVmGateways(grid, options.ip);
   }
 
   /* For solutions */
@@ -36,7 +38,15 @@ export async function deleteDeployment(grid: GridClient, options: DeleteDeployme
   /* End Delete gateway */
 
   /* Delete deployment */
-  return options.k8s ? grid.k8s.delete({ name: options.name }) : grid.machines.delete({ name: options.name });
+  if (options.k8s) {
+    return grid.k8s.delete({ name: options.name });
+  }
+
+  if (options.deploymentName) {
+    return grid.machines.delete_machine({ deployment_name: options.deploymentName, name: options.name });
+  }
+
+  return grid.machines.delete({ name: options.name });
 }
 
 export async function deleteDeploymentGateway(grid: GridClient, options: DeleteDeploymentOptions) {
@@ -93,8 +103,10 @@ function isVm(projectName: string) {
   return false;
 }
 
-async function deleteVmGateways(grid: GridClient) {
-  const { gateways } = await loadDeploymentGateways(grid);
+async function deleteVmGateways(grid: GridClient, ip?: string) {
+  const { gateways } = await loadDeploymentGateways(grid, {
+    filter: ip ? gw => gw.backends.some(bk => bk.includes(ip)) : undefined,
+  });
   for (const gateway of gateways) {
     try {
       if (gateway.type.includes("name")) {

diff --git a/packages/playground/src/utils/gateway.ts b/packages/playground/src/utils/gateway.ts
@@ -75,7 +75,11 @@ export async function rollbackDeployment(grid: GridClient, name: string) {
 }
 
 export type GridGateway = Awaited<ReturnType<GridClient["gateway"]["getObj"]>>[0];
-export async function loadDeploymentGateways(grid: GridClient) {
+interface LoadDeploymentGatewaysOptions {
+  filter?: (gateway: GridGateway) => boolean;
+}
+
+export async function loadDeploymentGateways(grid: GridClient, options?: LoadDeploymentGatewaysOptions) {
   const failedToList: string[] = [];
   const gws = await grid.gateway.list();
   const items = await Promise.all(
@@ -97,5 +101,13 @@ export async function loadDeploymentGateways(grid: GridClient) {
         .finally(() => timeout && clearTimeout(timeout));
     }),
   );
-  return { gateways: items.flat().filter(Boolean) as GridGateway[], failedToList };
+
+  const filter = options?.filter ?? (() => true);
+  return {
+    gateways: items
+      .flat()
+      .filter(Boolean)
+      .filter(filter as any) as GridGateway[],
+    failedToList,
+  };
 }
diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -26,9 +26,9 @@
             @click="openDialog(tabs[activeTab].value, item)"
           />
 
-          <IconActionBtn icon="mdi-cog" tooltip="Manage Domains" @click="dialog = item.deploymentName" />
+          <IconActionBtn icon="mdi-cog" tooltip="Manage Domains" @click="dialog = item.name" />
 
-          <ManageGatewayDialog v-if="dialog === item.deploymentName" :vm="item" @close="dialog = undefined" />
+          <ManageGatewayDialog v-if="dialog === item.name" :vm="item" @close="dialog = undefined" />
         </template>
 
         <template #VM-actions="{ item }">
@@ -42,10 +42,10 @@
             icon="mdi-cog"
             tooltip="Manage Domains"
             :disabled="item.fromAnotherClient"
-            @click="dialog = item.deploymentName"
+            @click="dialog = item.name"
           />
 
-          <ManageGatewayDialog v-if="dialog === item.deploymentName" :vm="item" @close="dialog = undefined" />
+          <ManageGatewayDialog v-if="dialog === item.name" :vm="item" @close="dialog = undefined" />
         </template>
 
         <template #CapRover-actions="{ item, update }">
@@ -60,10 +60,10 @@
             icon="mdi-view-dashboard"
             :href="'http://captain.' + item.env.CAPROVER_ROOT_DOMAIN"
           />
-          <IconActionBtn icon="mdi-cog" tooltip="Manage Workers" @click="dialog = item.deploymentName" />
+          <IconActionBtn icon="mdi-cog" tooltip="Manage Workers" @click="dialog = item.name" />
 
           <ManageCaproverWorkerDialog
-            v-if="dialog === item.deploymentName"
+            v-if="dialog === item.name"
             :master="item"
             :data="item.workers || []"
             :project-name="item.projectName"
@@ -317,11 +317,11 @@
               icon="mdi-cog"
               :disabled="item.fromAnotherClient"
               tooltip="Manage Workers"
-              @click="dialog = item.deploymentName"
+              @click="dialog = item.name"
             />
 
             <ManageK8SWorkerDialog
-              v-if="dialog === item.deploymentName"
+              v-if="dialog === item.name"
               :data="item"
               @close="dialog = undefined"
               @update:k8s="item.workers = $event.workers"
@@ -349,8 +349,8 @@
         <strong>Delete the following deployments?</strong>
       </v-card-title>
       <v-card-text>
-        <v-chip class="ma-1" v-for="item in selectedItems" :key="item.deploymentName">
-          {{ item.deploymentName }}
+        <v-chip class="ma-1" v-for="item in selectedItems" :key="item.name">
+          {{ item.name }}
         </v-chip>
         <v-divider />
       </v-card-text>
@@ -421,17 +421,19 @@ async function onDelete(k8s = false) {
     for (const item of selectedItems.value) {
       try {
         await deleteDeployment(updateGrid(grid!, { projectName: item.projectName }), {
-          name: item.deploymentName,
+          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.deploymentName}`, ToastType.danger);
+        createCustomToast(`Failed to delete deployment with name: ${item.name}`, ToastType.danger);
         console.log("Error while deleting deployment", e.message);
         continue;
       }
-      table.value?.loadDeployments();
     }
+    table.value?.loadDeployments();
   } catch (e) {
     createCustomToast((e as Error).message, ToastType.danger);
   } finally {