From 6dbbfef357e07ecd1b1ddf47cd5e92ada843aeb0 Mon Sep 17 00:00:00 2001
From: JUNGEUNJUNG <dmsej108@strato.co.kr>
Date: Tue, 8 Oct 2024 11:04:39 +0900
Subject: [PATCH 1/2] softwarecatalog add vm install modal

---
 .../softwareCatalog/SoftwareCatalogList.vue   |  18 ++-
 .../applicationInstallationForm.vue           | 151 ++++++++++++++++++
 .../components/softwareCatalogForm.vue        |   1 -
 .../components/softwareCatalogLog.vue         |   2 +-
 4 files changed, 167 insertions(+), 5 deletions(-)
 create mode 100644 applicationFE/src/views/softwareCatalog/components/applicationInstallationForm.vue

diff --git a/applicationFE/src/views/softwareCatalog/SoftwareCatalogList.vue b/applicationFE/src/views/softwareCatalog/SoftwareCatalogList.vue
index 9f760e3..b908609 100644
--- a/applicationFE/src/views/softwareCatalog/SoftwareCatalogList.vue
+++ b/applicationFE/src/views/softwareCatalog/SoftwareCatalogList.vue
@@ -60,7 +60,7 @@
                                                     <div>
                                                         <br />
                                                         <div class="btn-list" style="width:70%;" v-for="wf in catalog.refData.workflow" :key="wf.catalogRefIdx">
-                                                            <a class="btn" :class="{'btn-outline-primary': containsText('install', wf.referenceValue), 'btn-outline-danger' : containsText('uninstall', wf.referenceValue)}" style="margin-bottom:10px;">
+                                                            <a class="btn" :class="{'btn-outline-primary': containsText('install', wf.referenceValue), 'btn-outline-danger' : containsText('uninstall', wf.referenceValue)}" style="margin-bottom:10px;" @click="onClickDeploy(wf.referenceValue)" data-bs-toggle='modal' data-bs-target='#install-form'>
                                                                 {{ btnName(wf.referenceValue) }}
                                                             </a><!-- btn-loading -->
                                                             <button class="btn btn-primary" style="text-align: center !important; margin-bottom:10px;" @click="onClickLog(wf.referenceValue)" id='log-btn' data-bs-toggle='modal' data-bs-target='#softwareCatalogLog'>
@@ -210,11 +210,10 @@
         </div>
         <SoftwareCatalogForm :mode="formMode" :catalog-idx="selectCatalogIdx" @get-list="_getSoftwareCatalogList"/>
         <SoftwareCatalogLog :job-name="selectJobName" />
+        <ApplicationInstallationForm :ns-id="nsId" :title="modalTite" />
     </div>
 </template>
 <script setup lang="ts">
-    import { getSoftwareCaltalogList } from '@/api/softwareCatalog'
-    import { type SoftwareCatalog } from '@/views/type/type'
     import { onMounted } from 'vue';
     import { ref } from 'vue';
     import { useToast } from 'vue-toastification';
@@ -222,6 +221,7 @@
     import _ from 'lodash';
     import SoftwareCatalogForm from './components/softwareCatalogForm.vue';
     import SoftwareCatalogLog from './components/softwareCatalogLog.vue';
+    import ApplicationInstallationForm from './components/applicationInstallationForm.vue';
     import '@/resources/css/tabler.min.css'
     import '@/resources/css/demo.min.css'
     import '@/resources/js/demo-theme.min.js'
@@ -239,6 +239,8 @@
     const selectCatalogIdx = ref(0 as number)
     const selectJobName = ref("" as string)
     const formMode = ref('new')
+    const nsId = ref("" as string)
+    const modalTite = ref("" as string)
 
     /**
     * @Title Life Cycle
@@ -246,6 +248,12 @@
     */
     onMounted(async () => {
         searchKeyword.value = ""
+        window.addEventListener("message", async function(event) {
+            const data = event.data;
+            if(data.projectInfo) {
+                nsId.value = data.projectInfo.ns_id;
+            }
+        })
         await _getSoftwareCatalogList()
     })
   
@@ -374,6 +382,10 @@
     const onClickLog = (name: string) => {
         selectJobName.value = name;
     }
+
+    const onClickDeploy = (value: string) => {
+        modalTite.value = value
+    }
  
   
 </script>
diff --git a/applicationFE/src/views/softwareCatalog/components/applicationInstallationForm.vue b/applicationFE/src/views/softwareCatalog/components/applicationInstallationForm.vue
new file mode 100644
index 0000000..31f564c
--- /dev/null
+++ b/applicationFE/src/views/softwareCatalog/components/applicationInstallationForm.vue
@@ -0,0 +1,151 @@
+<template>
+  <div class="modal" id="install-form" tabindex="-1">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">{{ popupTitle }}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" style="max-height: calc(100vh - 200px);overflow-y: auto;">
+                <template v-if="modalType == 'vm_application_install'">                
+                    <div class="mb-3">
+                        <label class="form-label">Namespace</label>
+                        <p>Select the namespace where the application will be installed</p>
+                        <select class="form-select" id="namesapce" v-model="selectNsId" @change="onChangeNsId">
+                            <option v-for="ns in nsIdList" :value=ns.name :key="ns.name">{{ ns.name }}</option>
+                        </select>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">MCI Name</label>
+                        <p>Select the multi-cloud infrastructure information where the application will be deployed</p>
+                        <select class="form-select" id="mci-name" :disabled="selectNsId == ''" v-model="selectMci">
+                            <option v-for="mci in mciList" :value=mci.name :key="mci.name">{{ mci.name }}</option>
+                        </select>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Application</label>
+                        <p>applications to install (e.g. nginx,tomcat,mariadb,redis,grafana,prometheus)</p>
+                        <input type="text" class="form-control" id="sc-title" name="title" placeholder="nginx, tomcat ..." v-model="inputApplications" />
+                    </div>
+                </template>
+                <template v-else>
+                    <div class="mb-3">
+                        <label class="form-label">Title2</label>
+                        <input type="text" class="form-control" id="sc-title" name="title" placeholder="Application name" />
+                    </div>
+                </template>
+            </div>
+            <div class="modal-footer">
+                <a class="btn btn-link link-secondary" data-bs-dismiss="modal" @click="setInit">
+                    Cancel
+                </a>
+                <a class="btn btn-primary ms-auto" data-bs-dismiss="modal" @click="runInstall">
+                    RUN
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useToast } from 'vue-toastification';
+import { onMounted, watch, computed } from 'vue';
+import axios from 'axios'
+import _ from 'lodash';
+
+
+const splitUrl = window.location.host.split(':');
+const baseUrl = window.location.protocol + '//' + splitUrl[0] + ':18084'
+// const baseUrl = "http://210.217.178.130:18084";
+
+interface Props {
+    nsId: string
+    title: string
+}
+const toast = useToast()
+
+const props = defineProps<Props>()
+const modalTitle = computed(() => props.title);
+const popupTitle = ref("" as string)
+const modalType = ref("" as string)
+const selectNsId = ref("" as string)
+const nsIdList = ref([] as any)
+const mciList = ref([] as any)
+const selectMci = ref("" as string)
+const inputApplications = ref("" as string)
+watch(modalTitle, async () => {
+    popupTitle.value = changeTitle(props.title);
+    modalType.value = props.title;
+    await setInit();
+});
+onMounted(async () => {
+    await setInit()
+})
+
+const changeTitle = (text: string) => {
+    return text.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+}
+
+const setInit = async () => {
+    if(_.isEmpty(props.nsId)) {
+        await _getNsId()
+    } else {
+        selectNsId.value = props.nsId
+    }
+  
+}
+
+const _getNsId = async () => {
+    const response = await axios.get(baseUrl + '/cbtumblebug/ns');
+    nsIdList.value = response.data;
+    if(nsIdList.value.length > 0) {
+        selectNsId.value = nsIdList.value[0].name
+    }
+
+    if(!_.isEmpty(selectNsId.value)) {
+        await _getMciName();
+    }
+}
+
+const _getMciName = async () => {
+    const response = await axios.get(baseUrl + '/cbtumblebug/ns/' + selectNsId.value + '/mci');
+    mciList.value = response.data;
+    if(mciList.value.length > 0) {
+        selectMci.value = mciList.value[0].name
+    } else {
+        selectMci.value = "";
+    }
+}
+
+const onChangeNsId = async () => {
+    await _getMciName();
+}
+
+const runInstall = async () => {
+    if(modalType.value == 'vm_application_install') {
+        const appList = inputApplications.value.split(",").map(item => item.trim());
+        const param = {
+            "namespace": selectNsId.value,
+            "mciName": selectMci.value,
+            "applications": appList
+        }
+
+        const res = await axios.post(baseUrl + '/ape/vm/install', param)
+        if(res.data.message) {
+            toast.success(res.data.message)
+        }
+    }
+
+}
+
+</script>
+<style scoped>
+.input-form {
+    width: 100% !important;
+    display: flex;
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+</style>
\ No newline at end of file
diff --git a/applicationFE/src/views/softwareCatalog/components/softwareCatalogForm.vue b/applicationFE/src/views/softwareCatalog/components/softwareCatalogForm.vue
index ac10007..858e644 100644
--- a/applicationFE/src/views/softwareCatalog/components/softwareCatalogForm.vue
+++ b/applicationFE/src/views/softwareCatalog/components/softwareCatalogForm.vue
@@ -98,7 +98,6 @@
 import type { Repository } from '../../type/type';
 import { ref } from 'vue';
 import { useToast } from 'vue-toastification';
-import { createCatalog } from '@/api/softwareCatalog';
 import { onMounted, watch, computed } from 'vue';
 import axios from 'axios'
 
diff --git a/applicationFE/src/views/softwareCatalog/components/softwareCatalogLog.vue b/applicationFE/src/views/softwareCatalog/components/softwareCatalogLog.vue
index 2d12fb7..2567ef8 100644
--- a/applicationFE/src/views/softwareCatalog/components/softwareCatalogLog.vue
+++ b/applicationFE/src/views/softwareCatalog/components/softwareCatalogLog.vue
@@ -30,7 +30,7 @@
           </div>
   
           <div class="modal-footer">
-            <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal" @click="setClear">
+            <a class="btn btn-link link-secondary" data-bs-dismiss="modal" @click="setClear">
               Cancel
             </a>
           </div>

From 5773a82028b354deeb4320455c71459e1fcec72b Mon Sep 17 00:00:00 2001
From: JUNGEUNJUNG <dmsej108@strato.co.kr>
Date: Tue, 8 Oct 2024 17:01:12 +0900
Subject: [PATCH 2/2] Typo fixed

---
 applicationFE/src/router/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/applicationFE/src/router/index.ts b/applicationFE/src/router/index.ts
index c2587cd..9a45b43 100644
--- a/applicationFE/src/router/index.ts
+++ b/applicationFE/src/router/index.ts
@@ -29,7 +29,7 @@ const router = createRouter({
       component: () => import('@/views/repository/RepositoryDetail.vue' as any)
     },
     {
-      path: `/web/sofrwareCatalog/list`,
+      path: `/web/softwareCatalog/list`,
       name: 'softwareCatalogList',
       component: () => import('@/views/softwareCatalog/SoftwareCatalogList.vue' as any)
     },