Skip to content

Commit

Permalink
Merge pull request #77 from dmsej108/main
Browse files Browse the repository at this point in the history 
softwareCatalog add k8s install/uninstall modal
  • Loading branch information
@hyun357123
hyun357123 authored Oct 10, 2024
2 parents 154d999 + 7008098 commit 8a6ad9d
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 26 deletions.
4 changes: 0 additions & 4 deletions applicationFE/src/views/softwareCatalog/SoftwareCatalogList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,6 @@
item.isShow = false;
})
catalogList.value = response.data;
console.log("catalogList.value : ", catalogList.value)
} catch(error) {
console.log(error)
toast.error('데이터를 가져올 수 없습니다.')
Expand All @@ -292,7 +291,6 @@
}
const searchCatalog = async (e: { keyCode: number; }) => {
console.log("e.keyCode : ", e.keyCode)
if(e.keyCode == 13){
await _getSoftwareCatalogList();
await setDockerHubSearch();
Expand All @@ -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('데이터를 가져올 수 없습니다.')
Expand All @@ -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('데이터를 가져올 수 없습니다.')
Expand Down
160 changes: 139 additions & 21 deletions applicationFE/src/views/softwareCatalog/components/applicationInstallationForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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(':');
Expand All @@ -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);
Expand Down Expand Up @@ -101,41 +149,111 @@ 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()
}
}
}
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)
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion applicationFE/src/views/softwareCatalog/components/softwareCatalogLog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down

0 comments on commit 8a6ad9d

Please sign in to comment.