Merge pull request #3363 from threefoldtech/development_caprover

Fix: CapRover Dashboard App: Details of Workers disappear after few seconds
threefoldtech · Oct 20, 2024 · d1f7304 · d1f7304
2 parents 56ca263 + b781475
commit d1f7304
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 57 deletions.
diff --git 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(async () => await 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/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
@@ -257,19 +257,17 @@ 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;
-        }
-
-        return vm;
-      })
-      .flat();
+    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 {
@@ -460,6 +458,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
@@ -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 && leader) {
+      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
@@ -410,9 +410,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">
@@ -424,7 +434,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";
@@ -476,6 +486,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.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>;
@@ -484,29 +495,39 @@ watch(activeTab, () => (selectedItems.value = []));
 async function onDelete(k8s = false) {
   deletingDialog.value = false;
   deleting.value = true;
+
   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;
+    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.error("Error while deleting deployment", e.message);
+        }
+      }),
+    );
     table.value?.loadDeployments();
   } catch (e) {
     createCustomToast((e as Error).message, ToastType.danger);
@@ -523,6 +544,11 @@ function openDialog(project: string, item?: any): void {
     : project === ProjectName.Kubernetes
     ? "k8s"
     : (project.toLowerCase() as any);
+
+  if (item && item.projectName && item.projectName.includes(ProjectName.Caprover.toLocaleLowerCase())) {
+    item = [item, ...item.workers];
+  }
+
   layout.value.openDialog(item, deploymentListEnvironments[key]);
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -5861,10 +5861,10 @@ [email protected]:
   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"