API 통계 화면 구현
This commit is contained in:
daekuk1
@@ -0,0 +1,353 @@
|
||||
<%@ page language="java" contentType="text/html; charset=utf-8"%>
|
||||
<%@ page import="java.io.*"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<%@ 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");
|
||||
%>
|
||||
<html>
|
||||
<head>
|
||||
<title>API 통계 집계 실행</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<jsp:include page="/jsp/common/include/css.jsp"/>
|
||||
<style>
|
||||
.aggregation-section {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.aggregation-section h3 {
|
||||
margin: 0 0 15px 0;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #4CAF50;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
}
|
||||
.aggregation-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.aggregation-form label {
|
||||
font-weight: bold;
|
||||
min-width: 80px;
|
||||
}
|
||||
.aggregation-form input[type="text"] {
|
||||
width: 150px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.aggregation-form .cssbtn {
|
||||
min-width: 120px;
|
||||
}
|
||||
.result-area {
|
||||
margin-top: 15px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
}
|
||||
.result-area.success {
|
||||
background: #d4edda;
|
||||
border: 1px solid #c3e6cb;
|
||||
color: #155724;
|
||||
}
|
||||
.result-area.error {
|
||||
background: #f8d7da;
|
||||
border: 1px solid #f5c6cb;
|
||||
color: #721c24;
|
||||
}
|
||||
.result-area pre {
|
||||
margin: 5px 0 0 0;
|
||||
white-space: pre-wrap;
|
||||
font-size: 12px;
|
||||
}
|
||||
.info-box {
|
||||
background: #e7f3ff;
|
||||
border-left: 4px solid #2196F3;
|
||||
padding: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.info-box ul {
|
||||
margin: 5px 0 0 20px;
|
||||
padding: 0;
|
||||
}
|
||||
.info-box li {
|
||||
margin: 3px 0;
|
||||
}
|
||||
</style>
|
||||
<jsp:include page="/jsp/common/include/script.jsp"/>
|
||||
<script language="javascript">
|
||||
function executeHourlyToDaily() {
|
||||
var targetDate = $("#targetDate").val().replace(/-/g, "");
|
||||
var resultDiv = $("#dailyResult");
|
||||
|
||||
// 날짜 입력 검증
|
||||
if (!targetDate || targetDate.trim() === '') {
|
||||
alert('대상 날짜를 입력하세요. (예: 20250120)');
|
||||
$("#targetDate").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
resultDiv.hide();
|
||||
$("#btn_execute_daily").prop("disabled", true).text("실행중...");
|
||||
|
||||
$.ajax({
|
||||
url: '<c:url value="/onl/kjb/statistics/apiStatsAggregationMan.json"/>',
|
||||
type: 'POST',
|
||||
data: {
|
||||
cmd: 'AGGREGATION_DAY',
|
||||
targetDate: targetDate,
|
||||
serviceType: '${param.serviceType}'
|
||||
},
|
||||
success: function(response) {
|
||||
resultDiv.removeClass("error").addClass("success");
|
||||
var message = response.message + "\n";
|
||||
message += "대상 날짜: " + response.targetDate + "\n";
|
||||
message += "처리 건수: " + response.processedCount;
|
||||
resultDiv.find("pre").text(message);
|
||||
resultDiv.show();
|
||||
},
|
||||
error: function(xhr) {
|
||||
resultDiv.removeClass("success").addClass("error");
|
||||
var message = "집계 실행 실패\n";
|
||||
try {
|
||||
var error = JSON.parse(xhr.responseText);
|
||||
message += error.message;
|
||||
} catch(e) {
|
||||
message += xhr.responseText || "알 수 없는 오류가 발생했습니다.";
|
||||
}
|
||||
resultDiv.find("pre").text(message);
|
||||
resultDiv.show();
|
||||
},
|
||||
complete: function() {
|
||||
$("#btn_execute_daily").prop("disabled", false).text("집계 실행");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function executeDailyToMonthly() {
|
||||
var targetMonth = $("#targetMonth").val().replace(/-/g, "");
|
||||
var resultDiv = $("#monthlyResult");
|
||||
|
||||
// 월 입력 검증
|
||||
if (!targetMonth || targetMonth.trim() === '') {
|
||||
alert('대상 월을 입력하세요. (예: 202501)');
|
||||
$("#targetMonth").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
resultDiv.hide();
|
||||
$("#btn_execute_monthly").prop("disabled", true).text("실행중...");
|
||||
|
||||
$.ajax({
|
||||
url: '<c:url value="/onl/kjb/statistics/apiStatsAggregationMan.json"/>',
|
||||
type: 'POST',
|
||||
data: {
|
||||
cmd: 'AGGREGATION_MONTH',
|
||||
targetMonth: targetMonth,
|
||||
serviceType: '${param.serviceType}'
|
||||
},
|
||||
success: function(response) {
|
||||
resultDiv.removeClass("error").addClass("success");
|
||||
var message = response.message + "\n";
|
||||
message += "대상 월: " + response.targetMonth + "\n";
|
||||
message += "처리 건수: " + response.processedCount;
|
||||
resultDiv.find("pre").text(message);
|
||||
resultDiv.show();
|
||||
},
|
||||
error: function(xhr) {
|
||||
resultDiv.removeClass("success").addClass("error");
|
||||
var message = "집계 실행 실패\n";
|
||||
try {
|
||||
var error = JSON.parse(xhr.responseText);
|
||||
message += error.message;
|
||||
} catch(e) {
|
||||
message += xhr.responseText || "알 수 없는 오류가 발생했습니다.";
|
||||
}
|
||||
resultDiv.find("pre").text(message);
|
||||
resultDiv.show();
|
||||
},
|
||||
complete: function() {
|
||||
$("#btn_execute_monthly").prop("disabled", false).text("집계 실행");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function executeMonthlyToYearly() {
|
||||
var targetYear = $("#targetYear").val();
|
||||
var resultDiv = $("#yearlyResult");
|
||||
|
||||
// 연도 입력 검증
|
||||
if (!targetYear || targetYear.trim() === '') {
|
||||
alert('대상 연도를 입력하세요. (예: 2024)');
|
||||
$("#targetYear").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
resultDiv.hide();
|
||||
$("#btn_execute_yearly").prop("disabled", true).text("실행중...");
|
||||
|
||||
$.ajax({
|
||||
url: '<c:url value="/onl/kjb/statistics/apiStatsAggregationMan.json"/>',
|
||||
type: 'POST',
|
||||
data: {
|
||||
cmd: 'AGGREGATION_YEAR',
|
||||
targetYear: targetYear,
|
||||
serviceType: '${param.serviceType}'
|
||||
},
|
||||
success: function(response) {
|
||||
resultDiv.removeClass("error").addClass("success");
|
||||
var message = response.message + "\n";
|
||||
message += "대상 연도: " + response.targetYear + "\n";
|
||||
message += "처리 건수: " + response.processedCount;
|
||||
resultDiv.find("pre").text(message);
|
||||
resultDiv.show();
|
||||
},
|
||||
error: function(xhr) {
|
||||
resultDiv.removeClass("success").addClass("error");
|
||||
var message = "집계 실행 실패\n";
|
||||
try {
|
||||
var error = JSON.parse(xhr.responseText);
|
||||
message += error.message;
|
||||
} catch(e) {
|
||||
message += xhr.responseText || "알 수 없는 오류가 발생했습니다.";
|
||||
}
|
||||
resultDiv.find("pre").text(message);
|
||||
resultDiv.show();
|
||||
},
|
||||
complete: function() {
|
||||
$("#btn_execute_yearly").prop("disabled", false).text("집계 실행");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
// 날짜 입력 마스크
|
||||
$("#targetDate").inputmask("99999999", { 'autoUnmask': true, 'placeholder': '' });
|
||||
$("#targetMonth").inputmask("999999", { 'autoUnmask': true, 'placeholder': '' });
|
||||
$("#targetYear").inputmask("9999", { 'autoUnmask': true, 'placeholder': '' });
|
||||
|
||||
// 초기값 설정 (전일, 전월, 전년)
|
||||
var today = new Date();
|
||||
|
||||
// 전일
|
||||
var yesterday = new Date(today);
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
var year = yesterday.getFullYear();
|
||||
var month = String(yesterday.getMonth() + 1).padStart(2, '0');
|
||||
var day = String(yesterday.getDate()).padStart(2, '0');
|
||||
$("#targetDate").val(year + month + day);
|
||||
|
||||
// 전월
|
||||
var lastMonth = new Date(today);
|
||||
lastMonth.setMonth(lastMonth.getMonth() - 1);
|
||||
var lastMonthYear = lastMonth.getFullYear();
|
||||
var lastMonthMonth = String(lastMonth.getMonth() + 1).padStart(2, '0');
|
||||
$("#targetMonth").val(lastMonthYear + lastMonthMonth);
|
||||
|
||||
// 전년
|
||||
var lastYear = today.getFullYear() - 1;
|
||||
$("#targetYear").val(lastYear);
|
||||
|
||||
// 버튼 이벤트
|
||||
$("#btn_execute_daily").click(function() {
|
||||
if (confirm("시간별→일별 통계 집계를 실행하시겠습니까?")) {
|
||||
executeHourlyToDaily();
|
||||
}
|
||||
});
|
||||
|
||||
$("#btn_execute_monthly").click(function() {
|
||||
if (confirm("일별→월별 통계 집계를 실행하시겠습니까?")) {
|
||||
executeDailyToMonthly();
|
||||
}
|
||||
});
|
||||
|
||||
$("#btn_execute_yearly").click(function() {
|
||||
if (confirm("월별→연별 통계 집계를 실행하시겠습니까?")) {
|
||||
executeMonthlyToYearly();
|
||||
}
|
||||
});
|
||||
|
||||
buttonControl();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="right_box">
|
||||
<div class="content_top">
|
||||
<ul class="path">
|
||||
<li><a href="#">${rmsMenuPath}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content_middle" id="content_middle">
|
||||
<div class="title" id="title">API 통계 집계 수동 실행</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>⚠️ 주의사항</strong>
|
||||
<ul>
|
||||
<li>통계 집계는 스케줄러에 의해 자동으로 실행됩니다.</li>
|
||||
<li>수동 실행은 누락된 기간이나 재집계가 필요한 경우에만 사용하세요.</li>
|
||||
<li>집계 대상 기간의 원본 데이터가 존재해야 합니다.</li>
|
||||
<li>대상 날짜/월/연도를 반드시 입력해야 합니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 시간별 → 일별 집계 -->
|
||||
<div class="aggregation-section">
|
||||
<h3>1. 시간별 → 일별 통계 집계</h3>
|
||||
<div class="aggregation-form">
|
||||
<label>대상 날짜:</label>
|
||||
<input type="text" id="targetDate" placeholder="yyyyMMdd" maxlength="8">
|
||||
<span style="color: #666; font-size: 12px;">(예: 20250120)</span>
|
||||
<button type="button" class="cssbtn" id="btn_execute_daily" level="W">
|
||||
<i class="material-icons">play_arrow</i> 집계 실행
|
||||
</button>
|
||||
</div>
|
||||
<div id="dailyResult" class="result-area">
|
||||
<strong>실행 결과:</strong>
|
||||
<pre></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 일별 → 월별 집계 -->
|
||||
<div class="aggregation-section">
|
||||
<h3>2. 일별 → 월별 통계 집계</h3>
|
||||
<div class="aggregation-form">
|
||||
<label>대상 월:</label>
|
||||
<input type="text" id="targetMonth" placeholder="yyyyMM" maxlength="6">
|
||||
<span style="color: #666; font-size: 12px;">(예: 202501)</span>
|
||||
<button type="button" class="cssbtn" id="btn_execute_monthly" level="W">
|
||||
<i class="material-icons">play_arrow</i> 집계 실행
|
||||
</button>
|
||||
</div>
|
||||
<div id="monthlyResult" class="result-area">
|
||||
<strong>실행 결과:</strong>
|
||||
<pre></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 월별 → 연별 집계 -->
|
||||
<div class="aggregation-section">
|
||||
<h3>3. 월별 → 연별 통계 집계</h3>
|
||||
<div class="aggregation-form">
|
||||
<label>대상 연도:</label>
|
||||
<input type="text" id="targetYear" placeholder="yyyy" maxlength="4">
|
||||
<span style="color: #666; font-size: 12px;">(예: 2024)</span>
|
||||
<button type="button" class="cssbtn" id="btn_execute_yearly" level="W">
|
||||
<i class="material-icons">play_arrow</i> 집계 실행
|
||||
</button>
|
||||
</div>
|
||||
<div id="yearlyResult" class="result-area">
|
||||
<strong>실행 결과:</strong>
|
||||
<pre></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,695 @@
|
||||
<%@ page language="java" contentType="text/html; charset=utf-8"%>
|
||||
<%@ page import="java.io.*"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<%@ 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");
|
||||
%>
|
||||
<html>
|
||||
<head>
|
||||
<title>일별 통계 조회</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<jsp:include page="/jsp/common/include/css.jsp"/>
|
||||
<style>
|
||||
.chart-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
gap: 10px;
|
||||
}
|
||||
.chart-container.full-width {
|
||||
display: block;
|
||||
}
|
||||
.chart {
|
||||
width: 49%;
|
||||
height: 300px;
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
}
|
||||
.chart.full-width {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
<jsp:include page="/jsp/common/include/script.jsp"/>
|
||||
<script src="<c:url value="/addon/echarts/echarts.min.js"/>"></script>
|
||||
<script language="javascript">
|
||||
var url = '<c:url value="/onl/kjb/statistics/apiStatsDayMan.json"/>';
|
||||
var url_view = '<c:url value="/onl/kjb/statistics/apiStatsDayMan.view"/>';
|
||||
|
||||
var totalDonutChart, seq900DonutChart, callChart, respChart;
|
||||
|
||||
function numberFormatter(cellvalue, options, rowObject) {
|
||||
if (cellvalue == null || cellvalue == '') return '0';
|
||||
return Number(cellvalue).toLocaleString();
|
||||
}
|
||||
|
||||
function decimalFormatter(cellvalue, options, rowObject) {
|
||||
if (cellvalue == null || cellvalue == '') return '0.000';
|
||||
return Number(cellvalue).toFixed(3);
|
||||
}
|
||||
|
||||
function initCharts() {
|
||||
totalDonutChart = echarts.init(document.getElementById('totalDonutChart'));
|
||||
seq900DonutChart = echarts.init(document.getElementById('seq900DonutChart'));
|
||||
callChart = echarts.init(document.getElementById('callChart'));
|
||||
respChart = echarts.init(document.getElementById('respChart'));
|
||||
|
||||
// 총건수 도넛 차트
|
||||
var totalDonutOption = {
|
||||
title: {
|
||||
text: '총 건수 분포',
|
||||
left: 'center',
|
||||
top: 10,
|
||||
textStyle: { fontSize: 14 }
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: 10,
|
||||
data: ['성공', 'Timeout', '시스템오류', '업무오류']
|
||||
},
|
||||
series: [{
|
||||
name: '총건수',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: [
|
||||
{ value: 0, name: '성공', itemStyle: { color: '#91CC75' } },
|
||||
{ value: 0, name: 'Timeout', itemStyle: { color: '#FAC858' } },
|
||||
{ value: 0, name: '시스템오류', itemStyle: { color: '#EE6666' } },
|
||||
{ value: 0, name: '업무오류', itemStyle: { color: '#FC8452' } }
|
||||
]
|
||||
}],
|
||||
graphic: [{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: '0',
|
||||
textAlign: 'center',
|
||||
fill: '#333',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
totalDonutChart.setOption(totalDonutOption);
|
||||
|
||||
// Seq900 도넛 차트
|
||||
var seq900DonutOption = {
|
||||
title: {
|
||||
text: 'Seq900 에러 분포',
|
||||
left: 'center',
|
||||
top: 10,
|
||||
textStyle: { fontSize: 14 }
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: 10,
|
||||
data: ['Timeout', '시스템오류', '업무오류']
|
||||
},
|
||||
series: [{
|
||||
name: 'Seq900 에러',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: [
|
||||
{ value: 0, name: 'Timeout', itemStyle: { color: '#FAC858' } },
|
||||
{ value: 0, name: '시스템오류', itemStyle: { color: '#EE6666' } },
|
||||
{ value: 0, name: '업무오류', itemStyle: { color: '#FC8452' } }
|
||||
]
|
||||
}],
|
||||
graphic: [{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: '0',
|
||||
textAlign: 'center',
|
||||
fill: '#333',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
seq900DonutChart.setOption(seq900DonutOption);
|
||||
|
||||
// 호출량 차트
|
||||
var callOption = {
|
||||
title: { text: '호출량 추이', left: 'center', textStyle: { fontSize: 14 } },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
|
||||
},
|
||||
legend: { data: ['성공', 'Timeout', '시스템오류', '업무오류'], bottom: 0 },
|
||||
grid: { left: '3%', right: '4%', bottom: '15%', top: '15%', containLabel: true },
|
||||
xAxis: { type: 'category', boundaryGap: false, data: [] },
|
||||
yAxis: { type: 'value', minInterval: 1 },
|
||||
series: [
|
||||
{ name: '성공', type: 'line', stack: 'Total', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#5470C6' }, data: [] },
|
||||
{ name: 'Timeout', type: 'line', stack: 'Total', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#FAC858' }, data: [] },
|
||||
{ name: '시스템오류', type: 'line', stack: 'Total', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#EE6666' }, data: [] },
|
||||
{ name: '업무오류', type: 'line', stack: 'Total', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#FC8452' }, data: [] }
|
||||
]
|
||||
};
|
||||
|
||||
callChart.setOption(callOption);
|
||||
|
||||
// 응답시간 차트
|
||||
var respOption = {
|
||||
title: { text: '응답시간 추이 (ms)', left: 'center', textStyle: { fontSize: 14 } },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
|
||||
},
|
||||
legend: { data: ['P95', 'P50', '평균'], bottom: 0 },
|
||||
grid: { left: '3%', right: '4%', bottom: '15%', top: '15%', containLabel: true },
|
||||
xAxis: { type: 'category', boundaryGap: false, data: [] },
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{ name: 'P95', type: 'line', smooth: true, itemStyle: { color: '#EE6666' }, lineStyle: { type: 'dashed' }, data: [] },
|
||||
{ name: 'P50', type: 'line', smooth: true, itemStyle: { color: '#5470C6' }, data: [] },
|
||||
{ name: '평균', type: 'line', smooth: true, itemStyle: { color: '#91CC75' }, data: [] }
|
||||
]
|
||||
};
|
||||
|
||||
respChart.setOption(respOption);
|
||||
}
|
||||
|
||||
function updateCharts(data) {
|
||||
// 시계열 차트용 변수
|
||||
var times = [];
|
||||
var successData = [];
|
||||
var timeoutData = [];
|
||||
var systemErrData = [];
|
||||
var bizErrData = [];
|
||||
var avgRespData = [];
|
||||
var p50RespData = [];
|
||||
var p95RespData = [];
|
||||
|
||||
// 도넛 차트용 총계 변수
|
||||
var totalSuccess = 0;
|
||||
var totalTimeout = 0;
|
||||
var totalSystemErr = 0;
|
||||
var totalBizErr = 0;
|
||||
var seq900Timeout = 0;
|
||||
var seq900SystemErr = 0;
|
||||
var seq900BizErr = 0;
|
||||
|
||||
data.forEach(function(item) {
|
||||
times.push(item.statTime);
|
||||
|
||||
// 시계열 차트 데이터
|
||||
successData.push(item.successCnt);
|
||||
timeoutData.push(item.timeoutCnt);
|
||||
systemErrData.push(item.systemErrCnt);
|
||||
bizErrData.push(item.bizErrCnt);
|
||||
avgRespData.push(item.avgRespTime);
|
||||
p50RespData.push(item.p50RespTime);
|
||||
p95RespData.push(item.p95RespTime);
|
||||
|
||||
// 도넛 차트용 합산
|
||||
totalSuccess += (item.successCnt || 0);
|
||||
totalTimeout += (item.timeoutCnt || 0);
|
||||
totalSystemErr += (item.systemErrCnt || 0);
|
||||
totalBizErr += (item.bizErrCnt || 0);
|
||||
seq900Timeout += (item.seq900TimeoutCnt || 0);
|
||||
seq900SystemErr += (item.seq900SystemErrCnt || 0);
|
||||
seq900BizErr += (item.seq900BizErrCnt || 0);
|
||||
});
|
||||
|
||||
// 총건수 도넛 차트 업데이트
|
||||
var grandTotal = totalSuccess + totalTimeout + totalSystemErr + totalBizErr;
|
||||
totalDonutChart.setOption({
|
||||
series: [{
|
||||
data: [
|
||||
{ value: totalSuccess, name: '성공' },
|
||||
{ value: totalTimeout, name: 'Timeout' },
|
||||
{ value: totalSystemErr, name: '시스템오류' },
|
||||
{ value: totalBizErr, name: '업무오류' }
|
||||
]
|
||||
}],
|
||||
graphic: [{
|
||||
style: {
|
||||
text: grandTotal.toLocaleString()
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
// Seq900 도넛 차트 업데이트
|
||||
var seq900Total = seq900Timeout + seq900SystemErr + seq900BizErr;
|
||||
seq900DonutChart.setOption({
|
||||
series: [{
|
||||
data: [
|
||||
{ value: seq900Timeout, name: 'Timeout' },
|
||||
{ value: seq900SystemErr, name: '시스템오류' },
|
||||
{ value: seq900BizErr, name: '업무오류' }
|
||||
]
|
||||
}],
|
||||
graphic: [{
|
||||
style: {
|
||||
text: seq900Total.toLocaleString()
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
// 호출량 차트 업데이트
|
||||
callChart.setOption({
|
||||
xAxis: { data: times.map(function(t) { return t.substring(6, 8) + '일'; }) },
|
||||
series: [
|
||||
{ data: successData },
|
||||
{ data: timeoutData },
|
||||
{ data: systemErrData },
|
||||
{ data: bizErrData }
|
||||
]
|
||||
});
|
||||
|
||||
// 응답시간 차트 업데이트
|
||||
respChart.setOption({
|
||||
xAxis: { data: times.map(function(t) { return t.substring(6, 8) + '일'; }) },
|
||||
series: [
|
||||
{ data: p95RespData },
|
||||
{ data: p50RespData },
|
||||
{ data: avgRespData }
|
||||
]
|
||||
});
|
||||
|
||||
// 드릴다운을 위해 원본 데이터 저장
|
||||
callChart.rawData = data;
|
||||
respChart.rawData = data;
|
||||
}
|
||||
|
||||
function fetchChartData() {
|
||||
var searchStartDate = $("input[name=searchStartDateTime]").val().replace(/-/g, "");
|
||||
var searchEndDate = $("input[name=searchEndDateTime]").val().replace(/-/g, "");
|
||||
|
||||
if (searchStartDate && searchEndDate) {
|
||||
var start = new Date(searchStartDate.substring(0, 4), parseInt(searchStartDate.substring(4, 6)) - 1, searchStartDate.substring(6, 8));
|
||||
var end = new Date(searchEndDate.substring(0, 4), parseInt(searchEndDate.substring(4, 6)) - 1, searchEndDate.substring(6, 8));
|
||||
var diffDays = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays > 31) {
|
||||
alert('조회 기간은 최대 31일까지 가능합니다.');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
var postData = {
|
||||
cmd: 'CHART',
|
||||
searchApiName: $("input[name=searchApiName]").val(),
|
||||
searchGwInstanceId: $("input[name=searchGwInstanceId]").val(),
|
||||
searchBizDivCode: $("input[name=searchBizDivCode]").val(),
|
||||
searchClientId: $("input[name=searchClientId]").val(),
|
||||
searchInboundAdapter: $("input[name=searchInboundAdapter]").val(),
|
||||
searchOutboundAdapter: $("input[name=searchOutboundAdapter]").val()
|
||||
};
|
||||
|
||||
if (searchStartDate) {
|
||||
postData.searchStartDateTime = searchStartDate;
|
||||
}
|
||||
if (searchEndDate) {
|
||||
postData.searchEndDateTime = searchEndDate;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'POST',
|
||||
data: postData,
|
||||
success: function(response) {
|
||||
updateCharts(response);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Chart data fetch error:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function search() {
|
||||
var searchStartDate = $("input[name=searchStartDateTime]").val().replace(/-/g, "");
|
||||
var searchEndDate = $("input[name=searchEndDateTime]").val().replace(/-/g, "");
|
||||
|
||||
if (searchStartDate && searchEndDate) {
|
||||
var start = new Date(searchStartDate.substring(0, 4), parseInt(searchStartDate.substring(4, 6)) - 1, searchStartDate.substring(6, 8));
|
||||
var end = new Date(searchEndDate.substring(0, 4), parseInt(searchEndDate.substring(4, 6)) - 1, searchEndDate.substring(6, 8));
|
||||
var diffDays = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays > 31) {
|
||||
alert('조회 기간은 최대 31일까지 가능합니다.');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
var postData = getSearchForJqgrid("cmd", "LIST");
|
||||
|
||||
if (searchStartDate) {
|
||||
postData.searchStartDateTime = searchStartDate;
|
||||
}
|
||||
if (searchEndDate) {
|
||||
postData.searchEndDateTime = searchEndDate;
|
||||
}
|
||||
|
||||
$("#grid").setGridParam({ url: url, postData: postData, page: 1 }).trigger("reloadGrid");
|
||||
fetchChartData();
|
||||
}
|
||||
|
||||
function exportToExcel() {
|
||||
console.log('[Excel Export] Starting...');
|
||||
|
||||
var searchStartDate = $("input[name=searchStartDateTime]").val().replace(/-/g, "");
|
||||
var searchEndDate = $("input[name=searchEndDateTime]").val().replace(/-/g, "");
|
||||
|
||||
var postData = {
|
||||
cmd: 'EXCEL_EXPORT',
|
||||
searchApiName: $("input[name=searchApiName]").val(),
|
||||
searchGwInstanceId: $("input[name=searchGwInstanceId]").val(),
|
||||
searchBizDivCode: $("input[name=searchBizDivCode]").val(),
|
||||
searchClientId: $("input[name=searchClientId]").val(),
|
||||
searchInboundAdapter: $("input[name=searchInboundAdapter]").val(),
|
||||
searchOutboundAdapter: $("input[name=searchOutboundAdapter]").val(),
|
||||
serviceType: '${param.serviceType}'
|
||||
};
|
||||
|
||||
if (searchStartDate) {
|
||||
postData.searchStartDateTime = searchStartDate;
|
||||
}
|
||||
if (searchEndDate) {
|
||||
postData.searchEndDateTime = searchEndDate;
|
||||
}
|
||||
|
||||
console.log('[Excel Export] Request data:', postData);
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', url, true);
|
||||
xhr.responseType = 'blob';
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
||||
|
||||
xhr.onload = function() {
|
||||
console.log('[Excel Export] Response received - Status:', xhr.status);
|
||||
|
||||
if (xhr.status === 200) {
|
||||
var blob = xhr.response;
|
||||
var contentType = xhr.getResponseHeader('Content-Type');
|
||||
console.log('[Excel Export] Blob size:', blob.size, 'Content-Type:', contentType);
|
||||
|
||||
// JSON 에러 응답인지 확인
|
||||
if (contentType && contentType.indexOf('application/json') !== -1) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function() {
|
||||
try {
|
||||
var errorObj = JSON.parse(reader.result);
|
||||
alert(errorObj.message || 'Excel 파일 생성에 실패했습니다.');
|
||||
} catch (e) {
|
||||
alert('Excel 파일 생성에 실패했습니다.');
|
||||
}
|
||||
};
|
||||
reader.readAsText(blob);
|
||||
return;
|
||||
}
|
||||
|
||||
// Blob 크기가 0이면 에러
|
||||
if (blob.size === 0) {
|
||||
alert('Excel 파일 생성에 실패했습니다. (빈 응답)');
|
||||
return;
|
||||
}
|
||||
|
||||
// 파일명 생성
|
||||
var filename = 'API일별통계_' + searchStartDate + '.xlsx';
|
||||
var disposition = xhr.getResponseHeader('Content-Disposition');
|
||||
console.log('[Excel Export] Content-Disposition:', disposition);
|
||||
|
||||
if (disposition && disposition.indexOf('filename=') !== -1) {
|
||||
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
|
||||
var matches = filenameRegex.exec(disposition);
|
||||
if (matches != null && matches[1]) {
|
||||
filename = matches[1].replace(/['"]/g, '');
|
||||
filename = decodeURIComponent(filename);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('[Excel Export] Downloading as:', filename);
|
||||
|
||||
// 파일 다운로드
|
||||
var link = document.createElement('a');
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(link.href);
|
||||
|
||||
console.log('[Excel Export] Download triggered');
|
||||
|
||||
} else if (xhr.status === 204) {
|
||||
alert('조회된 데이터가 없습니다.');
|
||||
} else {
|
||||
// 에러 응답 처리
|
||||
var reader = new FileReader();
|
||||
reader.onload = function() {
|
||||
var message = 'Excel 다운로드 중 오류가 발생했습니다.';
|
||||
try {
|
||||
var errorObj = JSON.parse(reader.result);
|
||||
if (errorObj.message) message = errorObj.message;
|
||||
} catch (e) {
|
||||
console.error('[Excel Export] Error parsing error response:', e);
|
||||
}
|
||||
alert(message);
|
||||
};
|
||||
reader.readAsText(xhr.response);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
console.error('[Excel Export] Network error');
|
||||
alert('네트워크 오류가 발생했습니다.');
|
||||
};
|
||||
|
||||
// Form data 생성
|
||||
var formData = [];
|
||||
for (var key in postData) {
|
||||
if (postData.hasOwnProperty(key) && postData[key] != null && postData[key] !== '') {
|
||||
formData.push(encodeURIComponent(key) + '=' + encodeURIComponent(postData[key]));
|
||||
}
|
||||
}
|
||||
|
||||
xhr.send(formData.join('&'));
|
||||
}
|
||||
|
||||
function list() {
|
||||
var gridPostData = getSearchForJqgrid("cmd", "LIST");
|
||||
$('#grid').jqGrid({
|
||||
datatype: "json",
|
||||
mtype: 'POST',
|
||||
postData: gridPostData,
|
||||
colNames: [
|
||||
'통계시간', 'API명', '인스턴스', '업무구분', '클라이언트ID',
|
||||
'Inbound Adapter', 'Outbound Adapter',
|
||||
'총건수', '성공', 'Timeout', '시스템오류', '업무오류',
|
||||
'Seq900 Timeout', 'Seq900 시스템오류', 'Seq900 업무오류',
|
||||
'평균응답(ms)', '최소응답(ms)', '최대응답(ms)', 'P50(ms)', 'P95(ms)'
|
||||
],
|
||||
colModel: [
|
||||
{ name: 'statTime', align: 'center', width: '120', sortable: false },
|
||||
{ name: 'apiName', align: 'left', width: '150', sortable: false },
|
||||
{ name: 'gwInstanceId', align: 'center', width: '80', sortable: false },
|
||||
{ name: 'bizDivCode', align: 'center', width: '80', sortable: false },
|
||||
{ name: 'clientId', align: 'left', width: '100', sortable: false },
|
||||
{ name: 'inboundAdapter', align: 'left', width: '120', sortable: false },
|
||||
{ name: 'outboundAdapter', align: 'left', width: '120', sortable: false },
|
||||
{ name: 'totalCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'successCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'timeoutCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'systemErrCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'bizErrCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'seq900TimeoutCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'seq900SystemErrCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'seq900BizErrCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'avgRespTime', align: 'right', width: '80', formatter: decimalFormatter, sortable: false },
|
||||
{ name: 'minRespTime', align: 'right', width: '80', formatter: decimalFormatter, sortable: false },
|
||||
{ name: 'maxRespTime', align: 'right', width: '80', formatter: decimalFormatter, sortable: false },
|
||||
{ name: 'p50RespTime', align: 'right', width: '70', formatter: decimalFormatter, sortable: false },
|
||||
{ name: 'p95RespTime', align: 'right', width: '70', formatter: decimalFormatter, sortable: false }
|
||||
],
|
||||
jsonReader: { repeatitems: false },
|
||||
pager: $('#pager'),
|
||||
page: '${param.page}',
|
||||
rowNum: '${rmsDefaultRowNum}',
|
||||
autoheight: true,
|
||||
height: $("#container").height(),
|
||||
autowidth: true,
|
||||
viewrecords: true,
|
||||
rowList: eval('[${rmsDefaultRowList}]'),
|
||||
loadComplete: function(d) {
|
||||
var colModel = $(this).getGridParam("colModel");
|
||||
for (var i = 0; i < colModel.length; i++) {
|
||||
$(this).setColProp(colModel[i].name, { sortable: false });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
// 날짜 입력 마스크
|
||||
$("input[name=searchStartDateTime]").inputmask("9999-99-99", { 'autoUnmask': true });
|
||||
$("input[name=searchEndDateTime]").inputmask("9999-99-99", { 'autoUnmask': true });
|
||||
|
||||
// 기본값 설정 (이번달 1일 ~ 오늘)
|
||||
var today = getToday();
|
||||
if (!$("input[name=searchStartDateTime]").val()) {
|
||||
var firstDay = today.substring(0, 8) + "01";
|
||||
$("input[name=searchStartDateTime]").val(firstDay.substring(0, 4) + '-' + firstDay.substring(4, 6) + '-' + firstDay.substring(6, 8));
|
||||
}
|
||||
if (!$("input[name=searchEndDateTime]").val()) {
|
||||
$("input[name=searchEndDateTime]").val(today);
|
||||
}
|
||||
|
||||
initCharts();
|
||||
list();
|
||||
search();
|
||||
fetchChartData();
|
||||
resizeJqGridWidth('grid', 'content_middle', '1200');
|
||||
|
||||
$("#btn_search").click(function() {
|
||||
search();
|
||||
});
|
||||
|
||||
$("#btn_excel_export").click(function() {
|
||||
exportToExcel();
|
||||
});
|
||||
|
||||
$("input[name^=search]").keydown(function(key) {
|
||||
if (key.keyCode == 13) {
|
||||
$("#btn_search").click();
|
||||
}
|
||||
});
|
||||
|
||||
// 윈도우 리사이즈 시 차트 리사이즈
|
||||
$(window).resize(function() {
|
||||
if (totalDonutChart) totalDonutChart.resize();
|
||||
if (seq900DonutChart) seq900DonutChart.resize();
|
||||
if (callChart) callChart.resize();
|
||||
if (respChart) respChart.resize();
|
||||
});
|
||||
|
||||
buttonControl();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="right_box">
|
||||
<div class="content_top">
|
||||
<ul class="path">
|
||||
<li><a href="#">${rmsMenuPath}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content_middle" id="content_middle">
|
||||
<div class="search_wrap">
|
||||
<button type="button" class="cssbtn" id="btn_search" level="R">
|
||||
<i class="material-icons">search</i> <%= localeMessage.getString("button.search") %>
|
||||
</button>
|
||||
<button type="button" class="cssbtn" id="btn_excel_export" level="R">
|
||||
<i class="material-icons">file_download</i> Excel 다운로드
|
||||
</button>
|
||||
</div>
|
||||
<div class="title" id="title">API 일별 통계</div>
|
||||
<table class="search_condition" cellspacing="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="width:100px;">조회기간</th>
|
||||
<td colspan="3">
|
||||
<input type="text" name="searchStartDateTime" value="${param.searchStartDateTime}" style="width:100px;">
|
||||
~
|
||||
<input type="text" name="searchEndDateTime" value="${param.searchEndDateTime}" style="width:100px;">
|
||||
<span style="color:#888; font-size:12px; margin-left:10px;">(최대 31일)</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width:100px;">API명</th>
|
||||
<td>
|
||||
<input type="text" name="searchApiName" value="${param.searchApiName}">
|
||||
</td>
|
||||
<th style="width:100px;">인스턴스</th>
|
||||
<td>
|
||||
<input type="text" name="searchGwInstanceId" value="${param.searchGwInstanceId}">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width:100px;">업무구분</th>
|
||||
<td>
|
||||
<input type="text" name="searchBizDivCode" value="${param.searchBizDivCode}">
|
||||
</td>
|
||||
<th style="width:100px;">클라이언트ID</th>
|
||||
<td>
|
||||
<input type="text" name="searchClientId" value="${param.searchClientId}">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width:100px;">Inbound Adapter</th>
|
||||
<td>
|
||||
<input type="text" name="searchInboundAdapter" value="${param.searchInboundAdapter}">
|
||||
</td>
|
||||
<th style="width:100px;">Outbound Adapter</th>
|
||||
<td>
|
||||
<input type="text" name="searchOutboundAdapter" value="${param.searchOutboundAdapter}">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- 도넛 차트 (상단 50%씩) -->
|
||||
<div class="chart-container">
|
||||
<div id="totalDonutChart" class="chart"></div>
|
||||
<div id="seq900DonutChart" class="chart"></div>
|
||||
</div>
|
||||
<!-- 호출량 및 응답시간 차트 (하단 50%씩) -->
|
||||
<div class="chart-container">
|
||||
<div id="callChart" class="chart"></div>
|
||||
<div id="respChart" class="chart"></div>
|
||||
</div>
|
||||
<table id="grid"></table>
|
||||
<div id="pager"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,702 @@
|
||||
<%@ page language="java" contentType="text/html; charset=utf-8"%>
|
||||
<%@ page import="java.io.*"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<%@ 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");
|
||||
%>
|
||||
<html>
|
||||
<head>
|
||||
<title>월별 통계 조회</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<jsp:include page="/jsp/common/include/css.jsp"/>
|
||||
<style>
|
||||
.chart-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
gap: 10px;
|
||||
}
|
||||
.chart-container.full-width {
|
||||
display: block;
|
||||
}
|
||||
.chart {
|
||||
width: 49%;
|
||||
height: 300px;
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
}
|
||||
.chart.full-width {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
<jsp:include page="/jsp/common/include/script.jsp"/>
|
||||
<script src="<c:url value="/addon/echarts/echarts.min.js"/>"></script>
|
||||
<script language="javascript">
|
||||
var url = '<c:url value="/onl/kjb/statistics/apiStatsMonthMan.json"/>';
|
||||
var url_view = '<c:url value="/onl/kjb/statistics/apiStatsMonthMan.view"/>';
|
||||
|
||||
var totalDonutChart, seq900DonutChart, callChart, respChart;
|
||||
|
||||
function numberFormatter(cellvalue, options, rowObject) {
|
||||
if (cellvalue == null || cellvalue == '') return '0';
|
||||
return Number(cellvalue).toLocaleString();
|
||||
}
|
||||
|
||||
function decimalFormatter(cellvalue, options, rowObject) {
|
||||
if (cellvalue == null || cellvalue == '') return '0.000';
|
||||
return Number(cellvalue).toFixed(3);
|
||||
}
|
||||
|
||||
function initCharts() {
|
||||
totalDonutChart = echarts.init(document.getElementById('totalDonutChart'));
|
||||
seq900DonutChart = echarts.init(document.getElementById('seq900DonutChart'));
|
||||
callChart = echarts.init(document.getElementById('callChart'));
|
||||
respChart = echarts.init(document.getElementById('respChart'));
|
||||
|
||||
// 총건수 도넛 차트
|
||||
var totalDonutOption = {
|
||||
title: {
|
||||
text: '총 건수 분포',
|
||||
left: 'center',
|
||||
top: 10,
|
||||
textStyle: { fontSize: 14 }
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: 10,
|
||||
data: ['성공', 'Timeout', '시스템오류', '업무오류']
|
||||
},
|
||||
series: [{
|
||||
name: '총건수',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: [
|
||||
{ value: 0, name: '성공', itemStyle: { color: '#91CC75' } },
|
||||
{ value: 0, name: 'Timeout', itemStyle: { color: '#FAC858' } },
|
||||
{ value: 0, name: '시스템오류', itemStyle: { color: '#EE6666' } },
|
||||
{ value: 0, name: '업무오류', itemStyle: { color: '#FC8452' } }
|
||||
]
|
||||
}],
|
||||
graphic: [{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: '0',
|
||||
textAlign: 'center',
|
||||
fill: '#333',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
totalDonutChart.setOption(totalDonutOption);
|
||||
|
||||
// Seq900 도넛 차트
|
||||
var seq900DonutOption = {
|
||||
title: {
|
||||
text: 'Seq900 에러 분포',
|
||||
left: 'center',
|
||||
top: 10,
|
||||
textStyle: { fontSize: 14 }
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: 10,
|
||||
data: ['Timeout', '시스템오류', '업무오류']
|
||||
},
|
||||
series: [{
|
||||
name: 'Seq900 에러',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: [
|
||||
{ value: 0, name: 'Timeout', itemStyle: { color: '#FAC858' } },
|
||||
{ value: 0, name: '시스템오류', itemStyle: { color: '#EE6666' } },
|
||||
{ value: 0, name: '업무오류', itemStyle: { color: '#FC8452' } }
|
||||
]
|
||||
}],
|
||||
graphic: [{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: '0',
|
||||
textAlign: 'center',
|
||||
fill: '#333',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
seq900DonutChart.setOption(seq900DonutOption);
|
||||
|
||||
// 호출량 차트
|
||||
var callOption = {
|
||||
title: { text: '호출량 추이', left: 'center', textStyle: { fontSize: 14 } },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
|
||||
},
|
||||
legend: { data: ['성공', 'Timeout', '시스템오류', '업무오류'], bottom: 0 },
|
||||
grid: { left: '3%', right: '4%', bottom: '15%', top: '15%', containLabel: true },
|
||||
xAxis: { type: 'category', boundaryGap: false, data: [] },
|
||||
yAxis: { type: 'value', minInterval: 1 },
|
||||
series: [
|
||||
{ name: '성공', type: 'line', stack: 'Total', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#5470C6' }, data: [] },
|
||||
{ name: 'Timeout', type: 'line', stack: 'Total', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#FAC858' }, data: [] },
|
||||
{ name: '시스템오류', type: 'line', stack: 'Total', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#EE6666' }, data: [] },
|
||||
{ name: '업무오류', type: 'line', stack: 'Total', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#FC8452' }, data: [] }
|
||||
]
|
||||
};
|
||||
|
||||
callChart.setOption(callOption);
|
||||
|
||||
// 응답시간 차트
|
||||
var respOption = {
|
||||
title: { text: '응답시간 추이 (ms)', left: 'center', textStyle: { fontSize: 14 } },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
|
||||
},
|
||||
legend: { data: ['P95', 'P50', '평균'], bottom: 0 },
|
||||
grid: { left: '3%', right: '4%', bottom: '15%', top: '15%', containLabel: true },
|
||||
xAxis: { type: 'category', boundaryGap: false, data: [] },
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{ name: 'P95', type: 'line', smooth: true, itemStyle: { color: '#EE6666' }, lineStyle: { type: 'dashed' }, data: [] },
|
||||
{ name: 'P50', type: 'line', smooth: true, itemStyle: { color: '#5470C6' }, data: [] },
|
||||
{ name: '평균', type: 'line', smooth: true, itemStyle: { color: '#91CC75' }, data: [] }
|
||||
]
|
||||
};
|
||||
|
||||
respChart.setOption(respOption);
|
||||
}
|
||||
|
||||
function updateCharts(data) {
|
||||
// 시계열 차트용 변수
|
||||
var times = [];
|
||||
var successData = [];
|
||||
var timeoutData = [];
|
||||
var systemErrData = [];
|
||||
var bizErrData = [];
|
||||
var avgRespData = [];
|
||||
var p50RespData = [];
|
||||
var p95RespData = [];
|
||||
|
||||
// 도넛 차트용 총계 변수
|
||||
var totalSuccess = 0;
|
||||
var totalTimeout = 0;
|
||||
var totalSystemErr = 0;
|
||||
var totalBizErr = 0;
|
||||
var seq900Timeout = 0;
|
||||
var seq900SystemErr = 0;
|
||||
var seq900BizErr = 0;
|
||||
|
||||
data.forEach(function(item) {
|
||||
times.push(item.statTime);
|
||||
|
||||
// 시계열 차트 데이터
|
||||
successData.push(item.successCnt);
|
||||
timeoutData.push(item.timeoutCnt);
|
||||
systemErrData.push(item.systemErrCnt);
|
||||
bizErrData.push(item.bizErrCnt);
|
||||
avgRespData.push(item.avgRespTime);
|
||||
p50RespData.push(item.p50RespTime);
|
||||
p95RespData.push(item.p95RespTime);
|
||||
|
||||
// 도넛 차트용 합산
|
||||
totalSuccess += (item.successCnt || 0);
|
||||
totalTimeout += (item.timeoutCnt || 0);
|
||||
totalSystemErr += (item.systemErrCnt || 0);
|
||||
totalBizErr += (item.bizErrCnt || 0);
|
||||
seq900Timeout += (item.seq900TimeoutCnt || 0);
|
||||
seq900SystemErr += (item.seq900SystemErrCnt || 0);
|
||||
seq900BizErr += (item.seq900BizErrCnt || 0);
|
||||
});
|
||||
|
||||
// 총건수 도넛 차트 업데이트
|
||||
var grandTotal = totalSuccess + totalTimeout + totalSystemErr + totalBizErr;
|
||||
totalDonutChart.setOption({
|
||||
series: [{
|
||||
data: [
|
||||
{ value: totalSuccess, name: '성공' },
|
||||
{ value: totalTimeout, name: 'Timeout' },
|
||||
{ value: totalSystemErr, name: '시스템오류' },
|
||||
{ value: totalBizErr, name: '업무오류' }
|
||||
]
|
||||
}],
|
||||
graphic: [{
|
||||
style: {
|
||||
text: grandTotal.toLocaleString()
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
// Seq900 도넛 차트 업데이트
|
||||
var seq900Total = seq900Timeout + seq900SystemErr + seq900BizErr;
|
||||
seq900DonutChart.setOption({
|
||||
series: [{
|
||||
data: [
|
||||
{ value: seq900Timeout, name: 'Timeout' },
|
||||
{ value: seq900SystemErr, name: '시스템오류' },
|
||||
{ value: seq900BizErr, name: '업무오류' }
|
||||
]
|
||||
}],
|
||||
graphic: [{
|
||||
style: {
|
||||
text: seq900Total.toLocaleString()
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
// 호출량 차트 업데이트
|
||||
callChart.setOption({
|
||||
xAxis: { data: times.map(function(t) { return t.substring(4, 6) + '월'; }) },
|
||||
series: [
|
||||
{ data: successData },
|
||||
{ data: timeoutData },
|
||||
{ data: systemErrData },
|
||||
{ data: bizErrData }
|
||||
]
|
||||
});
|
||||
|
||||
// 응답시간 차트 업데이트
|
||||
respChart.setOption({
|
||||
xAxis: { data: times.map(function(t) { return t.substring(4, 6) + '월'; }) },
|
||||
series: [
|
||||
{ data: p95RespData },
|
||||
{ data: p50RespData },
|
||||
{ data: avgRespData }
|
||||
]
|
||||
});
|
||||
|
||||
// 드릴다운을 위해 원본 데이터 저장
|
||||
callChart.rawData = data;
|
||||
respChart.rawData = data;
|
||||
}
|
||||
|
||||
function fetchChartData() {
|
||||
var searchStartDate = $("input[name=searchStartDateTime]").val().replace(/-/g, "");
|
||||
var searchEndDate = $("input[name=searchEndDateTime]").val().replace(/-/g, "");
|
||||
|
||||
if (searchStartDate && searchEndDate) {
|
||||
var startYear = parseInt(searchStartDate.substring(0, 4));
|
||||
var startMonth = parseInt(searchStartDate.substring(4, 6));
|
||||
var endYear = parseInt(searchEndDate.substring(0, 4));
|
||||
var endMonth = parseInt(searchEndDate.substring(4, 6));
|
||||
var diffMonths = (endYear - startYear) * 12 + (endMonth - startMonth);
|
||||
|
||||
if (diffMonths > 24) {
|
||||
alert('조회 기간은 최대 24개월까지 가능합니다.');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
var postData = {
|
||||
cmd: 'CHART',
|
||||
searchApiName: $("input[name=searchApiName]").val(),
|
||||
searchGwInstanceId: $("input[name=searchGwInstanceId]").val(),
|
||||
searchBizDivCode: $("input[name=searchBizDivCode]").val(),
|
||||
searchClientId: $("input[name=searchClientId]").val(),
|
||||
searchInboundAdapter: $("input[name=searchInboundAdapter]").val(),
|
||||
searchOutboundAdapter: $("input[name=searchOutboundAdapter]").val()
|
||||
};
|
||||
|
||||
if (searchStartDate) {
|
||||
postData.searchStartDateTime = searchStartDate;
|
||||
}
|
||||
if (searchEndDate) {
|
||||
postData.searchEndDateTime = searchEndDate;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'POST',
|
||||
data: postData,
|
||||
success: function(response) {
|
||||
updateCharts(response);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Chart data fetch error:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function search() {
|
||||
var searchStartDate = $("input[name=searchStartDateTime]").val().replace(/-/g, "");
|
||||
var searchEndDate = $("input[name=searchEndDateTime]").val().replace(/-/g, "");
|
||||
|
||||
if (searchStartDate && searchEndDate) {
|
||||
var startYear = parseInt(searchStartDate.substring(0, 4));
|
||||
var startMonth = parseInt(searchStartDate.substring(4, 6));
|
||||
var endYear = parseInt(searchEndDate.substring(0, 4));
|
||||
var endMonth = parseInt(searchEndDate.substring(4, 6));
|
||||
var diffMonths = (endYear - startYear) * 12 + (endMonth - startMonth);
|
||||
|
||||
if (diffMonths > 24) {
|
||||
alert('조회 기간은 최대 24개월까지 가능합니다.');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
var postData = getSearchForJqgrid("cmd", "LIST");
|
||||
|
||||
if (searchStartDate) {
|
||||
postData.searchStartDateTime = searchStartDate;
|
||||
}
|
||||
if (searchEndDate) {
|
||||
postData.searchEndDateTime = searchEndDate;
|
||||
}
|
||||
|
||||
$("#grid").setGridParam({ url: url, postData: postData, page: 1 }).trigger("reloadGrid");
|
||||
fetchChartData();
|
||||
}
|
||||
|
||||
function exportToExcel() {
|
||||
console.log('[Excel Export] Starting...');
|
||||
|
||||
var searchStartDate = $("input[name=searchStartDateTime]").val().replace(/-/g, "");
|
||||
var searchEndDate = $("input[name=searchEndDateTime]").val().replace(/-/g, "");
|
||||
|
||||
var postData = {
|
||||
cmd: 'EXCEL_EXPORT',
|
||||
searchApiName: $("input[name=searchApiName]").val(),
|
||||
searchGwInstanceId: $("input[name=searchGwInstanceId]").val(),
|
||||
searchBizDivCode: $("input[name=searchBizDivCode]").val(),
|
||||
searchClientId: $("input[name=searchClientId]").val(),
|
||||
searchInboundAdapter: $("input[name=searchInboundAdapter]").val(),
|
||||
searchOutboundAdapter: $("input[name=searchOutboundAdapter]").val(),
|
||||
serviceType: '${param.serviceType}'
|
||||
};
|
||||
|
||||
if (searchStartDate) {
|
||||
postData.searchStartDateTime = searchStartDate;
|
||||
}
|
||||
if (searchEndDate) {
|
||||
postData.searchEndDateTime = searchEndDate;
|
||||
}
|
||||
|
||||
console.log('[Excel Export] Request data:', postData);
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', url, true);
|
||||
xhr.responseType = 'blob';
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
||||
|
||||
xhr.onload = function() {
|
||||
console.log('[Excel Export] Response received - Status:', xhr.status);
|
||||
|
||||
if (xhr.status === 200) {
|
||||
var blob = xhr.response;
|
||||
var contentType = xhr.getResponseHeader('Content-Type');
|
||||
console.log('[Excel Export] Blob size:', blob.size, 'Content-Type:', contentType);
|
||||
|
||||
// JSON 에러 응답인지 확인
|
||||
if (contentType && contentType.indexOf('application/json') !== -1) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function() {
|
||||
try {
|
||||
var errorObj = JSON.parse(reader.result);
|
||||
alert(errorObj.message || 'Excel 파일 생성에 실패했습니다.');
|
||||
} catch (e) {
|
||||
alert('Excel 파일 생성에 실패했습니다.');
|
||||
}
|
||||
};
|
||||
reader.readAsText(blob);
|
||||
return;
|
||||
}
|
||||
|
||||
// Blob 크기가 0이면 에러
|
||||
if (blob.size === 0) {
|
||||
alert('Excel 파일 생성에 실패했습니다. (빈 응답)');
|
||||
return;
|
||||
}
|
||||
|
||||
// 파일명 생성
|
||||
var filename = 'API월별통계_' + searchStartDate + '.xlsx';
|
||||
var disposition = xhr.getResponseHeader('Content-Disposition');
|
||||
console.log('[Excel Export] Content-Disposition:', disposition);
|
||||
|
||||
if (disposition && disposition.indexOf('filename=') !== -1) {
|
||||
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
|
||||
var matches = filenameRegex.exec(disposition);
|
||||
if (matches != null && matches[1]) {
|
||||
filename = matches[1].replace(/['"]/g, '');
|
||||
filename = decodeURIComponent(filename);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('[Excel Export] Downloading as:', filename);
|
||||
|
||||
// 파일 다운로드
|
||||
var link = document.createElement('a');
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(link.href);
|
||||
|
||||
console.log('[Excel Export] Download triggered');
|
||||
|
||||
} else if (xhr.status === 204) {
|
||||
alert('조회된 데이터가 없습니다.');
|
||||
} else {
|
||||
// 에러 응답 처리
|
||||
var reader = new FileReader();
|
||||
reader.onload = function() {
|
||||
var message = 'Excel 다운로드 중 오류가 발생했습니다.';
|
||||
try {
|
||||
var errorObj = JSON.parse(reader.result);
|
||||
if (errorObj.message) message = errorObj.message;
|
||||
} catch (e) {
|
||||
console.error('[Excel Export] Error parsing error response:', e);
|
||||
}
|
||||
alert(message);
|
||||
};
|
||||
reader.readAsText(xhr.response);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
console.error('[Excel Export] Network error');
|
||||
alert('네트워크 오류가 발생했습니다.');
|
||||
};
|
||||
|
||||
// Form data 생성
|
||||
var formData = [];
|
||||
for (var key in postData) {
|
||||
if (postData.hasOwnProperty(key) && postData[key] != null && postData[key] !== '') {
|
||||
formData.push(encodeURIComponent(key) + '=' + encodeURIComponent(postData[key]));
|
||||
}
|
||||
}
|
||||
|
||||
xhr.send(formData.join('&'));
|
||||
}
|
||||
|
||||
function list() {
|
||||
var gridPostData = getSearchForJqgrid("cmd", "LIST");
|
||||
$('#grid').jqGrid({
|
||||
datatype: "json",
|
||||
mtype: 'POST',
|
||||
postData: gridPostData,
|
||||
colNames: [
|
||||
'통계시간', 'API명', '인스턴스', '업무구분', '클라이언트ID',
|
||||
'Inbound Adapter', 'Outbound Adapter',
|
||||
'총건수', '성공', 'Timeout', '시스템오류', '업무오류',
|
||||
'Seq900 Timeout', 'Seq900 시스템오류', 'Seq900 업무오류',
|
||||
'평균응답(ms)', '최소응답(ms)', '최대응답(ms)', 'P50(ms)', 'P95(ms)'
|
||||
],
|
||||
colModel: [
|
||||
{ name: 'statTime', align: 'center', width: '120', sortable: false },
|
||||
{ name: 'apiName', align: 'left', width: '150', sortable: false },
|
||||
{ name: 'gwInstanceId', align: 'center', width: '80', sortable: false },
|
||||
{ name: 'bizDivCode', align: 'center', width: '80', sortable: false },
|
||||
{ name: 'clientId', align: 'left', width: '100', sortable: false },
|
||||
{ name: 'inboundAdapter', align: 'left', width: '120', sortable: false },
|
||||
{ name: 'outboundAdapter', align: 'left', width: '120', sortable: false },
|
||||
{ name: 'totalCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'successCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'timeoutCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'systemErrCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'bizErrCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'seq900TimeoutCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'seq900SystemErrCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'seq900BizErrCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'avgRespTime', align: 'right', width: '80', formatter: decimalFormatter, sortable: false },
|
||||
{ name: 'minRespTime', align: 'right', width: '80', formatter: decimalFormatter, sortable: false },
|
||||
{ name: 'maxRespTime', align: 'right', width: '80', formatter: decimalFormatter, sortable: false },
|
||||
{ name: 'p50RespTime', align: 'right', width: '70', formatter: decimalFormatter, sortable: false },
|
||||
{ name: 'p95RespTime', align: 'right', width: '70', formatter: decimalFormatter, sortable: false }
|
||||
],
|
||||
jsonReader: { repeatitems: false },
|
||||
pager: $('#pager'),
|
||||
page: '${param.page}',
|
||||
rowNum: '${rmsDefaultRowNum}',
|
||||
autoheight: true,
|
||||
height: $("#container").height(),
|
||||
autowidth: true,
|
||||
viewrecords: true,
|
||||
rowList: eval('[${rmsDefaultRowList}]'),
|
||||
loadComplete: function(d) {
|
||||
var colModel = $(this).getGridParam("colModel");
|
||||
for (var i = 0; i < colModel.length; i++) {
|
||||
$(this).setColProp(colModel[i].name, { sortable: false });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
// 월 입력 마스크
|
||||
$("input[name=searchStartDateTime]").inputmask("9999-99", { 'autoUnmask': true });
|
||||
$("input[name=searchEndDateTime]").inputmask("9999-99", { 'autoUnmask': true });
|
||||
|
||||
// 기본값 설정 (최근 12개월)
|
||||
var today = new Date();
|
||||
var endMonth = today.getFullYear() + '-' + (today.getMonth() + 1 < 10 ? '0' : '') + (today.getMonth() + 1);
|
||||
var startDate = new Date(today.getFullYear(), today.getMonth() - 11, 1);
|
||||
var startMonth = startDate.getFullYear() + '-' + (startDate.getMonth() + 1 < 10 ? '0' : '') + (startDate.getMonth() + 1);
|
||||
|
||||
if (!$("input[name=searchStartDateTime]").val()) {
|
||||
$("input[name=searchStartDateTime]").val(startMonth);
|
||||
}
|
||||
if (!$("input[name=searchEndDateTime]").val()) {
|
||||
$("input[name=searchEndDateTime]").val(endMonth);
|
||||
}
|
||||
|
||||
initCharts();
|
||||
list();
|
||||
search();
|
||||
fetchChartData();
|
||||
resizeJqGridWidth('grid', 'content_middle', '1200');
|
||||
|
||||
$("#btn_search").click(function() {
|
||||
search();
|
||||
});
|
||||
|
||||
$("#btn_excel_export").click(function() {
|
||||
exportToExcel();
|
||||
});
|
||||
|
||||
$("input[name^=search]").keydown(function(key) {
|
||||
if (key.keyCode == 13) {
|
||||
$("#btn_search").click();
|
||||
}
|
||||
});
|
||||
|
||||
// 윈도우 리사이즈 시 차트 리사이즈
|
||||
$(window).resize(function() {
|
||||
if (totalDonutChart) totalDonutChart.resize();
|
||||
if (seq900DonutChart) seq900DonutChart.resize();
|
||||
if (callChart) callChart.resize();
|
||||
if (respChart) respChart.resize();
|
||||
});
|
||||
|
||||
buttonControl();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="right_box">
|
||||
<div class="content_top">
|
||||
<ul class="path">
|
||||
<li><a href="#">${rmsMenuPath}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content_middle" id="content_middle">
|
||||
<div class="search_wrap">
|
||||
<button type="button" class="cssbtn" id="btn_search" level="R">
|
||||
<i class="material-icons">search</i> <%= localeMessage.getString("button.search") %>
|
||||
</button>
|
||||
<button type="button" class="cssbtn" id="btn_excel_export" level="R">
|
||||
<i class="material-icons">file_download</i> Excel 다운로드
|
||||
</button>
|
||||
</div>
|
||||
<div class="title" id="title">API 월별 통계</div>
|
||||
<table class="search_condition" cellspacing="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="width:100px;">조회기간</th>
|
||||
<td colspan="3">
|
||||
<input type="text" name="searchStartDateTime" value="${param.searchStartDateTime}" style="width:100px;" placeholder="YYYY-MM">
|
||||
~
|
||||
<input type="text" name="searchEndDateTime" value="${param.searchEndDateTime}" style="width:100px;" placeholder="YYYY-MM">
|
||||
<span style="color:#888; font-size:12px; margin-left:10px;">(최대 24개월)</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width:100px;">API명</th>
|
||||
<td>
|
||||
<input type="text" name="searchApiName" value="${param.searchApiName}">
|
||||
</td>
|
||||
<th style="width:100px;">인스턴스</th>
|
||||
<td>
|
||||
<input type="text" name="searchGwInstanceId" value="${param.searchGwInstanceId}">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width:100px;">업무구분</th>
|
||||
<td>
|
||||
<input type="text" name="searchBizDivCode" value="${param.searchBizDivCode}">
|
||||
</td>
|
||||
<th style="width:100px;">클라이언트ID</th>
|
||||
<td>
|
||||
<input type="text" name="searchClientId" value="${param.searchClientId}">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width:100px;">Inbound Adapter</th>
|
||||
<td>
|
||||
<input type="text" name="searchInboundAdapter" value="${param.searchInboundAdapter}">
|
||||
</td>
|
||||
<th style="width:100px;">Outbound Adapter</th>
|
||||
<td>
|
||||
<input type="text" name="searchOutboundAdapter" value="${param.searchOutboundAdapter}">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- 도넛 차트 (상단 50%씩) -->
|
||||
<div class="chart-container">
|
||||
<div id="totalDonutChart" class="chart"></div>
|
||||
<div id="seq900DonutChart" class="chart"></div>
|
||||
</div>
|
||||
<!-- 호출량 및 응답시간 차트 (하단 50%씩) -->
|
||||
<div class="chart-container">
|
||||
<div id="callChart" class="chart"></div>
|
||||
<div id="respChart" class="chart"></div>
|
||||
</div>
|
||||
<table id="grid"></table>
|
||||
<div id="pager"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,670 @@
|
||||
<%@ page language="java" contentType="text/html; charset=utf-8"%>
|
||||
<%@ page import="java.io.*"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<%@ 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");
|
||||
%>
|
||||
<html>
|
||||
<head>
|
||||
<title>연간 통계 조회</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<jsp:include page="/jsp/common/include/css.jsp"/>
|
||||
<style>
|
||||
.chart-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
gap: 10px;
|
||||
}
|
||||
.chart-container.full-width {
|
||||
display: block;
|
||||
}
|
||||
.chart {
|
||||
width: 49%;
|
||||
height: 300px;
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
}
|
||||
.chart.full-width {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
<jsp:include page="/jsp/common/include/script.jsp"/>
|
||||
<script src="<c:url value="/addon/echarts/echarts.min.js"/>"></script>
|
||||
<script language="javascript">
|
||||
var url = '<c:url value="/onl/kjb/statistics/apiStatsYearMan.json"/>';
|
||||
var url_view = '<c:url value="/onl/kjb/statistics/apiStatsYearMan.view"/>';
|
||||
|
||||
var totalDonutChart, seq900DonutChart, callChart, respChart;
|
||||
|
||||
function numberFormatter(cellvalue, options, rowObject) {
|
||||
if (cellvalue == null || cellvalue == '') return '0';
|
||||
return Number(cellvalue).toLocaleString();
|
||||
}
|
||||
|
||||
function decimalFormatter(cellvalue, options, rowObject) {
|
||||
if (cellvalue == null || cellvalue == '') return '0.000';
|
||||
return Number(cellvalue).toFixed(3);
|
||||
}
|
||||
|
||||
function initCharts() {
|
||||
totalDonutChart = echarts.init(document.getElementById('totalDonutChart'));
|
||||
seq900DonutChart = echarts.init(document.getElementById('seq900DonutChart'));
|
||||
callChart = echarts.init(document.getElementById('callChart'));
|
||||
respChart = echarts.init(document.getElementById('respChart'));
|
||||
|
||||
// 총건수 도넛 차트
|
||||
var totalDonutOption = {
|
||||
title: {
|
||||
text: '총 건수 분포',
|
||||
left: 'center',
|
||||
top: 10,
|
||||
textStyle: { fontSize: 14 }
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: 10,
|
||||
data: ['성공', 'Timeout', '시스템오류', '업무오류']
|
||||
},
|
||||
series: [{
|
||||
name: '총건수',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: [
|
||||
{ value: 0, name: '성공', itemStyle: { color: '#91CC75' } },
|
||||
{ value: 0, name: 'Timeout', itemStyle: { color: '#FAC858' } },
|
||||
{ value: 0, name: '시스템오류', itemStyle: { color: '#EE6666' } },
|
||||
{ value: 0, name: '업무오류', itemStyle: { color: '#FC8452' } }
|
||||
]
|
||||
}],
|
||||
graphic: [{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: '0',
|
||||
textAlign: 'center',
|
||||
fill: '#333',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
totalDonutChart.setOption(totalDonutOption);
|
||||
|
||||
// Seq900 도넛 차트
|
||||
var seq900DonutOption = {
|
||||
title: {
|
||||
text: 'Seq900 에러 분포',
|
||||
left: 'center',
|
||||
top: 10,
|
||||
textStyle: { fontSize: 14 }
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: 10,
|
||||
data: ['Timeout', '시스템오류', '업무오류']
|
||||
},
|
||||
series: [{
|
||||
name: 'Seq900 에러',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['50%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: [
|
||||
{ value: 0, name: 'Timeout', itemStyle: { color: '#FAC858' } },
|
||||
{ value: 0, name: '시스템오류', itemStyle: { color: '#EE6666' } },
|
||||
{ value: 0, name: '업무오류', itemStyle: { color: '#FC8452' } }
|
||||
]
|
||||
}],
|
||||
graphic: [{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: '0',
|
||||
textAlign: 'center',
|
||||
fill: '#333',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
seq900DonutChart.setOption(seq900DonutOption);
|
||||
|
||||
// 호출량 차트
|
||||
var callOption = {
|
||||
title: { text: '호출량 추이', left: 'center', textStyle: { fontSize: 14 } },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
|
||||
},
|
||||
legend: { data: ['성공', 'Timeout', '시스템오류', '업무오류'], bottom: 0 },
|
||||
grid: { left: '3%', right: '4%', bottom: '15%', top: '15%', containLabel: true },
|
||||
xAxis: { type: 'category', boundaryGap: false, data: [] },
|
||||
yAxis: { type: 'value', minInterval: 1 },
|
||||
series: [
|
||||
{ name: '성공', type: 'line', stack: 'Total', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#5470C6' }, data: [] },
|
||||
{ name: 'Timeout', type: 'line', stack: 'Total', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#FAC858' }, data: [] },
|
||||
{ name: '시스템오류', type: 'line', stack: 'Total', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#EE6666' }, data: [] },
|
||||
{ name: '업무오류', type: 'line', stack: 'Total', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#FC8452' }, data: [] }
|
||||
]
|
||||
};
|
||||
|
||||
callChart.setOption(callOption);
|
||||
|
||||
// 응답시간 차트
|
||||
var respOption = {
|
||||
title: { text: '응답시간 추이 (ms)', left: 'center', textStyle: { fontSize: 14 } },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
|
||||
},
|
||||
legend: { data: ['P95', 'P50', '평균'], bottom: 0 },
|
||||
grid: { left: '3%', right: '4%', bottom: '15%', top: '15%', containLabel: true },
|
||||
xAxis: { type: 'category', boundaryGap: false, data: [] },
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{ name: 'P95', type: 'line', smooth: true, itemStyle: { color: '#EE6666' }, lineStyle: { type: 'dashed' }, data: [] },
|
||||
{ name: 'P50', type: 'line', smooth: true, itemStyle: { color: '#5470C6' }, data: [] },
|
||||
{ name: '평균', type: 'line', smooth: true, itemStyle: { color: '#91CC75' }, data: [] }
|
||||
]
|
||||
};
|
||||
|
||||
respChart.setOption(respOption);
|
||||
}
|
||||
|
||||
function updateCharts(data) {
|
||||
// 시계열 차트용 변수
|
||||
var times = [];
|
||||
var successData = [];
|
||||
var timeoutData = [];
|
||||
var systemErrData = [];
|
||||
var bizErrData = [];
|
||||
var avgRespData = [];
|
||||
var p50RespData = [];
|
||||
var p95RespData = [];
|
||||
|
||||
// 도넛 차트용 총계 변수
|
||||
var totalSuccess = 0;
|
||||
var totalTimeout = 0;
|
||||
var totalSystemErr = 0;
|
||||
var totalBizErr = 0;
|
||||
var seq900Timeout = 0;
|
||||
var seq900SystemErr = 0;
|
||||
var seq900BizErr = 0;
|
||||
|
||||
data.forEach(function(item) {
|
||||
times.push(item.statTime);
|
||||
|
||||
// 시계열 차트 데이터
|
||||
successData.push(item.successCnt);
|
||||
timeoutData.push(item.timeoutCnt);
|
||||
systemErrData.push(item.systemErrCnt);
|
||||
bizErrData.push(item.bizErrCnt);
|
||||
avgRespData.push(item.avgRespTime);
|
||||
p50RespData.push(item.p50RespTime);
|
||||
p95RespData.push(item.p95RespTime);
|
||||
|
||||
// 도넛 차트용 합산
|
||||
totalSuccess += (item.successCnt || 0);
|
||||
totalTimeout += (item.timeoutCnt || 0);
|
||||
totalSystemErr += (item.systemErrCnt || 0);
|
||||
totalBizErr += (item.bizErrCnt || 0);
|
||||
seq900Timeout += (item.seq900TimeoutCnt || 0);
|
||||
seq900SystemErr += (item.seq900SystemErrCnt || 0);
|
||||
seq900BizErr += (item.seq900BizErrCnt || 0);
|
||||
});
|
||||
|
||||
// 총건수 도넛 차트 업데이트
|
||||
var grandTotal = totalSuccess + totalTimeout + totalSystemErr + totalBizErr;
|
||||
totalDonutChart.setOption({
|
||||
series: [{
|
||||
data: [
|
||||
{ value: totalSuccess, name: '성공' },
|
||||
{ value: totalTimeout, name: 'Timeout' },
|
||||
{ value: totalSystemErr, name: '시스템오류' },
|
||||
{ value: totalBizErr, name: '업무오류' }
|
||||
]
|
||||
}],
|
||||
graphic: [{
|
||||
style: {
|
||||
text: grandTotal.toLocaleString()
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
// Seq900 도넛 차트 업데이트
|
||||
var seq900Total = seq900Timeout + seq900SystemErr + seq900BizErr;
|
||||
seq900DonutChart.setOption({
|
||||
series: [{
|
||||
data: [
|
||||
{ value: seq900Timeout, name: 'Timeout' },
|
||||
{ value: seq900SystemErr, name: '시스템오류' },
|
||||
{ value: seq900BizErr, name: '업무오류' }
|
||||
]
|
||||
}],
|
||||
graphic: [{
|
||||
style: {
|
||||
text: seq900Total.toLocaleString()
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
// 호출량 차트 업데이트
|
||||
callChart.setOption({
|
||||
xAxis: { data: times.map(function(t) { return t.substring(0, 4) + '년'; }) },
|
||||
series: [
|
||||
{ data: successData },
|
||||
{ data: timeoutData },
|
||||
{ data: systemErrData },
|
||||
{ data: bizErrData }
|
||||
]
|
||||
});
|
||||
|
||||
// 응답시간 차트 업데이트
|
||||
respChart.setOption({
|
||||
xAxis: { data: times.map(function(t) { return t.substring(0, 4) + '년'; }) },
|
||||
series: [
|
||||
{ data: p95RespData },
|
||||
{ data: p50RespData },
|
||||
{ data: avgRespData }
|
||||
]
|
||||
});
|
||||
|
||||
// 드릴다운을 위해 원본 데이터 저장
|
||||
callChart.rawData = data;
|
||||
respChart.rawData = data;
|
||||
}
|
||||
|
||||
function fetchChartData() {
|
||||
var searchStartDate = $("input[name=searchStartDateTime]").val().replace(/-/g, "");
|
||||
var searchEndDate = $("input[name=searchEndDateTime]").val().replace(/-/g, "");
|
||||
|
||||
var postData = {
|
||||
cmd: 'CHART',
|
||||
searchApiName: $("input[name=searchApiName]").val(),
|
||||
searchGwInstanceId: $("input[name=searchGwInstanceId]").val(),
|
||||
searchBizDivCode: $("input[name=searchBizDivCode]").val(),
|
||||
searchClientId: $("input[name=searchClientId]").val(),
|
||||
searchInboundAdapter: $("input[name=searchInboundAdapter]").val(),
|
||||
searchOutboundAdapter: $("input[name=searchOutboundAdapter]").val()
|
||||
};
|
||||
|
||||
if (searchStartDate) {
|
||||
postData.searchStartDateTime = searchStartDate;
|
||||
}
|
||||
if (searchEndDate) {
|
||||
postData.searchEndDateTime = searchEndDate;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'POST',
|
||||
data: postData,
|
||||
success: function(response) {
|
||||
updateCharts(response);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Chart data fetch error:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function search() {
|
||||
var searchStartDate = $("input[name=searchStartDateTime]").val().replace(/-/g, "");
|
||||
var searchEndDate = $("input[name=searchEndDateTime]").val().replace(/-/g, "");
|
||||
|
||||
var postData = getSearchForJqgrid("cmd", "LIST");
|
||||
|
||||
if (searchStartDate) {
|
||||
postData.searchStartDateTime = searchStartDate;
|
||||
}
|
||||
if (searchEndDate) {
|
||||
postData.searchEndDateTime = searchEndDate;
|
||||
}
|
||||
|
||||
$("#grid").setGridParam({ url: url, postData: postData, page: 1 }).trigger("reloadGrid");
|
||||
fetchChartData();
|
||||
}
|
||||
|
||||
function exportToExcel() {
|
||||
console.log('[Excel Export] Starting...');
|
||||
|
||||
var searchStartDate = $("input[name=searchStartDateTime]").val().replace(/-/g, "");
|
||||
var searchEndDate = $("input[name=searchEndDateTime]").val().replace(/-/g, "");
|
||||
|
||||
var postData = {
|
||||
cmd: 'EXCEL_EXPORT',
|
||||
searchApiName: $("input[name=searchApiName]").val(),
|
||||
searchGwInstanceId: $("input[name=searchGwInstanceId]").val(),
|
||||
searchBizDivCode: $("input[name=searchBizDivCode]").val(),
|
||||
searchClientId: $("input[name=searchClientId]").val(),
|
||||
searchInboundAdapter: $("input[name=searchInboundAdapter]").val(),
|
||||
searchOutboundAdapter: $("input[name=searchOutboundAdapter]").val(),
|
||||
serviceType: '${param.serviceType}'
|
||||
};
|
||||
|
||||
if (searchStartDate) {
|
||||
postData.searchStartDateTime = searchStartDate;
|
||||
}
|
||||
if (searchEndDate) {
|
||||
postData.searchEndDateTime = searchEndDate;
|
||||
}
|
||||
|
||||
console.log('[Excel Export] Request data:', postData);
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', url, true);
|
||||
xhr.responseType = 'blob';
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
||||
|
||||
xhr.onload = function() {
|
||||
console.log('[Excel Export] Response received - Status:', xhr.status);
|
||||
|
||||
if (xhr.status === 200) {
|
||||
var blob = xhr.response;
|
||||
var contentType = xhr.getResponseHeader('Content-Type');
|
||||
console.log('[Excel Export] Blob size:', blob.size, 'Content-Type:', contentType);
|
||||
|
||||
// JSON 에러 응답인지 확인
|
||||
if (contentType && contentType.indexOf('application/json') !== -1) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function() {
|
||||
try {
|
||||
var errorObj = JSON.parse(reader.result);
|
||||
alert(errorObj.message || 'Excel 파일 생성에 실패했습니다.');
|
||||
} catch (e) {
|
||||
alert('Excel 파일 생성에 실패했습니다.');
|
||||
}
|
||||
};
|
||||
reader.readAsText(blob);
|
||||
return;
|
||||
}
|
||||
|
||||
// Blob 크기가 0이면 에러
|
||||
if (blob.size === 0) {
|
||||
alert('Excel 파일 생성에 실패했습니다. (빈 응답)');
|
||||
return;
|
||||
}
|
||||
|
||||
// 파일명 생성
|
||||
var filename = 'API연간통계_' + searchStartDate + '.xlsx';
|
||||
var disposition = xhr.getResponseHeader('Content-Disposition');
|
||||
console.log('[Excel Export] Content-Disposition:', disposition);
|
||||
|
||||
if (disposition && disposition.indexOf('filename=') !== -1) {
|
||||
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
|
||||
var matches = filenameRegex.exec(disposition);
|
||||
if (matches != null && matches[1]) {
|
||||
filename = matches[1].replace(/['"]/g, '');
|
||||
filename = decodeURIComponent(filename);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('[Excel Export] Downloading as:', filename);
|
||||
|
||||
// 파일 다운로드
|
||||
var link = document.createElement('a');
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(link.href);
|
||||
|
||||
console.log('[Excel Export] Download triggered');
|
||||
|
||||
} else if (xhr.status === 204) {
|
||||
alert('조회된 데이터가 없습니다.');
|
||||
} else {
|
||||
// 에러 응답 처리
|
||||
var reader = new FileReader();
|
||||
reader.onload = function() {
|
||||
var message = 'Excel 다운로드 중 오류가 발생했습니다.';
|
||||
try {
|
||||
var errorObj = JSON.parse(reader.result);
|
||||
if (errorObj.message) message = errorObj.message;
|
||||
} catch (e) {
|
||||
console.error('[Excel Export] Error parsing error response:', e);
|
||||
}
|
||||
alert(message);
|
||||
};
|
||||
reader.readAsText(xhr.response);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onerror = function() {
|
||||
console.error('[Excel Export] Network error');
|
||||
alert('네트워크 오류가 발생했습니다.');
|
||||
};
|
||||
|
||||
// Form data 생성
|
||||
var formData = [];
|
||||
for (var key in postData) {
|
||||
if (postData.hasOwnProperty(key) && postData[key] != null && postData[key] !== '') {
|
||||
formData.push(encodeURIComponent(key) + '=' + encodeURIComponent(postData[key]));
|
||||
}
|
||||
}
|
||||
|
||||
xhr.send(formData.join('&'));
|
||||
}
|
||||
|
||||
function list() {
|
||||
var gridPostData = getSearchForJqgrid("cmd", "LIST");
|
||||
$('#grid').jqGrid({
|
||||
datatype: "json",
|
||||
mtype: 'POST',
|
||||
postData: gridPostData,
|
||||
colNames: [
|
||||
'통계시간', 'API명', '인스턴스', '업무구분', '클라이언트ID',
|
||||
'Inbound Adapter', 'Outbound Adapter',
|
||||
'총건수', '성공', 'Timeout', '시스템오류', '업무오류',
|
||||
'Seq900 Timeout', 'Seq900 시스템오류', 'Seq900 업무오류',
|
||||
'평균응답(ms)', '최소응답(ms)', '최대응답(ms)', 'P50(ms)', 'P95(ms)'
|
||||
],
|
||||
colModel: [
|
||||
{ name: 'statTime', align: 'center', width: '120', sortable: false },
|
||||
{ name: 'apiName', align: 'left', width: '150', sortable: false },
|
||||
{ name: 'gwInstanceId', align: 'center', width: '80', sortable: false },
|
||||
{ name: 'bizDivCode', align: 'center', width: '80', sortable: false },
|
||||
{ name: 'clientId', align: 'left', width: '100', sortable: false },
|
||||
{ name: 'inboundAdapter', align: 'left', width: '120', sortable: false },
|
||||
{ name: 'outboundAdapter', align: 'left', width: '120', sortable: false },
|
||||
{ name: 'totalCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'successCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'timeoutCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'systemErrCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'bizErrCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'seq900TimeoutCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'seq900SystemErrCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'seq900BizErrCnt', align: 'right', width: '70', formatter: numberFormatter, sortable: false },
|
||||
{ name: 'avgRespTime', align: 'right', width: '80', formatter: decimalFormatter, sortable: false },
|
||||
{ name: 'minRespTime', align: 'right', width: '80', formatter: decimalFormatter, sortable: false },
|
||||
{ name: 'maxRespTime', align: 'right', width: '80', formatter: decimalFormatter, sortable: false },
|
||||
{ name: 'p50RespTime', align: 'right', width: '70', formatter: decimalFormatter, sortable: false },
|
||||
{ name: 'p95RespTime', align: 'right', width: '70', formatter: decimalFormatter, sortable: false }
|
||||
],
|
||||
jsonReader: { repeatitems: false },
|
||||
pager: $('#pager'),
|
||||
page: '${param.page}',
|
||||
rowNum: '${rmsDefaultRowNum}',
|
||||
autoheight: true,
|
||||
height: $("#container").height(),
|
||||
autowidth: true,
|
||||
viewrecords: true,
|
||||
rowList: eval('[${rmsDefaultRowList}]'),
|
||||
loadComplete: function(d) {
|
||||
var colModel = $(this).getGridParam("colModel");
|
||||
for (var i = 0; i < colModel.length; i++) {
|
||||
$(this).setColProp(colModel[i].name, { sortable: false });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
// 연도 입력 마스크
|
||||
$("input[name=searchStartDateTime]").inputmask("9999", { 'autoUnmask': true });
|
||||
$("input[name=searchEndDateTime]").inputmask("9999", { 'autoUnmask': true });
|
||||
|
||||
// 초기값 설정: 5년 전 ~ 현재 연도
|
||||
if (!$("input[name=searchStartDateTime]").val()) {
|
||||
var currentYear = new Date().getFullYear();
|
||||
var startYear = currentYear - 5;
|
||||
$("input[name=searchStartDateTime]").val(startYear);
|
||||
$("input[name=searchEndDateTime]").val(currentYear);
|
||||
}
|
||||
|
||||
initCharts();
|
||||
list();
|
||||
search();
|
||||
fetchChartData();
|
||||
resizeJqGridWidth('grid', 'content_middle', '1200');
|
||||
|
||||
$("#btn_search").click(function() {
|
||||
search();
|
||||
});
|
||||
|
||||
$("#btn_excel_export").click(function() {
|
||||
exportToExcel();
|
||||
});
|
||||
|
||||
$("input[name^=search]").keydown(function(key) {
|
||||
if (key.keyCode == 13) {
|
||||
$("#btn_search").click();
|
||||
}
|
||||
});
|
||||
|
||||
// 윈도우 리사이즈 시 차트 리사이즈
|
||||
$(window).resize(function() {
|
||||
if (totalDonutChart) totalDonutChart.resize();
|
||||
if (seq900DonutChart) seq900DonutChart.resize();
|
||||
if (callChart) callChart.resize();
|
||||
if (respChart) respChart.resize();
|
||||
});
|
||||
|
||||
buttonControl();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="right_box">
|
||||
<div class="content_top">
|
||||
<ul class="path">
|
||||
<li><a href="#">${rmsMenuPath}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content_middle" id="content_middle">
|
||||
<div class="search_wrap">
|
||||
<button type="button" class="cssbtn" id="btn_search" level="R">
|
||||
<i class="material-icons">search</i> <%= localeMessage.getString("button.search") %>
|
||||
</button>
|
||||
<button type="button" class="cssbtn" id="btn_excel_export" level="R">
|
||||
<i class="material-icons">file_download</i> Excel 다운로드
|
||||
</button>
|
||||
</div>
|
||||
<div class="title" id="title">API 연간 통계</div>
|
||||
<table class="search_condition" cellspacing="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="width:100px;">조회기간</th>
|
||||
<td colspan="3">
|
||||
<input type="text" name="searchStartDateTime" value="${param.searchStartDateTime}" style="width:100px;" placeholder="YYYY">
|
||||
~
|
||||
<input type="text" name="searchEndDateTime" value="${param.searchEndDateTime}" style="width:100px;" placeholder="YYYY">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width:100px;">API명</th>
|
||||
<td>
|
||||
<input type="text" name="searchApiName" value="${param.searchApiName}">
|
||||
</td>
|
||||
<th style="width:100px;">인스턴스</th>
|
||||
<td>
|
||||
<input type="text" name="searchGwInstanceId" value="${param.searchGwInstanceId}">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width:100px;">업무구분</th>
|
||||
<td>
|
||||
<input type="text" name="searchBizDivCode" value="${param.searchBizDivCode}">
|
||||
</td>
|
||||
<th style="width:100px;">클라이언트ID</th>
|
||||
<td>
|
||||
<input type="text" name="searchClientId" value="${param.searchClientId}">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width:100px;">Inbound Adapter</th>
|
||||
<td>
|
||||
<input type="text" name="searchInboundAdapter" value="${param.searchInboundAdapter}">
|
||||
</td>
|
||||
<th style="width:100px;">Outbound Adapter</th>
|
||||
<td>
|
||||
<input type="text" name="searchOutboundAdapter" value="${param.searchOutboundAdapter}">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- 도넛 차트 (상단 50%씩) -->
|
||||
<div class="chart-container">
|
||||
<div id="totalDonutChart" class="chart"></div>
|
||||
<div id="seq900DonutChart" class="chart"></div>
|
||||
</div>
|
||||
<!-- 호출량 및 응답시간 차트 (하단 50%씩) -->
|
||||
<div class="chart-container">
|
||||
<div id="callChart" class="chart"></div>
|
||||
<div id="respChart" class="chart"></div>
|
||||
</div>
|
||||
<table id="grid"></table>
|
||||
<div id="pager"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user