Merge pull request #41 from dmsej108/main

yaml generator Add modal
m-cmp · Sep 20, 2024 · bff9ff1 · bff9ff1
2 parents a59051a + 5cc23c1
commit bff9ff1
Show file tree

Hide file tree

Showing 9 changed files with 422 additions and 394 deletions.
diff --git a/applicationFE/src/api/yaml.ts b/applicationFE/src/api/yaml.ts
@@ -13,7 +13,7 @@ export const generateYamlService = (param:Pod) => {
 
 // HPA YAML
 export const generateYamlHpa = (param:Hpa) => {
-  return request.post('/yaml/hpa', param)
+  return request.post('/manifest/v1/generator/yaml/hpa', param)
 }
 
 // deployment YAML
@@ -23,5 +23,5 @@ export const generateYamlDeployment = (param:Deployment) => {
 
 // configmap YAML
 export const generateYamlConfigmap = (param:Deployment) => {
-  return request.post('/yaml/configmap', param)
+  return request.post('/manifest/v1/generator/yaml/configmap', param)
 }
diff --git a/applicationFE/src/views/generate/components/configMapModal.vue b/applicationFE/src/views/generate/components/configMapModal.vue
@@ -0,0 +1,45 @@
+<template> 
+  <div class="modal" id="modal-config-map" tabindex="-1">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">{{ props.title }}</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="card">
+            <div class="card-body">
+              <h4>YAML</h4>
+              <div>
+                <pre>{{ data }}</pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, computed, watch } from 'vue';
+import { ref } from 'vue';
+import { useToast } from 'vue-toastification';
+
+interface Props {
+  title: string
+  yamlData: string
+}
+const props = defineProps<Props>()
+const yamlData = computed(() => props.yamlData)
+watch(yamlData, async () => {
+  await setData();
+});
+
+const data = ref("" as string)
+
+const setData = async () => {
+  data.value = props.yamlData
+}
+
+</script>
diff --git a/applicationFE/src/views/generate/components/configmapForm.vue b/applicationFE/src/views/generate/components/configmapForm.vue
diff --git a/applicationFE/src/views/generate/components/deploymentForm.vue b/applicationFE/src/views/generate/components/deploymentForm.vue
@@ -146,12 +146,12 @@ import { useToast } from 'vue-toastification';
  * @Title formData 
  * @Desc pod 데이터
  */
- const deploymentFormData = reactive({} as Deployment)
- const deploymentLabels = ref([])
- const deploySelector = ref([])
- const deployContainerPort = ref([])
- const deployEnv = ref([])
- const deployVoumeMounts = ref([])
+ const deploymentFormData = ref({} as Deployment)
+ const deploymentLabels = ref([] as any)
+ const deploySelector = ref([] as any)
+ const deployContainerPort = ref([] as any)
+ const deployEnv = ref([] as any)
+ const deployVoumeMounts = ref([] as any)
 
  onMounted(async () => {
   await setInit();
@@ -163,18 +163,18 @@ const setInit = () => {
   deployContainerPort.value.push({portNum: "", name:""})
   deployEnv.value.push({name: "", value:""})
   deployVoumeMounts.value.push({mountPath: "", name:""})
-  deploymentFormData.deployName = ""
-  deploymentFormData.namespace = ""
-  deploymentFormData.image = ""
+  deploymentFormData.value.deployName = ""
+  deploymentFormData.value.namespace = ""
+  deploymentFormData.value.image = ""
 }
 
 const onClickDeploy = () => {
   console.log("onClickDeploy")
-  deploymentFormData.labels = deploymentLabels.value
-  deploymentFormData.selector = deploySelector.value
-  deploymentFormData.containerPort = deployContainerPort.value
-  deploymentFormData.env = deployEnv.value
-  deploymentFormData.volumeMounts = deployVoumeMounts.value
+  deploymentFormData.value.labels = deploymentLabels.value
+  deploymentFormData.value.selector = deploySelector.value
+  deploymentFormData.value.containerPort = deployContainerPort.value
+  deploymentFormData.value.env = deployEnv.value
+  deploymentFormData.value.volumeMounts = deployVoumeMounts.value
 
   const param = { ...deploymentFormData }
 

diff --git a/applicationFE/src/views/generate/components/hpaForm.vue b/applicationFE/src/views/generate/components/hpaForm.vue
@@ -1,67 +1,93 @@
 <template>
   <div class="tab-pane" id="tabs-hpa">
-    <div class="mb-3">
-      <label class="form-label">HPA Name</label>
-      <input type="text" class="form-control w-33" name="example-text-input" v-model="hpaFormData.hpaName" placeholder="name" />
-    </div>
-    <div class="mb-3">
-      <label class="form-label">Namespace</label>
-      <input type="text" class="form-control w-33" name="example-text-input" v-model="hpaFormData.namespace" placeholder="namespace" />
-    </div>
-    <div class="mb-3">
-      <label class="form-label">Labels</label>
-      <div class="generate-form" v-for="(item, idx) in hpaLabels" :key="idx">
-        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.key" placeholder="key" />
-        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.value" placeholder="value" />
-        <div class="btn-list">
-          <button class="btn btn-primary" @click="addLabel" style="text-align: center !important;">
-          <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;">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-            <path d="M12 5l0 14" />
-            <path d="M5 12l14 0" />
-          </svg>
-        </button>
-        <button class="btn btn-primary" @click="removeLabel(idx)">
-          <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;">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <path d="M5 12l14 0" />
-          </svg>
-        </button>
+    <div class="card">
+      <div class="card-header">
+        <h3 class="card-title">Metadata 영역</h3>
+      </div>
+      <div class="card-body">
+        <div class="mb-3">
+          <label class="form-label required">HPA Name</label>
+          <input type="text" class="form-control w-33" name="example-text-input" v-model="metadata.name" placeholder="name" />
+        </div>
+        <div class="mb-3">
+          <label class="form-label required">Namespace</label>
+          <input type="text" class="form-control w-33" name="example-text-input" v-model="metadata.namespace" placeholder="namespace" />
+        </div>
+        <div class="mb-3">
+          <label class="form-label required">Labels</label>
+          <div class="generate-form" v-for="(item, idx) in hpaLabels" :key="idx">
+            <input type="text" class="form-control w-33" name="example-password-input" v-model="item.key" placeholder="key" />
+            <input type="text" class="form-control w-33" name="example-password-input" v-model="item.value" placeholder="value" />
+            <div class="btn-list">
+              <button class="btn btn-primary" @click="addLabel" style="text-align: center !important;">
+              <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;">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <path d="M12 5l0 14" />
+                <path d="M5 12l14 0" />
+              </svg>
+            </button>
+            <button class="btn btn-primary" @click="removeLabel(idx)">
+              <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;">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M5 12l14 0" />
+              </svg>
+            </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-    <div class="mb-3">
-      <label class="form-label">Target</label>
-      <div class="generate-form" >
-        <select class="form-select" v-model="target.kind" style="width:33% !important">
-          <option value="deployment">Deployment</option>
-        </select>
-        <input type="text" class="form-control w-33" name="example-password-input" v-model="target.name" placeholder="name" />
+
+    <div class="card mt-4">
+      <div class="card-header">
+        <h3 class="card-title">Spec 영역</h3>
       </div>
-    </div>
-    <div class="mb-3">
-      <label class="form-label">Min Replicas</label>
-      <input type="number" class="form-control w-33" name="example-text-input" v-model="hpaFormData.minReplicas" placeholder="image" />
-    </div>
-    <div class="mb-3">
-      <label class="form-label">Max Replicas</label>
-      <input type="number" class="form-control w-33" name="example-text-input" v-model="hpaFormData.maxReplicas" placeholder="image" />
-    </div>
-    <div class="mb-3">
-      <label class="form-label">Metric</label>
-      <div class="generate-form">
-        <select class="form-select" v-model="metric.type" style="width:33% !important">
-          <option value="cpu">CPU</option>
-          <option value="memory">MEMORY</option>
-        </select>
-        <input type="number" class="form-control w-33" name="example-password-input" v-model="metric.targetAverageUtilization" placeholder="value" max="100" />
+      <div class="card-body">
+        <div class="mb-3">
+          <label class="form-label">Scale Target</label>
+        </div>
+        <div class="row" style="width:68% !important">
+          <div class="col">
+            <label class="form-label required">Api Version</label>
+            <input type="text" class="form-control" v-model="scaleTargetRef.apiVersion" />
+          </div>
+          <div class="col">
+            <label class="form-label required">Kind</label>
+            <input type="text" class="form-control" v-model="scaleTargetRef.kind" />
+          </div>
+        </div>
+        <div class="row" style="width:68% !important">
+          <div class="col">
+            <label class="form-label required">Name</label>
+            <input type="text" class="form-control" v-model="scaleTargetRef.name" />
+          </div>
+        </div>
+        <div class="row" style="width:68% !important">
+          <div class="col">
+            <label class="form-label required">Min Replicas</label>
+            <input type="text" class="form-control" v-model="spec.minReplicas" />
+          </div>
+        </div>
+        <div class="row" style="width:68% !important">
+          <div class="col">
+            <label class="form-label required">Max Replicas</label>
+            <input type="text" class="form-control" v-model="spec.maxReplicas" />
+          </div>
+        </div>
+        <div class="row" style="width:68% !important">
+          <div class="col">
+            <label class="form-label required">CPU Percentage</label>
+            <input type="text" class="form-control" v-model="spec.targetCPUUtilizationPercentage" />
+          </div>
+        </div>
+
       </div>
     </div>
 
-    <div class="btn-list justify-content-end">
-      <a class="btn btn-primary" @click="onClickHpa" data-bs-toggle='modal' data-bs-target='#modal-hpa'>GENERATE</a>
+    <div class="btn-list justify-content-end mt-4">
+      <a class="btn btn-primary" @click="onClickHpa" data-bs-toggle='modal' data-bs-target='#modal-yaml'>GENERATE</a>
     </div>
-    <hpaModal />
+    <yamlModal :yaml-data="yamlData" :title="title" />
   </div>
 
 
@@ -75,45 +101,60 @@ import { ref } from 'vue';
 import { onMounted } from 'vue';
 import { useToast } from 'vue-toastification';
 import { generateYamlHpa } from '@/api/yaml.ts';
-import hpaModal from './hpaModal.vue';
-import { bootstrap } from "bootstrap"
+import yamlModal from './yamlModal.vue';
 
 const toast = useToast()
 /**
  * @Title formData 
  * @Desc pod 데이터
  */
+ const title = ref("" as string)
  const hpaFormData = ref({} as Hpa)
- const hpaLabels = ref([{}])
- const target = ref({})
- const metric = ref({})
+ const metadata = ref({} as any)
+ const hpaLabels = ref([] as any)
+ const spec = ref({} as any)
+ const scaleTargetRef = ref({} as any)
+ const yamlData = ref("" as string)
 
  onMounted(async () => {
   await setInit();
 })
 
 const setInit = () => {
+  title.value = "HPA"
+  metadata.value = {
+    name: "",
+    namespace: "",
+    labels: {}
+  }
   hpaLabels.value.push({key: "", value:""})
-  target.value = {kind: "deployment", name: ""}
-  metric.value = {type: "cpu", targetAverageUtilization: 0}
-  hpaFormData.value.hpaName = ""
-  hpaFormData.value.namespace = ""
-  hpaFormData.value.minReplicas = 0
-  hpaFormData.value.maxReplicas = 0
+  spec.value = {
+    scaleTargetRef: {},
+    minReplicas: "",
+    maxReplicas: "",
+    targetCPUUtilizationPercentage: ""
+  }
+  scaleTargetRef.value = {
+    apiVersion: "",
+    kind: "",
+    name: ""
+  }
 }
 
 const onClickHpa = async () => {
-  hpaFormData.value.target = target.value
-  hpaFormData.value.metric = metric.value
 
-  const transformedObject = hpaLabels.value.reduce((acc, item) => {
+  const transformedObject = hpaLabels.value.reduce((acc: { [x: string]: any; }, item: { key: string | number; value: any; }) => {
     acc[item.key] = item.value;
     return acc;
   }, {});
 
-  hpaFormData.value.labels = transformedObject;
-  const { data } = await generateYamlHpa(hpaFormData.value);
+  metadata.value.labels = transformedObject;
+  spec.value.scaleTargetRef = scaleTargetRef.value;
+  hpaFormData.value.metadata = metadata.value
+  hpaFormData.value.spec = spec.value;
 
+  const { data } = await generateYamlHpa(hpaFormData.value);
+  yamlData.value = data;
 }
 
 const addLabel = () => {

diff --git a/applicationFE/src/views/generate/components/hpaModal.vue b/applicationFE/src/views/generate/components/hpaModal.vue