모던 대시보드 패치

- ApexCharts 기반 실시간 모니터링 대시보드 - 어댑터/배치/서버/소켓/트랜잭션 모니터링 컴포넌트 - 처리량 계산 및 데이터 매핑 서비스
2025-11-14 17:59:06 +09:00
parent 38057809cf
commit 972819b492
72 changed files with 49662 additions and 547 deletions
@@ -0,0 +1,275 @@
+<%@ page language="java" contentType="text/html; charset=utf-8"%>
+<%@ page import="java.util.List"%>
+<%@ page import="java.util.ArrayList"%>
+<%@ page import="java.util.HashMap"%>
+<%@ page import="java.util.Map"%>
+<%@ page import="com.eactive.eai.rms.common.context.MonitoringContext"%>
+<%@ page import="com.eactive.eai.rms.common.util.CommonUtil"%>
+<%@ page import="com.eactive.eai.rms.common.datasource.DataSourceType"%>
+<%@ page import="com.eactive.eai.rms.common.datasource.DataSourceTypeManager"%>
+<%@ page import="com.eactive.eai.common.util.SystemUtil"%>
+<%@ page import="javax.persistence.criteria.CriteriaBuilder" %>
+<%@ page import="java.util.Comparator" %>
+<%@ include file="/jsp/common/include/localemessage.jsp" %>
+
+<%
+    response.setHeader("Pragma", "No-cache");
+    response.setHeader("Cache-Control", "no-cache");
+    response.setHeader("Expires", "0");
+    request.setCharacterEncoding("utf-8");
+    MonitoringContext monitoringContext = (MonitoringContext)CommonUtil.getBean(request, "monitoringContext");
+
+    String NEW_TITLE = (String) session.getAttribute(MonitoringContext.NEW_DASHBOARD_TITLE);
+    String fepBatchUrl = monitoringContext.getStringProperty("FEP_BATCH_SERVER", "");
+    String eaiBatchUrl = monitoringContext.getStringProperty("EAI_BATCH_SERVER", "");
+
+    // 온라인 데이터 소스 타입 목록 가져오기
+    List<DataSourceType> srvList = DataSourceTypeManager.getOnlineDataSourceTypes();
+
+    // GW 추가
+    if( DataSourceTypeManager.getDataSourceType("FGW") != null ){
+        srvList.add(DataSourceTypeManager.getDataSourceType("FGW"));
+    }
+
+    if( DataSourceTypeManager.getDataSourceType("CGW") != null ){
+        srvList.add(DataSourceTypeManager.getDataSourceType("CGW"));
+    }
+
+    int srvCnt = srvList.size();
+
+    // 서버 타입별 목록을 저장할 맵 생성
+    Map<String, List<DataSourceType>> serverTypeMap = new HashMap<>();
+
+    // 서버타입 맵을 application 스코프에 저장 (모든 컴포넌트에서 접근 가능)
+    application.setAttribute("serverTypeMap", serverTypeMap);
+
+    // 서버 타입별로 분류
+    for (DataSourceType server : srvList) {
+        String serverName = server.getName();
+
+        // 서버 타입에 해당하는 리스트가 없으면 생성
+        if (!serverTypeMap.containsKey(serverName)) {
+            serverTypeMap.put(serverName, new ArrayList<DataSourceType>());
+        }
+
+        // 서버를 해당 타입 리스트에 추가
+        serverTypeMap.get(serverName).add(server);
+    }
+
+    // BAP(일괄전송) 서버 타입 추가
+    DataSourceType bapServer = DataSourceTypeManager.getDataSourceType(DataSourceTypeManager.BAP);
+    if (bapServer != null && !serverTypeMap.containsKey(DataSourceTypeManager.BAP)) {
+        List<DataSourceType> bapList = new ArrayList<>();
+        bapList.add(bapServer);
+        serverTypeMap.put(DataSourceTypeManager.BAP, bapList);
+    }
+
+    // 서버 데이터 생성 (JavaScript 용)
+    StringBuilder serverDataJS = new StringBuilder();
+    serverDataJS.append("var serverDataArray = [");
+
+    boolean first = true;
+    for (Map.Entry<String, List<DataSourceType>> entry : serverTypeMap.entrySet()) {
+        String serverType = entry.getKey();
+        List<DataSourceType> servers = entry.getValue();
+
+        // BAT 서버는 제외
+        if (DataSourceTypeManager.BAT.equals(serverType)) {
+            continue;
+        }
+
+        for (DataSourceType server : servers) {
+            if (!first) {
+                serverDataJS.append(",");
+            }
+
+            String name = server.getName();
+            String text = server.getText();
+
+            serverDataJS.append("{");
+            serverDataJS.append("type:'").append(serverType).append("',");
+            serverDataJS.append("name:'").append(name).append("',");
+            serverDataJS.append("text:'").append(text).append("'");
+            serverDataJS.append("}");
+
+            first = false;
+        }
+    }
+
+    serverDataJS.append("];");
+%>
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <title>eLink 모니터링 대시보드</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+
+    <!-- 폰트 -->
+    <jsp:include page="/jsp/common/include/fonts.jsp"/>
+    <!-- 아이콘 -->
+    <link href="<%=request.getContextPath()%>/addon/bootstrap-icons-1.11.3/bootstrap-icons.min.css" rel="stylesheet" />
+    <!-- 커스텀 CSS -->
+    <link href="<%=request.getContextPath()%>/dashboard-modern/css/main.css" rel="stylesheet" />
+
+    <!-- jQuery -->
+    <script src="<%=request.getContextPath()%>/js/jquery-3.7.1.min.js"></script>
+    <!-- 커스텀 JavaScript -->
+    <script src="<%=request.getContextPath()%>/dashboard-modern/js/modern-dashboard-api.js"></script>
+    <script src="<%=request.getContextPath()%>/dashboard-modern/js/modern-dashboard.js"></script>
+
+    <!-- API 초기화 (가장 먼저 실행) -->
+    <script>
+        // 페이지 로드 전 API 초기화
+        ModernDashboardApi.init('<%=request.getContextPath()%>');
+    </script>
+
+    <style>
+        /* 1번 줄 (4:3:1 비율) - 서버 상태, 배치 처리 상태, 피크 처리 성능 */
+        .first-row {
+            grid-template-columns: 4fr 3fr 1fr;
+        }
+
+        /* 2번 줄 (1:1 비율) - 거래 처리 집계, 실시간 트랜잭션 현황 */
+        .second-row {
+            grid-template-columns: 1fr 1fr;
+        }
+
+        /* 3번 줄 (7:3 비율) - 어댑터 상태, 장애통보(SMS) */
+        .third-row {
+            grid-template-columns: 6fr 4fr;
+        }
+
+        /* 컴팩트한 대시보드를 위한 추가 스타일 */
+        .container {
+            padding-top: 0.5rem;
+            padding-bottom: 0.5rem;
+        }
+
+        /* 카드 내부 여백 줄임 */
+        .card {
+            padding: 0.75rem;
+        }
+
+        /* 테이블 행 높이 줄임 */
+        table tr td, table tr th {
+            padding-top: 0.4rem;
+            padding-bottom: 0.4rem;
+        }
+
+        /* 반응형 디자인 */
+        @media (max-width: 1200px) {
+            .first-row {
+                grid-template-columns: 1fr;
+            }
+            .second-row {
+                grid-template-columns: 1fr;
+            }
+            .third-row {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <!-- 헤더 영역 -->
+    <jsp:include page="components/dashboard-header.jsp" />
+
+    <!-- 1번 줄 (4:3:1 비율) - 서버 상태, 배치 처리 상태, 피크 처리 성능 -->
+    <div class="dashboard-row first-row">
+        <!-- 서버 상태 섹션 (4/8 비율) -->
+        <div class="server-container">
+            <jsp:include page="components/dashboard-servers.jsp">
+                <jsp:param name="serverTypeMap" value="<%= serverTypeMap %>" />
+            </jsp:include>
+        </div>
+
+        <!-- 배치 처리 상태 섹션 (3/8 비율) -->
+        <div class="batch-container">
+            <jsp:include page="components/dashboard-batch.jsp" />
+        </div>
+
+        <!-- 피크 처리 성능 섹션 (1/8 비율) -->
+        <div class="peak-container">
+            <jsp:include page="components/dashboard-peak.jsp" />
+        </div>
+    </div>
+
+    <!-- 2번 줄 (1:1 비율) - 거래 처리 집계, 실시간 트랜잭션 현황 -->
+    <div class="dashboard-row second-row">
+        <!-- 거래 처리 집계 섹션 (좌측) -->
+        <div class="transaction-container" style="overflow-y:auto;">
+            <jsp:include page="components/dashboard-transactions.jsp">
+                <jsp:param name="serverTypeMap" value="<%= serverTypeMap %>" />
+            </jsp:include>
+        </div>
+
+        <!-- 실시간 트랜잭션 현황 섹션 (우측) -->
+        <div class="transaction-overview-container">
+            <jsp:include page="components/dashboard-tran-chart.jsp" />
+        </div>
+    </div>
+
+    <!-- 3번 줄 (8:2 비율) - 어댑터 상태, 장애통보(SMS) -->
+    <div class="dashboard-row third-row">
+        <!-- 어댑터 섹션 (8/10 비율) -->
+        <div class="adapters-container">
+            <jsp:include page="components/dashboard-adapter.jsp">
+                <jsp:param name="serverTypeMap" value="<%= serverTypeMap %>" />
+            </jsp:include>
+        </div>
+
+        <!-- 장애통보(SMS) 섹션 (2/10 비율) -->
+        <div class="sms-container">
+            <jsp:include page="components/dashboard-sms.jsp" />
+        </div>
+    </div>
+    <!-- 인터페이스 로그 조회 모달 -->
+    <jsp:include page="components/dashboard-interface-detail.jsp" />
+    <!-- 푸터 영역 -->
+    <jsp:include page="components/dashboard-footer.jsp" />
+</div>
+
+<script type="text/javascript">
+    // 서버 데이터 초기화
+    <%= serverDataJS.toString() %>
+
+    // 자동 새로고침 타이머 변수 (window 객체에 할당)
+    window.refreshTimer = null;
+    window.refreshInterval = 5; // 기본값 10초
+
+    // 숫자 포맷 유틸리티 함수
+    function formatNumber(num) {
+        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    }
+
+    // 서버 데이터 설정 및 대시보드 초기화
+    $(document).ready(function() {
+        // 대시보드 초기화
+        initDashboard('<%=request.getContextPath()%>');
+
+        // 현재 시간 표시 및 업데이트
+        updateCurrentTime();
+        setInterval(updateCurrentTime, 1000);
+
+        // 초기 데이터 로드
+        refreshDashboardData();
+
+        // 로컬 스토리지에서 저장된 새로고침 간격 불러오기
+        if (localStorage.getItem('dashboardRefreshInterval')) {
+            window.refreshInterval = parseInt(localStorage.getItem('dashboardRefreshInterval'));
+
+            // 저장된 간격에 해당하는 버튼 활성화
+            $('.refresh-btn').removeClass('active');
+            $('.refresh-btn[data-interval="' + window.refreshInterval + '"]').addClass('active');
+        }
+
+        // modern-dashboard.js의 함수 호출
+        window.startRefreshTimer();
+        window.updateRefreshStatus();
+    });
+</script>
+</body>
+</html>