From d909c6a7dba41b667c8de0accc3e358ca46fd643 Mon Sep 17 00:00:00 2001
From: Alaa228 <alaamahmoud.1223@gmail.com>
Date: Mon, 23 Oct 2023 16:27:13 +0300
Subject: [PATCH] Show failed deployment names in listing table (#1248)

* test error

* try to get failed deployment names

* try to get failed deployments

* try getting names

* trials

* show failed deployment names

* remove unused import

* add dot at end of sentence

* add failed deployments names' in k8s

* add missing chunk 3
---
 .../src/components/k8s_deployment_table.vue         | 10 +++++++++-
 .../src/components/vm_deployment_table.vue          | 13 ++++++++++++-
 packages/playground/src/utils/load_deployment.ts    |  7 ++++++-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index 4f848f3d77..6a5b0d8d6a 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -1,6 +1,10 @@
 <template>
   <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" : "" }}.
+    Failed to load deployment{{ count - items.length > 1 ? "s" : "" }} with name{{
+      count - items.length > 1 ? "s" : ""
+    }}
+    <strong>{{ namesOfFailedDeployments }}</strong
+    >.
   </v-alert>
 
   <ListTable
@@ -76,6 +80,7 @@ defineEmits<{ (event: "update:model-value", value: any[]): void }>();
 const count = ref<number>();
 const items = ref<any[]>([]);
 const loading = ref(false);
+const namesOfFailedDeployments = ref("");
 
 onMounted(loadDeployments);
 async function loadDeployments() {
@@ -87,6 +92,9 @@ async function loadDeployments() {
   const chunk3 = await loadK8s(updateGrid(grid!, { projectName: "" }));
 
   const clusters = mergeLoadedDeployments(chunk1, chunk2, chunk3);
+  const failedDeployments = [...(chunk1 as any).failedK8s, ...(chunk2 as any).failedK8s, ...(chunk3 as any).failedK8s];
+  namesOfFailedDeployments.value = failedDeployments.join(", ");
+
   count.value = clusters.count;
   items.value = clusters.items;
   loading.value = false;
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index 07be97b507..dd912da253 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -1,7 +1,11 @@
 <template>
   <div>
     <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" : "" }};
+      Failed to load deployment{{ count - items.length > 1 ? "s" : "" }} with name{{
+        count - items.length > 1 ? "s" : ""
+      }}
+      <strong>{{ namesOfFailedDeployments }}</strong
+      >.
       <span>
         This might happen because the node is down or it's not reachable or the deployment{{
           count - items.length > 1 ? "s are" : " is"
@@ -84,6 +88,7 @@ defineEmits<{ (event: "update:model-value", value: any[]): void }>();
 const loading = ref(false);
 const count = ref<number>();
 const items = ref<any[]>([]);
+const namesOfFailedDeployments = ref("");
 
 onMounted(loadDeployments);
 async function loadDeployments() {
@@ -108,6 +113,12 @@ async function loadDeployments() {
   if (chunk3.count > 0) await grid!.gateway.list();
 
   const vms = mergeLoadedDeployments(chunk1, chunk2, chunk3 as any);
+  const failedDeployments = [
+    ...(chunk1 as any).failedDeployments,
+    ...(chunk2 as any).failedDeployments,
+    ...(chunk3 as any).failedDeployments,
+  ];
+  namesOfFailedDeployments.value = failedDeployments.join(", ");
 
   count.value = vms.count;
   items.value = vms.items;
diff --git a/packages/playground/src/utils/load_deployment.ts b/packages/playground/src/utils/load_deployment.ts
index afd184e2c3..276efe1d69 100644
--- a/packages/playground/src/utils/load_deployment.ts
+++ b/packages/playground/src/utils/load_deployment.ts
@@ -15,6 +15,7 @@ export interface LoadVMsOptions {
 export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
   const machines = await grid.machines.list();
   let count = machines.length;
+  const failedDeployments: string[] = [];
 
   const projectName = grid.clientOptions.projectName;
   const grids = (await Promise.all(
@@ -27,7 +28,7 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
         `%c[Error] failed to load deployment with name ${name}:\n${normalizeError(e, "No errors were provided.")}`,
         "color: rgb(207, 102, 121)",
       );
-      return null;
+      failedDeployments.push(name);
     });
   });
   const items = await Promise.all(promises);
@@ -78,6 +79,7 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
   return <LoadedDeployments<any[]>>{
     count,
     items: data,
+    failedDeployments,
   };
 }
 export function getWireguardConfig(grid: GridClient, name: string) {
@@ -90,6 +92,7 @@ export function getWireguardConfig(grid: GridClient, name: string) {
 export type K8S = { masters: any[]; workers: any[]; deploymentName: string; wireguard?: any };
 export async function loadK8s(grid: GridClient) {
   const clusters = await grid.k8s.list();
+  const failedK8s: string[] = [];
 
   const projectName = grid.clientOptions.projectName;
   const grids = (await Promise.all(
@@ -102,6 +105,7 @@ export async function loadK8s(grid: GridClient) {
         `%c[Error] failed to load deployment with name ${name}:\n${normalizeError(e, "No errors were provided.")}`,
         "color: rgb(207, 102, 121)",
       );
+      failedK8s.push(name);
       return null;
     });
   });
@@ -138,6 +142,7 @@ export async function loadK8s(grid: GridClient) {
   return <LoadedDeployments<K8S>>{
     count: clusters.length,
     items: data,
+    failedK8s,
   };
 }