added sse connection

Author: MohamedElmdary

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

@@ -152,3 +152,13 @@ blockquote > * {
   }
 }
 
+
+.iziToast {
+  .iziToast-body {
+    .iziToast-title {
+      float: none !important;
+      display: block !important;
+      margin-bottom: 6px !important;
+    }
+  }
+}

frontend/kubecloud-v2/components/deploy-cluster/define/DefineVMsForm.vue

@@ -29,11 +29,7 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ modelValue: ClusterForm }>()
+import type { ModelsSSHKey } from "~/generated/api"
 
-const api = useApi()
-const { state: sshKeys } = useAsyncState(async () => {
-  const { data } = await api.users.listSshKeys()
-  return data.data ?? []
-}, [], { immediate: $meta.client })
+defineProps<{ modelValue: ClusterForm, sshKeys: ModelsSSHKey[] }>()
 </script>

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

@@ -1,34 +1,15 @@
 <template>
   <v-row>
+    {{ $props.modelValue.region }}
     <v-col cols="12">
-      <PlaceVMsHead v-model="$props.modelValue" />
+      <PlaceVMsHead
+        v-model="$props.modelValue"
+      />
     </v-col>
 
     <v-col cols="12">
       <PlaceVMsNodes :cluster="$props.modelValue" />
     </v-col>
-
-    <!-- <v-col cols="6">
-      <DefineVMsNodes
-        icon="mdi-server"
-        node-type="Master"
-        :ssh-keys="sshKeys"
-        :nodes="$props.modelValue.masters"
-        @add-node="$props.modelValue.masters.push(createClusterNode())"
-        @remove-node="$props.modelValue.masters = $props.modelValue.masters.filter(master => master.id !== $event)"
-      />
-    </v-col>
-
-    <v-col cols="6">
-      <DefineVMsNodes
-        icon="mdi-console"
-        node-type="Worker"
-        :ssh-keys="sshKeys"
-        :nodes="$props.modelValue.workers"
-        @add-node="$props.modelValue.workers.push(createClusterNode())"
-        @remove-node="$props.modelValue.workers = $props.modelValue.workers.filter(worker => worker.id !== $event)"
-      />
-    </v-col> -->
   </v-row>
 </template>
 

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

@@ -36,6 +36,10 @@
       variant="outlined"
       density="compact"
       hide-details
+      @update:model-value="() => {
+        $props.modelValue.masters = $props.modelValue.masters.map(master => ({ ...master, node: null }))
+        $props.modelValue.workers = $props.modelValue.workers.map(worker => ({ ...worker, node: null }))
+      }"
     />
   </v-card>
 </template>

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

@@ -32,17 +32,19 @@
 
     <v-expand-transition>
       <div v-if="activeNode">
-        <NodeListItem :active="modelValue.node?.valid" :deactive="!modelValue.node?.valid" :node="activeNode!" />
+        <NodeListItem class="mb-4" :active="modelValue.node?.valid" :deactive="!modelValue.node?.valid" :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"
+          v-for="(node, index) in filteredNodes"
           :key="node.nodeId"
+          :class="{ 'border-t border-0 border-dashed': index !== 0 }"
         >
           <VDivider v-if="index !== 0" />
+
           <NodeListItem
             :disabled="pickedNodes.includes(node.nodeId!)"
             :node="node"
@@ -61,22 +63,37 @@ import type { HandlersNodesWithDiscount } from "~/generated/api"
 const props = defineProps<{ modelValue: ClusterNode, pickedNodes: number[], nodes: HandlersNodesWithDiscount[] }>()
 const emit = defineEmits<{
   (e: "reserve", nodeId: number): void
-  (e: "pick", node: null | { id: number, valid: boolean }): void
+  (e: "pick", node: null | { id: number, raw: HandlersNodesWithDiscount, valid: boolean }): void
 }>()
 
 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) {
+      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!
+
+    return cpu >= props.modelValue.cpu
+      && ram >= (props.modelValue.memory / 1024 ** 3)
+      && ssd >= (props.modelValue.disk / 1024 ** 3)
+  })
+})
 
 const api = useApi()
 const { execute: getNodeStoragePool } = useAsyncState(async (node: HandlersNodesWithDiscount) => {
   setLoadingNode(node.nodeId!)
   try {
     /* const { data } =  */ await api.nodes.getNodeStoragePool(node.nodeId!.toString())
-    emit("pick", { id: node.nodeId!, valid: true })
+    emit("pick", { id: node.nodeId!, raw: node, valid: true })
   }
   catch {
-    emit("pick", { id: node.nodeId!, valid: false })
+    emit("pick", { id: node.nodeId!, raw: node, valid: false })
   }
   finally {
     setLoadingNode(undefined)

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

@@ -102,20 +102,13 @@ const { state: _nodes } = useAsyncState(async () => {
 }, [], { immediate: $meta.client, 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 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)
-  return _nodes.value.filter((n) => {
-    const regionFilter = !props.cluster.region || n.location?.region === props.cluster.region
-    // return regionFilter && !pickedNodes.includes(n.nodeId!)
-    return regionFilter
-  })
+  return _nodes.value.filter(n => !props.cluster.region || n.location?.region === props.cluster.region)
 })
 </script>

frontend/kubecloud-v2/nuxt.config.ts

@@ -58,4 +58,13 @@ export default defineNuxtConfig({
       standalone: false,
     },
   },
+  toast: {
+    settings: {
+      timeout: 10_000,
+      resetOnHover: true,
+      maxWidth: 400,
+      messageLineHeight: "18",
+      titleLineHeight: "18",
+    },
+  },
 })

frontend/kubecloud-v2/pages/dashboard/clusters/deploy.vue

@@ -56,15 +56,11 @@
 
         <v-stepper-window>
           <v-stepper-window-item eager :value="1">
-            <v-form v-model="defineFormValid">
-              <DefineVMsForm v-model="cluster" />
-            </v-form>
+            <DefineVMsForm v-model="cluster" :ssh-keys="sshKeys" />
           </v-stepper-window-item>
 
           <v-stepper-window-item eager :value="2">
-            <v-form v-model="defineFormValid">
-              <PlaceVMsForm v-model="cluster" />
-            </v-form>
+            <PlaceVMsForm v-model="cluster" />
           </v-stepper-window-item>
 
           <v-stepper-window-item eager :value="3">
@@ -80,7 +76,17 @@
             text="Back"
             variant="text"
             :disabled="step === 1"
-            @click="prev"
+            @click="() => {
+              if (step === 2) {
+                $nextTick(() => {
+                  cluster.masters = cluster.masters.map(master => ({ ...master, node: null }))
+                  cluster.workers = cluster.workers.map(worker => ({ ...worker, node: null }))
+                })
+              }
+
+              prev()
+            }
+            "
           />
 
           <v-btn
@@ -98,12 +104,12 @@
 
           <v-btn
             v-else
-            disabled
             prepend-icon="mdi-rocket-launch"
             text="Deploy Cluster"
             variant="tonal"
             color="success"
-            @click="console.log('deploy cluster')"
+            :loading="deploying"
+            @click="deployCluster()"
           />
         </div>
       </v-stepper>
@@ -112,6 +118,8 @@
 </template>
 
 <script setup lang="ts">
+import type { HandlersNodeInput } from "~/generated/api"
+
 const { drawer, container } = inject(DashboardLayoutCtxKey)!
 
 onMounted(drawer.close)
@@ -120,6 +128,12 @@ onBeforeUnmount(drawer.open)
 onMounted(container.fluidize)
 onBeforeUnmount(container.containerize)
 
+const api = useApi()
+const { state: sshKeys } = useAsyncState(async () => {
+  const { data } = await api.users.listSshKeys()
+  return data.data ?? []
+}, [], { immediate: $meta.client })
+
 const [DefineStepperLine, ReuseStepperLine] = createReusableTemplate({
   props: { completed: Boolean },
 })
@@ -128,17 +142,64 @@ const [DefineStepperItem, ReuseStepperItem] = createReusableTemplate({
   props: { title: String, step: Number, value: Number, completed: Boolean },
 })
 
-const cluster = ref<ClusterForm>({
-  name: "engine789",
-  region: null,
-  masters: [createClusterNode({ type: "leader", name: "Leader" })],
-  workers: [],
-})
+const cluster = ref(createClusterForm())
 
 const step = ref(1)
-const defineFormValid = ref(false)
+const defineFormValid = computed(() => {
+  const { name, masters, workers } = cluster.value
+  return name.length >= 3 && masters.concat(workers).every(isValidClusterNode)
+})
 const placeFormValid = computed(() => {
   const { masters, workers } = cluster.value
   return masters.every(v => v.node && v.node.valid) && workers.every(v => v.node && v.node.valid)
 })
+
+async function toNodeInput(clusterNode: ClusterNode): Promise<HandlersNodeInput> {
+  const keys = sshKeys.value
+  const SSH_KEY = clusterNode.sshKeys.map(i => keys[i]!.public_key).join("\n")
+  const root_size = 5 * 1024
+
+  const input: HandlersNodeInput = {
+    name: clusterNode.name,
+    type: clusterNode.type === "worker" ? "worker" : "master",
+    node_id: clusterNode.node!.id,
+    cpu: clusterNode.cpu,
+    memory: clusterNode.memory * 1024,
+    root_size,
+    data_disks: [clusterNode.disk * 1024 - root_size],
+    env_vars: {
+      SSH_KEY,
+      K3S_TOKEN: cluster.value.token,
+    },
+  }
+
+  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.data_disks = pools.map((pool, i) => {
+      const size = Math.floor(pool.free! * 0.985 / 1024 ** 3)
+      return size * 1024 - (i === 0 ? root_size : 0)
+    })
+  }
+
+  return input
+}
+
+const { execute: deployCluster, isLoading: deploying } = useAsyncState(async () => {
+  const { name, masters, workers } = cluster.value
+  const nodes = await Promise.all(masters.concat(workers).map(toNodeInput))
+  /* const { data } =  */await api.deployments.deploymentsPost({
+    name,
+    token: cluster.value.token,
+    nodes,
+  })
+}, null, { immediate: false })
 </script>

frontend/kubecloud-v2/plugins/notifications.client.ts

@@ -0,0 +1,49 @@
+export default defineNuxtPlugin(() => {
+  // const api = useApi()
+  // console.log("plugin?")
+
+  const { apiBasePath } = useRuntimeConfig().public
+  const { accessToken } = useTokens()
+
+  //   const toast = useToast()
+
+  const sse = new EventSource(`${apiBasePath}/events?token=${accessToken.value}`, { withCredentials: true })
+
+  const toast = useToast()
+  sse.onopen = () => {
+    // console.log("sse opened")
+  }
+
+  sse.onmessage = (e) => {
+    // console.log("Message", e.data)
+    try {
+      const d = JSON.parse(e.data)
+      const { data } = d
+      // console.log(d)
+
+      const fn = (toast as any)[d.severity]
+      if (!fn) {
+        // console.log(d.severity, "not found")
+
+        return
+      }
+
+      fn.bind(toast)({ message: data.message, title: data.subject })
+    }
+    catch {
+      console.error("Failed to parse message", e.data)
+    }
+  }
+
+  sse.onerror = (e) => {
+    console.error("sse error", e)
+  }
+
+  //   sse.onmessage = (event) => {
+  //     console.log(event)
+  //   }
+
+//   sse.onerror = (event) => {
+//     console.error(event)
+//   }
+})