daekuk
311 lines
11 KiB
Plaintext
311 lines
11 KiB
Plaintext
<%@ 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>
|
|
/* 모든 카드는 7:3 기준으로 수정, 광주은행 요청사항 */
|
|
|
|
/* 1번 줄 (5:3 비율) - 서버 상태, 배치 처리 상태 */
|
|
.first-row {
|
|
grid-template-columns: 7fr 3fr;
|
|
}
|
|
|
|
/* 2번 줄 (1:1 비율) - 거래 처리 집계, 실시간 트랜잭션 현황 */
|
|
.second-row {
|
|
grid-template-columns: 7fr 3fr;
|
|
}
|
|
|
|
/* 3번 줄 (7:3 비율) - 어댑터 상태, 장애통보(SMS) */
|
|
.third-row {
|
|
grid-template-columns: 7fr 3fr;
|
|
}
|
|
|
|
/* 컴팩트한 대시보드를 위한 추가 스타일 */
|
|
.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번 줄 (5:3 비율) - 서버 상태, 배치 처리 상태 -->
|
|
<div class="dashboard-row first-row">
|
|
<!-- 서버 상태 섹션 (5/8 비율) -->
|
|
<div class="server-container">
|
|
<jsp:include page="components/dashboard-servers.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>
|
|
|
|
<!-- 피크 처리 성능 섹션 (1/8 비율) -->
|
|
<%--<div class="peak-container">
|
|
<jsp:include page="components/dashboard-peak.jsp" />
|
|
</div>--%>
|
|
</div>
|
|
|
|
<!-- 2번 줄 (1:1 비율) - 거래 처리 집계, 실시간 트랜잭션 현황 -->
|
|
<div class="dashboard-row second-row">
|
|
<!-- 어댑터 섹션 (8/10 비율) -->
|
|
<div class="adapters-container">
|
|
<jsp:include page="components/dashboard-adapter.jsp">
|
|
<jsp:param name="serverTypeMap" value="<%= serverTypeMap %>" />
|
|
</jsp:include>
|
|
</div>
|
|
|
|
<!-- 거래 처리 집계 섹션 (우측) -->
|
|
<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>
|
|
|
|
<!-- 3번 줄 (8:2 비율) - 어댑터 상태, 장애통보(SMS) -->
|
|
<div class="dashboard-row third-row">
|
|
|
|
<!-- 실시간 트랜잭션 현황 섹션 (좌측) -->
|
|
<div class="transaction-overview-container">
|
|
<jsp:include page="components/dashboard-tran-chart.jsp" />
|
|
</div>
|
|
|
|
<!-- 배치 처리 상태 섹션 (3/8 비율) -->
|
|
<div class="batch-container">
|
|
<jsp:include page="components/dashboard-batch.jsp" />
|
|
</div>
|
|
</div>
|
|
<!-- 인터페이스 로그 조회 모달 -->
|
|
<jsp:include page="components/dashboard-interface-detail.jsp" />
|
|
<!-- 푸터 영역 -->
|
|
<jsp:include page="components/dashboard-footer.jsp" />
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
// 행의 높이를 맞추는 함수 (카드를 직접 타겟)
|
|
function matchRowHeights() {
|
|
$('.dashboard-row').each(function() {
|
|
var maxHeight = 0;
|
|
// 각 행에 있는 .card 요소를 직접 찾음
|
|
var $cards = $(this).find('.card');
|
|
|
|
if ($cards.length > 1) {
|
|
// 자식 요소의 자연 높이를 얻기 위해 min-height 초기화
|
|
$cards.css('min-height', '0');
|
|
|
|
// 자식 카드들의 최대 높이를 찾음
|
|
$cards.each(function() {
|
|
var currentHeight = $(this).outerHeight();
|
|
if (currentHeight > maxHeight) {
|
|
maxHeight = currentHeight;
|
|
}
|
|
});
|
|
|
|
// 모든 자식 카드에 최대 높이를 min-height로 적용
|
|
if (maxHeight > 0) {
|
|
$cards.css('min-height', maxHeight + 'px');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
$(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();
|
|
|
|
// --- 높이 맞춤 로직 ---
|
|
// 초기 렌더링 후 높이 맞춤 (약간의 지연 후)
|
|
setTimeout(function() { matchRowHeights(); }, 300);
|
|
|
|
// 데이터 로딩이 끝날 때마다 높이 다시 맞춤
|
|
if (window.DashboardEventManager) {
|
|
window.DashboardEventManager.on('loading-end', function() {
|
|
// 데이터 렌더링을 위한 약간의 지연 후 높이 맞춤
|
|
setTimeout(function() { matchRowHeights(); }, 100);
|
|
});
|
|
}
|
|
|
|
// 창 크기 조절 시 높이 다시 맞춤 (디바운싱 적용)
|
|
var resizeTimeout;
|
|
$(window).on('resize', function() {
|
|
clearTimeout(resizeTimeout);
|
|
resizeTimeout = setTimeout(function() { matchRowHeights(); }, 200);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |