updated node valid states

Author: MohamedElmdary

frontend/kubecloud-v2/components/deploy-cluster/place/PlaceVMsNode.vue

@@ -32,7 +32,7 @@
 
     <v-expand-transition>
       <div v-if="activeNode">
-        <NodeListItem active :node="activeNode!" />
+        <NodeListItem :active="modelValue.node?.valid" :deactive="!modelValue.node?.valid" :node="activeNode!" />
       </div>
     </v-expand-transition>
 
@@ -44,7 +44,7 @@
         >
           <VDivider v-if="index !== 0" />
           <NodeListItem
-            :active="modelValue.nodeId === node.nodeId"
+            :disabled="pickedNodes.includes(node.nodeId!)"
             :node="node"
             @reserve="$emit('reserve', node.nodeId!)"
             @pick="getNodeStoragePool(undefined, $event)"
@@ -58,28 +58,28 @@
 <script setup lang="ts">
 import type { HandlersNodesWithDiscount } from "~/generated/api"
 
-const props = defineProps<{ modelValue: ClusterNode, allNodes: HandlersNodesWithDiscount[], nodes: HandlersNodesWithDiscount[] }>()
+const props = defineProps<{ modelValue: ClusterNode, pickedNodes: number[], nodes: HandlersNodesWithDiscount[] }>()
 const emit = defineEmits<{
   (e: "reserve", nodeId: number): void
-  (e: "pick", nodeId: number | null): void
+  (e: "pick", node: null | { id: number, valid: boolean }): void
 }>()
 
 const { loadingNode, setLoadingNode } = inject(NodePickCtxKey)!
 
-const activeNode = computed(() => props.allNodes.filter(n => n.nodeId === props.modelValue.nodeId)[0])
+const activeNode = computed(() => props.nodes.filter(n => n.nodeId === props.modelValue.node?.id)[0])
 
 const api = useApi()
 const { execute: getNodeStoragePool } = useAsyncState(async (node: HandlersNodesWithDiscount) => {
   setLoadingNode(node.nodeId!)
-  emit("pick", null)
-  /* const { data } =  */await api.nodes.getNodeStoragePool(node.nodeId!.toString())
-  return node.nodeId!
-}, null, {
-  immediate: false,
-  onSuccess(nodeId) {
+  try {
+    /* const { data } =  */ await api.nodes.getNodeStoragePool(node.nodeId!.toString())
+    emit("pick", { id: node.nodeId!, valid: true })
+  }
+  catch {
+    emit("pick", { id: node.nodeId!, valid: false })
+  }
+  finally {
     setLoadingNode(undefined)
-    emit("pick", nodeId!)
-  },
-  onError() { setLoadingNode(undefined) },
-})
+  }
+}, null, { immediate: false })
 </script>

frontend/kubecloud-v2/components/deploy-cluster/place/PlaceVMsNodes.vue

@@ -16,43 +16,45 @@
         mandatory
         @update:model-value="nodeTab = ($event.split('|') as ['masters' | 'workers', number])"
       >
-        <DefineNodeTab #="{ text, value, active }">
+        <DefineNodeTab #="{ text, value, active, deactive }">
           <v-tab
             :value="value"
             :text="text"
-            :style="{ borderRadius: '0 4px 4px 0 !important', backgroundColor: active ? 'rgba(var(--v-theme-success), 0.12)' : nodeTab.join('|') === value ? 'rgba(var(--v-theme-primary), 0.12)' : undefined }"
-            :class="{ 'text-success': active }"
+            :style="{ borderRadius: '0 !important', backgroundColor: deactive ? 'rgba(var(--v-theme-error), 0.12)' : active ? 'rgba(var(--v-theme-success), 0.12)' : nodeTab.join('|') === value ? 'rgba(var(--v-theme-primary), 0.12)' : undefined }"
+            :class="{ 'text-success': active, 'text-error': deactive }"
           />
         </DefineNodeTab>
 
         <ReuseNodeTab
           v-for="(node, index) in cluster.masters"
           :key="node.id"
-          :text="`${node.name} (${node.type})`"
+          :text="`${node.name} (${node.type})${node.node ? ` [${node.node.id}]` : ''}`"
           :value="`masters|${index}`"
           :loading="loadingNode && nodeTab.join('|') === `masters|${index}`"
           :disabled="loadingNode && nodeTab.join('|') !== `masters|${index}`"
-          :active="!!node.nodeId"
+          :active="!!node.node && node.node.valid"
+          :deactive="!!node.node && !node.node.valid"
         />
 
         <ReuseNodeTab
           v-for="(node, index) in cluster.workers"
           :key="node.id"
-          :text="`${node.name} (${node.type})`"
+          :text="`${node.name} (${node.type})${node.node ? ` [${node.node.id}]` : ''}`"
           :value="`workers|${index}`"
           :loading="loadingNode && nodeTab.join('|') === `workers|${index}`"
           :disabled="loadingNode && nodeTab.join('|') !== `workers|${index}`"
-          :active="!!node.nodeId"
+          :active="!!node.node && node.node.valid"
+          :deactive="!!node.node && !node.node.valid"
         />
       </v-tabs>
 
       <div v-if="cluster[nodeTab[0]][nodeTab[1]]" class="flex-grow-1">
         <PlaceVMsNode
           v-model="cluster[nodeTab[0]][nodeTab[1]]!"
-          :all-nodes="_nodes"
+          :picked-nodes="pickedNodes"
           :nodes="nodes"
           @reserve="onReserveNode"
-          @pick="$props.cluster[nodeTab[0]][nodeTab[1]]!.nodeId = $event"
+          @pick="$props.cluster[nodeTab[0]][nodeTab[1]]!.node = $event"
         />
       </div>
     </div>
@@ -65,7 +67,7 @@ import type { HandlersNodesWithDiscount, ListRentableNodes200Response } from "~/
 const props = defineProps<{ cluster: ClusterForm }>()
 
 const [DefineNodeTab, ReuseNodeTab] = createReusableTemplate({
-  props: { text: String, value: String, active: Boolean },
+  props: { text: String, value: String, active: Boolean, deactive: Boolean },
 })
 
 const { loadingNode } = inject(NodePickCtxKey)!
@@ -101,11 +103,15 @@ function onReserveNode(nodeId: number): void {
   _nodes.value = _nodes.value.map(n => n.nodeId === nodeId ? { ...n, rented: true } : n)
 }
 
+const pickedNodes = computed(() => {
+  return props.cluster.masters.concat(props.cluster.workers).map(n => n.node?.id).filter(v => !!v) as number[]
+})
 const nodes = computed(() => {
-  const pickedNodes = props.cluster.masters.concat(props.cluster.workers).map(n => n.nodeId)
+  // const pickedNodes = props.cluster.masters.concat(props.cluster.workers).map(n => n.nodeId)
   return _nodes.value.filter((n) => {
     const regionFilter = !props.cluster.region || n.location?.region === props.cluster.region
-    return regionFilter && !pickedNodes.includes(n.nodeId!)
+    // return regionFilter && !pickedNodes.includes(n.nodeId!)
+    return regionFilter
   })
 })
 </script>

frontend/kubecloud-v2/components/nodes/NodeListItem.vue

@@ -1,8 +1,8 @@
 <template>
   <v-card
     :loading="loadingNode === node.nodeId"
-    :disabled="!!loadingNode && loadingNode !== node.nodeId"
-    :class="{ 'opacity-50': !!loadingNode && loadingNode !== node.nodeId }"
+    :disabled="disabled || (!!loadingNode && loadingNode !== node.nodeId)"
+    :class="{ 'opacity-50': disabled || (!!loadingNode && loadingNode !== node.nodeId) }"
     flat
     rounded="0"
     :style="{ padding: '16px !important', border: 'none !important' }"
@@ -123,7 +123,7 @@ import type { HandlersNodesWithDiscount } from "~/generated/api"
 import humanizeDuration from "humanize-duration"
 import prettyBytes from "pretty-bytes"
 
-const props = defineProps<{ node: HandlersNodesWithDiscount, active?: boolean, deactive?: boolean }>()
+const props = defineProps<{ node: HandlersNodesWithDiscount, disabled?: boolean, active?: boolean, deactive?: boolean }>()
 const emit = defineEmits<{ (e: "reserve", nodeId: number): void, (e: "pick", node: HandlersNodesWithDiscount): void }>()
 
 const { loadingNode } = inject(NodePickCtxKey)!

frontend/kubecloud-v2/utils/deploy.ts

@@ -15,7 +15,10 @@ export interface ClusterNode {
   cpu: number
   memory: number
   disk: number
-  nodeId: number | null
+  node: null | {
+    id: number
+    valid: boolean
+  }
   sshKeys: number[]
 }
 
@@ -28,7 +31,7 @@ export function createClusterNode(opts: Partial<ClusterNode> = {}): ClusterNode
     cpu: 2,
     memory: 4,
     disk: 25,
-    nodeId: null,
+    node: null,
     sshKeys: [0],
     ...opts,
   }