From 7f55eb4fafbace96bd9003763d3f3a62ff4b3fc4 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 1 Jul 2025 13:05:14 +0300
Subject: [PATCH 1/5] - Removed immediate validation triggers - Validation only
 on submit - Improved validation order & logic

---
 .../src/dashboard/components/add_ip.vue       | 103 ++++++++----------
 1 file changed, 46 insertions(+), 57 deletions(-)

diff --git a/packages/playground/src/dashboard/components/add_ip.vue b/packages/playground/src/dashboard/components/add_ip.vue
index 3c07c0993f..99b2ba276b 100644
--- a/packages/playground/src/dashboard/components/add_ip.vue
+++ b/packages/playground/src/dashboard/components/add_ip.vue
@@ -6,9 +6,7 @@
     <v-container v-if="showDialogue">
       <v-dialog v-model="showDialogue" max-width="600" attach="#modals">
         <v-card>
-          <v-card-title class="bg-primary">
-            Add Public IP to Farm
-          </v-card-title>
+          <v-card-title class="bg-primary"> Add Public IP to Farm </v-card-title>
           <v-card-text>
             <form-validator ref="formValidator" v-model="valid">
               <v-select
@@ -87,9 +85,7 @@
           </v-card-text>
           <v-dialog v-model="showIPs" max-width="600" attach="#modals">
             <v-card>
-              <v-card-title class="bg-primary">
-                IPs range
-              </v-card-title>
+              <v-card-title class="bg-primary"> IPs range </v-card-title>
               <v-card-text>
                 <v-row>
                   <v-col>
@@ -98,21 +94,18 @@
                         <v-row>
                           <v-col sm="4">
                             <p>Network:</p>
-                          </v-col><v-col>
+                          </v-col>
+                          <v-col>
                             <p>{{ network }}</p>
                           </v-col>
                         </v-row>
                       </v-list-item>
                       <v-list-item>
                         <v-row>
-                          <v-col sm="4">
-                            IP Addresses:
-                          </v-col>
+                          <v-col sm="4"> IP Addresses: </v-col>
                           <v-col>
                             <v-chip v-for="ip in ipsRangeTable" :key="ip" type="warning" variant="tonal" class="ma-1">
-                              {{
-                                ip
-                              }}
+                              {{ ip }}
                             </v-chip>
                           </v-col>
                         </v-row>
@@ -124,30 +117,16 @@
               </v-card-text>
 
               <v-card-actions class="justify-end mb-1 mr-2">
-                <v-btn color="anchor" @click="showIPs = false">
-                  Close
-                </v-btn>
+                <v-btn color="anchor" @click="showIPs = false"> Close </v-btn>
               </v-card-actions>
             </v-card>
           </v-dialog>
 
           <v-card-actions class="justify-end mb-1 mr-2">
-            <v-btn color="anchor" @click="showDialogue = false">
-              Close
-            </v-btn>
-
-            <v-btn :disabled="!valid || type === IPType.single || !toPublicIP" @click="showRange">
-              Show IPs Range
-            </v-btn>
-            <v-btn
-              color="secondary"
-              :loading="isAdding"
-              :disabled="!valid || isAdding"
-              @click="addFarmIp($props.farmId, gateway)"
-              @update:model-value="$emit('update:isAdded', $event)"
-            >
-              Add
-            </v-btn>
+            <v-btn color="anchor" @click="showDialogue = false"> Close </v-btn>
+
+            <v-btn :disabled="type === IPType.single || !toPublicIP" @click="showRange"> Show IPs Range </v-btn>
+            <v-btn color="secondary" :loading="isAdding" :disabled="isAdding" @click="handleAddFarmIp"> Add </v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -176,7 +155,7 @@ export default {
     },
   },
 
-  setup(_, context) {
+  setup(props, context) {
     const gridStore = useGrid();
     const IPs = ref<string[]>();
     const items = ref<string[]>([IPType.single, IPType.range]);
@@ -196,15 +175,6 @@ export default {
     const ipsRangeTable = ref<string[]>([]);
     const formValidator = ref();
 
-    watch(
-      [publicIP, toPublicIP, gateway],
-      async () => {
-        if (publicIP.value.length || toPublicIP.value.length || gateway.value.length)
-          await formValidator.value.validate();
-      },
-      { deep: true },
-    );
-
     watch(
       type,
       () => {
@@ -225,34 +195,33 @@ export default {
       return undefined;
     }
     function toIpCheck() {
-      if (toPublicIP.value.split("/")[1] !== publicIP.value.split("/")[1]) {
+      if (!publicIP.value || !toPublicIP.value) {
+        return;
+      }
+
+      const fromParts = publicIP.value.split("/");
+      const toParts = toPublicIP.value.split("/");
+
+      if (toParts[1] !== fromParts[1]) {
         return {
           message: "Subnet is different.",
         };
       }
 
-      if (
-        parseInt(toPublicIP.value.split("/")[0].split(".")[3]) <= parseInt(publicIP.value.split("/")[0].split(".")[3])
-      ) {
+      if (parseInt(toParts[0].split(".")[3]) <= parseInt(fromParts[0].split(".")[3])) {
         return {
           message: "To IP must be bigger than From IP.",
         };
       }
 
       if (
-        toPublicIP.value.substring(0, toPublicIP.value.lastIndexOf(".")) !=
-        publicIP.value.substring(0, publicIP.value.lastIndexOf("."))
+        toParts[0].substring(0, toParts[0].lastIndexOf(".")) != fromParts[0].substring(0, fromParts[0].lastIndexOf("."))
       ) {
         return {
-          message: "IPs are not the same.",
+          message: "IPs are not in the same network.",
         };
       }
-      if (
-        parseInt(toPublicIP.value.split("/")[0].split(".")[3]) -
-          parseInt(publicIP.value.split("/")[0].split(".")[3]) +
-          1 >
-        16
-      ) {
+      if (parseInt(toParts[0].split(".")[3]) - parseInt(fromParts[0].split(".")[3]) + 1 > 16) {
         return {
           message: "Range must not exceed 16.",
         };
@@ -260,6 +229,10 @@ export default {
     }
 
     function gatewayCheck() {
+      if (!gateway.value || !publicIP.value) {
+        return;
+      }
+
       const firstIP = publicIP?.value.split("/")[0];
       const lastIP = toPublicIP?.value.split("/")[0];
       let isRange = false;
@@ -276,13 +249,13 @@ export default {
         };
       }
 
-      if (firstIP === gateway.value || lastIP === gateway.value) {
+      if (firstIP === gateway.value || (lastIP && lastIP === gateway.value)) {
         return {
           message: "IPs cannot be the same.",
         };
       }
 
-      if (type.value !== IPType.single) {
+      if (type.value !== IPType.single && lastIP) {
         try {
           const range = getIPRange(firstIP, lastIP);
           if (range.includes(gateway.value)) {
@@ -335,6 +308,21 @@ export default {
       });
     }
 
+    async function handleAddFarmIp() {
+      if (!formValidator.value) {
+        createCustomToast("Form validation error. Please check your inputs.", ToastType.danger);
+        return;
+      }
+
+      const isValid = await formValidator.value.validate();
+      if (!isValid) {
+        createCustomToast("Please fix errors before submitting.", ToastType.danger);
+        return;
+      }
+
+      await addFarmIp(props.farmId, gateway.value);
+    }
+
     async function addFarmIp(farmId: number, gw: string) {
       try {
         isAdding.value = true;
@@ -403,6 +391,7 @@ export default {
 
       showRange,
       addIPs,
+      handleAddFarmIp,
       addFarmIp,
       isExistingIp,
       toIpCheck,

From a12db1d79189c27799189a6d1dec34616e2b5d50 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 2 Jul 2025 13:25:58 +0300
Subject: [PATCH 2/5] Fix validation order

---
 .../playground/src/dashboard/components/add_ip.vue    | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/playground/src/dashboard/components/add_ip.vue b/packages/playground/src/dashboard/components/add_ip.vue
index 99b2ba276b..cd7e8594a6 100644
--- a/packages/playground/src/dashboard/components/add_ip.vue
+++ b/packages/playground/src/dashboard/components/add_ip.vue
@@ -208,12 +208,6 @@ export default {
         };
       }
 
-      if (parseInt(toParts[0].split(".")[3]) <= parseInt(fromParts[0].split(".")[3])) {
-        return {
-          message: "To IP must be bigger than From IP.",
-        };
-      }
-
       if (
         toParts[0].substring(0, toParts[0].lastIndexOf(".")) != fromParts[0].substring(0, fromParts[0].lastIndexOf("."))
       ) {
@@ -221,6 +215,11 @@ export default {
           message: "IPs are not in the same network.",
         };
       }
+      if (parseInt(toParts[0].split(".")[3]) <= parseInt(fromParts[0].split(".")[3])) {
+        return {
+          message: "To IP must be bigger than From IP.",
+        };
+      }
       if (parseInt(toParts[0].split(".")[3]) - parseInt(fromParts[0].split(".")[3]) + 1 > 16) {
         return {
           message: "Range must not exceed 16.",

From 17d4d573e0af1ff06f13aba63f4746ef11506461 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 7 Jul 2025 13:32:54 +0300
Subject: [PATCH 3/5] Fix the Add button to be disabled when the form is
 invalid

---
 packages/playground/src/dashboard/components/add_ip.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/playground/src/dashboard/components/add_ip.vue b/packages/playground/src/dashboard/components/add_ip.vue
index cd7e8594a6..ee5ddb9850 100644
--- a/packages/playground/src/dashboard/components/add_ip.vue
+++ b/packages/playground/src/dashboard/components/add_ip.vue
@@ -126,7 +126,9 @@
             <v-btn color="anchor" @click="showDialogue = false"> Close </v-btn>
 
             <v-btn :disabled="type === IPType.single || !toPublicIP" @click="showRange"> Show IPs Range </v-btn>
-            <v-btn color="secondary" :loading="isAdding" :disabled="isAdding" @click="handleAddFarmIp"> Add </v-btn>
+            <v-btn color="secondary" :loading="isAdding" :disabled="isAdding || !valid" @click="handleAddFarmIp">
+              Add
+            </v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>

From 5c1a5f45a6b9dc5419be3abba3b54377c3331256 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 15 Jul 2025 12:27:45 +0300
Subject: [PATCH 4/5] Fixed "Show IPs Range" Button

---
 packages/playground/src/dashboard/components/add_ip.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/dashboard/components/add_ip.vue b/packages/playground/src/dashboard/components/add_ip.vue
index ee5ddb9850..828be49681 100644
--- a/packages/playground/src/dashboard/components/add_ip.vue
+++ b/packages/playground/src/dashboard/components/add_ip.vue
@@ -125,7 +125,7 @@
           <v-card-actions class="justify-end mb-1 mr-2">
             <v-btn color="anchor" @click="showDialogue = false"> Close </v-btn>
 
-            <v-btn :disabled="type === IPType.single || !toPublicIP" @click="showRange"> Show IPs Range </v-btn>
+            <v-btn :disabled="!valid || type === IPType.single || !toPublicIP" @click="showRange"> Show IPs Range </v-btn>
             <v-btn color="secondary" :loading="isAdding" :disabled="isAdding || !valid" @click="handleAddFarmIp">
               Add
             </v-btn>

From a54e6c8acf369bdffc7237b73cb2dac63061b291 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 15 Jul 2025 12:49:44 +0300
Subject: [PATCH 5/5] Fix linting

---
 .../src/components/node_details.vue           |  89 +++----------
 .../src/components/vm_deployment_table.vue    | 118 ++++--------------
 2 files changed, 39 insertions(+), 168 deletions(-)

diff --git a/packages/playground/src/components/node_details.vue b/packages/playground/src/components/node_details.vue
index 20200034ef..6f47332144 100644
--- a/packages/playground/src/components/node_details.vue
+++ b/packages/playground/src/components/node_details.vue
@@ -1,7 +1,7 @@
 <template>
   <v-dialog
-    v-model="$props.openDialog"
     v-if="$props.openDialog"
+    v-model="$props.openDialog"
     transition="dialog-bottom-transition"
     hide-overlay
     attach="#modals"
@@ -11,14 +11,8 @@
   >
     <v-toolbar color="primary">
       <div class="d-flex justify-center">
-        <v-btn
-          icon
-          dark
-          @click="() => $emit('close-dialog', false)"
-        >
-          <v-icon color="anchor">
-            mdi-close
-          </v-icon>
+        <v-btn icon dark @click="() => $emit('close-dialog', false)">
+          <v-icon color="anchor"> mdi-close </v-icon>
         </v-btn>
       </div>
     </v-toolbar>
@@ -33,87 +27,37 @@
     <template v-else-if="isError">
       <v-card class="d-flex justify-center align-center h-screen">
         <div class="text-center w-100 pa-3">
-          <v-icon
-            variant="tonal"
-            color="error"
-            style="font-size: 50px"
-            icon="mdi-close-circle-outline"
-          />
+          <v-icon variant="tonal" color="error" style="font-size: 50px" icon="mdi-close-circle-outline" />
           <p class="mt-4 mb-4 font-weight-bold text-error">
             {{ errorMessage }}
           </p>
-          <v-btn
-            class="mr-4"
-            text="Try Again"
-            @click="requestNode"
-          />
-          <v-btn
-            color="error"
-            text="Cancel"
-            @click="(val: boolean) => closeDialog(val)"
-          />
+          <v-btn class="mr-4" text="Try Again" @click="requestNode" />
+          <v-btn color="error" text="Cancel" @click="(val: boolean) => closeDialog(val)" />
         </div>
       </v-card>
     </template>
 
     <template v-else>
       <v-card>
-        <node-resources-charts
-          :node="node"
-          :is-live-stats="isLiveStats"
-          :hint-message="errorLoadingStatsMessage"
-        />
-        <v-row
-          class="pa-8 mt-5"
-          justify-md="start"
-          justify-sm="center"
-        >
-          <v-col
-            cols="12"
-            md="6"
-            sm="12"
-          >
+        <node-resources-charts :node="node" :is-live-stats="isLiveStats" :hint-message="errorLoadingStatsMessage" />
+        <v-row class="pa-8 mt-5" justify-md="start" justify-sm="center">
+          <v-col cols="12" md="6" sm="12">
             <node-details-card :node="node" />
-            <farm-details-card
-              class="mt-5"
-              :node="node"
-            />
-            <interfaces-details-card
-              class="mt-5"
-              :node="node"
-            />
+            <farm-details-card class="mt-5" :node="node" />
+            <interfaces-details-card class="mt-5" :node="node" />
             <public-config-details-card
               v-if="node.publicConfig && node.publicConfig.domain"
               class="mt-5"
               :node="node"
             />
 
-            <cpu-benchmark-card
-              v-if="hasActiveProfile && node.healthy"
-              class="mt-5"
-              :node="node"
-            />
+            <cpu-benchmark-card v-if="hasActiveProfile && node.healthy" class="mt-5" :node="node" />
           </v-col>
-          <v-col
-            cols="12"
-            md="6"
-            sm="12"
-          >
+          <v-col cols="12" md="6" sm="12">
             <country-details-card :node="node" />
-            <twin-details-card
-              class="mt-3"
-              :node="node"
-            />
-            <gpu-details-card
-              v-if="node.gpus?.length"
-              class="mt-3"
-              :node="node"
-            />
-            <i-perf-card
-              v-if="hasActiveProfile && node.healthy"
-              class="mt-3"
-              :node="node"
-            />
+            <twin-details-card class="mt-3" :node="node" />
+            <gpu-details-card v-if="node.gpus?.length" class="mt-3" :node="node" />
+            <i-perf-card v-if="hasActiveProfile && node.healthy" class="mt-3" :node="node" />
           </v-col>
         </v-row>
       </v-card>
@@ -143,7 +87,6 @@ import { getNode, getNodeStatusColor } from "@/utils/get_nodes";
 import IPerfCard from "./node_details_cards/iperf_details_card.vue";
 import NodeResourcesCharts from "./node_resources_charts.vue";
 export default {
-
   components: {
     NodeResourcesCharts,
     NodeDetailsCard,
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index a0408b1453..23548baa0b 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>
@@ -252,13 +182,11 @@ import { capitalize, computed, onMounted, ref } from "vue";
 
 import { getNodeHealthColor, NodeHealth } from "@/utils/get_nodes";
 
-import { useGrid, useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { updateGrid } from "../utils/grid";
 import { markAsFromAnotherClient } from "../utils/helpers";
 import { type LoadedDeployments, loadVms, mergeLoadedDeployments } from "../utils/load_deployment";
 
-const profileManager = useProfileManager();
-
 const props = defineProps<{
   projectName: string;
   projectTitle: string;
@@ -313,7 +241,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) {
@@ -541,7 +469,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",