added a simple panel

2026-04-10 02:43:37 +02:00 · 2024-03-01 16:50:26 +08:00
parent 47733ec05f
commit 12e23c3517
11 changed files with 342 additions and 113 deletions
--- a/templates/panel.html
+++ b/templates/panel.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-color: #343a40;
+            color: #ffffff;
+        }
+
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+
+        tr {
+            border-radius: 10px;
+        }
+
+        table th:first-child {
+            border-radius: 10px 0 0 10px;
+        }
+
+        table th:last-child {
+            border-radius: 0 10px 10px 0;
+        }
+
+        table td:first-of-type {
+            border-top-left-radius: 10px;
+            border-bottom-left-radius: 10px;
+        }
+
+        table td:last-of-type {
+            border-top-right-radius: 10px;
+            border-bottom-right-radius: 10px;
+        }
+
+        .health-circle {
+            height: 15px;
+            width: 15px;
+            background-color: #28a745;
+            border-radius: 50%;
+            margin: auto;
+        }
+    </style>
+    <title>Route Panel</title>
+    <script>
+        function checkHealth(url, cell) {
+            var xhttp = new XMLHttpRequest();
+            xhttp.onreadystatechange = function () {
+                if (this.readyState != 4) {
+                    return
+                }
+                if (this.status === 200) {
+                    cell.innerHTML = '<div class="health-circle"></div>'; // Green circle for healthy
+                } else {
+                    cell.innerHTML = '<div class="health-circle" style="background-color: #dc3545;"></div>'; // Red circle for unhealthy
+                }
+            };
+            url = window.location.origin + '/checkhealth?target=' + encodeURIComponent(url);
+            xhttp.open("HEAD", url, true);
+            xhttp.send();
+        }
+
+        function updateHealthStatus() {
+            let rows = document.querySelectorAll('tbody tr');
+            rows.forEach(row => {
+                let url = row.cells[2].textContent;
+                let cell = row.cells[3]; // Health column cell
+                checkHealth(url, cell);
+            });
+        }
+
+        document.addEventListener("DOMContentLoaded", () => {
+            updateHealthStatus();
+
+            // Update health status every 5 seconds
+            setInterval(updateHealthStatus, 5000);
+        })
+    </script>
+</head>
+
+<body>
+    <div class="container">
+        <h1 style="color: #ffffff;">Route Panel</h1>
+        <table class="table table-striped table-dark w-auto">
+            <thead>
+                <tr>
+                    <th>Subdomain</th>
+                    <th>Path</th>
+                    <th>URL</th>
+                    <th>Health</th>
+                </tr>
+            </thead>
+            <tbody>
+                {{range $subdomain, $routes := .}}
+                {{range $route := $routes.Iter}}
+                <tr>
+                    <td>{{$subdomain}}</td>
+                    <td>{{$route.Path}}</td>
+                    <td>{{$route.Url.String}}</td>
+                    <td class="align-middle">
+                        <div class="health-circle"></div>
+                    </td> <!-- Health column -->
+                </tr>
+                {{end}}
+                {{end}}
+            </tbody>
+        </table>
+    </div>
+</body>
+
+</html>