151 lines
6.1 KiB
HTML
151 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SeekRight Monitor</title>
|
||
<meta name="description" content="Database schema health and image sync monitoring.">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="/static/styles.css?v=6">
|
||
</head>
|
||
<body>
|
||
<div class="layout">
|
||
|
||
<!-- Sidebar -->
|
||
<aside class="sidebar">
|
||
<div class="brand">
|
||
<div class="brand-logo">SR</div>
|
||
<div>
|
||
<div class="brand-name">SeekRight</div>
|
||
<div class="brand-sub">Monitor</div>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="sidenav">
|
||
<button class="nav-item active" data-target="schema-tab" id="nav-schema">
|
||
<span class="nav-ico">⬡</span>
|
||
<div class="nav-info">
|
||
<span class="nav-label">Schema Health</span>
|
||
<span class="nav-sub" id="nav-schema-status">–</span>
|
||
</div>
|
||
<span class="live-dot" id="schema-live-dot"></span>
|
||
</button>
|
||
<button class="nav-item" data-target="image-tab" id="nav-image">
|
||
<span class="nav-ico">◫</span>
|
||
<div class="nav-info">
|
||
<span class="nav-label">Image Sync</span>
|
||
<span class="nav-sub" id="nav-image-status">–</span>
|
||
</div>
|
||
<span class="live-dot" id="image-live-dot"></span>
|
||
</button>
|
||
</nav>
|
||
|
||
<div class="sidebar-foot">
|
||
<span>Auto-refresh</span>
|
||
<span class="foot-val">5s</span>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main -->
|
||
<div class="main">
|
||
|
||
<!-- Topbar -->
|
||
<header class="topbar">
|
||
<div class="metrics">
|
||
<div class="metric">
|
||
<div class="metric-dot blue"></div>
|
||
<div class="metric-val" id="chip-total">77</div>
|
||
<div class="metric-key">Databases</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-dot green"></div>
|
||
<div class="metric-val" id="chip-healthy">–</div>
|
||
<div class="metric-key">Healthy</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-dot red"></div>
|
||
<div class="metric-val" id="chip-errors">–</div>
|
||
<div class="metric-key">Errors</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-dot grey"></div>
|
||
<div class="metric-val" id="chip-pending">–</div>
|
||
<div class="metric-key">Pending</div>
|
||
</div>
|
||
</div>
|
||
<div class="topbar-right">
|
||
<div class="status-pill">
|
||
<div class="status-dot" id="status-dot"></div>
|
||
<span id="header-status">Loading…</span>
|
||
</div>
|
||
<button class="btn-refresh" onclick="refreshData()">↻ Refresh</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Scan progress bar -->
|
||
<div class="scan-bar" id="scan-bar">
|
||
<div class="scan-bar-fill" id="scan-bar-fill" style="width:0%"></div>
|
||
</div>
|
||
|
||
<!-- Scan notice -->
|
||
<div class="scan-notice" id="scan-notice">
|
||
<div class="scan-notice-dot"></div>
|
||
<span id="scan-notice-text"></span>
|
||
</div>
|
||
|
||
<!-- Content -->
|
||
<div class="content">
|
||
|
||
<!-- Schema Tab -->
|
||
<section id="schema-tab" class="tab active">
|
||
<div class="tab-bar">
|
||
<div>
|
||
<div class="tab-title">Database Schema Health</div>
|
||
<div class="tab-desc">Per-table view · Column anomalies auto-detected and highlighted</div>
|
||
</div>
|
||
<div class="filters">
|
||
<input type="text" class="f-input" id="schema-search" placeholder="Search database…" oninput="filterSchema()">
|
||
<select class="f-select" id="schema-table-filter" onchange="filterSchema()">
|
||
<option value="all">All Tables</option>
|
||
</select>
|
||
<select class="f-select" id="schema-filter" onchange="filterSchema()">
|
||
<option value="all">All Status</option>
|
||
<option value="success">Healthy</option>
|
||
<option value="error">Errors only</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tbl-wrap" id="schema-table-container">
|
||
<div class="empty-state"><div class="spinner"></div><span>Waiting for first scan…</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Image Tab -->
|
||
<section id="image-tab" class="tab">
|
||
<div class="tab-bar">
|
||
<div>
|
||
<div class="tab-title">Image Sync Status</div>
|
||
<div class="tab-desc">tbl_site_anomaly · tbl_site_anomaly_history · tbl_site_anomaly_history_bkp</div>
|
||
</div>
|
||
<div class="filters">
|
||
<input type="text" class="f-input" id="image-search" placeholder="Search database…" oninput="filterImages()">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-grid" id="image-grid-container">
|
||
<div class="empty-state"><div class="spinner"></div><span>Waiting for first scan…</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="toast-container" class="toast-wrap"></div>
|
||
<script src="/static/app.js?v=6"></script>
|
||
</body>
|
||
</html>
|