Reduce contracts and deployments loading time

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,108 @@ 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;
+      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() })),
+      shouldLoadAllDeployments
+        ? loadK8s(updateGrid(grid, { projectName: "" }))
+        : Promise.resolve({ count: 0, items: [], failedDeployments: [] }),
+    ]);
+    const chunk1 =
+      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
+        : (() => {
+            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
+        : (() => {
+            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;
+      });
+    }
+    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,
+      };
     });
+
+    await Promise.allSettled(items.value.map(item => fetchClusterDetails(item)));
+  } 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`);
   }
+}
+
+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 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;
+    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,
+      }),
+    ]);
+
+    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;
+  }
 }
 
 defineExpose({ loadDeployments });