Skip to content

Commit d931123

Browse files
jedisct1jedisct1
committed
Split large template file into organized structure with go:embed
- Replace 693-line monitoring_ui_templates.go with modular files - Add static/templates/simple.html - Simple dashboard template - Add static/templates/dashboard.html - Main dashboard template - Add static/js/monitoring.js - Dashboard JavaScript - Use go:embed directives for build-time embedding - Improve maintainability with proper file organization and syntax highlighting
1 parent 0d871af commit d931123

4 files changed

Lines changed: 253 additions & 246 deletions

File tree

dnscrypt-proxy/monitoring_ui_templates.go renamed to dnscrypt-proxy/static/js/monitoring.js

Lines changed: 2 additions & 246 deletions
Original file line numberDiff line numberDiff line change
@@ -1,248 +1,4 @@
1-
package main
2-
3-
// Templates for the monitoring UI
4-
5-
// SimpleHTMLTemplate is the template for the simple monitoring UI
6-
const SimpleHTMLTemplate = `<!DOCTYPE html>
7-
<html>
8-
<head>
9-
<title>DNSCrypt Proxy Monitoring (Simple)</title>
10-
<meta http-equiv="refresh" content="5">
11-
<style>
12-
body { font-family: sans-serif; margin: 20px; }
13-
h1 { color: #2c3e50; }
14-
table { border-collapse: collapse; width: 100%%; }
15-
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #ddd; }
16-
th { background-color: #f2f2f2; }
17-
</style>
18-
</head>
19-
<body>
20-
<h1>DNSCrypt Proxy Monitoring (Simple View)</h1>
21-
<p>Auto-refreshes every 5 seconds. <a href="/">Switch to full dashboard</a></p>
22-
23-
<h2>Overview</h2>
24-
<table>
25-
<tr><th>Total Queries</th><td>%d</td></tr>
26-
<tr><th>Queries Per Second</th><td>%.2f</td></tr>
27-
<tr><th>Uptime</th><td>%.0f seconds</td></tr>
28-
<tr><th>Cache Hit Ratio</th><td>%.2f%%</td></tr>
29-
<tr><th>Cache Hits</th><td>%d</td></tr>
30-
<tr><th>Cache Misses</th><td>%d</td></tr>
31-
</table>
32-
33-
<p><small>Generated at %s</small></p>
34-
</body>
35-
</html>`
36-
37-
// MainHTMLTemplate is the template for the main monitoring UI
38-
const MainHTMLTemplate = `<!DOCTYPE html>
39-
<html lang="en">
40-
<head>
41-
<meta charset="UTF-8">
42-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
43-
<title>DNSCrypt Proxy Monitoring</title>
44-
<style>
45-
body {
46-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
47-
margin: 0;
48-
padding: 0;
49-
color: #333;
50-
background-color: #f5f5f5;
51-
}
52-
.container {
53-
max-width: 1200px;
54-
margin: 0 auto;
55-
padding: 20px;
56-
}
57-
header {
58-
background-color: #2c3e50;
59-
color: white;
60-
padding: 1rem;
61-
margin-bottom: 20px;
62-
}
63-
h1 {
64-
margin: 0;
65-
font-size: 1.5rem;
66-
}
67-
.dashboard {
68-
display: grid;
69-
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
70-
gap: 20px;
71-
margin-bottom: 20px;
72-
}
73-
.card {
74-
background-color: white;
75-
border-radius: 5px;
76-
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
77-
padding: 20px;
78-
}
79-
.card h2 {
80-
margin-top: 0;
81-
font-size: 1.2rem;
82-
color: #2c3e50;
83-
border-bottom: 1px solid #eee;
84-
padding-bottom: 10px;
85-
}
86-
.stat {
87-
display: flex;
88-
justify-content: space-between;
89-
margin-bottom: 10px;
90-
}
91-
.stat-label {
92-
font-weight: bold;
93-
}
94-
.chart-container {
95-
height: 200px;
96-
margin-top: 10px;
97-
}
98-
table {
99-
width: 100%;
100-
border-collapse: collapse;
101-
}
102-
table th, table td {
103-
text-align: left;
104-
padding: 8px;
105-
border-bottom: 1px solid #eee;
106-
}
107-
table th {
108-
background-color: #f9f9f9;
109-
}
110-
</style>
111-
</head>
112-
<body>
113-
<header>
114-
<h1>DNSCrypt Proxy Monitoring Dashboard</h1>
115-
<div style="position: absolute; top: 10px; right: 10px;">
116-
<a href="/?simple=1" style="color: white; text-decoration: underline; margin-right: 15px;">Simple View</a>
117-
<a href="/api/metrics" target="_blank" style="color: white; text-decoration: underline;">Raw Data</a>
118-
</div>
119-
</header>
120-
<div class="container">
121-
<!-- Loading indicator -->
122-
<div id="loading-indicator" style="text-align: center; padding: 40px; margin: 20px 0; background-color: #f8f9fa; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
123-
<h2>Loading DNSCrypt Proxy Monitoring...</h2>
124-
<p>Please wait while we connect to the monitoring service.</p>
125-
<p>If this message persists, please check that the DNSCrypt Proxy is running with monitoring enabled.</p>
126-
<div style="margin: 20px 0; height: 4px; background-color: #eee; border-radius: 2px; overflow: hidden;">
127-
<div id="loading-bar" style="height: 100%; width: 0%; background-color: #2c3e50; animation: loading 2s infinite linear;"></div>
128-
</div>
129-
<style>
130-
@keyframes loading {
131-
0% { width: 0%; }
132-
50% { width: 100%; }
133-
100% { width: 0%; }
134-
}
135-
</style>
136-
</div>
137-
138-
<div class="dashboard">
139-
<div class="card">
140-
<h2>Overview</h2>
141-
<div class="stat">
142-
<span class="stat-label">Total Queries:</span>
143-
<span id="total-queries">-</span>
144-
</div>
145-
<div class="stat">
146-
<span class="stat-label">Queries Per Second:</span>
147-
<span id="qps">-</span>
148-
</div>
149-
<div class="stat">
150-
<span class="stat-label">Uptime:</span>
151-
<span id="uptime">-</span>
152-
</div>
153-
<div class="stat">
154-
<span class="stat-label">Avg Response Time:</span>
155-
<span id="avg-response-time">-</span>
156-
</div>
157-
</div>
158-
<div class="card">
159-
<h2>Cache Performance</h2>
160-
<div class="stat">
161-
<span class="stat-label">Cache Hit Ratio:</span>
162-
<span id="cache-hit-ratio">-</span>
163-
</div>
164-
<div class="stat">
165-
<span class="stat-label">Cache Hits:</span>
166-
<span id="cache-hits">-</span>
167-
</div>
168-
<div class="stat">
169-
<span class="stat-label">Cache Misses:</span>
170-
<span id="cache-misses">-</span>
171-
</div>
172-
<div class="chart-container" id="cache-chart"></div>
173-
</div>
174-
<div class="card">
175-
<h2>Query Types</h2>
176-
<div id="query-types-container">
177-
<table id="query-types-table">
178-
<thead>
179-
<tr>
180-
<th>Type</th>
181-
<th>Count</th>
182-
</tr>
183-
</thead>
184-
<tbody>
185-
</tbody>
186-
</table>
187-
</div>
188-
</div>
189-
</div>
190-
191-
<div class="card">
192-
<h2>Server Performance</h2>
193-
<table id="server-table">
194-
<thead>
195-
<tr>
196-
<th>Server</th>
197-
<th>Queries</th>
198-
<th>Avg Response Time</th>
199-
</tr>
200-
</thead>
201-
<tbody>
202-
</tbody>
203-
</table>
204-
</div>
205-
206-
<div class="card">
207-
<h2>Top Domains</h2>
208-
<table id="domains-table">
209-
<thead>
210-
<tr>
211-
<th>Domain</th>
212-
<th>Count</th>
213-
</tr>
214-
</thead>
215-
<tbody>
216-
</tbody>
217-
</table>
218-
</div>
219-
220-
<div class="card">
221-
<h2>Recent Queries</h2>
222-
<table id="queries-table">
223-
<thead>
224-
<tr>
225-
<th>Time</th>
226-
<th>Domain</th>
227-
<th>Type</th>
228-
<th>Client</th>
229-
<th>Server</th>
230-
<th>Response</th>
231-
<th>Time (ms)</th>
232-
</tr>
233-
</thead>
234-
<tbody>
235-
</tbody>
236-
</table>
237-
</div>
238-
</div>
239-
240-
<script src="/static/monitoring.js"></script>
241-
</body>
242-
</html>`
243-
244-
// MonitoringJSContent is the JavaScript for the monitoring UI
245-
const MonitoringJSContent = `// Error handling function with fallback to static content
1+
// Error handling function with fallback to static content
2462
function handleError(error) {
2473
console.error('Error:', error);
2484
try {
@@ -690,4 +446,4 @@ setTimeout(function() {
690446
loadingIndicator.style.display = 'none';
691447
}, 5000);
692448
}
693-
}, 20000);`
449+
}, 20000);

0 commit comments

Comments
 (0)