youna
680 lines
21 KiB
Plaintext
680 lines
21 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=utf-8"%>
|
|
|
|
<!-- 인터페이스 로그 조회 모달 -->
|
|
<div id="interfaceLogDetailModal" class="modal modal-modern">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">인터페이스 로그 조회</h2>
|
|
<span class="close-modal">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- 인터페이스 정보 요약 -->
|
|
<div class="interface-info-summary">
|
|
<div class="info-card">
|
|
<div class="info-header">
|
|
<span class="info-label">인터페이스 ID</span>
|
|
<span class="info-value" id="detail-interface-id">-</span>
|
|
</div>
|
|
<div class="info-content">
|
|
<div class="info-row">
|
|
<span class="info-label">발생시간</span>
|
|
<span class="info-value" id="detail-error-time">-</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">인스턴스</span>
|
|
<span class="info-value" id="detail-instance-name">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-card">
|
|
<div class="info-header">
|
|
<span class="info-label">오류 메시지</span>
|
|
</div>
|
|
<div class="info-content">
|
|
<div class="error-message" id="detail-error-message">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 로그 리스트 -->
|
|
<div class="log-list-container">
|
|
<div class="log-list-header">
|
|
<h3>관련 거래 로그</h3>
|
|
<div class="log-search-controls">
|
|
<div class="time-range-selector">
|
|
<span>조회 시간:</span>
|
|
<select id="log-time-range">
|
|
<option value="1" selected>±1분</option>
|
|
<option value="5">±5분</option>
|
|
<option value="10">±10분</option>
|
|
<option value="30">±30분</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn btn-primary refresh-logs-btn">
|
|
<i class="bi bi-arrow-clockwise"></i> 새로고침
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="log-table-container">
|
|
<table class="log-table" id="log-grid">
|
|
<thead>
|
|
<tr>
|
|
<th class="narrow-column">처리번호</th>
|
|
<th>거래키</th>
|
|
<th>업무구분</th>
|
|
<th>서비스명</th>
|
|
<th>수신시간</th>
|
|
<th>처리시간</th>
|
|
<th>상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="log-grid-body">
|
|
<!-- 로그 데이터가 동적으로 추가됩니다 -->
|
|
<tr>
|
|
<td colspan="7" class="empty-message">조회 버튼을 클릭하여 관련 로그를 검색하세요.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary close-modal-btn">닫기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* 모달 기본 스타일 */
|
|
.modal-modern {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.modal-modern .modal-content {
|
|
position: relative;
|
|
background-color: #fff;
|
|
margin: 2% auto;
|
|
padding: 0;
|
|
width: 95%;
|
|
max-width: 1200px;
|
|
border: none;
|
|
border-radius: 16px;
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
|
animation: modalSlideUp 0.3s;
|
|
}
|
|
|
|
@keyframes modalSlideUp {
|
|
from {opacity: 0; transform: translateY(30px);}
|
|
to {opacity: 1; transform: translateY(0);}
|
|
}
|
|
|
|
.modal-modern .modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1.5rem 2rem;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
background-color: #f8f9fa;
|
|
border-radius: 16px 16px 0 0;
|
|
}
|
|
|
|
.modal-modern .modal-title {
|
|
margin: 0;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.modal-modern .close-modal {
|
|
color: #aaa;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.modal-modern .close-modal:hover {
|
|
color: #333;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.modal-modern .modal-body {
|
|
padding: 1.5rem 2rem;
|
|
max-height: 75vh;
|
|
overflow-y: auto;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.modal-modern .modal-footer {
|
|
padding: 1.2rem 2rem;
|
|
border-top: 1px solid #e0e0e0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 1rem;
|
|
border-radius: 0 0 16px 16px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* 인터페이스 정보 요약 스타일 */
|
|
.interface-info-summary {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.info-card {
|
|
background-color: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.info-header {
|
|
padding: 1rem;
|
|
background-color: #007bff;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.info-header .info-label {
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.info-header .info-value {
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.info-content {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.info-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.info-row .info-label {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.info-row .info-value {
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.error-message {
|
|
padding: 0.5rem;
|
|
background-color: rgba(220, 53, 69, 0.1);
|
|
border-radius: 6px;
|
|
color: #dc3545;
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
max-height: 100px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* 로그 리스트 스타일 */
|
|
.log-list-container {
|
|
background-color: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.log-list-header {
|
|
padding: 1rem;
|
|
background-color: #f8f9fa;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.log-list-header h3 {
|
|
margin: 0;
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.log-search-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.time-range-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.time-range-selector select {
|
|
padding: 0.25rem 0.5rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.log-table-container {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.log-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.log-table th {
|
|
top: 0;
|
|
background-color: #007bff;
|
|
color: white;
|
|
padding: 0.75rem;
|
|
text-align: left;
|
|
font-weight: 800;
|
|
z-index: 10;
|
|
}
|
|
|
|
.log-table td {
|
|
padding: 0.75rem;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.log-table tbody tr:hover {
|
|
background-color: rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
.log-table .empty-message {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
color: #888;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* 로딩 인디케이터 */
|
|
.loading-indicator {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100px;
|
|
}
|
|
|
|
.loading-spinner {
|
|
border: 4px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 50%;
|
|
border-top: 4px solid #007bff;
|
|
width: 30px;
|
|
height: 30px;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* 버튼 스타일 */
|
|
.btn {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #0069d9;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #5a6268;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* 오류 상태 표시 */
|
|
.table-status-badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
min-width: 60px;
|
|
}
|
|
|
|
.table-status-error {
|
|
background-color: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
.table-status-normal {
|
|
background-color: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
.log-table th.narrow-column {
|
|
width: 80px;
|
|
}
|
|
|
|
.highlight-row {
|
|
background-color: rgba(0, 123, 255, 0.1);
|
|
}
|
|
|
|
/* 반응형 설정 */
|
|
@media (max-width: 992px) {
|
|
.interface-info-summary {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.modal-modern .modal-content {
|
|
width: 98%;
|
|
margin: 1% auto;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function() {
|
|
// 모달 요소
|
|
const modal = document.getElementById('interfaceLogDetailModal');
|
|
const closeButtons = modal.querySelectorAll('.close-modal, .close-modal-btn');
|
|
const refreshButton = modal.querySelector('.refresh-logs-btn');
|
|
const timeRangeSelect = document.getElementById('log-time-range');
|
|
|
|
// 데이터 상태
|
|
let currentInterfaceId = '';
|
|
let currentErrorTime = '';
|
|
let currentInstanceName = '';
|
|
let currentErrorMessage = '';
|
|
let currentServiceType = '';
|
|
|
|
// 모달 닫기 이벤트
|
|
closeButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
modal.style.display = 'none';
|
|
});
|
|
});
|
|
|
|
// 모달 외부 클릭 시 닫기
|
|
window.addEventListener('click', (event) => {
|
|
if (event.target === modal) {
|
|
modal.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// 새로고침 버튼 이벤트
|
|
refreshButton.addEventListener('click', () => {
|
|
loadInterfaceLogs();
|
|
});
|
|
|
|
// 로그 시간대 변경 이벤트
|
|
timeRangeSelect.addEventListener('change', () => {
|
|
loadInterfaceLogs();
|
|
});
|
|
|
|
// 인터페이스 로그 로드 함수
|
|
function loadInterfaceLogs() {
|
|
if (!currentInterfaceId || !currentErrorTime) {
|
|
showEmptyLogGrid("인터페이스 정보가 올바르지 않습니다.");
|
|
return;
|
|
}
|
|
|
|
// 로딩 표시
|
|
showLoadingLogGrid();
|
|
|
|
// 시간 범위 계산
|
|
const timeRangeMinutes = parseInt(timeRangeSelect.value);
|
|
const errorDate = parseErrorDateTime(currentErrorTime);
|
|
|
|
if (!errorDate) {
|
|
showEmptyLogGrid("시간 형식이 올바르지 않습니다.");
|
|
return;
|
|
}
|
|
|
|
// 시작 시간과 종료 시간 계산 (±timeRangeMinutes 분)
|
|
const startTime = new Date(errorDate.getTime() - timeRangeMinutes * 60 * 1000);
|
|
const endTime = new Date(errorDate.getTime() + timeRangeMinutes * 60 * 1000);
|
|
|
|
// API 호출 시간 형식으로 변환 (YYYYMMDDHHMMSS)
|
|
const startTimeStr = formatDateTimeForApi(startTime);
|
|
const endTimeStr = formatDateTimeForApi(endTime);
|
|
|
|
// ModernDashboardApi를 사용하여 로그 데이터 가져오기
|
|
ModernDashboardApi.getInterfaceLogs(
|
|
currentInterfaceId,
|
|
startTimeStr,
|
|
endTimeStr,
|
|
currentServiceType,
|
|
function(response) {
|
|
if (response && response.rows) {
|
|
updateLogGrid(response.rows);
|
|
} else {
|
|
showEmptyLogGrid("조회된 로그가 없습니다.");
|
|
}
|
|
},
|
|
function(xhr, status, error) {
|
|
console.error("로그 데이터 로드 실패:", error);
|
|
showEmptyLogGrid("로그 데이터를 불러오는 중 오류가 발생했습니다.");
|
|
}
|
|
);
|
|
}
|
|
|
|
// 로그 그리드 업데이트
|
|
function updateLogGrid(logs) {
|
|
const tbody = document.getElementById('log-grid-body');
|
|
|
|
if (!logs || logs.length === 0) {
|
|
showEmptyLogGrid("조회된 로그가 없습니다.");
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
|
|
logs.forEach(log => {
|
|
const isError = log.ERRYN === 'Y';
|
|
|
|
// 시간 형식 변환 (YYYYMMDDHHMMSS -> YYYY-MM-DD HH:MM:SS)
|
|
const recvTime = formatDateTime(log.MSGDPSTYMS_TMP);
|
|
const procTime = formatDateTime(log.MSGPRCSSYMS);
|
|
|
|
html += '<tr>' +
|
|
'<td>' + (log.LOGPRCSSSERNO || '-') + '</td>' +
|
|
'<td>' + (log.KEYMGTMSGCTNT || '-') + '</td>' +
|
|
'<td>' + (log.EAIBZWKDSTCD_TMP || '-') + '</td>' +
|
|
'<td>' + (log.EAISVCNAME || '-') + '</td>' +
|
|
'<td>' + (recvTime || '-') + '</td>' +
|
|
'<td>' + (procTime || '-') + '</td>' +
|
|
'<td><span class="table-status-badge ' + (isError ? 'table-status-error' : 'table-status-normal') + '">' +
|
|
(isError ? '오류' : '정상') + '</span>' +
|
|
'<input type="hidden" value="' + (log.EAISVCSERNO_TMP || '') + '"></td>' +
|
|
'</tr>';
|
|
});
|
|
|
|
tbody.innerHTML = html;
|
|
|
|
// 현재 인터페이스 ID를 포함한 행 강조 표시
|
|
highlightRows(currentInterfaceId);
|
|
}
|
|
|
|
// 특정 인터페이스 ID를 포함한 행 강조 표시
|
|
function highlightRows(interfaceId) {
|
|
if (!interfaceId) return;
|
|
|
|
const tbody = document.getElementById('log-grid-body');
|
|
const rows = tbody.querySelectorAll('tr');
|
|
|
|
rows.forEach(row => {
|
|
const cells = row.querySelectorAll('td');
|
|
if (cells.length > 1) {
|
|
const keyCell = cells[1].textContent;
|
|
if (keyCell && keyCell.includes(interfaceId)) {
|
|
row.classList.add('highlight-row');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 로딩 중 표시
|
|
function showLoadingLogGrid() {
|
|
const tbody = document.getElementById('log-grid-body');
|
|
tbody.innerHTML =
|
|
'<tr>' +
|
|
'<td colspan="7">' +
|
|
'<div class="loading-indicator">' +
|
|
'<div class="loading-spinner"></div>' +
|
|
'</div>' +
|
|
'</td>' +
|
|
'</tr>';
|
|
}
|
|
|
|
// 빈 그리드 표시
|
|
function showEmptyLogGrid(message) {
|
|
const tbody = document.getElementById('log-grid-body');
|
|
tbody.innerHTML =
|
|
'<tr>' +
|
|
'<td colspan="7" class="empty-message">' + (message || '조회된 데이터가 없습니다.') + '</td>' +
|
|
'</tr>';
|
|
}
|
|
|
|
// 시간 문자열 파싱 (예: "0312 10:52:32.009")
|
|
function parseErrorDateTime(dateTimeStr) {
|
|
try {
|
|
if (!dateTimeStr) return new Date();
|
|
|
|
// "0312 10:52:32.009" 형식 처리
|
|
if (dateTimeStr.includes(' ') && dateTimeStr.length >= 16) {
|
|
const datePart = dateTimeStr.split(' ')[0]; // "0312"
|
|
const timePart = dateTimeStr.split(' ')[1].split('.')[0]; // "10:52:32"
|
|
|
|
const month = parseInt(datePart.substring(0, 2));
|
|
const day = parseInt(datePart.substring(2, 4));
|
|
|
|
const timeParts = timePart.split(':');
|
|
const hour = parseInt(timeParts[0]);
|
|
const minute = parseInt(timeParts[1]);
|
|
const second = parseInt(timeParts[2]);
|
|
|
|
// 현재 연도 사용
|
|
const currentYear = new Date().getFullYear();
|
|
return new Date(currentYear, month - 1, day, hour, minute, second);
|
|
}
|
|
|
|
// 기존 "2023-03-12 15:30:45" 형식 처리 (이전 코드 유지)
|
|
const parts = dateTimeStr.split(/[- :]/);
|
|
if (parts.length >= 6) {
|
|
return new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4], parts[5]);
|
|
}
|
|
return new Date();
|
|
} catch (e) {
|
|
console.error("날짜 파싱 오류:", e);
|
|
return new Date();
|
|
}
|
|
}
|
|
|
|
// API 호출용 날짜 형식 변환 (YYYYMMDDHHMMSS)
|
|
function formatDateTimeForApi(date) {
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
|
|
return '' + year + month + day + hours + minutes + seconds;
|
|
}
|
|
|
|
// 화면 표시용 날짜 형식 변환 (YYYY-MM-DD HH:MM:SS)
|
|
function formatDateTime(dateTimeStr) {
|
|
if (!dateTimeStr || dateTimeStr.length < 14) return '';
|
|
|
|
const year = dateTimeStr.substr(0, 4);
|
|
const month = dateTimeStr.substr(4, 2);
|
|
const day = dateTimeStr.substr(6, 2);
|
|
const hour = dateTimeStr.substr(8, 2);
|
|
const minute = dateTimeStr.substr(10, 2);
|
|
const second = dateTimeStr.substr(12, 2);
|
|
|
|
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
|
|
}
|
|
|
|
// 모달 열기 함수 (전역 스코프에 노출)
|
|
window.openInterfaceLogDetailModal = function(interfaceId, errorTime, instanceName, errorMessage, serviceType) {
|
|
// 데이터 설정
|
|
currentInterfaceId = interfaceId || '';
|
|
currentErrorTime = errorTime || '';
|
|
currentInstanceName = instanceName || '';
|
|
currentErrorMessage = errorMessage || '';
|
|
currentServiceType = serviceType || '';
|
|
|
|
// 조회 기준 일/시 분리해서 표시
|
|
let formattedErrorTime = currentErrorTime;
|
|
if (currentErrorTime && currentErrorTime.includes(' ')) {
|
|
const datePart = currentErrorTime.split(' ')[0]; // "0312"
|
|
const timePart = currentErrorTime.split(' ')[1]; // "10:52:32.009"
|
|
|
|
// 월/일 형식으로 변환
|
|
const month = datePart.substring(0, 2);
|
|
const day = datePart.substring(2, 4);
|
|
|
|
formattedErrorTime = month + '월 ' + day + '일 ' + timePart;
|
|
}
|
|
|
|
// UI 업데이트
|
|
document.getElementById('detail-interface-id').textContent = currentInterfaceId;
|
|
document.getElementById('detail-error-time').textContent = formattedErrorTime;
|
|
document.getElementById('detail-instance-name').textContent = currentInstanceName;
|
|
document.getElementById('detail-error-message').textContent = currentErrorMessage;
|
|
|
|
// 모달 표시
|
|
modal.style.display = 'block';
|
|
|
|
// 로그 데이터 로드
|
|
loadInterfaceLogs();
|
|
};
|
|
})();
|
|
</script> |