add cluster

Author: MohamedElmdary

frontend/kubecloud-v2/components/rows/DeploymentRow.vue

@@ -21,6 +21,7 @@
           size="small"
           text="View"
           :to="ROUTES.Dashboard.Clusters(deployment.cluster?.name)"
+          :disabled="disabled"
         />
 
         <v-btn
@@ -32,6 +33,7 @@
           :loading="downloading"
           :href="binary"
           :download="`${deployment.cluster?.name}-kubeconfig.yaml`"
+          :disabled="disabled"
         />
 
         <v-btn
@@ -41,7 +43,8 @@
           size="small"
           text="Add Node"
           color="primary"
-          @click="console.log('add node')"
+          :disabled="disabled"
+          @click="onAddNode()"
         />
 
         <v-btn
@@ -51,7 +54,8 @@
           size="small"
           text="Delete"
           color="error"
-          @click="console.log('delete cluster')"
+          :disabled="disabled"
+          @click="onDelete()"
         />
       </div>
     </td>
@@ -61,7 +65,7 @@
 <script setup lang="ts">
 import type { ServicesClusterData } from "~/generated/api"
 
-const props = defineProps<{ deployment: ServicesClusterData }>()
+const props = defineProps<{ deployment: ServicesClusterData, disabled: boolean }>()
 defineEmits<{ (e: "view"): void }>()
 
 const createdAt = useDateFormat(() => props.deployment.created_at, DATE_FORMAT)
@@ -83,4 +87,23 @@ const binary = computed(() => {
   const blob = new Blob([data], { type: "application/json" })
   return URL.createObjectURL(blob)
 })
+
+const toast = useToast()
+const ctx = inject(DeploymentDialogCtxKey)!
+
+async function onAddNode() {
+  const result = await ctx.addNode(props.deployment)
+  // TODO: add node
+  if (result) {
+    toast.success({ message: "Node added successfully" })
+  }
+}
+
+async function onDelete() {
+  const result = await ctx.delete(props.deployment)
+  // TODO: delete cluster
+  if (result) {
+    toast.success({ message: "Deployment deleted successfully" })
+  }
+}
 </script>

frontend/kubecloud-v2/composables/contexts.ts

@@ -1,4 +1,4 @@
-import type { HandlersCreditRequestInput, ServicesUserWithUSDBalance } from "../generated/api"
+import type { HandlersCreditRequestInput, HandlersNodeInput, ServicesClusterData, ServicesUserWithUSDBalance } from "../generated/api"
 
 // Dashboard Layout Context
 export interface DashboardLayoutCtx {
@@ -29,3 +29,11 @@ export interface UserDialogCtx {
 }
 
 export const UserDialogCtxKey: InjectionKey<UserDialogCtx> = Symbol("UserDialogCtx")
+
+// Deployment Dialog Context
+export interface DeploymentDialogCtx {
+  addNode: (deployment: ServicesClusterData) => Promise<HandlersNodeInput | undefined>
+  delete: (deployment: ServicesClusterData) => Promise<boolean>
+}
+
+export const DeploymentDialogCtxKey: InjectionKey<DeploymentDialogCtx> = Symbol("DeploymentDialogCtx")

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

@@ -10,7 +10,13 @@
     </div>
 
     <div class="d-flex justify-end ga-4 mb-8">
-      <v-btn prepend-icon="mdi-plus" text="New Cluster" variant="tonal" color="primary" />
+      <v-btn
+        prepend-icon="mdi-plus"
+        text="New Cluster"
+        variant="tonal"
+        color="primary"
+        :to="ROUTES.Dashboard.Clusters.Deploy()"
+      />
       <v-btn
         prepend-icon="mdi-trash-can-outline"
         color="error"
@@ -19,6 +25,9 @@
         border
         class="border-error"
         :style="{ '--v-border-opacity': '0.3' }"
+        :loading="isDeleting"
+        :disabled="deployments.length === 0"
+        @click="onDeleteAll()"
       />
     </div>
 
@@ -57,14 +66,60 @@
       :loading="isLoading"
     >
       <template #item="{ item }">
-        <DeploymentRow :deployment="item" />
+        <DeploymentRow :deployment="item" :disabled="isDeleting" />
       </template>
     </v-data-table>
+
+    <v-dialog
+      :model-value="isRevealed"
+      max-width="600"
+      scrollable
+      @update:model-value="cancel()"
+    >
+      <v-card>
+        <v-btn @click="confirm()">
+          Ok
+        </v-btn>
+        <v-btn @click="cancel()">
+          Cancel
+        </v-btn>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog
+      :model-value="addNode.isRevealed.value"
+      max-width="600"
+      scrollable
+      @update:model-value="addNode.cancel()"
+    >
+      <v-card>
+        {{ addNode.data.value }}
+      </v-card>
+    </v-dialog>
+
+    <v-dialog
+      :model-value="deleteDeployment.isRevealed.value"
+      max-width="600"
+      scrollable
+      @update:model-value="deleteDeployment.cancel()"
+    >
+      <v-card>
+        <v-btn @click="deleteDeployment.confirm()">
+          Ok
+        </v-btn>
+        <v-btn @click="deleteDeployment.cancel()">
+          Cancel
+        </v-btn>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { HandlersNodeInput, ServicesClusterData } from "~/generated/api"
+
 const api = useApi()
+const toast = useToast()
 
 const { state: deployments, isLoading } = useAsyncState(async () => {
   const { data } = await api.deployments.deploymentsGet()
@@ -76,4 +131,30 @@ const sortByItems = [
   { title: "Created At", value: "createdAt" },
   { title: "Nodes", value: "nodes" },
 ]
+
+const { isRevealed, reveal, confirm, cancel } = useDialog()
+const { execute: deleteDeployments, isLoading: isDeleting } = useAsyncState(async () => {
+  const { data } = await api.deployments.deploymentsDelete()
+  const id = data.data?.task_id
+  if (id && await api.helpers.awaitWorkflowCompletion(id)) {
+    deployments.value = []
+    return toast.success({ message: "Deployments deleted successfully" })
+  }
+  toast.error({ message: data.message ?? "Failed to delete deployments" })
+}, null, { immediate: false })
+
+async function onDeleteAll() {
+  const { isCanceled } = await reveal()
+  if (!isCanceled) {
+    deleteDeployments()
+  }
+}
+
+const addNode = useDialog<ServicesClusterData, HandlersNodeInput>()
+const deleteDeployment = useDialog<ServicesClusterData>()
+
+provide(DeploymentDialogCtxKey, {
+  addNode: d => addNode.reveal(d).then(d => d.data),
+  delete: u => deleteDeployment.reveal(u).then(d => !d.isCanceled),
+})
 </script>