822 lines
24 KiB
HTML
822 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Logs - Admin</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script
|
|
src="https://kit.fontawesome.com/a82697a287.js"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<style>
|
|
body {
|
|
background: linear-gradient(135deg, #f6f8fc 0%, #e9ecef 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.log-item {
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border: 1px solid rgba(226, 232, 240, 0.7);
|
|
}
|
|
|
|
.log-text {
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.log-item:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.log-item:hover .log-text {
|
|
white-space: normal;
|
|
}
|
|
|
|
.custom-select {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #4f46e5;
|
|
border: 2px solid rgba(79, 70, 229, 0.2);
|
|
font-weight: 600;
|
|
padding-right: 2.5rem;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234f46e5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
background-size: 1.25rem;
|
|
}
|
|
|
|
.custom-select:hover {
|
|
border-color: #4f46e5;
|
|
background-color: rgba(79, 70, 229, 0.05);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.custom-select:focus {
|
|
outline: none;
|
|
border-color: #4f46e5;
|
|
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
|
|
}
|
|
|
|
.refresh-button {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #4f46e5;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.4s ease;
|
|
border: 2px solid rgba(79, 70, 229, 0.2);
|
|
font-size: 1.25rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.refresh-button::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
45deg,
|
|
rgba(79, 70, 229, 0.1) 0%,
|
|
rgba(79, 70, 229, 0) 100%
|
|
);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.refresh-button:hover {
|
|
border-color: #4f46e5;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 16px rgba(79, 70, 229, 0.15);
|
|
}
|
|
|
|
.refresh-button:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.refresh-button:hover i {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.refresh-button i {
|
|
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.controls-wrapper {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
padding: 0.5rem;
|
|
border-radius: 20px;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.login-container {
|
|
max-width: 400px;
|
|
margin: 100px auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border-radius: 12px;
|
|
border: none;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.input-field {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
transition: all 0.3s ease;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.input-field:focus {
|
|
outline: none;
|
|
border-color: #4f46e5;
|
|
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.loading {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.error-message {
|
|
background: #fee2e2;
|
|
border: 1px solid #fecaca;
|
|
color: #dc2626;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* Tab Styles */
|
|
.tab-button {
|
|
padding: 12px 24px;
|
|
border: none;
|
|
background: transparent;
|
|
color: #6b7280;
|
|
font-weight: 500;
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tab-button:hover {
|
|
background: rgba(79, 70, 229, 0.05);
|
|
color: #4f46e5;
|
|
}
|
|
|
|
.tab-button.active {
|
|
background: rgba(79, 70, 229, 0.1);
|
|
color: #4f46e5;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.badge {
|
|
background: #e5e7eb;
|
|
color: #6b7280;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.badge.query {
|
|
background: #dbeafe;
|
|
color: #1e40af;
|
|
}
|
|
|
|
.badge.app {
|
|
background: #f0fdf4;
|
|
color: #166534;
|
|
}
|
|
|
|
.badge.error {
|
|
background: #fef2f2;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.badge.info {
|
|
background: #f0f9ff;
|
|
color: #0369a1;
|
|
}
|
|
|
|
.badge.warning {
|
|
background: #fefce8;
|
|
color: #ca8a04;
|
|
}
|
|
|
|
.log-time {
|
|
font-size: 0.75rem;
|
|
color: #6b7280;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.log-level {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 6px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.level-info {
|
|
background: #dbeafe;
|
|
color: #1e40af;
|
|
}
|
|
.level-error {
|
|
background: #fecaca;
|
|
color: #dc2626;
|
|
}
|
|
.level-warning {
|
|
background: #fef3c7;
|
|
color: #d97706;
|
|
}
|
|
.level-debug {
|
|
background: #e5e7eb;
|
|
color: #374151;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-sans">
|
|
<!-- Login Section -->
|
|
<div
|
|
id="loginSection"
|
|
class="max-w-md mx-auto p-8 glass-effect rounded-3xl shadow-2xl mt-12 login-container"
|
|
>
|
|
<div class="text-center mb-8">
|
|
<h1
|
|
class="text-3xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent mb-2"
|
|
>
|
|
Admin Logs
|
|
</h1>
|
|
<p class="text-gray-500">Login to access system logs</p>
|
|
</div>
|
|
|
|
<form id="loginForm" onsubmit="login(event)">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label
|
|
for="email"
|
|
class="block text-sm font-medium text-gray-700 mb-2"
|
|
>Email</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="email"
|
|
required
|
|
placeholder="admin@example.com"
|
|
class="input-field"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="password"
|
|
class="block text-sm font-medium text-gray-700 mb-2"
|
|
>Password</label
|
|
>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
required
|
|
placeholder="Enter your password"
|
|
class="input-field"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" id="loginBtn" class="btn-primary mt-6">
|
|
<span id="loginText">Login</span>
|
|
<span id="loginLoading" class="hidden">
|
|
<i class="fa-solid fa-spinner fa-spin"></i> Logging in...
|
|
</span>
|
|
</button>
|
|
</form>
|
|
|
|
<div id="errorMessage" class="error-message hidden"></div>
|
|
</div>
|
|
|
|
<!-- Logs Section (Hidden until login) -->
|
|
<div id="logsSection" class="hidden">
|
|
<div
|
|
class="max-w-7xl mx-auto p-8 glass-effect rounded-3xl shadow-2xl mt-12 mb-12"
|
|
>
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div class="flex items-center gap-4">
|
|
<div>
|
|
<h1
|
|
class="text-4xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent"
|
|
>
|
|
System Logs
|
|
</h1>
|
|
<p class="text-gray-500 mt-2">
|
|
Monitor query and application logs
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<div class="controls-wrapper">
|
|
<button
|
|
onclick="refreshLogs()"
|
|
class="refresh-button"
|
|
title="Refresh logs"
|
|
>
|
|
<i class="fa-solid fa-arrows-rotate"></i>
|
|
</button>
|
|
|
|
<div class="relative">
|
|
<select
|
|
id="month"
|
|
onchange="changeMonth()"
|
|
class="custom-select w-48 px-6 py-3 rounded-xl text-sm font-medium"
|
|
>
|
|
<option value="january">January</option>
|
|
<option value="february">February</option>
|
|
<option value="march">March</option>
|
|
<option value="april">April</option>
|
|
<option value="may">May</option>
|
|
<option value="june">June</option>
|
|
<option value="july">July</option>
|
|
<option value="august">August</option>
|
|
<option value="september">September</option>
|
|
<option value="october">October</option>
|
|
<option value="november">November</option>
|
|
<option value="december">December</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onclick="logout()"
|
|
class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-xl transition-all flex items-center gap-2"
|
|
>
|
|
<i class="fa-solid fa-right-from-bracket"></i>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs Navigation -->
|
|
<div class="flex gap-2 mb-8 bg-gray-100 p-1 rounded-xl w-fit">
|
|
<button
|
|
id="queryTab"
|
|
class="tab-button active flex items-center"
|
|
onclick="switchTab('query')"
|
|
>
|
|
<i class="fa-solid fa-database mr-2"></i>
|
|
Query Logs
|
|
<span id="queryCount" class="badge query">0</span>
|
|
</button>
|
|
<button
|
|
id="appTab"
|
|
class="tab-button flex items-center"
|
|
onclick="switchTab('app')"
|
|
>
|
|
<i class="fa-solid fa-code mr-2"></i>
|
|
App Logs
|
|
<span id="appCount" class="badge app">0</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Query Logs Tab -->
|
|
<div id="queryTabContent" class="tab-content active">
|
|
<div id="queryLogsContent">
|
|
<!-- Query logs will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- App Logs Tab -->
|
|
<div id="appTabContent" class="tab-content">
|
|
<div id="appLogsContent">
|
|
<!-- App logs will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API_BASE = "/api/v1/auth";
|
|
const LOGS_BASE = "/api/v1/logs";
|
|
let currentTab = "query";
|
|
|
|
// Check if already logged in on page load
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const token = localStorage.getItem("admin_token");
|
|
if (token) {
|
|
showLogsSection();
|
|
loadLogs();
|
|
} else {
|
|
showLoginSection();
|
|
}
|
|
|
|
// Set current month as default
|
|
const currentMonthIndex = new Date().getMonth();
|
|
const months = [
|
|
"january",
|
|
"february",
|
|
"march",
|
|
"april",
|
|
"may",
|
|
"june",
|
|
"july",
|
|
"august",
|
|
"september",
|
|
"october",
|
|
"november",
|
|
"december",
|
|
];
|
|
document.getElementById("month").value = months[currentMonthIndex];
|
|
});
|
|
|
|
function switchTab(tab) {
|
|
// Update tab buttons
|
|
document.getElementById("queryTab").classList.remove("active");
|
|
document.getElementById("appTab").classList.remove("active");
|
|
document.getElementById(tab + "Tab").classList.add("active");
|
|
|
|
// Update tab content
|
|
document.getElementById("queryTabContent").classList.remove("active");
|
|
document.getElementById("appTabContent").classList.remove("active");
|
|
document.getElementById(tab + "TabContent").classList.add("active");
|
|
|
|
currentTab = tab;
|
|
}
|
|
|
|
async function login(event) {
|
|
event.preventDefault();
|
|
|
|
const email = document.getElementById("email").value;
|
|
const password = document.getElementById("password").value;
|
|
const loginBtn = document.getElementById("loginBtn");
|
|
const loginText = document.getElementById("loginText");
|
|
const loginLoading = document.getElementById("loginLoading");
|
|
const errorMessage = document.getElementById("errorMessage");
|
|
|
|
// Show loading state
|
|
loginBtn.disabled = true;
|
|
loginText.classList.add("hidden");
|
|
loginLoading.classList.remove("hidden");
|
|
errorMessage.classList.add("hidden");
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/login`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ login: email, password: password }),
|
|
});
|
|
|
|
const raw = await response.text();
|
|
let data = null;
|
|
try {
|
|
data = JSON.parse(raw);
|
|
} catch (e) {
|
|
console.warn("Non-JSON response:", raw);
|
|
}
|
|
|
|
console.log("Data response login:", data || raw);
|
|
|
|
if (!response.ok) {
|
|
const message =
|
|
(data && data.message) || `Request failed (${response.status})`;
|
|
throw new Error(message);
|
|
}
|
|
|
|
const token =
|
|
(data && data.access_token) ||
|
|
(data && data.data && data.data.access_token);
|
|
|
|
if (!token) {
|
|
throw new Error("Login succeeded but no access token returned");
|
|
}
|
|
|
|
localStorage.setItem("admin_token", token);
|
|
showLogsSection();
|
|
loadLogs();
|
|
} catch (error) {
|
|
errorMessage.textContent = error.message;
|
|
errorMessage.classList.remove("hidden");
|
|
} finally {
|
|
loginBtn.disabled = false;
|
|
loginText.classList.remove("hidden");
|
|
loginLoading.classList.add("hidden");
|
|
}
|
|
}
|
|
|
|
function showLoginSection() {
|
|
document.getElementById("loginSection").classList.remove("hidden");
|
|
document.getElementById("logsSection").classList.add("hidden");
|
|
}
|
|
|
|
function showLogsSection() {
|
|
document.getElementById("loginSection").classList.add("hidden");
|
|
document.getElementById("logsSection").classList.remove("hidden");
|
|
}
|
|
|
|
async function loadLogs(month = null) {
|
|
const queryLogsContent = document.getElementById("queryLogsContent");
|
|
const appLogsContent = document.getElementById("appLogsContent");
|
|
const token = localStorage.getItem("admin_token");
|
|
|
|
if (!token) {
|
|
showLoginSection();
|
|
return;
|
|
}
|
|
|
|
const selectedMonth = month || document.getElementById("month").value;
|
|
|
|
try {
|
|
// Show loading for both tabs
|
|
queryLogsContent.innerHTML = `
|
|
<div class="text-center py-8">
|
|
<i class="fa-solid fa-spinner fa-spin text-2xl text-indigo-600 mb-3"></i>
|
|
<p class="text-gray-500">Loading query logs...</p>
|
|
</div>
|
|
`;
|
|
|
|
appLogsContent.innerHTML = `
|
|
<div class="text-center py-8">
|
|
<i class="fa-solid fa-spinner fa-spin text-2xl text-indigo-600 mb-3"></i>
|
|
<p class="text-gray-500">Loading app logs...</p>
|
|
</div>
|
|
`;
|
|
|
|
const response = await fetch(`${LOGS_BASE}/${selectedMonth}`, {
|
|
headers: {
|
|
Accept: "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
});
|
|
|
|
const raw = await response.text();
|
|
let payload = null;
|
|
try {
|
|
payload = JSON.parse(raw);
|
|
} catch (e) {
|
|
payload = raw;
|
|
console.warn("Non-JSON logs response:", raw);
|
|
}
|
|
|
|
if (response.status === 401 || response.status === 403) {
|
|
localStorage.removeItem("admin_token");
|
|
showLoginSection();
|
|
throw new Error("Session expired. Please login again.");
|
|
}
|
|
|
|
if (!response.ok) {
|
|
const message =
|
|
(payload && payload.message) ||
|
|
`Request failed (${response.status})`;
|
|
throw new Error(message);
|
|
}
|
|
|
|
// Extract logs from response
|
|
let queryLogs = [];
|
|
let appLogs = [];
|
|
|
|
if (payload && payload.data) {
|
|
queryLogs = payload.data.query_logs || [];
|
|
appLogs = payload.data.app_logs || [];
|
|
} else if (payload) {
|
|
queryLogs = payload.query_logs || [];
|
|
appLogs = payload.app_logs || [];
|
|
}
|
|
|
|
console.log("Query logs count:", queryLogs.length);
|
|
console.log("App logs count:", appLogs.length);
|
|
console.log("App logs sample:", appLogs.slice(0, 3));
|
|
|
|
// Update badge counts
|
|
document.getElementById("queryCount").textContent = queryLogs.length;
|
|
document.getElementById("appCount").textContent = appLogs.length;
|
|
|
|
displayQueryLogs(queryLogs);
|
|
displayAppLogs(appLogs);
|
|
} catch (error) {
|
|
const errorHTML = `
|
|
<div class="error-message text-center">
|
|
<i class="fa-solid fa-exclamation-triangle mr-2"></i>
|
|
${error.message}
|
|
</div>
|
|
`;
|
|
queryLogsContent.innerHTML = errorHTML;
|
|
appLogsContent.innerHTML = errorHTML;
|
|
}
|
|
}
|
|
|
|
function displayQueryLogs(logs) {
|
|
const queryLogsContent = document.getElementById("queryLogsContent");
|
|
queryLogsContent.innerHTML = "";
|
|
|
|
if (!logs || logs.length === 0) {
|
|
queryLogsContent.innerHTML = `
|
|
<div class="p-8 glass-effect rounded-2xl text-center">
|
|
<i class="fa-solid fa-database text-4xl text-gray-300 mb-3"></i>
|
|
<p class="text-gray-500">No query logs found for this month.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const ul = document.createElement("ul");
|
|
ul.className = "space-y-4";
|
|
|
|
logs.forEach((log, index) => {
|
|
const li = document.createElement("li");
|
|
li.className =
|
|
"log-item p-4 glass-effect rounded-xl hover:bg-blue-50 transition-all border-l-4 border-blue-500";
|
|
|
|
const pre = document.createElement("pre");
|
|
pre.className =
|
|
"text-sm whitespace-pre-wrap break-words log-text font-mono";
|
|
pre.textContent =
|
|
typeof log === "string" ? log : JSON.stringify(log, null, 2);
|
|
|
|
li.appendChild(pre);
|
|
ul.appendChild(li);
|
|
});
|
|
|
|
queryLogsContent.appendChild(ul);
|
|
}
|
|
|
|
function displayAppLogs(logs) {
|
|
const appLogsContent = document.getElementById("appLogsContent");
|
|
appLogsContent.innerHTML = "";
|
|
|
|
if (!logs || logs.length === 0) {
|
|
appLogsContent.innerHTML = `
|
|
<div class="p-8 glass-effect rounded-2xl text-center">
|
|
<i class="fa-solid fa-code text-4xl text-gray-300 mb-3"></i>
|
|
<p class="text-gray-500">No app logs found for this month.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const ul = document.createElement("ul");
|
|
ul.className = "space-y-4";
|
|
|
|
logs.forEach((logEntry) => {
|
|
if (!logEntry || logEntry.trim() === "") return;
|
|
|
|
const li = document.createElement("li");
|
|
li.className =
|
|
"log-item p-4 glass-effect rounded-xl transition-all border-l-4";
|
|
|
|
try {
|
|
// Parse JSON log entry
|
|
const log = JSON.parse(logEntry);
|
|
const logLevel = log.level || "info";
|
|
const timestamp = log.time || "";
|
|
const message = log.msg || "";
|
|
const fields = log.fields || {};
|
|
|
|
// Determine border color based on log level
|
|
let borderColor = "border-green-500";
|
|
let hoverColor = "hover:bg-green-50";
|
|
let levelClass = "level-info";
|
|
|
|
if (logLevel === "error") {
|
|
borderColor = "border-red-500";
|
|
hoverColor = "hover:bg-red-50";
|
|
levelClass = "level-error";
|
|
} else if (logLevel === "warning") {
|
|
borderColor = "border-yellow-500";
|
|
hoverColor = "hover:bg-yellow-50";
|
|
levelClass = "level-warning";
|
|
} else if (logLevel === "debug") {
|
|
borderColor = "border-gray-500";
|
|
hoverColor = "hover:bg-gray-50";
|
|
levelClass = "level-debug";
|
|
}
|
|
|
|
li.className += ` ${borderColor} ${hoverColor}`;
|
|
|
|
// Create header with timestamp and level
|
|
const header = document.createElement("div");
|
|
header.className = "flex items-center justify-between mb-2";
|
|
|
|
const timeDiv = document.createElement("div");
|
|
timeDiv.className = "log-time";
|
|
timeDiv.textContent = timestamp;
|
|
|
|
const levelDiv = document.createElement("div");
|
|
levelDiv.className = `log-level ${levelClass}`;
|
|
levelDiv.textContent = logLevel.toUpperCase();
|
|
|
|
header.appendChild(timeDiv);
|
|
header.appendChild(levelDiv);
|
|
|
|
// Create message div
|
|
const messageDiv = document.createElement("div");
|
|
messageDiv.className = "text-sm font-medium mb-2";
|
|
messageDiv.textContent = message;
|
|
|
|
// Create fields pre if exists
|
|
let fieldsContent = "";
|
|
if (Object.keys(fields).length > 0) {
|
|
const fieldsPre = document.createElement("pre");
|
|
fieldsPre.className =
|
|
"text-xs bg-gray-100 p-2 rounded mt-2 overflow-x-auto";
|
|
fieldsPre.textContent = JSON.stringify(fields, null, 2);
|
|
fieldsContent = fieldsPre.outerHTML;
|
|
}
|
|
|
|
li.innerHTML = `
|
|
${header.outerHTML}
|
|
${messageDiv.outerHTML}
|
|
${fieldsContent}
|
|
`;
|
|
} catch (e) {
|
|
// If JSON parsing fails, display as raw text
|
|
console.error("Error parsing log entry:", e);
|
|
li.className += " border-gray-300 hover:bg-gray-50";
|
|
|
|
const pre = document.createElement("pre");
|
|
pre.className =
|
|
"text-sm whitespace-pre-wrap break-words log-text font-mono text-red-600";
|
|
pre.textContent = `Invalid JSON: ${logEntry}`;
|
|
li.appendChild(pre);
|
|
}
|
|
|
|
ul.appendChild(li);
|
|
});
|
|
|
|
appLogsContent.appendChild(ul);
|
|
}
|
|
|
|
function changeMonth() {
|
|
const selectedMonth = document.getElementById("month").value;
|
|
loadLogs(selectedMonth);
|
|
}
|
|
|
|
function refreshLogs() {
|
|
loadLogs();
|
|
}
|
|
|
|
function logout() {
|
|
localStorage.removeItem("admin_token");
|
|
showLoginSection();
|
|
document.getElementById("email").value = "";
|
|
document.getElementById("password").value = "";
|
|
document.getElementById("errorMessage").classList.add("hidden");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|