99 lines
5.4 KiB
HTML
99 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>DashCaddy — Logs</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<style>
|
|
body.logs-page { padding: 0; margin: 0; background: var(--bg, #0e1116); color: var(--fg, #e6e6e6); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
|
.logs-wrap { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
|
|
.logs-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card-bg, #161a22); border-radius: 8px; margin-bottom: 16px; }
|
|
.logs-top h1 { margin: 0; font-size: 1.1rem; }
|
|
.logs-tabs { display: flex; gap: 6px; margin-left: auto; }
|
|
.logs-tabs button { padding: 6px 12px; background: transparent; border: 1px solid var(--border, #2a2f3a); color: inherit; border-radius: 6px; cursor: pointer; font: inherit; font-size: .85rem; }
|
|
.logs-tabs button.active { background: var(--accent, #4f8cff); color: white; border-color: transparent; }
|
|
.logs-controls { display: flex; gap: 8px; align-items: center; padding: 10px 16px; background: var(--card-bg, #161a22); border-radius: 8px; margin-bottom: 12px; flex-wrap: wrap; }
|
|
.logs-controls select, .logs-controls input { background: var(--bg, #0e1116); color: inherit; border: 1px solid var(--border, #2a2f3a); padding: 4px 8px; border-radius: 4px; font: inherit; font-size: .85rem; }
|
|
.logs-controls button { padding: 6px 12px; background: var(--accent, #4f8cff); color: white; border: none; border-radius: 4px; cursor: pointer; font: inherit; font-size: .85rem; }
|
|
.logs-controls button.danger { background: color-mix(in srgb, #ff5555 25%, transparent); border: 1px solid #ff5555; color: #ff5555; }
|
|
.logs-meta { color: var(--muted, #8a93a6); font-size: .8rem; margin-left: auto; }
|
|
.logs-output { background: var(--card-bg, #161a22); border-radius: 8px; padding: 12px; max-height: 70vh; overflow-y: auto; font-size: .85rem; line-height: 1.4; }
|
|
.logs-output .log-entry { padding: 8px 10px; border-bottom: 1px solid var(--border, #2a2f3a); }
|
|
.logs-output .log-entry:last-child { border-bottom: none; }
|
|
.logs-output .log-entry.error { border-left: 3px solid #ff5555; }
|
|
.logs-output .log-entry.warn { border-left: 3px solid #f0b400; }
|
|
.logs-output .log-entry.info { border-left: 3px solid #4f8cff; }
|
|
.logs-output .log-entry.debug { border-left: 3px solid #8a93a6; }
|
|
.logs-output .log-timestamp { color: var(--muted, #8a93a6); margin-right: 8px; font-size: .75rem; }
|
|
.logs-output .log-level { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: .7rem; font-weight: 600; margin-right: 8px; min-width: 38px; text-align: center; }
|
|
.log-entry.error .log-level { background: #ff5555; color: white; }
|
|
.log-entry.warn .log-level { background: #f0b400; color: black; }
|
|
.log-entry.info .log-level { background: #4f8cff; color: white; }
|
|
.log-entry.debug .log-level { background: #555; color: white; }
|
|
.logs-output .log-message pre { margin: 6px 0 0; font-size: .75rem; padding: 6px 8px; background: rgba(0,0,0,0.25); border-radius: 4px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
|
|
.logs-output .empty { color: var(--muted, #8a93a6); text-align: center; padding: 40px; }
|
|
.logs-loading { color: var(--muted, #8a93a6); text-align: center; padding: 40px; }
|
|
.logs-back { padding: 4px 10px; background: transparent; border: 1px solid var(--border, #2a2f3a); color: inherit; border-radius: 4px; cursor: pointer; font: inherit; font-size: .85rem; text-decoration: none; }
|
|
.container-pick { display: flex; gap: 6px; align-items: center; }
|
|
</style>
|
|
</head>
|
|
<body class="logs-page">
|
|
<div class="logs-wrap">
|
|
<div class="logs-top">
|
|
<a href="/" class="logs-back">← Back</a>
|
|
<h1>📋 Logs</h1>
|
|
<div class="logs-tabs">
|
|
<button id="tab-error" class="active">Error log</button>
|
|
<button id="tab-container">Container</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error log controls -->
|
|
<div id="error-controls" class="logs-controls">
|
|
<label>Level:
|
|
<select id="level">
|
|
<option value="">All</option>
|
|
<option value="ERR">Errors</option>
|
|
<option value="WRN">Warnings</option>
|
|
<option value="INF">Info</option>
|
|
<option value="DBG">Debug</option>
|
|
</select>
|
|
</label>
|
|
<label>Tail:
|
|
<select id="tail">
|
|
<option value="50">50</option>
|
|
<option value="100" selected>100</option>
|
|
<option value="200">200</option>
|
|
<option value="500">500</option>
|
|
</select>
|
|
</label>
|
|
<button id="refresh">🔄 Refresh</button>
|
|
<button id="clear" class="danger">🗑️ Clear</button>
|
|
<span class="logs-meta" id="meta"></span>
|
|
</div>
|
|
|
|
<!-- Container log controls -->
|
|
<div id="container-controls" class="logs-controls" style="display:none">
|
|
<label>Container:
|
|
<select id="container-select"></select>
|
|
</label>
|
|
<label>Tail:
|
|
<select id="container-tail">
|
|
<option value="50">50</option>
|
|
<option value="200" selected>200</option>
|
|
<option value="1000">1000</option>
|
|
</select>
|
|
</label>
|
|
<button id="container-refresh">🔄 Refresh</button>
|
|
<span class="logs-meta" id="container-meta"></span>
|
|
</div>
|
|
|
|
<div class="logs-output" id="output">
|
|
<div class="logs-loading">Loading…</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/logs-page.js" defer></script>
|
|
</body>
|
|
</html> |