From b291f41d0e3959a26f934b4b05c0d19d550444e2 Mon Sep 17 00:00:00 2001
From: JUNGEUNJUNG <dmsej108@strato.co.kr>
Date: Mon, 23 Sep 2024 15:44:50 +0900
Subject: [PATCH] Pod yaml generator add modal, UI Update

---
 applicationFE/src/api/yaml.ts                 |   2 +-
 .../generate/components/configmapForm.vue     |   8 +-
 .../src/views/generate/components/hpaForm.vue |  18 +-
 .../src/views/generate/components/podForm.vue | 391 ++++++++++--------
 .../views/generate/components/podModal.vue    |  45 ++
 .../views/generate/components/serviceForm.vue |  29 +-
 6 files changed, 300 insertions(+), 193 deletions(-)
 create mode 100644 applicationFE/src/views/generate/components/podModal.vue

diff --git a/applicationFE/src/api/yaml.ts b/applicationFE/src/api/yaml.ts
index baa5d8f..16e34f6 100644
--- a/applicationFE/src/api/yaml.ts
+++ b/applicationFE/src/api/yaml.ts
@@ -3,7 +3,7 @@ import type { Pod, Hpa, Deployment, Service, ConfigMap } from "../views/type/typ
 
 // POD YAML
 export const generateYamlPod = (param:Pod) => {
-  return request.post('/yaml/pod', param)
+  return request.post('/manifest/v1/generator/yaml/pod', param)
 }
 
 // SERVICE YAML
diff --git a/applicationFE/src/views/generate/components/configmapForm.vue b/applicationFE/src/views/generate/components/configmapForm.vue
index 737b8b6..127b5c4 100644
--- a/applicationFE/src/views/generate/components/configmapForm.vue
+++ b/applicationFE/src/views/generate/components/configmapForm.vue
@@ -6,15 +6,15 @@
       </div>
       <div class="card-body">
         <div class="mb-3">
-          <label class="form-label requierd">Name</label>
+          <label class="form-label required">- Name</label>
           <input type="text" class="form-control w-33" name="example-text-input" v-model="metadata.name" placeholder="configMap-01" />
         </div>
         <div class="mb-3">
-          <label class="form-label">Namespace</label>
+          <label class="form-label">- 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">Labels</label>
+          <label class="form-label">- Labels</label>
           <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" />
@@ -44,7 +44,7 @@
       </div>
       <div class="card-body">
         <div class="mb-3">
-          <label class="form-label">Data</label>
+          <label class="form-label">- Data</label>
           <div class="generate-form" v-for="(item, idx) in configMapData" :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" />
diff --git a/applicationFE/src/views/generate/components/hpaForm.vue b/applicationFE/src/views/generate/components/hpaForm.vue
index 8907948..21fb637 100644
--- a/applicationFE/src/views/generate/components/hpaForm.vue
+++ b/applicationFE/src/views/generate/components/hpaForm.vue
@@ -6,15 +6,15 @@
       </div>
       <div class="card-body">
         <div class="mb-3">
-          <label class="form-label required">HPA Name</label>
+          <label class="form-label required">- 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>
+          <label class="form-label">- 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>
+          <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" />
@@ -48,35 +48,35 @@
         </div>
         <div class="row" style="width:68% !important">
           <div class="col">
-            <label class="form-label required">Api Version</label>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <label class="form-label required">- CPU Percentage</label>
             <input type="text" class="form-control" v-model="spec.targetCPUUtilizationPercentage" />
           </div>
         </div>
diff --git a/applicationFE/src/views/generate/components/podForm.vue b/applicationFE/src/views/generate/components/podForm.vue
index 09a8dc7..7ab8d28 100644
--- a/applicationFE/src/views/generate/components/podForm.vue
+++ b/applicationFE/src/views/generate/components/podForm.vue
@@ -1,157 +1,180 @@
 <template>
   <div class="tab-pane active show" id="tabs-pod">
-    <!-- <h4>Pod</h4> -->
-    <div class="mb-3">
-      <label class="form-label required">Pod Name</label>
-      <input type="text" class="form-control w-33" name="example-text-input" v-model="metadata.name" placeholder="pod-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="metadata.namespace" placeholder="namespace" />
-    </div>
-    <div class="mb-3">
-      <label class="form-label">Labels</label>
-      <div class="generate-form" v-for="(item, idx) in podLabels" :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">Image</label>
-      <input type="text" class="form-control w-33" name="example-text-input" v-model="image" placeholder="image" />
-    </div>
-    <div class="mb-3">
-      <label class="form-label">env</label>
-      <div class="generate-form" v-for="(item, idx) in podEnv" :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 class="card">
+      <div class="card-header">
+        <h3 class="card-title">Metadata 영역</h3>
       </div>
-    </div>
-    <div class="mb-3">
-      <div class="btn-list">
-        <label class="form-label">Container</label>
-        <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">
-          <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 class="row" style="width:68% !important">
-        <div class="col mt-4">
-          <label class="form-label">Name</label>
-          <input type="text" class="form-control" name="example-password-input" />
-        </div>
-        <div class="col mt-4">
-          <label class="form-label">Port</label>
-          <input type="text" class="form-control" name="example-password-input" />
-        </div>
-      </div>
-
-      <div class="row" style="width:68% !important">
-        <div class="col">
-          <label class="form-label">Protocol</label>
-          <input type="text" class="form-control" name="example-password-input" />
+      <div class="card-body">
+        <div class="mb-3">
+          <label class="form-label required">- Name</label>
+          <input type="text" class="form-control w-33" name="example-text-input" v-model="metadata.name" placeholder="pod-01" />
         </div>
-        <div class="col">
-          <label class="form-label">Host Port</label>
-          <input type="text" class="form-control" name="example-password-input" />
+        <div class="mb-3">
+          <label class="form-label">- Namespace</label>
+          <input type="text" class="form-control w-33" name="example-text-input" v-model="metadata.namespace" placeholder="namespace" />
         </div>
-      </div>
-
-      <div class="row">
-        <div class="col mt-4">
-          <label class="form-label">Resources</label>
+        <div class="mb-3">
+          <label class="form-label">- Labels</label>
+          <div class="generate-form" v-for="(item, idx) in podLabels" :key="idx">
+            <input type="text" class="form-control w-33" v-model="item.key" placeholder="key" />
+            <input type="text" class="form-control w-33" 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="row" style="width:68% !important">
-        <div class="col">
-          <label class="form-label">Limits CPU</label>
-          <input type="text" class="form-control" name="example-password-input" />
-        </div>
-        <div class="col">
-          <label class="form-label">Limits Memory</label>
-          <input type="text" class="form-control" name="example-password-input" />
-        </div>
+    <div class="card mt-4">
+      <div class="card-header">
+        <h3 class="card-title">Spec 영역</h3>
       </div>
-      <div class="row" style="width:68% !important">
-        <div class="col">
-          <label class="form-label">Requests CPU</label>
-          <input type="text" class="form-control" name="example-password-input" />
+      <div class="card-body">
+        <div v-for="(container, idx) in containers" :key="idx">
+        <div class="mb-3">
+          <div class="btn-list">
+            <label class="form-label">Containers</label>
+            <button class="btn btn-primary" @click="addContainer" 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="removeContainer(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 class="row" style="width:68% !important">
+            <div class="col mt-4">
+              <label class="form-label required">- Name</label>
+              <input type="text" class="form-control" v-model="container.name" />
+            </div>
+            <div class="col mt-4">
+              <label class="form-label required">- Image</label>
+              <input type="text" class="form-control" v-model="container.image" />
+            </div>
+          </div>
         </div>
-        <div class="col">
-          <label class="form-label">Requests Memory</label>
-          <input type="text" class="form-control" name="example-password-input" />
+        <div class="mb-3">
+          <label class="form-label">- Env</label>
+          <div class="generate-form" v-for="(env, envIndex) in container.env" :key="envIndex">
+            <input type="text" class="form-control w-33" v-model="env.name" placeholder="key" />
+            <input type="text" class="form-control w-33" v-model="env.value" placeholder="value" />
+            <div class="btn-list">
+              <button class="btn btn-primary" @click="addEnv(idx)" 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, envIndex)">
+                <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 class="row" style="width:68% !important">
-        <div class="col">
-          <label class="form-label">Restart Policy</label>
-          <input type="text" class="form-control" name="example-password-input" v-model="restartPolicy" />
+        <div class="mb-3"> 
+          <div class="mt-4" v-for="(port, portIndex) in container.ports" :key="portIndex">
+            <div class="btn-list">
+              <label class="form-label">Ports</label>
+              <button class="btn btn-primary" @click="addPort(idx)" 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, portIndex)">
+                <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 class="row" style="width:68% !important">
+              <div class="col mt-4">
+                <label class="form-label">- Name</label>
+                <input type="text" class="form-control" v-model="port.name" />
+              </div>
+              <div class="col mt-4">
+                <label class="form-label">- Port</label>
+                <input type="text" class="form-control" v-model="port.containerPort" />
+              </div>
+            </div>
+            <div class="row" style="width:68% !important">
+              <div class="col mt-4">
+                <label class="form-label">- Protocol</label>
+                <input type="text" class="form-control" v-model="port.protocol" />
+              </div>
+              <div class="col mt-4">
+                <label class="form-label">- Host Port</label>
+                <input type="text" class="form-control" v-model="port.hostPort" />
+              </div>
+            </div>
+            <div class="border-bottom" style="width: 100%; margin-top: 10px" v-if="container.ports.length > 1"></div>
+          </div>
         </div>
-      </div>
-    </div>
-    
-
-    <!-- <div class="mb-3">
-      <div class="accordion" id="accordion-example">
-        <div class="accordion-item">
-          <h2 class="accordion-header" id="heading-1">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true">
-              Labels
-            </button>
-          </h2>
-          <div id="collapse-1" class="accordion-collapse collapse" data-bs-parent="#accordion-example" style="">
-            <div class="accordion-body pt-0">
-              <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+        <div class="mb-3">
+          
+          <div class="btn-list">
+            <label class="form-label">Resources</label>
+          </div>
+          <div class="row" style="width:68% !important">
+            <div class="col mt-4">
+              <label class="form-label">- Limits CPU</label>
+              <input type="text" class="form-control" v-model="container.resources.limits.cpu" />
+            </div>
+            <div class="col mt-4">
+              <label class="form-label">- Limits Memory</label>
+              <input type="text" class="form-control" v-model="container.resources.limits.memory" />
+            </div>
+          </div>
+          <div class="row" style="width:68% !important">
+            <div class="col mt-4">
+              <label class="form-label">- Requests CPU</label>
+              <input type="text" class="form-control" v-model="container.resources.requests.cpu" />
+            </div>
+            <div class="col mt-4">
+              <label class="form-label">- Requests Memory</label>
+              <input type="text" class="form-control" v-model="container.resources.requests.memory" />
+            </div>
+          </div>
+          <div class="row" style="width:68% !important">
+            <div class="col mt-4">
+              <label class="form-label">- Restart Policy</label>
+              <input type="text" class="form-control" v-model="spec.restartPolicy" />
             </div>
           </div>
         </div>
+        </div>
       </div>
-    </div> -->
+    </div>
 
-    <div class="btn-list justify-content-end">
-      <a class="btn btn-primary" @click="onClickPod">GENERATE</a>
+    <div class="btn-list justify-content-end mt-4">
+      <a class="btn btn-primary" @click="onClickPod" data-bs-toggle='modal' data-bs-target='#modal-pod'>GENERATE</a>
     </div>
+    <yamlModal :yaml-data="yamlData" :title="title" />
   </div>
   
   
@@ -163,42 +186,67 @@ import type { Pod } from '@/views/type/type';
 import { ref, reactive } from 'vue';
 import { onMounted } from 'vue';
 import { useToast } from 'vue-toastification';
+import { generateYamlPod } from '@/api/yaml.ts';
+import yamlModal from './podModal.vue';
 
 /**
  * @Title formData 
  * @Desc pod 데이터
  */
+ const title = ref("" as string)
  const podFormData = ref({} as Pod)
  const metadata = ref({} as any)
  const podLabels = ref([] as any)
- const podContainers = ref([] as any)
- const podEnv = ref([] as any)
- const podVoumeMounts = ref([] as any)
- const restartPolicy = ref("" as string)
- const image = ref("" as string)
- const ports = ref([] as any)
+ const spec = ref({} as any)
+ const containers = ref([] as any)
+ const yamlData = ref("" as string)
 
  onMounted(async () => {
   await setInit();
 })
 
 const setInit = () => {
+  title.value = "Pod"
   metadata.value.name = ""
   metadata.value.namespace = ""
-  restartPolicy.value = ""
-  image.value = ""
-  podLabels.value.push({key: "", value:""})
-  podEnv.value.push({name: "", value:""})
+  podLabels.value.push({key: "", value: ""})
+
+  spec.value = {
+    containers : [],
+    restartPolicy: ""
+  }
 
+  containers.value.push({
+    name: "",
+    image: "",
+    env: [{name: "", value:""}],
+    ports: [{name: "", containerPort: "", hostPort: "", protocol: ""}],
+    resources: {
+      limits: {
+        memory: "",
+        cpu: "",
+      },
+      requests: {
+        memory: "",
+        cpu: ""
+      }
+    },
+  })
 }
 
-const onClickPod = () => {
+const onClickPod = async () => {
   const transformedObject = podLabels.value.reduce((acc: { [x: string]: any; }, item: { key: string|number; value: any; }) => {
     acc[item.key] = item.value;
     return acc;
   }, {});
 
-  console.log("transformedObject : ", transformedObject)
+  metadata.value.labels = transformedObject;
+  podFormData.value.metadata = metadata.value;
+  spec.value.containers =  containers.value;
+  podFormData.value.spec = spec.value;
+  
+  const { data } = await generateYamlPod(podFormData.value);
+  yamlData.value = data;
 }
 
 const addLabel = () => {
@@ -213,39 +261,52 @@ const removeLabel = (idx: number) => {
   }
 }
 
-const addPort = () => {
-  podContainerPort.value.push({
-    portNum: "", name:""
+const addContainer = () => {
+  containers.value.push({
+    name: "",
+    image: "",
+    env: [{name: "", value:""}],
+    ports: [{name: "", containerPort: "", hostPort: "", protocol: ""}],
+    resources: {
+      limits: {
+        memory: "",
+        cpu: "",
+      },
+      requests: {
+        memory: "",
+        cpu: ""
+      }
+    },
   })
 }
 
-const removePort = (idx: number) => {
-  if(podContainerPort.value.length !== 1) {
-    podContainerPort.value.splice(idx, 1)
+const removeContainer = (idx: number) => {
+  if(containers.value.length !== 1) {
+    containers.value.splice(idx, 1)
   }
 }
 
-const addEnv = () => {
-  podEnv.value.push({
+const addEnv = (idx: number) => {
+  containers.value[idx].env.push({
     name: "", value:""
   })
 }
 
-const removeEnv = (idx: number) => {
-  if(podEnv.value.length !== 1) {
-    podEnv.value.splice(idx, 1)
+const removeEnv = (idx: number, envIndex: number) => {
+  if(containers.value[idx].env.length !== 1) {
+    containers.value[idx].env.splice(envIndex, 1)
   }
 }
 
-const addVm = () => {
-  podVoumeMounts.value.push({
-    mountPath: "", name:""
+const addPort = (idx: number) => {
+  containers.value[idx].ports.push({
+    name: "", containerPort: "", hostPort: "", protocol: ""
   })
 }
 
-const removeVm = (idx: number) => {
-  if(podVoumeMounts.value.length !== 1) {
-    podVoumeMounts.value.splice(idx, 1)
+const removePort = (idx: number, portIndex: number) => {
+  if(containers.value[idx].ports.length !== 1) {
+    containers.value[idx].ports.splice(portIndex, 1)
   }
 }
 
diff --git a/applicationFE/src/views/generate/components/podModal.vue b/applicationFE/src/views/generate/components/podModal.vue
new file mode 100644
index 0000000..7dd76cb
--- /dev/null
+++ b/applicationFE/src/views/generate/components/podModal.vue
@@ -0,0 +1,45 @@
+<template> 
+  <div class="modal" id="modal-pod" 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>
\ No newline at end of file
diff --git a/applicationFE/src/views/generate/components/serviceForm.vue b/applicationFE/src/views/generate/components/serviceForm.vue
index 41f5ccf..edbea65 100644
--- a/applicationFE/src/views/generate/components/serviceForm.vue
+++ b/applicationFE/src/views/generate/components/serviceForm.vue
@@ -6,16 +6,16 @@
       </div>
       <div class="card-body">
         <div class="mb-3">
-          <label class="form-label required">Name</label>
+          <label class="form-label required">- Name</label>
           <input type="text" class="form-control w-33" name="example-text-input" v-model="metadata.name" placeholder="name-01" />
         </div>
         <div class="mb-3">
-          <label class="form-label">Namespace</label>
+          <label class="form-label">- 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">Labels</label>
-          <div class="pod-form" v-for="(item, idx) in serviceLabels" :key="idx">
+          <label class="form-label">- Labels</label>
+          <div class="generate-form" v-for="(item, idx) in serviceLabels" :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">
@@ -44,8 +44,8 @@
       </div>
       <div class="card-body">
         <div class="mb-3">
-          <label class="form-label">Selector</label>
-          <div class="pod-form" v-for="(item, idx) in selector" :key="idx">
+          <label class="form-label">- Selector</label>
+          <div class="generate-form" v-for="(item, idx) in selector" :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">
@@ -66,9 +66,9 @@
           </div>
         </div>
         <div class="mb-3">
-          <div v-for="(item, idx) in ports" :key="idx">
+          <div class="mt-4" v-for="(item, idx) in ports" :key="idx">
             <div class="btn-list">
-              <label class="form-label">Container</label>
+              <label class="form-label">Ports</label>
               <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"/>
@@ -85,30 +85,31 @@
             </div>
             <div class="row" style="width:68% !important">
               <div class="col mt-4">
-                <label class="form-label required">Port</label>
+                <label class="form-label required">- Port</label>
                 <input type="text" class="form-control" v-model="item.port" />
               </div>
               <div class="col mt-4">
-                <label class="form-label required">Target Port</label>
+                <label class="form-label required">- Target Port</label>
                 <input type="text" class="form-control" v-model="item.targetPort" />
               </div>
             </div>
             <div class="row" style="width:68% !important">
               <div class="col mt-4">
-                <label class="form-label">Protocol</label>
+                <label class="form-label">- Protocol</label>
                 <input type="text" class="form-control" v-model="item.protocol" />
               </div>
               <div class="col mt-4">
-                <label class="form-label">Node Port</label>
+                <label class="form-label">- Node Port</label>
                 <input type="text" class="form-control" v-model="item.nodePort" />
               </div>
             </div>
             <div class="row" style="width:68% !important">
               <div class="col mt-4">
-                <label class="form-label">Type</label>
+                <label class="form-label">- Type</label>
                 <input type="text" class="form-control" v-model="type" />
               </div>
             </div>
+            <div class="border-bottom" style="width: 100%; margin-top: 10px" v-if="ports.length > 1"></div>
           </div>
         </div>
       </div>
@@ -227,7 +228,7 @@ const removePort = (idx: number) => {
 
 </script>
 <style scoped>
-.pod-form {
+.generate-form {
   width: 100% !important;
   display: flex;
   gap: 10px;