eastargh
518 lines
17 KiB
Plaintext
518 lines
17 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"%>
|
||
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
|
||
<%@ include file="/jsp/common/include/localemessage.jsp" %>
|
||
<%
|
||
response.setHeader("Pragma", "No-cache");
|
||
response.setHeader("Cache-Control", "no-cache");
|
||
response.setHeader("Expires", "0");
|
||
%>
|
||
|
||
<html>
|
||
<head>
|
||
<title></title>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
<jsp:include page="/jsp/common/include/css.jsp"/>
|
||
<jsp:include page="/jsp/common/include/script.jsp"/>
|
||
|
||
<!-- 페이지 커스텀 스타일 (fragment) -->
|
||
<jsp:include page="fragments/inflowGroupDetailStyle.jsp"/>
|
||
|
||
<script language="javascript">
|
||
var url ='<c:url value="/onl/admin/inflow/inflowClientControlMan.json" />';
|
||
var url_view ='<c:url value="/onl/admin/inflow/inflowClientControlMan.view" />';
|
||
var isDetail = false;
|
||
|
||
function updateThresholdLabel() {
|
||
var timeUnit = $('select[name=thresholdTimeUnit]').val();
|
||
var $input = $('#thresholdInput');
|
||
var $unit = $('#thresholdUnit');
|
||
|
||
var unitLabels = {
|
||
'': '',
|
||
'SEC': 'req/sec',
|
||
'MIN': 'req/min',
|
||
'HOU': 'req/hour',
|
||
'DAY': 'req/day',
|
||
'MON': 'req/month'
|
||
};
|
||
|
||
$unit.text(unitLabels[timeUnit] || 'requests');
|
||
|
||
if (timeUnit === '') {
|
||
$input.prop('disabled', true).val('');
|
||
$unit.css('visibility', 'hidden');
|
||
} else {
|
||
$input.prop('disabled', false);
|
||
$unit.css('visibility', 'visible');
|
||
}
|
||
}
|
||
|
||
function init(url, key, callback) {
|
||
$.ajax({
|
||
type: "POST",
|
||
url: url,
|
||
dataType: "json",
|
||
data: {cmd: 'LIST_INIT_COMBO'},
|
||
success: function(json) {
|
||
new makeOptions("CODE","NAME").setObj($("select[name=useYn]")).setData(json.useYnRows).setFormat(codeName3OptionFormat).rendering();
|
||
new makeOptions("CODE","NAME").setObj($("select[name=thresholdTimeUnit]")).setNoValueInclude(true).setData(json.timeUnitRows).setFormat(codeName3OptionFormat).rendering();
|
||
updateThresholdLabel();
|
||
|
||
if (typeof callback === 'function') {
|
||
callback(url, key);
|
||
}
|
||
},
|
||
error: function(e) {
|
||
alert(e.responseText);
|
||
}
|
||
});
|
||
}
|
||
|
||
function detail(url, key) {
|
||
if (!isDetail) return;
|
||
$.ajax({
|
||
type: "POST",
|
||
url: url,
|
||
dataType: "json",
|
||
data: {cmd: 'DETAIL', name: key},
|
||
success: function(json) {
|
||
var data = json;
|
||
$("input[name=name]").attr('readonly', true);
|
||
$("input[name=desc]").attr('readonly', true);
|
||
|
||
$("#ajaxForm input[type!=radio],#ajaxForm select,#ajaxForm textarea").each(function() {
|
||
var name = $(this).attr("name");
|
||
var tag = $(this).prop("tagName").toLowerCase();
|
||
$(tag+"[name="+name+"]").val(data[name.toUpperCase()]);
|
||
});
|
||
|
||
updateThresholdLabel();
|
||
|
||
var modifiedAt = data.MODIFIEDAT || data.modifiedAt;
|
||
if (modifiedAt) {
|
||
$('#modifiedAtText').text(modifiedAt);
|
||
$('#modifiedAtInfo').show();
|
||
}
|
||
},
|
||
error: function(e) {
|
||
alert(e.responseText);
|
||
}
|
||
});
|
||
}
|
||
|
||
function switchTab(tabName) {
|
||
$('.detail-tab').removeClass('active');
|
||
$('.detail-tab[data-tab="' + tabName + '"]').addClass('active');
|
||
$('.tab-content').removeClass('active');
|
||
$('#tab' + tabName.charAt(0).toUpperCase() + tabName.slice(1) + 'Content').addClass('active');
|
||
|
||
if (tabName === 'status' && isDetail) {
|
||
loadBucketStatus();
|
||
}
|
||
}
|
||
|
||
//버킷 현황 조회
|
||
function loadBucketStatus() {
|
||
|
||
$('#bucketServerList').html('<div class="bucket-empty-msg"><i class="material-icons">hourglass_empty</i>조회 중...</div>');
|
||
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: url,
|
||
data: { cmd: 'LIST_BUCKET_STATUS', clientId: "${param.name}" },
|
||
dataType: 'json',
|
||
success: function(result) {
|
||
renderBucketStatus(result.servers || []);
|
||
$('#lastRefreshTime').text(formatDateTime(new Date()));
|
||
},
|
||
error: function(e) {
|
||
$('#bucketServerList').html('<div class="bucket-empty-msg bucket-error-msg"><i class="material-icons">error_outline</i>조회 실패: ' + e.statusText + '</div>');
|
||
}
|
||
});
|
||
}
|
||
|
||
function formatDateTime(date) {
|
||
var h = date.getHours();
|
||
var m = date.getMinutes();
|
||
var s = date.getSeconds();
|
||
return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
|
||
}
|
||
|
||
function renderBucketStatus(servers) {
|
||
var container = $('#bucketServerList');
|
||
container.empty();
|
||
|
||
if (servers.length === 0) {
|
||
container.html('<div class="bucket-empty-msg"><i class="material-icons">dns</i>등록된 서버가 없습니다</div>');
|
||
$('#bucketSummary').hide();
|
||
return;
|
||
}
|
||
|
||
// 전체 합산 계산
|
||
var onlineCount = 0;
|
||
var perSecondCapacity = 0;
|
||
var thresholdCapacity = 0;
|
||
var thresholdTimeUnit = '';
|
||
|
||
$.each(servers, function(i, server) {
|
||
if (server.status === 'online' && server.data && server.data.buckets) {
|
||
onlineCount++;
|
||
$.each(server.data.buckets, function(j, bucket) {
|
||
if (bucket.type === 'perSecond') {
|
||
perSecondCapacity += bucket.capacity || 0;
|
||
} else if (bucket.type === 'threshold') {
|
||
thresholdCapacity += bucket.capacity || 0;
|
||
if (!thresholdTimeUnit) thresholdTimeUnit = bucket.timeUnit;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
// 요약 영역 표시
|
||
if (onlineCount > 0) {
|
||
$('#summaryInstanceCount').html(onlineCount + '<span class="unit">개</span>');
|
||
|
||
var configPerSecond = parseInt($('input[name=thresholdPerSecond]').val()) || 0;
|
||
var configThreshold = parseInt($('input[name=threshold]').val()) || 0;
|
||
|
||
if (configPerSecond > 0) {
|
||
$('#summaryPerSecond').html(formatNumber(perSecondCapacity) + '<span class="unit">req/sec</span>');
|
||
$('#summaryPerSecondCalc').text(formatNumber(configPerSecond) + ' × ' + onlineCount + ' 인스턴스');
|
||
$('#summaryPerSecondWrap').show();
|
||
} else {
|
||
$('#summaryPerSecondWrap').hide();
|
||
}
|
||
|
||
if (configThreshold > 0) {
|
||
var timeUnitLabel = getTimeUnitText(thresholdTimeUnit);
|
||
$('#summaryThreshold').html(formatNumber(thresholdCapacity) + '<span class="unit">req/' + timeUnitLabel + '</span>');
|
||
$('#summaryThresholdCalc').text(formatNumber(configThreshold) + ' × ' + onlineCount + ' 인스턴스');
|
||
$('#summaryThresholdWrap').show();
|
||
} else {
|
||
$('#summaryThresholdWrap').hide();
|
||
}
|
||
|
||
$('#bucketSummary').show();
|
||
} else {
|
||
$('#bucketSummary').hide();
|
||
}
|
||
|
||
$.each(servers, function(i, server) {
|
||
var statusClass = server.status || 'offline';
|
||
var statusText = { online: '정상', offline: '오프라인', no_data: '데이터 없음' };
|
||
|
||
var card = '<div class="bucket-server-card">' +
|
||
'<div class="bucket-server-header">' +
|
||
'<div>' +
|
||
'<span class="bucket-server-name">' + server.serverName + '</span> ' +
|
||
'<span class="bucket-server-ip">' + server.serverIp + ':' + server.serverPort + '</span>' +
|
||
'</div>' +
|
||
'<span class="bucket-server-status ' + statusClass + '">' + (statusText[statusClass] || statusClass) + '</span>' +
|
||
'</div>' +
|
||
'<div class="bucket-server-body">' + renderBucketBody(server) + '</div>' +
|
||
'</div>';
|
||
container.append(card);
|
||
});
|
||
}
|
||
|
||
function renderBucketBody(server) {
|
||
if (server.status === 'offline') {
|
||
return '<div class="bucket-error-msg">' + (server.message || '서버 연결 실패') + '</div>';
|
||
}
|
||
if (server.status === 'no_data') {
|
||
return '<div class="bucket-empty-msg" style="padding:10px;"><i class="material-icons" style="font-size:18px;">info_outline</i> ' + (server.message || '그룹이 로드되지 않음') + '</div>';
|
||
}
|
||
|
||
var data = server.data;
|
||
if (!data || !data.buckets || data.buckets.length === 0) {
|
||
return '<div class="bucket-empty-msg" style="padding:10px;">버킷 정보 없음</div>';
|
||
}
|
||
|
||
var html = '<div class="bucket-info-grid">';
|
||
$.each(data.buckets, function(j, bucket) {
|
||
var typeLabel = bucket.type === 'perSecond' ? '초당 임계치' : '추가 임계치';
|
||
var timeUnitText = getTimeUnitText(bucket.timeUnit);
|
||
var usagePercent = bucket.usagePercent || 0;
|
||
var progressClass = usagePercent < 50 ? 'low' : (usagePercent < 80 ? 'medium' : 'high');
|
||
|
||
html += '<div class="bucket-card">' +
|
||
'<div class="bucket-card-header">' +
|
||
'<span class="bucket-type">' + typeLabel + '</span>' +
|
||
'<span class="bucket-type-badge">' + timeUnitText + '</span>' +
|
||
'</div>' +
|
||
'<div class="bucket-progress-wrap">' +
|
||
'<div class="bucket-progress-bar">' +
|
||
'<div class="bucket-progress-fill ' + progressClass + '" style="width:' + usagePercent + '%"></div>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'<div class="bucket-stats">' +
|
||
'<span>사용량: <span class="bucket-stats-value">' + usagePercent.toFixed(1) + '%</span></span>' +
|
||
'<span>잔여: <span class="bucket-stats-value">' + formatNumber(bucket.availableTokens) + '</span> / ' + formatNumber(bucket.capacity) + '</span>' +
|
||
'</div>' +
|
||
'</div>';
|
||
});
|
||
html += '</div>';
|
||
return html;
|
||
}
|
||
|
||
function getTimeUnitText(timeUnit) {
|
||
var units = {SEC: '초', MIN: '분', HOU: '시간', DAY: '일', MON: '월'};
|
||
return units[timeUnit] || timeUnit || '-';
|
||
}
|
||
|
||
function formatNumber(num) {
|
||
if (num === undefined || num === null) return '-';
|
||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||
}
|
||
|
||
$(document).ready(function() {
|
||
var returnUrl = getReturnUrlForReturn();
|
||
var key = "${param.name}";
|
||
if (key != "" && key != "null") {
|
||
isDetail = true;
|
||
}
|
||
init(url, key, detail);
|
||
|
||
$("select[name=thresholdTimeUnit]").on('change', function() {
|
||
updateThresholdLabel();
|
||
});
|
||
|
||
$("#btn_modify").click(function() {
|
||
$(this).blur();
|
||
var confirmMsg = isDetail ? '변경사항을 저장하시겠습니까?' : '새 클라이언트를 등록하시겠습니까?';
|
||
showConfirm(confirmMsg, {
|
||
title: '저장 확인',
|
||
confirmText: '저장',
|
||
onConfirm: function() {
|
||
var postData = $('#ajaxForm').serializeArray();
|
||
if (isDetail) {
|
||
postData.push({name: "cmd", value: "UPDATE"});
|
||
} else {
|
||
postData.push({name: "cmd", value: "INSERT"});
|
||
}
|
||
var isInsert = !isDetail;
|
||
$.ajax({
|
||
type: "POST",
|
||
url: url,
|
||
data: postData,
|
||
success: function(args) {
|
||
console.log('mod', args);
|
||
showAlert("<%= localeMessage.getString("common.saveMsg") %>", {
|
||
type: 'success',
|
||
title: '저장 완료',
|
||
onClose: isInsert ? function() { goNav(returnUrl); } : undefined
|
||
});
|
||
},
|
||
error: function(e) {
|
||
showAlert(e.responseText, {type: 'error'});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
$("#btn_delete").click(function() {
|
||
$(this).blur();
|
||
var clientName = $('input[name=desc]').val() || $('input[name=name]').val();
|
||
showConfirm('<strong>[' + clientName + ']</strong> 클라이언트를 삭제하시겠습니까?', {
|
||
type: 'error',
|
||
title: '삭제 확인',
|
||
confirmText: '삭제',
|
||
onConfirm: function() {
|
||
var postData = $('#ajaxForm').serializeArray();
|
||
postData.push({name: "cmd", value: "DELETE"});
|
||
$.ajax({
|
||
type: "POST",
|
||
url: url,
|
||
data: postData,
|
||
success: function(args) {
|
||
showAlert("<%= localeMessage.getString("common.deleteMsg") %>", {
|
||
type: 'success',
|
||
title: '삭제 완료',
|
||
onClose: function() { goNav(returnUrl); }
|
||
});
|
||
},
|
||
error: function(e) {
|
||
showAlert(e.responseText, {type: 'error'});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
$("#btn_previous").click(function() {
|
||
goNav(returnUrl);
|
||
});
|
||
|
||
buttonControl(isDetail);
|
||
titleControl(isDetail);
|
||
|
||
$('.detail-tab').click(function() {
|
||
switchTab($(this).data('tab'));
|
||
});
|
||
|
||
if (isDetail) {
|
||
$('#tabStatus').show();
|
||
}
|
||
|
||
$('#btn_refresh_bucket').click(function() {
|
||
loadBucketStatus();
|
||
});
|
||
|
||
$(document).keydown(function(e) {
|
||
if (e.keyCode === 27) {
|
||
// ESC 키 처리 (필요시 모달 닫기 등)
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="right_box">
|
||
<div class="content_top">
|
||
<ul class="path">
|
||
<li><a href="#">${rmsMenuPath}</a></li>
|
||
</ul>
|
||
</div><!-- end content_top -->
|
||
<div class="content_middle" id="content_middle">
|
||
<div class="search_wrap">
|
||
<button type="button" class="cssbtn" id="btn_delete" level="W" status="DETAIL"><i class="material-icons">delete</i> <%= localeMessage.getString("button.delete") %></button>
|
||
<button type="button" class="cssbtn" id="btn_modify" level="W" status="DETAIL,NEW"><i class="material-icons">save</i> <%= localeMessage.getString("button.save") %></button>
|
||
<button type="button" class="cssbtn" id="btn_previous" level="R" status="DETAIL,NEW"><i class="material-icons">arrow_back</i> <%= localeMessage.getString("button.previous") %></button>
|
||
</div>
|
||
|
||
<div class="title-wrap">
|
||
<div class="title">클라이언트 유량제어<span class="tooltip">클라이언트 유량제어</span></div>
|
||
<span id="modifiedAtInfo" class="modified-badge" style="display:none;">
|
||
<i class="material-icons">update</i><span id="modifiedAtText">-</span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 탭 네비게이션 -->
|
||
<div class="detail-tabs">
|
||
<button type="button" class="detail-tab active" data-tab="config">
|
||
<i class="material-icons">settings</i> 설정
|
||
</button>
|
||
<button type="button" class="detail-tab" data-tab="status" id="tabStatus" style="display:none;">
|
||
<i class="material-icons">analytics</i> 현황
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 설정 탭 -->
|
||
<div class="tab-content active" id="tabConfigContent">
|
||
<form id="ajaxForm">
|
||
<span class="section-label">기본 정보</span>
|
||
<table class="form-table" cellspacing="0">
|
||
<colgroup>
|
||
<col style="width:150px" />
|
||
<col />
|
||
</colgroup>
|
||
<tbody>
|
||
<tr>
|
||
<th>클라이언트 ID</th>
|
||
<td><input type="text" name="name" style="width:300px; background-color: #ebebec;" /></td>
|
||
</tr>
|
||
<tr>
|
||
<th>클라이언트명</th>
|
||
<td><input type="text" name="desc" style="width:300px; background-color: #ebebec;" /></td>
|
||
</tr>
|
||
<tr>
|
||
<th><%= localeMessage.getString("infAdpConMan.useYn") %></th>
|
||
<td>
|
||
<select name="useYn" class="styled-select"></select>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<span class="section-label">유량제어 설정</span>
|
||
<table class="form-table" cellspacing="0">
|
||
<colgroup>
|
||
<col style="width:150px" />
|
||
<col />
|
||
</colgroup>
|
||
<tbody>
|
||
<tr>
|
||
<th>
|
||
<%= localeMessage.getString("infAdpConMan.thrPerSecond") %>
|
||
<span class="hint-icon"><i class="material-icons">help_outline</i>
|
||
<span class="hint-bubble">1초 단위의 순간 트래픽 제한입니다. 매 초마다 설정한 건수만큼 토큰이 리필되며, 초과 시 요청이 거부됩니다.</span>
|
||
</span>
|
||
</th>
|
||
<td>
|
||
<div class="threshold-group">
|
||
<input type="number" name="thresholdPerSecond" placeholder="0" />
|
||
<span class="unit">req/sec</span>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>
|
||
<%= localeMessage.getString("infAdpConMan.thr") %>
|
||
<span class="hint-icon"><i class="material-icons">help_outline</i>
|
||
<span class="hint-bubble">장시간 누적 트래픽 제한입니다. 시간단위를 선택하면 해당 주기마다 토큰이 리필됩니다.</span>
|
||
</span>
|
||
</th>
|
||
<td>
|
||
<div class="threshold-group">
|
||
<select name="thresholdTimeUnit" class="styled-select"></select>
|
||
<input type="number" name="threshold" id="thresholdInput" placeholder="0" />
|
||
<span class="unit" id="thresholdUnit">requests</span>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</form>
|
||
</div><!-- /tabConfigContent -->
|
||
|
||
<!-- 현황 탭 -->
|
||
<div class="tab-content" id="tabStatusContent">
|
||
<div class="bucket-status-wrap">
|
||
<div class="bucket-refresh-bar">
|
||
<span class="last-refresh">마지막 갱신: <span id="lastRefreshTime">-</span></span>
|
||
<button type="button" class="cssbtn" id="btn_refresh_bucket"><i class="material-icons">refresh</i> 새로고침</button>
|
||
</div>
|
||
|
||
<!-- 전체 합산 요약 -->
|
||
<div class="bucket-summary" id="bucketSummary" style="display:none;">
|
||
<div class="bucket-summary-title"><i class="material-icons">functions</i> 전체 인스턴스 합산</div>
|
||
<div class="bucket-summary-grid">
|
||
<div class="bucket-summary-item">
|
||
<span class="bucket-summary-label">활성 인스턴스</span>
|
||
<span class="bucket-summary-value" id="summaryInstanceCount">0<span class="unit">개</span></span>
|
||
</div>
|
||
<div class="bucket-summary-item" id="summaryPerSecondWrap">
|
||
<span class="bucket-summary-label">초당 임계치 (전체)</span>
|
||
<span class="bucket-summary-value" id="summaryPerSecond">0<span class="unit">req/sec</span></span>
|
||
<span class="bucket-summary-sub" id="summaryPerSecondCalc"></span>
|
||
</div>
|
||
<div class="bucket-summary-item" id="summaryThresholdWrap">
|
||
<span class="bucket-summary-label">추가 임계치 (전체)</span>
|
||
<span class="bucket-summary-value" id="summaryThreshold">0<span class="unit">req</span></span>
|
||
<span class="bucket-summary-sub" id="summaryThresholdCalc"></span>
|
||
</div>
|
||
<div class="bucket-summary-item">
|
||
<span class="bucket-summary-label">적용 API</span>
|
||
<span class="bucket-summary-value" id="summaryActiveApi">0<span class="unit">개</span></span>
|
||
<span class="bucket-summary-sub" id="summaryActiveApiList"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bucket-server-list" id="bucketServerList">
|
||
<div class="bucket-empty-msg">
|
||
<i class="material-icons">hourglass_empty</i>
|
||
버킷 현황을 조회하려면 새로고침 버튼을 클릭하세요
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /tabStatusContent -->
|
||
|
||
</div><!-- end content_middle -->
|
||
</div><!-- end right_box -->
|
||
</body>
|
||
</html>
|