Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

softwareCatalog add k8s install/uninstall modal #77

Merged
merged 1 commit into from
Oct 10, 2024
Merged

softwareCatalog add k8s install/uninstall modal #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions applicationFE/src/views/softwareCatalog/SoftwareCatalogList.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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