에이전트 설정 일반 부분 로직 진행중

src/main/front/src/components/AgentConfigView.vue

@@ -47,6 +47,14 @@ const agentConfig = reactive({
     postmanList: [],
   },
 })
+let originalDtoString = ''
+const agentConfigDeleted = {
+  knownAgentList: [],
+  dataSourceConfig: [],
+  logging: {
+    packages: [],
+  },
+}
 
 onMounted(() => {
   if (modalEl.value) {
@@ -59,35 +67,135 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  if (bsModal) {
+  if (!bsModal) return
-    bsModal.hide()
+  const instance = bsModal
-    // Bootstrap v5에서는 dispose 지원
+  const el = instance._element || modalEl.value
-    if (typeof bsModal.dispose === 'function') {
+  if (el) {
-      bsModal.dispose()
+    el.addEventListener(
+      'hidden.bs.modal',
+      () => {
+        if (typeof instance.dispose === 'function') {
+          instance.dispose()
         }
-    bsModal = null
+      },
+      { once: true },
+    )
+    instance.hide()
   }
+  bsModal = null
 })
 
+// 부모 컴포넌트에서 AgentConfigView 팝업 호출(defineExpose에 추가됨)
 function open() {
   if (bsModal) {
     if (props.dto) {
+      originalDtoString = JSON.stringify(props.dto)
       Object.assign(agentConfig, props.dto)
     }
     bsModal.show()
   }
 }
 
+// 부모 컴포넌트에서 AgentConfigView 팝업 닫기(defineExpose에 추가됨)
 function close() {
   if (bsModal) {
     bsModal.hide()
   }
 }
 
+// props.dto 기준으로 agentConfig reload
+function configReload() {
+  Object.assign(agentConfig, JSON.parse(originalDtoString))
+}
+
+// agentConfig의 내용을 json 파일로 다운로드
 function configExport() {}
 
+// agentConfig의 내용을 서버에 전송하여 저장
 function configSave() {}
 
+// knownAgent 한 줄 추가
+function addKnownAgent() {
+  const knownAgent = {
+    hostId: '',
+    hostName: '',
+    listenPort: '',
+    dropBoxIdList: [],
+    routingHostIdList: [],
+    added: true,
+  }
+  agentConfig.knownAgentList.push(knownAgent)
+}
+
+// 선택된 knownAgent 삭제
+function deleteKnownAgent() {
+  for (let i = agentConfig.knownAgentList.length - 1; i >= 0; i--) {
+    if (agentConfig.knownAgentList[i].selected) {
+      let splicedList = agentConfig.knownAgentList.splice(i, 1)
+      if (Object.keys(splicedList[0]).indexOf('added') == -1) {
+        agentConfigDeleted.knownAgentList.push(splicedList)
+      }
+    }
+  }
+}
+
+// dataSource 한 줄 추가
+function addDataSource() {
+  const dataSource = {
+    dataSourceId: '',
+    driverClassName: '',
+    url: '',
+    username: '',
+    password: '',
+    initialSize: 10,
+    minIdle: 10,
+    maxIdle: 30,
+    maxTotal: 300,
+    maximumRowForTransaction: 1000,
+    added: true,
+  }
+  agentConfig.dataSourceConfig.push(dataSource)
+}
+
+// 선택된 dataSource 삭제
+function deleteDataSource() {
+  for (let i = agentConfig.dataSourceConfig.length - 1; i >= 0; i--) {
+    if (agentConfig.dataSourceConfig[i].selected) {
+      let splicedList = agentConfig.dataSourceConfig.splice(i, 1)
+      if (Object.keys(splicedList[0]).indexOf('added') == -1) {
+        agentConfigDeleted.dataSourceConfig.push(splicedList)
+      }
+    }
+  }
+}
+
+function addLoggingPackage() {
+  agentConfig.logging.packages.push({ '': 'INFO' })
+}
+
+function deleteLoggingPackage() {
+  for (let i = agentConfig.dataSourceConfig.length - 1; i >= 0; i--) {
+    if (agentConfig.dataSourceConfig[i].selected) {
+      let splicedList = agentConfig.dataSourceConfig.splice(i, 1)
+      if (Object.keys(splicedList[0]).indexOf('added') == -1) {
+        agentConfigDeleted.dataSourceConfig.push(splicedList)
+      }
+    }
+  }
+}
+
+function changeLoggingPackageName(loggingPackageObject, loggingPackageName, newLoggingPackageName) {
+  newLoggingPackageName = newLoggingPackageName.trim()
+  if (!newLoggingPackageName || loggingPackageName === newLoggingPackageName) {
+    return
+  }
+  if (Object.prototype.hasOwnProperty.call(loggingPackageObject, newLoggingPackageName)) {
+    return
+  }
+  loggingPackageObject[newLoggingPackageName] = loggingPackageObject[loggingPackageName]
+  delete loggingPackageObject[loggingPackageName]
+}
+
 defineExpose({
   open,
   close,
@@ -102,6 +210,7 @@ defineExpose({
         <div class="modal-header justify-content-between">
           <h1 class="modal-title fs-5 pt-0" :id="props.modalId + 'Label'">에이전트 설정</h1>
           <div class="d-flex align-items-center gap-2">
+            <button type="button" class="btn btn-info btn-sm" @click="configReload">Reload</button>
             <button type="button" class="btn btn-success btn-sm" @click="configExport">Export</button>
             <button type="button" class="btn btn-primary btn-sm" @click="configSave">Save</button>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
@@ -124,31 +233,31 @@ defineExpose({
             <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>
+                  <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>
+                  <span class="input-group-text" id="agent-config-description-label">에이전트 설명(description)</span>
                   <input type="text" class="form-control" id="agent-config-description-input" aria-describedby="agent-config-description-label agent-config-description-input" v-model="agentConfig.description" />
                 </div>
               </div>
               <div class="row mb-2">
                 <div class="col-md-3">
                   <div class="input-group">
-                    <span class="input-group-text" id="agent-config-my-host-id-label">myHostId</span>
+                    <span class="input-group-text" id="agent-config-my-host-id-label">에이전트 아이디(myHostId)</span>
                     <input type="text" class="form-control" id="agent-config-my-host-id-input" aria-describedby="agent-config-my-host-id-label agent-config-my-host-id-input" v-model="agentConfig.myHostId" readonly />
                   </div>
                 </div>
                 <div class="col-md-3">
                   <div class="input-group">
-                    <span class="input-group-text" id="agent-config-hecker-console-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>
+                    <span class="input-group-text" id="agent-config-my-listen-port-label">에이전트 포트(myListenPort)</span>
                     <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>
@@ -156,26 +265,34 @@ defineExpose({
               <hr />
               <div class="row m-1">
                 <div class="card p-0">
-                  <div class="card-header"><h5>knownAgentList</h5></div>
+                  <div class="card-header d-flex">
+                    <h5 class="mb-0">상대 에이전트 목록(knownAgentList)</h5>
+                    <div class="ms-auto">
+                      <button type="button" class="btn btn-sm btn-success" @click.prevent="addKnownAgent">추가</button>
+                      <button type="button" class="btn btn-sm btn-danger ms-2" @click.prevent="deleteKnownAgent">삭제</button>
+                    </div>
+                  </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">선택</th>
-                          <th scope="col" class="text-center">hostName</th>
+                          <th scope="col" class="text-center">에이전트 아이디(hostId)</th>
-                          <th scope="col" class="text-center">listenPort</th>
+                          <th scope="col" class="text-center">에이전트 호스트(hostName)</th>
-                          <th scope="col" class="text-center">routingHostIdList</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 scope="row" class="text-center"><input type="checkbox" class="form-check-input" v-model="knownAgent.selected" /></td>
-                          <td>{{ knownAgent.hostName }}</td>
+                          <td><input type="text" class="form-control" v-model="knownAgent.hostId" /></td>
-                          <td>{{ knownAgent.listenPort }}</td>
+                          <td><input type="text" class="form-control" v-model="knownAgent.hostName" /></td>
-                          <td>{{ knownAgent.routingHostIdList }}</td>
+                          <td><input type="number" class="form-control" v-model="knownAgent.listenPort" /></td>
+                          <td><input type="text" class="form-control" v-model="knownAgent.routingHostIdList" /></td>
                         </tr>
                         <tr v-else>
-                          <td scope="row" class="text-center" colspan="3">no agent.</td>
+                          <td scope="row" class="text-center" colspan="5">no agent.</td>
                         </tr>
                       </tbody>
                     </table>
@@ -220,11 +337,18 @@ defineExpose({
               <!-- dataSource Configuration-->
               <div class="row m-1">
                 <div class="card p-0">
-                  <div class="card-header"><h5>dataSourceConfig</h5></div>
+                  <div class="card-header d-flex">
+                    <h5 class="mb-0">데이터소스 설정(dataSourceConfig)</h5>
+                    <div class="ms-auto">
+                      <button type="button" class="btn btn-sm btn-success" @click.prevent="addDataSource">추가</button>
+                      <button type="button" class="btn btn-sm btn-danger ms-2" @click.prevent="deleteDataSource">삭제</button>
+                    </div>
+                  </div>
                   <div class="card-body">
                     <table class="table table-striped table-bordered align-middle">
                       <thead>
                         <tr>
+                          <th scope="col" class="text-center">선택</th>
                           <th scope="col" class="text-center">dataSourceId</th>
                           <th scope="col" class="text-center">driverClassName</th>
                           <th scope="col" class="text-center">url</th>
@@ -239,19 +363,20 @@ defineExpose({
                       </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 scope="row" class="text-center"><input type="checkbox" class="form-check-input" v-model="dataSource.selected" /></td>
-                          <td>{{ dataSource.driverClassName }}</td>
+                          <td><input type="text" class="form-control" v-model="dataSource.dataSourceId" /></td>
-                          <td>{{ dataSource.url }}</td>
+                          <td><input type="text" class="form-control" v-model="dataSource.driverClassName" /></td>
-                          <td>{{ dataSource.username }}</td>
+                          <td><input type="text" class="form-control" v-model="dataSource.url" /></td>
-                          <td>{{ dataSource.password }}</td>
+                          <td><input type="text" class="form-control" v-model="dataSource.username" /></td>
-                          <td>{{ dataSource.initialSize }}</td>
+                          <td><input type="password" class="form-control" v-model="dataSource.password" /></td>
-                          <td>{{ dataSource.minIdle }}</td>
+                          <td><input type="number" class="form-control" v-model="dataSource.initialSize" /></td>
-                          <td>{{ dataSource.maxIdle }}</td>
+                          <td><input type="number" class="form-control" v-model="dataSource.minIdle" /></td>
-                          <td>{{ dataSource.maxTotal }}</td>
+                          <td><input type="number" class="form-control" v-model="dataSource.maxIdle" /></td>
-                          <td>{{ dataSource.maximumRowForTransaction }}</td>
+                          <td><input type="number" class="form-control" v-model="dataSource.maxTotal" /></td>
+                          <td><input type="number" class="form-control" v-model="dataSource.maximumRowForTransaction" /></td>
                         </tr>
                         <tr v-else>
-                          <td scope="row" class="text-center" colspan="10">no dataSource.</td>
+                          <td scope="row" class="text-center" colspan="11">no dataSource.</td>
                         </tr>
                       </tbody>
                     </table>
@@ -303,18 +428,42 @@ defineExpose({
                         </div>
                       </div>
                     </div>
-                    <h6>logging packages</h6>
+                    <div class="d-flex">
-                    <table class="table table-striped table-bordered align-middle" v-for="loggingPackages in agentConfig.logging.packages">
+                      <h6 class="mb-0">logging packages</h6>
+                      <div class="ms-auto">
+                        <button type="button" class="btn btn-sm btn-success" @click.prevent="addLoggingPackage">추가</button>
+                        <button type="button" class="btn btn-sm btn-danger ms-2" @click.prevent="deleteLoggingPackage">삭제</button>
+                      </div>
+                    </div>
+                    <table class="table table-striped table-bordered align-middle">
                       <thead>
                         <tr>
-                          <th>package</th>
+                          <th scope="col" class="text-center">선택</th>
-                          <th>level</th>
+                          <th scope="col" class="text-center">package</th>
+                          <th scope="col" class="text-center">level</th>
                         </tr>
                       </thead>
                       <tbody class="table-group-divider">
-                        <tr v-for="(value, key) in loggingPackages">
+                        <tr v-if="agentConfig.logging.packages.length > 0" v-for="(loggingPackage, rowIndex) in agentConfig.logging.packages">
-                          <td>{{ key }}</td>
+                          <td scope="row" class="text-center"><input type="checkbox" class="form-check-input" /></td>
-                          <td>{{ value }}</td>
+                          <template v-for="(level, packageName) in loggingPackage" :key="packageName">
+                            <td>
+                              <input type="text" class="form-control" :value="packageName" @change="changeLoggingPackageName(loggingPackage, packageName, $event.target.value)" />
+                            </td>
+                            <td>
+                              <select class="form-select" v-model="loggingPackage[packageName]">
+                                <option value="TRACE">TRACE</option>
+                                <option value="DEBUG">DEBUG</option>
+                                <option value="INFO">INFO</option>
+                                <option value="WARN">WARN</option>
+                                <option value="ERROR">ERROR</option>
+                                <option value="OFF">OFF</option>
+                              </select>
+                            </td>
+                          </template>
+                        </tr>
+                        <tr v-else>
+                          <td scope="row" class="text-center" colspan="3">no logging packages.</td>
                         </tr>
                       </tbody>
                     </table>

src/main/front/src/components/MessageDataView.vue

@@ -24,16 +24,22 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  if (bsModal) {
+  if (!bsModal) return
-    bsModal.hide()
+  const instance = bsModal
-    dataList.value = []
+  const el = instance._element || modalEl.value
-    columnList.value = []
+  if (el) {
-    // Bootstrap v5에서는 dispose 지원
+    el.addEventListener(
-    if (typeof bsModal.dispose === 'function') {
+      'hidden.bs.modal',
-      bsModal.dispose()
+      () => {
+        if (typeof instance.dispose === 'function') {
+          instance.dispose()
         }
-    bsModal = null
+      },
+      { once: true },
+    )
+    instance.hide()
   }
+  bsModal = null
 })
 
 function open() {