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 update issue fixed #63

Merged
merged 4 commits into from
Oct 7, 2024
Merged

softwareCatalog update issue fixed #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
40a2647
softwareCatalog update issue fixed
dmsej108 Sep 30, 2024
19d66da
Merge branch 'm-cmp:main' into main
dmsej108 Oct 2, 2024
cae8f22
software catalog add log modal
dmsej108 Oct 7, 2024
3a9957f
Merge branch 'm-cmp:main' into main
dmsej108 Oct 7, 2024
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
63 changes: 57 additions & 6 deletions applicationFE/src/views/softwareCatalog/SoftwareCatalogList.vue
View file
Open in desktop
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>
47 changes: 32 additions & 15 deletions applicationFE/src/views/softwareCatalog/components/softwareCatalogForm.vue
View file
Open in desktop
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
100 changes: 100 additions & 0 deletions applicationFE/src/views/softwareCatalog/components/softwareCatalogLog.vue
View file
Open in desktop
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>