Initial commit
This commit is contained in:
150
frontend/index.html
Normal file
150
frontend/index.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user