Skip to content

Commit 2e2ccc3

Browse files
MohamedElmdaryMohamedElmdary
committed
added parts of dploy page
1 parent 49185df commit 2e2ccc3

File tree

11 files changed

+339
-77
lines changed

11 files changed

+339
-77
lines changed

‎frontend/kubecloud-v2/components/deploy-cluster/define/DefineVMNodeForm.vue‎

Lines changed: 58 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
<template>
22
<v-row>
33
<v-col cols="12" class="pb-0">
4-
<v-text-field v-model="$props.node.name" variant="outlined" label="Node Name" />
4+
<v-text-field
5+
v-model="$props.node.name"
6+
:rules="[
7+
(v) => !!v || 'Node name is required',
8+
(v) => v.length >= 3 || 'Node name must be at least 3 characters',
9+
]"
10+
variant="outlined"
11+
label="Node Name"
12+
/>
513
</v-col>
614

715
<v-col cols="12">
@@ -15,7 +23,20 @@
1523
</p>
1624
</div>
1725

18-
<v-switch v-model="$props.node.useFullNodeCapabilities" color="primary" inset hide-details />
26+
<v-switch
27+
:model-value="$props.node.useFullNodeCapabilities"
28+
color="primary"
29+
inset
30+
hide-details
31+
@update:model-value="e => {
32+
$props.node.useFullNodeCapabilities = e ?? false
33+
if (e) {
34+
$props.node.cpu = 2
35+
$props.node.memory = 4
36+
$props.node.disk = 25
37+
}
38+
}"
39+
/>
1940
</div>
2041
</v-col>
2142

@@ -24,15 +45,39 @@
2445
<v-col cols="12" class="pb-0">
2546
<v-row>
2647
<v-col cols="4" class="pb-0">
27-
<v-text-field v-model="$props.node.cpu" variant="outlined" label="CPU (vCores)" />
48+
<v-text-field
49+
v-model="$props.node.cpu"
50+
:rules="[
51+
(v) => !!v || 'CPU is required',
52+
(v) => v > 0 || 'CPU must be greater than 0',
53+
]"
54+
variant="outlined"
55+
label="CPU (vCores)"
56+
/>
2857
</v-col>
2958

3059
<v-col cols="4" class="pb-0">
31-
<v-text-field v-model="$props.node.memory" variant="outlined" label="RAM (GB)" />
60+
<v-text-field
61+
v-model="$props.node.memory"
62+
:rules="[
63+
(v) => !!v || 'RAM is required',
64+
(v) => v > 0 || 'RAM must be greater than 0',
65+
]"
66+
variant="outlined"
67+
label="RAM (GB)"
68+
/>
3269
</v-col>
3370

3471
<v-col cols="4" class="pb-0">
35-
<v-text-field v-model="$props.node.disk" variant="outlined" label="Disk Size (GB)" />
72+
<v-text-field
73+
v-model="$props.node.disk"
74+
:rules="[
75+
(v) => !!v || 'Disk size is required',
76+
(v) => v > 0 || 'Disk size must be greater than 0',
77+
]"
78+
variant="outlined"
79+
label="Disk Size (GB)"
80+
/>
3681
</v-col>
3782
</v-row>
3883
</v-col>
@@ -57,10 +102,14 @@
57102
</v-chip>
58103
</v-chip-group>
59104
</v-col>
60-
<p v-if="node.sshKeys.length === 0" class="text-error text-caption">
61-
<v-icon icon="mdi-alert-circle" size="small" color="error" />
62-
Please select at least one SSH key
63-
</p>
105+
106+
<v-expand-transition>
107+
<div v-if="node.sshKeys.length === 0" class="w-100">
108+
<v-alert type="error" variant="tonal">
109+
Please select at least one SSH key
110+
</v-alert>
111+
</div>
112+
</v-expand-transition>
64113
</v-row>
65114
</template>
66115

‎frontend/kubecloud-v2/components/deploy-cluster/define/DefineVMsClusterName.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</h3>
66

77
<v-text-field
8-
:model-value="modelValue"
8+
:model-value="$props.modelValue"
99
variant="outlined"
1010
label="Cluster Name"
1111
placeholder="Enter cluster name"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
node-type="Master"
1111
:ssh-keys="sshKeys"
1212
:nodes="$props.modelValue.masters"
13-
@add-node="$props.modelValue.masters.push(createClusterNode())"
13+
@add-node="$props.modelValue.masters.push(createClusterNode({ type: 'master' }))"
1414
@remove-node="$props.modelValue.masters = $props.modelValue.masters.filter(master => master.id !== $event)"
1515
/>
1616
</v-col>

‎frontend/kubecloud-v2/components/deploy-cluster/define/DefineVMsNodes.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
<v-tab v-for="node in nodes" :key="node.id" :value="node.id" :class="{ 'text-error': !isValidClusterNode(node) }">
3636
{{ node.name || '*Unnamed' }}
3737

38-
<template v-if="!node.permanent" #append>
38+
<template v-if="node.type !== 'leader'" #append>
3939
<v-btn
4040
icon
4141
size="x-small"

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<v-row>
3+
<v-col cols="12">
4+
<PlaceVMsHead />
5+
</v-col>
6+
7+
<v-col cols="12">
8+
<PlaceVMsNodes :cluster="$props.modelValue" />
9+
</v-col>
10+
11+
<!-- <v-col cols="6">
12+
<DefineVMsNodes
13+
icon="mdi-server"
14+
node-type="Master"
15+
:ssh-keys="sshKeys"
16+
:nodes="$props.modelValue.masters"
17+
@add-node="$props.modelValue.masters.push(createClusterNode())"
18+
@remove-node="$props.modelValue.masters = $props.modelValue.masters.filter(master => master.id !== $event)"
19+
/>
20+
</v-col>
21+
22+
<v-col cols="6">
23+
<DefineVMsNodes
24+
icon="mdi-console"
25+
node-type="Worker"
26+
:ssh-keys="sshKeys"
27+
:nodes="$props.modelValue.workers"
28+
@add-node="$props.modelValue.workers.push(createClusterNode())"
29+
@remove-node="$props.modelValue.workers = $props.modelValue.workers.filter(worker => worker.id !== $event)"
30+
/>
31+
</v-col> -->
32+
</v-row>
33+
</template>
34+
35+
<script setup lang="ts">
36+
defineProps<{ modelValue: ClusterForm }>()
37+
38+
// const api = useApi()
39+
// const { state: sshKeys } = useAsyncState(async () => {
40+
// const { data } = await api.users.listSshKeys()
41+
// return data.data ?? []
42+
// }, [])
43+
</script>

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<v-card>
3+
<h3 class="text-h6 font-weight-bold">
4+
Assign VMs to Nodes
5+
</h3>
6+
<p class="text-caption text-accent mb-6">
7+
Select nodes to host your cluster VMs
8+
</p>
9+
10+
<v-alert
11+
type="info"
12+
variant="tonal"
13+
title="50% Discount Available!"
14+
text="Reserve a node to get 50% discount and exclusive usage. Shared nodes are available at full price."
15+
class="mb-8"
16+
>
17+
<div class="d-flex justify-end">
18+
<v-btn
19+
class="mt-2"
20+
text="Reserve Node"
21+
append-icon="mdi-arrow-right"
22+
variant="plain"
23+
color="white"
24+
border
25+
:to="ROUTES.Dashboard.MyNodes.Explorer()"
26+
/>
27+
</div>
28+
</v-alert>
29+
30+
<v-select
31+
label="Filter By Region"
32+
placeholder="Pick a region"
33+
clearable
34+
:items="['Europe', 'Asia', 'America', 'Africa', 'Australia']"
35+
variant="outlined"
36+
density="compact"
37+
hide-details
38+
/>
39+
</v-card>
40+
</template>
41+
42+
<script setup lang="ts">
43+
// defineProps<{ modelValue: string }>()
44+
// defineEmits<{ (e: "update:modelValue", value: string): void }>()
45+
</script>

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div class="border rounded-xl pa-4 border-dashed">
3+
<div class="d-flex align-center ga-2">
4+
<h5 class="text-h6 font-weight-bold" v-text="modelValue.name" />
5+
<v-chip color="primary" size="x-small" :text="modelValue.type" class="rounded font-weight-bold text-caption text-capitalize" />
6+
</div>
7+
8+
<v-chip
9+
v-if="modelValue.useFullNodeCapabilities"
10+
color="success"
11+
size="small"
12+
prepend-icon="mdi-check-decagram"
13+
class="font-weight-bold mt-2"
14+
>
15+
Use Full Node Capabilities
16+
</v-chip>
17+
18+
<div v-else class="d-flex align-center flex-wrap ga-2 mt-2">
19+
<v-chip size="small" prepend-icon="mdi-cpu-64-bit" color="primary" class="font-weight-bold">
20+
CPU: {{ modelValue.cpu }} vCores
21+
</v-chip>
22+
<v-chip size="small" prepend-icon="mdi-memory" color="success" class="font-weight-bold">
23+
RAM: {{ modelValue.memory }} GB
24+
</v-chip>
25+
<v-chip size="small" prepend-icon="mdi-server" color="secondary" class="font-weight-bold">
26+
Disk Size: {{ modelValue.disk }} GB
27+
</v-chip>
28+
</div>
29+
30+
<v-select
31+
class="mt-8"
32+
label="Select Node"
33+
placeholder="pick a node"
34+
:items="['node 1', 'node 2']"
35+
density="compact"
36+
variant="outlined"
37+
/>
38+
</div>
39+
</template>
40+
41+
<script setup lang="ts">
42+
defineProps<{ modelValue: ClusterNode }>()
43+
</script>

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<v-card>
3+
<div class="d-flex align-center justify-space-between mb-8">
4+
<h3 class="d-flex align-center ga-2">
5+
<v-icon icon="mdi-sitemap-outline" size="x-small" color="primary" />
6+
Cluster Nodes
7+
</h3>
8+
</div>
9+
10+
<v-row>
11+
<v-col v-for="(node, idx) in cluster.masters" :key="node.id" cols="6">
12+
<PlaceVMsNode v-model="$props.cluster.masters[idx]!" />
13+
</v-col>
14+
15+
<v-col v-for="(node, idx) in cluster.workers" :key="node.id" cols="6">
16+
<PlaceVMsNode v-model="$props.cluster.workers[idx]!" />
17+
</v-col>
18+
</v-row>
19+
</v-card>
20+
</template>
21+
22+
<script setup lang="ts">
23+
defineProps<{ cluster: ClusterForm }>()
24+
</script>

0 commit comments

Comments
 (0)