yaml generate Ui update

m-cmp · Sep 12, 2024 · be63f18 · be63f18
1 parent f53d8ad
commit be63f18
Show file tree

Hide file tree

Showing 9 changed files with 1,247 additions and 1 deletion.
diff --git a/applicationFE/index.html b/applicationFE/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <!-- <link rel="icon" href="/favicon.ico"> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Workflow</title>
+    <title>App</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/applicationFE/src/api/yaml.ts b/applicationFE/src/api/yaml.ts
@@ -0,0 +1,27 @@
+import request from "../common/request";
+import type { Pod, Hpa, Deployment } from "../views/type/type";
+
+// POD YAML
+export const generateYamlPod = (param:Pod) => {
+  return request.post('/yaml/pod', param)
+}
+
+// SERVICE YAML
+export const generateYamlService = (param:Pod) => {
+  return request.post('/yaml/service', param)
+}
+
+// HPA YAML
+export const generateYamlHpa = (param:Hpa) => {
+  return request.post('/yaml/hpa', param)
+}
+
+// deployment YAML
+export const generateYamlDeployment = (param:Deployment) => {
+  return request.post('/yaml/deployment', param)
+}
+
+// configmap YAML
+export const generateYamlConfigmap = (param:Deployment) => {
+  return request.post('/yaml/configmap', param)
+}
diff --git a/applicationFE/src/views/generate/YamlGenerate.vue b/applicationFE/src/views/generate/YamlGenerate.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="card w-100" ref="workflowForm">
+    <div class="card-header">
+      <div class="card-title">
+        <h1>YAML GENERATE</h1>
+      </div>
+    </div>
+    <div class="page-body">
+      <div class="card-header">
+        <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
+          <li class="nav-item">
+            <a href="#tabs-pod" class="nav-link active" data-bs-toggle="tab">Pod</a>
+          </li>
+          <!-- <li class="nav-item">
+            <a href="#tabs-service" class="nav-link" data-bs-toggle="tab">Service</a>
+          </li> -->
+          <li class="nav-item">
+            <a href="#tabs-deployment" class="nav-link" data-bs-toggle="tab">Deployment</a>
+          </li>
+          <li class="nav-item">
+            <a href="#tabs-hpa" class="nav-link" data-bs-toggle="tab">HPA</a>
+          </li>
+          <li class="nav-item">
+            <a href="#tabs-configMap" class="nav-link" data-bs-toggle="tab">ConfigMap</a>
+          </li>
+        </ul>
+      </div>
+      <div class="card-body">
+        <div class="tab-content">
+          <PodForm />
+          <ServiceForm />
+          <DeploymentForm />
+          <HpaForm />
+          <ConfigmapForm />
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+<script setup lang="ts">
+import PodForm from './components/podForm.vue';
+import ServiceForm from './components/serviceForm.vue';
+import DeploymentForm from './components/deploymentForm.vue';
+import HpaForm from './components/hpaForm.vue';
+import ConfigmapForm from './components/configmapForm.vue';
+import { onMounted } from 'vue';
+import { ref } from 'vue';
+import { useToast } from 'vue-toastification';
+const toast = useToast()
+
+
+/**
+ * @Title Life Cycle
+ * @Desc 컬럼 set Callback 함수 호출 / ossList Callback 함수 호출
+ */
+onMounted(async () => {
+
+})
+
+
+</script>
diff --git a/applicationFE/src/views/generate/components/configmapForm.vue b/applicationFE/src/views/generate/components/configmapForm.vue
@@ -0,0 +1,252 @@
+<template>
+  <div class="tab-pane" id="tabs-configMap">
+    <div class="mb-3">
+      <label class="form-label">Deployment Name</label>
+      <input type="text" class="form-control w-33" name="example-text-input" v-model="deploymentFormData.deployName" placeholder="deploy-01" />
+    </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="deploymentFormData.namespace" placeholder="namespace" />
+    </div>
+    <div class="mb-3">
+      <label class="form-label">Labels</label>
+      <div class="generate-form" v-for="(item, idx) in deploymentLabels" :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 class="mb-3">
+      <label class="form-label">Selector</label>
+      <div class="generate-form" v-for="(item, idx) in deploySelector" :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="addSelector" 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="removeSelector(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 class="mb-3">
+      <label class="form-label">Replicas</label>
+      <input type="text" class="form-control w-33" name="example-text-input" v-model="deploymentFormData.namespace" placeholder="namespace" />
+    </div>
+    <div class="mb-3">
+      <label class="form-label">Image</label>
+      <input type="text" class="form-control w-33" name="example-text-input" v-model="deploymentFormData.image" placeholder="image" />
+    </div>
+    <div class="mb-3">
+      <label class="form-label">containerPort</label>
+      <div class="generate-form" v-for="(item, idx) in deployContainerPort" :key="idx">
+        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.portNum" placeholder="portNum" />
+        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.name" placeholder="name" />
+        <div class="btn-list">
+          <button class="btn btn-primary" @click="addPort" 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="removePort(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 class="mb-3">
+      <label class="form-label">env</label>
+      <div class="generate-form" v-for="(item, idx) in deployEnv" :key="idx">
+        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.name" placeholder="name" />
+        <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="addEnv" 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="removeEnv(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 class="mb-3">
+      <label class="form-label">volumeMounts</label>
+      <div class="generate-form" v-for="(item, idx) in deployVoumeMounts" :key="idx">
+        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.mountPath" placeholder="mountPath" />
+        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.name" placeholder="name" />
+        <div class="btn-list">
+          <button class="btn btn-primary" @click="addVm" 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="removeVm(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 class="btn-list justify-content-end">
+      <a class="btn btn-primary" @click="onClickDeploy">GENERATE</a>
+    </div>
+  </div>
+
+
+
+</template>
+
+<script setup lang="ts">
+import type { Deployment } from '@/views/type/type';
+import { ref, reactive } from 'vue';
+import { onMounted } from 'vue';
+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([])
+
+ onMounted(async () => {
+  await setInit();
+})
+
+const setInit = () => {
+  deploymentLabels.value.push({key: "", value:""})
+  deploySelector.value.push({key: "", value:""})
+  deployContainerPort.value.push({portNum: "", name:""})
+  deployEnv.value.push({name: "", value:""})
+  deployVoumeMounts.value.push({mountPath: "", name:""})
+  deploymentFormData.deployName = ""
+  deploymentFormData.namespace = ""
+  deploymentFormData.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
+
+  const param = { ...deploymentFormData }
+
+  console.log("param : ", param)
+}
+
+const addLabel = () => {
+  deploymentLabels.value.push({
+    key: "", value:""
+  })
+}
+
+const removeLabel = (idx: number) => {
+  if(deploymentLabels.value.length !== 1) {
+    deploymentLabels.value.splice(idx, 1)
+  }
+}
+
+const addSelector = () => {
+  deploySelector.value.push({
+    key: "", value:""
+  })
+}
+
+const removeSelector = (idx: number) => {
+  if(deploySelector.value.length !== 1) {
+    deploySelector.value.splice(idx, 1)
+  }
+}
+
+const addPort = () => {
+  deployContainerPort.value.push({
+    portNum: "", name:""
+  })
+}
+
+const removePort = (idx: number) => {
+  if(deployContainerPort.value.length !== 1) {
+    deployContainerPort.value.splice(idx, 1)
+  }
+}
+
+const addEnv = () => {
+  deployEnv.value.push({
+    name: "", value:""
+  })
+}
+
+const removeEnv = (idx: number) => {
+  if(deployEnv.value.length !== 1) {
+    deployEnv.value.splice(idx, 1)
+  }
+}
+
+const addVm = () => {
+  deployVoumeMounts.value.push({
+    mountPath: "", name:""
+  })
+}
+
+const removeVm = (idx: number) => {
+  if(deployVoumeMounts.value.length !== 1) {
+    deployVoumeMounts.value.splice(idx, 1)
+  }
+}
+
+</script>
+<style scoped>
+.generate-form {
+  width: 100% !important;
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+</style>