From 700809890bef1dbd713ec940f5857df820499bca Mon Sep 17 00:00:00 2001
From: JUNGEUNJUNG <dmsej108@strato.co.kr>
Date: Thu, 10 Oct 2024 13:38:55 +0900
Subject: [PATCH] softwareCatalog add k8s install/uninstall modal

---
 .../softwareCatalog/SoftwareCatalogList.vue   |   4 -
 .../applicationInstallationForm.vue           | 160 +++++++++++++++---
 .../components/softwareCatalogLog.vue         |   2 +-
 3 files changed, 140 insertions(+), 26 deletions(-)

diff --git a/applicationFE/src/views/softwareCatalog/SoftwareCatalogList.vue b/applicationFE/src/views/softwareCatalog/SoftwareCatalogList.vue
index b908609..fe631ac 100644
--- a/applicationFE/src/views/softwareCatalog/SoftwareCatalogList.vue
+++ b/applicationFE/src/views/softwareCatalog/SoftwareCatalogList.vue
@@ -274,7 +274,6 @@
                 item.isShow = false;
             })
             catalogList.value = response.data;
-            console.log("catalogList.value : ", catalogList.value)
         } catch(error) {
             console.log(error)
             toast.error('데이터를 가져올 수 없습니다.')
@@ -292,7 +291,6 @@
     }
 
     const searchCatalog = async (e: { keyCode: number; }) => {
-        console.log("e.keyCode : ", e.keyCode)
         if(e.keyCode == 13){
             await _getSoftwareCatalogList();
             await setDockerHubSearch();
@@ -309,7 +307,6 @@
                 dockerHubSearchList.value.push(response.data.data.results[i])
             }
             // dockerHubSearchList.value = response.data.data.results
-            console.log("setDockerHubSearch dockerHubSearchList.value : ", dockerHubSearchList.value)
         } catch(error) {
             console.log(error)
             toast.error('데이터를 가져올 수 없습니다.')
@@ -323,7 +320,6 @@
                 artifactHubSearch.value.push(response.data.data.packages[i])
             }
             // artifactHubSearch.value = response.data.data.packages
-            console.log("setArtifactHubSearch artifactHubSearch.value : ", artifactHubSearch.value)
         } catch(error) {
             console.log(error)
             toast.error('데이터를 가져올 수 없습니다.')
diff --git a/applicationFE/src/views/softwareCatalog/components/applicationInstallationForm.vue b/applicationFE/src/views/softwareCatalog/components/applicationInstallationForm.vue
index 31f564c..43d99d0 100644
--- a/applicationFE/src/views/softwareCatalog/components/applicationInstallationForm.vue
+++ b/applicationFE/src/views/softwareCatalog/components/applicationInstallationForm.vue
@@ -3,35 +3,79 @@
     <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>
+                <h5 class="modal-title">
+                    {{ modalType == 'vm_application_install' ? 'Application installation for VM' : modalType == 'vm_application_uninstall' ? 'Application uninstallation for VM' :
+                    modalType == 'helm_application_install' ? 'Application installation for k8s' : modalType == 'helm_application_uninstall' ? 'Application uninstallation for k8s' : '' }}
+
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="setInit"></button>
             </div>
             <div class="modal-body" style="max-height: calc(100vh - 200px);overflow-y: auto;">
-                <template v-if="modalType == 'vm_application_install'">                
+                <template v-if="modalType == 'vm_application_install' || modalType == 'vm_application_uninstall'">                
                     <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>
+                        <p v-if="modalType == 'vm_application_install'" class="text-muted">Select the namespace where the application will be installed</p>
+                        <p v-else-if="modalType == 'vm_application_uninstall'" class="text-muted">Select the namespace where the application will be uninstalled</p>
+                        <template v-if="nsIdList.length > 0">
+                            <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>
+                        </template>
+                        <template v-else>
+                            <select class="form-select" id="namesapce" v-model="selectNsId" @change="onChangeNsId">
+                                <option value="selectNsId" >{{ selectNsId }}</option>
+                            </select>
+                        </template>
                     </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>
+                        <p v-if="modalType == 'vm_application_install'" class="text-muted">Select the multi-cloud infrastructure information where the application will be deployed</p>
+                        <p v-else-if="modalType == 'vm_application_uninstall'" class="text-muted">Remove the application and associated resources from the multi-cloud infrastructure</p>
+                        <select class="form-select" id="mci-name" :disabled="selectNsId == ''" v-model="selectMci" @change="onChangeMci">
+                            <option v-for="mci in mciList" :value=mci.id :key="mci.name">{{ mci.name }}</option>
+                        </select>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">VM Name</label>
+                        <p class="text-muted">Select the virtual machine (VM) within the chosen multi-cloud infrastructure where the application will be deployed</p>
+                        <select class="form-select" id="mci-name" :disabled="selectMci == ''" v-model="selectVm">
+                            <option v-for="vm in vmList" :value="vm.id" :key="vm.name">{{ vm.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>
+                        <p class="text-muted">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>
+                <template v-else-if="modalType == 'helm_application_install' || modalType == 'helm_application_uninstall'">
+                    <div class="mb-3">
+                        <label class="form-label">Namespace</label>
+                        <p v-if="modalType == 'helm_application_install'" class="text-muted">Select the namespace where the application will be installed</p>
+                        <p v-else-if="modalType == 'helm_application_uninstall'" class="text-muted">Select the namespace where the application will be uninstalled</p>
+                        <template v-if="nsIdList.length > 0">
+                            <select class="form-select" id="namesapce" v-model="selectNsId" @change="onSelectNamespace">
+                                <option v-for="ns in nsIdList" :value=ns.name :key="ns.name">{{ ns.name }}</option>
+                            </select>
+                        </template>
+                        <template v-else>
+                            <select class="form-select" id="namesapce" v-model="selectNsId" @change="onChangeNsId">
+                                <option value="selectNsId" >{{ selectNsId }}</option>
+                            </select>
+                        </template>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">ClusterName</label>
+                        <p v-if="modalType == 'helm_application_install'" class="text-muted">Select the name of the cluster where the application will be deployed</p>
+                        <p v-else-if="modalType == 'helm_application_uninstall'" class="text-muted">Remove the application and associated resources from the multi-cloud infrastructure</p>
+                        <select class="form-select" id="mci-name" :disabled="selectNsId == ''" v-model="selectCluster">
+                            <option v-for="cluster in clusterList" :value=cluster.id :key="cluster.name">{{ cluster.name }}</option>
+                        </select>
+                    </div>
                     <div class="mb-3">
-                        <label class="form-label">Title2</label>
-                        <input type="text" class="form-control" id="sc-title" name="title" placeholder="Application name" />
+                        <label class="form-label">Helm chart</label>
+                        <p class="text-muted">Helm Charts 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>
             </div>
@@ -53,7 +97,7 @@ import { ref } from 'vue';
 import { useToast } from 'vue-toastification';
 import { onMounted, watch, computed } from 'vue';
 import axios from 'axios'
-import _ from 'lodash';
+import _, { slice } from 'lodash';
 
 
 const splitUrl = window.location.host.split(':');
@@ -73,7 +117,11 @@ const modalType = ref("" as string)
 const selectNsId = ref("" as string)
 const nsIdList = ref([] as any)
 const mciList = ref([] as any)
+const vmList = ref([] as any)
 const selectMci = ref("" as string)
+const selectVm = ref("" as string)
+const clusterList = ref([] as any)
+const selectCluster = ref("" as string)
 const inputApplications = ref("" as string)
 watch(modalTitle, async () => {
     popupTitle.value = changeTitle(props.title);
@@ -101,11 +149,20 @@ 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
+        selectNsId.value = nsIdList.value[0].name;
+        if(modalType.value == 'vm_application_install' || modalType.value == 'vm_application_uninstall') {
+            await _getMciName()
+        } else {
+            await _getClusterName()
+        }
     }
 
     if(!_.isEmpty(selectNsId.value)) {
-        await _getMciName();
+        if(modalType.value == 'vm_application_install' || modalType.value == 'vm_application_uninstall') {
+            await _getMciName()
+        } else {
+            await _getClusterName()
+        }
     }
 }
 
@@ -113,29 +170,90 @@ 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
+        selectMci.value = mciList.value[0].name;
+        await _getVmName();
     } else {
         selectMci.value = "";
     }
 }
 
+const _getVmName = async () => {
+    const response = await axios.get(baseUrl + '/cbtumblebug/ns/' + selectNsId.value + '/mci/' + selectMci.value);
+    vmList.value = response.data.vm;
+    if(mciList.value.length > 0) {
+        selectVm.value = vmList.value[0].name;
+    } else {
+        selectVm.value = "";
+    }
+}
+
+const _getClusterName = async () => {
+    const response = await axios.get(baseUrl + '/cbtumblebug/ns/' + selectNsId.value + '/k8scluster');
+    clusterList.value = response.data;
+    if(clusterList.value.length > 0) {
+        selectCluster.value = clusterList.value[0].name;
+    } else {
+        selectCluster.value = "";
+    }
+}
+
 const onChangeNsId = async () => {
     await _getMciName();
 }
 
+const onChangeMci = async () => {
+    await _getVmName();
+}
+
+const onSelectNamespace = async () =>{
+    await _getClusterName();
+}
+
 const runInstall = async () => {
-    if(modalType.value == 'vm_application_install') {
+    if(modalType.value == 'vm_application_install' || modalType.value == 'vm_application_uninstall') {
+        let runUrl = "";
+        if(modalType.value == 'vm_application_install') {
+            runUrl = "/ape/vm/install"
+        } else {
+            runUrl = "/ape/vm/uninstall"
+        }
+
         const appList = inputApplications.value.split(",").map(item => item.trim());
         const param = {
             "namespace": selectNsId.value,
             "mciName": selectMci.value,
+            "vmName": selectVm.value,
             "applications": appList
         }
 
-        const res = await axios.post(baseUrl + '/ape/vm/install', param)
-        if(res.data.message) {
+        const res = await axios.post(baseUrl + runUrl, param)
+        if(res.data.code == 200 && res.data.message) {
             toast.success(res.data.message)
+        } else {
+            toast.error(res.data.message)
+        }
+    } else if(modalType.value == "helm_application_install" || modalType.value == "helm_application_uninstall") {
+        let runUrl = "";
+        if(modalType.value == 'helm_application_install') {
+            runUrl = "/ape/helm/install"
+        } else {
+            runUrl = "/ape/helm/uninstall"
         }
+
+        const appList = inputApplications.value.split(",").map(item => item.trim());
+        const param = {
+            "namespace": selectNsId.value,
+            "clusterName": selectCluster.value,
+            "helmCharts": appList
+        }
+
+        const res = await axios.post(baseUrl + runUrl, param)
+        if(res.data.code == 200 && res.data.message) {
+            toast.success(res.data.message)
+        } else {
+            toast.error(res.data.message)
+        }
+
     }
 
 }
diff --git a/applicationFE/src/views/softwareCatalog/components/softwareCatalogLog.vue b/applicationFE/src/views/softwareCatalog/components/softwareCatalogLog.vue
index 2567ef8..d509606 100644
--- a/applicationFE/src/views/softwareCatalog/components/softwareCatalogLog.vue
+++ b/applicationFE/src/views/softwareCatalog/components/softwareCatalogLog.vue
@@ -61,7 +61,7 @@
   const firstLoadData = ref(false as boolean)
   const splitUrl = window.location.host.split(':');
   const baseUrl = window.location.protocol + '//' + splitUrl[0] + ':18084'
-//   const baseUrl = "http://210.217.178.130:18084";
+  // const baseUrl = "http://210.217.178.130:18084";
 
   const jobName = computed(() => props.jobName);
   watch(jobName, async () => {