Added javascript renderer for dsnetreport.js. Organised renderers better
This commit is contained in:
Phil martin
parent
7fdcf75440
commit
ffbcc5e01e
@ -5,15 +5,20 @@ into an existing website or web application.
|
|||||||
Most are contributions from other users. If you have a useful addition, please
|
Most are contributions from other users. If you have a useful addition, please
|
||||||
do a PR.
|
do a PR.
|
||||||
|
|
||||||
|
|
||||||
* `dsnetreport.php`: A php file to render a report.
|
|
||||||
* `dsnetreport.html`: A hugo shortcode for rendering a report. See https://github.com/naggie/dsnet/issues/4#issuecomment-632928158 for background. Courtesy of [@Write](https://github.com/Write)
|
|
||||||
|
|
||||||
Most look something like this:
|
Most look something like this:
|
||||||
|
|
||||||
## Hugo shortcode template
|
## Hugo shortcode template
|
||||||
|
* `hugo/dsnetreport.html`: A hugo shortcode for rendering a report. See https://github.com/naggie/dsnet/issues/4#issuecomment-632928158 for background. Courtesy of [@Write](https://github.com/Write)
|
||||||
|
|
||||||
|
|
||||||
# PHP template
|
# PHP template
|
||||||
|
* `php/dsnetreport.php`: A php file to render a report.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Clientside JavaScript
|
||||||
|
* `js/dsnetreport.html`: Basic HTML with a `div` for our table, nothing fancy.
|
||||||
|
* `js/dsnetreport.js`: The brains of the operation. Fetches `dsnetreport.json` and turns it into a HTML table.
|
||||||
|
* `js/dsnetreport.css`: The beauty of the operation. Makes the table look rather dapper.
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
132
report_rendering/js/dsnetreport.css
Normal file
132
report_rendering/js/dsnetreport.css
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #031010;
|
||||||
|
--bg-highlight: #202525;
|
||||||
|
--text: #aaaaaa;
|
||||||
|
--text-muted: #666666;
|
||||||
|
--text-faint: #444444;
|
||||||
|
--heading: #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme=light] {
|
||||||
|
--bg: #ffffff;
|
||||||
|
--bg-highlight: #f5f5f5;
|
||||||
|
--text: #444444;
|
||||||
|
--text-muted: #777777;
|
||||||
|
--text-faint: #999999;
|
||||||
|
--heading: #111111;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
background: var(--bg)
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
margin: var(--nav-height)0 0;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 20px;
|
||||||
|
min-height: 100%;
|
||||||
|
overscroll-behavior: none;
|
||||||
|
overflow-x: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4 {
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--heading)
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: -20px;
|
||||||
|
padding-top: 80px
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: 0;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
margin: 80px 0 30px;
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 80px 0;
|
||||||
|
user-select: text
|
||||||
|
}
|
||||||
|
|
||||||
|
table th,
|
||||||
|
table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 10px 5px;
|
||||||
|
padding: .6em
|
||||||
|
}
|
||||||
|
|
||||||
|
table th {
|
||||||
|
border-bottom: 1px solid var(--heading);
|
||||||
|
color: var(--heading)
|
||||||
|
}
|
||||||
|
|
||||||
|
table tr.dormant {
|
||||||
|
opacity: .3
|
||||||
|
}
|
||||||
|
|
||||||
|
table tr:nth-child(even) {
|
||||||
|
background: var(--bg-highlight)
|
||||||
|
}
|
||||||
|
|
||||||
|
table td.indicator-green::before,
|
||||||
|
table td.indicator-amber::before,
|
||||||
|
table td.indicator-red::before,
|
||||||
|
table td.indicator-null::before {
|
||||||
|
display: inline-block;
|
||||||
|
content: "";
|
||||||
|
margin-right: .4em;
|
||||||
|
width: .5em;
|
||||||
|
height: .5em;
|
||||||
|
border: .05em solid transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
table td.indicator-green::before {
|
||||||
|
background: #0f0;
|
||||||
|
box-shadow: 0 0 .5em rgba(100, 255, 100, .5)
|
||||||
|
}
|
||||||
|
|
||||||
|
table td.indicator-amber::before {
|
||||||
|
background: orange
|
||||||
|
}
|
||||||
|
|
||||||
|
table td.indicator-red::before {
|
||||||
|
background: red
|
||||||
|
}
|
||||||
|
|
||||||
|
table td.indicator-null::before {
|
||||||
|
background: #000;
|
||||||
|
border: .05em solid var(--text-faint)
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width:1200px) {
|
||||||
|
aside {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
aside~main {
|
||||||
|
transform: translateX(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width:900px) {
|
||||||
|
table * {
|
||||||
|
font-size: 2.2vw
|
||||||
|
}
|
||||||
|
|
||||||
|
pre * {
|
||||||
|
font-size: 2.5vw
|
||||||
|
}
|
||||||
|
}
|
||||||
17
report_rendering/js/dsnetreport.html
Normal file
17
report_rendering/js/dsnetreport.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="dsnetreport.css">
|
||||||
|
<script src="dsnetreport.js"></script>
|
||||||
|
<title>WireGuard Peers</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h2>WireGuard Peers</h2>
|
||||||
|
<div id="dsnetreport">
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
102
report_rendering/js/dsnetreport.js
Normal file
102
report_rendering/js/dsnetreport.js
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
// Simple javascript to build a HTML table from 'dsnetreport.json'
|
||||||
|
|
||||||
|
// Declare our headings
|
||||||
|
var header_list = ["Hostname", "Status", "IP", "Owner", "Description", "Up", "Down"];
|
||||||
|
|
||||||
|
function build_table() {
|
||||||
|
// Get our div
|
||||||
|
var report = document.getElementById("dsnetreport");
|
||||||
|
report.innerHTML = "";
|
||||||
|
// Make our table
|
||||||
|
var table = document.createElement("table");
|
||||||
|
var header = table.createTHead();
|
||||||
|
var row = header.insertRow();
|
||||||
|
header_list.forEach(function(heading, index) {
|
||||||
|
var cell = row.insertCell();
|
||||||
|
// By default, insertCell() creates elements as '<td>' even if in a <thead> for no reason
|
||||||
|
cell.outerHTML = "<th>" + heading + "</th>";
|
||||||
|
});
|
||||||
|
// Create a summary to go at the bottom
|
||||||
|
var devices_online = document.createElement("em")
|
||||||
|
|
||||||
|
// By default, this looks for dsnetreport.json in the current directory
|
||||||
|
fetch("dsnetreport.json")
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
// Create our summary statement
|
||||||
|
devices_online.innerHTML = data.PeersOnline + " of " + data.PeersTotal + " devices connected"
|
||||||
|
// Iterate over the peers
|
||||||
|
data.Peers.forEach(function(peer, index) {
|
||||||
|
// Create the row
|
||||||
|
var row = table.insertRow();
|
||||||
|
row.id = "peer-" + peer.Hostname;
|
||||||
|
row.classList.add("peer")
|
||||||
|
// Different colour text if the peer is dormant
|
||||||
|
if (peer.Dormant) {
|
||||||
|
row.classList.add("dormant")
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hostname
|
||||||
|
var hostname = row.insertCell();
|
||||||
|
hostname.classList.add("hostname")
|
||||||
|
hostname.innerHTML = peer.Hostname;
|
||||||
|
hostname.title = peer.Hostname + "." + data.Domain;
|
||||||
|
|
||||||
|
// Status
|
||||||
|
var status = row.insertCell();
|
||||||
|
status.classList.add("status")
|
||||||
|
status.setAttribute("nowrap", true)
|
||||||
|
// Set indicators based on online status
|
||||||
|
if (peer.Online) {
|
||||||
|
status.title = "Handshake in last 3 minutes";
|
||||||
|
status.classList.add("indicator-green")
|
||||||
|
status.innerHTML = "online";
|
||||||
|
} else {
|
||||||
|
handshake = new Date(peer.LastHandshakeTime);
|
||||||
|
// Add some information about when the peer was last seen
|
||||||
|
status.title = "No handshake since since " + handshake.toLocaleString();
|
||||||
|
status.classList.add("indicator-null")
|
||||||
|
status.innerHTML = "offline";
|
||||||
|
}
|
||||||
|
|
||||||
|
// IP
|
||||||
|
// Could also have external IP as a title?
|
||||||
|
var IP = row.insertCell();
|
||||||
|
IP.classList.add("ip")
|
||||||
|
IP.innerHTML = peer.IP;
|
||||||
|
|
||||||
|
// Owner
|
||||||
|
var owner = row.insertCell();
|
||||||
|
owner.classList.add("owner")
|
||||||
|
owner.innerHTML = peer.Owner;
|
||||||
|
|
||||||
|
// Description
|
||||||
|
var desc = row.insertCell();
|
||||||
|
desc.classList.add("description")
|
||||||
|
desc.innerHTML = peer.Description;
|
||||||
|
|
||||||
|
// Data up in SI units
|
||||||
|
var data_up = row.insertCell();
|
||||||
|
data_up.classList.add("up")
|
||||||
|
data_up.innerHTML = peer.ReceiveBytesSI;
|
||||||
|
|
||||||
|
// Data down in SI units
|
||||||
|
var data_down = row.insertCell();
|
||||||
|
data_down.classList.add("down")
|
||||||
|
data_down.innerHTML = peer.TransmitBytesSI;
|
||||||
|
|
||||||
|
});
|
||||||
|
}).catch(error => {
|
||||||
|
// If we encounter an error, don't do anything useful, just complain
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
// Add the table to the div
|
||||||
|
report.appendChild(table);
|
||||||
|
// Add the summary to the div
|
||||||
|
report.appendChild(devices_online);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build the table when the page has loaded
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
build_table();
|
||||||
|
}, false);
|
||||||
Loading…
Reference in New Issue
Block a user