Improve failed deployments (#4286)

* - Refactor failed deployments to be displayed on a table
- Hide pagination if failed deployments less than 5 items

* Fix lint

* Fix lint issues

* rm debugging logs

* - Remove the alert inside the dialog
- Rename the dialog header
- Change the warning alert to error

Author: samaradel

packages/playground/src/components/vm_deployment_table.vue

@@ -1,80 +1,48 @@
 <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="error" 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>
       </v-tooltip>
 
-      <v-dialog
-        v-model="showDialog"
-        transition="dialog-bottom-transition"
-        max-width="500px"
-        scrollable
-        attach="#modals"
-      >
+      <v-dialog v-model="showDialog" transition="dialog-bottom-transition" scrollable 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 Details </v-card-title>
           <v-divider color="#FFCC00" />
           <v-card-text>
-            <v-alert
-              type="error"
-              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-alert>
-            <v-list
+            <v-data-table
+              :headers="failedDeploymentsHeader"
               :items="failedDeploymentList"
-              item-props
-              lines="three"
-            >
-              <template #subtitle="{ subtitle }">
-                <div v-html="subtitle" />
-              </template>
-            </v-list>
+              :items-per-page-options="
+                failedDeploymentList.length > 5
+                  ? [
+                      { value: 5, title: '5' },
+                      { value: 10, title: '10' },
+                      { value: 20, title: '20' },
+                      { value: 50, title: '50' },
+                    ]
+                  : undefined
+              "
+              :hide-default-footer="failedDeploymentList.length <= 5"
+              class="mt-3"
+              hover
+            ></v-data-table>
           </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 +107,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 +123,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 +144,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 +157,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 +168,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>
@@ -282,7 +209,11 @@ const failedDeployments = ref<
 >([]);
 const gridStore = useGrid();
 const grid = gridStore.client as GridClient;
-
+const failedDeploymentsHeader = ref([
+  { title: "Name", key: "name", sortable: false },
+  { title: "Node ID", key: "nodes", sortable: false },
+  { title: "Contract ID", key: "contracts", sortable: false },
+]);
 onMounted(loadDeployments);
 
 async function loadDomains() {
@@ -311,7 +242,7 @@ async function loadDeployments() {
 
   items.value = [];
   loading.value = true;
-  updateGrid(grid, { projectName: props.projectName});
+  updateGrid(grid, { projectName: props.projectName });
   try {
     const chunk1 = await loadVms(grid!);
     if (chunk1.count > 0 && migrateGateways) {
@@ -483,36 +414,17 @@ const filteredHeaders = computed(() => {
 });
 
 const failedDeploymentList = computed(() => {
-  return failedDeployments.value
-    .map(({ name, nodes = [], contracts = [] }, index) => {
-      const nodeMessage =
-        nodes.length > 0
-          ? `<span class="ml-4 text-primary font-weight-bold">On Node:</span> ${nodes.join(", ")}.<br/>`
-          : "";
-      const contractMessage =
-        contracts.length > 0
-          ? ` <span class="ml-4 text-primary font-weight-bold">With Contract ID:</span> ${contracts
-              .map(c => c.contractID)
-              .join(", ")}.`
-          : "";
-
-      const subtitle =
-        nodeMessage + contractMessage === ""
-          ? `<span class="ml-4 text-error font-weight-bold">Error:</span> Failed to decrypt deployment data.`
-          : nodeMessage + contractMessage;
-      if (subtitle.includes("Failed to decrypt deployment data.")) {
-        showEncryption.value = true;
-      }
-
-      const item: any[] = [{ title: name, subtitle }];
-
-      if (index + 1 !== failedDeployments.value.length) {
-        item.push({ type: "divider", inset: false });
-      }
+  return failedDeployments.value.map(({ name, nodes = [], contracts = [] }) => {
+    if (nodes.length === 0 && contracts.length === 0) {
+      showEncryption.value = true;
+    }
 
-      return item;
-    })
-    .flat(1);
+    return {
+      name,
+      nodes: nodes.length > 0 ? nodes.join(", ") : "N/A",
+      contracts: contracts.length > 0 ? contracts.map(c => c.contractID).join(", ") : "N/A",
+    };
+  });
 });
 
 function updateItem(newItem: any) {
@@ -539,7 +451,7 @@ 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';
+import { GridClient } from "@threefold/grid_client";
 
 export default {
   name: "VmDeploymentTable",