From a0d5775e9bf78bcd9d9cb48acac22d2adb86186a Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Wed, 3 Jan 2024 21:05:16 +0200
Subject: [PATCH 01/11] - feat: add serialNumber field in NodeInfo type - feat:
 add NodeDetailsCard showing more details in node selector - refactor: use
 node card in node selector - refactor: turn node selector into VSelect
 instead of VAutocomplete

---
 packages/grid_client/src/primitives/nodes.ts  |   1 +
 .../node_selector/TfAutoNodeSelector.vue      |  36 ++++--
 .../node_selector/TfNodeDetailsCard.vue       | 116 ++++++++++++++++++
 .../ResourceDetails.vue                       |  34 +++++
 4 files changed, 174 insertions(+), 13 deletions(-)
 create mode 100644 packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
 create mode 100644 packages/playground/src/components/node_selector/node_details_internals/ResourceDetails.vue

diff --git a/packages/grid_client/src/primitives/nodes.ts b/packages/grid_client/src/primitives/nodes.ts
index 422e1faffb..25960373ad 100644
--- a/packages/grid_client/src/primitives/nodes.ts
+++ b/packages/grid_client/src/primitives/nodes.ts
@@ -59,6 +59,7 @@ interface NodeInfo {
   extraFee: number;
   rentedByTwinId: number;
   rentContractId: number;
+  serialNumber?: string;
 }
 interface PublicConfig {
   domain: string;
diff --git a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
index 527c1cf839..201bd4b1e9 100644
--- a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
@@ -6,9 +6,13 @@
       </VAlert>
     </VFadeTransition>
 
+    <!-- <TfNodeDetailsCard :node="$props.modelValue" v-if="$props.modelValue" /> -->
+
     <input-tooltip tooltip="Select a node ID to deploy on.">
       <div class="d-flex w-100">
-        <VAutocomplete
+        <VSelect
+          class="node-selector"
+          eager
           ref="nodeInput"
           label="Node"
           placeholder="Select node"
@@ -47,18 +51,16 @@
           "
           :rules="[() => true]"
         >
+          <template #selection="{ item }">
+            <TfNodeDetailsCard :node="item.value" />
+          </template>
+
           <template #item="{ item, props }">
-            <VListItem v-bind="props">
-              <template #title> {{ item.value.nodeId }} </template>
-              <template #append>
-                <VChip class="mr-2" v-if="item.value.certificationType.toLowerCase() === 'certified'" color="primary">
-                  Certified
-                </VChip>
-                <VChip :color="item.value.rentedByTwinId === 0 ? 'secondary' : 'success'">
-                  {{ item.value.rentedByTwinId === 0 ? "Shared" : "Dedicated" }}
-                </VChip>
-              </template>
-            </VListItem>
+            <TfNodeDetailsCard
+              :node="item.value"
+              :append-divider="loadedNodes.indexOf(item.value) + 1 !== loadedNodes.length"
+              v-bind="props"
+            />
           </template>
 
           <template #append-item v-if="pagination.page !== -1">
@@ -76,7 +78,7 @@
               </VBtn>
             </VContainer>
           </template>
-        </VAutocomplete>
+        </VSelect>
 
         <VBtn
           variant="outlined"
@@ -112,9 +114,11 @@ import {
   normalizeNodeFilters,
   normalizeNodeOptions,
 } from "../../utils/nodeSelector";
+import TfNodeDetailsCard from "./TfNodeDetailsCard.vue";
 
 export default {
   name: "TfAutoNodeSelector",
+  components: { TfNodeDetailsCard },
   props: {
     modelValue: Object as PropType<NodeInfo>,
     validFilters: { type: Boolean, required: true },
@@ -256,3 +260,9 @@ export default {
   },
 };
 </script>
+
+<style>
+.node-selector .v-select__selection {
+  width: 100%;
+}
+</style>
diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
new file mode 100644
index 0000000000..763b329597
--- /dev/null
+++ b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -0,0 +1,116 @@
+<template>
+  <VCard class="rounded-0 w-100" flat>
+    <template #prepend>
+      <VTooltip :text="node.location.country">
+        <template #activator="{ props }">
+          <VAvatar size="40">
+            <img :src="flag" class="h-100" :alt="node.location.country + '-flag'" v-bind="props" />
+          </VAvatar>
+        </template>
+      </VTooltip>
+    </template>
+
+    <template #title>
+      Node ID({{ node.nodeId }})
+      <VTooltip text="Node Serial Number">
+        <template #activator="{ props }">
+          <VChip size="x-small" v-bind="props">
+            <span class="font-weight-bold" v-text="node.serialNumber" />
+          </VChip>
+        </template>
+      </VTooltip>
+    </template>
+
+    <template #subtitle>
+      <span v-text="'Farm ID: ' + node.farmId + ' '" />
+      <VChip
+        :color="node.inDedicatedFarm ? 'success' : 'secondary'"
+        size="x-small"
+        :text="node.inDedicatedFarm ? 'Dedicated' : 'Shared'"
+      />
+    </template>
+
+    <template #append>
+      <VChip color="secondary" :text="(node.hasGPU ? 'Has' : 'No') + ' GPU'" />
+      <VChip class="mx-2" color="primary" :text="node.certificationType" />
+      <VChip
+        :color="node.rentedByTwinId === 0 ? 'secondary' : 'success'"
+        :text="node.rentedByTwinId === 0 ? 'Shared' : 'Dedicated'"
+      />
+    </template>
+
+    <template #text>
+      <p class="font-weight-bold text-h6">Resources</p>
+
+      <VRow>
+        <VCol>
+          <InputTooltip tooltip="CPU can be greater than 100% because overprovisioning." align-center>
+            <ResourceDetails name="CPU" :used="node.used_resources.cru" :total="node.total_resources.cru" />
+          </InputTooltip>
+        </VCol>
+        <VCol>
+          <ResourceDetails name="Memory" :used="node.used_resources.mru" :total="node.total_resources.mru" />
+        </VCol>
+        <VCol>
+          <ResourceDetails name="SSD Disks" :used="node.used_resources.sru" :total="node.total_resources.sru" />
+        </VCol>
+        <VCol>
+          <ResourceDetails name="HDD Disks" :used="node.used_resources.hru" :total="node.total_resources.hru" />
+        </VCol>
+      </VRow>
+
+      <!-- <VContainer>
+        <VRow>
+          <span v-text="'CPU (Cores)'" />
+          <VSpacer />
+          <p class="font-weight-bold">
+            {{ parseInt(((node.used_resources.cru / node.total_resources.cru) * 10000).toString()) / 100 }} %
+          </p>
+        </VRow>
+      </VContainer>
+      <VProgressLinear model-value="20" color="primary" />
+
+      <VContainer class="mt-4">
+        <VRow>
+          <span v-text="'CPU (Cores)'" />
+          <VSpacer />
+          {{ node.used_resources.cru }} | {{ node.total_resources.cru }} |
+          <p>{{ node.used_resources.cru / node.total_resources.cru }}</p>
+        </VRow>
+      </VContainer>
+      <VProgressLinear model-value="20" color="primary" /> -->
+    </template>
+
+    <VDivider v-if="appendDivider" />
+  </VCard>
+</template>
+
+<script lang="ts">
+import type { NodeInfo } from "@threefold/grid_client";
+import { byCountry } from "country-code-lookup";
+import { computed, type PropType } from "vue";
+
+import ResourceDetails from "./node_details_internals/ResourceDetails.vue";
+
+export default {
+  name: "TfNodeDetailsCard",
+  components: { ResourceDetails },
+  props: {
+    node: { type: Object as PropType<NodeInfo>, required: true },
+    appendDivider: { type: Boolean, default: () => false },
+  },
+  setup(props) {
+    // console.log(props.node);
+
+    const flag = computed(() => {
+      const { country } = props.node.location;
+      const code = byCountry(country)?.internet || byCountry(country.toLowerCase())?.internet;
+      return code
+        ? `https://www.worldatlas.com/r/w425/img/flag/${code.toLowerCase()}-flag.jpg`
+        : `https://placehold.co/30x20`;
+    });
+
+    return { flag };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/node_selector/node_details_internals/ResourceDetails.vue b/packages/playground/src/components/node_selector/node_details_internals/ResourceDetails.vue
new file mode 100644
index 0000000000..279fc07ca3
--- /dev/null
+++ b/packages/playground/src/components/node_selector/node_details_internals/ResourceDetails.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="w-100">
+    <VContainer>
+      <VRow>
+        <span v-text="name" class="text-caption font-weight-bold" />
+        <VSpacer />
+        <p class="font-weight-bold text-primary" v-text="usagePrecentage + ' %'" />
+      </VRow>
+    </VContainer>
+    <VProgressLinear :model-value="Math.min(100, usagePrecentage)" color="primary" />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed } from "vue";
+
+export default {
+  name: "ResourceDetails",
+  props: {
+    name: { type: String, required: true },
+    used: { type: Number, required: true },
+    total: { type: Number, required: true },
+  },
+  setup(props) {
+    const usagePrecentage = computed(() => {
+      const x = (props.used / props.total) * 10000;
+      const q = +x.toFixed(0) / 100;
+      return isNaN(q) ? 0 : q;
+    });
+
+    return { usagePrecentage };
+  },
+};
+</script>

From 65c274f817025fef414842aff5032c9f0ebc467f Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Thu, 4 Jan 2024 14:55:10 +0200
Subject: [PATCH 02/11] feat: rewrite node-selector (VSelect part) into a table
 alike component with same functions

---
 .../node_selector/TfAutoNodeSelector.vue      | 193 ++++++++++--------
 .../node_selector/TfNodeDetailsCard.vue       |  98 +++++----
 .../ResourceDetails.vue                       |   7 +-
 3 files changed, 178 insertions(+), 120 deletions(-)

diff --git a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
index 201bd4b1e9..d3b65dad4d 100644
--- a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
@@ -1,95 +1,103 @@
 <template>
   <section>
-    <VFadeTransition>
-      <VAlert type="warning" class="mb-4 mt-1" v-if="filtersUpdated && validFilters">
-        Please press on <strong>Load Nodes</strong> button to list nodes matching your new requirements.
-      </VAlert>
-    </VFadeTransition>
-
-    <!-- <TfNodeDetailsCard :node="$props.modelValue" v-if="$props.modelValue" /> -->
-
-    <input-tooltip tooltip="Select a node ID to deploy on.">
-      <div class="d-flex w-100">
-        <VSelect
-          class="node-selector"
-          eager
-          ref="nodeInput"
-          label="Node"
-          placeholder="Select node"
-          :items="loadedNodes"
-          item-title="nodeId"
-          return-object
-          :model-value="nodeInputValidateTask.initialized ? $props.modelValue : undefined"
-          @update:model-value="bindModelValueAndValidate($event)"
+    <VBtn
+      variant="tonal"
+      color="secondary"
+      class="mb-4"
+      size="x-large"
+      block
+      @click="resetPageAndReloadNodes()"
+      :loading="pageCountTask.loading || nodesTask.loading"
+      :disabled="nodeInputValidateTask.loading || !validFilters"
+    >
+      Load Nodes
+    </VBtn>
+
+    <input-tooltip tooltip="Select a node ID to deploy on." align-center>
+      <div class="w-100" :style="{ position: 'relative' }">
+        <VProgressLinear
+          v-if="loadedNodes.length > 0 && (pageCountTask.loading || nodesTask.loading)"
+          indeterminate
+          :style="{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            zIndex: 9,
+            transform: 'none',
+            width: 'calc(100% - 16px)',
+          }"
+          height="2px"
+          color="primary"
+        />
+
+        <VCard
+          max-height="450"
+          flat
+          class="mb-4 overflow-auto border"
           :disabled="!validFilters || filtersUpdated"
-          :loading="nodeInputValidateTask.loading"
-          required
-          :hint="
-            !validFilters
-              ? 'Please provide valid data.'
-              : nodeInputValidateTask.loading
-              ? `Checking if the disks will fit in the node's storage pools...`
-              : undefined
-          "
-          :persistent-hint="!validFilters || nodeInputValidateTask.loading"
-          clearable
-          @click:clear="
-            bindModelValueAndValidate();
-            ($refs.nodeInput as VInput)?.$el.querySelector('input').blur();
-            nodeInputValidateTask.reset();
-            touched = false;
-          "
-          :error="!!nodeInputValidateTask.error && !filtersUpdated"
-          :error-messages="!filtersUpdated ? nodeInputValidateTask.error || undefined : undefined"
-          @blur="
-            touched
-              ? undefined
-              : (() => {
-                  touched = true;
-                  !nodeInputValidateTask.initialized && nodeInputValidateTask.run($props.modelValue);
-                })()
-          "
-          :rules="[() => true]"
+          :style="{ opacity: !validFilters || filtersUpdated ? 0.5 : 1 }"
+          ref="nodesContainer"
         >
-          <template #selection="{ item }">
-            <TfNodeDetailsCard :node="item.value" />
-          </template>
+          <VContainer v-if="loadedNodes.length === 0 && (pageCountTask.loading || nodesTask.loading)">
+            <VRow align="center" justify="center" class="pa-4">
+              <VProgressCircular color="primary" indeterminate class="mr-2" /> Loading Nodes...
+            </VRow>
+          </VContainer>
+
+          <VContainer v-if="loadedNodes.length === 0 && !(pageCountTask.loading || nodesTask.loading)">
+            <VAlert type="error" text="No Nodes were found!" />
+          </VContainer>
 
-          <template #item="{ item, props }">
+          <template v-for="(node, index) in loadedNodes" :key="node.id">
             <TfNodeDetailsCard
-              :node="item.value"
-              :append-divider="loadedNodes.indexOf(item.value) + 1 !== loadedNodes.length"
-              v-bind="props"
+              :node="node"
+              :selected="!validFilters || filtersUpdated ? false : $props.modelValue === node"
+              @node:select="bindModelValueAndValidate"
             />
+            <div class="border-b" v-if="index + 1 !== loadedNodes.length" />
           </template>
 
-          <template #append-item v-if="pagination.page !== -1">
-            <VContainer>
-              <VBtn
-                @click="reloadNodes()"
-                block
-                color="secondary"
-                variant="tonal"
-                :loading="nodesTask.loading"
-                prepend-icon="mdi-reload"
-                :disabled="nodeInputValidateTask.loading"
-              >
-                Load More Nodes
-              </VBtn>
-            </VContainer>
-          </template>
-        </VSelect>
-
-        <VBtn
-          variant="outlined"
-          color="secondary"
-          class="mt-2 ml-2"
-          @click="resetPageAndReloadNodes()"
-          :loading="pageCountTask.loading || nodesTask.loading"
-          :disabled="nodeInputValidateTask.loading || !validFilters"
+          <VContainer v-if="loadedNodes.length > 0 && pagination.page !== -1">
+            <VBtn
+              @click="reloadNodes()"
+              block
+              color="secondary"
+              variant="tonal"
+              size="large"
+              :loading="nodesTask.loading"
+              prepend-icon="mdi-reload"
+              :disabled="nodeInputValidateTask.loading"
+            >
+              Load More Nodes
+            </VBtn>
+          </VContainer>
+        </VCard>
+
+        <VAlert
+          :type="!validFilters ? 'error' : 'warning'"
+          :style="{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', zIndex: 9 }"
+          v-if="!validFilters || (filtersUpdated && validFilters)"
         >
-          Load Nodes
-        </VBtn>
+          <span v-if="!validFilters" v-text="'Please provide valid data.'" />
+          <template v-else>
+            Please press on <strong>Load Nodes</strong> button to list nodes matching your new requirements.
+          </template>
+        </VAlert>
+
+        <VAlert
+          type="info"
+          variant="elevated"
+          :style="{ position: 'absolute', bottom: '15px', right: '31px', zIndex: 9 }"
+          v-else-if="nodeInputValidateTask.loading"
+          text="Checking if the disks will fit in the node's storage pools..."
+        />
+
+        <VAlert
+          type="error"
+          v-if="!filtersUpdated && nodeInputValidateTask.error"
+          :style="{ position: 'absolute', bottom: '15px', right: '31px', zIndex: 9 }"
+          :text="nodeInputValidateTask.error"
+        />
       </div>
     </input-tooltip>
   </section>
@@ -101,7 +109,7 @@ import equals from "lodash/fp/equals.js";
 import sample from "lodash/fp/sample.js";
 import { computed, nextTick, onMounted, onUnmounted, type PropType, ref } from "vue";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import type { VInput } from "vuetify/components/VInput";
+import type { VCard } from "vuetify/components/VCard";
 
 import { useAsync, usePagination, useWatchDeep } from "../../hooks";
 import { ValidatorStatus } from "../../hooks/form_validator";
@@ -217,7 +225,20 @@ export default {
         tries: 1,
         shouldRun: () => props.validFilters,
         onBeforeTask: () => bindStatus(ValidatorStatus.Pending),
-        onAfterTask: ({ data }) => bindStatus(data ? ValidatorStatus.Valid : ValidatorStatus.Invalid),
+        onAfterTask({ data }) {
+          bindStatus(data ? ValidatorStatus.Valid : ValidatorStatus.Invalid);
+          const container = nodesContainer.value?.$el as HTMLDivElement;
+          if (container) {
+            const card = container.querySelector(".selected-node") as HTMLDivElement;
+
+            if (card) {
+              container.scroll({
+                behavior: "smooth",
+                top: card.offsetTop - 100,
+              });
+            }
+          }
+        },
         onReset: bindStatus,
       },
     );
@@ -242,6 +263,8 @@ export default {
       ctx.emit("update:status", status || ValidatorStatus.Init);
     }
 
+    const nodesContainer = ref<VCard>();
+
     return {
       pageCountTask,
       nodesTask,
@@ -256,6 +279,8 @@ export default {
       touched,
       bindModelValueAndValidate,
       bindStatus,
+
+      nodesContainer,
     };
   },
 };
diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
index 763b329597..ddc175e179 100644
--- a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
+++ b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -1,5 +1,17 @@
 <template>
-  <VCard class="rounded-0 w-100" flat>
+  <VCard
+    class="rounded-0 w-100"
+    :class="{ 'selected-node': selected }"
+    :color="selected ? 'rgba(var(--v-theme-primary), 0.1)' : undefined"
+    flat
+    @click="
+      () => {
+        if (!selected) {
+          $emit('node:select', node);
+        }
+      }
+    "
+  >
     <template #prepend>
       <VTooltip :text="node.location.country">
         <template #activator="{ props }">
@@ -31,7 +43,7 @@
     </template>
 
     <template #append>
-      <VChip color="secondary" :text="(node.hasGPU ? 'Has' : 'No') + ' GPU'" />
+      <VChip v-if="node.hasGPU" color="secondary" text="Has GPU" />
       <VChip class="mx-2" color="primary" :text="node.certificationType" />
       <VChip
         :color="node.rentedByTwinId === 0 ? 'secondary' : 'success'"
@@ -40,48 +52,46 @@
     </template>
 
     <template #text>
-      <p class="font-weight-bold text-h6">Resources</p>
-
       <VRow>
         <VCol>
           <InputTooltip tooltip="CPU can be greater than 100% because overprovisioning." align-center>
-            <ResourceDetails name="CPU" :used="node.used_resources.cru" :total="node.total_resources.cru" />
+            <ResourceDetails
+              name="CPU"
+              :used="node.used_resources.cru"
+              :total="node.total_resources.cru"
+              :text="cruText"
+            />
           </InputTooltip>
         </VCol>
         <VCol>
-          <ResourceDetails name="Memory" :used="node.used_resources.mru" :total="node.total_resources.mru" />
+          <ResourceDetails
+            name="Memory"
+            :used="node.used_resources.mru"
+            :total="node.total_resources.mru"
+            :text="mruText"
+          />
         </VCol>
+      </VRow>
+
+      <VRow>
         <VCol>
-          <ResourceDetails name="SSD Disks" :used="node.used_resources.sru" :total="node.total_resources.sru" />
+          <ResourceDetails
+            name="SSD Disks"
+            :used="node.used_resources.sru"
+            :total="node.total_resources.sru"
+            :text="sruText"
+          />
         </VCol>
         <VCol>
-          <ResourceDetails name="HDD Disks" :used="node.used_resources.hru" :total="node.total_resources.hru" />
+          <ResourceDetails
+            name="HDD Disks"
+            :used="node.used_resources.hru"
+            :total="node.total_resources.hru"
+            :text="hruText"
+          />
         </VCol>
       </VRow>
-
-      <!-- <VContainer>
-        <VRow>
-          <span v-text="'CPU (Cores)'" />
-          <VSpacer />
-          <p class="font-weight-bold">
-            {{ parseInt(((node.used_resources.cru / node.total_resources.cru) * 10000).toString()) / 100 }} %
-          </p>
-        </VRow>
-      </VContainer>
-      <VProgressLinear model-value="20" color="primary" />
-
-      <VContainer class="mt-4">
-        <VRow>
-          <span v-text="'CPU (Cores)'" />
-          <VSpacer />
-          {{ node.used_resources.cru }} | {{ node.total_resources.cru }} |
-          <p>{{ node.used_resources.cru / node.total_resources.cru }}</p>
-        </VRow>
-      </VContainer>
-      <VProgressLinear model-value="20" color="primary" /> -->
     </template>
-
-    <VDivider v-if="appendDivider" />
   </VCard>
 </template>
 
@@ -90,6 +100,7 @@ import type { NodeInfo } from "@threefold/grid_client";
 import { byCountry } from "country-code-lookup";
 import { computed, type PropType } from "vue";
 
+import formatResourceSize from "../../utils/format_resource_size";
 import ResourceDetails from "./node_details_internals/ResourceDetails.vue";
 
 export default {
@@ -97,11 +108,12 @@ export default {
   components: { ResourceDetails },
   props: {
     node: { type: Object as PropType<NodeInfo>, required: true },
-    appendDivider: { type: Boolean, default: () => false },
+    selected: Boolean,
+  },
+  emits: {
+    "node:select": (node: NodeInfo) => true || node,
   },
   setup(props) {
-    // console.log(props.node);
-
     const flag = computed(() => {
       const { country } = props.node.location;
       const code = byCountry(country)?.internet || byCountry(country.toLowerCase())?.internet;
@@ -110,7 +122,23 @@ export default {
         : `https://placehold.co/30x20`;
     });
 
-    return { flag };
+    function normalizeBytesResourse(name: "mru" | "sru" | "hru") {
+      return () => {
+        const used = formatResourceSize(props.node.used_resources[name]);
+        const total = formatResourceSize(props.node.total_resources[name]);
+
+        if (total === "0") return "";
+
+        return `${used} / ${total}`;
+      };
+    }
+
+    const cruText = computed(() => `${props.node.used_resources.cru} / ${props.node.total_resources.cru} (Cores)`);
+    const mruText = computed(normalizeBytesResourse("mru"));
+    const sruText = computed(normalizeBytesResourse("sru"));
+    const hruText = computed(normalizeBytesResourse("hru"));
+
+    return { flag, cruText, mruText, sruText, hruText };
   },
 };
 </script>
diff --git a/packages/playground/src/components/node_selector/node_details_internals/ResourceDetails.vue b/packages/playground/src/components/node_selector/node_details_internals/ResourceDetails.vue
index 279fc07ca3..b8d029e2fb 100644
--- a/packages/playground/src/components/node_selector/node_details_internals/ResourceDetails.vue
+++ b/packages/playground/src/components/node_selector/node_details_internals/ResourceDetails.vue
@@ -4,7 +4,11 @@
       <VRow>
         <span v-text="name" class="text-caption font-weight-bold" />
         <VSpacer />
-        <p class="font-weight-bold text-primary" v-text="usagePrecentage + ' %'" />
+        <template v-if="text">
+          <span v-text="text" class="text-caption font-weight-bold text-info" />
+          <VSpacer />
+        </template>
+        <p class="font-weight-bold text-primary" v-text="total === 0 ? 'N/A' : usagePrecentage + ' %'" />
       </VRow>
     </VContainer>
     <VProgressLinear :model-value="Math.min(100, usagePrecentage)" color="primary" />
@@ -20,6 +24,7 @@ export default {
     name: { type: String, required: true },
     used: { type: Number, required: true },
     total: { type: Number, required: true },
+    text: String,
   },
   setup(props) {
     const usagePrecentage = computed(() => {

From 9ba43bf0ee2f6b0d07600e4a02a78a2a0b0c268b Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Thu, 4 Jan 2024 15:13:31 +0200
Subject: [PATCH 03/11] - fix: limit scroll to 1 time per reload to not confuse
 the users - style: turn VAlert into elevated variant instead of tonal

---
 .../node_selector/TfAutoNodeSelector.vue      | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
index d3b65dad4d..cafe05a0a0 100644
--- a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
@@ -33,10 +33,9 @@
         <VCard
           max-height="450"
           flat
-          class="mb-4 overflow-auto border"
+          class="mb-4 border"
           :disabled="!validFilters || filtersUpdated"
           :style="{ opacity: !validFilters || filtersUpdated ? 0.5 : 1 }"
-          ref="nodesContainer"
         >
           <VContainer v-if="loadedNodes.length === 0 && (pageCountTask.loading || nodesTask.loading)">
             <VRow align="center" justify="center" class="pa-4">
@@ -48,14 +47,16 @@
             <VAlert type="error" text="No Nodes were found!" />
           </VContainer>
 
-          <template v-for="(node, index) in loadedNodes" :key="node.id">
-            <TfNodeDetailsCard
-              :node="node"
-              :selected="!validFilters || filtersUpdated ? false : $props.modelValue === node"
-              @node:select="bindModelValueAndValidate"
-            />
-            <div class="border-b" v-if="index + 1 !== loadedNodes.length" />
-          </template>
+          <div ref="nodesContainer" :style="{ maxHeight: '450px' }" class="overflow-auto" v-if="loadedNodes.length">
+            <template v-for="(node, index) in loadedNodes" :key="node.id">
+              <TfNodeDetailsCard
+                :node="node"
+                :selected="!validFilters || filtersUpdated ? false : $props.modelValue === node"
+                @node:select="bindModelValueAndValidate"
+              />
+              <div class="border-b" v-if="index + 1 !== loadedNodes.length" />
+            </template>
+          </div>
 
           <VContainer v-if="loadedNodes.length > 0 && pagination.page !== -1">
             <VBtn
@@ -75,6 +76,7 @@
 
         <VAlert
           :type="!validFilters ? 'error' : 'warning'"
+          variant="elevated"
           :style="{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', zIndex: 9 }"
           v-if="!validFilters || (filtersUpdated && validFilters)"
         >
@@ -94,6 +96,7 @@
 
         <VAlert
           type="error"
+          variant="elevated"
           v-if="!filtersUpdated && nodeInputValidateTask.error"
           :style="{ position: 'absolute', bottom: '15px', right: '31px', zIndex: 9 }"
           :text="nodeInputValidateTask.error"
@@ -227,11 +230,12 @@ export default {
         onBeforeTask: () => bindStatus(ValidatorStatus.Pending),
         onAfterTask({ data }) {
           bindStatus(data ? ValidatorStatus.Valid : ValidatorStatus.Invalid);
-          const container = nodesContainer.value?.$el as HTMLDivElement;
+          const container = nodesContainer.value as HTMLDivElement;
           if (container) {
             const card = container.querySelector(".selected-node") as HTMLDivElement;
 
-            if (card) {
+            if (card && container.getAttribute("data-scrolled") !== "scrolled") {
+              container.setAttribute("data-scrolled", "scrolled");
               container.scroll({
                 behavior: "smooth",
                 top: card.offsetTop - 100,
@@ -263,7 +267,7 @@ export default {
       ctx.emit("update:status", status || ValidatorStatus.Init);
     }
 
-    const nodesContainer = ref<VCard>();
+    const nodesContainer = ref<HTMLDivElement>();
 
     return {
       pageCountTask,

From afd2b74be3bc284a36d9ccd01597ed190c8dd269 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Thu, 4 Jan 2024 16:01:34 +0200
Subject: [PATCH 04/11] fix: move load more button to nodes container

---
 .../node_selector/TfAutoNodeSelector.vue      | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
index cafe05a0a0..0f965ac4d6 100644
--- a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
@@ -56,22 +56,22 @@
               />
               <div class="border-b" v-if="index + 1 !== loadedNodes.length" />
             </template>
-          </div>
 
-          <VContainer v-if="loadedNodes.length > 0 && pagination.page !== -1">
-            <VBtn
-              @click="reloadNodes()"
-              block
-              color="secondary"
-              variant="tonal"
-              size="large"
-              :loading="nodesTask.loading"
-              prepend-icon="mdi-reload"
-              :disabled="nodeInputValidateTask.loading"
-            >
-              Load More Nodes
-            </VBtn>
-          </VContainer>
+            <VContainer v-if="loadedNodes.length > 0 && pagination.page !== -1">
+              <VBtn
+                @click="reloadNodes()"
+                block
+                color="secondary"
+                variant="tonal"
+                size="large"
+                :loading="nodesTask.loading"
+                prepend-icon="mdi-reload"
+                :disabled="nodeInputValidateTask.loading"
+              >
+                Load More Nodes
+              </VBtn>
+            </VContainer>
+          </div>
         </VCard>
 
         <VAlert

From e754ec7fb09aec1099781b610b993c1d631efdb1 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Thu, 4 Jan 2024 17:19:13 +0200
Subject: [PATCH 05/11] feat: add error handling in validation & use
 detailsCard in manual node selection

---
 .../node_selector/TfAutoNodeSelector.vue      | 32 +++++--
 .../node_selector/TfManualNodeSelector.vue    | 81 ++++++++++------
 .../node_selector/TfNodeDetailsCard.vue       | 94 ++++++++++++-------
 3 files changed, 137 insertions(+), 70 deletions(-)

diff --git a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
index 0f965ac4d6..61b7b9e3da 100644
--- a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
@@ -35,7 +35,11 @@
           flat
           class="mb-4 border"
           :disabled="!validFilters || filtersUpdated"
-          :style="{ opacity: !validFilters || filtersUpdated ? 0.5 : 1 }"
+          :style="{
+            opacity: !validFilters || filtersUpdated ? 0.5 : 1,
+            borderWidth: '2px !important',
+            borderColor: nodeInputValidateTask.error ? 'rgba(var(--v-theme-error), 0.4) !important' : undefined,
+          }"
         >
           <VContainer v-if="loadedNodes.length === 0 && (pageCountTask.loading || nodesTask.loading)">
             <VRow align="center" justify="center" class="pa-4">
@@ -47,14 +51,29 @@
             <VAlert type="error" text="No Nodes were found!" />
           </VContainer>
 
-          <div ref="nodesContainer" :style="{ maxHeight: '450px' }" class="overflow-auto" v-if="loadedNodes.length">
-            <template v-for="(node, index) in loadedNodes" :key="node.id">
+          <div
+            ref="nodesContainer"
+            :style="{ maxHeight: '450px', paddingBottom: '100px' }"
+            class="overflow-auto"
+            v-if="loadedNodes.length"
+          >
+            <template v-for="node in loadedNodes" :key="node.id">
               <TfNodeDetailsCard
                 :node="node"
                 :selected="!validFilters || filtersUpdated ? false : $props.modelValue === node"
+                selectable
                 @node:select="bindModelValueAndValidate"
+                :status="
+                  $props.modelValue === node
+                    ? nodeInputValidateTask.loading
+                      ? 'Pending'
+                      : nodeInputValidateTask.data
+                      ? 'Valid'
+                      : 'Invalid'
+                    : 'Init'
+                "
               />
-              <div class="border-b" v-if="index + 1 !== loadedNodes.length" />
+              <div class="border-b" :style="{ borderBottomWidth: '2px !important' }" />
             </template>
 
             <VContainer v-if="loadedNodes.length > 0 && pagination.page !== -1">
@@ -89,7 +108,7 @@
         <VAlert
           type="info"
           variant="elevated"
-          :style="{ position: 'absolute', bottom: '15px', right: '31px', zIndex: 9 }"
+          :style="{ position: 'absolute', bottom: '31px', right: '31px', zIndex: 9 }"
           v-else-if="nodeInputValidateTask.loading"
           text="Checking if the disks will fit in the node's storage pools..."
         />
@@ -98,8 +117,9 @@
           type="error"
           variant="elevated"
           v-if="!filtersUpdated && nodeInputValidateTask.error"
-          :style="{ position: 'absolute', bottom: '15px', right: '31px', zIndex: 9 }"
+          :style="{ position: 'absolute', bottom: '31px', right: '31px', zIndex: 9 }"
           :text="nodeInputValidateTask.error"
+          closable
         />
       </div>
     </input-tooltip>
diff --git a/packages/playground/src/components/node_selector/TfManualNodeSelector.vue b/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
index 4d4f79a46f..ce626bb6e1 100644
--- a/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
@@ -1,34 +1,49 @@
 <template>
-  <input-tooltip tooltip="Node ID to deploy on.">
-    <VTextField
-      label="Node ID"
-      placeholder="Add your desired node id to validate"
-      class="w-100"
-      type="number"
-      v-model.number="nodeId"
-      :error="!!validationTask.error"
-      :error-messages="validationTask.error || undefined"
-      :disabled="!validFilters"
-      :persistent-hint="
-        (nodeId && !validationTask.initialized) ||
-        !validFilters ||
-        validationTask.loading ||
-        (validationTask.initialized && validationTask.data === true)
+  <div>
+    <TfNodeDetailsCard
+      :node="modelValue || placeholderNode"
+      :status="
+        validationTask.loading
+          ? 'Pending'
+          : validationTask.initialized
+          ? validationTask.error
+            ? 'Invalid'
+            : 'Valid'
+          : 'Init'
       "
-      :hint="
-        !validFilters
-          ? 'Please provide valid data.'
-          : nodeId && !validationTask.initialized
-          ? 'Preparing to validate node.'
-          : validationTask.loading
-          ? 'Validating node...'
-          : validationTask.data
-          ? `Node ${nodeId} is valid.`
-          : undefined
-      "
-      @blur="validationTask.initialized ? undefined : validationTask.run(nodeId)"
     />
-  </input-tooltip>
+
+    <input-tooltip tooltip="Node ID to deploy on." align-center>
+      <VTextField
+        label="Node ID"
+        placeholder="Add your desired node id to validate"
+        class="w-100 mt-4"
+        type="number"
+        v-model.number="nodeId"
+        :error="!!validationTask.error"
+        :error-messages="validationTask.error || undefined"
+        :disabled="!validFilters"
+        :persistent-hint="
+          (nodeId && !validationTask.initialized) ||
+          !validFilters ||
+          validationTask.loading ||
+          (validationTask.initialized && validationTask.data === true)
+        "
+        :hint="
+          !validFilters
+            ? 'Please provide valid data.'
+            : nodeId && !validationTask.initialized
+            ? 'Preparing to validate node.'
+            : validationTask.loading
+            ? 'Validating node...'
+            : validationTask.data
+            ? `Node ${nodeId} is valid.`
+            : undefined
+        "
+        @blur="validationTask.initialized ? undefined : validationTask.run(nodeId)"
+      />
+    </input-tooltip>
+  </div>
 </template>
 
 <script lang="ts">
@@ -43,12 +58,14 @@ import { useGrid } from "../../stores";
 import type { SelectionDetailsFilters } from "../../types/nodeSelector";
 import { normalizeError } from "../../utils/helpers";
 import { checkNodeCapacityPool, resolveAsync } from "../../utils/nodeSelector";
+import TfNodeDetailsCard from "./TfNodeDetailsCard.vue";
 
 const _defaultError =
   "Something went wrong while checking status of the node. Please check your connection and try again.";
 
 export default {
   name: "TfManualNodeSelector",
+  components: { TfNodeDetailsCard },
   props: {
     modelValue: Object as PropType<NodeInfo>,
     validFilters: { type: Boolean, required: true },
@@ -69,6 +86,8 @@ export default {
     // reset node to mark form as invalid
     watch(nodeId, () => bindModelValue());
 
+    const placeholderNode = ref<NodeInfo>();
+
     const validationTask = useAsync<true | string, string, [id: number | undefined]>(
       async nodeId => {
         if (typeof nodeId !== "number") {
@@ -88,6 +107,8 @@ export default {
           throw normalizeError(e0, _defaultError);
         }
 
+        placeholderNode.value = node;
+
         if (node === undefined || node === null) {
           throw `Node ${nodeId} is not on the grid`;
         }
@@ -150,6 +171,8 @@ export default {
         await checkNodeCapacityPool(gridStore, node, props.filters);
 
         bindModelValue(node);
+        placeholderNode.value = undefined;
+
         return true;
       },
       {
@@ -193,7 +216,7 @@ export default {
       ctx.emit("update:status", status || ValidatorStatus.Init);
     }
 
-    return { nodeId, validationTask };
+    return { nodeId, validationTask, placeholderNode };
   },
 };
 </script>
diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
index ddc175e179..847fe9b913 100644
--- a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
+++ b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -1,30 +1,44 @@
 <template>
   <VCard
     class="rounded-0 w-100"
-    :class="{ 'selected-node': selected }"
-    :color="selected ? 'rgba(var(--v-theme-primary), 0.1)' : undefined"
-    flat
-    @click="
-      () => {
-        if (!selected) {
-          $emit('node:select', node);
-        }
-      }
+    :class="{ 'selected-node': status !== 'Init' }"
+    :color="
+      status === 'Valid'
+        ? 'rgba(var(--v-theme-primary), 0.1)'
+        : status === 'Invalid'
+        ? 'rgba(var(--v-theme-error), 0.1)'
+        : status === 'Pending'
+        ? 'rgba(var(--v-theme-warning), 0.01)'
+        : undefined
     "
+    flat
+    v-bind="{
+      onClick: selectable
+        ? () => {
+            if (status === 'Init' && node) {
+              $emit('node:select', node);
+            }
+          }
+        : undefined,
+    }"
   >
+    <template #loader>
+      <VProgressLinear indeterminate color="primary" height="2" v-if="status === 'Pending'" />
+    </template>
+
     <template #prepend>
-      <VTooltip :text="node.location.country">
+      <VTooltip :text="node?.location.country" :disabled="!node">
         <template #activator="{ props }">
           <VAvatar size="40">
-            <img :src="flag" class="h-100" :alt="node.location.country + '-flag'" v-bind="props" />
+            <img :src="flag" class="h-100" :alt="(node?.location.country ?? 'node') + '-flag'" v-bind="props" />
           </VAvatar>
         </template>
       </VTooltip>
     </template>
 
     <template #title>
-      Node ID({{ node.nodeId }})
-      <VTooltip text="Node Serial Number">
+      Node ID({{ node?.nodeId }})
+      <VTooltip text="Node Serial Number" v-if="node">
         <template #activator="{ props }">
           <VChip size="x-small" v-bind="props">
             <span class="font-weight-bold" v-text="node.serialNumber" />
@@ -34,21 +48,24 @@
     </template>
 
     <template #subtitle>
-      <span v-text="'Farm ID: ' + node.farmId + ' '" />
+      <span v-text="'Farm ID: ' + (node?.farmId ?? '') + ' '" />
       <VChip
-        :color="node.inDedicatedFarm ? 'success' : 'secondary'"
+        v-if="node"
+        :color="node?.inDedicatedFarm ? 'success' : 'secondary'"
         size="x-small"
-        :text="node.inDedicatedFarm ? 'Dedicated' : 'Shared'"
+        :text="node?.inDedicatedFarm ? 'Dedicated' : 'Shared'"
       />
     </template>
 
     <template #append>
-      <VChip v-if="node.hasGPU" color="secondary" text="Has GPU" />
-      <VChip class="mx-2" color="primary" :text="node.certificationType" />
-      <VChip
-        :color="node.rentedByTwinId === 0 ? 'secondary' : 'success'"
-        :text="node.rentedByTwinId === 0 ? 'Shared' : 'Dedicated'"
-      />
+      <template v-if="node">
+        <VChip v-if="node?.hasGPU" color="secondary" text="Has GPU" />
+        <VChip class="mx-2" color="primary" :text="node?.certificationType" />
+        <VChip
+          :color="node?.rentedByTwinId === 0 ? 'secondary' : 'success'"
+          :text="node?.rentedByTwinId === 0 ? 'Shared' : 'Dedicated'"
+        />
+      </template>
     </template>
 
     <template #text>
@@ -57,8 +74,8 @@
           <InputTooltip tooltip="CPU can be greater than 100% because overprovisioning." align-center>
             <ResourceDetails
               name="CPU"
-              :used="node.used_resources.cru"
-              :total="node.total_resources.cru"
+              :used="node?.used_resources.cru ?? 0"
+              :total="node?.total_resources.cru ?? 0"
               :text="cruText"
             />
           </InputTooltip>
@@ -66,8 +83,8 @@
         <VCol>
           <ResourceDetails
             name="Memory"
-            :used="node.used_resources.mru"
-            :total="node.total_resources.mru"
+            :used="node?.used_resources.mru ?? 0"
+            :total="node?.total_resources.mru ?? 0"
             :text="mruText"
           />
         </VCol>
@@ -77,16 +94,16 @@
         <VCol>
           <ResourceDetails
             name="SSD Disks"
-            :used="node.used_resources.sru"
-            :total="node.total_resources.sru"
+            :used="node?.used_resources.sru ?? 0"
+            :total="node?.total_resources.sru ?? 0"
             :text="sruText"
           />
         </VCol>
         <VCol>
           <ResourceDetails
             name="HDD Disks"
-            :used="node.used_resources.hru"
-            :total="node.total_resources.hru"
+            :used="node?.used_resources.hru ?? 0"
+            :total="node?.total_resources.hru ?? 0"
             :text="hruText"
           />
         </VCol>
@@ -107,23 +124,28 @@ export default {
   name: "TfNodeDetailsCard",
   components: { ResourceDetails },
   props: {
-    node: { type: Object as PropType<NodeInfo>, required: true },
-    selected: Boolean,
+    node: Object as PropType<NodeInfo>,
+    status: String as PropType<"Init" | "Pending" | "Invalid" | "Valid">,
+    selectable: Boolean,
   },
   emits: {
     "node:select": (node: NodeInfo) => true || node,
   },
   setup(props) {
     const flag = computed(() => {
-      const { country } = props.node.location;
+      const country = props.node?.location.country ?? "";
       const code = byCountry(country)?.internet || byCountry(country.toLowerCase())?.internet;
       return code
         ? `https://www.worldatlas.com/r/w425/img/flag/${code.toLowerCase()}-flag.jpg`
-        : `https://placehold.co/30x20`;
+        : `https://placehold.co/30x20?text=TF`;
     });
 
     function normalizeBytesResourse(name: "mru" | "sru" | "hru") {
       return () => {
+        if (!props.node) {
+          return "";
+        }
+
         const used = formatResourceSize(props.node.used_resources[name]);
         const total = formatResourceSize(props.node.total_resources[name]);
 
@@ -133,7 +155,9 @@ export default {
       };
     }
 
-    const cruText = computed(() => `${props.node.used_resources.cru} / ${props.node.total_resources.cru} (Cores)`);
+    const cruText = computed(() =>
+      props.node ? `${props.node.used_resources.cru} / ${props.node.total_resources.cru} (Cores)` : "",
+    );
     const mruText = computed(normalizeBytesResourse("mru"));
     const sruText = computed(normalizeBytesResourse("sru"));
     const hruText = computed(normalizeBytesResourse("hru"));

From aa5ce2180cf1473b131ef4ff3368506c406ef197 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Thu, 4 Jan 2024 17:21:59 +0200
Subject: [PATCH 06/11] fix: typo in node details card

---
 .../src/components/node_selector/TfNodeDetailsCard.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
index 847fe9b913..56b1f5652b 100644
--- a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
+++ b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -71,7 +71,7 @@
     <template #text>
       <VRow>
         <VCol>
-          <InputTooltip tooltip="CPU can be greater than 100% because overprovisioning." align-center>
+          <InputTooltip tooltip="CPU can be greater than 100% due to overprovisioning." align-center>
             <ResourceDetails
               name="CPU"
               :used="node?.used_resources.cru ?? 0"

From 080fd3ac676e8020fc8c0f8248ccd18ade6f766b Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Thu, 4 Jan 2024 17:38:59 +0200
Subject: [PATCH 07/11] style: improve ui/ux for new node details card in node
 selector

---
 .../node_selector/TfAutoNodeSelector.vue      | 39 ++++++++++---------
 .../node_selector/TfManualNodeSelector.vue    |  1 +
 .../node_selector/TfNodeDetailsCard.vue       | 39 ++++++++++++-------
 3 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
index 61b7b9e3da..805d29bf0f 100644
--- a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
@@ -31,7 +31,6 @@
         />
 
         <VCard
-          max-height="450"
           flat
           class="mb-4 border"
           :disabled="!validFilters || filtersUpdated"
@@ -53,27 +52,29 @@
 
           <div
             ref="nodesContainer"
-            :style="{ maxHeight: '450px', paddingBottom: '100px' }"
-            class="overflow-auto"
+            :style="{ maxHeight: '450px', paddingBottom: '100px', backgroundColor: 'rgb(var(--v-theme-background))' }"
+            class="overflow-auto px-4"
             v-if="loadedNodes.length"
           >
             <template v-for="node in loadedNodes" :key="node.id">
-              <TfNodeDetailsCard
-                :node="node"
-                :selected="!validFilters || filtersUpdated ? false : $props.modelValue === node"
-                selectable
-                @node:select="bindModelValueAndValidate"
-                :status="
-                  $props.modelValue === node
-                    ? nodeInputValidateTask.loading
-                      ? 'Pending'
-                      : nodeInputValidateTask.data
-                      ? 'Valid'
-                      : 'Invalid'
-                    : 'Init'
-                "
-              />
-              <div class="border-b" :style="{ borderBottomWidth: '2px !important' }" />
+              <div class="my-4">
+                <TfNodeDetailsCard
+                  :node="node"
+                  :selected="!validFilters || filtersUpdated ? false : $props.modelValue === node"
+                  selectable
+                  @node:select="bindModelValueAndValidate"
+                  :status="
+                    $props.modelValue === node
+                      ? nodeInputValidateTask.loading
+                        ? 'Pending'
+                        : nodeInputValidateTask.data
+                        ? 'Valid'
+                        : 'Invalid'
+                      : 'Init'
+                  "
+                />
+              </div>
+              <!-- <div class="border-b" :style="{ borderBottomWidth: '2px !important' }" /> -->
             </template>
 
             <VContainer v-if="loadedNodes.length > 0 && pagination.page !== -1">
diff --git a/packages/playground/src/components/node_selector/TfManualNodeSelector.vue b/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
index ce626bb6e1..ff614dd80a 100644
--- a/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <TfNodeDetailsCard
+      flat
       :node="modelValue || placeholderNode"
       :status="
         validationTask.loading
diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
index 56b1f5652b..5effbdbe2a 100644
--- a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
+++ b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -11,7 +11,7 @@
         ? 'rgba(var(--v-theme-warning), 0.01)'
         : undefined
     "
-    flat
+    :flat="flat"
     v-bind="{
       onClick: selectable
         ? () => {
@@ -49,22 +49,34 @@
 
     <template #subtitle>
       <span v-text="'Farm ID: ' + (node?.farmId ?? '') + ' '" />
-      <VChip
-        v-if="node"
-        :color="node?.inDedicatedFarm ? 'success' : 'secondary'"
-        size="x-small"
-        :text="node?.inDedicatedFarm ? 'Dedicated' : 'Shared'"
-      />
+      <VTooltip v-if="node" :text="'Farm is ' + (node?.inDedicatedFarm ? 'Dedicated' : 'Shared')">
+        <template #activator="{ props }">
+          <VChip
+            v-bind="props"
+            :color="node?.inDedicatedFarm ? 'success' : 'secondary'"
+            size="x-small"
+            :text="node?.inDedicatedFarm ? 'Dedicated' : 'Shared'"
+          />
+        </template>
+      </VTooltip>
     </template>
 
     <template #append>
       <template v-if="node">
-        <VChip v-if="node?.hasGPU" color="secondary" text="Has GPU" />
-        <VChip class="mx-2" color="primary" :text="node?.certificationType" />
-        <VChip
-          :color="node?.rentedByTwinId === 0 ? 'secondary' : 'success'"
-          :text="node?.rentedByTwinId === 0 ? 'Shared' : 'Dedicated'"
-        />
+        <VTooltip text="Node Details" location="left center">
+          <template #activator="{ props }">
+            <VContainer v-bind="props">
+              <VRow align="center">
+                <VChip v-if="node?.hasGPU" color="secondary" text="Has GPU" />
+                <VChip class="mx-2" color="primary" :text="node?.certificationType" />
+                <VChip
+                  :color="node?.rentedByTwinId === 0 ? 'secondary' : 'success'"
+                  :text="node?.rentedByTwinId === 0 ? 'Shared' : 'Dedicated'"
+                />
+              </VRow>
+            </VContainer>
+          </template>
+        </VTooltip>
       </template>
     </template>
 
@@ -127,6 +139,7 @@ export default {
     node: Object as PropType<NodeInfo>,
     status: String as PropType<"Init" | "Pending" | "Invalid" | "Valid">,
     selectable: Boolean,
+    flat: Boolean,
   },
   emits: {
     "node:select": (node: NodeInfo) => true || node,

From 8a8db3ddb3b05b296f9c0d84d77ff0ff605ae279 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Thu, 4 Jan 2024 17:50:02 +0200
Subject: [PATCH 08/11] style: remove details node card in manual if no node is
 selected

---
 .../node_selector/TfManualNodeSelector.vue    |  1 +
 .../node_selector/TfNodeDetailsCard.vue       | 36 +++++++------------
 2 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/packages/playground/src/components/node_selector/TfManualNodeSelector.vue b/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
index ff614dd80a..9cdd78f867 100644
--- a/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <TfNodeDetailsCard
+      v-show="modelValue || placeholderNode"
       flat
       :node="modelValue || placeholderNode"
       :status="
diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
index 5effbdbe2a..1379633beb 100644
--- a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
+++ b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -49,34 +49,22 @@
 
     <template #subtitle>
       <span v-text="'Farm ID: ' + (node?.farmId ?? '') + ' '" />
-      <VTooltip v-if="node" :text="'Farm is ' + (node?.inDedicatedFarm ? 'Dedicated' : 'Shared')">
-        <template #activator="{ props }">
-          <VChip
-            v-bind="props"
-            :color="node?.inDedicatedFarm ? 'success' : 'secondary'"
-            size="x-small"
-            :text="node?.inDedicatedFarm ? 'Dedicated' : 'Shared'"
-          />
-        </template>
-      </VTooltip>
+      <VChip
+        :color="node?.inDedicatedFarm ? 'success' : 'secondary'"
+        size="x-small"
+        :text="(node?.inDedicatedFarm ? 'Dedicated' : 'Shared') + ' Farm'"
+        v-if="node"
+      />
     </template>
 
     <template #append>
       <template v-if="node">
-        <VTooltip text="Node Details" location="left center">
-          <template #activator="{ props }">
-            <VContainer v-bind="props">
-              <VRow align="center">
-                <VChip v-if="node?.hasGPU" color="secondary" text="Has GPU" />
-                <VChip class="mx-2" color="primary" :text="node?.certificationType" />
-                <VChip
-                  :color="node?.rentedByTwinId === 0 ? 'secondary' : 'success'"
-                  :text="node?.rentedByTwinId === 0 ? 'Shared' : 'Dedicated'"
-                />
-              </VRow>
-            </VContainer>
-          </template>
-        </VTooltip>
+        <VChip v-if="node?.hasGPU" color="secondary" text="Node Has GPU" />
+        <VChip class="mx-2" color="primary" :text="node?.certificationType" />
+        <VChip
+          :color="node?.rentedByTwinId === 0 ? 'secondary' : 'success'"
+          :text="(node?.rentedByTwinId === 0 ? 'Shared' : 'Dedicated') + ' Node'"
+        />
       </template>
     </template>
 

From 9a0c78a36a4537e1df1788ec39f6cbfee53b97ae Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Thu, 4 Jan 2024 17:53:22 +0200
Subject: [PATCH 09/11] fix: set value to undefined when nodeId is changed

---
 .../src/components/node_selector/TfManualNodeSelector.vue  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/playground/src/components/node_selector/TfManualNodeSelector.vue b/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
index 9cdd78f867..c615685386 100644
--- a/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
@@ -86,10 +86,13 @@ export default {
     const nodeId = ref<number>();
 
     // reset node to mark form as invalid
-    watch(nodeId, () => bindModelValue());
-
     const placeholderNode = ref<NodeInfo>();
 
+    watch(nodeId, () => {
+      bindModelValue();
+      placeholderNode.value = undefined;
+    });
+
     const validationTask = useAsync<true | string, string, [id: number | undefined]>(
       async nodeId => {
         if (typeof nodeId !== "number") {

From 3ee051fd81574e2e7ff02f1b5d719001bbe2e45c Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Mon, 8 Jan 2024 13:53:54 +0200
Subject: [PATCH 10/11] fix: remove Node Serial Number if it's 'default string'

---
 .../src/components/node_selector/TfNodeDetailsCard.vue       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
index 1379633beb..00c40420d7 100644
--- a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
+++ b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -38,7 +38,10 @@
 
     <template #title>
       Node ID({{ node?.nodeId }})
-      <VTooltip text="Node Serial Number" v-if="node">
+      <VTooltip
+        text="Node Serial Number"
+        v-if="node && node.serialNumber && node.serialNumber.toLowerCase() !== 'default string'"
+      >
         <template #activator="{ props }">
           <VChip size="x-small" v-bind="props">
             <span class="font-weight-bold" v-text="node.serialNumber" />

From 612e9db7f3e9d7c026d860c79f0d65a215a15d49 Mon Sep 17 00:00:00 2001
From: MohamedElmdary <engm5081@gmail.com>
Date: Tue, 9 Jan 2024 11:26:56 +0200
Subject: [PATCH 11/11] - feat: Add *dedicated* prop in **NodeInfo** type in
 grid_client - fix: Temp fix for *czechia* country by adding if condition for
 it - chore: open issue for that temp fix on tfchain_graphql#148 - style:
 Change how we show Node ID title - typo: Update messages to be more user
 friendly

---
 packages/grid_client/src/primitives/nodes.ts                 | 1 +
 .../src/components/node_selector/TfAutoNodeSelector.vue      | 2 +-
 .../src/components/node_selector/TfManualNodeSelector.vue    | 3 +++
 .../src/components/node_selector/TfNodeDetailsCard.vue       | 5 +++--
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/grid_client/src/primitives/nodes.ts b/packages/grid_client/src/primitives/nodes.ts
index 25960373ad..b009903bcd 100644
--- a/packages/grid_client/src/primitives/nodes.ts
+++ b/packages/grid_client/src/primitives/nodes.ts
@@ -55,6 +55,7 @@ interface NodeInfo {
   publicConfig: PublicConfig;
   status: string;
   certificationType: string;
+  dedicated: boolean;
   hasGPU: boolean;
   extraFee: number;
   rentedByTwinId: number;
diff --git a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
index 805d29bf0f..e4ff07ae46 100644
--- a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
@@ -111,7 +111,7 @@
           variant="elevated"
           :style="{ position: 'absolute', bottom: '31px', right: '31px', zIndex: 9 }"
           v-else-if="nodeInputValidateTask.loading"
-          text="Checking if the disks will fit in the node's storage pools..."
+          text="Checking if the deployment will fit in the node's disks..."
         />
 
         <VAlert
diff --git a/packages/playground/src/components/node_selector/TfManualNodeSelector.vue b/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
index c615685386..122b5277a7 100644
--- a/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfManualNodeSelector.vue
@@ -134,6 +134,9 @@ export default {
           case props.filters.certified && node.certificationType.toLowerCase() !== "certified":
             throw `Node ${nodeId} is not Certified`;
 
+          case props.filters.dedicated && !node.dedicated:
+            throw `Node ${nodeId} is not dedicated`;
+
           case props.filters.dedicated && node.rentedByTwinId === 0:
             throw `Node ${nodeId} is not rented`;
 
diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
index 00c40420d7..0f51cd46c3 100644
--- a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
+++ b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -37,7 +37,7 @@
     </template>
 
     <template #title>
-      Node ID({{ node?.nodeId }})
+      Node ID: {{ node?.nodeId }}
       <VTooltip
         text="Node Serial Number"
         v-if="node && node.serialNumber && node.serialNumber.toLowerCase() !== 'default string'"
@@ -138,7 +138,8 @@ export default {
   setup(props) {
     const flag = computed(() => {
       const country = props.node?.location.country ?? "";
-      const code = byCountry(country)?.internet || byCountry(country.toLowerCase())?.internet;
+      const code =
+        country === "Czechia" ? "CZ" : byCountry(country)?.internet || byCountry(country.toLowerCase())?.internet;
       return code
         ? `https://www.worldatlas.com/r/w425/img/flag/${code.toLowerCase()}-flag.jpg`
         : `https://placehold.co/30x20?text=TF`;