eastargh
653 lines
22 KiB
Plaintext
653 lines
22 KiB
Plaintext
<%@ 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 {
|
|
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 totalDonutChart, callChart;
|
|
|
|
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';
|
|
return Math.round(Number(cellvalue)).toLocaleString();
|
|
}
|
|
|
|
function initCharts() {
|
|
totalDonutChart = echarts.init(document.getElementById('totalDonutChart'));
|
|
callChart = echarts.init(document.getElementById('callChart'));
|
|
|
|
// 총건수 도넛 차트
|
|
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' } }
|
|
]
|
|
}],
|
|
graphic: [{
|
|
type: 'text',
|
|
left: 'center',
|
|
top: 'center',
|
|
style: {
|
|
text: '0',
|
|
textAlign: 'center',
|
|
fill: '#333',
|
|
fontSize: 24,
|
|
fontWeight: 'bold'
|
|
}
|
|
}]
|
|
};
|
|
|
|
totalDonutChart.setOption(totalDonutOption);
|
|
|
|
|
|
|
|
// 호출량 차트
|
|
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', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#5470C6' }, data: [], showSymbol: false },
|
|
{ name: 'Timeout', type: 'line', stack: 'Total', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#FAC858' }, data: [], showSymbol: false },
|
|
{ name: '시스템오류', type: 'line', stack: 'Total', smooth: true, areaStyle: { opacity: 0.5 }, itemStyle: { color: '#EE6666' }, data: [], showSymbol: false }
|
|
]
|
|
};
|
|
|
|
|
|
callChart.setOption(callOption);
|
|
}
|
|
|
|
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) {
|
|
// 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);
|
|
|
|
// 도넛 차트용 합산
|
|
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: '시스템오류' }
|
|
]
|
|
}],
|
|
graphic: [{
|
|
style: {
|
|
text: grandTotal.toLocaleString()
|
|
}
|
|
}]
|
|
});
|
|
|
|
|
|
// 호출량 차트 업데이트
|
|
callChart.setOption({
|
|
xAxis: { data: times },
|
|
series: [
|
|
{ data: successData },
|
|
{ data: timeoutData },
|
|
{ data: systemErrData }
|
|
]
|
|
});
|
|
|
|
}
|
|
|
|
// 조회 기간 검증 및 조정 (최대 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;
|
|
}
|
|
|
|
var summaryPostData = getSearchForJqgrid("cmd", "LIST_SUMMARY");
|
|
if (range) {
|
|
summaryPostData.searchStartDateTime = range.start;
|
|
summaryPostData.searchEndDateTime = range.end;
|
|
}
|
|
|
|
$("#gridSummary").setGridParam({ url: url, postData: summaryPostData, page: 1 }).trigger("reloadGrid");
|
|
$("#grid").setGridParam({ url: url, postData: postData, page: 1 }).trigger("reloadGrid");
|
|
fetchChartData(range);
|
|
}
|
|
|
|
function exportToExcel(isSummary) {
|
|
var cmdType = isSummary ? 'EXCEL_EXPORT_SUMMARY' : 'EXCEL_EXPORT';
|
|
console.log('[Excel Export] Starting... (type: ' + cmdType + ')');
|
|
|
|
var postData = {
|
|
cmd: cmdType,
|
|
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}'
|
|
};
|
|
|
|
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) {
|
|
postData.searchStartDateTime = startDate + startTime;
|
|
postData.searchEndDateTime = endDate + endTime;
|
|
}
|
|
|
|
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_stats.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 listSummary() {
|
|
var gridPostData = getSearchForJqgrid("cmd", "LIST_SUMMARY");
|
|
$('#gridSummary').jqGrid({
|
|
datatype: "json",
|
|
mtype: 'POST',
|
|
postData: gridPostData,
|
|
colNames: [
|
|
'API명',
|
|
'총건수', '성공', 'Timeout', '시스템오류',
|
|
'평균응답(ms)', '최소응답(ms)', '최대응답(ms)'
|
|
],
|
|
colModel: [
|
|
{ name: 'apiName', align: 'left', width: '250', sortable: false },
|
|
{ name: 'totalCnt', align: 'right', width: '80', formatter: numberFormatter, sortable: false },
|
|
{ name: 'successCnt', align: 'right', width: '80', formatter: numberFormatter, sortable: false },
|
|
{ name: 'timeoutCnt', align: 'right', width: '80', formatter: numberFormatter, sortable: false },
|
|
{ name: 'systemErrCnt', align: 'right', width: '80', formatter: numberFormatter, sortable: false },
|
|
{ name: 'avgRespTime', align: 'right', width: '90', formatter: decimalFormatter, sortable: false },
|
|
{ name: 'minRespTime', align: 'right', width: '90', formatter: decimalFormatter, sortable: false },
|
|
{ name: 'maxRespTime', align: 'right', width: '90', formatter: decimalFormatter, sortable: false }
|
|
],
|
|
jsonReader: { repeatitems: false },
|
|
pager: $('#pagerSummary'),
|
|
page: '${param.page}',
|
|
rowNum: '${rmsDefaultRowNum}',
|
|
autoheight: true,
|
|
height: 'auto',
|
|
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 });
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function listDetail() {
|
|
var gridPostData = getSearchForJqgrid("cmd", "LIST");
|
|
$('#grid').jqGrid({
|
|
datatype: "json",
|
|
mtype: 'POST',
|
|
postData: gridPostData,
|
|
colNames: [
|
|
'통계시간', 'API명', '인스턴스', '업무구분', '클라이언트ID',
|
|
'Inbound Adapter', 'Outbound Adapter',
|
|
'총건수', '성공', 'Timeout', '시스템오류',
|
|
'평균응답(ms)', '최소응답(ms)', '최대응답(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: '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 }
|
|
],
|
|
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();
|
|
listSummary();
|
|
listDetail();
|
|
search();
|
|
fetchChartData(validateAndAdjustDateRange());
|
|
resizeJqGridWidth('gridSummary', 'content_middle', '1200');
|
|
resizeJqGridWidth('grid', 'content_middle', '1200');
|
|
|
|
$("#btn_search").click(function() {
|
|
search();
|
|
});
|
|
|
|
$("#btn_excel_export_summary").click(function() {
|
|
exportToExcel(true);
|
|
});
|
|
|
|
$("#btn_excel_export").click(function() {
|
|
exportToExcel(false);
|
|
});
|
|
|
|
$("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 (totalDonutChart) totalDonutChart.resize();
|
|
if (callChart) callChart.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">대시보드</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>
|
|
</tbody>
|
|
</table>
|
|
<!-- 도넛 차트 (상단 50%씩) -->
|
|
<div class="chart-container">
|
|
<div id="totalDonutChart" class="chart"></div>
|
|
<div id="callChart" class="chart"></div>
|
|
</div>
|
|
|
|
|
|
<!-- 요약 그리드 -->
|
|
<div style="margin-top: 20px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
|
<div class="title" style="margin: 0;">API별 사용현황</div>
|
|
<button type="button" class="cssbtn" id="btn_excel_export_summary" level="R">
|
|
<i class="material-icons">file_download</i> Excel 다운로드 (요약)
|
|
</button>
|
|
</div>
|
|
<table id="gridSummary"></table>
|
|
<div id="pagerSummary"></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|