bsm-lab
/
dfxconsole
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects Releases Wiki Activity

에이전트 설정 일반 부분 로직 완료, DropBox 로직 완료

Browse Source
main
icksishu@gmail.com 1 month ago
parent bda3207d19
commit 9911a401fd
1 changed files with 108 additions and 70 deletions
Show Stats Download Patch File Download Diff File

176
src/main/front/src/components/AgentConfigView.vue
Unescape View File

@ -54,8 +54,13 @@ const agentConfigDeleted = {
logging: { logging: {
packages: [], packages: [],
}, },
dropBoxConfig: {
dropBoxList: [],
},
} }
window.debugData = agentConfig
onMounted(() => { onMounted(() => {
if (modalEl.value) { if (modalEl.value) {
// 인스턴스가 있으면 재사용, 없으면 생성 // 인스턴스가 있으면 재사용, 없으면 생성
@ -133,7 +138,7 @@ function deleteKnownAgent() {
if (agentConfig.knownAgentList[i].selected) { if (agentConfig.knownAgentList[i].selected) {
let splicedList = agentConfig.knownAgentList.splice(i, 1) let splicedList = agentConfig.knownAgentList.splice(i, 1)
if (Object.keys(splicedList[0]).indexOf('added') == -1) { if (Object.keys(splicedList[0]).indexOf('added') == -1) {
agentConfigDeleted.knownAgentList.push(splicedList) agentConfigDeleted.knownAgentList.push(splicedList[0])
} }
} }
} }
@ -163,7 +168,7 @@ function deleteDataSource() {
if (agentConfig.dataSourceConfig[i].selected) { if (agentConfig.dataSourceConfig[i].selected) {
let splicedList = agentConfig.dataSourceConfig.splice(i, 1) let splicedList = agentConfig.dataSourceConfig.splice(i, 1)
if (Object.keys(splicedList[0]).indexOf('added') == -1) { if (Object.keys(splicedList[0]).indexOf('added') == -1) {
agentConfigDeleted.dataSourceConfig.push(splicedList) agentConfigDeleted.dataSourceConfig.push(splicedList[0])
} }
} }
} }
@ -174,13 +179,14 @@ function addLoggingPackage() {
} }
function deleteLoggingPackage() { function deleteLoggingPackage() {
for (let i = agentConfig.dataSourceConfig.length - 1; i >= 0; i--) { const checkboxList = document.getElementsByClassName('agent-config-logging-packages-checkbox')
if (agentConfig.dataSourceConfig[i].selected) { for (let i = checkboxList.length - 1; i >= 0; i--) {
let splicedList = agentConfig.dataSourceConfig.splice(i, 1) if (checkboxList[i].checked) {
if (Object.keys(splicedList[0]).indexOf('added') == -1) { agentConfig.logging.packages.splice(i, 1)
agentConfigDeleted.dataSourceConfig.push(splicedList)
} }
} }
for (let i = checkboxList.length - 1; i >= 0; i--) {
checkboxList[i].checked = false
} }
} }
@ -196,6 +202,31 @@ function changeLoggingPackageName(loggingPackageObject, loggingPackageName, newL
delete loggingPackageObject[loggingPackageName] delete loggingPackageObject[loggingPackageName]
} }
// dropBox 한 줄 추가
function addDropBox() {
const dropBox = {
dropBoxId: '',
taskType: 'RECEIVE_DB_TO_DB_SAVE',
dataSourceId: '',
sqlId: '',
description: '',
added: true,
}
agentConfig.dropBoxConfig.dropBoxList.push(dropBox)
}
// 선택된 dropBox 삭제
function deleteDropBox() {
for (let i = agentConfig.dropBoxConfig.dropBoxList.length - 1; i >= 0; i--) {
if (agentConfig.dropBoxConfig.dropBoxList[i].selected) {
let splicedList = agentConfig.dropBoxConfig.dropBoxList.splice(i, 1)
if (Object.keys(splicedList[0]).indexOf('added') == -1) {
agentConfigDeleted.dropBoxConfig.dropBoxList.push(splicedList[0])
}
}
}
}
defineExpose({ defineExpose({
open, open,
close, close,
@ -445,7 +476,7 @@ defineExpose({
</thead> </thead>
<tbody class="table-group-divider"> <tbody class="table-group-divider">
<tr v-if="agentConfig.logging.packages.length > 0" v-for="(loggingPackage, rowIndex) in agentConfig.logging.packages"> <tr v-if="agentConfig.logging.packages.length > 0" v-for="(loggingPackage, rowIndex) in agentConfig.logging.packages">
<td scope="row" class="text-center"><input type="checkbox" class="form-check-input" /></td> <td scope="row" class="text-center"><input type="checkbox" class="form-check-input agent-config-logging-packages-checkbox" /></td>
<template v-for="(level, packageName) in loggingPackage" :key="packageName"> <template v-for="(level, packageName) in loggingPackage" :key="packageName">
<td> <td>
<input type="text" class="form-control" :value="packageName" @change="changeLoggingPackageName(loggingPackage, packageName, $event.target.value)" /> <input type="text" class="form-control" :value="packageName" @change="changeLoggingPackageName(loggingPackage, packageName, $event.target.value)" />
@ -476,19 +507,19 @@ defineExpose({
<div class="tab-pane fade tab-pane-scroll" id="dropbox-tab-pane" role="tabpanel" aria-labelledby="dropbox-tab" tabindex="0"> <div class="tab-pane fade tab-pane-scroll" id="dropbox-tab-pane" role="tabpanel" aria-labelledby="dropbox-tab" tabindex="0">
<div class="row mb-2"> <div class="row mb-2">
<div class="col-md-12"> <div class="col-md-12">
<h5>DropBox General</h5> <h5>드롭박스 일반(DropBox General)</h5>
</div> </div>
</div> </div>
<div class="row mb-2"> <div class="row mb-2">
<div class="col-md-5"> <div class="col-md-5">
<div class="input-group"> <div class="input-group">
<span class="input-group-text" id="agent-config-received-message-storage-root-label">receivedMessageStorageRoot</span> <span class="input-group-text" id="agent-config-received-message-storage-root-label">수신 메시지 저장 경로(receivedMessageStorageRoot)</span>
<input type="text" class="form-control" id="agent-config-received-message-storage-root-input" aria-describedby="agent-config-received-message-storage-root-label agent-config-received-message-storage-root-input" v-model="agentConfig.dropBoxConfig.receivedMessageStorageRoot" /> <input type="text" class="form-control" id="agent-config-received-message-storage-root-input" aria-describedby="agent-config-received-message-storage-root-label agent-config-received-message-storage-root-input" v-model="agentConfig.dropBoxConfig.receivedMessageStorageRoot" />
</div> </div>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<div class="input-group"> <div class="input-group">
<span class="input-group-text" id="agent-config-processed-message-storage-root-label">processedMessageStorageRoot</span> <span class="input-group-text" id="agent-config-processed-message-storage-root-label">처리 메시지 저장 경로(processedMessageStorageRoot)</span>
<input type="text" class="form-control" id="agent-config-processed-message-storage-root-input" aria-describedby="agent-config-processed-message-storage-root-label agent-config-processed-message-storage-root-input" v-model="agentConfig.dropBoxConfig.processedMessageStorageRoot" /> <input type="text" class="form-control" id="agent-config-processed-message-storage-root-input" aria-describedby="agent-config-processed-message-storage-root-label agent-config-processed-message-storage-root-input" v-model="agentConfig.dropBoxConfig.processedMessageStorageRoot" />
</div> </div>
</div> </div>
@ -496,13 +527,13 @@ defineExpose({
<div class="row mb-2"> <div class="row mb-2">
<div class="col-md-5"> <div class="col-md-5">
<div class="input-group"> <div class="input-group">
<span class="input-group-text" id="agent-config-failure-message-storage-root-label">failureMessageStorageRoot</span> <span class="input-group-text" id="agent-config-failure-message-storage-root-label">실패 메시지 저장 경로(failureMessageStorageRoot)</span>
<input type="text" class="form-control" id="agent-config-failure-message-storage-root-input" aria-describedby="agent-config-failure-message-storage-root-label agent-config-failure-message-storage-root-input" v-model="agentConfig.dropBoxConfig.failureMessageStorageRoot" /> <input type="text" class="form-control" id="agent-config-failure-message-storage-root-input" aria-describedby="agent-config-failure-message-storage-root-label agent-config-failure-message-storage-root-input" v-model="agentConfig.dropBoxConfig.failureMessageStorageRoot" />
</div> </div>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<div class="input-group"> <div class="input-group">
<span class="input-group-text" id="agent-config-manual-message-storage-root-label">manualMessageStorageRoot</span> <span class="input-group-text" id="agent-config-manual-message-storage-root-label">수동 메시지 저장 경로(manualMessageStorageRoot)</span>
<input type="text" class="form-control" id="agent-config-manual-message-storage-root-input" aria-describedby="agent-config-manual-message-storage-root-label agent-config-manual-message-storage-root-input" v-model="agentConfig.dropBoxConfig.manualMessageStorageRoot" /> <input type="text" class="form-control" id="agent-config-manual-message-storage-root-input" aria-describedby="agent-config-manual-message-storage-root-label agent-config-manual-message-storage-root-input" v-model="agentConfig.dropBoxConfig.manualMessageStorageRoot" />
</div> </div>
</div> </div>
@ -510,13 +541,13 @@ defineExpose({
<div class="row mb-2"> <div class="row mb-2">
<div class="col-md-5"> <div class="col-md-5">
<div class="input-group"> <div class="input-group">
<span class="input-group-text" id="agent-config-drop-box-thread-pool-size-label">threadPoolSize</span> <span class="input-group-text" id="agent-config-drop-box-thread-pool-size-label">드롭박스 처리 쓰레드풀 크기(threadPoolSize)</span>
<input type="number" class="form-control" id="agent-config-drop-box-thread-pool-size-input" aria-describedby="agent-config-drop-box-thread-pool-size-label agent-config-drop-box-thread-pool-size-input" v-model="agentConfig.dropBoxConfig.threadPoolSize" /> <input type="number" class="form-control" id="agent-config-drop-box-thread-pool-size-input" aria-describedby="agent-config-drop-box-thread-pool-size-label agent-config-drop-box-thread-pool-size-input" v-model="agentConfig.dropBoxConfig.threadPoolSize" />
</div> </div>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<div class="input-group"> <div class="input-group">
<span class="input-group-text" id="agent-config-drop-box-retent-days-of-processed-message-label">retentionDaysOfProcessedMessage</span> <span class="input-group-text" id="agent-config-drop-box-retent-days-of-processed-message-label">메시지 파일 유지 기간(retentionDaysOfProcessedMessage)</span>
<input type="number" class="form-control" id="agent-config-drop-box-retent-days-of-processed-message-input" aria-describedby="agent-config-drop-box-retent-days-of-processed-message-label agent-config-drop-box-retent-days-of-processed-message-input" v-model="agentConfig.dropBoxConfig.retentionDaysOfProcessedMessage" /> <input type="number" class="form-control" id="agent-config-drop-box-retent-days-of-processed-message-input" aria-describedby="agent-config-drop-box-retent-days-of-processed-message-label agent-config-drop-box-retent-days-of-processed-message-input" v-model="agentConfig.dropBoxConfig.retentionDaysOfProcessedMessage" />
</div> </div>
</div> </div>
@ -524,28 +555,36 @@ defineExpose({
<hr /> <hr />
<div class="row m-1"> <div class="row m-1">
<div class="card p-0"> <div class="card p-0">
<div class="card-header"><h5>dropBoxList</h5></div> <div class="card-header d-flex">
<div class="card-body"> <h5 class="mb-0">드롭박스 목록 설정(dropBoxList)</h5>
<table class="table table-striped table-bordered align-middle"> <div class="ms-auto">
<button type="button" class="btn btn-sm btn-success" @click.prevent="addDropBox">추가</button>
<button type="button" class="btn btn-sm btn-danger ms-2" @click.prevent="deleteDropBox">삭제</button>
</div>
</div>
<div class="card-body table-scroll">
<table class="table table-striped table-bordered align-middle table-sticky">
<thead> <thead>
<tr> <tr>
<th scope="col" class="text-center">dropBoxId</th> <th scope="col" class="text-center">선택</th>
<th scope="col" class="text-center">taskType</th> <th scope="col" class="text-center">드롭박스ID (dropBoxId)</th>
<th scope="col" class="text-center">dataSourceId</th> <th scope="col" class="text-center">동작 방식 (taskType)</th>
<th scope="col" class="text-center">sqlId</th> <th scope="col" class="text-center">데이터소스ID (dataSourceId)</th>
<th scope="col" class="text-center">description</th> <th scope="col" class="text-center">SQL ID(sqlId)</th>
<th scope="col" class="text-center">설명 (description)</th>
</tr> </tr>
</thead> </thead>
<tbody class="table-group-divider"> <tbody class="table-group-divider">
<tr v-if="agentConfig.dropBoxConfig.dropBoxList.length > 0" v-for="dropBox in agentConfig.dropBoxConfig.dropBoxList" :key="dropBox.dropBoxId"> <tr v-if="agentConfig.dropBoxConfig.dropBoxList.length > 0" v-for="dropBox in agentConfig.dropBoxConfig.dropBoxList" :key="dropBox.dropBoxId">
<td scope="row">{{ dropBox.dropBoxId }}</td> <td scope="row" class="text-center"><input type="checkbox" class="form-check-input" v-model="dropBox.selected" /></td>
<td>{{ dropBox.taskType }}</td> <td><input type="text" class="form-control" v-model="dropBox.dropBoxId" /></td>
<td>{{ dropBox.dataSourceId }}</td> <td><input type="text" class="form-control" v-model="dropBox.taskType" /></td>
<td>{{ dropBox.sqlId }}</td> <td><input type="text" class="form-control" v-model="dropBox.dataSourceId" /></td>
<td>{{ dropBox.description }}</td> <td><input type="text" class="form-control" v-model="dropBox.sqlId" /></td>
<td><input type="text" class="form-control" v-model="dropBox.description" /></td>
</tr> </tr>
<tr v-else> <tr v-else>
<td scope="row" class="text-center" colspan="5">no dropBox.</td> <td scope="row" class="text-center" colspan="6">no dropBox.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -572,8 +611,8 @@ defineExpose({
<div class="row m-1"> <div class="row m-1">
<div class="card p-0"> <div class="card p-0">
<div class="card-header"><h5>postmanList</h5></div> <div class="card-header"><h5>postmanList</h5></div>
<div class="card-body data-table-wrapper"> <div class="card-body table-scroll">
<table class="table table-striped table-bordered align-middle data-table"> <table class="table table-striped table-bordered align-middle table-sticky">
<thead> <thead>
<tr> <tr>
<th scope="col" class="text-center" rowspan="2">postmanId</th> <th scope="col" class="text-center" rowspan="2">postmanId</th>
@ -627,8 +666,8 @@ defineExpose({
<style scoped> <style scoped>
/* 모달이 화면을 거의 꽉 채우게 */ /* 모달이 화면을 거의 꽉 채우게 */
.data-modal-dialog { .data-modal-dialog {
max-width: calc(100% - 4vh); /* 좌우 95% */ max-width: calc(100% - 4vh);
margin: 2vh auto; /* 위아래 여백 조금 */ margin: 2vh auto;
} }
/* 모달 전체 높이를 화면의 95% 정도로 */ /* 모달 전체 높이를 화면의 95% 정도로 */
@ -641,54 +680,26 @@ defineExpose({
/* 헤더/푸터 빼고 나머지 영역을 테이블 영역으로 */ /* 헤더/푸터 빼고 나머지 영역을 테이블 영역으로 */
.data-modal-body { .data-modal-body {
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; /* 여기서는 스크롤 안 하고 */ overflow: hidden;
padding: 0.5rem; padding: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
/* 실제 스크롤이 일어나는 영역 */
.data-table-wrapper {
height: 100%;
overflow: auto; /* 세로/가로 스크롤 모두 */
}
/* 컬럼이 많을 때 한 줄에 계속 붙게(가로 스크롤) */
.data-table {
white-space: nowrap;
border-collapse: separate;
border-spacing: 0;
}
/* 헤더 전체를 sticky 처리 */
.data-table thead {
position: sticky;
top: 0;
z-index: 2;
}
/* 헤더 배경/글자 색 지정 */
.data-table thead th {
background-color: #343a40;
color: #fff;
}
/* 모달 header 패딩 조정 */ /* 모달 header 패딩 조정 */
.modal-header { .modal-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
/* 상·하 4px, 좌·우는 기존처럼 16px */
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
/* 큰 스위치용 커스텀 클래스 */ /* 큰 스위치용 커스텀 클래스 */
.form-switch.form-switch-lg .form-check-input { .form-switch.form-switch-lg .form-check-input {
width: 3rem; /* 가로 길이 늘리기 */ width: 3rem;
height: 1.5rem; /* 세로 길이 늘리기 */ height: 1.5rem;
} }
/* 너무 붙어 보이면 왼쪽 여백 조정 */
.form-switch.form-switch-lg { .form-switch.form-switch-lg {
padding-left: 3.5rem; padding-left: 3.5rem;
padding-top: 0.2rem; padding-top: 0.2rem;
@ -696,13 +707,40 @@ defineExpose({
.tab-content { .tab-content {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; /* 이거 중요: 자식이 줄어들 수 있어야 스크롤 생김 */ min-height: 0;
} }
/* 실제 스크롤이 생기는 곳: general 탭 pane */
.tab-pane-scroll { .tab-pane-scroll {
height: 100%; height: 100%; /* tab-content 높이에 맞추기 */
overflow-y: auto; /* 세로 스크롤만 */ overflow-y: auto; /* 세로 스크롤 */
overflow-x: hidden; /* 가로 스크롤 숨김 */ overflow-x: hidden; /* 가로 스크롤은 숨기기 */
}
/* 카드 안에서만 스크롤되는 테이블 영역 */
.table-scroll {
max-height: 50vh; /* 필요에 따라 조절 */
overflow: auto;
position: relative; /* sticky 기준 컨테이너 */
padding-top: 0;
}
/* sticky header를 쓰는 테이블 공용 스타일 */
.table-sticky {
white-space: nowrap;
border-collapse: separate;
border-spacing: 0;
}
/* thead 전체를 sticky로 고정 */
.table-sticky thead {
position: sticky;
top: 0;
z-index: 2;
}
/* 헤더 셀 스타일 */
.table-sticky thead th {
background-color: #343a40; /* 덮어씌우는 느낌으로 진하게 */
color: #fff;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save