Merge pull request #45 from dmsej108/main

deployment yaml generator add modal, UI update

applicationFE/src/api/yaml.ts

@@ -18,7 +18,7 @@ export const generateYamlHpa = (param:Hpa) => {
 
 // deployment YAML
 export const generateYamlDeployment = (param:Deployment) => {
-  return request.post('/yaml/deployment', param)
+  return request.post('/manifest/v1/generator/yaml/deployments', param)
 }
 
 // configmap YAML

applicationFE/src/views/generate/YamlGenerate.vue

@@ -40,8 +40,8 @@
 </template>
 <script setup lang="ts">
 import PodForm from './components/podForm.vue';
-import ServiceForm from './components/serviceForm.vue';
 import DeploymentForm from './components/deploymentForm.vue';
+import ServiceForm from './components/serviceForm.vue';
 import HpaForm from './components/hpaForm.vue';
 import ConfigmapForm from './components/configmapForm.vue';
 import { onMounted } from 'vue';

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

@@ -15,7 +15,7 @@
         </div>
         <div class="mb-3">
           <label class="form-label">- Labels</label>
-          <div class="generate-form" v-for="(item, idx) in ConfigMapLabels" :key="idx">
+          <div class="generate-form" v-for="(item, idx) in configMapLabels" :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">
@@ -71,7 +71,7 @@
     <div class="btn-list justify-content-end mt-4">
       <a class="btn btn-primary" @click="onClickDeploy" data-bs-toggle='modal' data-bs-target='#modal-config-map'>GENERATE</a>
     </div>
-    <yamlModal :yaml-data="yamlData" :title="title" />
+    <YamlModal :yaml-data="yamlData" :title="title" />
   </div>
 
 
@@ -84,7 +84,7 @@ import { ref } from 'vue';
 import { onMounted } from 'vue';
 import { generateYamlConfigmap } from '@/api/yaml.ts';
 import { useToast } from 'vue-toastification';
-import yamlModal from './configMapModal.vue';
+import YamlModal from './configMapModal.vue';
 
 const toast = useToast()
 /**
@@ -94,7 +94,7 @@ const toast = useToast()
  const title = ref("" as string)
  const configMapFormData = ref({} as ConfigMap)
  const metadata = ref({} as any)
- const ConfigMapLabels = ref([] as any)
+ const configMapLabels = ref([] as any)
  const configMapData = ref([] as any)
  const yamlData = ref("" as string)
 
@@ -109,12 +109,12 @@ const setInit = () => {
     namespace: "",
     labels: {}
   }
-  ConfigMapLabels.value.push({key: "", value:""})
+  configMapLabels.value.push({key: "", value:""})
   configMapData.value.push({key: "", value:""})
 }
 
 const onClickDeploy = async () => {
-  const transformedObject = ConfigMapLabels.value.reduce((acc: { [x: string]: any; }, item: { key: string | number; value: any; }) => {
+  const transformedObject = configMapLabels.value.reduce((acc: { [x: string]: any; }, item: { key: string | number; value: any; }) => {
     acc[item.key] = item.value;
     return acc;
   }, {});
@@ -134,14 +134,14 @@ const onClickDeploy = async () => {
 }
 
 const addLabel = () => {
-  ConfigMapLabels.value.push({
+  configMapLabels.value.push({
     key: "", value:""
   })
 }
 
 const removeLabel = (idx: number) => {
-  if(ConfigMapLabels.value.length !== 1) {
-    ConfigMapLabels.value.splice(idx, 1)
+  if(configMapLabels.value.length !== 1) {
+    configMapLabels.value.splice(idx, 1)
   }
 }
 

applicationFE/src/views/generate/components/deployModal.vue

@@ -0,0 +1,45 @@
+<template> 
+  <div class="modal" id="modal-deploy" 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>