add deploying cluster and routing into clusters table

MohamedElmdary · MohamedElmdary · commit dbdaa92ea781 · 2026-02-15T18:31:03.000+02:00
diff --git a/frontend/kubecloud-v2/App.vue b/frontend/kubecloud-v2/App.vue
@@ -8,3 +8,18 @@
     <app-footer />
   </v-app>
 </template>
+
+<!-- <script setup lang="ts">
+const api = useApi()
+
+useAsyncState(
+  () => api.notifications.notificationsGet(),
+  null,
+  {
+    immediate: $meta.client,
+    onSuccess(data) {
+      console.log(data)
+    },
+  },
+)
+</script> -->
diff --git a/frontend/kubecloud-v2/components/deploy-cluster/define/DefineVMNodeForm.vue b/frontend/kubecloud-v2/components/deploy-cluster/define/DefineVMNodeForm.vue
@@ -46,7 +46,7 @@
           <v-row>
             <v-col cols="4" class="pb-0">
               <v-text-field
-                v-model="$props.node.cpu"
+                v-model.number="$props.node.cpu"
                 :rules="[
                   (v) => !!v || 'CPU is required',
                   (v) => v > 0 || 'CPU must be greater than 0',
@@ -58,7 +58,7 @@
 
             <v-col cols="4" class="pb-0">
               <v-text-field
-                v-model="$props.node.memory"
+                v-model.number="$props.node.memory"
                 :rules="[
                   (v) => !!v || 'RAM is required',
                   (v) => v > 0 || 'RAM must be greater than 0',
@@ -70,7 +70,7 @@
 
             <v-col cols="4" class="pb-0">
               <v-text-field
-                v-model="$props.node.disk"
+                v-model.number="$props.node.disk"
                 :rules="[
                   (v) => !!v || 'Disk size is required',
                   (v) => v > 0 || 'Disk size must be greater than 0',
diff --git a/frontend/kubecloud-v2/components/deploy-cluster/define/DefineVMsForm.vue b/frontend/kubecloud-v2/components/deploy-cluster/define/DefineVMsForm.vue
@@ -4,7 +4,7 @@
       <DefineVMsClusterName v-model="$props.modelValue.name" />
     </v-col>
 
-    <v-col cols="6">
+    <v-col cols="12" md="6">
       <DefineVMsNodes
         icon="mdi-server"
         node-type="Master"
@@ -15,7 +15,7 @@
       />
     </v-col>
 
-    <v-col cols="6">
+    <v-col cols="12" md="6">
       <DefineVMsNodes
         icon="mdi-console"
         node-type="Worker"
diff --git a/frontend/kubecloud-v2/components/deploy-cluster/place/PlaceVMsForm.vue b/frontend/kubecloud-v2/components/deploy-cluster/place/PlaceVMsForm.vue
@@ -1,6 +1,5 @@
 <template>
   <v-row>
-    {{ $props.modelValue.region }}
     <v-col cols="12">
       <PlaceVMsHead
         v-model="$props.modelValue"
diff --git a/frontend/kubecloud-v2/components/deploy-cluster/place/PlaceVMsNode.vue b/frontend/kubecloud-v2/components/deploy-cluster/place/PlaceVMsNode.vue
@@ -22,10 +22,10 @@
           CPU: {{ modelValue.cpu }} vCores
         </v-chip>
         <v-chip size="small" prepend-icon="mdi-memory" color="success" class="font-weight-bold">
-          RAM: {{ modelValue.memory }} GB
+          RAM: {{ modelValue.memory }} GiB
         </v-chip>
         <v-chip size="small" prepend-icon="mdi-server" color="secondary" class="font-weight-bold">
-          Disk Size: {{ modelValue.disk }} GB
+          Disk Size: {{ modelValue.disk }} GiB
         </v-chip>
       </div>
     </div>
@@ -38,6 +38,10 @@
 
     <v-table class="border-t border-0 border-dashed" :class="{ 'table-hidden-overflow': !!loadingNode }" :style="{ maxHeight: '400px' }">
       <tbody>
+        <tr v-if="filteredNodes.length === 0" class="text-caption text-accent text-center">
+          <VListItem title="No available nodes for the requested configuration" />
+        </tr>
+
         <tr
           v-for="(node, index) in filteredNodes"
           :key="node.nodeId"
@@ -71,17 +75,21 @@ const { loadingNode, setLoadingNode } = inject(NodePickCtxKey)!
 const activeNode = computed(() => props.nodes.filter(n => n.nodeId === props.modelValue.node?.id)[0])
 const filteredNodes = computed(() => {
   return props.nodes.filter((n) => {
-    if (props.pickedNodes.includes(n.nodeId!) || props.modelValue.useFullNodeCapabilities) {
+    const { useFullNodeCapabilities, cpu, memory, disk } = props.modelValue
+
+    if (props.pickedNodes.includes(n.nodeId!)) {
       return true
     }
 
-    const cpu = n.total_resources!.cru!
-    const ram = n.total_resources!.mru! - n.used_resources!.mru!
-    const ssd = n.total_resources!.sru! - n.used_resources!.sru!
+    const cru = n.total_resources!.cru!
+    const ram = (n.total_resources!.mru! * 0.98 - n.used_resources!.mru!) / 1024 ** 3
+    const ssd = (n.total_resources!.sru! * 0.97 - n.used_resources!.sru!) / 1024 ** 3
+
+    if (useFullNodeCapabilities) {
+      return cru >= 0 && ram >= 0 && ssd >= 0
+    }
 
-    return cpu >= props.modelValue.cpu
-      && ram >= (props.modelValue.memory / 1024 ** 3)
-      && ssd >= (props.modelValue.disk / 1024 ** 3)
+    return cru >= cpu && ram >= memory && ssd >= disk
   })
 })
 
diff --git a/frontend/kubecloud-v2/components/deploy-cluster/place/PlaceVMsNodes.vue b/frontend/kubecloud-v2/components/deploy-cluster/place/PlaceVMsNodes.vue
@@ -95,10 +95,28 @@ function sortNodes(nodes: HandlersNodesWithDiscount[]): HandlersNodesWithDiscoun
   })
 }
 
+/* const { state: deployments } = useAsyncState(async () => {
+  const { data } = await api.deployments.deploymentsGet()
+  return data.data?.deployments ?? []
+}, [], { immediate: $meta.client }) */
+
 const { state: _nodes } = useAsyncState(async () => {
   const { data } = await api.nodes.listNodes()
+  const deployments = await api.deployments
+    .deploymentsGet()
+    .then(v => v.data.data?.deployments ?? [])
+    .then(v => v.map(d => d.cluster?.nodes ?? []).flat(1))
+    .then(v => v.map(n => n.node_id))
+
   const nodes = (data as ListRentableNodes200Response).data?.nodes ?? []
-  return sortNodes(nodes)
+  // console.log({
+  //   deployments,
+  //   nodes,
+  // })
+
+  const x = sortNodes(nodes.filter(n => !deployments.includes(n.nodeId!)))
+
+  return x
 }, [], { immediate: $meta.client, resetOnExecute: false })
 
 function onReserveNode(nodeId: number): void {
diff --git a/frontend/kubecloud-v2/components/deploy-cluster/review/ReviewDeployment.vue b/frontend/kubecloud-v2/components/deploy-cluster/review/ReviewDeployment.vue
@@ -0,0 +1,87 @@
+<template>
+  <v-card>
+    <h3 class="text-h6 font-weight-bold mb-6">
+      Cluster Configuration
+    </h3>
+
+    <v-text-field
+      :model-value="cluster.name"
+      variant="outlined"
+      label="Cluster Name"
+      readonly
+    />
+
+    <div class="border border-dashed rounded-lg pa-6 position-relative">
+      <h4
+        class="text-body-2 font-weight-bold position-absolute bg-surface px-2"
+        :style="{ top: 0, left: '16px', transform: 'translateY(-50%)' }"
+      >
+        Node Assignment
+      </h4>
+
+      <v-row>
+        <v-col v-for="node in [...cluster.masters, ...cluster.workers]" :key="node.id" cols="6">
+          <v-card rounded="lg" flat :style="{ padding: '16px !important' }">
+            <div class="d-flex align-center ga-2">
+              <h4 class="text-body-1 font-weight-bold" v-text="node.name" />
+              <v-chip
+                :text="node.type"
+                size="small"
+                rounded="lg"
+                color="primary"
+                class="text-capitalize font-weight-bold text-caption"
+              />
+            </div>
+
+            <v-chip
+              v-if="node.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: {{ node.cpu }} vCores
+              </v-chip>
+              <v-chip size="small" prepend-icon="mdi-memory" color="success" class="font-weight-bold">
+                RAM: {{ node.memory }} GiB
+              </v-chip>
+              <v-chip size="small" prepend-icon="mdi-server" color="secondary" class="font-weight-bold">
+                Disk Size: {{ node.disk }} GiB
+              </v-chip>
+            </div>
+
+            <div cols="12" class="pb-0 d-flex align-start ga-3">
+              <label class="text-body-2 text-no-wrap mt-2">
+                SSH Keys:
+              </label>
+
+              <v-chip-group :model-value="node.sshKeys" multiple selected-class="text-primary">
+                <v-chip
+                  v-for="(key, index) in sshKeys"
+                  :key="key.id"
+                  filter
+                  :value="index"
+                  class="rounded"
+                  size="small"
+                >
+                  {{ key.name }}
+                </v-chip>
+              </v-chip-group>
+            </div>
+          </v-card>
+        </v-col>
+      </v-row>
+    </div>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import type { ModelsSSHKey } from "~/generated/api"
+
+defineProps<{ sshKeys: ModelsSSHKey[], cluster: ClusterForm }>()
+</script>
diff --git a/frontend/kubecloud-v2/pages/dashboard/clusters/deploy.vue b/frontend/kubecloud-v2/pages/dashboard/clusters/deploy.vue
@@ -64,7 +64,7 @@
           </v-stepper-window-item>
 
           <v-stepper-window-item eager :value="3">
-            {{ cluster }}
+            <ReviewDeployment :ssh-keys="sshKeys" :cluster="cluster" />
           </v-stepper-window-item>
         </v-stepper-window>
 
@@ -170,20 +170,20 @@ async function toNodeInput(clusterNode: ClusterNode): Promise<HandlersNodeInput>
     env_vars: {
       SSH_KEY,
       K3S_TOKEN: cluster.value.token,
+      USE_FULL_NODE_CAPABILITIES: clusterNode.useFullNodeCapabilities ? "1" : "0",
     },
   }
 
   if (clusterNode.useFullNodeCapabilities) {
     const { nodeId, total_resources, used_resources } = clusterNode.node!.raw
 
-    input.cpu = total_resources!.cru!
-    input.memory = Math.floor(((total_resources!.mru! - used_resources!.mru!) * 0.99) / 1024 ** 3) * 1024
-
     const pools = await api.nodes.getNodeStoragePool(nodeId!.toString()).then(v => v.data.data?.pools ?? [])
     if (pools.length === 0) {
       throw new Error("No storage pool found")
     }
 
+    input.cpu = total_resources!.cru!
+    input.memory = Math.floor((total_resources!.mru! * 0.99 - used_resources!.mru!) / 1024 ** 2)
     input.data_disks = pools.map((pool, i) => {
       const size = Math.floor(pool.free! * 0.985 / 1024 ** 3)
       return size * 1024 - (i === 0 ? root_size : 0)
@@ -193,6 +193,7 @@ async function toNodeInput(clusterNode: ClusterNode): Promise<HandlersNodeInput>
   return input
 }
 
+const router = useRouter()
 const { execute: deployCluster, isLoading: deploying } = useAsyncState(async () => {
   const { name, masters, workers } = cluster.value
   const nodes = await Promise.all(masters.concat(workers).map(toNodeInput))
@@ -201,5 +202,6 @@ const { execute: deployCluster, isLoading: deploying } = useAsyncState(async ()
     token: cluster.value.token,
     nodes,
   })
+  router.push("/dashboard/clusters")
 }, null, { immediate: false })
 </script>
