c4c7dd3f05
- 6-node MariaDB cluster with GTID replication - MaxScale 24.02 proxy with automatic failover - Flask dashboard with SSE transaction monitor - Per-server toggle controls + mode selector - Systemd services for auto-start on boot - One-command deploy.sh
118 lines
5.6 KiB
HTML
118 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MariaDB HA — Live Demo</title>
|
|
<link rel="stylesheet" href="/static/dashboard.css">
|
|
</head>
|
|
<body>
|
|
<div class="dash">
|
|
<!-- HEADER -->
|
|
<header class="dash-header">
|
|
<div class="header-left">
|
|
<h1 class="dash-title">MariaDB Enterprise</h1>
|
|
<p class="dash-subtitle">High Availability Live Demo</p>
|
|
</div>
|
|
<div class="header-right" id="header-stats">
|
|
<select class="mode-select" id="mode-select" title="Demo architecture mode">
|
|
<option value="dr">Primary + DR Site</option>
|
|
<option value="standalone">2 Independent Clusters</option>
|
|
</select>
|
|
<span class="stat-pill" id="pill-availability">100.00%</span>
|
|
<span class="stat-pill" id="pill-transactions">0 / 0 txn</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- MAIN GRID -->
|
|
<main class="dash-grid">
|
|
<!-- LEFT: Application Monitor -->
|
|
<section class="panel panel-app">
|
|
<h2 class="panel-title">Application Monitor</h2>
|
|
<div class="app-status-row">
|
|
<div id="status-circle" class="circle-mini gray"></div>
|
|
<div class="app-status-info">
|
|
<p id="status-text" class="status-label-mini">Ready</p>
|
|
<span class="avail-inline" id="avail-inline">—</span>
|
|
</div>
|
|
</div>
|
|
<!-- Terminal log -->
|
|
<div class="terminal" id="terminal">
|
|
<div class="terminal-inner" id="terminal-log">
|
|
<span class="term-line dim">MariaDB HA Monitor v2.0 — Ready</span>
|
|
<span class="term-line dim">Waiting for demo to start...</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CENTER: Cluster 1 -->
|
|
<section class="panel panel-dc">
|
|
<h2 class="panel-title">Cluster 1 <span class="dc-badge cluster1">CL1</span></h2>
|
|
<div class="server-grid" id="cluster1-servers">
|
|
<div class="server-card loading" data-node="mariadb1">
|
|
<span class="server-name">mariadb1</span>
|
|
<span class="server-role">—</span>
|
|
<button class="server-toggle" data-node="mariadb1" title="Toggle ON/OFF"></button>
|
|
</div>
|
|
<div class="server-card loading" data-node="mariadb2">
|
|
<span class="server-name">mariadb2</span>
|
|
<span class="server-role">—</span>
|
|
<button class="server-toggle" data-node="mariadb2" title="Toggle ON/OFF"></button>
|
|
</div>
|
|
<div class="server-card loading" data-node="mariadb3">
|
|
<span class="server-name">mariadb3</span>
|
|
<span class="server-role">—</span>
|
|
<button class="server-toggle" data-node="mariadb3" title="Toggle ON/OFF"></button>
|
|
</div>
|
|
</div>
|
|
<div class="mx-status" id="mx1-status">
|
|
<span class="mx-label">MaxScale :4000</span>
|
|
<span class="mx-dot"></span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- RIGHT: Cluster 2 -->
|
|
<section class="panel panel-dc">
|
|
<h2 class="panel-title" id="cluster2-title">Cluster 2 <span class="dc-badge cluster2">CL2</span></h2>
|
|
<div class="server-grid" id="cluster2-servers">
|
|
<div class="server-card loading" data-node="mariadb4">
|
|
<span class="server-name">mariadb4</span>
|
|
<span class="server-role">—</span>
|
|
<button class="server-toggle" data-node="mariadb4" title="Toggle ON/OFF"></button>
|
|
</div>
|
|
<div class="server-card loading" data-node="mariadb5">
|
|
<span class="server-name">mariadb5</span>
|
|
<span class="server-role">—</span>
|
|
<button class="server-toggle" data-node="mariadb5" title="Toggle ON/OFF"></button>
|
|
</div>
|
|
<div class="server-card loading" data-node="mariadb6">
|
|
<span class="server-name">mariadb6</span>
|
|
<span class="server-role">—</span>
|
|
<button class="server-toggle" data-node="mariadb6" title="Toggle ON/OFF"></button>
|
|
</div>
|
|
</div>
|
|
<div class="mx-status" id="mx2-status">
|
|
<span class="mx-label">MaxScale :4000</span>
|
|
<span class="mx-dot"></span>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- ACTION BAR -->
|
|
<footer class="action-bar">
|
|
<button class="btn-action btn-init" id="btn-init" title="Create test database">
|
|
⚡ Initialize DB
|
|
</button>
|
|
<button class="btn-action btn-start" id="btn-toggle" disabled title="Begin transaction monitoring">
|
|
▶ Start Demo
|
|
</button>
|
|
<button class="btn-action btn-recover" id="btn-recover-all" title="Restart all nodes">
|
|
♻ Recover All
|
|
</button>
|
|
<span class="action-msg" id="action-msg"></span>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="/static/dashboard.js"></script>
|
|
</body>
|
|
</html>
|