worked with nodes placing

Author: MohamedElmdary

frontend/kubecloud-v2/assets/scss/vuetify.scss

@@ -31,3 +31,7 @@
     }
   }
 }
+
+.table-hidden-overflow > div {
+  overflow: hidden;
+}

frontend/kubecloud-v2/components/NodeCard.vue

@@ -109,9 +109,13 @@
         block
         size="x-large"
         class="btn-form"
-        text="Reserve Node"
-        append-icon="mdi-arrow-right"
+        :text="reserved ? 'Node Reserved' : 'Reserve Node'"
+        :style="reserved ? { borderColor: 'rgb(var(--v-theme-success)) !important', boxShadow: 'none !important' } : {}"
+        :append-icon="reserved ? undefined : 'mdi-arrow-right'"
+        :prepend-icon="reserved ? 'mdi-check' : undefined"
+        :color="reserved ? 'success' : undefined"
         variant="outlined"
+        :readonly="reserved"
         :loading="isLoading"
         @click="reserveNode()"
       />
@@ -121,39 +125,9 @@
 
 <script setup lang="ts">
 import type { HandlersNodesWithDiscount } from "../generated/api"
-import { AxiosError } from "axios"
 
 const props = defineProps<{ node: HandlersNodesWithDiscount }>()
-const api = useApi()
 
-const monitoringUrl = computedAsync(async () => {
-  const accountId = await api.helpers.getAccountId(props.node.twinId!)
-  const params = new URLSearchParams({
-    "orgId": "2",
-    "refresh": "30s",
-    "var-network": "dev",
-    "var-farm": props.node.farmId!.toString(),
-    "var-node": accountId,
-    "var-diskdevices": "[a-z]+|nvme[0-9]+n[0-9]+|mmcblk[0-9]+",
-  })
-
-  return `https://metrics.grid.tf/d/rYdddlPWkfqwf/zos-host-metrics?${params.toString()}`
-})
-
-const toast = useToast()
-const { isLoading, execute: reserveNode } = useAsyncState(
-  async () => {
-    const { data } = await api.nodes.reserveNode(props.node.nodeId!.toString())
-    return data
-  },
-  null,
-  {
-    immediate: false,
-    onError(e: unknown) {
-      if (e instanceof AxiosError) {
-        toast.error({ message: e.response?.data?.message ?? "An unknown error occurred" })
-      }
-    },
-  },
-)
+const monitoringUrl = useNodeMonitoringUrl(() => props.node)
+const { isLoading, execute: reserveNode, state: reserved } = useNodeReserve(() => props.node)
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <v-row>
     <v-col cols="12">
-      <PlaceVMsHead />
+      <PlaceVMsHead v-model="$props.modelValue" />
     </v-col>
 
     <v-col cols="12">
@@ -35,9 +35,10 @@
 <script setup lang="ts">
 defineProps<{ modelValue: ClusterForm }>()
 
-// const api = useApi()
-// const { state: sshKeys } = useAsyncState(async () => {
-//   const { data } = await api.users.listSshKeys()
-//   return data.data ?? []
-// }, [])
+const loadingNode = ref<number | undefined>()
+
+provide(NodePickCtxKey, {
+  loadingNode,
+  setLoadingNode: (nodeId?: number) => (loadingNode.value = nodeId),
+})
 </script>

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

@@ -28,6 +28,7 @@
     </v-alert>
 
     <v-select
+      v-model="$props.modelValue.region"
       label="Filter By Region"
       placeholder="Pick a region"
       clearable
@@ -40,6 +41,5 @@
 </template>
 
 <script setup lang="ts">
-// defineProps<{ modelValue: string }>()
-// defineEmits<{ (e: "update:modelValue", value: string): void }>()
+defineProps<{ modelValue: ClusterForm }>()
 </script>

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

@@ -1,43 +1,85 @@
 <template>
-  <div class="border rounded-xl pa-4 border-dashed">
-    <div class="d-flex align-center ga-2">
-      <h5 class="text-h6 font-weight-bold" v-text="modelValue.name" />
-      <v-chip color="primary" size="x-small" :text="modelValue.type" class="rounded font-weight-bold text-caption text-capitalize" />
-    </div>
+  <!-- class="border rounded-xl border-dashed" -->
+  <div>
+    <div class="pa-4">
+      <div class="d-flex align-center ga-2">
+        <h5 class="text-h6 font-weight-bold" v-text="modelValue.name" />
+        <v-chip color="primary" size="x-small" :text="modelValue.type" class="rounded font-weight-bold text-caption text-capitalize" />
+      </div>
 
-    <v-chip
-      v-if="modelValue.useFullNodeCapabilities"
-      color="success"
-      size="small"
-      prepend-icon="mdi-check-decagram"
-      class="font-weight-bold mt-2"
-    >
-      Use Full Node Capabilities
-    </v-chip>
-
-    <div v-else class="d-flex align-center flex-wrap ga-2 mt-2">
-      <v-chip size="small" prepend-icon="mdi-cpu-64-bit" color="primary" class="font-weight-bold">
-        CPU: {{ modelValue.cpu }} vCores
-      </v-chip>
-      <v-chip size="small" prepend-icon="mdi-memory" color="success" class="font-weight-bold">
-        RAM: {{ modelValue.memory }} GB
-      </v-chip>
-      <v-chip size="small" prepend-icon="mdi-server" color="secondary" class="font-weight-bold">
-        Disk Size: {{ modelValue.disk }} GB
+      <v-chip
+        v-if="modelValue.useFullNodeCapabilities"
+        color="success"
+        size="small"
+        prepend-icon="mdi-check-decagram"
+        class="font-weight-bold mt-2"
+      >
+        Use Full Node Capabilities
       </v-chip>
+
+      <div v-else class="d-flex align-center flex-wrap ga-2 mt-2">
+        <v-chip size="small" prepend-icon="mdi-cpu-64-bit" color="primary" class="font-weight-bold">
+          CPU: {{ modelValue.cpu }} vCores
+        </v-chip>
+        <v-chip size="small" prepend-icon="mdi-memory" color="success" class="font-weight-bold">
+          RAM: {{ modelValue.memory }} GB
+        </v-chip>
+        <v-chip size="small" prepend-icon="mdi-server" color="secondary" class="font-weight-bold">
+          Disk Size: {{ modelValue.disk }} GB
+        </v-chip>
+      </div>
     </div>
 
-    <v-select
-      class="mt-8"
-      label="Select Node"
-      placeholder="pick a node"
-      :items="['node 1', 'node 2']"
-      density="compact"
-      variant="outlined"
-    />
+    <v-expand-transition>
+      <div v-if="activeNode">
+        <NodeListItem active :node="activeNode!" />
+      </div>
+    </v-expand-transition>
+
+    <v-table class="border-t border-0 border-dashed" :class="{ 'table-hidden-overflow': !!loadingNode }" :style="{ maxHeight: '400px' }">
+      <tbody>
+        <tr
+          v-for="(node, index) in nodes"
+          :key="node.nodeId"
+        >
+          <VDivider v-if="index !== 0" />
+          <NodeListItem
+            :active="modelValue.nodeId === node.nodeId"
+            :node="node"
+            @reserve="$emit('reserve', node.nodeId!)"
+            @pick="getNodeStoragePool(undefined, $event)"
+          />
+        </tr>
+      </tbody>
+    </v-table>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{ modelValue: ClusterNode }>()
+import type { HandlersNodesWithDiscount } from "~/generated/api"
+
+const props = defineProps<{ modelValue: ClusterNode, allNodes: HandlersNodesWithDiscount[], nodes: HandlersNodesWithDiscount[] }>()
+const emit = defineEmits<{
+  (e: "reserve", nodeId: number): void
+  (e: "pick", nodeId: number | null): void
+}>()
+
+const { loadingNode, setLoadingNode } = inject(NodePickCtxKey)!
+
+const activeNode = computed(() => props.allNodes.filter(n => n.nodeId === props.modelValue.nodeId)[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) {
+    setLoadingNode(undefined)
+    emit("pick", nodeId!)
+  },
+  onError() { setLoadingNode(undefined) },
+})
 </script>

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

@@ -7,18 +7,105 @@
       </h3>
     </div>
 
-    <v-row>
-      <v-col v-for="(node, idx) in cluster.masters" :key="node.id" cols="6">
-        <PlaceVMsNode v-model="$props.cluster.masters[idx]!" />
-      </v-col>
-
-      <v-col v-for="(node, idx) in cluster.workers" :key="node.id" cols="6">
-        <PlaceVMsNode v-model="$props.cluster.workers[idx]!" />
-      </v-col>
-    </v-row>
+    <div class="d-flex border border-dashed rounded-lg">
+      <v-tabs
+        :model-value="nodeTab.join('|')"
+        color="primary"
+        direction="vertical"
+        class="border-e border-0 border-dashed"
+        mandatory
+        @update:model-value="nodeTab = ($event.split('|') as ['masters' | 'workers', number])"
+      >
+        <DefineNodeTab #="{ text, value, active }">
+          <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 }"
+          />
+        </DefineNodeTab>
+
+        <ReuseNodeTab
+          v-for="(node, index) in cluster.masters"
+          :key="node.id"
+          :text="`${node.name} (${node.type})`"
+          :value="`masters|${index}`"
+          :loading="loadingNode && nodeTab.join('|') === `masters|${index}`"
+          :disabled="loadingNode && nodeTab.join('|') !== `masters|${index}`"
+          :active="!!node.nodeId"
+        />
+
+        <ReuseNodeTab
+          v-for="(node, index) in cluster.workers"
+          :key="node.id"
+          :text="`${node.name} (${node.type})`"
+          :value="`workers|${index}`"
+          :loading="loadingNode && nodeTab.join('|') === `workers|${index}`"
+          :disabled="loadingNode && nodeTab.join('|') !== `workers|${index}`"
+          :active="!!node.nodeId"
+        />
+      </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"
+          :nodes="nodes"
+          @reserve="onReserveNode"
+          @pick="$props.cluster[nodeTab[0]][nodeTab[1]]!.nodeId = $event"
+        />
+      </div>
+    </div>
   </v-card>
 </template>
 
 <script setup lang="ts">
-defineProps<{ cluster: ClusterForm }>()
+import type { HandlersNodesWithDiscount, ListRentableNodes200Response } from "~/generated/api"
+
+const props = defineProps<{ cluster: ClusterForm }>()
+
+const [DefineNodeTab, ReuseNodeTab] = createReusableTemplate({
+  props: { text: String, value: String, active: Boolean },
+})
+
+const { loadingNode } = inject(NodePickCtxKey)!
+const nodeTab = ref<["masters" | "workers", number]>(["masters", 0])
+
+watchImmediate(() => {
+  const [t, i] = nodeTab.value
+  return props.cluster[t][i]
+}, (v) => {
+  if (!v) {
+    nodeTab.value = ["masters", 0]
+  }
+})
+
+const api = useApi()
+function sortNodes(nodes: HandlersNodesWithDiscount[]): HandlersNodesWithDiscount[] {
+  return nodes.toSorted((a, b) => {
+    const _a = (a.rented ? 1 : 0) + (a.rentable ? 1 : 0)
+    const _b = (b.rented ? 1 : 0) + (b.rentable ? 1 : 0)
+    return _b - _a
+  })
+}
+
+const { state: _nodes } = useAsyncState(async () => {
+  const { data } = await api.nodes.listNodes()
+  const nodes = (data as ListRentableNodes200Response).data?.nodes ?? []
+  return sortNodes(nodes)
+}, [], { resetOnExecute: false })
+
+function onReserveNode(nodeId: number): void {
+  // const __nodes = _nodes.value.map(n => n.nodeId === nodeId ? { ...n, rented: true } : n)
+  // _nodes.value = sortNodes(__nodes)
+  _nodes.value = _nodes.value.map(n => n.nodeId === nodeId ? { ...n, rented: true } : n)
+}
+
+const nodes = computed(() => {
+  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!)
+  })
+})
 </script>