Skip to content

Commit 5ba3f23

Browse files
mms-giannimms-gianni
committed
improve setup process
1 parent 20f667c commit 5ba3f23

File tree

8 files changed

+389
-13
lines changed

8 files changed

+389
-13
lines changed

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
},
1212
"dependencies": {
1313
"@mdi/font": "7.0.96",
14+
"@wdns/vue-code-block": "^2.3.3",
1415
"apexcharts": "^3.49.0",
1516
"axios": "^1.7.4",
1617
"chart.js": "^4.4.1",

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

Lines changed: 162 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,11 @@
33
align="center"
44
justify="space-around"
55
>
6-
<v-card
7-
elevation="10"
8-
width="800px"
9-
class="ma-10"
10-
>
11-
<v-card-text>
12-
<v-stepper v-model="step">
6+
<v-stepper
7+
v-model="step"
8+
elevation="10"
9+
class="ma-10"
10+
width="800px">
1311

1412

1513
<template v-slot:default="{ prev, next }" >
@@ -22,15 +20,21 @@
2220

2321
<v-divider></v-divider>
2422
<v-stepper-item
25-
title="Configure"
23+
title="Save"
2624
value="2"
2725
></v-stepper-item>
2826

2927
<v-divider></v-divider>
3028
<v-stepper-item
31-
title="Download"
29+
title="Check"
3230
value="3"
3331
></v-stepper-item>
32+
33+
<v-divider></v-divider>
34+
<v-stepper-item
35+
title="Download"
36+
value="4"
37+
></v-stepper-item>
3438
</v-stepper-header>
3539

3640
<v-stepper-window>
@@ -145,6 +149,130 @@
145149
</v-row>
146150
</v-card>
147151
</v-stepper-window-item>
152+
<v-stepper-window-item>
153+
<v-card flat>
154+
<v-row>
155+
<v-col cols="12">
156+
<v-alert
157+
title="Kubero Operator"
158+
:type="installedComponents.operator ? 'success' : 'error'"
159+
variant="tonal"
160+
>
161+
<v-row>
162+
<v-col cols="8">
163+
Check if the Kubero operator is installed in your cluster. The operator is responsible for managing the Kubero application.
164+
</v-col>
165+
<v-col cols="4" class="d-flex justify-end">
166+
<v-btn
167+
color="primary"
168+
v-if="!installedComponents.operator"
169+
@click="checkInstalled('operator')"
170+
>
171+
Recheck
172+
</v-btn>
173+
</v-col>
174+
</v-row>
175+
<v-row v-if="!installedComponents.operator">
176+
<v-col cols="12">
177+
<p>Install the operator by running the following command: </p>
178+
<VCodeBlock
179+
code="kubectl apply -f https://github.com/kubernetes-sigs/metrics-server/releases/latest/download/components.yaml"
180+
highlightjs
181+
copy-tab
182+
tabs
183+
:floating-tabs="false"
184+
:run-tab="false"
185+
codeBlockRadius="0.25rem"
186+
lang="javascript"
187+
theme="rainbow"
188+
/>
189+
</v-col>
190+
</v-row>
191+
</v-alert>
192+
</v-col>
193+
</v-row>
194+
<v-row>
195+
<v-col cols="12">
196+
<v-alert
197+
title="Nginx Ingress"
198+
:type="installedComponents.ingress ? 'success' : 'error'"
199+
variant="tonal"
200+
>
201+
<v-row>
202+
<v-col cols="8">
203+
Check if the Nginx Ingress controller is installed in your cluster. The Ingress controller is responsible for routing traffic to the Kubero application.
204+
</v-col>
205+
<v-col cols="4" class="d-flex justify-end">
206+
<v-btn
207+
color="primary"
208+
v-if="!installedComponents.ingress"
209+
@click="checkInstalled('ingress')"
210+
>
211+
Recheck
212+
</v-btn>
213+
</v-col>
214+
</v-row>
215+
<v-row v-if="!installedComponents.ingress">
216+
<v-col cols="12">
217+
<p>Install the Ingress controller by running the following command: </p>
218+
<VCodeBlock
219+
code="kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/main/deploy/static/provider/kind/deploy.yaml"
220+
highlightjs
221+
copy-tab
222+
tabs
223+
:floating-tabs="false"
224+
:run-tab="false"
225+
codeBlockRadius="0.25rem"
226+
lang="javascript"
227+
theme="rainbow"
228+
/>
229+
</v-col>
230+
</v-row>
231+
</v-alert>
232+
</v-col>
233+
</v-row>
234+
<v-row>
235+
<v-col cols="12">
236+
<v-alert
237+
title="Metrics (optional)"
238+
:type="installedComponents.metrics ? 'success' : 'warning'"
239+
variant="tonal"
240+
>
241+
<v-row>
242+
<v-col cols="8">
243+
Check if the metrics server is installed in your cluster. The metrics server is responsible for collecting metrics from the cluster.
244+
</v-col>
245+
<v-col cols="4" class="d-flex justify-end">
246+
<v-btn
247+
color="primary"
248+
v-if="!installedComponents.metrics"
249+
@click="checkInstalled('metrics')"
250+
>
251+
Recheck
252+
</v-btn>
253+
</v-col>
254+
</v-row>
255+
<v-row v-if="!installedComponents.metrics">
256+
<v-col cols="12">
257+
<p>Install the metrics server by running the following command: </p>
258+
<VCodeBlock
259+
code="kubectl apply -f https://github.com/kubernetes-sigs/metrics-server/releases/latest/download/components.yaml"
260+
highlightjs
261+
copy-tab
262+
tabs
263+
:floating-tabs="false"
264+
:run-tab="false"
265+
codeBlockRadius="0.25rem"
266+
lang="javascript"
267+
theme="rainbow"
268+
/>
269+
</v-col>
270+
</v-row>
271+
</v-alert>
272+
</v-col>
273+
</v-row>
274+
</v-card>
275+
</v-stepper-window-item>
148276
<v-stepper-window-item>
149277
<v-card flat>
150278
<v-row>
@@ -188,8 +316,6 @@
188316
</template>
189317

190318
</v-stepper>
191-
</v-card-text>
192-
</v-card>
193319
</v-row>
194320
</template>
195321

@@ -237,10 +363,18 @@ users:
237363
KUBERO_SESSION_KEY: '',
238364
KUBERO_WEBHOOK_SECRET: ''
239365
} as Record<string, string>,
240-
kubeconfigValid: false
366+
kubeconfigValid: false,
367+
installedComponents: {
368+
operator: false,
369+
ingress: false,
370+
metrics: false
371+
},
241372
}
242373
},
243374
computed: {
375+
componentsInstalled() {
376+
return this.installedComponents.operator && this.installedComponents.ingress
377+
},
244378
toDotenv() {
245379
let dotenvFile = ''
246380
for (const key in this.dotenv) {
@@ -260,7 +394,11 @@ users:
260394
return 'next'
261395
}else if (this.saveSuccess == 'ok' && this.step === '2') {
262396
return false
263-
} else if (this.step === '3') {
397+
} else if (!this.componentsInstalled && this.step === '3') {
398+
return 'next'
399+
} else if (this.componentsInstalled && this.step === '3') {
400+
return false
401+
} else if (this.step === '4') {
264402
return 'next'
265403
} else {
266404
return true
@@ -269,6 +407,14 @@ users:
269407
}
270408
},
271409
methods: {
410+
checkInstalled(component: 'operator' | 'ingress' | 'metrics') {
411+
axios.get(`/api/config/setup/check/${component}`)
412+
.then((response) => {
413+
if (response.status === 200 && response.data.status === 'ok') {
414+
this.installedComponents[component] = true
415+
}
416+
})
417+
},
272418
reload() {
273419
// perform a full page reload
274420
window.location.href = '/'
@@ -279,6 +425,9 @@ users:
279425
if (response.status === 200 && response.data.status === 'ok') {
280426
this.saveSuccess = 'ok'
281427
this.saveErrorMessage = ''
428+
this.checkInstalled('operator')
429+
this.checkInstalled('ingress')
430+
this.checkInstalled('metrics')
282431
} else {
283432
this.saveSuccess = 'error'
284433
this.saveErrorMessage = response.data.error

‎client/src/plugins/code-block.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createVCodeBlock } from '@wdns/vue-code-block';
2+
3+
export default createVCodeBlock({
4+
// options
5+
});

‎client/src/plugins/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,16 @@
88
import vuetify from './vuetify'
99
import router from '../router'
1010
import pinia from './pinia'
11+
import vCodeBlock from './code-block'
1112

1213
// Types
1314
import type { App } from 'vue'
1415

1516
export function registerPlugins (app: App) {
1617
app
1718
.use(pinia)
19+
// @ts-ignore: Type missmatch
20+
.use(vCodeBlock)
1821
.use(vuetify)
1922
.use(router)
2023
}

0 commit comments

Comments
 (0)