From 1f525e8f75cc1ee1e75f37c412ed5bf5647a77f4 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 12 Jun 2025 15:51:27 +0300
Subject: [PATCH 01/15] - Load all deployments in parallel - Handle migrations
 in parallel if needed - Add grid client cache - Add batch processing utility
 - Create grid clients in parallel with caching - Load contracts and node IDs
 in parallel for each machine - Process consumptions in batches - Process
 wireguard configs in batches

---
 .../src/components/vm_deployment_table.vue    | 151 +++++-------------
 .../playground/src/utils/batch_process.ts     |  13 ++
 .../playground/src/utils/load_deployment.ts   | 133 +++++++++------
 3 files changed, 133 insertions(+), 164 deletions(-)
 create mode 100644 packages/playground/src/utils/batch_process.ts

diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index a170a637a3..80972ab605 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -1,33 +1,18 @@
 <template>
   <div>
-    <v-alert
-      v-if="errorMessage"
-      type="error"
-      variant="tonal"
-    >
+    <v-alert v-if="errorMessage" type="error" variant="tonal">
       {{ errorMessage }}
     </v-alert>
-    <v-alert
-      v-if="!loading && count && items.length < count"
-      type="warning"
-      variant="tonal"
-    >
+    <v-alert v-if="!loading && count && items.length < count" type="warning" variant="tonal">
       Failed to load <strong>{{ count - items.length }}</strong> deployment{{ count - items.length > 1 ? "s" : "" }}.
 
       <span>
         This might happen because the node is down or it's not reachable
         <span v-if="showEncryption">or the deployment{{ count - items.length > 1 ? "s are" : " is" }} encrypted by another key</span>.
       </span>
-      <v-tooltip
-        location="top"
-        text="Show failed deployments"
-      >
+      <v-tooltip location="top" text="Show failed deployments">
         <template #activator="{ props: slotProps }">
-          <v-icon
-            v-bind="slotProps"
-            class="custom-icon"
-            @click="showDialog = true"
-          >
+          <v-icon v-bind="slotProps" class="custom-icon" @click="showDialog = true">
             mdi-file-document-refresh-outline
           </v-icon>
         </template>
@@ -41,15 +26,10 @@
         attach="#modals"
       >
         <v-card>
-          <v-card-title style="font-weight: bold">
-            Failed Deployments
-          </v-card-title>
+          <v-card-title style="font-weight: bold"> Failed Deployments </v-card-title>
           <v-divider color="#FFCC00" />
           <v-card-text>
-            <v-alert
-              type="error"
-              variant="tonal"
-            >
+            <v-alert type="error" variant="tonal">
               Failed to load
               <strong>{{ count - items.length }}</strong> deployment{{ count - items.length > 1 ? "s" : "" }}.
 
@@ -58,23 +38,14 @@
                 <span v-if="showEncryption">or the deployment{{ count - items.length > 1 ? "s are" : " is" }} encrypted by another key</span>.
               </span>
             </v-alert>
-            <v-list
-              :items="failedDeploymentList"
-              item-props
-              lines="three"
-            >
+            <v-list :items="failedDeploymentList" item-props lines="three">
               <template #subtitle="{ subtitle }">
                 <div v-html="subtitle" />
               </template>
             </v-list>
           </v-card-text>
           <v-card-actions class="justify-end my-1 mr-2">
-            <v-btn
-              color="anchor"
-              @click="showDialog = false"
-            >
-              Close
-            </v-btn>
+            <v-btn color="anchor" @click="showDialog = false"> Close </v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -139,10 +110,7 @@
       </template>
 
       <template #[`item.flist`]="{ item }">
-        <v-tooltip
-          :text="item.flist"
-          location="bottom right"
-        >
+        <v-tooltip :text="item.flist" location="bottom right">
           <template #activator="{ props: slotProps }">
             <p v-bind="slotProps">
               {{ renameFlist(item.flist) }}
@@ -158,40 +126,18 @@
         {{ toHumanDate(item.created) }}
       </template>
       <template #[`item.actions`]="{ item }">
-        <v-chip
-          v-if="deleting && ($props.modelValue || []).includes(item)"
-          color="error"
-        >
-          Deleting...
-        </v-chip>
-        <v-btn-group
-          v-else
-          variant="tonal"
-        >
-          <slot
-            :name="projectName + '-actions'"
-            :item="item"
-            :update="updateItem"
-          />
+        <v-chip v-if="deleting && ($props.modelValue || []).includes(item)" color="error"> Deleting... </v-chip>
+        <v-btn-group v-else variant="tonal">
+          <slot :name="projectName + '-actions'" :item="item" :update="updateItem" />
         </v-btn-group>
       </template>
 
       <template #[`item.status`]="{ item }">
         <v-chip :color="getNodeHealthColor(item.status as string).color">
-          <v-tooltip
-            v-if="item.status == NodeHealth.Error"
-            activator="parent"
-            location="top"
-          >
-            {{
-              item.message
-            }}
+          <v-tooltip v-if="item.status == NodeHealth.Error" activator="parent" location="top">
+            {{ item.message }}
           </v-tooltip>
-          <v-tooltip
-            v-if="item.status == NodeHealth.Paused"
-            activator="parent"
-            location="top"
-          >
+          <v-tooltip v-if="item.status == NodeHealth.Paused" activator="parent" location="top">
             The deployment contract is in grace period
           </v-tooltip>
           <span class="text-uppercase">
@@ -201,20 +147,10 @@
       </template>
       <template #[`item.health`]="{ item }">
         <v-chip :color="getNodeHealthColor(item[0].workloads[0].result.state as string).color">
-          <v-tooltip
-            v-if="item[0].workloads[0].result.state == NodeHealth.Error"
-            activator="parent"
-            location="top"
-          >
-            {{
-              item.message
-            }}
+          <v-tooltip v-if="item[0].workloads[0].result.state == NodeHealth.Error" activator="parent" location="top">
+            {{ item.message }}
           </v-tooltip>
-          <v-tooltip
-            v-if="item[0].workloads[0].result.state == NodeHealth.Paused"
-            activator="parent"
-            location="top"
-          >
+          <v-tooltip v-if="item[0].workloads[0].result.state == NodeHealth.Paused" activator="parent" location="top">
             The deployment contract is in grace period
           </v-tooltip>
           <span class="text-uppercase">
@@ -224,10 +160,7 @@
       </template>
 
       <template #no-data-text>
-        <div
-          v-if="failedDeploymentList.length > 0"
-          class="text-center"
-        >
+        <div v-if="failedDeploymentList.length > 0" class="text-center">
           <p v-text="'Couldn\'t load any of your ' + projectTitle + ' deployments.'" />
           <VBtn
             class="mt-4"
@@ -238,10 +171,7 @@
             @click="loadDeployments"
           />
         </div>
-        <p
-          v-else
-          v-text="'No ' + projectTitle + ' deployments found on this account.'"
-        />
+        <p v-else v-text="'No ' + projectTitle + ' deployments found on this account.'" />
       </template>
     </ListTable>
   </div>
@@ -255,7 +185,7 @@ import { getNodeHealthColor, NodeHealth } from "@/utils/get_nodes";
 import { useProfileManager } from "../stores";
 import { getGrid, updateGrid } from "../utils/grid";
 import { markAsFromAnotherClient } from "../utils/helpers";
-import { type LoadedDeployments, loadVms, mergeLoadedDeployments } from "../utils/load_deployment";
+import { loadVms, mergeLoadedDeployments } from "../utils/load_deployment";
 
 const profileManager = useProfileManager();
 
@@ -303,6 +233,7 @@ async function loadDomains() {
 }
 
 async function loadDeployments() {
+  const start = performance.now();
   if (props.projectName.toLowerCase() === ProjectName.Domains.toLowerCase()) {
     return loadDomains();
   }
@@ -313,27 +244,23 @@ async function loadDeployments() {
   loading.value = true;
   const grid = await getGrid(profileManager.profile!, props.projectName);
   try {
-    const chunk1 = await loadVms(grid!);
-    if (chunk1.count > 0 && migrateGateways) {
-      await migrateModule(grid!.gateway);
+    const [chunk1, chunk2, chunk3] = await Promise.all([
+      loadVms(grid!),
+      loadVms(updateGrid(grid!, { projectName: props.projectName.toLowerCase() })),
+      showAllDeployments.value && props.projectName.toLowerCase() === ProjectName.VM.toLowerCase()
+        ? loadVms(updateGrid(grid!, { projectName: "" }))
+        : Promise.resolve({ count: 0, items: [], failedDeployments: [] }),
+    ]);
+
+    if (migrateGateways) {
+      await Promise.all([
+        chunk1.count > 0 && migrateModule(grid!.gateway),
+        chunk2.count > 0 && migrateModule(grid!.gateway),
+        chunk3.count > 0 && migrateModule(grid!.gateway),
+      ]);
     }
 
-    const chunk2 = await loadVms(updateGrid(grid!, { projectName: props.projectName.toLowerCase() }));
-    if (chunk2.count > 0 && migrateGateways) {
-      await migrateModule(grid!.gateway);
-    }
-
-    let chunk3: LoadedDeployments<any[]> = { count: 0, items: [], failedDeployments: [] };
-    if (showAllDeployments.value) {
-      chunk3 =
-        props.projectName.toLowerCase() === ProjectName.VM.toLowerCase()
-          ? await loadVms(updateGrid(grid!, { projectName: "" }))
-          : { count: 0, items: [], failedDeployments: [] };
-
-      if (chunk3.count > 0 && migrateGateways) {
-        await migrateModule(grid!.gateway);
-      }
-
+    if (chunk3.items) {
       chunk3.items = chunk3.items.map(markAsFromAnotherClient);
     }
 
@@ -346,8 +273,8 @@ async function loadDeployments() {
   } finally {
     loading.value = false;
   }
-
-  loading.value = false;
+  const end = performance.now();
+  console.log(`Time taken: ${(end - start) / 1000} seconds`);
 }
 
 const filteredHeaders = computed(() => {
diff --git a/packages/playground/src/utils/batch_process.ts b/packages/playground/src/utils/batch_process.ts
new file mode 100644
index 0000000000..37cbee1b50
--- /dev/null
+++ b/packages/playground/src/utils/batch_process.ts
@@ -0,0 +1,13 @@
+export async function batchProcess<T, R>(
+  items: T[],
+  batchSize: number,
+  processFn: (batch: T[]) => Promise<R[]>,
+): Promise<R[]> {
+  const results: R[] = [];
+  for (let i = 0; i < items.length; i += batchSize) {
+    const batch = items.slice(i, i + batchSize);
+    const batchResults = await processFn(batch);
+    results.push(...batchResults);
+  }
+  return results;
+}
diff --git a/packages/playground/src/utils/load_deployment.ts b/packages/playground/src/utils/load_deployment.ts
index 963b40596c..03d69e486d 100644
--- a/packages/playground/src/utils/load_deployment.ts
+++ b/packages/playground/src/utils/load_deployment.ts
@@ -1,10 +1,10 @@
-import type { GridClient } from "@threefold/grid_client";
+import { type ClientOptions, type GridClient } from "@threefold/grid_client";
 
+import { batchProcess } from "./batch_process";
 import { formatConsumption } from "./contracts";
 import { getGrid, updateGrid } from "./grid";
 import { normalizeError } from "./helpers";
 import { migrateModule } from "./migration";
-
 export interface LoadedDeployments<T> {
   count: number;
   items: T[];
@@ -21,6 +21,22 @@ export interface LoadVMsOptions {
   filter?(vm: any): boolean;
 }
 
+const gridClientCache = new Map<string, GridClient>();
+
+export async function getGridClient(config: ClientOptions, projectName: string): Promise<GridClient> {
+  const cacheKey = `${config.mnemonic}-${projectName}`;
+  if (gridClientCache.has(cacheKey)) {
+    return gridClientCache.get(cacheKey)!;
+  }
+
+  const grid = await getGrid(config, projectName);
+  if (!grid) {
+    throw new Error("Failed to create grid client");
+  }
+  gridClientCache.set(cacheKey, grid);
+  return grid;
+}
+
 async function getDeploymentContracts(grid: GridClient, name: string, projectName: string) {
   const contracts1 = await grid.machines.getDeploymentContracts(name);
   if (contracts1.length) {
@@ -35,60 +51,62 @@ async function getDeploymentContracts(grid: GridClient, name: string, projectNam
 export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
   await migrateModule(grid.machines);
 
+  let count = 0;
   const machines = await grid.machines.list();
-
-  let count = machines.length;
+  count = machines.length;
   const failedDeployments: FailedDeployment[] = [];
 
   const projectName = grid.clientOptions.projectName || "";
-  const grids = (await Promise.all(
-    machines.map(n => getGrid(grid.clientOptions, projectName ? `${projectName}/${n}` : n)),
-  )) as GridClient[];
 
-  const promises = machines.map(async (name, index) => {
-    let contracts: any[] = [];
-    let nodeIds: number[] = [];
+  const grids = await Promise.all(
+    machines.map(n => getGridClient(grid.clientOptions, projectName ? `${projectName}/${n}` : n)),
+  );
 
+  const machinePromises = machines.map(async (name, index) => {
     try {
-      contracts = await getDeploymentContracts(grids[index], name, projectName);
-      nodeIds = await grids[index].machines._getDeploymentNodeIds(name);
-    } catch {
-      failedDeployments.push({ name, contracts: [], nodes: [] });
-      return;
-    }
+      const [contracts, nodeIds] = await Promise.all([
+        getDeploymentContracts(grids[index], name, projectName),
+        grids[index].machines._getDeploymentNodeIds(name),
+      ]);
 
-    if (contracts.length === 0) {
-      count--;
-      return;
-    }
-
-    const machinePromise = grids[index].machines.getObj(name).then(res => {
-      if (!projectName && (!Array.isArray(res) || res.length === 0)) {
-        grids[index] = updateGrid(grids[index], { projectName: "" });
-        return grids[index].machines.getObj(name);
+      if (contracts.length === 0) {
+        count--;
+        return null;
       }
-      return res;
-    });
-    const timeoutPromise = new Promise((resolve, reject) => {
-      setTimeout(() => {
-        reject(new Error("Timeout"));
-      }, window.env.TIMEOUT);
-    });
 
-    try {
-      const result = await Promise.race([machinePromise, timeoutPromise]);
-      if (result instanceof Error && result.message === "Timeout") {
-        console.error(`Timeout loading deployment with name ${name}`);
-        return null;
-      } else {
+      const machinePromise = grids[index].machines.getObj(name).then(res => {
+        if (!projectName && (!Array.isArray(res) || res.length === 0)) {
+          grids[index] = updateGrid(grids[index], { projectName: "" });
+          return grids[index].machines.getObj(name);
+        }
+        return res;
+      });
+
+      const timeoutPromise = new Promise((resolve, reject) => {
+        setTimeout(() => {
+          reject(new Error("Timeout"));
+        }, window.env.TIMEOUT);
+      });
+
+      try {
+        const result = await Promise.race([machinePromise, timeoutPromise]);
+        if (result instanceof Error && result.message === "Timeout") {
+          console.error(`Timeout loading deployment with name ${name}`);
+          return null;
+        }
         return result;
+      } catch (e) {
+        console.error(`Failed to load deployment with name ${name}:\n${normalizeError(e, "No errors were provided.")}`);
+        failedDeployments.push({ name, nodes: nodeIds, contracts });
+        return null;
       }
-    } catch (e) {
-      console.error(`Failed to load deployment with name ${name}:\n${normalizeError(e, "No errors were provided.")}`);
-      failedDeployments.push({ name, nodes: nodeIds, contracts: contracts });
+    } catch {
+      failedDeployments.push({ name, contracts: [], nodes: [] });
+      return null;
     }
   });
-  const items = await Promise.all(promises);
+
+  const items = await Promise.all(machinePromises);
   const vms = items
     .map((item: any, index) => {
       if (item) {
@@ -115,16 +133,27 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
       }
       return true;
     }) as any[][];
-  const consumptions = await Promise.all(
-    vms.map((vm, index) => {
-      return grids[index].contracts.getConsumption({ id: vm[0].contractId }).catch(() => undefined);
-    }),
-  );
-  const wireguards = await Promise.all(
-    vms.map((vm, index) =>
-      getWireguardConfig(grids[index], vm[0].interfaces[0].network, vm[0].interfaces[0].ip).catch(() => []),
-    ),
-  );
+
+  const BATCH_SIZE = 10;
+  const consumptions = await batchProcess(vms, BATCH_SIZE, async batch => {
+    return Promise.all(
+      batch.map(vm => {
+        const gridIndex = vms.indexOf(vm);
+        return grids[gridIndex].contracts.getConsumption({ id: vm[0].contractId }).catch(() => undefined);
+      }),
+    );
+  });
+
+  const wireguards = await batchProcess(vms, BATCH_SIZE, async batch => {
+    return Promise.all(
+      batch.map(vm => {
+        const gridIndex = vms.indexOf(vm);
+        return getWireguardConfig(grids[gridIndex], vm[0].interfaces[0].network, vm[0].interfaces[0].ip).catch(
+          () => [],
+        );
+      }),
+    );
+  });
 
   const data = vms.map((vm, index) => {
     for (let i = 0; i < vm.length; i++) {

From 3e900a97a916af7cdbdee1b4971d4572f5a649fc Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 19 Jun 2025 13:24:59 +0300
Subject: [PATCH 02/15] Optimize contracts fetching

---
 .../src/weblets/tf_contracts_list.vue         | 108 ++++++++++--------
 1 file changed, 61 insertions(+), 47 deletions(-)

diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index f30e20c2a1..36dd313b7e 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -10,12 +10,8 @@
 
   <!-- Contracts List Card -->
   <v-card color="primary" class="d-flex justify-center items-center mb-4 pa-3 text-center">
-    <v-icon size="30" class="pr-3">
-      mdi-file-document-edit
-    </v-icon>
-    <v-card-title class="pa-0">
-      Contracts List
-    </v-card-title>
+    <v-icon size="30" class="pr-3"> mdi-file-document-edit </v-icon>
+    <v-card-title class="pa-0"> Contracts List </v-card-title>
   </v-card>
 
   <v-alert class="mb-4 text-subtitle-2 font-weight-regular" type="info" variant="tonal">
@@ -24,15 +20,15 @@
       class="app-link font-weight-medium"
       target="_blank"
       href="https://www.manual.grid.tf/documentation/developers/tfchain/tfchain.html"
-    >Contract Documentation,
+      >Contract Documentation,
     </a>
     and to explore further contract details, check
     <a
       class="app-link font-weight-medium"
       target="_blank"
       href="https://www.manual.grid.tf/documentation/dashboard/deploy/your_contracts.html"
-    >Node Contract Documentation.</a>
-    <br>
+      >Node Contract Documentation.</a>
+    <br />
   </v-alert>
 
   <v-card variant="text" class="my-3">
@@ -77,9 +73,7 @@
     <template #title>
       <v-row>
         <v-col class="d-flex justify-start">
-          <p class="text-subtitle-1">
-            Total cost of contracts
-          </p>
+          <p class="text-subtitle-1">Total cost of contracts</p>
         </v-col>
       </v-row>
     </template>
@@ -120,9 +114,7 @@
       <v-card-text v-if="loadingLockDetails" class="d-flex flex-column justify-center align-center pb-0 pt-6">
         <v-progress-circular indeterminate />
 
-        <div class="text-subtitle-2 pt">
-          Loading contracts lock details
-        </div>
+        <div class="text-subtitle-2 pt">Loading contracts lock details</div>
         <v-divider class="mt-3" />
       </v-card-text>
       <v-card-text v-else>
@@ -146,9 +138,7 @@
         <v-divider class="mt-3" />
       </v-card-text>
       <v-card-actions class="justify-end mb-1 mr-2">
-        <v-btn color="anchor" @click="unlockDialog = false">
-          Close
-        </v-btn>
+        <v-btn color="anchor" @click="unlockDialog = false"> Close </v-btn>
         <v-tooltip
           :text="
             freeBalance < lockedContracts?.totalOverdueAmount
@@ -178,9 +168,7 @@
   <!-- delete all dialog-->
   <v-dialog v-model="deleteDialog" width="800" attach="#modals">
     <v-card>
-      <v-card-title class="bg-primary">
-        Delete all your contracts
-      </v-card-title>
+      <v-card-title class="bg-primary"> Delete all your contracts </v-card-title>
       <v-alert class="mx-4 mt-4" type="warning" variant="tonal">
         <template #prepend>
           <v-icon class="pt-4" icon="$warning" />
@@ -189,12 +177,8 @@
         <div>Deleting contracts may take a while to complete.</div>
       </v-alert>
       <v-card-actions class="justify-end my-1 mr-2">
-        <v-btn color="anchor" @click="deleteDialog = false">
-          Cancel
-        </v-btn>
-        <v-btn color="error" @click="deleteAll">
-          Delete
-        </v-btn>
+        <v-btn color="anchor" @click="deleteDialog = false"> Cancel </v-btn>
+        <v-btn color="error" @click="deleteAll"> Delete </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -309,6 +293,7 @@ const nodeIDs = computed(() => {
 });
 // To avoid multiple requests
 const cachedNodeIDs = ref<number[]>([]);
+const nodeInfoCache = new Map();
 onMounted(() => {
   loadContracts();
 });
@@ -317,16 +302,29 @@ async function _normalizeContracts(
   contracts: Contract[],
   contractType: ContractType.Node | ContractType.Name | ContractType.Rent,
 ): Promise<NormalizedContract[]> {
-  const normalizedContracts = await Promise.all(
-    contracts.map(async contract => {
-      try {
-        return await normalizeContract(grid, contract, contractType);
-      } catch (error) {
-        failedContracts.value.push(contract.contract_id);
-      }
-    }),
-  );
-  return normalizedContracts.filter(Boolean) as NormalizedContract[];
+  const batchSize = 10;
+  const batches = [];
+  for (let i = 0; i < contracts.length; i += batchSize) {
+    batches.push(contracts.slice(i, i + batchSize));
+  }
+
+  const normalizedContracts: NormalizedContract[] = [];
+  for (const batch of batches) {
+    const results = await Promise.all(
+      batch.map(async contract => {
+        try {
+          const normalized = await normalizeContract(grid, contract, contractType);
+          return normalized;
+        } catch (error) {
+          failedContracts.value.push(contract.contract_id);
+          return undefined;
+        }
+      }),
+    );
+    const validResults = results.filter((contract): contract is NormalizedContract => contract !== undefined);
+    normalizedContracts.push(...validResults);
+  }
+  return normalizedContracts;
 }
 
 async function loadContractsByType(
@@ -342,16 +340,19 @@ async function loadContractsByType(
 
   table.loading.value = true;
   try {
-    const response = await gridProxyClient.contracts.list({
-      twinId: profileManager.profile!.twinId,
-      state: [ContractState.Created, ContractState.GracePeriod],
-      size: table.size.value,
-      page: table.page.value,
-      type: contractType,
-      retCount: true,
-      sortBy: options && options.sort.length ? (options?.sort[0].key as SortByContracts) : undefined,
-      sortOrder: options && options.sort.length ? (options?.sort[0].order as SortOrder) : undefined,
-    });
+    const [response] = await Promise.all([
+      gridProxyClient.contracts.list({
+        twinId: profileManager.profile!.twinId,
+        state: [ContractState.Created, ContractState.GracePeriod],
+        size: table.size.value,
+        page: table.page.value,
+        type: contractType,
+        retCount: true,
+        sortBy: options?.sort?.[0]?.key as SortByContracts,
+        sortOrder: options?.sort?.[0]?.order as SortOrder,
+      }),
+      getNodeInfoWithCache(nodeIDs.value),
+    ]);
 
     table.count.value = response.count ?? 0;
     const normalizedContracts = await _normalizeContracts(response.data, contractType);
@@ -365,6 +366,7 @@ async function loadContractsByType(
 }
 
 async function loadContracts(type?: ContractType, options?: { sort: { key: string; order: "asc" | "desc" }[] }) {
+  const start = performance.now();
   if (!type) {
     lockedContracts.value = undefined;
     totalCost.value = undefined;
@@ -411,6 +413,8 @@ async function loadContracts(type?: ContractType, options?: { sort: { key: strin
     loadingErrorMessage.value = `Error while loading contracts: ${error.message}`;
     createCustomToast(loadingErrorMessage.value, ToastType.danger, {});
   }
+  const end = performance.now();
+  console.log(`Contracts load time taken: ${(end - start) / 1000} seconds`);
 }
 
 async function openUnlockDialog() {
@@ -522,6 +526,16 @@ async function getContractsLockDetails() {
   lockedContracts.value = await grid.contracts.getTotalOverdue();
 }
 
+async function getNodeInfoWithCache(nodeIds: number[]) {
+  const uncachedIds = nodeIds.filter(id => !nodeInfoCache.has(id));
+  if (uncachedIds.length > 0) {
+    const newInfo = await getNodeInfo(uncachedIds, []);
+    for (const [id, info] of Object.entries(newInfo)) {
+      nodeInfoCache.set(Number(id), info);
+    }
+  }
+  return nodeIds.map(id => nodeInfoCache.get(id));
+}
 // Define base table headers for contracts tables
 const baseTableHeaders: VDataTableHeader = [
   { title: "PLACEHOLDER", key: "data-table-select" },

From 236bbbbd5685ffa182f8ec7e6428e7c6e45b69c6 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 19 Jun 2025 17:11:55 +0300
Subject: [PATCH 03/15] Remove unused vars

---
 .../src/components/k8s_deployment_table.vue   | 100 ++++++++----
 .../playground/src/utils/load_deployment.ts   | 153 +++++++++++-------
 2 files changed, 169 insertions(+), 84 deletions(-)

diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index 0b4710397f..aac042de6b 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -6,8 +6,7 @@
       <span>
         This might happen because the node is down or it's not reachable
         <span v-if="showEncryption">
-          or the deployment{{ count - items.length > 1 ? "s are" : " is" }} encrypted by another key
-        </span>.
+          or the deployment{{ count - items.length > 1 ? "s are" : " is" }} encrypted by another key </span>.
       </span>
       <v-tooltip location="top" text="Show failed deployments">
         <template #activator="{ props: tooltipProps }">
@@ -168,7 +167,7 @@ import { getNodeHealthColor, NodeHealth } from "@/utils/get_nodes";
 import { useProfileManager } from "../stores";
 import { getGrid, updateGrid } from "../utils/grid";
 import { markAsFromAnotherClient } from "../utils/helpers";
-import { type K8S, type LoadedDeployments, loadK8s, mergeLoadedDeployments } from "../utils/load_deployment";
+import { loadK8s, mergeLoadedDeployments } from "../utils/load_deployment";
 const profileManager = useProfileManager();
 const showDialog = ref(false);
 const showEncryption = ref(false);
@@ -188,35 +187,82 @@ const loading = ref(false);
 
 onMounted(loadDeployments);
 async function loadDeployments() {
+  const start = performance.now();
   items.value = [];
   loading.value = true;
-  const grid = await getGrid(profileManager.profile!, props.projectName);
-  const chunk1 = await loadK8s(grid!);
-  const chunk2 = await loadK8s(updateGrid(grid!, { projectName: props.projectName.toLowerCase() }));
-  let chunk3: LoadedDeployments<K8S> = { count: 0, items: [], failedDeployments: [] };
-
-  if (showAllDeployments.value) {
-    chunk3 = await loadK8s(updateGrid(grid!, { projectName: "" }));
-    chunk3.items = chunk3.items.map(i => {
-      return !i.projectName || i.projectName === "Kubernetes" ? markAsFromAnotherClient(i) : i;
+  try {
+    const grid = await getGrid(profileManager.profile!, props.projectName);
+    if (!grid) {
+      loading.value = false;
+      return;
+    }
+    const [chunk1, chunk2, chunk3] = await Promise.all([
+      loadK8s(grid),
+      loadK8s(updateGrid(grid, { projectName: props.projectName.toLowerCase() })),
+      showAllDeployments.value
+        ? loadK8s(updateGrid(grid, { projectName: "" }))
+        : Promise.resolve({ count: 0, items: [], failedDeployments: [] }),
+    ]);
+    if (chunk3.items) {
+      chunk3.items = chunk3.items.map(i => {
+        return !i.projectName || i.projectName === "Kubernetes" ? markAsFromAnotherClient(i) : i;
+      });
+    }
+    const clusters = mergeLoadedDeployments(chunk1, chunk2, chunk3);
+    failedDeployments.value = clusters.failedDeployments;
+    count.value = clusters.count;
+    items.value = clusters.items.map(item => {
+      const master = item.masters[0];
+      const publicIP = master.publicIP?.ip;
+      return {
+        ...item,
+        name: item.deploymentName,
+        ipv4: publicIP ? publicIP.split("/")?.[0] || publicIP : "-",
+        ipv6: master.publicIP?.ip6?.replace(/\/64$/, "") || "-",
+        planetary: master.planetary || "-",
+        workersLength: item.workers.length,
+        billing: undefined,
+        wireguard: undefined,
+        detailsLoading: false,
+      };
     });
+
+    setTimeout(() => {
+      items.value.forEach(item => fetchClusterDetails(item));
+    }, 0);
+  } catch (error) {
+    console.error("Error loading deployments:", error);
+    items.value = [];
+    count.value = 0;
+    failedDeployments.value = [];
+  } finally {
+    loading.value = false;
+    const end = performance.now();
+    console.log(`Time taken: ${(end - start) / 1000} seconds`);
   }
+}
 
-  const clusters = mergeLoadedDeployments(chunk1, chunk2, chunk3);
-  failedDeployments.value = clusters.failedDeployments;
-
-  count.value = clusters.count;
-  items.value = clusters.items.map((item: any) => {
-    item.name = item.deploymentName;
-    item.ipv4 = item.masters[0].publicIP?.ip?.split("/")?.[0] || item.masters[0].publicIP?.ip || "-";
-    item.ipv6 = item.masters[0].publicIP?.ip6.replace(/\/64$/, "") || "-";
-    item.planetary = item.masters[0].planetary || "-";
-    item.workersLength = item.workers.length;
-    item.billing = item.masters[0].billing;
-    item.created = item.masters[0].created;
-    return item;
-  });
-  loading.value = false;
+async function fetchClusterDetails(item: any) {
+  if (item.detailsLoading || (item.billing !== undefined && item.wireguard !== undefined)) return;
+  item.detailsLoading = true;
+  try {
+    const grid = await getGrid(profileManager.profile!, item.projectName || props.projectName);
+    if (!grid) {
+      item.detailsLoading = false;
+      return;
+    }
+    const consumption = await grid.contracts.getConsumption({ id: item.masters[0].contractId }).catch(() => undefined);
+    item.billing = consumption ? consumption.amountBilled : "No Data Available";
+    item.wireguard = await grid.networks
+      .getWireGuardConfigs({
+        name: item.masters[0].interfaces[0].network,
+        ipRange: item.masters[0].interfaces[0].ip,
+      })
+      .then(res => res[0])
+      .catch(() => undefined);
+  } finally {
+    item.detailsLoading = false;
+  }
 }
 
 defineExpose({ loadDeployments });
diff --git a/packages/playground/src/utils/load_deployment.ts b/packages/playground/src/utils/load_deployment.ts
index 03d69e486d..013cffe7ad 100644
--- a/packages/playground/src/utils/load_deployment.ts
+++ b/packages/playground/src/utils/load_deployment.ts
@@ -189,6 +189,13 @@ export async function loadK8s(grid: GridClient) {
   await migrateModule(grid.k8s);
 
   const clusters = await grid.k8s.list();
+  if (clusters.length === 0) {
+    return <LoadedDeployments<K8S>>{
+      count: 0,
+      items: [],
+      failedDeployments: [],
+    };
+  }
 
   const projectName = grid.clientOptions.projectName;
   const grids = (await Promise.all(
@@ -196,73 +203,105 @@ export async function loadK8s(grid: GridClient) {
   )) as GridClient[];
   const failedDeployments: FailedDeployment[] = [];
 
-  const promises = clusters.map(async (name, index) => {
-    let contracts: any[] = [];
-    let nodeIds: number[] = [];
-
-    try {
-      contracts = await grids[index].k8s.getDeploymentContracts(name);
-      nodeIds = await grids[index].k8s._getDeploymentNodeIds(name);
-    } catch {
-      failedDeployments.push({ name, contracts: [], nodes: [] });
-      return;
-    }
+  const BATCH_SIZE = 5;
+  const contractsAndNodeIds: { contracts: any[]; nodeIds: number[]; success: boolean }[] = await batchProcess(
+    clusters,
+    BATCH_SIZE,
+    async batch => {
+      return await Promise.all(
+        batch.map(async name => {
+          const globalIndex = clusters.indexOf(name);
+          try {
+            const [contracts, nodeIds] = await Promise.all([
+              grids[globalIndex].k8s.getDeploymentContracts(name),
+              grids[globalIndex].k8s._getDeploymentNodeIds(name),
+            ]);
+            return { contracts, nodeIds, success: true };
+          } catch {
+            failedDeployments.push({ name, contracts: [], nodes: [] });
+            return { contracts: [], nodeIds: [], success: false };
+          }
+        }),
+      );
+    },
+  );
 
-    try {
-      const clusterPromise = grids[index].k8s.getObj(name).then(res => {
-        if (!projectName && res && res.masters && res.masters.length === 0) {
-          grids[index] = updateGrid(grids[index], { projectName: "" });
-          return grids[index].k8s.getObj(name);
+  const clusterObjs: any[] = await batchProcess(clusters, BATCH_SIZE, async batch => {
+    return await Promise.all(
+      batch.map(async name => {
+        const index = clusters.indexOf(name);
+        const { contracts, nodeIds, success } = contractsAndNodeIds[index];
+        if (!success) return null;
+
+        try {
+          const clusterPromise = grids[index].k8s.getObj(name).then(res => {
+            if (!projectName && res && res.masters && res.masters.length === 0) {
+              grids[index] = updateGrid(grids[index], { projectName: "" });
+              return grids[index].k8s.getObj(name);
+            }
+            return res;
+          });
+          const timeoutPromise = new Promise((resolve, reject) => {
+            setTimeout(() => {
+              reject(new Error("Timeout"));
+            }, window.env.TIMEOUT);
+          });
+
+          const result = await Promise.race([clusterPromise, timeoutPromise]);
+          if (result instanceof Error && result.message === "Timeout") {
+            console.error(`Timeout loading deployment with name ${name}`);
+            return null;
+          } else if ((result as any).masters.length === 0 && (result as any).workers.length === 0) {
+            console.error(`Failed to load deployment with name ${name}`);
+            failedDeployments.push({ name, nodes: nodeIds, contracts: contracts });
+            return null;
+          } else {
+            return result;
+          }
+        } catch (e) {
+          console.error(
+            `Failed to load deployment with name ${name}:\n${normalizeError(e, "No errors were provided.")}`,
+          );
+          failedDeployments.push({ name, nodes: nodeIds, contracts: contracts });
+          return null;
         }
-
-        return res;
-      });
-      const timeoutPromise = new Promise((resolve, reject) => {
-        setTimeout(() => {
-          reject(new Error("Timeout"));
-        }, window.env.TIMEOUT);
-      });
-
-      const result = await Promise.race([clusterPromise, timeoutPromise]);
-      if (result instanceof Error && result.message === "Timeout") {
-        console.error(`Timeout loading deployment with name ${name}`);
-        return null;
-      } else if ((result as any).masters.length === 0 && (result as any).workers.length === 0) {
-        console.error(`Failed to load deployment with name ${name}`);
-        failedDeployments.push({ name, nodes: nodeIds, contracts: contracts });
-      } else {
-        return result;
-      }
-    } catch (e) {
-      console.error(`Failed to load deployment with name ${name}:\n${normalizeError(e, "No errors were provided.")}`);
-      failedDeployments.push({ name, nodes: nodeIds, contracts: contracts });
-    }
+      }),
+    );
   });
-  const items = (await Promise.all(promises)) as any[];
+
+  const items = clusterObjs.filter(Boolean) as any[];
   const k8s = items
-    .map((item, index) => {
+    .map(item => {
       if (item) {
-        item.deploymentName = clusters[index];
-        item.projectName = grids[index].clientOptions!.projectName;
+        item.deploymentName = clusters[clusterObjs.indexOf(item)];
+        item.projectName = grids[clusterObjs.indexOf(item)].clientOptions!.projectName;
       }
       return item;
     })
     .filter(item => item && item.masters.length > 0) as K8S[];
-  const consumptions = await Promise.all(
-    k8s.map((cluster, index) => {
-      return grids[index].contracts.getConsumption({ id: cluster.masters[0].contractId }).catch(() => undefined);
-    }),
-  );
 
-  const wireguards = await Promise.all(
-    k8s.map((cluster, index) =>
-      getWireguardConfig(
-        grids[index],
-        cluster.masters[0].interfaces[0].network,
-        cluster.masters[0].interfaces[0].ip,
-      ).catch(() => []),
-    ),
-  );
+  const consumptions = await batchProcess(k8s, BATCH_SIZE, async batch => {
+    return Promise.all(
+      batch.map(cluster => {
+        const gridIndex = clusters.findIndex(name => name === cluster.deploymentName);
+        return grids[gridIndex].contracts.getConsumption({ id: cluster.masters[0].contractId }).catch(() => undefined);
+      }),
+    );
+  });
+
+  const wireguards = await batchProcess(k8s, BATCH_SIZE, async batch => {
+    return Promise.all(
+      batch.map(cluster => {
+        const gridIndex = clusters.findIndex(name => name === cluster.deploymentName);
+        return getWireguardConfig(
+          grids[gridIndex],
+          cluster.masters[0].interfaces[0].network,
+          cluster.masters[0].interfaces[0].ip,
+        ).catch(() => []);
+      }),
+    );
+  });
+
   const data = k8s.map((cluster, index) => {
     cluster.masters[0].billing = formatConsumption(consumptions[index]?.amountBilled as number);
 

From 2cb4f9981e9ef3c1e7a48a961a844a6c2656a60b Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 23 Jun 2025 11:04:07 +0300
Subject: [PATCH 04/15] Use promise.allSettled instead

---
 .../playground/src/components/vm_deployment_table.vue  | 10 +++++++++-
 packages/playground/src/utils/load_deployment.ts       |  9 ++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index 80972ab605..5ad58ccdbe 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -244,13 +244,21 @@ async function loadDeployments() {
   loading.value = true;
   const grid = await getGrid(profileManager.profile!, props.projectName);
   try {
-    const [chunk1, chunk2, chunk3] = await Promise.all([
+    const results = await Promise.allSettled([
       loadVms(grid!),
       loadVms(updateGrid(grid!, { projectName: props.projectName.toLowerCase() })),
       showAllDeployments.value && props.projectName.toLowerCase() === ProjectName.VM.toLowerCase()
         ? loadVms(updateGrid(grid!, { projectName: "" }))
         : Promise.resolve({ count: 0, items: [], failedDeployments: [] }),
     ]);
+    const [chunk1, chunk2, chunk3] = results.map((result, index) => {
+      if (result.status === "fulfilled") {
+        return result.value;
+      } else {
+        console.warn(`Failed to load VM chunk ${index + 1}:`, result.reason);
+        return { count: 0, items: [], failedDeployments: [] };
+      }
+    });
 
     if (migrateGateways) {
       await Promise.all([
diff --git a/packages/playground/src/utils/load_deployment.ts b/packages/playground/src/utils/load_deployment.ts
index 013cffe7ad..7f39d486d0 100644
--- a/packages/playground/src/utils/load_deployment.ts
+++ b/packages/playground/src/utils/load_deployment.ts
@@ -106,7 +106,8 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
     }
   });
 
-  const items = await Promise.all(machinePromises);
+  const results = await Promise.allSettled(machinePromises);
+  const items = results.map(result => (result.status === "fulfilled" ? result.value : null));
   const vms = items
     .map((item: any, index) => {
       if (item) {
@@ -136,16 +137,17 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
 
   const BATCH_SIZE = 10;
   const consumptions = await batchProcess(vms, BATCH_SIZE, async batch => {
-    return Promise.all(
+    const results = await Promise.allSettled(
       batch.map(vm => {
         const gridIndex = vms.indexOf(vm);
         return grids[gridIndex].contracts.getConsumption({ id: vm[0].contractId }).catch(() => undefined);
       }),
     );
+    return results.map(r => (r.status === "fulfilled" ? r.value : undefined));
   });
 
   const wireguards = await batchProcess(vms, BATCH_SIZE, async batch => {
-    return Promise.all(
+    const results = await Promise.allSettled(
       batch.map(vm => {
         const gridIndex = vms.indexOf(vm);
         return getWireguardConfig(grids[gridIndex], vm[0].interfaces[0].network, vm[0].interfaces[0].ip).catch(
@@ -153,6 +155,7 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
         );
       }),
     );
+    return results.map(r => (r.status === "fulfilled" ? r.value : []));
   });
 
   const data = vms.map((vm, index) => {

From 0482f2c31a4f479f61215f0bbbd94697e4ca6744 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 23 Jun 2025 13:48:20 +0300
Subject: [PATCH 05/15] Replace promise.all accross all deployments files

---
 .../src/components/k8s_deployment_table.vue   |   8 +-
 .../src/components/vm_deployment_table.vue    |   7 +-
 .../playground/src/utils/load_deployment.ts   | 124 +++++++++++-------
 .../src/weblets/tf_contracts_list.vue         |  29 ++--
 4 files changed, 108 insertions(+), 60 deletions(-)

diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index aac042de6b..00f8d6126c 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -196,13 +196,19 @@ async function loadDeployments() {
       loading.value = false;
       return;
     }
-    const [chunk1, chunk2, chunk3] = await Promise.all([
+    const results = await Promise.allSettled([
       loadK8s(grid),
       loadK8s(updateGrid(grid, { projectName: props.projectName.toLowerCase() })),
       showAllDeployments.value
         ? loadK8s(updateGrid(grid, { projectName: "" }))
         : Promise.resolve({ count: 0, items: [], failedDeployments: [] }),
     ]);
+    const chunk1 =
+      results[0].status === "fulfilled" ? results[0].value : { count: 0, items: [], failedDeployments: [] };
+    const chunk2 =
+      results[1].status === "fulfilled" ? results[1].value : { count: 0, items: [], failedDeployments: [] };
+    const chunk3 =
+      results[2].status === "fulfilled" ? results[2].value : { count: 0, items: [], failedDeployments: [] };
     if (chunk3.items) {
       chunk3.items = chunk3.items.map(i => {
         return !i.projectName || i.projectName === "Kubernetes" ? markAsFromAnotherClient(i) : i;
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index 5ad58ccdbe..0727b06bc6 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -220,7 +220,10 @@ async function loadDomains() {
     loading.value = true;
     const grid = await getGrid(profileManager.profile!, props.projectName.toLowerCase());
     const gateways = await grid!.gateway.list();
-    const gws = await Promise.all(gateways.map(name => grid!.gateway.get_name({ name })));
+    const gwsResults = await Promise.allSettled(gateways.map(name => grid!.gateway.get_name({ name })));
+    const gws = gwsResults
+      .filter(result => result.status === "fulfilled")
+      .map(result => (result as PromiseFulfilledResult<any>).value);
     items.value = gws.map(gw => {
       (gw as any).name = gw[0].workloads[0].name;
       return gw;
@@ -261,7 +264,7 @@ async function loadDeployments() {
     });
 
     if (migrateGateways) {
-      await Promise.all([
+      await Promise.allSettled([
         chunk1.count > 0 && migrateModule(grid!.gateway),
         chunk2.count > 0 && migrateModule(grid!.gateway),
         chunk3.count > 0 && migrateModule(grid!.gateway),
diff --git a/packages/playground/src/utils/load_deployment.ts b/packages/playground/src/utils/load_deployment.ts
index 7f39d486d0..50f312d3b7 100644
--- a/packages/playground/src/utils/load_deployment.ts
+++ b/packages/playground/src/utils/load_deployment.ts
@@ -58,26 +58,32 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
 
   const projectName = grid.clientOptions.projectName || "";
 
-  const grids = await Promise.all(
+  const gridsResults = await Promise.allSettled(
     machines.map(n => getGridClient(grid.clientOptions, projectName ? `${projectName}/${n}` : n)),
   );
+  const grids = gridsResults.map(r => (r.status === "fulfilled" ? r.value : undefined));
 
   const machinePromises = machines.map(async (name, index) => {
     try {
-      const [contracts, nodeIds] = await Promise.all([
-        getDeploymentContracts(grids[index], name, projectName),
-        grids[index].machines._getDeploymentNodeIds(name),
+      if (!grids[index]) {
+        throw new Error("Grid client unavailable");
+      }
+      const [contractsResult, nodeIdsResult] = await Promise.allSettled([
+        getDeploymentContracts(grids[index]!, name, projectName),
+        grids[index]!.machines._getDeploymentNodeIds(name),
       ]);
+      const contracts = contractsResult.status === "fulfilled" ? contractsResult.value : [];
+      const nodeIds = nodeIdsResult.status === "fulfilled" ? nodeIdsResult.value : [];
 
       if (contracts.length === 0) {
         count--;
         return null;
       }
 
-      const machinePromise = grids[index].machines.getObj(name).then(res => {
+      const machinePromise = grids[index]!.machines.getObj(name).then(res => {
         if (!projectName && (!Array.isArray(res) || res.length === 0)) {
-          grids[index] = updateGrid(grids[index], { projectName: "" });
-          return grids[index].machines.getObj(name);
+          grids[index] = updateGrid(grids[index]!, { projectName: "" });
+          return grids[index]!.machines.getObj(name);
         }
         return res;
       });
@@ -112,10 +118,10 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
     .map((item: any, index) => {
       if (item) {
         item.deploymentName = machines[index];
-        item.projectName = grids[index].clientOptions!.projectName;
+        item.projectName = grids[index]?.clientOptions?.projectName;
         item.forEach((i: any) => {
           i.deploymentName = machines[index];
-          i.projectName = grids[index].clientOptions!.projectName;
+          i.projectName = grids[index]?.clientOptions?.projectName;
         });
       }
       return item;
@@ -140,7 +146,8 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
     const results = await Promise.allSettled(
       batch.map(vm => {
         const gridIndex = vms.indexOf(vm);
-        return grids[gridIndex].contracts.getConsumption({ id: vm[0].contractId }).catch(() => undefined);
+        if (!grids[gridIndex]) return Promise.resolve(undefined);
+        return grids[gridIndex]!.contracts.getConsumption({ id: vm[0].contractId }).catch(() => undefined);
       }),
     );
     return results.map(r => (r.status === "fulfilled" ? r.value : undefined));
@@ -150,7 +157,8 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
     const results = await Promise.allSettled(
       batch.map(vm => {
         const gridIndex = vms.indexOf(vm);
-        return getWireguardConfig(grids[gridIndex], vm[0].interfaces[0].network, vm[0].interfaces[0].ip).catch(
+        if (!grids[gridIndex]) return Promise.resolve([]);
+        return getWireguardConfig(grids[gridIndex]!, vm[0].interfaces[0].network, vm[0].interfaces[0].ip).catch(
           () => [],
         );
       }),
@@ -201,46 +209,56 @@ export async function loadK8s(grid: GridClient) {
   }
 
   const projectName = grid.clientOptions.projectName;
-  const grids = (await Promise.all(
+  const gridsK8sResults = await Promise.allSettled(
     clusters.map(n => getGrid(grid.clientOptions, projectName ? `${projectName}/${n}` : n)),
-  )) as GridClient[];
+  );
+  const grids = gridsK8sResults.map(r => (r.status === "fulfilled" ? r.value : undefined)) as (
+    | GridClient
+    | undefined
+  )[];
   const failedDeployments: FailedDeployment[] = [];
 
   const BATCH_SIZE = 5;
-  const contractsAndNodeIds: { contracts: any[]; nodeIds: number[]; success: boolean }[] = await batchProcess(
-    clusters,
-    BATCH_SIZE,
-    async batch => {
-      return await Promise.all(
-        batch.map(async name => {
-          const globalIndex = clusters.indexOf(name);
-          try {
-            const [contracts, nodeIds] = await Promise.all([
-              grids[globalIndex].k8s.getDeploymentContracts(name),
-              grids[globalIndex].k8s._getDeploymentNodeIds(name),
-            ]);
-            return { contracts, nodeIds, success: true };
-          } catch {
-            failedDeployments.push({ name, contracts: [], nodes: [] });
-            return { contracts: [], nodeIds: [], success: false };
-          }
-        }),
-      );
-    },
-  );
+  const contractsAndNodeIdsResults = await batchProcess(clusters, BATCH_SIZE, async batch => {
+    const results = await Promise.allSettled(
+      batch.map(async name => {
+        const globalIndex = clusters.indexOf(name);
+        if (!grids[globalIndex]) return { contracts: [], nodeIds: [], success: false };
+        try {
+          const [contractsResult, nodeIdsResult] = await Promise.allSettled([
+            grids[globalIndex]!.k8s.getDeploymentContracts(name),
+            grids[globalIndex]!.k8s._getDeploymentNodeIds(name),
+          ]);
+          const contracts = contractsResult.status === "fulfilled" ? contractsResult.value : [];
+          const nodeIds = nodeIdsResult.status === "fulfilled" ? nodeIdsResult.value : [];
+          return { contracts, nodeIds, success: true };
+        } catch {
+          failedDeployments.push({ name, contracts: [], nodes: [] });
+          return { contracts: [], nodeIds: [], success: false };
+        }
+      }),
+    );
+    return results.map(r => (r.status === "fulfilled" ? r.value : { contracts: [], nodeIds: [], success: false }));
+  });
 
-  const clusterObjs: any[] = await batchProcess(clusters, BATCH_SIZE, async batch => {
-    return await Promise.all(
+  const contractsAndNodeIds = contractsAndNodeIdsResults.flat();
+
+  const clusterObjsResults = await batchProcess(clusters, BATCH_SIZE, async batch => {
+    const results = await Promise.allSettled(
       batch.map(async name => {
         const index = clusters.indexOf(name);
-        const { contracts, nodeIds, success } = contractsAndNodeIds[index];
-        if (!success) return null;
+        const { contracts, nodeIds, success } = contractsAndNodeIds[index] || {
+          contracts: [],
+          nodeIds: [],
+          success: false,
+        };
+        if (!success || !grids[index]) return null;
 
         try {
-          const clusterPromise = grids[index].k8s.getObj(name).then(res => {
+          const clusterPromise = grids[index]!.k8s.getObj(name).then(res => {
             if (!projectName && res && res.masters && res.masters.length === 0) {
-              grids[index] = updateGrid(grids[index], { projectName: "" });
-              return grids[index].k8s.getObj(name);
+              grids[index] = updateGrid(grids[index]!, { projectName: "" });
+              return grids[index]!.k8s.getObj(name);
             }
             return res;
           });
@@ -270,45 +288,53 @@ export async function loadK8s(grid: GridClient) {
         }
       }),
     );
+    return results.map(r => (r.status === "fulfilled" ? r.value : null));
   });
+  const clusterObjs = clusterObjsResults.flat();
 
   const items = clusterObjs.filter(Boolean) as any[];
   const k8s = items
     .map(item => {
       if (item) {
         item.deploymentName = clusters[clusterObjs.indexOf(item)];
-        item.projectName = grids[clusterObjs.indexOf(item)].clientOptions!.projectName;
+        item.projectName = grids[clusterObjs.indexOf(item)]?.clientOptions?.projectName;
       }
       return item;
     })
     .filter(item => item && item.masters.length > 0) as K8S[];
 
-  const consumptions = await batchProcess(k8s, BATCH_SIZE, async batch => {
-    return Promise.all(
+  const consumptionsResults = await batchProcess(k8s, BATCH_SIZE, async batch => {
+    const results = await Promise.allSettled(
       batch.map(cluster => {
         const gridIndex = clusters.findIndex(name => name === cluster.deploymentName);
-        return grids[gridIndex].contracts.getConsumption({ id: cluster.masters[0].contractId }).catch(() => undefined);
+        if (!grids[gridIndex]) return Promise.resolve(undefined);
+        return grids[gridIndex]!.contracts.getConsumption({ id: cluster.masters[0].contractId }).catch(() => undefined);
       }),
     );
+    return results.map(r => (r.status === "fulfilled" ? r.value : undefined));
   });
+  const consumptions = consumptionsResults.flat();
 
-  const wireguards = await batchProcess(k8s, BATCH_SIZE, async batch => {
-    return Promise.all(
+  const wireguardsResults = await batchProcess(k8s, BATCH_SIZE, async batch => {
+    const results = await Promise.allSettled(
       batch.map(cluster => {
         const gridIndex = clusters.findIndex(name => name === cluster.deploymentName);
+        if (!grids[gridIndex]) return Promise.resolve([]);
         return getWireguardConfig(
-          grids[gridIndex],
+          grids[gridIndex]!,
           cluster.masters[0].interfaces[0].network,
           cluster.masters[0].interfaces[0].ip,
         ).catch(() => []);
       }),
     );
+    return results.map(r => (r.status === "fulfilled" ? r.value : []));
   });
+  const wireguards = wireguardsResults.flat();
 
   const data = k8s.map((cluster, index) => {
     cluster.masters[0].billing = formatConsumption(consumptions[index]?.amountBilled as number);
 
-    if (wireguards && wireguards[index]) {
+    if (wireguards[index] && wireguards[index].length > 0) {
       cluster.wireguard = wireguards[index][0];
     }
     return cluster as K8S;
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index 6fbf031095..56d4b8d11a 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -20,15 +20,15 @@
       class="app-link font-weight-medium"
       target="_blank"
       href="https://manual.grid.tf/labs/documentation/developers/tfchain/"
-    >Contract Documentation,
+      >Contract Documentation,
     </a>
     and to explore further contract details, check
     <a
       class="app-link font-weight-medium"
       target="_blank"
       href="https://manual.grid.tf/labs/documentation/dashboard/deploy/your_contracts"
-    >Node Contract Documentation.</a>
-    <br>
+      >Node Contract Documentation.</a>
+    <br />
   </v-alert>
 
   <v-card variant="text" class="my-3">
@@ -340,7 +340,7 @@ async function loadContractsByType(
 
   table.loading.value = true;
   try {
-    const [response] = await Promise.all([
+    const results = await Promise.allSettled([
       gridProxyClient.contracts.list({
         twinId: profileManager.profile!.twinId,
         state: [ContractState.Created, ContractState.GracePeriod],
@@ -354,9 +354,15 @@ async function loadContractsByType(
       getNodeInfoWithCache(nodeIDs.value),
     ]);
 
-    table.count.value = response.count ?? 0;
-    const normalizedContracts = await _normalizeContracts(response.data, contractType);
-    contractsRef.value = normalizedContracts;
+    if (results[0].status === "fulfilled") {
+      const response = results[0].value;
+      table.count.value = response.count ?? 0;
+      const normalizedContracts = await _normalizeContracts(response.data, contractType);
+      contractsRef.value = normalizedContracts;
+    } else {
+      loadingErrorMessage.value = `Error while listing ${contractType} contracts: ${results[0].reason?.message || results[0].reason}`;
+      createCustomToast(loadingErrorMessage.value, ToastType.danger, {});
+    }
   } catch (error: any) {
     loadingErrorMessage.value = `Error while listing ${contractType} contracts: ${error.message}`;
     createCustomToast(loadingErrorMessage.value, ToastType.danger, {});
@@ -392,11 +398,18 @@ async function loadContracts(type?: ContractType, options?: { sort: { key: strin
           break;
       }
     } else {
-      await Promise.all([
+      const results = await Promise.allSettled([
         loadContractsByType(ContractType.Name, nameContracts, options),
         loadContractsByType(ContractType.Node, nodeContracts, options),
         loadContractsByType(ContractType.Rent, rentContracts, options),
       ]);
+      results.forEach((result, idx) => {
+        if (result.status === "rejected") {
+          const type = [ContractType.Name, ContractType.Node, ContractType.Rent][idx];
+          loadingErrorMessage.value = `Error while loading ${type} contracts: ${result.reason?.message || result.reason}`;
+          createCustomToast(loadingErrorMessage.value, ToastType.danger, {});
+        }
+      });
     }
     const failedContractsLength = failedContracts.value.length;
     if (failedContractsLength > 0)

From 3484c4c4de450e2a37246d1180aff110ad28c696 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 25 Jun 2025 16:12:15 +0300
Subject: [PATCH 06/15] - Run the three independent calls  using
 Promise.allSettled - Call getTitalCost function only if there is no type
 defined

---
 .../src/utils/get_nodeInfo_with_cache.ts      | 13 +++
 .../src/weblets/tf_contracts_list.vue         | 83 ++++++++++++-------
 2 files changed, 64 insertions(+), 32 deletions(-)
 create mode 100644 packages/playground/src/utils/get_nodeInfo_with_cache.ts

diff --git a/packages/playground/src/utils/get_nodeInfo_with_cache.ts b/packages/playground/src/utils/get_nodeInfo_with_cache.ts
new file mode 100644
index 0000000000..f28da4e566
--- /dev/null
+++ b/packages/playground/src/utils/get_nodeInfo_with_cache.ts
@@ -0,0 +1,13 @@
+import { getNodeInfo } from "@/utils/contracts";
+
+export async function getNodeInfoWithCache(nodeIds: number[]) {
+  const nodeInfoCache = new Map();
+  const uncachedIds = nodeIds.filter(id => !nodeInfoCache.has(id));
+  if (uncachedIds.length > 0) {
+    const newInfo = await getNodeInfo(uncachedIds, []);
+    for (const [id, info] of Object.entries(newInfo)) {
+      nodeInfoCache.set(Number(id), info);
+    }
+  }
+  return nodeIds.map(id => nodeInfoCache.get(id));
+}
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index 56d4b8d11a..1be4d2ad7c 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -256,7 +256,7 @@ import { manual } from "@/utils/manual";
 
 import { gridProxyClient, queryClient } from "../clients";
 import { useGrid } from "../stores";
-
+import { getNodeInfoWithCache } from "@/utils/get_nodeInfo_with_cache";
 const profileManagerController = useProfileManagerController();
 const balance = profileManagerController.balance;
 const freeBalance = computed(() => balance.value?.free ?? 0);
@@ -293,7 +293,6 @@ const nodeIDs = computed(() => {
 });
 // To avoid multiple requests
 const cachedNodeIDs = ref<number[]>([]);
-const nodeInfoCache = new Map();
 onMounted(() => {
   loadContracts();
 });
@@ -302,28 +301,41 @@ async function _normalizeContracts(
   contracts: Contract[],
   contractType: ContractType.Node | ContractType.Name | ContractType.Rent,
 ): Promise<NormalizedContract[]> {
-  const batchSize = 10;
+  const batchSize = Math.max(5, Math.floor(contracts.length / 5));
   const batches = [];
   for (let i = 0; i < contracts.length; i += batchSize) {
     batches.push(contracts.slice(i, i + batchSize));
   }
 
-  const normalizedContracts: NormalizedContract[] = [];
-  for (const batch of batches) {
-    const results = await Promise.all(
-      batch.map(async contract => {
-        try {
+  const batchResults = await Promise.allSettled(
+    batches.map(async batch => {
+      const results = await Promise.allSettled(
+        batch.map(async contract => {
           const normalized = await normalizeContract(grid, contract, contractType);
           return normalized;
-        } catch (error) {
-          failedContracts.value.push(contract.contract_id);
-          return undefined;
-        }
-      }),
-    );
-    const validResults = results.filter((contract): contract is NormalizedContract => contract !== undefined);
-    normalizedContracts.push(...validResults);
-  }
+        }),
+      );
+
+      return results
+        .map((result, index) => {
+          if (result.status === "fulfilled") {
+            return result.value;
+          } else {
+            failedContracts.value.push(batch[index].contract_id);
+            return undefined;
+          }
+        })
+        .filter((contract): contract is NormalizedContract => contract !== undefined);
+    }),
+  );
+
+  const normalizedContracts: NormalizedContract[] = [];
+  batchResults.forEach(result => {
+    if (result.status === "fulfilled") {
+      normalizedContracts.push(...result.value);
+    }
+  });
+
   return normalizedContracts;
 }
 
@@ -416,12 +428,29 @@ async function loadContracts(type?: ContractType, options?: { sort: { key: strin
       loadingErrorMessage.value = `Failed to load details of the following contract${
         failedContractsLength > 1 ? "s" : ""
       }: ${failedContracts.value.join(", ")}.`;
-    await getContractsLockDetails();
+
     contracts.value = [...nodeContracts.value, ...nameContracts.value, ...rentContracts.value];
-    if (!type) await getTotalCost();
-    // Get the node info e.g. node status.
-    nodeInfo.value = await getNodeInfo(nodeIDs.value, cachedNodeIDs.value);
-    cachedNodeIDs.value.push(...nodeIDs.value);
+
+    const parallelCalls = [getContractsLockDetails(), getNodeInfo(nodeIDs.value, cachedNodeIDs.value)];
+
+    if (!type) {
+      parallelCalls.push(getTotalCost());
+    }
+
+    const results = await Promise.allSettled(parallelCalls);
+
+    if (results[1].status === "fulfilled") {
+      nodeInfo.value = results[1].value || {};
+      cachedNodeIDs.value.push(...nodeIDs.value);
+    }
+
+    results.forEach((result, index) => {
+      if (result.status === "rejected") {
+        const callNames = ["getContractsLockDetails", "getNodeInfo", "getTotalCost"];
+        const callName = index < 2 ? callNames[index] : callNames[2];
+        console.warn(`${callName} failed:`, result.reason);
+      }
+    });
   } catch (error: any) {
     loadingErrorMessage.value = `Error while loading contracts: ${error.message}`;
     createCustomToast(loadingErrorMessage.value, ToastType.danger, {});
@@ -539,16 +568,6 @@ async function getContractsLockDetails() {
   lockedContracts.value = await grid.contracts.getTotalOverdue();
 }
 
-async function getNodeInfoWithCache(nodeIds: number[]) {
-  const uncachedIds = nodeIds.filter(id => !nodeInfoCache.has(id));
-  if (uncachedIds.length > 0) {
-    const newInfo = await getNodeInfo(uncachedIds, []);
-    for (const [id, info] of Object.entries(newInfo)) {
-      nodeInfoCache.set(Number(id), info);
-    }
-  }
-  return nodeIds.map(id => nodeInfoCache.get(id));
-}
 // Define base table headers for contracts tables
 const baseTableHeaders: VDataTableHeader = [
   { title: "PLACEHOLDER", key: "data-table-select" },

From 500da01a86ab8d981f15c16dcd7d1b9104a658ed Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 25 Jun 2025 17:36:43 +0300
Subject: [PATCH 07/15] Fully parallel cluster detail loading

---
 .../src/components/k8s_deployment_table.vue   | 45 +++++++++++++------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index 00f8d6126c..9382214902 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -194,6 +194,7 @@ async function loadDeployments() {
     const grid = await getGrid(profileManager.profile!, props.projectName);
     if (!grid) {
       loading.value = false;
+      console.error("Failed to initialize grid connection");
       return;
     }
     const results = await Promise.allSettled([
@@ -204,11 +205,26 @@ async function loadDeployments() {
         : Promise.resolve({ count: 0, items: [], failedDeployments: [] }),
     ]);
     const chunk1 =
-      results[0].status === "fulfilled" ? results[0].value : { count: 0, items: [], failedDeployments: [] };
+      results[0].status === "fulfilled"
+        ? results[0].value
+        : (() => {
+            console.error("Failed to load K8s deployments from default project:", results[0].reason);
+            return { count: 0, items: [], failedDeployments: [] };
+          })();
     const chunk2 =
-      results[1].status === "fulfilled" ? results[1].value : { count: 0, items: [], failedDeployments: [] };
+      results[1].status === "fulfilled"
+        ? results[1].value
+        : (() => {
+            console.error(`Failed to load K8s deployments from project "${props.projectName}":`, results[1].reason);
+            return { count: 0, items: [], failedDeployments: [] };
+          })();
     const chunk3 =
-      results[2].status === "fulfilled" ? results[2].value : { count: 0, items: [], failedDeployments: [] };
+      results[2].status === "fulfilled"
+        ? results[2].value
+        : (() => {
+            console.error("Failed to load K8s deployments from all projects:", results[2].reason);
+            return { count: 0, items: [], failedDeployments: [] };
+          })();
     if (chunk3.items) {
       chunk3.items = chunk3.items.map(i => {
         return !i.projectName || i.projectName === "Kubernetes" ? markAsFromAnotherClient(i) : i;
@@ -233,9 +249,7 @@ async function loadDeployments() {
       };
     });
 
-    setTimeout(() => {
-      items.value.forEach(item => fetchClusterDetails(item));
-    }, 0);
+    await Promise.allSettled(items.value.map(item => fetchClusterDetails(item)));
   } catch (error) {
     console.error("Error loading deployments:", error);
     items.value = [];
@@ -257,15 +271,20 @@ async function fetchClusterDetails(item: any) {
       item.detailsLoading = false;
       return;
     }
-    const consumption = await grid.contracts.getConsumption({ id: item.masters[0].contractId }).catch(() => undefined);
-    item.billing = consumption ? consumption.amountBilled : "No Data Available";
-    item.wireguard = await grid.networks
-      .getWireGuardConfigs({
+
+    const [consumption, wireguardConfig] = await Promise.allSettled([
+      grid.contracts.getConsumption({ id: item.masters[0].contractId }),
+      grid.networks.getWireGuardConfigs({
         name: item.masters[0].interfaces[0].network,
         ipRange: item.masters[0].interfaces[0].ip,
-      })
-      .then(res => res[0])
-      .catch(() => undefined);
+      }),
+    ]);
+
+    item.billing =
+      consumption.status === "fulfilled" && consumption.value ? consumption.value.amountBilled : "No Data Available";
+
+    item.wireguard =
+      wireguardConfig.status === "fulfilled" && wireguardConfig.value?.[0] ? wireguardConfig.value[0] : undefined;
   } finally {
     item.detailsLoading = false;
   }

From f90894ed5eb9ab0b045e468271f88e2dca9782da Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 29 Jun 2025 11:45:02 +0300
Subject: [PATCH 08/15] - Handle the failure of VM deployments - Group chunk 3
 condition into variable for VMs and K8s - Improve migrateModule calls

---
 .../src/components/k8s_deployment_table.vue   |  3 +-
 .../src/components/vm_deployment_table.vue    | 34 +++++++++++++++----
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index 9382214902..0ae7292018 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -197,10 +197,11 @@ async function loadDeployments() {
       console.error("Failed to initialize grid connection");
       return;
     }
+    const shouldLoadAllDeployments = showAllDeployments.value;
     const results = await Promise.allSettled([
       loadK8s(grid),
       loadK8s(updateGrid(grid, { projectName: props.projectName.toLowerCase() })),
-      showAllDeployments.value
+      shouldLoadAllDeployments
         ? loadK8s(updateGrid(grid, { projectName: "" }))
         : Promise.resolve({ count: 0, items: [], failedDeployments: [] }),
     ]);
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index 0727b06bc6..3bfe036c77 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -224,6 +224,25 @@ async function loadDomains() {
     const gws = gwsResults
       .filter(result => result.status === "fulfilled")
       .map(result => (result as PromiseFulfilledResult<any>).value);
+
+    const failedGateways = gwsResults
+      .map((result, index) => ({ result, index }))
+      .filter(({ result }) => result.status === "rejected")
+      .map(({ result, index }) => ({
+        name: gateways[index],
+        reason: (result as PromiseRejectedResult).reason,
+      }));
+
+    if (failedGateways.length > 0) {
+      console.error("Failed to load some gateway deployments:", failedGateways);
+
+      count.value = gateways.length;
+      failedDeployments.value = failedGateways.map(fg => ({
+        name: fg.name,
+        error: fg.reason?.message || fg.reason || "Unknown error",
+      }));
+    }
+
     items.value = gws.map(gw => {
       (gw as any).name = gw[0].workloads[0].name;
       return gw;
@@ -247,10 +266,12 @@ async function loadDeployments() {
   loading.value = true;
   const grid = await getGrid(profileManager.profile!, props.projectName);
   try {
+    const shouldLoadAllDeployments =
+      showAllDeployments.value && props.projectName.toLowerCase() === ProjectName.VM.toLowerCase();
     const results = await Promise.allSettled([
       loadVms(grid!),
       loadVms(updateGrid(grid!, { projectName: props.projectName.toLowerCase() })),
-      showAllDeployments.value && props.projectName.toLowerCase() === ProjectName.VM.toLowerCase()
+      shouldLoadAllDeployments
         ? loadVms(updateGrid(grid!, { projectName: "" }))
         : Promise.resolve({ count: 0, items: [], failedDeployments: [] }),
     ]);
@@ -258,17 +279,16 @@ async function loadDeployments() {
       if (result.status === "fulfilled") {
         return result.value;
       } else {
-        console.warn(`Failed to load VM chunk ${index + 1}:`, result.reason);
+        console.error(`Failed to load VM chunk ${index + 1}:`, result.reason);
         return { count: 0, items: [], failedDeployments: [] };
       }
     });
 
     if (migrateGateways) {
-      await Promise.allSettled([
-        chunk1.count > 0 && migrateModule(grid!.gateway),
-        chunk2.count > 0 && migrateModule(grid!.gateway),
-        chunk3.count > 0 && migrateModule(grid!.gateway),
-      ]);
+      const hasDeployments = chunk1.count > 0 || chunk2.count > 0 || chunk3.count > 0;
+      if (hasDeployments) {
+        await migrateModule(grid!.gateway);
+      }
     }
 
     if (chunk3.items) {

From 26d9a93ae77c69e64946c00f3ca89d3f82970067 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 29 Jun 2025 12:30:48 +0300
Subject: [PATCH 09/15] - Run batches in parallel - Handle errors if existed -
 Add unit test for batch process function

---
 .../playground/src/utils/batch_process.ts     |  62 +++++-
 .../tests/utils/batchProcess.test.ts          | 194 ++++++++++++++++++
 2 files changed, 250 insertions(+), 6 deletions(-)
 create mode 100644 packages/playground/tests/utils/batchProcess.test.ts

diff --git a/packages/playground/src/utils/batch_process.ts b/packages/playground/src/utils/batch_process.ts
index 37cbee1b50..3a7f38999d 100644
--- a/packages/playground/src/utils/batch_process.ts
+++ b/packages/playground/src/utils/batch_process.ts
@@ -1,13 +1,63 @@
+export interface BatchProcessOptions {
+  failFast?: boolean;
+}
+
+export interface BatchProcessResult<R> {
+  results: R[];
+  errors: Array<{ batchIndex: number; error: Error }>;
+  hasErrors: boolean;
+}
+
 export async function batchProcess<T, R>(
   items: T[],
   batchSize: number,
   processFn: (batch: T[]) => Promise<R[]>,
-): Promise<R[]> {
-  const results: R[] = [];
+  options: BatchProcessOptions = {},
+): Promise<BatchProcessResult<R>> {
+  const { failFast = false } = options;
+  const batches: T[][] = [];
+
   for (let i = 0; i < items.length; i += batchSize) {
-    const batch = items.slice(i, i + batchSize);
-    const batchResults = await processFn(batch);
-    results.push(...batchResults);
+    batches.push(items.slice(i, i + batchSize));
+  }
+
+  if (failFast) {
+    const batchResults = await Promise.all(batches.map(batch => processFn(batch)));
+    return {
+      results: batchResults.flat(),
+      errors: [],
+      hasErrors: false,
+    };
+  } else {
+    const batchResults = await Promise.allSettled(batches.map(batch => processFn(batch)));
+
+    const results: R[] = [];
+    const errors: Array<{ batchIndex: number; error: Error }> = [];
+
+    batchResults.forEach((result, index) => {
+      if (result.status === "fulfilled") {
+        const batchResult = result.value;
+        if (Array.isArray(batchResult)) {
+          results.push(...batchResult);
+        } else {
+          console.error(`Batch ${index} returned non-array result:`, batchResult);
+        }
+      } else {
+        errors.push({
+          batchIndex: index,
+          error: result.reason instanceof Error ? result.reason : new Error(String(result.reason)),
+        });
+      }
+    });
+
+    if (errors.length > 0) {
+      console.error(`Batch processing completed with ${errors.length} failed batches:`, errors);
+    }
+
+    return {
+      results,
+      errors,
+      hasErrors: errors.length > 0,
+    };
   }
-  return results;
 }
diff --git a/packages/playground/tests/utils/batchProcess.test.ts b/packages/playground/tests/utils/batchProcess.test.ts
new file mode 100644
index 0000000000..9da267942b
--- /dev/null
+++ b/packages/playground/tests/utils/batchProcess.test.ts
@@ -0,0 +1,194 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { batchProcess, BatchProcessOptions } from "../../src/utils/batch_process";
+
+describe("batchProcess", () => {
+  const mockProcessFn = vi.fn();
+
+  beforeEach(() => {
+    mockProcessFn.mockClear();
+    vi.clearAllMocks();
+  });
+
+  describe("successful processing", () => {
+    it("should process items in batches and return all results", async () => {
+      const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+      const batchSize = 3;
+
+      mockProcessFn
+        .mockResolvedValueOnce(["a", "b", "c"])
+        .mockResolvedValueOnce(["d", "e", "f"])
+        .mockResolvedValueOnce(["g", "h", "i"])
+        .mockResolvedValueOnce(["j"]);
+
+      const result = await batchProcess(items, batchSize, mockProcessFn);
+
+      expect(result.results).toEqual(["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"]);
+      expect(result.hasErrors).toBe(false);
+      expect(result.errors).toHaveLength(0);
+      expect(mockProcessFn).toHaveBeenCalledTimes(4);
+      expect(mockProcessFn).toHaveBeenNthCalledWith(1, [1, 2, 3]);
+      expect(mockProcessFn).toHaveBeenNthCalledWith(2, [4, 5, 6]);
+      expect(mockProcessFn).toHaveBeenNthCalledWith(3, [7, 8, 9]);
+      expect(mockProcessFn).toHaveBeenNthCalledWith(4, [10]);
+    });
+
+    it("should handle empty input array", async () => {
+      const result = await batchProcess([], 5, mockProcessFn);
+
+      expect(result.results).toEqual([]);
+      expect(result.hasErrors).toBe(false);
+      expect(result.errors).toHaveLength(0);
+      expect(mockProcessFn).not.toHaveBeenCalled();
+    });
+
+    it("should handle single batch", async () => {
+      const items = [1, 2, 3];
+      mockProcessFn.mockResolvedValueOnce(["a", "b", "c"]);
+
+      const result = await batchProcess(items, 5, mockProcessFn);
+
+      expect(result.results).toEqual(["a", "b", "c"]);
+      expect(result.hasErrors).toBe(false);
+      expect(mockProcessFn).toHaveBeenCalledTimes(1);
+      expect(mockProcessFn).toHaveBeenCalledWith([1, 2, 3]);
+    });
+  });
+
+  describe("error handling - resilient mode (default)", () => {
+    it("should continue processing when some batches fail", async () => {
+      const items = [1, 2, 3, 4, 5, 6];
+      const batchSize = 2;
+      const error1 = new Error("Batch 1 failed");
+      const error2 = new Error("Batch 2 failed");
+
+      mockProcessFn.mockRejectedValueOnce(error1).mockResolvedValueOnce(["c", "d"]).mockRejectedValueOnce(error2);
+
+      const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+      const result = await batchProcess(items, batchSize, mockProcessFn);
+
+      expect(result.results).toEqual(["c", "d"]);
+      expect(result.hasErrors).toBe(true);
+      expect(result.errors).toHaveLength(2);
+      expect(result.errors[0]).toEqual({ batchIndex: 0, error: error1 });
+      expect(result.errors[1]).toEqual({ batchIndex: 2, error: error2 });
+      expect(consoleSpy).toHaveBeenCalledWith("Batch processing completed with 2 failed batches:", result.errors);
+
+      consoleSpy.mockRestore();
+    });
+
+    it("should normalize non-Error rejections", async () => {
+      const items = [1, 2];
+      mockProcessFn.mockRejectedValueOnce("String error");
+
+      const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+      const result = await batchProcess(items, 1, mockProcessFn);
+
+      expect(result.hasErrors).toBe(true);
+      expect(result.errors).toHaveLength(1);
+      expect(result.errors[0].error).toBeInstanceOf(Error);
+      expect(result.errors[0].error.message).toBe("String error");
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("error handling - fail fast mode", () => {
+    it("should throw on first error when failFast is true", async () => {
+      const items = [1, 2, 3, 4];
+      const batchSize = 2;
+      const error = new Error("First batch failed");
+
+      mockProcessFn.mockRejectedValueOnce(error).mockResolvedValueOnce(["c", "d"]);
+
+      const options: BatchProcessOptions = { failFast: true };
+
+      await expect(batchProcess(items, batchSize, mockProcessFn, options)).rejects.toThrow(error);
+
+      expect(mockProcessFn).toHaveBeenCalledTimes(2);
+    });
+
+    it("should return successful results when no errors in fail fast mode", async () => {
+      const items = [1, 2, 3, 4];
+      const batchSize = 2;
+
+      mockProcessFn.mockResolvedValueOnce(["a", "b"]).mockResolvedValueOnce(["c", "d"]);
+
+      const options: BatchProcessOptions = { failFast: true };
+      const result = await batchProcess(items, batchSize, mockProcessFn, options);
+
+      expect(result.results).toEqual(["a", "b", "c", "d"]);
+      expect(result.hasErrors).toBe(false);
+      expect(result.errors).toHaveLength(0);
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle batch size larger than items length", async () => {
+      const items = [1, 2, 3];
+      mockProcessFn.mockResolvedValueOnce(["a", "b", "c"]);
+
+      const result = await batchProcess(items, 10, mockProcessFn);
+
+      expect(result.results).toEqual(["a", "b", "c"]);
+      expect(mockProcessFn).toHaveBeenCalledTimes(1);
+      expect(mockProcessFn).toHaveBeenCalledWith([1, 2, 3]);
+    });
+
+    it("should handle batch size of 1", async () => {
+      const items = [1, 2, 3];
+      mockProcessFn.mockResolvedValueOnce(["a"]).mockResolvedValueOnce(["b"]).mockResolvedValueOnce(["c"]);
+
+      const result = await batchProcess(items, 1, mockProcessFn);
+
+      expect(result.results).toEqual(["a", "b", "c"]);
+      expect(mockProcessFn).toHaveBeenCalledTimes(3);
+    });
+
+    it("should handle processFn returning empty arrays", async () => {
+      const items = [1, 2, 3, 4];
+      mockProcessFn.mockResolvedValueOnce([]).mockResolvedValueOnce(["a", "b"]);
+
+      const result = await batchProcess(items, 2, mockProcessFn);
+
+      expect(result.results).toEqual(["a", "b"]);
+      expect(result.hasErrors).toBe(false);
+    });
+
+    it("should handle processFn returning non-array values", async () => {
+      const items = [1, 2, 3, 4];
+      const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+      mockProcessFn.mockResolvedValueOnce("not an array" as any).mockResolvedValueOnce(["a", "b"]);
+
+      const result = await batchProcess(items, 2, mockProcessFn);
+
+      expect(result.results).toEqual(["a", "b"]);
+      expect(result.hasErrors).toBe(false);
+      expect(consoleSpy).toHaveBeenCalledWith("Batch 0 returned non-array result:", "not an array");
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("parallel processing", () => {
+    it("should process batches in parallel", async () => {
+      const items = [1, 2, 3, 4];
+      const batchSize = 2;
+      const callOrder: number[] = [];
+
+      mockProcessFn.mockImplementation(async (batch: number[]) => {
+        callOrder.push(batch[0]);
+        await new Promise(resolve => setTimeout(resolve, 50));
+        return [`result-${batch[0]}`];
+      });
+
+      await batchProcess(items, batchSize, mockProcessFn);
+
+      expect(mockProcessFn).toHaveBeenCalledTimes(2);
+      expect(callOrder).toEqual([1, 3]);
+    });
+  });
+});

From 2d1bb02be0f517fb7739a4cee9d88ffc45bf723f Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 8 Jul 2025 22:28:41 +0300
Subject: [PATCH 10/15] - Remove dead code - Remove get_nodeInfo_with_cache
 file and use it as a seperate function - Create test unit for
 getNodeInfoWithCache function - Extract helper functions to reduce the
 nesting

---
 .../src/components/vm_deployment_table.vue    |  26 +-
 .../playground/src/utils/batch_process.ts     |  61 ++---
 .../src/utils/get_nodeInfo_with_cache.ts      |  13 -
 packages/playground/src/utils/get_nodes.ts    |  30 +++
 .../src/weblets/tf_contracts_list.vue         |   2 +-
 .../tests/utils/batchProcess.test.ts          |  34 +--
 .../tests/utils/getNodeInfoWithCache.test.ts  | 224 ++++++++++++++++++
 7 files changed, 297 insertions(+), 93 deletions(-)
 delete mode 100644 packages/playground/src/utils/get_nodeInfo_with_cache.ts
 create mode 100644 packages/playground/tests/utils/getNodeInfoWithCache.test.ts

diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index 3bfe036c77..9c79496fd1 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -179,6 +179,7 @@
 
 <script lang="ts" setup>
 import { capitalize, computed, onMounted, ref } from "vue";
+import type { GridClient } from "@threefold/grid_client";
 
 import { getNodeHealthColor, NodeHealth } from "@/utils/get_nodes";
 
@@ -254,6 +255,21 @@ async function loadDomains() {
   }
 }
 
+async function loadDeploymentChunks(grid: GridClient, projectName: string, showAll: boolean) {
+  const loadTasks = [loadVms(grid), loadVms(updateGrid(grid, { projectName: projectName.toLowerCase() }))];
+
+  // Only load all deployments for VM projects when showAll is enabled
+  const shouldLoadAllDeployments = showAll && projectName.toLowerCase() === ProjectName.VM.toLowerCase();
+  if (shouldLoadAllDeployments) {
+    loadTasks.push(loadVms(updateGrid(grid, { projectName: "" })));
+  } else {
+    // Add a resolved promise to maintain consistent array length
+    loadTasks.push(Promise.resolve({ count: 0, items: [], failedDeployments: [] }));
+  }
+
+  return Promise.allSettled(loadTasks);
+}
+
 async function loadDeployments() {
   const start = performance.now();
   if (props.projectName.toLowerCase() === ProjectName.Domains.toLowerCase()) {
@@ -266,15 +282,7 @@ async function loadDeployments() {
   loading.value = true;
   const grid = await getGrid(profileManager.profile!, props.projectName);
   try {
-    const shouldLoadAllDeployments =
-      showAllDeployments.value && props.projectName.toLowerCase() === ProjectName.VM.toLowerCase();
-    const results = await Promise.allSettled([
-      loadVms(grid!),
-      loadVms(updateGrid(grid!, { projectName: props.projectName.toLowerCase() })),
-      shouldLoadAllDeployments
-        ? loadVms(updateGrid(grid!, { projectName: "" }))
-        : Promise.resolve({ count: 0, items: [], failedDeployments: [] }),
-    ]);
+    const results = await loadDeploymentChunks(grid!, props.projectName, showAllDeployments.value);
     const [chunk1, chunk2, chunk3] = results.map((result, index) => {
       if (result.status === "fulfilled") {
         return result.value;
diff --git a/packages/playground/src/utils/batch_process.ts b/packages/playground/src/utils/batch_process.ts
index 3a7f38999d..7f1aabf417 100644
--- a/packages/playground/src/utils/batch_process.ts
+++ b/packages/playground/src/utils/batch_process.ts
@@ -1,7 +1,3 @@
-export interface BatchProcessOptions {
-  failFast?: boolean;
-}
-
 export interface BatchProcessResult<R> {
   results: R[];
   errors: Array<{ batchIndex: number; error: Error }>;
@@ -12,52 +8,41 @@ export async function batchProcess<T, R>(
   items: T[],
   batchSize: number,
   processFn: (batch: T[]) => Promise<R[]>,
-  options: BatchProcessOptions = {},
 ): Promise<BatchProcessResult<R>> {
-  const { failFast = false } = options;
   const batches: T[][] = [];
 
   for (let i = 0; i < items.length; i += batchSize) {
     batches.push(items.slice(i, i + batchSize));
   }
 
-  if (failFast) {
-    const batchResults = await Promise.all(batches.map(batch => processFn(batch)));
-    return {
-      results: batchResults.flat(),
-      errors: [],
-      hasErrors: false,
-    };
-  } else {
-    const batchResults = await Promise.allSettled(batches.map(batch => processFn(batch)));
+  const batchResults = await Promise.allSettled(batches.map(batch => processFn(batch)));
 
-    const results: R[] = [];
-    const errors: Array<{ batchIndex: number; error: Error }> = [];
+  const results: R[] = [];
+  const errors: Array<{ batchIndex: number; error: Error }> = [];
 
-    batchResults.forEach((result, index) => {
-      if (result.status === "fulfilled") {
-        const batchResult = result.value;
-        if (Array.isArray(batchResult)) {
-          results.push(...batchResult);
-        } else {
-          console.error(`Batch ${index} returned non-array result:`, batchResult);
-        }
+  batchResults.forEach((result, index) => {
+    if (result.status === "fulfilled") {
+      const batchResult = result.value;
+      if (Array.isArray(batchResult)) {
+        results.push(...batchResult);
       } else {
-        errors.push({
-          batchIndex: index,
-          error: result.reason instanceof Error ? result.reason : new Error(String(result.reason)),
-        });
+        console.error(`Batch ${index} returned non-array result:`, batchResult);
       }
-    });
-
-    if (errors.length > 0) {
-      console.error(`Batch processing completed with ${errors.length} failed batches:`, errors);
+    } else {
+      errors.push({
+        batchIndex: index,
+        error: result.reason instanceof Error ? result.reason : new Error(String(result.reason)),
+      });
     }
+  });
 
-    return {
-      results,
-      errors,
-      hasErrors: errors.length > 0,
-    };
+  if (errors.length > 0) {
+    console.error(`Batch processing completed with ${errors.length} failed batches:`, errors);
   }
+
+  return {
+    results,
+    errors,
+    hasErrors: errors.length > 0,
+  };
 }
diff --git a/packages/playground/src/utils/get_nodeInfo_with_cache.ts b/packages/playground/src/utils/get_nodeInfo_with_cache.ts
deleted file mode 100644
index f28da4e566..0000000000
--- a/packages/playground/src/utils/get_nodeInfo_with_cache.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { getNodeInfo } from "@/utils/contracts";
-
-export async function getNodeInfoWithCache(nodeIds: number[]) {
-  const nodeInfoCache = new Map();
-  const uncachedIds = nodeIds.filter(id => !nodeInfoCache.has(id));
-  if (uncachedIds.length > 0) {
-    const newInfo = await getNodeInfo(uncachedIds, []);
-    for (const [id, info] of Object.entries(newInfo)) {
-      nodeInfoCache.set(Number(id), info);
-    }
-  }
-  return nodeIds.map(id => nodeInfoCache.get(id));
-}
diff --git a/packages/playground/src/utils/get_nodes.ts b/packages/playground/src/utils/get_nodes.ts
index aa089ac61c..1c746e2664 100644
--- a/packages/playground/src/utils/get_nodes.ts
+++ b/packages/playground/src/utils/get_nodes.ts
@@ -12,6 +12,7 @@ import { ref } from "vue";
 
 import { gridProxyClient } from "@/clients";
 import type { NodeHealthColor, NodeStatusColor, NodeTypeColor } from "@/types";
+import { getNodeInfo } from "@/utils/contracts";
 const requestPageNumber = ref<number>(1);
 const offlineNodes = ref<NodeInfo[]>([]);
 type NodeFilters = FilterOptions & {
@@ -201,3 +202,32 @@ export function convert(value: string | undefined) {
 }
 
 export const convertToBytes = convert;
+
+// Create module-level cache
+const nodeInfoCache = new Map<number, any>();
+
+/**
+ * Retrieves node information with caching to avoid redundant API calls.
+ * @param {number[]} nodeIds - Array of node IDs to get information for.
+ * @returns {Promise<any[]>} A Promise that resolves to an array of node information objects.
+ */
+export async function getNodeInfoWithCache(nodeIds: number[]) {
+  const uncachedIds = nodeIds.filter(id => !nodeInfoCache.has(id));
+  const uniqueUncachedIds = Array.from(new Set(uncachedIds));
+
+  if (uniqueUncachedIds.length > 0) {
+    const newInfo = await getNodeInfo(uniqueUncachedIds, []);
+    for (const [id, info] of Object.entries(newInfo)) {
+      nodeInfoCache.set(Number(id), info);
+    }
+  }
+  return nodeIds.map(id => nodeInfoCache.get(id));
+}
+
+/**
+ * Clears the node info cache. Primarily used for testing.
+ * @internal
+ */
+export function clearNodeInfoCache() {
+  nodeInfoCache.clear();
+}
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index 1be4d2ad7c..06ecc4a01b 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -256,7 +256,7 @@ import { manual } from "@/utils/manual";
 
 import { gridProxyClient, queryClient } from "../clients";
 import { useGrid } from "../stores";
-import { getNodeInfoWithCache } from "@/utils/get_nodeInfo_with_cache";
+import { getNodeInfoWithCache } from "@/utils/get_nodes";
 const profileManagerController = useProfileManagerController();
 const balance = profileManagerController.balance;
 const freeBalance = computed(() => balance.value?.free ?? 0);
diff --git a/packages/playground/tests/utils/batchProcess.test.ts b/packages/playground/tests/utils/batchProcess.test.ts
index 9da267942b..60da8911df 100644
--- a/packages/playground/tests/utils/batchProcess.test.ts
+++ b/packages/playground/tests/utils/batchProcess.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import { batchProcess, BatchProcessOptions } from "../../src/utils/batch_process";
+import { batchProcess } from "../../src/utils/batch_process";
 
 describe("batchProcess", () => {
   const mockProcessFn = vi.fn();
@@ -55,7 +55,7 @@ describe("batchProcess", () => {
     });
   });
 
-  describe("error handling - resilient mode (default)", () => {
+  describe("error handling - resilient mode", () => {
     it("should continue processing when some batches fail", async () => {
       const items = [1, 2, 3, 4, 5, 6];
       const batchSize = 2;
@@ -95,36 +95,6 @@ describe("batchProcess", () => {
     });
   });
 
-  describe("error handling - fail fast mode", () => {
-    it("should throw on first error when failFast is true", async () => {
-      const items = [1, 2, 3, 4];
-      const batchSize = 2;
-      const error = new Error("First batch failed");
-
-      mockProcessFn.mockRejectedValueOnce(error).mockResolvedValueOnce(["c", "d"]);
-
-      const options: BatchProcessOptions = { failFast: true };
-
-      await expect(batchProcess(items, batchSize, mockProcessFn, options)).rejects.toThrow(error);
-
-      expect(mockProcessFn).toHaveBeenCalledTimes(2);
-    });
-
-    it("should return successful results when no errors in fail fast mode", async () => {
-      const items = [1, 2, 3, 4];
-      const batchSize = 2;
-
-      mockProcessFn.mockResolvedValueOnce(["a", "b"]).mockResolvedValueOnce(["c", "d"]);
-
-      const options: BatchProcessOptions = { failFast: true };
-      const result = await batchProcess(items, batchSize, mockProcessFn, options);
-
-      expect(result.results).toEqual(["a", "b", "c", "d"]);
-      expect(result.hasErrors).toBe(false);
-      expect(result.errors).toHaveLength(0);
-    });
-  });
-
   describe("edge cases", () => {
     it("should handle batch size larger than items length", async () => {
       const items = [1, 2, 3];
diff --git a/packages/playground/tests/utils/getNodeInfoWithCache.test.ts b/packages/playground/tests/utils/getNodeInfoWithCache.test.ts
new file mode 100644
index 0000000000..8ad6df5c2e
--- /dev/null
+++ b/packages/playground/tests/utils/getNodeInfoWithCache.test.ts
@@ -0,0 +1,224 @@
+import { NodeStatus } from "@threefold/gridproxy_client";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock the getNodeInfo function before importing the module under test
+vi.mock("../../src/utils/contracts", () => ({
+  getNodeInfo: vi.fn(),
+}));
+
+// Import after mocking
+import { getNodeInfo } from "../../src/utils/contracts";
+import { clearNodeInfoCache, getNodeInfoWithCache } from "../../src/utils/get_nodes";
+
+describe("getNodeInfoWithCache", () => {
+  const mockGetNodeInfo = vi.mocked(getNodeInfo);
+
+  beforeEach(() => {
+    mockGetNodeInfo.mockClear();
+    vi.clearAllMocks();
+    clearNodeInfoCache(); // Clear the cache between tests for isolation
+  });
+
+  describe("caching behavior", () => {
+    it("should fetch node info and cache results on first call", async () => {
+      const nodeIds = [1, 2, 3];
+      const mockResponse = {
+        "1": { status: NodeStatus.Up, farmId: 100 },
+        "2": { status: NodeStatus.Up, farmId: 101 },
+        "3": { status: NodeStatus.Down, farmId: 102 },
+      };
+
+      mockGetNodeInfo.mockResolvedValueOnce(mockResponse);
+
+      const result = await getNodeInfoWithCache(nodeIds);
+
+      expect(mockGetNodeInfo).toHaveBeenCalledTimes(1);
+      expect(mockGetNodeInfo).toHaveBeenCalledWith([1, 2, 3], []);
+      expect(result).toEqual([
+        { status: NodeStatus.Up, farmId: 100 },
+        { status: NodeStatus.Up, farmId: 101 },
+        { status: NodeStatus.Down, farmId: 102 },
+      ]);
+    });
+
+    it("should return cached results without API call on subsequent calls", async () => {
+      const nodeIds = [1, 2];
+      const mockResponse = {
+        "1": { status: NodeStatus.Up, farmId: 100 },
+        "2": { status: NodeStatus.Up, farmId: 101 },
+      };
+
+      mockGetNodeInfo.mockResolvedValueOnce(mockResponse);
+
+      // First call - should fetch from API
+      const firstResult = await getNodeInfoWithCache(nodeIds);
+
+      // Second call - should use cache
+      const secondResult = await getNodeInfoWithCache(nodeIds);
+
+      expect(mockGetNodeInfo).toHaveBeenCalledTimes(1);
+      expect(firstResult).toEqual(secondResult);
+      expect(secondResult).toEqual([
+        { status: NodeStatus.Up, farmId: 100 },
+        { status: NodeStatus.Up, farmId: 101 },
+      ]);
+    });
+
+    it("should only fetch uncached nodes when mixing cached and uncached requests", async () => {
+      const initialNodeIds = [1, 2];
+      const initialMockResponse = {
+        "1": { status: NodeStatus.Up, farmId: 100 },
+        "2": { status: NodeStatus.Up, farmId: 101 },
+      };
+
+      const additionalMockResponse = {
+        "3": { status: NodeStatus.Down, farmId: 102 },
+        "4": { status: NodeStatus.Standby, farmId: 103 },
+      };
+
+      mockGetNodeInfo.mockResolvedValueOnce(initialMockResponse).mockResolvedValueOnce(additionalMockResponse);
+
+      // First call - cache nodes 1 and 2
+      await getNodeInfoWithCache(initialNodeIds);
+
+      // Second call - mix of cached (1, 2) and uncached (3, 4) nodes
+      const mixedNodeIds = [1, 3, 2, 4];
+      const result = await getNodeInfoWithCache(mixedNodeIds);
+
+      expect(mockGetNodeInfo).toHaveBeenCalledTimes(2);
+      expect(mockGetNodeInfo).toHaveBeenNthCalledWith(1, [1, 2], []);
+      expect(mockGetNodeInfo).toHaveBeenNthCalledWith(2, [3, 4], []);
+
+      expect(result).toEqual([
+        { status: NodeStatus.Up, farmId: 100 },
+        { status: NodeStatus.Down, farmId: 102 },
+        { status: NodeStatus.Up, farmId: 101 },
+        { status: NodeStatus.Standby, farmId: 103 },
+      ]);
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle empty node IDs array", async () => {
+      const result = await getNodeInfoWithCache([]);
+
+      expect(mockGetNodeInfo).not.toHaveBeenCalled();
+      expect(result).toEqual([]);
+    });
+
+    it("should handle single node ID", async () => {
+      const nodeIds = [42];
+      const mockResponse = {
+        "42": { status: NodeStatus.Up, farmId: 200 },
+      };
+
+      mockGetNodeInfo.mockResolvedValueOnce(mockResponse);
+
+      const result = await getNodeInfoWithCache(nodeIds);
+
+      expect(mockGetNodeInfo).toHaveBeenCalledTimes(1);
+      expect(mockGetNodeInfo).toHaveBeenCalledWith([42], []);
+      expect(result).toEqual([{ status: NodeStatus.Up, farmId: 200 }]);
+    });
+
+    it("should handle duplicate node IDs in request", async () => {
+      const nodeIds = [1, 2, 1, 3, 2];
+      const mockResponse = {
+        "1": { status: NodeStatus.Up, farmId: 100 },
+        "2": { status: NodeStatus.Up, farmId: 101 },
+        "3": { status: NodeStatus.Down, farmId: 102 },
+      };
+
+      mockGetNodeInfo.mockResolvedValueOnce(mockResponse);
+
+      const result = await getNodeInfoWithCache(nodeIds);
+
+      expect(mockGetNodeInfo).toHaveBeenCalledTimes(1);
+      expect(mockGetNodeInfo).toHaveBeenCalledWith([1, 2, 3], []);
+      expect(result).toEqual([
+        { status: NodeStatus.Up, farmId: 100 },
+        { status: NodeStatus.Up, farmId: 101 },
+        { status: NodeStatus.Up, farmId: 100 },
+        { status: NodeStatus.Down, farmId: 102 },
+        { status: NodeStatus.Up, farmId: 101 },
+      ]);
+    });
+
+    it("should handle API returning partial results", async () => {
+      const nodeIds = [1, 2, 3];
+      const mockResponse = {
+        "1": { status: NodeStatus.Up, farmId: 100 },
+        // Missing node 2 and 3 from response
+      };
+
+      mockGetNodeInfo.mockResolvedValueOnce(mockResponse);
+
+      const result = await getNodeInfoWithCache(nodeIds);
+
+      expect(result).toEqual([
+        { status: NodeStatus.Up, farmId: 100 },
+        undefined, // node 2 not found in response
+        undefined, // node 3 not found in response
+      ]);
+    });
+  });
+
+  describe("error handling", () => {
+    it("should propagate API errors", async () => {
+      const nodeIds = [1, 2];
+      const apiError = new Error("API request failed");
+
+      mockGetNodeInfo.mockRejectedValueOnce(apiError);
+
+      await expect(getNodeInfoWithCache(nodeIds)).rejects.toThrow("API request failed");
+      expect(mockGetNodeInfo).toHaveBeenCalledTimes(1);
+    });
+
+    it("should handle cached data correctly even after previous API error", async () => {
+      const nodeIds = [1, 2];
+      const apiError = new Error("API request failed");
+
+      mockGetNodeInfo.mockRejectedValueOnce(apiError);
+
+      // First call fails
+      await expect(getNodeInfoWithCache(nodeIds)).rejects.toThrow("API request failed");
+
+      // Second call should still try to fetch (cache should be empty)
+      const mockResponse = {
+        "1": { status: NodeStatus.Up, farmId: 100 },
+        "2": { status: NodeStatus.Up, farmId: 101 },
+      };
+      mockGetNodeInfo.mockResolvedValueOnce(mockResponse);
+
+      const result = await getNodeInfoWithCache(nodeIds);
+
+      expect(mockGetNodeInfo).toHaveBeenCalledTimes(2);
+      expect(result).toEqual([
+        { status: NodeStatus.Up, farmId: 100 },
+        { status: NodeStatus.Up, farmId: 101 },
+      ]);
+    });
+  });
+
+  describe("performance characteristics", () => {
+    it("should minimize API calls with large datasets", async () => {
+      const largeNodeIdSet = Array.from({ length: 100 }, (_, i) => i + 1);
+      const mockResponse = Object.fromEntries(
+        largeNodeIdSet.map(id => [id.toString(), { status: NodeStatus.Up, farmId: 100 + id }]),
+      );
+
+      mockGetNodeInfo.mockResolvedValueOnce(mockResponse);
+
+      // First call - fetch all
+      await getNodeInfoWithCache(largeNodeIdSet);
+
+      // Multiple subsequent calls with overlapping subsets
+      await getNodeInfoWithCache([1, 2, 3, 4, 5]);
+      await getNodeInfoWithCache([10, 20, 30, 40, 50]);
+      await getNodeInfoWithCache([95, 96, 97, 98, 99, 100]);
+
+      // Should only have made one API call
+      expect(mockGetNodeInfo).toHaveBeenCalledTimes(1);
+    });
+  });
+});

From 91d0fafce4eaeb026bc72bb6d06484237ad0e7b6 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 8 Jul 2025 22:36:10 +0300
Subject: [PATCH 11/15] Fix batch process calling

---
 packages/playground/src/utils/load_deployment.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/playground/src/utils/load_deployment.ts b/packages/playground/src/utils/load_deployment.ts
index 50f312d3b7..eed1331809 100644
--- a/packages/playground/src/utils/load_deployment.ts
+++ b/packages/playground/src/utils/load_deployment.ts
@@ -168,9 +168,9 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
 
   const data = vms.map((vm, index) => {
     for (let i = 0; i < vm.length; i++) {
-      vm[i].billing = formatConsumption(consumptions[index]?.amountBilled as number);
-      if (wireguards[index] && wireguards[index].length > 0) {
-        vm[i].wireguard = wireguards[index][0];
+      vm[i].billing = formatConsumption(consumptions.results[index]?.amountBilled as number);
+      if (wireguards.results[index] && wireguards.results[index].length > 0) {
+        vm[i].wireguard = wireguards.results[index][0];
       }
     }
 
@@ -241,7 +241,7 @@ export async function loadK8s(grid: GridClient) {
     return results.map(r => (r.status === "fulfilled" ? r.value : { contracts: [], nodeIds: [], success: false }));
   });
 
-  const contractsAndNodeIds = contractsAndNodeIdsResults.flat();
+  const contractsAndNodeIds = contractsAndNodeIdsResults.results;
 
   const clusterObjsResults = await batchProcess(clusters, BATCH_SIZE, async batch => {
     const results = await Promise.allSettled(
@@ -290,7 +290,7 @@ export async function loadK8s(grid: GridClient) {
     );
     return results.map(r => (r.status === "fulfilled" ? r.value : null));
   });
-  const clusterObjs = clusterObjsResults.flat();
+  const clusterObjs = clusterObjsResults.results;
 
   const items = clusterObjs.filter(Boolean) as any[];
   const k8s = items
@@ -313,7 +313,7 @@ export async function loadK8s(grid: GridClient) {
     );
     return results.map(r => (r.status === "fulfilled" ? r.value : undefined));
   });
-  const consumptions = consumptionsResults.flat();
+  const consumptions = consumptionsResults.results;
 
   const wireguardsResults = await batchProcess(k8s, BATCH_SIZE, async batch => {
     const results = await Promise.allSettled(
@@ -329,7 +329,7 @@ export async function loadK8s(grid: GridClient) {
     );
     return results.map(r => (r.status === "fulfilled" ? r.value : []));
   });
-  const wireguards = wireguardsResults.flat();
+  const wireguards = wireguardsResults.results;
 
   const data = k8s.map((cluster, index) => {
     cluster.masters[0].billing = formatConsumption(consumptions[index]?.amountBilled as number);

From 13747a82f6ad443815e299cc2269f7c911c29f7a Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 13 Jul 2025 17:52:50 +0300
Subject: [PATCH 12/15] Use cached getGridClient instead of updateGrid to avoid
 recreating modules

---
 .../src/components/k8s_deployment_table.vue   |  8 +++---
 .../src/components/vm_deployment_table.vue    |  8 +++---
 .../playground/src/utils/load_deployment.ts   | 28 +++++++++++--------
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index 0ae7292018..63f329cd77 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -165,9 +165,9 @@ import { onMounted, ref } from "vue";
 import { getNodeHealthColor, NodeHealth } from "@/utils/get_nodes";
 
 import { useProfileManager } from "../stores";
-import { getGrid, updateGrid } from "../utils/grid";
+import { getGrid } from "../utils/grid";
 import { markAsFromAnotherClient } from "../utils/helpers";
-import { loadK8s, mergeLoadedDeployments } from "../utils/load_deployment";
+import { loadK8s, mergeLoadedDeployments, getGridClient } from "../utils/load_deployment";
 const profileManager = useProfileManager();
 const showDialog = ref(false);
 const showEncryption = ref(false);
@@ -200,9 +200,9 @@ async function loadDeployments() {
     const shouldLoadAllDeployments = showAllDeployments.value;
     const results = await Promise.allSettled([
       loadK8s(grid),
-      loadK8s(updateGrid(grid, { projectName: props.projectName.toLowerCase() })),
+      loadK8s(await getGridClient(grid.clientOptions, props.projectName.toLowerCase())),
       shouldLoadAllDeployments
-        ? loadK8s(updateGrid(grid, { projectName: "" }))
+        ? loadK8s(await getGridClient(grid.clientOptions, ""))
         : Promise.resolve({ count: 0, items: [], failedDeployments: [] }),
     ]);
     const chunk1 =
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index 9c79496fd1..c1e0017c50 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -184,9 +184,9 @@ import type { GridClient } from "@threefold/grid_client";
 import { getNodeHealthColor, NodeHealth } from "@/utils/get_nodes";
 
 import { useProfileManager } from "../stores";
-import { getGrid, updateGrid } from "../utils/grid";
+import { getGrid } from "../utils/grid";
 import { markAsFromAnotherClient } from "../utils/helpers";
-import { loadVms, mergeLoadedDeployments } from "../utils/load_deployment";
+import { loadVms, mergeLoadedDeployments, getGridClient } from "../utils/load_deployment";
 
 const profileManager = useProfileManager();
 
@@ -256,12 +256,12 @@ async function loadDomains() {
 }
 
 async function loadDeploymentChunks(grid: GridClient, projectName: string, showAll: boolean) {
-  const loadTasks = [loadVms(grid), loadVms(updateGrid(grid, { projectName: projectName.toLowerCase() }))];
+  const loadTasks = [loadVms(grid), loadVms(await getGridClient(grid.clientOptions, projectName.toLowerCase()))];
 
   // Only load all deployments for VM projects when showAll is enabled
   const shouldLoadAllDeployments = showAll && projectName.toLowerCase() === ProjectName.VM.toLowerCase();
   if (shouldLoadAllDeployments) {
-    loadTasks.push(loadVms(updateGrid(grid, { projectName: "" })));
+    loadTasks.push(loadVms(await getGridClient(grid.clientOptions, "")));
   } else {
     // Add a resolved promise to maintain consistent array length
     loadTasks.push(Promise.resolve({ count: 0, items: [], failedDeployments: [] }));
diff --git a/packages/playground/src/utils/load_deployment.ts b/packages/playground/src/utils/load_deployment.ts
index eed1331809..ae1f774e82 100644
--- a/packages/playground/src/utils/load_deployment.ts
+++ b/packages/playground/src/utils/load_deployment.ts
@@ -2,7 +2,7 @@ import { type ClientOptions, type GridClient } from "@threefold/grid_client";
 
 import { batchProcess } from "./batch_process";
 import { formatConsumption } from "./contracts";
-import { getGrid, updateGrid } from "./grid";
+import { getGrid } from "./grid";
 import { normalizeError } from "./helpers";
 import { migrateModule } from "./migration";
 export interface LoadedDeployments<T> {
@@ -43,8 +43,8 @@ async function getDeploymentContracts(grid: GridClient, name: string, projectNam
     return contracts1;
   }
 
-  // will raise error if can't decrypt
-  const contracts2 = await updateGrid(grid, { projectName }).machines.getDeploymentContracts(name);
+  const gridWithProject = await getGridClient(grid.clientOptions, projectName);
+  const contracts2 = await gridWithProject.machines.getDeploymentContracts(name);
   return contracts2;
 }
 
@@ -82,8 +82,10 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
 
       const machinePromise = grids[index]!.machines.getObj(name).then(res => {
         if (!projectName && (!Array.isArray(res) || res.length === 0)) {
-          grids[index] = updateGrid(grids[index]!, { projectName: "" });
-          return grids[index]!.machines.getObj(name);
+          return getGridClient(grid.clientOptions, "").then(emptyProjectGrid => {
+            grids[index] = emptyProjectGrid;
+            return emptyProjectGrid.machines.getObj(name);
+          });
         }
         return res;
       });
@@ -183,16 +185,16 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
     failedDeployments,
   };
 }
-export function getWireguardConfig(grid: GridClient, name: string, ipRange: string) {
-  const projectName = grid.clientOptions!.projectName;
+export async function getWireguardConfig(grid: GridClient, name: string, ipRange: string) {
   if (!ipRange.endsWith("/16")) {
     const parts = ipRange.split(".");
     parts[2] = parts[3] = "0";
     ipRange = parts.join(".") + "/16";
   }
-  return updateGrid(grid, { projectName: "" })
-    .networks.getWireGuardConfigs({ name, ipRange })
-    .finally(() => updateGrid(grid, { projectName }));
+
+  // Use cached getGridClient with empty project name instead of updateGrid
+  const emptyProjectGrid = await getGridClient(grid.clientOptions, "");
+  return emptyProjectGrid.networks.getWireGuardConfigs({ name, ipRange });
 }
 
 export type K8S = { masters: any[]; workers: any[]; deploymentName: string; projectName: string; wireguard?: any };
@@ -257,8 +259,10 @@ export async function loadK8s(grid: GridClient) {
         try {
           const clusterPromise = grids[index]!.k8s.getObj(name).then(res => {
             if (!projectName && res && res.masters && res.masters.length === 0) {
-              grids[index] = updateGrid(grids[index]!, { projectName: "" });
-              return grids[index]!.k8s.getObj(name);
+              return getGridClient(grid.clientOptions, "").then(emptyProjectGrid => {
+                grids[index] = emptyProjectGrid;
+                return emptyProjectGrid.k8s.getObj(name);
+              });
             }
             return res;
           });

From 3d9814c01c5c1779c31d6090ca5975e0018719d0 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 13 Jul 2025 18:08:22 +0300
Subject: [PATCH 13/15] Fix conflicts

---
 .../playground/src/components/vm_deployment_table.vue    | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index 2f559fed63..b67ed28a71 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -183,13 +183,11 @@ import type { GridClient } from "@threefold/grid_client";
 
 import { getNodeHealthColor, NodeHealth } from "@/utils/get_nodes";
 
-import { useProfileManager } from "../stores";
-import { getGrid } from "../utils/grid";
+import { useGrid } from "../stores";
+import { updateGrid } from "../utils/grid";
 import { markAsFromAnotherClient } from "../utils/helpers";
 import { loadVms, mergeLoadedDeployments, getGridClient } from "../utils/load_deployment";
 
-const profileManager = useProfileManager();
-
 const props = defineProps<{
   projectName: string;
   projectTitle: string;
@@ -282,7 +280,7 @@ async function loadDeployments() {
 
   items.value = [];
   loading.value = true;
-  updateGrid(grid, { projectName: props.projectName});
+  updateGrid(grid, { projectName: props.projectName });
   try {
     const results = await loadDeploymentChunks(grid!, props.projectName, showAllDeployments.value);
     const [chunk1, chunk2, chunk3] = results.map((result, index) => {
@@ -507,7 +505,6 @@ import { ProjectName } from "../types";
 import { migrateModule } from "../utils/migration";
 import AccessDeploymentAlert from "./AccessDeploymentAlert.vue";
 import ListTable from "./list_table.vue";
-import { GridClient } from '@threefold/grid_client';
 
 export default {
   name: "VmDeploymentTable",

From 469b79bf771c0cf721fb35457f9369951521776e Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 13 Jul 2025 19:56:32 +0300
Subject: [PATCH 14/15] Fix load network duplicates

---
 .../src/components/vm_deployment_table.vue    |  4 +--
 .../playground/src/utils/load_deployment.ts   | 28 +++++++++----------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index b67ed28a71..2cffd96e3e 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -184,7 +184,6 @@ import type { GridClient } from "@threefold/grid_client";
 import { getNodeHealthColor, NodeHealth } from "@/utils/get_nodes";
 
 import { useGrid } from "../stores";
-import { updateGrid } from "../utils/grid";
 import { markAsFromAnotherClient } from "../utils/helpers";
 import { loadVms, mergeLoadedDeployments, getGridClient } from "../utils/load_deployment";
 
@@ -219,7 +218,7 @@ onMounted(loadDeployments);
 async function loadDomains() {
   try {
     loading.value = true;
-    updateGrid(grid, { projectName: props.projectName.toLowerCase() });
+    const grid = await getGridClient(gridStore.client.clientOptions, props.projectName.toLowerCase());
     const gateways = await grid!.gateway.list();
     const gwsResults = await Promise.allSettled(gateways.map(name => grid!.gateway.get_name({ name })));
     const gws = gwsResults
@@ -280,7 +279,6 @@ async function loadDeployments() {
 
   items.value = [];
   loading.value = true;
-  updateGrid(grid, { projectName: props.projectName });
   try {
     const results = await loadDeploymentChunks(grid!, props.projectName, showAllDeployments.value);
     const [chunk1, chunk2, chunk3] = results.map((result, index) => {
diff --git a/packages/playground/src/utils/load_deployment.ts b/packages/playground/src/utils/load_deployment.ts
index ae1f774e82..468d5bf6e8 100644
--- a/packages/playground/src/utils/load_deployment.ts
+++ b/packages/playground/src/utils/load_deployment.ts
@@ -81,7 +81,8 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
       }
 
       const machinePromise = grids[index]!.machines.getObj(name).then(res => {
-        if (!projectName && (!Array.isArray(res) || res.length === 0)) {
+        // If we have contracts but no deployment data, try with different project contexts
+        if ((!Array.isArray(res) || res.length === 0) && contracts.length > 0) {
           return getGridClient(grid.clientOptions, "").then(emptyProjectGrid => {
             grids[index] = emptyProjectGrid;
             return emptyProjectGrid.machines.getObj(name);
@@ -96,20 +97,20 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
         }, window.env.TIMEOUT);
       });
 
-      try {
-        const result = await Promise.race([machinePromise, timeoutPromise]);
-        if (result instanceof Error && result.message === "Timeout") {
-          console.error(`Timeout loading deployment with name ${name}`);
-          return null;
-        }
-        return result;
-      } catch (e) {
-        console.error(`Failed to load deployment with name ${name}:\n${normalizeError(e, "No errors were provided.")}`);
-        failedDeployments.push({ name, nodes: nodeIds, contracts });
+      const result = await Promise.race([machinePromise, timeoutPromise]);
+      if (result instanceof Error && result.message === "Timeout") {
+        console.error(`Timeout loading deployment with name ${name}`);
+        return null;
+      } else if (Array.isArray(result) && result.length === 0) {
+        console.error(`Failed to load deployment with name ${name}`);
+        failedDeployments.push({ name, nodes: nodeIds, contracts: contracts });
         return null;
       }
-    } catch {
-      failedDeployments.push({ name, contracts: [], nodes: [] });
+
+      return result;
+    } catch (e) {
+      console.error(`Failed to load deployment with name ${name}:\n${normalizeError(e, "No errors were provided.")}`);
+      failedDeployments.push({ name, nodes: [], contracts: [] });
       return null;
     }
   });
@@ -192,7 +193,6 @@ export async function getWireguardConfig(grid: GridClient, name: string, ipRange
     ipRange = parts.join(".") + "/16";
   }
 
-  // Use cached getGridClient with empty project name instead of updateGrid
   const emptyProjectGrid = await getGridClient(grid.clientOptions, "");
   return emptyProjectGrid.networks.getWireGuardConfigs({ name, ipRange });
 }

From 3796e690f6c1a795e6ddb3a3db0899c93c58d82d Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 17 Jul 2025 16:10:22 +0300
Subject: [PATCH 15/15] Fix conflicts

---
 packages/playground/src/components/vm_deployment_table.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index c778c99dcd..a47d246547 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -181,9 +181,8 @@ import type { GridClient } from "@threefold/grid_client";
 import { getNodeHealthColor, NodeHealth } from "@/utils/get_nodes";
 
 import { useGrid } from "../stores";
-import { updateGrid } from "../utils/grid";
 import { markAsFromAnotherClient } from "../utils/helpers";
-import { type LoadedDeployments, loadVms, mergeLoadedDeployments, getGridClient } from "../utils/load_deployment";
+import { loadVms, mergeLoadedDeployments, getGridClient } from "../utils/load_deployment";
 
 const props = defineProps<{
   projectName: string;
@@ -486,7 +485,6 @@ import { ProjectName } from "../types";
 import { migrateModule } from "../utils/migration";
 import AccessDeploymentAlert from "./AccessDeploymentAlert.vue";
 import ListTable from "./list_table.vue";
-import { GridClient } from "@threefold/grid_client";
 
 export default {
   name: "VmDeploymentTable",