Add view and download cluster

Author: MohamedElmdary

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

@@ -0,0 +1,86 @@
+<template>
+  <tr class="text-no-wrap py-2">
+    <td class="text-subtitle-2 text-center">
+      <span class="opacity-50">{{ deployment.cluster?.name }}</span>
+    </td>
+
+    <td class="text-subtitle-2 text-center">
+      <span class="opacity-50">{{ deployment.cluster?.nodes.length }}</span>
+    </td>
+
+    <td class="text-subtitle-2 text-center">
+      <span class="opacity-50">{{ createdAt }}</span>
+    </td>
+
+    <td>
+      <div class="d-flex justify-center align-center ga-4">
+        <v-btn
+          variant="plain"
+          border
+          prepend-icon="mdi-eye-outline"
+          size="small"
+          text="View"
+          :to="ROUTES.Dashboard.Clusters(deployment.cluster?.name)"
+        />
+
+        <v-btn
+          variant="text"
+          border
+          prepend-icon="mdi-download-outline"
+          size="small"
+          text="Download"
+          :loading="downloading"
+          :href="binary"
+          :download="`${deployment.cluster?.name}-kubeconfig.yaml`"
+        />
+
+        <v-btn
+          variant="text"
+          border
+          prepend-icon="mdi-plus"
+          size="small"
+          text="Add Node"
+          color="primary"
+          @click="console.log('add node')"
+        />
+
+        <v-btn
+          variant="text"
+          border
+          prepend-icon="mdi-trash-can-outline"
+          size="small"
+          text="Delete"
+          color="error"
+          @click="console.log('delete cluster')"
+        />
+      </div>
+    </td>
+  </tr>
+</template>
+
+<script setup lang="ts">
+import type { ServicesClusterData } from "~/generated/api"
+
+const props = defineProps<{ deployment: ServicesClusterData }>()
+defineEmits<{ (e: "view"): void }>()
+
+const createdAt = useDateFormat(() => props.deployment.created_at, DATE_FORMAT)
+
+const api = useApi()
+
+const { state: kubeconfig, isLoading: downloading } = useAsyncState(
+  () => api.helpers.getKubeconfig(props.deployment.cluster?.name ?? ""),
+  "",
+)
+
+const binary = computed(() => {
+  const data = kubeconfig.value
+
+  if (!data) {
+    return ""
+  }
+
+  const blob = new Blob([data], { type: "application/json" })
+  return URL.createObjectURL(blob)
+})
+</script>

frontend/kubecloud-v2/composables/api.ts

@@ -102,6 +102,7 @@ export const useApi = createGlobalState(() => {
 
 class ApiHelpers {
   private readonly twinToAccountId: { [twinId: number]: string }
+  private readonly clusterToKubeconfig: { [clusterId: string]: string }
 
   constructor(
     private readonly admin: AdminApi,
@@ -114,6 +115,7 @@ class ApiHelpers {
     private readonly workflow: WorkflowApi,
   ) {
     this.twinToAccountId = {}
+    this.clusterToKubeconfig = {}
   }
 
   public async awaitWorkflowCompletion(workflowId: string): Promise<boolean> {
@@ -144,4 +146,14 @@ class ApiHelpers {
     this.twinToAccountId[twinId] = accountId
     return accountId
   }
+
+  public async getKubeconfig(clusterName: string): Promise<string> {
+    if (clusterName in this.clusterToKubeconfig) {
+      return this.clusterToKubeconfig[clusterName]!
+    }
+
+    const { data } = await this.deployments.deploymentsNameKubeconfigGet(clusterName)
+    this.clusterToKubeconfig[clusterName] = data.data?.kubeconfig ?? ""
+    return data.data?.kubeconfig ?? ""
+  }
 }

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

@@ -1,21 +1,79 @@
 <template>
   <div>
-    <h1>Dashboard Clusters {{ isLoading }}</h1>
+    <div class="mb-8">
+      <h1 class="text-h5 font-weight-bold">
+        Kubernetes Clusters
+      </h1>
+      <p class="text-body-2 mt-1 text-accent">
+        Manage your cloud-native infrastructure
+      </p>
+    </div>
 
-    <VBtn :to="ROUTES.Dashboard.Clusters.Deploy()" text="Deploy Cluster" />
-    <VBtn :to="ROUTES.Dashboard.Clusters('123')" text="Deploy Cluster" />
+    <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-trash-can-outline"
+        color="error"
+        variant="text"
+        text="Delete All"
+        border
+        class="border-error"
+        :style="{ '--v-border-opacity': '0.3' }"
+      />
+    </div>
 
-    <pre>
-        {{ state }}
-      </pre>
+    <v-row class="mb-4">
+      <v-col cols="9">
+        <v-text-field
+          label="Search by name"
+          placeholder="Search by name"
+          prepend-inner-icon="mdi-magnify"
+          variant="outlined"
+          density="compact"
+          hide-details
+        />
+      </v-col>
+
+      <v-col cols="3">
+        <v-select
+          label="Sort By"
+          :items="sortByItems"
+          variant="outlined"
+          density="compact"
+          hide-details
+          clearable
+        />
+      </v-col>
+    </v-row>
+
+    <v-data-table
+      :headers="[
+        { title: 'Name', key: 'name', align: 'center', sortable: false },
+        { title: 'Nodes', key: 'nodes', align: 'center', sortable: false },
+        { title: 'Created At', key: 'createdAt', align: 'center', sortable: false },
+        { title: 'Actions', key: 'actions', align: 'center', sortable: false },
+      ]"
+      :items="deployments"
+      :loading="isLoading"
+    >
+      <template #item="{ item }">
+        <DeploymentRow :deployment="item" />
+      </template>
+    </v-data-table>
   </div>
 </template>
 
 <script setup lang="ts">
 const api = useApi()
 
-const { state, isLoading } = useAsyncState(async () => {
+const { state: deployments, isLoading } = useAsyncState(async () => {
   const { data } = await api.deployments.deploymentsGet()
-  return data
-}, null)
+  return data.data?.deployments ?? []
+}, [])
+
+const sortByItems = [
+  { title: "Name", value: "name" },
+  { title: "Created At", value: "createdAt" },
+  { title: "Nodes", value: "nodes" },
+]
 </script>