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

에이전트 설정 일반 부분 틀 완료, 드랍박스 틀 완료.

Browse Source
main
icksishu@gmail.com 1 month ago
parent f2ed241575
commit f2bc449476
2 changed files with 288 additions and 11 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,7 +1,6 @@
<script setup>
import { defineProps, ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import * as bootstrap from 'bootstrap'
import * as XSLX from 'xlsx'
const props = defineProps({
modalId: String,
@ -122,7 +121,12 @@ defineExpose({
</ul>
<div class="tab-content m-1" id="agentConfigTabContent">
<div class="tab-pane fade show active" id="general-tab-pane" role="tabpanel" aria-labelledby="general-tab" tabindex="0">
<div class="tab-pane fade show active tab-pane-scroll" id="general-tab-pane" role="tabpanel" aria-labelledby="general-tab" tabindex="0">
<div class="row mb-2">
<div class="col-md-12">
<h5>Agent General</h5>
</div>
</div>
<div class="row mb-2">
<div class="input-group">
<span class="input-group-text" id="agent-config-description-label">description</span>
@ -138,22 +142,270 @@ defineExpose({
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text" id="agent-config-my-host-name-label">myHostName</span>
<span class="input-group-text" id="agent-config-hecker-console-host-name-label">myHostName</span>
<input type="text" class="form-control" id="agent-config-my-host-name-input" aria-describedby="agent-config-my-host-name-label agent-config-my-host-name-input" v-model="agentConfig.myHostName" readonly />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text" id="agent-config-my-listen-port-label">myListenPort</span>
<input type="text" class="form-control" id="agent-config-my-listen-port-input" aria-describedby="agent-config-my-listen-port-label agent-config-my-listen-port-input" v-model="agentConfig.myListenPort" readonly />
<input type="number" class="form-control" id="agent-config-my-listen-port-input" aria-describedby="agent-config-my-listen-port-label agent-config-my-listen-port-input" v-model="agentConfig.myListenPort" readonly />
</div>
</div>
</div>
<hr />
<div class="row m-1">
<div class="card p-0">
<div class="card-header"><h5>knownAgentList</h5></div>
<div class="card-body">
<table class="table table-striped table-bordered align-middle">
<thead>
<tr>
<th scope="col" class="text-center">hostId</th>
<th scope="col" class="text-center">hostName</th>
<th scope="col" class="text-center">listenPort</th>
<th scope="col" class="text-center">routingHostIdList</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr v-if="agentConfig.knownAgentList.length > 0" v-for="knownAgent in agentConfig.knownAgentList" :key="knownAgent.hostId">
<td scope="row">{{ knownAgent.hostId }}</td>
<td>{{ knownAgent.hostName }}</td>
<td>{{ knownAgent.listenPort }}</td>
<td>{{ knownAgent.routingHostIdList }}</td>
</tr>
<tr v-else>
<td scope="row" class="text-center" colspan="3">no agent.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr />
<div class="row mb-2">
<div class="col-md-12">
<h5>statusChecker</h5>
</div>
</div>
<div class="row mb-2">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text" id="agent-config-status-checker-cron">cron</span>
<input type="text" class="form-control" id="agent-config-status-checker-cron-input" aria-describedby="agent-config-status-checker-cron-label agent-config-status-checker-cron-input" v-model="agentConfig.statusChecker.cron" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text" id="agent-config-status-checker-console-host-name-label">consoleHostName</span>
<input type="text" class="form-control" id="agent-config-status-checker-console-host-name-input" aria-describedby="agent-config-status-checker-console-host-name-label agent-config-status-checker-console-host-name-input" v-model="agentConfig.statusChecker.consoleHostName" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text" id="agent-config-status-checker-console-listen-port-label">consoleListenPort</span>
<input type="number" class="form-control" id="agent-config-status-checker-console-listen-port-input" aria-describedby="agent-config-status-checker-console-listen-port-label agent-config-status-checker-console-listen-port-input" v-model="agentConfig.statusChecker.consoleListenPort" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text" id="agent-config-status-checker-console-ssl-enabled-label">consoleSslEnabled</span>
<div class="form-check form-switch form-switch-lg">
<input class="form-check-input" type="checkbox" role="switch" id="agent-config-status-checker-console-ssl-enabled-input" v-model="agentConfig.statusChecker.consoleSslEnabled" />
</div>
</div>
</div>
</div>
<hr />
<!-- dataSource Configuration-->
<div class="row m-1">
<div class="card p-0">
<div class="card-header"><h5>dataSourceConfig</h5></div>
<div class="card-body">
<table class="table table-striped table-bordered align-middle">
<thead>
<tr>
<th scope="col" class="text-center">dataSourceId</th>
<th scope="col" class="text-center">driverClassName</th>
<th scope="col" class="text-center">url</th>
<th scope="col" class="text-center">username</th>
<th scope="col" class="text-center">password</th>
<th scope="col" class="text-center">initialSize</th>
<th scope="col" class="text-center">minIdle</th>
<th scope="col" class="text-center">maxIdle</th>
<th scope="col" class="text-center">maxTotal</th>
<th scope="col" class="text-center">maximumRowForTransaction</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr v-if="agentConfig.dataSourceConfig.length > 0" v-for="dataSource in agentConfig.dataSourceConfig" :key="dataSource.dataSourceId">
<td scope="row">{{ dataSource.dataSourceId }}</td>
<td>{{ dataSource.driverClassName }}</td>
<td>{{ dataSource.url }}</td>
<td>{{ dataSource.username }}</td>
<td>{{ dataSource.password }}</td>
<td>{{ dataSource.initialSize }}</td>
<td>{{ dataSource.minIdle }}</td>
<td>{{ dataSource.maxIdle }}</td>
<td>{{ dataSource.maxTotal }}</td>
<td>{{ dataSource.maximumRowForTransaction }}</td>
</tr>
<tr v-else>
<td scope="row" class="text-center" colspan="10">no dataSource.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr />
<div class="row m-1">
<div class="card p-0">
<div class="card-header"><h5>logging</h5></div>
<div class="card-body">
<div class="row mb-2">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text" id="agent-config-logging-log-directory">logDirectory</span>
<input type="text" class="form-control" id="agent-config-logging-log-directory-input" aria-describedby="agent-config-logging-log-directory-label agent-config-logging-log-directory-input" v-model="agentConfig.logging.logDirectory" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text" id="agent-config-logging-log-file-name">logFileName</span>
<input type="text" class="form-control" id="agent-config-logging-log-file-name-input" aria-describedby="agent-config-logging-log-file-name-label agent-config-logging-log-file-name-input" v-model="agentConfig.logging.logFileName" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text" id="agent-config-logging-log-name">logName</span>
<input type="text" class="form-control" id="agent-config-logging-log-name-input" aria-describedby="agent-config-logging-log-name-label agent-config-logging-log-name-input" v-model="agentConfig.logging.logName" />
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text" id="agent-config-logging-max-history">maxHistory</span>
<input type="number" class="form-control" id="agent-config-logging-max-history-input" aria-describedby="agent-config-logging-max-history-label agent-config-logging-max-history-input" v-model="agentConfig.logging.maxHistory" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text" id="agent-config-logging-log-pattern">logPattern</span>
<input type="text" class="form-control" id="agent-config-logging-log-pattern-input" aria-describedby="agent-config-logging-log-pattern-label agent-config-logging-log-pattern-input" v-model="agentConfig.logging.logPattern" />
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-text" id="agent-config-logging-root-log-level">rootLogLevel</span>
<input type="text" class="form-control" id="agent-config-root-log-level-input" aria-describedby="agent-config-logging-root-log-level-label agent-config-logging-root-log-level-input" v-model="agentConfig.logging.rootLogLevel" />
</div>
</div>
</div>
<h6>logging packages</h6>
<table class="table table-striped table-bordered align-middle" v-for="loggingPackages in agentConfig.logging.packages">
<thead>
<tr>
<th>package</th>
<th>level</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr v-for="(value, key) in loggingPackages">
<td>{{ key }}</td>
<td>{{ value }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr />
</div>
<div class="tab-pane fade" id="dropbox-tab-pane" role="tabpanel" aria-labelledby="dropbox-tab" tabindex="0">dropbox</div>
<div class="tab-pane fade" id="postman-tab-pane" role="tabpanel" aria-labelledby="postman-tab" tabindex="0">postman</div>
<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="col-md-12">
<h5>DropBox General</h5>
</div>
</div>
<div class="row mb-2">
<div class="col-md-5">
<div class="input-group">
<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" />
</div>
</div>
<div class="col-md-5">
<div class="input-group">
<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" />
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-md-5">
<div class="input-group">
<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" />
</div>
</div>
<div class="col-md-5">
<div class="input-group">
<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" />
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-md-5">
<div class="input-group">
<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" />
</div>
</div>
<div class="col-md-5">
<div class="input-group">
<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" />
</div>
</div>
</div>
<hr />
<div class="row m-1">
<div class="card p-0">
<div class="card-header"><h5>dropBoxList</h5></div>
<div class="card-body">
<table class="table table-striped table-bordered align-middle">
<thead>
<tr>
<th scope="col" class="text-center">dropBoxId</th>
<th scope="col" class="text-center">taskType</th>
<th scope="col" class="text-center">dataSourceId</th>
<th scope="col" class="text-center">sqlId</th>
<th scope="col" class="text-center">description</th>
</tr>
</thead>
<tbody class="table-group-divider">
<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>{{ dropBox.taskType }}</td>
<td>{{ dropBox.dataSourceId }}</td>
<td>{{ dropBox.sqlId }}</td>
<td>{{ dropBox.description }}</td>
</tr>
<tr v-else>
<td scope="row" class="text-center" colspan="5">no dropBox.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr />
</div>
<div class="tab-pane fade tab-pane-scroll" id="postman-tab-pane" role="tabpanel" aria-labelledby="postman-tab" tabindex="0">postman</div>
</div>
</div>
</div>
@ -180,6 +432,8 @@ defineExpose({
flex: 1 1 auto;
overflow: hidden; /* 여기서는 스크롤 안 하고 */
padding: 0.5rem;
display: flex;
flex-direction: column;
}
/* 실제 스크롤이 일어나는 영역 */
@ -216,4 +470,28 @@ defineExpose({
/* 상·하 4px, 좌·우는 기존처럼 16px */
padding: 0.5rem 1rem;
}
/* 큰 스위치용 커스텀 클래스 */
.form-switch.form-switch-lg .form-check-input {
width: 3rem; /* 가로 길이 늘리기 */
height: 1.5rem; /* 세로 길이 늘리기 */
}
/* 너무 붙어 보이면 왼쪽 여백 조정 */
.form-switch.form-switch-lg {
padding-left: 3.5rem;
padding-top: 0.2rem;
}
.tab-content {
flex: 1 1 auto;
min-height: 0; /* 이거 중요: 자식이 줄어들 수 있어야 스크롤 생김 */
}
/* 실제 스크롤이 생기는 곳: general 탭 pane */
.tab-pane-scroll {
height: 100%;
overflow-y: auto; /* 세로 스크롤만 */
overflow-x: hidden; /* 가로 스크롤 숨김 */
}
</style>

9
src/main/front/src/views/AgentManageView.vue
Unescape View File

@ -1,7 +1,7 @@
<script setup>
import '@/assets/main.css'
import { useApiClient } from '@/components/apiClient'
import { onMounted, ref } from 'vue'
import { onMounted, ref, reactive } from 'vue'
import AgentConfigView from '@/components/AgentConfigView.vue'
const apiClient = useApiClient()
@ -12,11 +12,12 @@ async function getAgentInfoDtoList() {
}
let dfxAgentInfoDtoList = ref([])
const agentConfigDto = ref({})
const agentConfigDto = reactive({})
const agentConfigViewModal = ref(null)
function openAgentConfigView(dfxAgentInfoDto) {
agentConfigDto.value = JSON.parse(dfxAgentInfoDto.settingsData)
const dto = JSON.parse(dfxAgentInfoDto.settingsData)
Object.assign(agentConfigDto, dto)
agentConfigViewModal.value.open()
}
@ -65,8 +66,6 @@ onMounted(async () => {
</div>
</main>
<agent-config-view modal-id="agentConfigModalView" :dto="agentConfigDto" ref="agentConfigViewModal"></agent-config-view>
<!--
-->
</template>
<style></style>

Write Preview
Loading…
Cancel
Save