Skip to content

Commit

Permalink
Merge pull request #102 from Strato-YangSungHun/main
Browse files Browse the repository at this point in the history
update UI / UI build file
  • Loading branch information
Strato-YangSungHun authored Nov 29, 2024
2 parents 6a23048 + 77c0ceb commit 8820a11
Show file tree
Hide file tree
Showing 41 changed files with 712 additions and 180 deletions.
57 changes: 19 additions & 38 deletions applicationFE/src/api/softwareCatalog.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,58 +22,42 @@ export const searchArtifacthubhub = (keyword: string) => {
return request.get(`/search/artifacthub/${keyword}`)
}

// install API 변경됨
// export const runVmInstall = (params: {
// namespace: string,
// mciName: string,
// vmName: string,
// applications: string[]
// }) => {
// return request.post(`/ape/vm/install`, params)
// }
// Application 설치 (VM)
export const runVmInstall = (params: {
namespace: string,
mciId: string,
vmId: string,
catalogId: number,
servicePort: number
}) => {
// 추후 POST 방식으로 변경 필요
// return request.post(`/applications/vm/deploy`, params)
return request.get(`/applications/vm/deploy?namespace=${params.namespace}&mciId=${params.mciId}&vmId=${params.vmId}&catalogId=${params.catalogId}&servicePort=${params.servicePort}`, )
}

export const runVmUninstall = (params: {
namespace: string,
mciName: string,
vmName: string,
applications: string[]
// Application Action (VM -> INSTALL, UNINSTALL, RUN, RESTART, STOP)
export const runVmAction = (params: {
operation: string,
applicationStatusId: number,
reason: string
}) => {
return request.post(`/ape/vm/uninstall`, params)
return request.get(`/applications/vm/action?operation=${params.operation}&applicationStatusId=${params.applicationStatusId}&reason=${params.reason}`)
}

// install API 변경됨
// export const runK8SInstall = (params: {
// namespace: string,
// clusterName: string,
// helmCharts: string[]
// }) => {
// return request.post(`/ape/helm/install`, params)
// }
// Application 설치 (K8S)
export const runK8SInstall = (params: {
namespace: string,
clusterName: string,
helmCharts: string[]
catalogId: number
}) => {
return request.post(`/applications/k8s/deploy`, params)
return request.get(`/applications/k8s/deploy?namespace=${params.namespace}&clusterName=${params.clusterName}&catalogId=${params.catalogId}`)
}

export const runK8SUninstall = (params: {
namespace: string,
clusterName: string,
helmCharts: string[]
// Application Action (K8S -> INSTALL, UNINSTALL, RUN, RESTART, STOP)
export const runK8SAction = (params: {
operation: string,
applicationStatusId: number,
reason: string
}) => {
return request.post(`/ape/helm/uninstall`, params)
return request.get(`/applications/k8s/action?operation=${params.operation}&applicationStatusId=${params.applicationStatusId}&reason=${params.reason}`)
}

export const vmSpecCheck = (params: {
Expand Down Expand Up @@ -105,12 +89,9 @@ export function updateSoftwareCatalog(params: any) {
return request.put(`/catalog/software`, params)
}

export function getVmApplicationsStatus() {
return request.get(`/applications/vm/groups`)
}

export function getK8sApplicationsStatus() {
return request.get(`/applications/k8s/groups`)
export function getApplicationsStatus() {
// return request.get(`/applications/vm/groups`)
return request.get(`/applications/groups`)
}

export function applicationAction(
Expand Down
1 change: 1 addition & 0 deletions applicationFE/src/common/request.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useToast } from "vue-toastification";

const splitUrl = window.location.host.split(':');
const baseUrl = window.location.protocol + '//' + splitUrl[0] + ':18084'
// const baseUrl = 'http://10.10.20.193:18084'
const toast = useToast();
const service = axios.create({
// baseURL: process.env.VUE_APP_API_URL,
Expand Down
10 changes: 5 additions & 5 deletions applicationFE/src/views/repository/RepositoryList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const setColumns = () => {
{
title: "Name",
field: "name",
width: 400,
width: '15%',
cellClick: function (e, cell) {
e.stopPropagation();
selectRepositoryName.value = cell.getRow().getData().name
Expand All @@ -91,21 +91,21 @@ const setColumns = () => {
{
title: "Format",
field: "format",
width: 300
width: '10%'
},
{
title: "URL",
field: "url",
width: 410
width: '40%'
},
{
title: "Type(hosted)",
field: "type",
width: 400
width: '15%'
},
{
title: "Action",
width: 400,
width: '20%',
formatter: editDeleteButtonFormatter,
cellClick: function (e, cell) {
const target = e.target as HTMLElement;
Expand Down
18 changes: 17 additions & 1 deletion applicationFE/src/views/softwareCatalog/SoftwareCatalog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,14 @@
Apps Status
</a>
</li>

<!-- Repository -->
<li class="nav-item">
<a href="#tabs-repository" class="nav-link" data-bs-toggle="tab">
<IconFolder class="icon me-2" width="24" height="24" stroke-width="2" />
Repository
</a>
</li>
</ul>
</div>

Expand All @@ -97,6 +105,13 @@
<ApplicationStatusList />
</div>
</div>

<!-- Repository -->
<div class="tab-pane" id="tabs-repository">
<div>
<RepositoryList />
</div>
</div>
</div>
</div>
</div>
Expand All @@ -113,10 +128,11 @@
</template>
<script setup lang="ts">
// Components
import { IconActivityHeartbeat, IconApps } from '@tabler/icons-vue'
import { IconActivityHeartbeat, IconApps, IconFolder } from '@tabler/icons-vue'
import ApplicationInstallationForm from '@/views/softwareCatalog/components/applicationInstallationForm.vue';
import ApplicationStatusList from '@/views/softwareCatalog/components/applicationStatusList.vue';
import SoftwareCatalogList from '@/views/softwareCatalog/components/softwareCatalogList.vue';
import RepositoryList from '@/views/repository/RepositoryList.vue';
// ETC
import { onMounted } from 'vue';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<template>
<div class="modal" id="action-confirm" tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
{{ applicationName }} {{ modalTitle }}
<span v-if="type">({{ type }})</span>
</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;">

<div class="mb-3">
<label class="form-label">Reason</label>
<p class="text-muted">
Please enter a reason
</p>
<textarea class="form-control" rows="10" placeholder="Reason" v-model="reason" />
</div>

</div>

<!-- Footer -->
<div
class="modal-footer d-flex justify-content-between">
<a
class="btn btn-link link-secondary"
data-bs-dismiss="modal"
@click="setInit">
Cancel
</a>

<div>
<button
class="btn btn-primary ms-auto"
data-bs-dismiss="modal"
@click="onClickAction" >
{{ modalTitle }}
</button>
</div>
</div>
</div>
</div>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useToast } from 'vue-toastification';
import { computed } from 'vue';
import { runK8SAction, runVmAction } from '@/api/softwareCatalog';
const toast = useToast()
interface Props {
title: string
applicationStatusId: number
type: string
applicationName: string
}
const props = defineProps<Props>()
const emit = defineEmits(['getApplicationsStatusList'])
const modalTitle = computed(() => props.title);
const applicationStatusId = computed(() => props.applicationStatusId)
const type = computed(()=> props.type)
const reason = ref('' as string)
const setInit = () => {
reason.value = ''
}
const onClickAction = async () => {
setInit()
let result
const params = {
operation: modalTitle.value,
applicationStatusId: applicationStatusId.value,
reason: reason.value
}
if (type.value === 'VM') {
const { data } = await runVmAction(params)
result = data
}
else if (type.value === 'K8S') {
const { data } = await runK8SAction(params)
result = data
}
emit('getApplicationsStatusList')
if (result) {
toast.success(`${modalTitle.value} Action SUCCESS`)
}
else {
toast.error(`${modalTitle.value} Action FAIL`)
}
}
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ import { onMounted, watch, computed } from 'vue';
// @ts-ignore
import _, { slice } from 'lodash';
import { getNsInfo, getMciInfo, getVmInfo, getClusterInfo } from '@/api/tumblebug'
import { getSoftwareCatalogList, k8sSpecCheck, runK8SInstall, runK8SUninstall, runVmInstall, runVmUninstall, vmSpecCheck } from '@/api/softwareCatalog'
import { getSoftwareCatalogList, k8sSpecCheck, runK8SInstall, runK8SAction, runVmInstall, runVmAction, vmSpecCheck } from '@/api/softwareCatalog'
import { type SoftwareCatalog } from '@/views/type/type'
interface Props {
Expand Down Expand Up @@ -511,7 +511,7 @@ const runInstall = async () => {
if (modalTitle.value == 'Application Installation') {
res = await runVmInstall(params)
} else {
res = await runVmUninstall(params)
res = await runVmAction(params)
}
if(res.data) {
Expand All @@ -525,15 +525,15 @@ const runInstall = async () => {
// History : 처음 설계와 방향이 달라져 현재는 Application 1개만 보냄 (기존에는 여러개의 APP을 받을 수 있었음)
appList = inputApplications.value.split(",").map(item => item.toLowerCase().trim());
params = {
"namespace": selectNsId.value,
"clusterName": selectCluster.value,
"helmCharts": appList
namespace: selectNsId.value,
clusterName: selectCluster.value,
catalogId: selectedCatalogIdx.value,
}
if(modalTitle.value == 'Application Installation') {
res = await runK8SInstall(params)
} else {
res = await runK8SUninstall(params)
res = await runK8SAction(params)
}
if(res.data) {
Expand Down
Loading

0 comments on commit 8820a11

Please sign in to comment.