Skip to content

Commit 5cc23c1

Browse files
dmsej108dmsej108
committed
yaml generator Add modal
1 parent 2bca998 commit 5cc23c1

File tree

9 files changed

+422
-394
lines changed

9 files changed

+422
-394
lines changed

‎applicationFE/src/api/yaml.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const generateYamlService = (param:Pod) => {
1313

1414
// HPA YAML
1515
export const generateYamlHpa = (param:Hpa) => {
16-
return request.post('/yaml/hpa', param)
16+
return request.post('/manifest/v1/generator/yaml/hpa', param)
1717
}
1818

1919
// deployment YAML
@@ -23,5 +23,5 @@ export const generateYamlDeployment = (param:Deployment) => {
2323

2424
// configmap YAML
2525
export const generateYamlConfigmap = (param:Deployment) => {
26-
return request.post('/yaml/configmap', param)
26+
return request.post('/manifest/v1/generator/yaml/configmap', param)
2727
}

‎applicationFE/src/views/generate/components/configMapModal.vue

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<div class="modal" id="modal-config-map" tabindex="-1">
3+
<div class="modal-dialog modal-lg" role="document">
4+
<div class="modal-content">
5+
<div class="modal-header">
6+
<h5 class="modal-title">{{ props.title }}</h5>
7+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
8+
</div>
9+
<div class="modal-body">
10+
<div class="card">
11+
<div class="card-body">
12+
<h4>YAML</h4>
13+
<div>
14+
<pre>{{ data }}</pre>
15+
</div>
16+
</div>
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
</div>
22+
</template>
23+
24+
<script setup lang="ts">
25+
import { onMounted, computed, watch } from 'vue';
26+
import { ref } from 'vue';
27+
import { useToast } from 'vue-toastification';
28+
29+
interface Props {
30+
title: string
31+
yamlData: string
32+
}
33+
const props = defineProps<Props>()
34+
const yamlData = computed(() => props.yamlData)
35+
watch(yamlData, async () => {
36+
await setData();
37+
});
38+
39+
const data = ref("" as string)
40+
41+
const setData = async () => {
42+
data.value = props.yamlData
43+
}
44+
45+
</script>

‎applicationFE/src/views/generate/components/configmapForm.vue

Lines changed: 100 additions & 184 deletions
Large diffs are not rendered by default.

‎applicationFE/src/views/generate/components/deploymentForm.vue

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -146,12 +146,12 @@ import { useToast } from 'vue-toastification';
146146
* @Title formData
147147
* @Desc pod 데이터
148148
*/
149-
const deploymentFormData = reactive({} as Deployment)
150-
const deploymentLabels = ref([])
151-
const deploySelector = ref([])
152-
const deployContainerPort = ref([])
153-
const deployEnv = ref([])
154-
const deployVoumeMounts = ref([])
149+
const deploymentFormData = ref({} as Deployment)
150+
const deploymentLabels = ref([] as any)
151+
const deploySelector = ref([] as any)
152+
const deployContainerPort = ref([] as any)
153+
const deployEnv = ref([] as any)
154+
const deployVoumeMounts = ref([] as any)
155155
156156
onMounted(async () => {
157157
await setInit();
@@ -163,18 +163,18 @@ const setInit = () => {
163163
deployContainerPort.value.push({portNum: "", name:""})
164164
deployEnv.value.push({name: "", value:""})
165165
deployVoumeMounts.value.push({mountPath: "", name:""})
166-
deploymentFormData.deployName = ""
167-
deploymentFormData.namespace = ""
168-
deploymentFormData.image = ""
166+
deploymentFormData.value.deployName = ""
167+
deploymentFormData.value.namespace = ""
168+
deploymentFormData.value.image = ""
169169
}
170170
171171
const onClickDeploy = () => {
172172
console.log("onClickDeploy")
173-
deploymentFormData.labels = deploymentLabels.value
174-
deploymentFormData.selector = deploySelector.value
175-
deploymentFormData.containerPort = deployContainerPort.value
176-
deploymentFormData.env = deployEnv.value
177-
deploymentFormData.volumeMounts = deployVoumeMounts.value
173+
deploymentFormData.value.labels = deploymentLabels.value
174+
deploymentFormData.value.selector = deploySelector.value
175+
deploymentFormData.value.containerPort = deployContainerPort.value
176+
deploymentFormData.value.env = deployEnv.value
177+
deploymentFormData.value.volumeMounts = deployVoumeMounts.value
178178
179179
const param = { ...deploymentFormData }
180180

‎applicationFE/src/views/generate/components/hpaForm.vue

Lines changed: 111 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,93 @@
11
<template>
22
<div class="tab-pane" id="tabs-hpa">
3-
<div class="mb-3">
4-
<label class="form-label">HPA Name</label>
5-
<input type="text" class="form-control w-33" name="example-text-input" v-model="hpaFormData.hpaName" placeholder="name" />
6-
</div>
7-
<div class="mb-3">
8-
<label class="form-label">Namespace</label>
9-
<input type="text" class="form-control w-33" name="example-text-input" v-model="hpaFormData.namespace" placeholder="namespace" />
10-
</div>
11-
<div class="mb-3">
12-
<label class="form-label">Labels</label>
13-
<div class="generate-form" v-for="(item, idx) in hpaLabels" :key="idx">
14-
<input type="text" class="form-control w-33" name="example-password-input" v-model="item.key" placeholder="key" />
15-
<input type="text" class="form-control w-33" name="example-password-input" v-model="item.value" placeholder="value" />
16-
<div class="btn-list">
17-
<button class="btn btn-primary" @click="addLabel" style="text-align: center !important;">
18-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plus" style="margin: 0 !important;">
19-
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
20-
<path d="M12 5l0 14" />
21-
<path d="M5 12l14 0" />
22-
</svg>
23-
</button>
24-
<button class="btn btn-primary" @click="removeLabel(idx)">
25-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus" style="margin: 0 !important;">
26-
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
27-
<path d="M5 12l14 0" />
28-
</svg>
29-
</button>
3+
<div class="card">
4+
<div class="card-header">
5+
<h3 class="card-title">Metadata 영역</h3>
6+
</div>
7+
<div class="card-body">
8+
<div class="mb-3">
9+
<label class="form-label required">HPA Name</label>
10+
<input type="text" class="form-control w-33" name="example-text-input" v-model="metadata.name" placeholder="name" />
11+
</div>
12+
<div class="mb-3">
13+
<label class="form-label required">Namespace</label>
14+
<input type="text" class="form-control w-33" name="example-text-input" v-model="metadata.namespace" placeholder="namespace" />
15+
</div>
16+
<div class="mb-3">
17+
<label class="form-label required">Labels</label>
18+
<div class="generate-form" v-for="(item, idx) in hpaLabels" :key="idx">
19+
<input type="text" class="form-control w-33" name="example-password-input" v-model="item.key" placeholder="key" />
20+
<input type="text" class="form-control w-33" name="example-password-input" v-model="item.value" placeholder="value" />
21+
<div class="btn-list">
22+
<button class="btn btn-primary" @click="addLabel" style="text-align: center !important;">
23+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plus" style="margin: 0 !important;">
24+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
25+
<path d="M12 5l0 14" />
26+
<path d="M5 12l14 0" />
27+
</svg>
28+
</button>
29+
<button class="btn btn-primary" @click="removeLabel(idx)">
30+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus" style="margin: 0 !important;">
31+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
32+
<path d="M5 12l14 0" />
33+
</svg>
34+
</button>
35+
</div>
36+
</div>
3037
</div>
3138
</div>
3239
</div>
33-
<div class="mb-3">
34-
<label class="form-label">Target</label>
35-
<div class="generate-form" >
36-
<select class="form-select" v-model="target.kind" style="width:33% !important">
37-
<option value="deployment">Deployment</option>
38-
</select>
39-
<input type="text" class="form-control w-33" name="example-password-input" v-model="target.name" placeholder="name" />
40+
41+
<div class="card mt-4">
42+
<div class="card-header">
43+
<h3 class="card-title">Spec 영역</h3>
4044
</div>
41-
</div>
42-
<div class="mb-3">
43-
<label class="form-label">Min Replicas</label>
44-
<input type="number" class="form-control w-33" name="example-text-input" v-model="hpaFormData.minReplicas" placeholder="image" />
45-
</div>
46-
<div class="mb-3">
47-
<label class="form-label">Max Replicas</label>
48-
<input type="number" class="form-control w-33" name="example-text-input" v-model="hpaFormData.maxReplicas" placeholder="image" />
49-
</div>
50-
<div class="mb-3">
51-
<label class="form-label">Metric</label>
52-
<div class="generate-form">
53-
<select class="form-select" v-model="metric.type" style="width:33% !important">
54-
<option value="cpu">CPU</option>
55-
<option value="memory">MEMORY</option>
56-
</select>
57-
<input type="number" class="form-control w-33" name="example-password-input" v-model="metric.targetAverageUtilization" placeholder="value" max="100" />
45+
<div class="card-body">
46+
<div class="mb-3">
47+
<label class="form-label">Scale Target</label>
48+
</div>
49+
<div class="row" style="width:68% !important">
50+
<div class="col">
51+
<label class="form-label required">Api Version</label>
52+
<input type="text" class="form-control" v-model="scaleTargetRef.apiVersion" />
53+
</div>
54+
<div class="col">
55+
<label class="form-label required">Kind</label>
56+
<input type="text" class="form-control" v-model="scaleTargetRef.kind" />
57+
</div>
58+
</div>
59+
<div class="row" style="width:68% !important">
60+
<div class="col">
61+
<label class="form-label required">Name</label>
62+
<input type="text" class="form-control" v-model="scaleTargetRef.name" />
63+
</div>
64+
</div>
65+
<div class="row" style="width:68% !important">
66+
<div class="col">
67+
<label class="form-label required">Min Replicas</label>
68+
<input type="text" class="form-control" v-model="spec.minReplicas" />
69+
</div>
70+
</div>
71+
<div class="row" style="width:68% !important">
72+
<div class="col">
73+
<label class="form-label required">Max Replicas</label>
74+
<input type="text" class="form-control" v-model="spec.maxReplicas" />
75+
</div>
76+
</div>
77+
<div class="row" style="width:68% !important">
78+
<div class="col">
79+
<label class="form-label required">CPU Percentage</label>
80+
<input type="text" class="form-control" v-model="spec.targetCPUUtilizationPercentage" />
81+
</div>
82+
</div>
83+
5884
</div>
5985
</div>
6086

61-
<div class="btn-list justify-content-end">
62-
<a class="btn btn-primary" @click="onClickHpa" data-bs-toggle='modal' data-bs-target='#modal-hpa'>GENERATE</a>
87+
<div class="btn-list justify-content-end mt-4">
88+
<a class="btn btn-primary" @click="onClickHpa" data-bs-toggle='modal' data-bs-target='#modal-yaml'>GENERATE</a>
6389
</div>
64-
<hpaModal />
90+
<yamlModal :yaml-data="yamlData" :title="title" />
6591
</div>
6692

6793

@@ -75,45 +101,60 @@ import { ref } from 'vue';
75101
import { onMounted } from 'vue';
76102
import { useToast } from 'vue-toastification';
77103
import { generateYamlHpa } from '@/api/yaml.ts';
78-
import hpaModal from './hpaModal.vue';
79-
import { bootstrap } from "bootstrap"
104+
import yamlModal from './yamlModal.vue';
80105
81106
const toast = useToast()
82107
/**
83108
* @Title formData
84109
* @Desc pod 데이터
85110
*/
111+
const title = ref("" as string)
86112
const hpaFormData = ref({} as Hpa)
87-
const hpaLabels = ref([{}])
88-
const target = ref({})
89-
const metric = ref({})
113+
const metadata = ref({} as any)
114+
const hpaLabels = ref([] as any)
115+
const spec = ref({} as any)
116+
const scaleTargetRef = ref({} as any)
117+
const yamlData = ref("" as string)
90118
91119
onMounted(async () => {
92120
await setInit();
93121
})
94122
95123
const setInit = () => {
124+
title.value = "HPA"
125+
metadata.value = {
126+
name: "",
127+
namespace: "",
128+
labels: {}
129+
}
96130
hpaLabels.value.push({key: "", value:""})
97-
target.value = {kind: "deployment", name: ""}
98-
metric.value = {type: "cpu", targetAverageUtilization: 0}
99-
hpaFormData.value.hpaName = ""
100-
hpaFormData.value.namespace = ""
101-
hpaFormData.value.minReplicas = 0
102-
hpaFormData.value.maxReplicas = 0
131+
spec.value = {
132+
scaleTargetRef: {},
133+
minReplicas: "",
134+
maxReplicas: "",
135+
targetCPUUtilizationPercentage: ""
136+
}
137+
scaleTargetRef.value = {
138+
apiVersion: "",
139+
kind: "",
140+
name: ""
141+
}
103142
}
104143
105144
const onClickHpa = async () => {
106-
hpaFormData.value.target = target.value
107-
hpaFormData.value.metric = metric.value
108145
109-
const transformedObject = hpaLabels.value.reduce((acc, item) => {
146+
const transformedObject = hpaLabels.value.reduce((acc: { [x: string]: any; }, item: { key: string | number; value: any; }) => {
110147
acc[item.key] = item.value;
111148
return acc;
112149
}, {});
113150
114-
hpaFormData.value.labels = transformedObject;
115-
const { data } = await generateYamlHpa(hpaFormData.value);
151+
metadata.value.labels = transformedObject;
152+
spec.value.scaleTargetRef = scaleTargetRef.value;
153+
hpaFormData.value.metadata = metadata.value
154+
hpaFormData.value.spec = spec.value;
116155
156+
const { data } = await generateYamlHpa(hpaFormData.value);
157+
yamlData.value = data;
117158
}
118159
119160
const addLabel = () => {

‎applicationFE/src/views/generate/components/hpaModal.vue

Lines changed: 0 additions & 50 deletions
This file was deleted.

0 commit comments

Comments
 (0)