에이전트 설정 모달 진행중

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

@@ -0,0 +1,219 @@
+<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,
+  dto: Object,
+})
+
+const modalEl = ref(null)
+let bsModal = null
+const activeTab = ref('general')
+const agentConfig = reactive({
+  description: '',
+  myHostId: '',
+  myHostName: '',
+  myListenPort: 0,
+  knownAgentList: [],
+  statusChecker: {
+    cron: '',
+    consoleHostName: '',
+    consoleListenPort: 0,
+    consoleSslEnabled: false,
+  },
+  dataSourceConfig: [],
+  sqlMapperLocations: [],
+  logging: {
+    logDirectory: '',
+    logFileName: '',
+    logName: '',
+    maxHistory: 30,
+    logPattern: '',
+    rootLogLevel: 'INFO',
+    packages: [],
+  },
+  dropBoxConfig: {
+    receivedMessageStorageRoot: '',
+    processedMessageStorageRoot: '',
+    failureMessageStorageRoot: '',
+    manualMessageStorageRoot: '',
+    threadPoolSize: 0,
+    retentionDaysOfProcessedMessage: 0,
+    dropBoxList: [],
+  },
+  postmanConfig: {
+    threadPoolSize: 0,
+    postmanList: [],
+  },
+})
+
+onMounted(() => {
+  if (modalEl.value) {
+    // 인스턴스가 있으면 재사용, 없으면 생성
+    bsModal = bootstrap.Modal.getOrCreateInstance(modalEl.value, {
+      backdrop: 'static', // 바깥 클릭으로 닫히지 않게
+      keyboard: false, // ESC로 닫히지 않게 (원하시면 true 로)
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  if (bsModal) {
+    bsModal.hide()
+    // Bootstrap v5에서는 dispose 지원
+    if (typeof bsModal.dispose === 'function') {
+      bsModal.dispose()
+    }
+    bsModal = null
+  }
+})
+
+function open() {
+  if (bsModal) {
+    if (props.dto) {
+      Object.assign(agentConfig, props.dto)
+    }
+    bsModal.show()
+  }
+}
+
+function close() {
+  if (bsModal) {
+    bsModal.hide()
+  }
+}
+
+function configExport() {}
+
+function configSave() {}
+
+defineExpose({
+  open,
+  close,
+})
+</script>
+
+<template>
+  <!-- Modal -->
+  <div class="modal fade" :id="props.modalId" ref="modalEl" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" :aria-labelledby="props.modalId + 'Label'" aria-hidden="true">
+    <div class="modal-dialog modal-xl data-modal-dialog">
+      <div class="modal-content data-modal-content">
+        <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-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>
+          </div>
+        </div>
+        <div class="modal-body data-modal-body">
+          <ul class="nav nav-tabs mb-3" id="agentConfigTab" role="tablist">
+            <li class="nav-item" role="presentation">
+              <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general-tab-pane" type="button" role="tab" aria-controls="general-tab-pane" aria-selected="true">일반</button>
+            </li>
+            <li class="nav-item" role="presentation">
+              <button class="nav-link" id="dropbox-tab" data-bs-toggle="tab" data-bs-target="#dropbox-tab-pane" type="button" role="tab" aria-controls="dropbox-tab-pane" aria-selected="false">DropBox</button>
+            </li>
+            <li class="nav-item" role="presentation">
+              <button class="nav-link" id="postman-tab" data-bs-toggle="tab" data-bs-target="#postman-tab-pane" type="button" role="tab" aria-controls="postman-tab-pane" aria-selected="false">Postman</button>
+            </li>
+          </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="row mb-2">
+                <div class="input-group">
+                  <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>
+                    <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-my-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 />
+                  </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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 모달이 화면을 거의 꽉 채우게 */
+.data-modal-dialog {
+  max-width: calc(100% - 4vh); /* 좌우 95% */
+  margin: 2vh auto; /* 위아래 여백 조금 */
+}
+
+/* 모달 전체 높이를 화면의 95% 정도로 */
+.data-modal-content {
+  height: 95vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 헤더/푸터 빼고 나머지 영역을 테이블 영역으로 */
+.data-modal-body {
+  flex: 1 1 auto;
+  overflow: hidden; /* 여기서는 스크롤 안 하고 */
+  padding: 0.5rem;
+}
+
+/* 실제 스크롤이 일어나는 영역 */
+.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 패딩 조정 */
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* 상·하 4px, 좌·우는 기존처럼 16px */
+  padding: 0.5rem 1rem;
+}
+</style>

src/main/front/src/views/AgentManageView.vue

@@ -2,6 +2,7 @@
 import '@/assets/main.css'
 import { useApiClient } from '@/components/apiClient'
 import { onMounted, ref } from 'vue'
+import AgentConfigView from '@/components/AgentConfigView.vue'
 
 const apiClient = useApiClient()
 
@@ -11,10 +12,12 @@ async function getAgentInfoDtoList() {
 }
 
 let dfxAgentInfoDtoList = ref([])
+const agentConfigDto = ref({})
+const agentConfigViewModal = ref(null)
 
-function setDfxAgentInfoDto(dfxAgentInfoDto) {
+function openAgentConfigView(dfxAgentInfoDto) {
-  console.log(dfxAgentInfoDto)
+  agentConfigDto.value = JSON.parse(dfxAgentInfoDto.settingsData)
-  alert(dfxAgentInfoDto)
+  agentConfigViewModal.value.open()
 }
 
 onMounted(async () => {
@@ -51,7 +54,7 @@ onMounted(async () => {
               <td class="text-end">{{ dfxAgentInfoDto.postmanCount }}</td>
               <td class="text-end">{{ dfxAgentInfoDto.dropboxCount }}</td>
               <td class="text-center"><i class="bi bi-lightbulb-fill" :class="dfxAgentInfoDto.statusCode == 'STATUS_OK' ? 'text-success' : 'text-secondary'"></i></td>
-              <td class="text-center"><button type="button" class="btn btn-primary btn-sm" @click.prevent="setDfxAgentInfoDto(dfxAgentInfoDto)">설정</button></td>
+              <td class="text-center"><button type="button" class="btn btn-primary btn-sm" @click.prevent="openAgentConfigView(dfxAgentInfoDto)">설정</button></td>
             </tr>
             <tr v-else>
               <td scope="row" class="text-center" colspan="7">no datas.</td>
@@ -61,6 +64,9 @@ onMounted(async () => {
       </article>
     </div>
   </main>
+  <agent-config-view modal-id="agentConfigModalView" :dto="agentConfigDto" ref="agentConfigViewModal"></agent-config-view>
+  <!--
+  -->
 </template>
 
 <style></style>