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
|
||||
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:
|
||||
|
||||
## Hugo shortcode template
|
||||
|
||||
* `hugo/dsnetreport.html`: A hugo shortcode for rendering a report.
|
||||
|
||||
|
||||
|
||||
# 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