Update 2025-12-19 16:23:03
This commit is contained in:
unknown
245
backend/templates/admin_logs.html
Normal file
245
backend/templates/admin_logs.html
Normal file
@@ -0,0 +1,245 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}시스템 로그 - Dell Server Info{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
/* 전체 레이아웃 */
|
||||
.editor-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 600px;
|
||||
background: #1e1e1e;
|
||||
border: 1px solid #333;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 툴바 (헤더) */
|
||||
.editor-toolbar {
|
||||
background-color: #252526;
|
||||
border-bottom: 1px solid #333;
|
||||
padding: 0.5rem 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* 에디터 본문 */
|
||||
#monaco-editor-root {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 로딩 인디케이터 */
|
||||
.editor-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
color: #d4d4d4;
|
||||
font-size: 1.1rem;
|
||||
background: #1e1e1e;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container py-4">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<h2 class="fw-bold mb-1">
|
||||
<i class="bi bi-terminal text-dark me-2"></i>시스템 로그
|
||||
</h2>
|
||||
<p class="text-muted mb-0 small">최근 생성된 1000줄의 시스템 로그를 실시간으로 확인합니다.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ url_for('admin.admin_panel') }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>돌아가기
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-container">
|
||||
<!-- Toolbar -->
|
||||
<div class="editor-toolbar">
|
||||
<div class="d-flex gap-2 align-items-center flex-wrap">
|
||||
<div class="input-group input-group-sm" style="width: 250px;">
|
||||
<span class="input-group-text bg-dark border-secondary text-light"><i
|
||||
class="bi bi-search"></i></span>
|
||||
<input type="text" id="logSearch" class="form-control bg-dark border-secondary text-light"
|
||||
placeholder="검색어 입력...">
|
||||
</div>
|
||||
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<input type="checkbox" class="btn-check" id="checkInfo" checked autocomplete="off">
|
||||
<label class="btn btn-outline-secondary text-light" for="checkInfo">INFO</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="checkWarn" checked autocomplete="off">
|
||||
<label class="btn btn-outline-warning" for="checkWarn">WARN</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="checkError" checked autocomplete="off">
|
||||
<label class="btn btn-outline-danger" for="checkError">ERROR</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-sm btn-outline-light" id="btnScrollBottom">
|
||||
<i class="bi bi-arrow-down-circle me-1"></i>맨 아래로
|
||||
</button>
|
||||
<a href="{{ url_for('admin.view_logs') }}" class="btn btn-primary btn-sm">
|
||||
<i class="bi bi-arrow-clockwise me-1"></i>새로고침
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Editor Area -->
|
||||
<div id="monaco-editor-root">
|
||||
<div class="editor-loading">
|
||||
<div class="spinner-border text-light me-3" role="status"></div>
|
||||
<div>로그 뷰어를 불러오는 중...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<!-- Monaco Editor Loader -->
|
||||
<script src="https://unpkg.com/monaco-editor@0.45.0/min/vs/loader.js"></script>
|
||||
|
||||
<script>
|
||||
// 서버에서 전달된 로그 데이터 (Python list -> JS array)
|
||||
// tojson safe 필터 사용
|
||||
const allLogs = {{ logs | tojson | safe }};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
if (typeof require === 'undefined') {
|
||||
document.querySelector('.editor-loading').innerHTML =
|
||||
'<div class="text-danger"><i class="bi bi-exclamation-triangle me-2"></i>Monaco Editor를 로드할 수 없습니다.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.45.0/min/vs' } });
|
||||
|
||||
require(['vs/editor/editor.main'], function () {
|
||||
var container = document.getElementById('monaco-editor-root');
|
||||
container.innerHTML = ''; // 로딩 제거
|
||||
|
||||
// 1. 커스텀 로그 언어 정의 (간단한 하이라이팅)
|
||||
monaco.languages.register({ id: 'simpleLog' });
|
||||
monaco.languages.setMonarchTokensProvider('simpleLog', {
|
||||
tokenizer: {
|
||||
root: [
|
||||
[/\[INFO\]|INFO:/, 'info-token'],
|
||||
[/\[WARNING\]|\[WARN\]|WARNING:|WARN:/, 'warn-token'],
|
||||
[/\[ERROR\]|ERROR:|Traceback/, 'error-token'],
|
||||
[/\[DEBUG\]|DEBUG:/, 'debug-token'],
|
||||
[/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2},\d{3}/, 'date-token'],
|
||||
[/".*?"/, 'string']
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// 2. 테마 정의
|
||||
monaco.editor.defineTheme('logTheme', {
|
||||
base: 'vs-dark',
|
||||
inherit: true,
|
||||
rules: [
|
||||
{ token: 'info-token', foreground: '4ec9b0' },
|
||||
{ token: 'warn-token', foreground: 'cca700', fontStyle: 'bold' },
|
||||
{ token: 'error-token', foreground: 'f44747', fontStyle: 'bold' },
|
||||
{ token: 'debug-token', foreground: '808080' },
|
||||
{ token: 'date-token', foreground: '569cd6' },
|
||||
],
|
||||
colors: {
|
||||
'editor.background': '#1e1e1e'
|
||||
}
|
||||
});
|
||||
|
||||
// 3. 에디터 생성
|
||||
var editor = monaco.editor.create(container, {
|
||||
value: allLogs.join('\n'),
|
||||
language: 'simpleLog',
|
||||
theme: 'logTheme',
|
||||
readOnly: true,
|
||||
automaticLayout: true,
|
||||
minimap: { enabled: true },
|
||||
fontSize: 13,
|
||||
lineHeight: 19, // 밀도 조절
|
||||
scrollBeyondLastLine: false,
|
||||
lineNumbers: 'on',
|
||||
wordWrap: 'on',
|
||||
renderLineHighlight: 'all',
|
||||
contextmenu: false,
|
||||
padding: { top: 10, bottom: 10 }
|
||||
});
|
||||
|
||||
// 4. 필터링 로직
|
||||
function updateLogs() {
|
||||
const query = document.getElementById('logSearch').value.toLowerCase();
|
||||
const showInfo = document.getElementById('checkInfo').checked;
|
||||
const showWarn = document.getElementById('checkWarn').checked;
|
||||
const showError = document.getElementById('checkError').checked;
|
||||
|
||||
const filtered = allLogs.filter(line => {
|
||||
const lower = line.toLowerCase();
|
||||
|
||||
// 레벨 체크 (매우 단순화)
|
||||
let levelMatch = false;
|
||||
|
||||
const isError = lower.includes('[error]') || lower.includes('error:') || lower.includes('traceback');
|
||||
const isWarn = lower.includes('[warning]') || lower.includes('[warn]') || lower.includes('warn:');
|
||||
const isInfo = lower.includes('[info]') || lower.includes('info:');
|
||||
|
||||
if (isError) {
|
||||
if (showError) levelMatch = true;
|
||||
} else if (isWarn) {
|
||||
if (showWarn) levelMatch = true;
|
||||
} else if (isInfo) {
|
||||
if (showInfo) levelMatch = true;
|
||||
} else {
|
||||
// 레벨 키워드가 없는 줄은 기본적으로 표시 (맥락 유지)
|
||||
levelMatch = true;
|
||||
}
|
||||
|
||||
if (!levelMatch) return false;
|
||||
|
||||
// 검색어 체크
|
||||
if (query && !lower.includes(query)) return false;
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
// 현재 스크롤 위치 저장? 아니면 항상 아래로? -> 보통 필터링하면 아래로 가는게 편함
|
||||
const currentModel = editor.getModel();
|
||||
if (currentModel) {
|
||||
currentModel.setValue(filtered.join('\n'));
|
||||
}
|
||||
// editor.revealLine(editor.getModel().getLineCount());
|
||||
}
|
||||
|
||||
// 이벤트 연결
|
||||
document.getElementById('logSearch').addEventListener('keyup', updateLogs);
|
||||
document.getElementById('checkInfo').addEventListener('change', updateLogs);
|
||||
document.getElementById('checkWarn').addEventListener('change', updateLogs);
|
||||
document.getElementById('checkError').addEventListener('change', updateLogs);
|
||||
|
||||
// 맨 아래로 버튼
|
||||
document.getElementById('btnScrollBottom').addEventListener('click', function () {
|
||||
editor.revealLine(editor.getModel().getLineCount());
|
||||
});
|
||||
|
||||
// 초기 스크롤 (약간의 지연 후)
|
||||
setTimeout(() => {
|
||||
editor.revealLine(editor.getModel().getLineCount());
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user