nathanwoodburn/hnsdoh-status
nathanwoodburn/hnsdoh-status
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Update style and cleanup ui
All checks were successful
Build Docker / BuildImage (push) Successful in 38s
Details

Browse Source
This commit is contained in:
Nathan Woodburn 2024-09-12 16:22:35 +10:00
parent 95628a75f4
commit 142ce6581f
Signed by: nathanwoodburn
GPG Key ID: 203B000478AD0EF1
3 changed files with 72 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
server.py
View File

@ -589,7 +589,7 @@ def convert_nodes_to_dict(nodes):
# region API routes # region API routes
@app.route("/api/nodes") @app.route("/api/nodes")
def api_nodes(): def api_nodes():
node_status = check_nodes() node_status = check_nodes_from_log()
return jsonify(node_status) return jsonify(node_status)
@ -686,6 +686,15 @@ def index():
history_summary["nodes"] = convert_nodes_to_dict(history_summary["nodes"]) history_summary["nodes"] = convert_nodes_to_dict(history_summary["nodes"])
last_check = format_last_check(last_log) last_check = format_last_check(last_log)
# Replace true/false with up/down
for node in node_status:
for key in ["plain_dns", "doh", "dot"]:
if node[key]:
node[key] = "Up"
else:
node[key] = "Down"
return render_template( return render_template(
"index.html", "index.html",
nodes=node_status, nodes=node_status,

9
templates/assets/css/index.css
View File

@ -2,7 +2,7 @@
margin: 25px; margin: 25px;
border: solid; border: solid;
border-radius: 20px; border-radius: 20px;
padding-inline: 50px; padding: 20px;
max-width: 90%; max-width: 90%;
} }
@ -16,3 +16,10 @@
max-width: 95%; max-width: 95%;
margin-top: 20px; margin-top: 20px;
} }
.node-info {
margin-top: 5px;
margin-bottom: 5px;
}
.node-info > p{
margin: 0;
}

44
templates/index.html
View File

@ -42,19 +42,20 @@
<body> <body>
<header> <header>
<nav class="navbar navbar-expand-md fixed-top bg-dark py-3" data-bs-theme="dark"> <nav class="navbar navbar-expand-md fixed-top bg-dark py-3" data-bs-theme="dark">
<div class="container-fluid"><a class="navbar-brand d-flex align-items-center" href="/#"><span <div class="container-fluid"><a class="navbar-brand d-flex align-items-center" href="https://welcome.hnsdoh.com"><span
class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><img class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><img
src="assets/img/HNSW.png" width="20px"></span><span>HNS DoH</span></a></div> src="assets/img/HNSW.png" width="20px"></span><span>HNS DoH</span></a></div>
</nav> </nav>
</header> </header>
<div style="margin: 100px;"></div>
<section id="intro"> <section id="intro">
<div class="text-center"> <div class="text-center">
<h1 class="text-center" style="font-size: 60px;">HNS DoH</h1> <h1 class="text-center" style="font-size: 60px;">HNS DoH Status</h1>
<div class="warnings"> <div class="warnings">
<!-- Check if warnings is empty --> <!-- Check if warnings is empty -->
{% if warnings %} {% if warnings %}
<div class="alert alert-danger" role="alert"> <div class="alert alert-danger" role="alert">
<h4 class="alert-heading">Warnings</h4> <h4 class="alert-heading">Warning</h4>
{% for warning in warnings %} {% for warning in warnings %}
<p>{{ warning }}</p> <p>{{ warning }}</p>
{% endfor %} {% endfor %}
@ -67,39 +68,46 @@
<section id="status"></section> <section id="status"></section>
<div class="text-center" style="width: fit-content;margin: auto;max-width: 100%;"> <div class="text-center" style="width: fit-content;margin: auto;max-width: 100%;">
<h1 class="text-center" style="font-size: 60px;">Nodes</h1>
<span style="font-size: smaller;margin-bottom: 10px;">Last check: {{last_check}}</span> <span style="font-size: smaller;margin-bottom: 10px;">Last check: {{last_check}}</span>
<div class="spacer"></div> <div class="spacer"></div>
<div class="node" style="display: block;"> <div class="node" style="display: block;">
<div> <div>
<h2 style="display: inline;">Overall</h2> <h2>Overall Stats</h2>
</div> </div>
<div> <div class="node-info">
<h5>Stats</h5> <p>Plain DNS: {{history.overall.plain_dns.percentage}}% uptime (last down
<p>Plain DNS: {{history.overall.plain_dns.percentage}}% uptime (last down {{history.overall.plain_dns.last_down}})</p> {{history.overall.plain_dns.last_down}})</p>
<p>DNS over HTTPS: {{history.overall.doh.percentage}}% uptime (last down {{history.overall.doh.last_down}})</p> <p>DNS over HTTPS: {{history.overall.doh.percentage}}% uptime (last down
<p>DNS over TLS: {{history.overall.dot.percentage}}% uptime (last down {{history.overall.dot.last_down}})</p> {{history.overall.doh.last_down}})</p>
<p>DNS over TLS: {{history.overall.dot.percentage}}% uptime (last down
{{history.overall.dot.last_down}})</p>
</div> </div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
{% for node in nodes %} {% for node in nodes %}
<div class="node"> <div class="node">
<div> <div>
<h2 style="display: inline;">{{node.location}}</h2> <h2>{{node.location}}</h2>
<h4 style="display: inline;">({{ node.name }})</h4>
</div> </div>
<div> <div class="node-info">
<h5>Current Status</h5> <h5>Current Status</h5>
<p>Plain DNS: {{node.plain_dns}}</p> <p>Plain DNS: {{node.plain_dns}}</p>
<p>DNS over HTTPS: {{node.doh}}</p> <p>DNS over HTTPS: {{node.doh}}</p>
<p>DNS over TLS: {{node.dot}}</p> <p>DNS over TLS: {{node.dot}}</p>
<p>Certificate: {{node.cert.valid}} (expires {{node.cert.expires}})</p> <p>Certificate: {% if node.cert.valid %} Valid {% else %} Invalid {% endif %} (expires
{{node.cert.expires}})</p>
</div> </div>
<div> <div class="node-info">
<h5>Stats</h5> <h5>Stats</h5>
<p>Plain DNS: {{history.nodes[node.name].plain_dns.percentage}}% uptime (last down {{history.nodes[node.name].plain_dns.last_down}})</p> <p>Plain DNS: {{history.nodes[node.name].plain_dns.percentage}}% uptime (last down
<p>DNS over HTTPS: {{history.nodes[node.name].doh.percentage}}% uptime (last down {{history.nodes[node.name].doh.last_down}})</p> {{history.nodes[node.name].plain_dns.last_down}})</p>
<p>DNS over TLS: {{history.nodes[node.name].dot.percentage}}% uptime (last down {{history.nodes[node.name].dot.last_down}})</p> <p>DNS over HTTPS: {{history.nodes[node.name].doh.percentage}}% uptime (last down
{{history.nodes[node.name].doh.last_down}})</p>
<p>DNS over TLS: {{history.nodes[node.name].dot.percentage}}% uptime (last down
{{history.nodes[node.name].dot.last_down}})</p>
</div>
<div class="node-info">
<p>{{node.name}}: {{node.ip}}</p>
</div> </div>
</div> </div>