Merge remote-tracking branch 'origin/jenkins_with_weblogic' into jenkins_with_weblogic
This commit is contained in:
Rinjae
@@ -68,6 +68,8 @@
|
||||
<context:component-scan base-package="com.eactive.eai.inbound.error.loader" />
|
||||
<context:component-scan base-package="com.eactive.apim.portal" />
|
||||
|
||||
<context:component-scan base-package="com.eactive.ext.kjb.statistics" />
|
||||
|
||||
|
||||
<bean id="cacheManager"
|
||||
class="org.springframework.cache.ehcache.EhCacheCacheManager">
|
||||
|
||||
@@ -150,4 +150,6 @@
|
||||
<aop:aspectj-autoproxy />
|
||||
|
||||
<bean class="com.eactive.ext.kjb.web.ApiTransactionLogController"></bean>
|
||||
<bean class="com.eactive.ext.kjb.statistics.ApiStatsMinuteController"></bean>
|
||||
<bean class="com.eactive.ext.kjb.statistics.ApiStatsHourController"></bean>
|
||||
</beans>
|
||||
|
||||
@@ -0,0 +1,356 @@
|
||||
<%@ 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>
|
||||
.chart-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.chart {
|
||||
width: 49%;
|
||||
height: 300px;
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
}
|
||||
</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/apiStatsHourMan.json"/>';
|
||||
var url_view = '<c:url value="/onl/kjb/statistics/apiStatsHourMan.view"/>';
|
||||
var url_minute_view = '<c:url value="/onl/kjb/statistics/apiStatsMinuteMan.view"/>';
|
||||
|
||||
var 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() {
|
||||
callChart = echarts.init(document.getElementById('callChart'));
|
||||
respChart = echarts.init(document.getElementById('respChart'));
|
||||
|
||||
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', areaStyle: { opacity: 0.5 }, itemStyle: { color: '#5470C6' }, data: [] },
|
||||
{ name: 'Timeout', type: 'line', stack: 'Total', areaStyle: { opacity: 0.5 }, itemStyle: { color: '#FAC858' }, data: [] },
|
||||
{ name: '시스템오류', type: 'line', stack: 'Total', areaStyle: { opacity: 0.5 }, itemStyle: { color: '#EE6666' }, data: [] },
|
||||
{ name: '업무오류', type: 'line', stack: 'Total', areaStyle: { opacity: 0.5 }, itemStyle: { color: '#FC8452' }, data: [] }
|
||||
]
|
||||
};
|
||||
|
||||
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', itemStyle: { color: '#EE6666' }, lineStyle: { type: 'dashed' }, data: [] },
|
||||
{ name: 'P50', type: 'line', itemStyle: { color: '#5470C6' }, data: [] },
|
||||
{ name: '평균', type: 'line', itemStyle: { color: '#91CC75' }, data: [] }
|
||||
]
|
||||
};
|
||||
|
||||
callChart.setOption(callOption);
|
||||
respChart.setOption(respOption);
|
||||
|
||||
// 드릴다운 이벤트 (시간 클릭 시 분단위 화면으로 이동)
|
||||
callChart.on('click', function(params) {
|
||||
drillDownToMinute(callChart, params.dataIndex);
|
||||
});
|
||||
respChart.on('click', function(params) {
|
||||
drillDownToMinute(respChart, params.dataIndex);
|
||||
});
|
||||
}
|
||||
|
||||
function drillDownToMinute(chart, dataIndex) {
|
||||
if (!chart.rawData || dataIndex < 0 || dataIndex >= chart.rawData.length) return;
|
||||
|
||||
// rawData에서 실제 statTime 가져오기 (yyyyMMddHH00 형식)
|
||||
var statTime = chart.rawData[dataIndex].statTime;
|
||||
var date = statTime.substring(0, 4) + '-' + statTime.substring(4, 6) + '-' + statTime.substring(6, 8);
|
||||
var hour = statTime.substring(8, 10);
|
||||
var startTime = hour + ':00';
|
||||
var endTime = hour + ':59';
|
||||
|
||||
var params = '?searchStartDate=' + date + '&searchStartTime=' + startTime
|
||||
+ '&searchEndDate=' + date + '&searchEndTime=' + endTime;
|
||||
|
||||
location.href = url_minute_view + params;
|
||||
}
|
||||
|
||||
function updateCharts(data) {
|
||||
var times = [];
|
||||
var successData = [];
|
||||
var timeoutData = [];
|
||||
var systemErrData = [];
|
||||
var bizErrData = [];
|
||||
var avgRespData = [];
|
||||
var p50RespData = [];
|
||||
var p95RespData = [];
|
||||
|
||||
data.forEach(function(item) {
|
||||
// statTime: yyyyMMddHH00 -> HH시 형식으로 표시
|
||||
var hour = item.statTime.substring(8, 10);
|
||||
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);
|
||||
});
|
||||
|
||||
callChart.setOption({
|
||||
xAxis: { data: times.map(function(t) { return t.substring(8, 10) + '시'; }) },
|
||||
series: [
|
||||
{ data: successData },
|
||||
{ data: timeoutData },
|
||||
{ data: systemErrData },
|
||||
{ data: bizErrData }
|
||||
]
|
||||
});
|
||||
|
||||
respChart.setOption({
|
||||
xAxis: { data: times.map(function(t) { return t.substring(8, 10) + '시'; }) },
|
||||
series: [
|
||||
{ data: p95RespData },
|
||||
{ data: p50RespData },
|
||||
{ data: avgRespData }
|
||||
]
|
||||
});
|
||||
|
||||
// 드릴다운을 위해 원본 데이터 저장
|
||||
callChart.rawData = data;
|
||||
respChart.rawData = data;
|
||||
}
|
||||
|
||||
function fetchChartData() {
|
||||
var searchDate = $("input[name=searchDate]").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 (searchDate) {
|
||||
postData.searchStartDateTime = searchDate + "00";
|
||||
postData.searchEndDateTime = searchDate + "23";
|
||||
}
|
||||
|
||||
$.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 postData = getSearchForJqgrid("cmd", "LIST");
|
||||
|
||||
var searchDate = $("input[name=searchDate]").val().replace(/-/g, "");
|
||||
|
||||
if (searchDate) {
|
||||
postData.searchStartDateTime = searchDate + "00";
|
||||
postData.searchEndDateTime = searchDate + "23";
|
||||
}
|
||||
|
||||
$("#grid").setGridParam({ url: url, postData: postData, page: 1 }).trigger("reloadGrid");
|
||||
fetchChartData();
|
||||
}
|
||||
|
||||
function list() {
|
||||
var gridPostData = getSearchForJqgrid("cmd", "LIST");
|
||||
$('#grid').jqGrid({
|
||||
datatype: "json",
|
||||
mtype: 'POST',
|
||||
postData: gridPostData,
|
||||
colNames: [
|
||||
'통계시간', 'API명', '인스턴스', '업무구분', '클라이언트ID',
|
||||
'Inbound Adapter', 'Outbound Adapter',
|
||||
'총건수', '성공', 'Timeout', '시스템오류', '업무오류',
|
||||
'평균응답(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: '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=searchDate]").inputmask("9999-99-99", { 'autoUnmask': true });
|
||||
|
||||
// 기본값 설정 (오늘)
|
||||
var today = getToday();
|
||||
if (!$("input[name=searchDate]").val()) {
|
||||
$("input[name=searchDate]").val(today);
|
||||
}
|
||||
|
||||
initCharts();
|
||||
list();
|
||||
search();
|
||||
fetchChartData();
|
||||
resizeJqGridWidth('grid', 'content_middle', '1200');
|
||||
|
||||
$("#btn_search").click(function() {
|
||||
search();
|
||||
});
|
||||
|
||||
$("input[name^=search]").keydown(function(key) {
|
||||
if (key.keyCode == 13) {
|
||||
$("#btn_search").click();
|
||||
}
|
||||
});
|
||||
|
||||
// 윈도우 리사이즈 시 차트 리사이즈
|
||||
$(window).resize(function() {
|
||||
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>
|
||||
</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="searchDate" value="${param.searchDate}" style="width:100px;">
|
||||
<span style="color:#888; font-size:12px; margin-left:10px;">(선택일 00시 ~ 23시 조회)</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>
|
||||
<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,421 @@
|
||||
<%@ 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>
|
||||
.chart-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.chart {
|
||||
width: 49%;
|
||||
height: 300px;
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
}
|
||||
</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/apiStatsMinuteMan.json"/>';
|
||||
var url_view = '<c:url value="/onl/kjb/statistics/apiStatsMinuteMan.view"/>';
|
||||
|
||||
var 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() {
|
||||
callChart = echarts.init(document.getElementById('callChart'));
|
||||
respChart = echarts.init(document.getElementById('respChart'));
|
||||
|
||||
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 },
|
||||
dataZoom: [
|
||||
{ type: 'inside', start: 0, end: 100 },
|
||||
{ start: 0, end: 100 }
|
||||
],
|
||||
series: [
|
||||
{ name: '성공', type: 'line', stack: 'Total', areaStyle: { opacity: 0.5 }, itemStyle: { color: '#5470C6' }, data: [], showSymbol: false },
|
||||
{ name: 'Timeout', type: 'line', stack: 'Total', areaStyle: { opacity: 0.5 }, itemStyle: { color: '#FAC858' }, data: [], showSymbol: false },
|
||||
{ name: '시스템오류', type: 'line', stack: 'Total', areaStyle: { opacity: 0.5 }, itemStyle: { color: '#EE6666' }, data: [], showSymbol: false },
|
||||
{ name: '업무오류', type: 'line', stack: 'Total', areaStyle: { opacity: 0.5 }, itemStyle: { color: '#FC8452' }, data: [], showSymbol: false }
|
||||
]
|
||||
};
|
||||
|
||||
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' },
|
||||
dataZoom: [
|
||||
{ type: 'inside', start: 0, end: 100 },
|
||||
{ start: 0, end: 100 }
|
||||
],
|
||||
series: [
|
||||
{ name: 'P95', type: 'line', itemStyle: { color: '#EE6666' }, lineStyle: { type: 'dashed' }, data: [], showSymbol: false },
|
||||
{ name: 'P50', type: 'line', itemStyle: { color: '#5470C6' }, data: [], showSymbol: false },
|
||||
{ name: '평균', type: 'line', itemStyle: { color: '#91CC75' }, data: [], showSymbol: false }
|
||||
]
|
||||
};
|
||||
|
||||
callChart.setOption(callOption);
|
||||
respChart.setOption(respOption);
|
||||
}
|
||||
|
||||
function updateCharts(data) {
|
||||
var times = [];
|
||||
var successData = [];
|
||||
var timeoutData = [];
|
||||
var systemErrData = [];
|
||||
var bizErrData = [];
|
||||
var avgRespData = [];
|
||||
var p50RespData = [];
|
||||
var p95RespData = [];
|
||||
|
||||
data.forEach(function(item) {
|
||||
// statTime: yyyyMMddHHmm -> HH:mm 형식으로 표시
|
||||
var time = item.statTime.substring(8, 10) + ':' + item.statTime.substring(10, 12);
|
||||
times.push(time);
|
||||
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);
|
||||
});
|
||||
|
||||
callChart.setOption({
|
||||
xAxis: { data: times },
|
||||
series: [
|
||||
{ data: successData },
|
||||
{ data: timeoutData },
|
||||
{ data: systemErrData },
|
||||
{ data: bizErrData }
|
||||
]
|
||||
});
|
||||
|
||||
respChart.setOption({
|
||||
xAxis: { data: times },
|
||||
series: [
|
||||
{ data: p95RespData },
|
||||
{ data: p50RespData },
|
||||
{ data: avgRespData }
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// 조회 기간 검증 및 조정 (최대 1시간)
|
||||
function validateAndAdjustDateRange() {
|
||||
var startDate = $("input[name=searchStartDate]").val().replace(/-/g, "");
|
||||
var startTime = $("input[name=searchStartTime]").val().replace(/:/g, "");
|
||||
var endDate = $("input[name=searchEndDate]").val().replace(/-/g, "");
|
||||
var endTime = $("input[name=searchEndTime]").val().replace(/:/g, "");
|
||||
|
||||
if (!startDate || !startTime) return null;
|
||||
|
||||
// Date 객체 생성 헬퍼
|
||||
function parseDateTime(date, time) {
|
||||
return new Date(
|
||||
parseInt(date.substring(0, 4)),
|
||||
parseInt(date.substring(4, 6)) - 1,
|
||||
parseInt(date.substring(6, 8)),
|
||||
parseInt(time.substring(0, 2)),
|
||||
parseInt(time.substring(2, 4))
|
||||
);
|
||||
}
|
||||
|
||||
// UI 업데이트 헬퍼
|
||||
function updateEndDateTime(dt) {
|
||||
var d = dt.getFullYear() +
|
||||
String(dt.getMonth() + 1).padStart(2, '0') +
|
||||
String(dt.getDate()).padStart(2, '0');
|
||||
var t = String(dt.getHours()).padStart(2, '0') +
|
||||
String(dt.getMinutes()).padStart(2, '0');
|
||||
$("input[name=searchEndDate]").val(d.substring(0, 4) + '-' + d.substring(4, 6) + '-' + d.substring(6, 8));
|
||||
$("input[name=searchEndTime]").val(t.substring(0, 2) + ':' + t.substring(2, 4));
|
||||
return d + t;
|
||||
}
|
||||
|
||||
var start = parseDateTime(startDate, startTime);
|
||||
var startDateTime = startDate + startTime;
|
||||
var endDateTime;
|
||||
|
||||
if (endDate && endTime) {
|
||||
var end = parseDateTime(endDate, endTime);
|
||||
var diffMinutes = (end - start) / (1000 * 60);
|
||||
|
||||
if (diffMinutes > 60) {
|
||||
// 1시간 초과 시 시작 + 1시간으로 조정
|
||||
endDateTime = updateEndDateTime(new Date(start.getTime() + 60 * 60 * 1000));
|
||||
} else {
|
||||
endDateTime = endDate + endTime;
|
||||
}
|
||||
} else {
|
||||
// 종료시간 미입력 시 시작 + 1시간으로 설정
|
||||
endDateTime = updateEndDateTime(new Date(start.getTime() + 60 * 60 * 1000));
|
||||
}
|
||||
|
||||
return { start: startDateTime, end: endDateTime };
|
||||
}
|
||||
|
||||
function fetchChartData(range) {
|
||||
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 (range) {
|
||||
postData.searchStartDateTime = range.start;
|
||||
postData.searchEndDateTime = range.end;
|
||||
}
|
||||
|
||||
$.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 range = validateAndAdjustDateRange();
|
||||
|
||||
var postData = getSearchForJqgrid("cmd", "LIST");
|
||||
if (range) {
|
||||
postData.searchStartDateTime = range.start;
|
||||
postData.searchEndDateTime = range.end;
|
||||
}
|
||||
|
||||
$("#grid").setGridParam({ url: url, postData: postData, page: 1 }).trigger("reloadGrid");
|
||||
fetchChartData(range);
|
||||
}
|
||||
|
||||
function list() {
|
||||
var gridPostData = getSearchForJqgrid("cmd", "LIST");
|
||||
$('#grid').jqGrid({
|
||||
datatype: "json",
|
||||
mtype: 'POST',
|
||||
postData: gridPostData,
|
||||
colNames: [
|
||||
'통계시간', 'API명', '인스턴스', '업무구분', '클라이언트ID',
|
||||
'Inbound Adapter', 'Outbound Adapter',
|
||||
'총건수', '성공', 'Timeout', '시스템오류', '업무오류',
|
||||
'평균응답(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: '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=searchStartDate], input[name=searchEndDate]").inputmask("9999-99-99", { 'autoUnmask': true });
|
||||
$("input[name=searchStartTime], input[name=searchEndTime]").inputmask("99:99", { 'autoUnmask': true });
|
||||
|
||||
// 기본값 설정 (현재 시간 기준 1시간 전 정각 ~ 현재 정각)
|
||||
var now = new Date();
|
||||
var endHour = now.getHours();
|
||||
var startHour = endHour - 1;
|
||||
var startDate, endDate;
|
||||
|
||||
if (startHour < 0) {
|
||||
startHour = 23;
|
||||
var yesterday = new Date(now);
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
startDate = yesterday.getFullYear() + '-' +
|
||||
String(yesterday.getMonth() + 1).padStart(2, '0') + '-' +
|
||||
String(yesterday.getDate()).padStart(2, '0');
|
||||
endDate = now.getFullYear() + '-' +
|
||||
String(now.getMonth() + 1).padStart(2, '0') + '-' +
|
||||
String(now.getDate()).padStart(2, '0');
|
||||
} else {
|
||||
var today = getToday();
|
||||
startDate = today;
|
||||
endDate = today;
|
||||
}
|
||||
|
||||
if (!$("input[name=searchStartDate]").val()) {
|
||||
$("input[name=searchStartDate]").val(startDate);
|
||||
$("input[name=searchStartTime]").val(String(startHour).padStart(2, '0') + ':00');
|
||||
}
|
||||
if (!$("input[name=searchEndDate]").val()) {
|
||||
$("input[name=searchEndDate]").val(endDate);
|
||||
$("input[name=searchEndTime]").val(String(endHour).padStart(2, '0') + ':00');
|
||||
}
|
||||
|
||||
initCharts();
|
||||
list();
|
||||
search();
|
||||
fetchChartData(validateAndAdjustDateRange());
|
||||
resizeJqGridWidth('grid', 'content_middle', '1200');
|
||||
|
||||
$("#btn_search").click(function() {
|
||||
search();
|
||||
});
|
||||
|
||||
$("input[name^=search]").keydown(function(key) {
|
||||
if (key.keyCode == 13) {
|
||||
$("#btn_search").click();
|
||||
}
|
||||
});
|
||||
|
||||
// 종료일/시간 변경 시 1시간 초과 검증
|
||||
$("input[name=searchEndDate], input[name=searchEndTime]").on('change blur', function() {
|
||||
validateAndAdjustDateRange();
|
||||
});
|
||||
|
||||
// 윈도우 리사이즈 시 차트 리사이즈
|
||||
$(window).resize(function() {
|
||||
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>
|
||||
</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="searchStartDate" value="${param.searchStartDate}" style="width:100px;">
|
||||
<input type="text" name="searchStartTime" value="${param.searchStartTime}" style="width:60px;">
|
||||
~
|
||||
<input type="text" name="searchEndDate" value="${param.searchEndDate}" style="width:100px;">
|
||||
<input type="text" name="searchEndTime" value="${param.searchEndTime}" style="width:60px;">
|
||||
<span style="color:#888; font-size:12px; margin-left:10px;">(최대 1시간, 초과시 자동 조정)</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>
|
||||
<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>
|
||||
@@ -567,8 +567,40 @@
|
||||
$(window).on('resize.jqGrid', function () {
|
||||
jQuery("#grid").jqGrid('setGridWidth', $("#content_middle").width());
|
||||
});
|
||||
|
||||
|
||||
const checkbox = document.getElementById('schedulerToggle');
|
||||
const targetButton = document.getElementById('btn_search');
|
||||
let timerId = null; // 인터벌 ID를 저장할 변수
|
||||
|
||||
// 체크박스 상태 변화 감지
|
||||
checkbox.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
console.log("스케줄러 시작: 1분 간격으로 클릭합니다.");
|
||||
|
||||
// 1. 즉시 한 번 실행하고 싶다면 아래 주석 해제
|
||||
// targetButton.click();
|
||||
|
||||
// 2. 1분(60,000ms)마다 반복 실행
|
||||
timerId = setInterval(() => {
|
||||
console.log("자동 클릭 실행 중...");
|
||||
targetButton.click();
|
||||
}, 60000);
|
||||
|
||||
} else {
|
||||
console.log("스케줄러 중지");
|
||||
|
||||
// 체크 해제 시 반복 멈춤
|
||||
if (timerId) {
|
||||
clearInterval(timerId);
|
||||
timerId = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
@@ -581,6 +613,7 @@
|
||||
</div><!-- end content_top -->
|
||||
<div class="content_middle" id="content_middle">
|
||||
<div class="search_wrap">
|
||||
<input type="checkbox" id="schedulerToggle">
|
||||
<button type="button" class="cssbtn" id="btn_excel" level="W"><i
|
||||
class="material-icons">table_view</i> <%= localeMessage.getString("button.excel") %>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user