91 lines
3.6 KiB
HTML
91 lines
3.6 KiB
HTML
{{template "admin_layout" .}}
|
|
{{define "title"}}Logs{{end}}
|
|
{{define "content"}}
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h1 class="text-xl font-bold">Logs</h1>
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<span id="status" class="text-gray-400">Connecting...</span>
|
|
<button onclick="toggleScroll()" id="scrollBtn" class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-50 text-xs">Auto-scroll: ON</button>
|
|
<button onclick="clearLog()" class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-50 text-xs">Clear</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-1 mb-2" role="tablist">
|
|
<button onclick="switchTab('wppackages')" id="tab-wppackages" role="tab" class="px-4 py-2 text-sm font-medium rounded-t border border-b-0 border-gray-300 bg-white">wppackages.log</button>
|
|
<button onclick="switchTab('pipeline')" id="tab-pipeline" role="tab" class="px-4 py-2 text-sm font-medium rounded-t border border-b-0 border-gray-200 bg-gray-100 text-gray-500">pipeline.log</button>
|
|
<button onclick="switchTab('check-status')" id="tab-check-status" role="tab" class="px-4 py-2 text-sm font-medium rounded-t border border-b-0 border-gray-200 bg-gray-100 text-gray-500">check-status.log</button>
|
|
</div>
|
|
<div id="log-container" style="background:#111827; color:#f3f4f6; font-family:ui-monospace,monospace; font-size:0.75rem; line-height:1.625; border:1px solid #d1d5db; border-radius:0 0.25rem 0.25rem 0.25rem; height:calc(100vh - 260px); overflow-y:scroll; overflow-x:hidden;">
|
|
<pre id="log-output" style="padding:1rem; margin:0; white-space:pre-wrap; word-break:break-word;"></pre>
|
|
</div>
|
|
<script>
|
|
let currentTab = 'wppackages';
|
|
let eventSource = null;
|
|
let autoScroll = true;
|
|
const maxLines = 5000;
|
|
|
|
function switchTab(tab) {
|
|
currentTab = tab;
|
|
document.querySelectorAll('[role="tab"]').forEach(function(el) {
|
|
if (el.id === 'tab-' + tab) {
|
|
el.className = 'px-4 py-2 text-sm font-medium rounded-t border border-b-0 border-gray-300 bg-white';
|
|
} else {
|
|
el.className = 'px-4 py-2 text-sm font-medium rounded-t border border-b-0 border-gray-200 bg-gray-100 text-gray-500';
|
|
}
|
|
});
|
|
document.getElementById('log-output').textContent = '';
|
|
connect();
|
|
}
|
|
|
|
function connect() {
|
|
if (eventSource) {
|
|
eventSource.close();
|
|
}
|
|
const status = document.getElementById('status');
|
|
status.textContent = 'Connecting...';
|
|
status.className = 'text-gray-400';
|
|
|
|
eventSource = new EventSource('/admin/logs/stream?file=' + currentTab);
|
|
eventSource.onopen = function() {
|
|
status.textContent = 'Connected';
|
|
status.className = 'text-green-600';
|
|
};
|
|
eventSource.onmessage = function(e) {
|
|
const output = document.getElementById('log-output');
|
|
const container = document.getElementById('log-container');
|
|
output.textContent += e.data + '\n';
|
|
|
|
// Trim if too many lines
|
|
const lines = output.textContent.split('\n');
|
|
if (lines.length > maxLines) {
|
|
output.textContent = lines.slice(lines.length - maxLines).join('\n');
|
|
}
|
|
|
|
if (autoScroll) {
|
|
container.scrollTop = container.scrollHeight;
|
|
}
|
|
};
|
|
eventSource.onerror = function() {
|
|
status.textContent = 'Disconnected';
|
|
status.className = 'text-red-500';
|
|
eventSource.close();
|
|
setTimeout(connect, 3000);
|
|
};
|
|
}
|
|
|
|
function toggleScroll() {
|
|
autoScroll = !autoScroll;
|
|
const btn = document.getElementById('scrollBtn');
|
|
btn.textContent = 'Auto-scroll: ' + (autoScroll ? 'ON' : 'OFF');
|
|
if (autoScroll) {
|
|
const container = document.getElementById('log-container');
|
|
container.scrollTop = container.scrollHeight;
|
|
}
|
|
}
|
|
|
|
function clearLog() {
|
|
document.getElementById('log-output').textContent = '';
|
|
}
|
|
|
|
connect();
|
|
</script>
|
|
{{end}}
|
