feat: 유량제어 그룹 관리 UI 개선
- 리스트/상세 화면에 그룹 ID 컬럼 추가 (상세는 수정 시에만 표시) - 현황 탭에 전체 인스턴스 합산 요약 추가 (활성 인스턴스 수, 초당/추가 임계치 합산) - 추가 임계치 시간단위에서 '초(SEC)' 옵션 제거 - 신규 등록 시 저장 완료 후 목록 화면으로 이동, 수정 시 현재 화면 유지 - 모달 열릴 때 버튼 포커스 해제하여 스페이스 키 중복 실행 방지
This commit is contained in:
@@ -26,6 +26,7 @@
|
|||||||
.datetime-display { font-size:11px; color:#666; }
|
.datetime-display { font-size:11px; color:#666; }
|
||||||
.datetime-display .date { color:#333; }
|
.datetime-display .date { color:#333; }
|
||||||
.datetime-display .time { color:rgba(0,128,128,0.9); font-weight:500; }
|
.datetime-display .time { color:rgba(0,128,128,0.9); font-weight:500; }
|
||||||
|
.group-id-display { font-family:Consolas, monospace; font-size:11px; color:#666; }
|
||||||
</style>
|
</style>
|
||||||
<script language="javascript" >
|
<script language="javascript" >
|
||||||
var url ='<c:url value="/onl/admin/inflow/inflowGroupControlMan.json" />';
|
var url ='<c:url value="/onl/admin/inflow/inflowGroupControlMan.json" />';
|
||||||
@@ -77,6 +78,11 @@ function thresholdFormatter(cellValue, options, rowObject) {
|
|||||||
return '<span class="threshold-display"><span class="num">' + Number(threshold).toLocaleString() + '</span>건 / <span class="unit">' + label + '</span><span class="code">' + timeUnit + '</span></span>';
|
return '<span class="threshold-display"><span class="num">' + Number(threshold).toLocaleString() + '</span>건 / <span class="unit">' + label + '</span><span class="code">' + timeUnit + '</span></span>';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function groupIdFormatter(cellValue, options, rowObject) {
|
||||||
|
if (!cellValue) return '<span style="color:#ccc;">-</span>';
|
||||||
|
return '<span class="group-id-display">' + cellValue + '</span>';
|
||||||
|
}
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$('#grid').jqGrid({
|
$('#grid').jqGrid({
|
||||||
datatype:"json",
|
datatype:"json",
|
||||||
@@ -91,8 +97,8 @@ $(document).ready(function() {
|
|||||||
'수정일시'
|
'수정일시'
|
||||||
],
|
],
|
||||||
colModel:[
|
colModel:[
|
||||||
{ name : 'GROUPID' , align:'left' , width:'100' , sortable:false, hidden:true },
|
{ name : 'GROUPID' , align:'left' , width:'200' , sortable:false },
|
||||||
{ name : 'GROUPNAME' , align:'left' , width:'250'},
|
{ name : 'GROUPNAME' , align:'left' , width:'280'},
|
||||||
{ name : 'THRESHOLDPERSECOND' , align:'center' , width:'100' , formatter:perSecondFormatter },
|
{ name : 'THRESHOLDPERSECOND' , align:'center' , width:'100' , formatter:perSecondFormatter },
|
||||||
{ name : 'THRESHOLD' , align:'center' , width:'120' , formatter:thresholdFormatter },
|
{ name : 'THRESHOLD' , align:'center' , width:'120' , formatter:thresholdFormatter },
|
||||||
{ name : 'USEYN' , align:'center' , width:'70' , formatter:useYnBadgeFormatter },
|
{ name : 'USEYN' , align:'center' , width:'70' , formatter:useYnBadgeFormatter },
|
||||||
|
|||||||
@@ -268,7 +268,8 @@ function detail(url, key) {
|
|||||||
dataType: "json",
|
dataType: "json",
|
||||||
data: {cmd: 'DETAIL', groupId: key},
|
data: {cmd: 'DETAIL', groupId: key},
|
||||||
success: function(json) {
|
success: function(json) {
|
||||||
$("input[name=groupId]").val(json.GROUPID || json.groupId);
|
var groupId = json.GROUPID || json.groupId;
|
||||||
|
$("input[name=groupId]").val(groupId);
|
||||||
$("input[name=groupName]").val(json.GROUPNAME || json.groupName);
|
$("input[name=groupName]").val(json.GROUPNAME || json.groupName);
|
||||||
$("input[name=thresholdPerSecond]").val(json.THRESHOLDPERSECOND || json.thresholdPerSecond);
|
$("input[name=thresholdPerSecond]").val(json.THRESHOLDPERSECOND || json.thresholdPerSecond);
|
||||||
$("input[name=threshold]").val(json.THRESHOLD || json.threshold);
|
$("input[name=threshold]").val(json.THRESHOLD || json.threshold);
|
||||||
@@ -279,6 +280,12 @@ function detail(url, key) {
|
|||||||
$('#useYnLabel').text(useYnVal === '1' ? '사용' : '미사용');
|
$('#useYnLabel').text(useYnVal === '1' ? '사용' : '미사용');
|
||||||
updateThresholdLabel();
|
updateThresholdLabel();
|
||||||
|
|
||||||
|
// 그룹 ID 표시 (수정 화면에서만)
|
||||||
|
if (groupId) {
|
||||||
|
$('#groupIdDisplay').text(groupId);
|
||||||
|
$('#groupIdRow').show();
|
||||||
|
}
|
||||||
|
|
||||||
// 수정일시 표시
|
// 수정일시 표시
|
||||||
var modifiedAt = json.MODIFIEDAT || json.modifiedAt;
|
var modifiedAt = json.MODIFIEDAT || json.modifiedAt;
|
||||||
if (modifiedAt) {
|
if (modifiedAt) {
|
||||||
@@ -355,7 +362,10 @@ function openIfModal() {
|
|||||||
ifModalState.page = 1;
|
ifModalState.page = 1;
|
||||||
ifModalState.selectedItem = null;
|
ifModalState.selectedItem = null;
|
||||||
$('#ifSearchInput').val('');
|
$('#ifSearchInput').val('');
|
||||||
$('#ifModal').fadeIn(200);
|
$('#ifModal').fadeIn(200, function() {
|
||||||
|
$('#ifSearchInput').focus();
|
||||||
|
});
|
||||||
|
$(document.activeElement).blur();
|
||||||
loadIfList();
|
loadIfList();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -716,6 +726,7 @@ $(document).ready(function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
$("#btn_modify").click(function() {
|
$("#btn_modify").click(function() {
|
||||||
|
$(this).blur();
|
||||||
if (!isValid()) return;
|
if (!isValid()) return;
|
||||||
|
|
||||||
var confirmMsg = isDetail ? '변경사항을 저장하시겠습니까?' : '새 그룹을 등록하시겠습니까?';
|
var confirmMsg = isDetail ? '변경사항을 저장하시겠습니까?' : '새 그룹을 등록하시겠습니까?';
|
||||||
@@ -732,15 +743,28 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
postData.push({name: "interfaceListJson", value: getInterfaceListJson()});
|
postData.push({name: "interfaceListJson", value: getInterfaceListJson()});
|
||||||
|
|
||||||
|
var isInsert = !isDetail;
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "POST",
|
type: "POST",
|
||||||
url: url,
|
url: url,
|
||||||
data: postData,
|
data: postData,
|
||||||
success: function(args) {
|
success: function(args) {
|
||||||
showAlert("<%= localeMessage.getString("common.saveMsg") %>", {
|
if (isInsert) {
|
||||||
type: 'success',
|
// 신규 등록 시 목록으로 이동
|
||||||
title: '저장 완료'
|
showAlert("<%= localeMessage.getString("common.saveMsg") %>", {
|
||||||
});
|
type: 'success',
|
||||||
|
title: '저장 완료',
|
||||||
|
onClose: function() {
|
||||||
|
goNav(returnUrl);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 수정 시 현재 화면 유지
|
||||||
|
showAlert("<%= localeMessage.getString("common.saveMsg") %>", {
|
||||||
|
type: 'success',
|
||||||
|
title: '저장 완료'
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
error: function(e) {
|
error: function(e) {
|
||||||
showAlert(e.responseText, { type: 'error' });
|
showAlert(e.responseText, { type: 'error' });
|
||||||
@@ -751,6 +775,7 @@ $(document).ready(function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
$("#btn_delete").click(function() {
|
$("#btn_delete").click(function() {
|
||||||
|
$(this).blur();
|
||||||
var groupName = $('input[name=groupName]').val();
|
var groupName = $('input[name=groupName]').val();
|
||||||
showConfirm('<strong>[' + groupName + ']</strong> 그룹을 삭제하시겠습니까?<br/><span style="color:#999;font-size:11px;">매핑된 API 정보도 함께 삭제됩니다.</span>', {
|
showConfirm('<strong>[' + groupName + ']</strong> 그룹을 삭제하시겠습니까?<br/><span style="color:#999;font-size:11px;">매핑된 API 정보도 함께 삭제됩니다.</span>', {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
@@ -845,6 +870,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
// 도움말 모달
|
// 도움말 모달
|
||||||
$("#btn_help").click(function() {
|
$("#btn_help").click(function() {
|
||||||
|
$(document.activeElement).blur();
|
||||||
$("#helpModal").fadeIn(200);
|
$("#helpModal").fadeIn(200);
|
||||||
});
|
});
|
||||||
$(".help-modal-close, .help-modal-overlay").click(function(e) {
|
$(".help-modal-close, .help-modal-overlay").click(function(e) {
|
||||||
@@ -905,6 +931,10 @@ $(document).ready(function() {
|
|||||||
<col />
|
<col />
|
||||||
</colgroup>
|
</colgroup>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
<tr id="groupIdRow" style="display:none;">
|
||||||
|
<th>그룹 ID</th>
|
||||||
|
<td><span id="groupIdDisplay" style="font-family:Consolas, monospace; font-size:12px; color:#666;"></span></td>
|
||||||
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>그룹명 <span style="color:red">*</span></th>
|
<th>그룹명 <span style="color:red">*</span></th>
|
||||||
<td><input type="text" name="groupName" style="width:300px" /></td>
|
<td><input type="text" name="groupName" style="width:300px" /></td>
|
||||||
|
|||||||
Reference in New Issue
Block a user