Skip to content

Commit

Permalink
Merge pull request #63 from dmsej108/main
Browse files Browse the repository at this point in the history
softwareCatalog update issue fixed
  • Loading branch information
Strato-YangSungHun authored Oct 7, 2024
2 parents 8a724f2 + 3a9957f commit 1357d5a
Show file tree
Hide file tree
Showing 3 changed files with 189 additions and 21 deletions.
63 changes: 57 additions & 6 deletions applicationFE/src/views/softwareCatalog/SoftwareCatalogList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,26 @@
{{ catalog.catalogDescription }}
<div>
<br />
<strong>연동 workflow</strong>
<div class="btn-list" style="width:70%;" v-for="wf in catalog.refData.workflow" :key="wf.catalogRefIdx">
<a class="btn" :class="{'btn-outline-primary': containsText('install', wf.referenceValue), 'btn-outline-danger' : containsText('uninstall', wf.referenceValue)}" style="margin-bottom:10px;">
{{ btnName(wf.referenceValue) }}
</a><!-- btn-loading -->
<button class="btn btn-primary" style="text-align: center !important; margin-bottom:10px;" @click="onClickLog(wf.referenceValue)" id='log-btn' data-bs-toggle='modal' data-bs-target='#softwareCatalogLog'>
&nbsp;LOG&nbsp;
</button>
<!-- <a href="#" class="btn btn-outline-danger">Application uninstallation for VM</a>
<button class="btn btn-primary" style="text-align: center !important;">&nbsp;LOG&nbsp;</button>
<a href="#" class="btn btn-outline-primary">Application installation for Kubernetes using Helm</a>
<button class="btn btn-primary" style="text-align: center !important;">&nbsp;LOG&nbsp;</button>
<a href="#" class="btn btn-outline-danger">Application uninstallation for Kubernetes using Helm</a>
<button class="btn btn-primary" style="text-align: center !important;">&nbsp;LOG&nbsp;</button> -->
</div>
<br />

<!-- <strong>연동 workflow</strong>
<ul :id="`${idx}-workflow-ul`">
<template v-if="hasProperty(catalog.refData, 'WORKFLOW')">
<template v-for="wf in catalog.refData.WORKFLOW" >
<template v-if="hasProperty(catalog.refData, 'workflow')">
<template v-for="wf in catalog.refData.workflow" >
<li>
<a href="" class="btn">{{wf.referenceValue}}</a>
</li>
Expand All @@ -73,7 +89,8 @@
<a href="">등록된 워크플로우가 없습니다.</a>
</li>
</template>
</ul>
</ul> -->

<br />
<strong>관련 정보</strong>
<ul :id="`${idx}-entity-ul`">
Expand All @@ -85,6 +102,7 @@
</template>
</template>
</ul>

<strong>TAGS</strong>
<ul :id="`${idx}-tag-ul`">
<template v-if="hasProperty(catalog.refData, 'TAG')">
Expand Down Expand Up @@ -128,7 +146,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
<a class="dropdown-item" @click="onClickDockerHubSearch">
해당 페이지로 이동
</a>
<a class="dropdown-item" href="#">
Expand Down Expand Up @@ -169,7 +187,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
<a class="dropdown-item" @click="onClickArtifactHub">
해당 페이지로 이동
</a>
<a class="dropdown-item" href="#">
Expand All @@ -191,6 +209,7 @@
</div>
</div>
<SoftwareCatalogForm :mode="formMode" :catalog-idx="selectCatalogIdx" @get-list="_getSoftwareCatalogList"/>
<SoftwareCatalogLog :job-name="selectJobName" />
</div>
</template>
<script setup lang="ts">
Expand All @@ -202,6 +221,7 @@
import axios from 'axios'
import _ from 'lodash';
import SoftwareCatalogForm from './components/softwareCatalogForm.vue';
import SoftwareCatalogLog from './components/softwareCatalogLog.vue';
import '@/resources/css/tabler.min.css'
import '@/resources/css/demo.min.css'
import '@/resources/js/demo-theme.min.js'
Expand All @@ -217,6 +237,7 @@
const dockerHubSearchList = ref([] as any)
const artifactHubSearch = ref([] as any)
const selectCatalogIdx = ref(0 as number)
const selectJobName = ref("" as string)
const formMode = ref('new')
/**
Expand Down Expand Up @@ -245,6 +266,7 @@
item.isShow = false;
})
catalogList.value = response.data;
console.log("catalogList.value : ", catalogList.value)
} catch(error) {
console.log(error)
toast.error('데이터를 가져올 수 없습니다.')
Expand Down Expand Up @@ -330,6 +352,28 @@
formMode.value = "new"
selectCatalogIdx.value = 0;
}
const onClickDockerHubSearch = () => {
let dockerHubUrl = `https://hub.docker.com/search?q=${searchKeyword.value}`;
window.open(dockerHubUrl, '_blank');
}
const onClickArtifactHub = () => {
let artifactHubUrl = `https://artifacthub.io/packages/search?ts_query_web=${searchKeyword.value}&sort=relevance&page=1`;
window.open(artifactHubUrl, '_blank');
}
const containsText = (text: any, refVal: string | any[]) => {
return refVal.includes(text);
}
const btnName = (text: string) => {
return text.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
}
const onClickLog = (name: string) => {
selectJobName.value = name;
}
</script>
Expand All @@ -341,4 +385,11 @@
body {
font-feature-settings: "cv03", "cv04", "cv11";
}
.btn-grid-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -130,8 +130,6 @@ onMounted(async () => {
})
const setInit = async () => {
console.log("setInit props.catalogIdx : ", props.catalogIdx)
console.log("porps.mode : ", props.mode)
if(props.mode == 'update') {
await _getSoftwareCatalogDetail()
} else {
Expand Down Expand Up @@ -193,29 +191,48 @@ const handleFileChange = (event: any) => {
}
const createSoftwareCatalog = async () => {
if(props.mode == 'new') {
const formData = new FormData();
formData.append('iconFile', files.value);
catalogDto.value.catalogRefData = refData.value;
formData.append('catalogDto', new Blob([JSON.stringify(catalogDto.value)], {
type: 'application/json'
}));
const formData = new FormData();
formData.append('iconFile', files.value);
catalogDto.value.catalogRefData = refData.value;
formData.append('catalogDto', new Blob([JSON.stringify(catalogDto.value)], {
type: 'application/json'
}));
if(props.mode == 'new') {
const response = await axios.post(baseUrl + '/catalog/software', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
if(response.data) {
toast.success('등록되었습니다.')
emit('get-list')
if(response.data.data == null) {
toast.error('등록 할 수 없습니다.')
setInit();
} else {
toast.success('등록되었습니다.')
emit('get-list')
}
} else {
toast.error('등록 할 수 없습니다.')
setInit();
}
} else {
const response = await axios.put(baseUrl + '/catalog/software')
const response = await axios.put(baseUrl + '/catalog/software', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
if(response.data) {
toast.success('수정되었습니다.')
emit('get-list')
} else {
toast.error('수정 할 수 없습니다.')
setInit();
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<template>
<div class="modal" id="softwareCatalogLog" tabindex="-1">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-body text-left py-4">
<h3 class="mb-5">
Build Log
<div v-if="!firstLoadData" class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</h3>
<div>
<div v-if="buildLogList.length <= 0">
<p class="text-secondary">No Data</p>
</div>
<div v-else v-for="buildLog in buildLogList" :key="buildLog.buildIdx">
<div class="card mb-3">
<div class="card-header" @click="onClickedBuildIdx(buildLog.buildIdx)" style="cursor: pointer;">
<h3 class="card-title">{{ buildLog.buildIdx }}</h3>
</div>
<div v-if="clickedBuildIdx === buildLog.buildIdx" class="card-body">
<textarea :value="buildLog.buildLog" disabled style="width: 100%;" rows="20"></textarea>
<!-- <p class="text-secondary">{{buildLog.buildLog}}</p> -->
</div>
</div>
</div>
</div>
</div>

<div class="modal-footer">
<a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal" @click="setClear">
Cancel
</a>
</div>

</div>
</div>
</div>
</template>

<script setup lang="ts">
// import type { Oss, OssType } from '@/views/type/type';
import { ref } from 'vue';
import { useToast } from 'vue-toastification';
import { onMounted } from 'vue';
import { computed } from 'vue';
import { watch } from 'vue';
import axios from 'axios'
const toast = useToast()
/**
* @Title Props / Emit
*/
interface Props {
jobName: string
}
const props = defineProps<Props>()
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 jobName = computed(() => props.jobName);
watch(jobName, async () => {
firstLoadData.value = false
await setInit();
});
/**
* @Title 초기화 Method
* @Desc
*/
const buildLogList = ref([] as any)
const setInit = async () => {
buildLogList.value = []
const response = await axios.get(baseUrl + '/ape/log/' + jobName.value)
buildLogList.value = response.data.data;
firstLoadData.value = true;
}
const setClear = () => {
buildLogList.value = []
clickedBuildIdx.value = 1
}
const clickedBuildIdx = ref(1 as number)
const onClickedBuildIdx = (buildIdx: number) => {
if (clickedBuildIdx.value === buildIdx) {
clickedBuildIdx.value = 0
}
else {
clickedBuildIdx.value = buildIdx
}
}
</script>

0 comments on commit 1357d5a

Please sign in to comment.