모던 대시보드 패치

- 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,102 @@
+<%@ page language="java" contentType="text/html; charset=utf-8"%>
+<header>
+    <div class="header-title">
+        <i class="bi bi-speedometer2"></i>
+        <h1>eLink 모니터링 대시보드</h1>
+        <div class="global-loading-indicator" id="global-loading-indicator"></div>
+    </div>
+    <div class="header-controls">
+        <div class="time-display" id="current-time"></div>
+        <div class="refresh-controls">
+            <span class="refresh-status active"></span>
+            <span class="refresh-label">자동 새로고침:</span>
+            <div class="btn-group">
+                <button class="btn refresh-btn btn-sm" data-interval="2">2초</button>
+                <button class="btn refresh-btn btn-sm" data-interval="5">5초</button>
+                <button class="btn refresh-btn btn-sm active" data-interval="10">10초</button>
+                <button class="btn refresh-btn btn-sm" data-interval="0">사용안함</button>
+            </div>
+        </div>
+        <button class="btn btn-sm" id="refresh-btn">
+            <i class="bi bi-arrow-clockwise"></i> 수동 새로고침
+        </button>
+    </div>
+</header>
+
+<script>
+    // 새로고침 간격 버튼 클릭 이벤트
+    $('.refresh-btn').click(function() {
+        // 버튼 활성화 상태 변경
+        $('.refresh-btn').removeClass('active');
+        $(this).addClass('active');
+
+        // 새로고침 간격 설정
+        refreshInterval = parseInt($(this).data('interval'));
+
+        // 로컬 스토리지에 저장
+        localStorage.setItem('dashboardRefreshInterval', refreshInterval);
+
+        // 타이머 재시작
+        startRefreshTimer();
+
+        // 새로고침 상태 표시 업데이트
+        updateRefreshStatus();
+    });
+
+    // 수동 새로고침 버튼 클릭 이벤트
+    $('#refresh-btn').click(function() {
+        refreshDashboardData();
+    });
+
+    // 전역 로딩 인디케이터 제어 함수
+    function showGlobalLoadingIndicator() {
+        $('#global-loading-indicator').addClass('active');
+    }
+
+    function hideGlobalLoadingIndicator() {
+        $('#global-loading-indicator').removeClass('active');
+    }
+
+    // 문서 로드 완료 시 이벤트 리스너 등록
+    $(document).ready(function() {
+        // DashboardEventManager 이벤트 구독
+        if (window.DashboardEventManager) {
+            // 데이터 로딩 시작 이벤트
+            window.DashboardEventManager.on('loading-start', function() {
+                showGlobalLoadingIndicator();
+            });
+
+            // 데이터 로딩 완료 이벤트
+            window.DashboardEventManager.on('loading-end', function() {
+                hideGlobalLoadingIndicator();
+            });
+        }
+    });
+</script>
+
+<style>
+    /* 전역 로딩 인디케이터 스타일 */
+    .global-loading-indicator {
+        display: inline-block;
+        width: 18px;
+        height: 18px;
+        margin-left: 10px;
+        border-radius: 50%;
+        border: 2px solid rgba(79, 70, 229, 0.2);
+        border-top-color: var(--color-primary);
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.2s ease;
+    }
+
+    .global-loading-indicator.active {
+        opacity: 1;
+        visibility: visible;
+        animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+</style>