Skip to content

Commit b874b2f

Browse files
mms-giannimms-gianni
committed
Merge branch 'main' of github.com:kubero-dev/kubero
2 parents 893319c + 30ff7d6 commit b874b2f

8 files changed

Lines changed: 514 additions & 2 deletions

File tree

‎client/src/components/podsizes/index.vue‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
<template>
2+
<v-container>
3+
<v-row>
4+
<v-col cols="12" md="12" lg="8">
5+
<v-expansion-panels multiple elevation="0" class="mb-6">
6+
<v-expansion-panel>
7+
<v-expansion-panel-title class="text-h6 font-weight-bold">What are PodSizes?</v-expansion-panel-title>
8+
<v-expansion-panel-text>
9+
<p>
10+
<strong>PodSizes</strong> define the resource requests and limits for your application's pods in Kubero. You can create, edit, and delete pod sizes to match your workload requirements.
11+
</p>
12+
<p class="mt-2">
13+
<a href="https://www.kubero.dev/docs/usermanual/podsizes/" target="_blank" rel="noopener">Read more in the Kubero documentation</a>
14+
</p>
15+
</v-expansion-panel-text>
16+
</v-expansion-panel>
17+
</v-expansion-panels>
18+
</v-col>
19+
</v-row>
20+
<v-data-table
21+
:headers="headers"
22+
:items="podsizes"
23+
:loading="loading"
24+
class="elevation-0 border-0"
25+
item-key="id"
26+
item-value="name"
27+
:search="search"
28+
show-expand
29+
>
30+
<template v-slot:[`item.name`]="{ item }">
31+
<span>{{ item.name }}</span>
32+
</template>
33+
<template v-slot:[`item.description`]="{ item }">
34+
<span>{{ item.description }}</span>
35+
</template>
36+
<template v-slot:[`item.resources`]="{ item }">
37+
<span>
38+
Requests: CPU {{ item.resources.requests.cpu }}, Mem {{ item.resources.requests.memory }}<br>
39+
Limits: CPU {{ item.resources.limits.cpu }}, Mem {{ item.resources.limits.memory }}
40+
</span>
41+
</template>
42+
<template v-slot:[`item.actions`]="{ item }">
43+
<v-btn elevation="0" variant="tonal" size="small" class="ma-2" @click="openEditDialog(item)">
44+
<v-icon color="primary">mdi-pencil</v-icon>
45+
</v-btn>
46+
<v-btn elevation="0" variant="tonal" size="small" class="ma-2" @click="deletePodsize(item)">
47+
<v-icon color="primary">mdi-delete</v-icon>
48+
</v-btn>
49+
</template>
50+
<template v-slot:expanded-row="{ columns, item }">
51+
<tr>
52+
<td :colspan="columns.length" style="padding:0;">
53+
<v-card class="ma-2 pa-2" outlined color="cardBackground">
54+
<v-row>
55+
<v-col cols="12" md="6">
56+
<v-list density="compact" style="background: inherit;">
57+
<v-list-item>
58+
<v-list-item-title class="font-weight-bold">Requests</v-list-item-title>
59+
</v-list-item>
60+
<v-list-item>
61+
<v-list-item-subtitle>CPU</v-list-item-subtitle>
62+
<v-list-item-title>{{ item.resources.requests.cpu }}</v-list-item-title>
63+
</v-list-item>
64+
<v-list-item>
65+
<v-list-item-subtitle>Memory</v-list-item-subtitle>
66+
<v-list-item-title>{{ item.resources.requests.memory }}</v-list-item-title>
67+
</v-list-item>
68+
</v-list>
69+
</v-col>
70+
<v-col cols="12" md="6">
71+
<v-list density="compact" style="background: inherit;">
72+
<v-list-item>
73+
<v-list-item-title class="font-weight-bold">Limits</v-list-item-title>
74+
</v-list-item>
75+
<v-list-item>
76+
<v-list-item-subtitle>CPU</v-list-item-subtitle>
77+
<v-list-item-title>{{ item.resources.limits.cpu }}</v-list-item-title>
78+
</v-list-item>
79+
<v-list-item>
80+
<v-list-item-subtitle>Memory</v-list-item-subtitle>
81+
<v-list-item-title>{{ item.resources.limits.memory }}</v-list-item-title>
82+
</v-list-item>
83+
</v-list>
84+
</v-col>
85+
</v-row>
86+
<v-divider class="my-2"></v-divider>
87+
<v-row>
88+
<v-col cols="12">
89+
<v-list density="compact" style="background: inherit;">
90+
<v-list-item>
91+
<v-list-item-title class="font-weight-bold">Description</v-list-item-title>
92+
</v-list-item>
93+
<v-list-item>
94+
<v-list-item-title>{{ item.description }}</v-list-item-title>
95+
</v-list-item>
96+
</v-list>
97+
</v-col>
98+
</v-row>
99+
</v-card>
100+
</td>
101+
</tr>
102+
</template>
103+
</v-data-table>
104+
<div style="display: flex; justify-content: flex-end; margin-top: 16px;">
105+
<v-btn fab color="primary" style="margin-right: 6px;" @click="openCreateDialog">
106+
<v-icon>mdi-plus</v-icon>
107+
<span class="sr-only">Create PodSize</span>
108+
</v-btn>
109+
</div>
110+
<v-dialog v-model="editDialog" max-width="600px">
111+
<v-card>
112+
<v-card-title>Edit PodSize</v-card-title>
113+
<v-card-text v-if="editedPodsize">
114+
<v-text-field v-model="editedPodsize.name" label="Name"></v-text-field>
115+
<v-text-field v-model="editedPodsize.description" label="Description"></v-text-field>
116+
<v-text-field v-model="editedPodsize.resources.requests.cpu" label="Requests CPU"></v-text-field>
117+
<v-text-field v-model="editedPodsize.resources.requests.memory" label="Requests Memory"></v-text-field>
118+
<v-text-field v-model="editedPodsize.resources.limits.cpu" label="Limits CPU"></v-text-field>
119+
<v-text-field v-model="editedPodsize.resources.limits.memory" label="Limits Memory"></v-text-field>
120+
</v-card-text>
121+
<v-card-text v-else>
122+
<v-alert type="error" dismissible>
123+
Error loading podsize details for editing.
124+
</v-alert>
125+
</v-card-text>
126+
<v-card-actions>
127+
<v-spacer />
128+
<v-btn text @click="editDialog = false">Abort</v-btn>
129+
<v-btn color="primary" @click="saveEdit">Save</v-btn>
130+
</v-card-actions>
131+
</v-card>
132+
</v-dialog>
133+
<v-dialog v-model="createDialog" max-width="600px">
134+
<v-card>
135+
<v-card-title>Create PodSize</v-card-title>
136+
<v-card-text>
137+
<v-text-field v-model="newPodsize.name" label="Name"></v-text-field>
138+
<v-text-field v-model="newPodsize.description" label="Description"></v-text-field>
139+
<v-text-field v-model="newPodsize.resources.requests.cpu" label="Requests CPU"></v-text-field>
140+
<v-text-field v-model="newPodsize.resources.requests.memory" label="Requests Memory"></v-text-field>
141+
<v-text-field v-model="newPodsize.resources.limits.cpu" label="Limits CPU"></v-text-field>
142+
<v-text-field v-model="newPodsize.resources.limits.memory" label="Limits Memory"></v-text-field>
143+
</v-card-text>
144+
<v-card-actions>
145+
<v-spacer />
146+
<v-btn text @click="createDialog = false">Abort</v-btn>
147+
<v-btn color="primary" @click="saveCreate">Create</v-btn>
148+
</v-card-actions>
149+
</v-card>
150+
</v-dialog>
151+
</v-container>
152+
</template>
153+
154+
<script lang="ts">
155+
import { defineComponent, ref, onMounted } from 'vue'
156+
import axios from 'axios'
157+
158+
export default defineComponent({
159+
name: 'PodsizeList',
160+
setup() {
161+
type PodsizeResources = {
162+
requests: { cpu: string; memory: string }
163+
limits: { cpu: string; memory: string }
164+
}
165+
type Podsize = {
166+
id?: string
167+
name: string
168+
description: string
169+
resources: PodsizeResources
170+
}
171+
const podsizes = ref<Podsize[]>([])
172+
const loading = ref(false)
173+
const search = ref('')
174+
const editDialog = ref(false)
175+
const createDialog = ref(false)
176+
const editedPodsize = ref<Podsize | null>(null)
177+
const newPodsize = ref<Podsize>({
178+
name: '',
179+
description: '',
180+
resources: {
181+
requests: { cpu: '', memory: '' },
182+
limits: { cpu: '', memory: '' },
183+
},
184+
})
185+
const headers = [
186+
{ title: 'Name', value: 'name' },
187+
{ title: 'Description', value: 'description' },
188+
//{ title: 'Resources', value: 'resources' },
189+
{ title: 'Actions', value: 'actions', sortable: false, align: 'end' as const },
190+
]
191+
const loadPodsizes = async () => {
192+
loading.value = true
193+
try {
194+
const res = await axios.get('/api/config/podsizes')
195+
podsizes.value = res.data
196+
} catch (e) {
197+
podsizes.value = []
198+
}
199+
loading.value = false
200+
}
201+
const openEditDialog = (podsize: any) => {
202+
editedPodsize.value = JSON.parse(JSON.stringify(podsize))
203+
editDialog.value = true
204+
}
205+
const saveEdit = async () => {
206+
try {
207+
await axios.put(`/api/config/podsizes/${editedPodsize?.value?.id }`, editedPodsize.value)
208+
await loadPodsizes()
209+
editDialog.value = false
210+
} catch (e) {
211+
console.error('Error saving podsize:', e)
212+
}
213+
}
214+
const deletePodsize = async (podsize: any) => {
215+
try {
216+
await axios.delete(`/api/config/podsizes/${podsize.id}`)
217+
await loadPodsizes()
218+
} catch (e) {
219+
console.error('Error deleting podsize:', e)
220+
}
221+
}
222+
const openCreateDialog = () => {
223+
newPodsize.value = {
224+
name: '',
225+
description: '',
226+
resources: {
227+
requests: { cpu: '', memory: '' },
228+
limits: { cpu: '', memory: '' },
229+
},
230+
}
231+
createDialog.value = true
232+
}
233+
const saveCreate = async () => {
234+
try {
235+
const payload = JSON.parse(JSON.stringify(newPodsize.value))
236+
delete payload.id
237+
await axios.post('/api/config/podsizes', payload)
238+
await loadPodsizes()
239+
createDialog.value = false
240+
} catch (e) {
241+
console.error('Error creating podsize:', e)
242+
}
243+
}
244+
onMounted(() => {
245+
loadPodsizes()
246+
})
247+
return {
248+
podsizes,
249+
headers,
250+
loading,
251+
search,
252+
openEditDialog,
253+
deletePodsize,
254+
editDialog,
255+
editedPodsize,
256+
saveEdit,
257+
createDialog,
258+
newPodsize,
259+
openCreateDialog,
260+
saveCreate,
261+
}
262+
},
263+
})
264+
</script>
265+
266+
<style scoped>
267+
</style>

‎client/src/components/runpacks/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<v-container>
44
<v-row>
5-
<v-col cols="12" md="10" lg="8">
5+
<v-col cols="12" md="12" lg="8">
66
<v-expansion-panels multiple elevation="0" class="mb-6">
77
<v-expansion-panel>
88
<v-expansion-panel-title class="text-h6 font-weight-bold">What are Runpacks?</v-expansion-panel-title>

‎client/src/router/index.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,17 @@ const routes = [
119119
},
120120
],
121121
},
122+
{
123+
path: '/podsizes',
124+
component: () => import('@/layouts/default/Default.vue'),
125+
children: [
126+
{
127+
path: '/podsizes',
128+
name: 'Pod Sizes',
129+
component: () => import('@/views/Podsizes.vue'),
130+
},
131+
],
132+
},
122133
{
123134
path: '/login',
124135
component: () => import('@/layouts/login/Login.vue'),

‎client/src/views/Podsizes.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<PodsizesList />
3+
</template>
4+
5+
<script lang="ts" setup>
6+
import PodsizesList from '@/components/podsizes/index.vue'
7+
</script>

0 commit comments

Comments
 (0)