Merge pull request #11 from frillip/jsreport
Added javascript renderer for dsnetreport.js. Organised renderers better
This commit is contained in:
Callan Bryant
GitHub
commit
bd2e41927b
BIN
etc/dsnet-report-js.png
Normal file
BIN
etc/dsnet-report-js.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
@ -5,15 +5,29 @@ 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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# PHP template
|
# PHP template
|
||||||
|
See https://github.com/naggie/dsnet/issues/4#issuecomment-632928158 for background. Courtesy of [@Write](https://github.com/Write)
|
||||||
|
|
||||||
|
* `php/dsnetreport.php`: A php file to render a report.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Clientside JavaScript
|
||||||
|
|
||||||
|
Courtesy of [@frillip](https://github.com/frillip/)
|
||||||
|
|
||||||
|
* `js/dsnetreport.html`: Basic HTML with a `div` to place the table in.
|
||||||
|
* `js/dsnetreport.js`: Fetches `dsnetreport.json` and renders table.
|
||||||
|
* `js/dsnetreport.css`: CSS to render the table as per screenshot.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
72
report_rendering/js/dsnetreport.css
Normal file
72
report_rendering/js/dsnetreport.css
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #030303;
|
||||||
|
--bg-highlight: #202020;
|
||||||
|
--text: #aaaaaa;
|
||||||
|
--text-muted: #666666;
|
||||||
|
--text-faint: #444444;
|
||||||
|
--heading: #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
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)
|
||||||
|
}
|
||||||
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