Files
eapim-admin/WebContent/jsp/onl/apim/apistatus/hist/apiStatusHistMan.jsp
T
eastargh 4e22683ddb
eapim-admin CI / build (push) Has been cancelled
api_status_hist 조회 화면 추가
2026-09-17 18:03:04 +09:00

195 lines
9.0 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"/>
<style>
.status-N { color:#1a73e8; font-weight:bold; }
.status-C { color:#9aa0a6; font-weight:bold; }
.status-D { color:#e8710a; font-weight:bold; }
.status-E { color:#d93025; font-weight:bold; }
</style>
<script language="javascript">
var url = '<c:url value="/onl/apim/apistatus/hist/apiStatusHistMan.json" />';
// 상태코드(N:정상, C:점검, D:지연, E:장애) 한글 라벨
var STATUS_NAME = {N: '정상', C: '점검', D: '지연', E: '장애'};
function escapeHtmlJs(s) { return $('<div>').text(s == null ? '' : s).html(); }
function formatStatus(cellvalue, options, rowObject) {
if (!cellvalue) return '';
var name = STATUS_NAME[cellvalue] || cellvalue;
return '<span class="status-' + cellvalue + '">' + escapeHtmlJs(name) + '</span>';
}
function init() {
$("#startDatepicker").datepicker().inputmask("yyyy-mm-dd", {'autoUnmask': true});
$("#endDatepicker").datepicker().inputmask("yyyy-mm-dd", {'autoUnmask': true});
var today = getToday();
$("input[name=searchStartYYYYMMDD]").val(today.substring(0, 6) + "01");
$("input[name=searchEndYYYYMMDD]").val(today);
$("input[name=searchStartDate]").val(today.substring(0, 6) + "01");
$("input[name=searchEndDate]").val(today);
// 뒤로가기 등으로 이전 검색조건 파라미터가 있으면 기본값을 덮어씀
putSelectFromParam();
buildGrid();
}
function buildGrid() {
$('#grid').jqGrid({
datatype: "json",
mtype: 'POST',
url: url,
postData: getSearchForJqgrid("cmd", "LIST"),
colNames: ['histSeq', 'No.', 'API ID', '이전상태', '변경상태', 'Job명', '인스턴스명', '등록자', '등록일시'],
colModel: [
{name: 'histSeq', align: 'center', key: true, hidden: true},
{name: 'rowNum', align: 'center', width: 45, sortable: false},
{name: 'eaisvcname', align: 'left', width: 160},
{name: 'prevStatusCode', align: 'center', width: 70, formatter: formatStatus},
{name: 'statusCode', align: 'center', width: 70, formatter: formatStatus},
{name: 'jobname', align: 'left', width: 160},
{name: 'instancename', align: 'center', width: 100},
{name: 'createdBy', align: 'center', width: 90},
{name: 'createdDate', align: 'center', width: 150}
],
jsonReader: {repeatitems: false},
pager: $('#pager'),
page: '${param.page}',
rowNum: '${rmsDefaultRowNum}',
autoheight: true,
height: $("#container").height(),
autowidth: true,
viewrecords: true,
rowList: eval('[${rmsDefaultRowList}]'),
loadComplete: function () {
var page = $(this).getGridParam('page');
var rowNum = $(this).getGridParam('rowNum');
var rows = $(this).getDataIDs();
var colModel = $(this).getGridParam("colModel");
for (var i = 0; i < rows.length; i++) {
var number = ((page - 1) * rowNum + i) + 1;
$(this).setCell(rows[i], 'rowNum', number);
}
// 서버 고정 정렬(등록일시 역순) - 컬럼 정렬 비활성
for (var i = 0; i < colModel.length; i++) {
$(this).setColProp(colModel[i].name, {sortable: false});
}
},
loadError: function (jqXHR, textStatus, errorThrown) {
var location = '<%=request.getContextPath()%>/';
comloadError(jqXHR, textStatus, errorThrown, location);
}
});
resizeJqGridWidth('grid', 'content_middle', '1000');
}
$(document).ready(function () {
init();
$("#btn_search").click(function () {
var start = $("input[name=searchStartYYYYMMDD]").val().replace(/-/gi, "");
var end = $("input[name=searchEndYYYYMMDD]").val().replace(/-/gi, "");
if (start && start > getToday()) {
alert("시작일이 오늘 이후입니다. 시작일을 확인해주세요.");
$("input[name=searchStartYYYYMMDD]").focus();
return false;
}
if (start && end && start > end) {
alert("조회기간 종료일은 시작일보다 커야합니다.");
$("input[name=searchEndYYYYMMDD]").focus();
return false;
}
$("input[name=searchStartDate]").val(start);
$("input[name=searchEndDate]").val(end);
var postData = getSearchForJqgrid("cmd", "LIST");
$("#grid").setGridParam({url: url, postData: postData, page: 1}).trigger("reloadGrid");
});
$("select[name^=search]").change(function () { $("#btn_search").click(); });
$("input[name^=search]").keydown(function (key) {
if (key.keyCode == 13) { $("#btn_search").click(); }
});
buttonControl();
});
</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_search" level="R"><i class="material-icons">search</i> <%= localeMessage.getString("button.search") %></button>
</div>
<div class="title">API 상태 변경 히스토리<span class="tooltip">API 장애/지연/점검 상태 변경 이력을 조회합니다.</span></div>
<form id="ajaxForm" onsubmit="return false;">
<table class="search_condition" cellspacing=0;>
<colgroup>
<col style="width:120px;"><col style="width:200px;">
<col style="width:120px;"><col style="width:200px;">
<col style="width:120px;"><col style="width:200px;">
</colgroup>
<tbody>
<tr>
<th>API ID</th>
<td><input type="text" name="searchEaisvcname" autocomplete="off"></td>
<th>변경상태</th>
<td>
<div class="select-style">
<select name="searchStatusCode">
<option value="">전체</option>
<option value="N">정상</option>
<option value="C">점검</option>
<option value="D">지연</option>
<option value="E">장애</option>
</select>
</div>
</td>
<th>Job명</th>
<td><input type="text" name="searchJobname" autocomplete="off"></td>
</tr>
<tr>
<th>인스턴스명</th>
<td><input type="text" name="searchInstancename" autocomplete="off"></td>
<th>등록기간</th>
<td>
<input type="text" name="searchStartYYYYMMDD" id="startDatepicker" readonly="readonly" value="" size="10" style="width:100px; border:1px solid #ebebec;">
~
<input type="text" name="searchEndYYYYMMDD" value="" id="endDatepicker" size="10" readonly="readonly" style="width:100px; border:1px solid #ebebec;">
<input type="hidden" name="searchStartDate" value="">
<input type="hidden" name="searchEndDate" value="">
</td>
<th></th>
<td></td>
</tr>
</tbody>
</table>
</form>
<table id="grid"></table>
<div id="pager"></div>
</div><!-- end content_middle -->
</div><!-- end right_box -->
</body>
</html>