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.

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

update UI / UI build file #102

Merged
merged 1 commit into from
Nov 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
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