모던 대시보드 패치
- ApexCharts 기반 실시간 모니터링 대시보드 - 어댑터/배치/서버/소켓/트랜잭션 모니터링 컴포넌트 - 처리량 계산 및 데이터 매핑 서비스
This commit is contained in:
youna
@@ -0,0 +1,405 @@
|
||||
<%@ page language="java" contentType="text/html; charset=utf-8"%>
|
||||
|
||||
<div class="dashboard-batch">
|
||||
<h2 class="section-title">배치 처리 상태</h2>
|
||||
<div class="card">
|
||||
<div class="batch-grid">
|
||||
<div class="batch-card" id="bapBatchCard" style="display: none">
|
||||
<div class="batch-header">
|
||||
<h4>일괄 전송 처리 (BAP)</h4>
|
||||
</div>
|
||||
<div class="batch-content">
|
||||
<div class="batch-metric">
|
||||
<div class="batch-metric-header">
|
||||
<span class="metric-label">송신</span>
|
||||
<div class="metric-values">
|
||||
<span class="metric-value" id="bap-send-success">0</span>
|
||||
<span class="metric-title">성공</span>
|
||||
</div>
|
||||
<div class="metric-values">
|
||||
<span class="metric-value error" id="bap-send-error">0</span>
|
||||
<span class="metric-title">에러</span>
|
||||
</div>
|
||||
<div class="metric-values">
|
||||
<span class="metric-value warning" id="bap-send-waiting">0</span>
|
||||
<span class="metric-title">대기</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill success" id="bap-send-success-bar" style="width: 80%"></div>
|
||||
<div class="progress-fill danger" id="bap-send-error-bar" style="width: 10%"></div>
|
||||
<div class="progress-fill warning" id="bap-send-waiting-bar" style="width: 10%"></div>
|
||||
</div>
|
||||
<div class="progress-info">
|
||||
<span class="progress-label">처리율:</span>
|
||||
<span class="progress-value" id="bap-send-rate">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="batch-metric">
|
||||
<div class="batch-metric-header">
|
||||
<span class="metric-label">수신</span>
|
||||
<div class="metric-values">
|
||||
<span class="metric-value" id="bap-receive-success">0</span>
|
||||
<span class="metric-title">성공</span>
|
||||
</div>
|
||||
<div class="metric-values">
|
||||
<span class="metric-value error" id="bap-receive-error">0</span>
|
||||
<span class="metric-title">에러</span>
|
||||
</div>
|
||||
<div class="metric-values">
|
||||
<span class="metric-value warning" id="bap-receive-waiting">0</span>
|
||||
<span class="metric-title">대기</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill success" id="bap-receive-success-bar" style="width: 70%"></div>
|
||||
<div class="progress-fill danger" id="bap-receive-error-bar" style="width: 5%"></div>
|
||||
<div class="progress-fill warning" id="bap-receive-waiting-bar" style="width: 25%"></div>
|
||||
</div>
|
||||
<div class="progress-info">
|
||||
<span class="progress-label">처리율:</span>
|
||||
<span class="progress-value" id="bap-receive-rate">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="batch-card" id="batBatchCard" style="display: none">
|
||||
<div class="batch-header">
|
||||
<h4>배치 처리 (BAT)</h4>
|
||||
</div>
|
||||
<div class="batch-content">
|
||||
<div class="batch-metric">
|
||||
<div class="batch-metric-header">
|
||||
<span class="metric-label">송신</span>
|
||||
<div class="metric-values">
|
||||
<span class="metric-value" id="bat-send-success">0</span>
|
||||
<span class="metric-title">성공</span>
|
||||
</div>
|
||||
<div class="metric-values">
|
||||
<span class="metric-value error" id="bat-send-error">0</span>
|
||||
<span class="metric-title">에러</span>
|
||||
</div>
|
||||
<div class="metric-values">
|
||||
<span class="metric-value warning" id="bat-send-waiting">0</span>
|
||||
<span class="metric-title">대기</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill success" id="bat-send-success-bar" style="width: 75%"></div>
|
||||
<div class="progress-fill danger" id="bat-send-error-bar" style="width: 15%"></div>
|
||||
<div class="progress-fill warning" id="bat-send-waiting-bar" style="width: 10%"></div>
|
||||
</div>
|
||||
<div class="progress-info">
|
||||
<span class="progress-label">처리율:</span>
|
||||
<span class="progress-value" id="bat-send-rate">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="batch-metric">
|
||||
<div class="batch-metric-header">
|
||||
<span class="metric-label">수신</span>
|
||||
<div class="metric-values">
|
||||
<span class="metric-value" id="bat-receive-success">0</span>
|
||||
<span class="metric-title">성공</span>
|
||||
</div>
|
||||
<div class="metric-values">
|
||||
<span class="metric-value error" id="bat-receive-error">0</span>
|
||||
<span class="metric-title">에러</span>
|
||||
</div>
|
||||
<div class="metric-values">
|
||||
<span class="metric-value warning" id="bat-receive-waiting">0</span>
|
||||
<span class="metric-title">대기</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill success" id="bat-receive-success-bar" style="width: 65%"></div>
|
||||
<div class="progress-fill danger" id="bat-receive-error-bar" style="width: 10%"></div>
|
||||
<div class="progress-fill warning" id="bat-receive-waiting-bar" style="width: 25%"></div>
|
||||
</div>
|
||||
<div class="progress-info">
|
||||
<span class="progress-label">처리율:</span>
|
||||
<span class="progress-value" id="bat-receive-rate">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 배치 처리 섹션 */
|
||||
.batch-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.batch-card {
|
||||
background-color: white;
|
||||
border-radius: var(--rounded-md);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.batch-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1.25rem;
|
||||
background-color: var(--color-gray-50);
|
||||
border-bottom: 1px solid var(--color-gray-200);
|
||||
}
|
||||
|
||||
.batch-header h4 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-gray-800);
|
||||
}
|
||||
|
||||
.batch-date {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
|
||||
.batch-content {
|
||||
padding: 0.75rem 1.25rem;
|
||||
}
|
||||
|
||||
.batch-metric {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.batch-metric:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.batch-metric-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.batch-metric .metric-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-gray-700);
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.batch-metric .metric-values {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.batch-metric .metric-value {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-gray-800);
|
||||
}
|
||||
|
||||
.batch-metric .metric-value.error {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.batch-metric .metric-value.warning {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.batch-metric .metric-title {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-gray-500);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.metric-progress {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background-color: var(--color-gray-200);
|
||||
border-radius: var(--rounded-full);
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-fill.success {
|
||||
background-color: var(--color-success);
|
||||
}
|
||||
|
||||
.progress-fill.danger {
|
||||
background-color: var(--color-danger);
|
||||
}
|
||||
|
||||
.progress-fill.warning {
|
||||
background-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-gray-600);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* 배치 섹션 스타일 조정 */
|
||||
.batch-container .card {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// 숫자 형식화 함수 (천 단위 콤마 추가)
|
||||
function formatNumber(num) {
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
|
||||
// 배치 프로세스 업데이트 함수
|
||||
function updateBatchProcess(data) {
|
||||
if (!data || !data.batchData) return;
|
||||
|
||||
// BAP 배치 데이터 업데이트
|
||||
var bapData = data.batchData.filter(function(batch) {
|
||||
return batch.serviceType === 'BAP';
|
||||
})[0];
|
||||
|
||||
if (bapData) {
|
||||
// 송신 데이터 설정
|
||||
$('#bap-send-success').text(formatNumber(bapData.sendSuccess));
|
||||
$('#bap-send-error').text(formatNumber(bapData.sendError));
|
||||
$('#bap-send-waiting').text(formatNumber(bapData.sendWaiting));
|
||||
|
||||
// 총 합계 계산
|
||||
var sendTotal = bapData.sendSuccess + bapData.sendError + bapData.sendWaiting;
|
||||
|
||||
// 바 너비 계산
|
||||
var sendSuccessPercent = sendTotal > 0 ? (bapData.sendSuccess / sendTotal * 100) : 0;
|
||||
var sendErrorPercent = sendTotal > 0 ? (bapData.sendError / sendTotal * 100) : 0;
|
||||
var sendWaitingPercent = sendTotal > 0 ? (bapData.sendWaiting / sendTotal * 100) : 0;
|
||||
|
||||
// 바 너비 설정
|
||||
$('#bap-send-success-bar').css('width', sendSuccessPercent + '%');
|
||||
$('#bap-send-error-bar').css('width', sendErrorPercent + '%');
|
||||
$('#bap-send-waiting-bar').css('width', sendWaitingPercent + '%');
|
||||
|
||||
// 처리율 설정
|
||||
var sendCompletedPercent = sendTotal > 0 ?
|
||||
Math.round((bapData.sendSuccess + bapData.sendError) / sendTotal * 100) : 0;
|
||||
$('#bap-send-rate').text(sendCompletedPercent + '%');
|
||||
|
||||
// 수신 데이터 설정
|
||||
$('#bap-receive-success').text(formatNumber(bapData.receiveSuccess));
|
||||
$('#bap-receive-error').text(formatNumber(bapData.receiveError));
|
||||
$('#bap-receive-waiting').text(formatNumber(bapData.receiveWaiting));
|
||||
|
||||
// 총 합계 계산
|
||||
var receiveTotal = bapData.receiveSuccess + bapData.receiveError + bapData.receiveWaiting;
|
||||
|
||||
// 바 너비 계산
|
||||
var receiveSuccessPercent = receiveTotal > 0 ? (bapData.receiveSuccess / receiveTotal * 100) : 0;
|
||||
var receiveErrorPercent = receiveTotal > 0 ? (bapData.receiveError / receiveTotal * 100) : 0;
|
||||
var receiveWaitingPercent = receiveTotal > 0 ? (bapData.receiveWaiting / receiveTotal * 100) : 0;
|
||||
|
||||
// 바 너비 설정
|
||||
$('#bap-receive-success-bar').css('width', receiveSuccessPercent + '%');
|
||||
$('#bap-receive-error-bar').css('width', receiveErrorPercent + '%');
|
||||
$('#bap-receive-waiting-bar').css('width', receiveWaitingPercent + '%');
|
||||
|
||||
// 처리율 설정
|
||||
var receiveCompletedPercent = receiveTotal > 0 ?
|
||||
Math.round((bapData.receiveSuccess + bapData.receiveError) / receiveTotal * 100) : 0;
|
||||
$('#bap-receive-rate').text(receiveCompletedPercent + '%');
|
||||
document.getElementById("bapBatchCard").style.display = "block";
|
||||
}
|
||||
|
||||
// BAT 배치 데이터 업데이트
|
||||
var batData = data.batchData.filter(function(batch) {
|
||||
return batch.serviceType === 'BAT';
|
||||
})[0];
|
||||
|
||||
if (batData) {
|
||||
// 송신 데이터 설정
|
||||
$('#bat-send-success').text(formatNumber(batData.sendSuccess));
|
||||
$('#bat-send-error').text(formatNumber(batData.sendError));
|
||||
$('#bat-send-waiting').text(formatNumber(batData.sendWaiting));
|
||||
|
||||
// 총 합계 계산
|
||||
var sendTotal = batData.sendSuccess + batData.sendError + batData.sendWaiting;
|
||||
|
||||
// 바 너비 계산
|
||||
var sendSuccessPercent = sendTotal > 0 ? (batData.sendSuccess / sendTotal * 100) : 0;
|
||||
var sendErrorPercent = sendTotal > 0 ? (batData.sendError / sendTotal * 100) : 0;
|
||||
var sendWaitingPercent = sendTotal > 0 ? (batData.sendWaiting / sendTotal * 100) : 0;
|
||||
|
||||
// 바 너비 설정
|
||||
$('#bat-send-success-bar').css('width', sendSuccessPercent + '%');
|
||||
$('#bat-send-error-bar').css('width', sendErrorPercent + '%');
|
||||
$('#bat-send-waiting-bar').css('width', sendWaitingPercent + '%');
|
||||
|
||||
// 처리율 설정
|
||||
var sendCompletedPercent = sendTotal > 0 ?
|
||||
Math.round((batData.sendSuccess + batData.sendError) / sendTotal * 100) : 0;
|
||||
$('#bat-send-rate').text(sendCompletedPercent + '%');
|
||||
|
||||
// 수신 데이터 설정
|
||||
$('#bat-receive-success').text(formatNumber(batData.receiveSuccess));
|
||||
$('#bat-receive-error').text(formatNumber(batData.receiveError));
|
||||
$('#bat-receive-waiting').text(formatNumber(batData.receiveWaiting));
|
||||
|
||||
// 총 합계 계산
|
||||
var receiveTotal = batData.receiveSuccess + batData.receiveError + batData.receiveWaiting;
|
||||
|
||||
// 바 너비 계산
|
||||
var receiveSuccessPercent = receiveTotal > 0 ? (batData.receiveSuccess / receiveTotal * 100) : 0;
|
||||
var receiveErrorPercent = receiveTotal > 0 ? (batData.receiveError / receiveTotal * 100) : 0;
|
||||
var receiveWaitingPercent = receiveTotal > 0 ? (batData.receiveWaiting / receiveTotal * 100) : 0;
|
||||
|
||||
// 바 너비 설정
|
||||
$('#bat-receive-success-bar').css('width', receiveSuccessPercent + '%');
|
||||
$('#bat-receive-error-bar').css('width', receiveErrorPercent + '%');
|
||||
$('#bat-receive-waiting-bar').css('width', receiveWaitingPercent + '%');
|
||||
|
||||
// 처리율 설정
|
||||
var receiveCompletedPercent = receiveTotal > 0 ?
|
||||
Math.round((batData.receiveSuccess + batData.receiveError) / receiveTotal * 100) : 0;
|
||||
$('#bat-receive-rate').text(receiveCompletedPercent + '%');
|
||||
document.getElementById("batBatchCard").style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
// 배치 처리 데이터 로드 및 업데이트 함수
|
||||
function loadBatchProcessData() {
|
||||
ModernDashboardApi.getBatchProcess(function(data) {
|
||||
updateBatchProcess(data);
|
||||
});
|
||||
}
|
||||
|
||||
// 초기 로드
|
||||
$(document).ready(function() {
|
||||
loadBatchProcessData();
|
||||
|
||||
// 대시보드 새로고침 이벤트에 배치 처리 데이터 로드 함수 등록
|
||||
DashboardEventManager.on('refresh', function() {
|
||||
loadBatchProcessData();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user