Skip to content
Snippets Groups Projects
Commit 501b06e7 authored by capossele's avatar capossele
Browse files

:art: improves network stats

parent 34856d2d
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
plugins/analysis/webinterface/httpserver/index.go
+ 91
− 10
View file @ 501b06e7
...@@ -7,14 +7,83 @@ import ( ...@@ -7,14 +7,83 @@ import (
func index(w http.ResponseWriter, r *http.Request) { func index(w http.ResponseWriter, r *http.Request) {
fmt.Fprintf(w, `<head> fmt.Fprintf(w, `<head>
<style> body { margin: 0; } </style> <style>
body {
text-align: center;
margin: 0;
overflow: hidden;
}
#nfo{
position:absolute;
right: 0;
padding:10px;
}
#knownPeers{
position:relative;
margin:0;
font-size:14px;
font-weight: bold;
text-align:right;
color:#aaa;
}
#avgNeighbors{
position:relative;
margin:0;
font-size:13px;
text-align:right;
color:grey;
}
#graphc {
position: absolute;
top: 0px;
right: 0px;
margin:0;
right: 0px;
}
#nodeId{
position:relative;
margin:0;
padding:5px 0;
font-size:13px;
font-weight: bold;
text-align:right;
color:#aaa;
}
#nodestat{
position:relative;
margin:0;
font-size:12px;
text-align:right;
color:grey;
}
#in, #out{
margin:0;
padding: 3px 0;
}
</style>
<script src="https://unpkg.com/3d-force-graph"></script> <script src="https://unpkg.com/3d-force-graph"></script>
<!--<script src="../../dist/3d-force-graph.js"></script>--> <!--<script src="../../dist/3d-force-graph.js"></script>-->
</head> </head>
<body> <body>
<div id="3d-graph"></div> <div id="graphc"></div>
<div id="nfo">
<p id="knownPeers"></p>
<p id="avgNeighbors"></p>
<div id="nodeId"></div>
<div id="nodestat">
<p id="in"></p>
<p id="out"></p>
</div>
<script> <script>
var socket = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/datastream"); var socket = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/datastream");
...@@ -26,7 +95,8 @@ func index(w http.ResponseWriter, r *http.Request) { ...@@ -26,7 +95,8 @@ func index(w http.ResponseWriter, r *http.Request) {
}; };
socket.onmessage = function (e) { socket.onmessage = function (e) {
console.log("Len: ", data.nodes.length); document.getElementById("knownPeers").innerHTML = "Known peers: " + data.nodes.length;
document.getElementById("avgNeighbors").innerHTML = "Average neighbors: " + parseFloat(((data.links.length * 2) / data.nodes.length).toFixed(2));
switch (e.data[0]) { switch (e.data[0]) {
case "_": case "_":
// do nothing - its just a ping // do nothing - its just a ping
...@@ -73,12 +143,12 @@ func index(w http.ResponseWriter, r *http.Request) { ...@@ -73,12 +143,12 @@ func index(w http.ResponseWriter, r *http.Request) {
var existingLinks = {}; var existingLinks = {};
const elem = document.getElementById("3d-graph"); const elem = document.getElementById("graphc");
const Graph = ForceGraph3D()(elem) const Graph = ForceGraph3D()(elem)
.enableNodeDrag(false) .enableNodeDrag(false)
.onNodeHover(node => elem.style.cursor = node ? 'pointer' : null) .onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
.onNodeClick() .onNodeClick(showNodeID)
.nodeColor(node => node.online ? 'rgba(0,255,0,1)' : 'rgba(255,255,255,1)') .nodeColor(node => node.online ? 'rgba(0,255,0,1)' : 'rgba(255,255,255,1)')
.graphData(data); .graphData(data);
...@@ -144,6 +214,7 @@ func index(w http.ResponseWriter, r *http.Request) { ...@@ -144,6 +214,7 @@ func index(w http.ResponseWriter, r *http.Request) {
} }
nodesById[sourceNodeId].online = true; nodesById[sourceNodeId].online = true;
nodesById[targetNodeId].online = true; nodesById[targetNodeId].online = true;
existingLinks[sourceNodeId + targetNodeId] = true
data.links = [...data.links, { source: sourceNodeId, target: targetNodeId }]; data.links = [...data.links, { source: sourceNodeId, target: targetNodeId }];
updateGraph(); updateGraph();
...@@ -158,10 +229,20 @@ func index(w http.ResponseWriter, r *http.Request) { ...@@ -158,10 +229,20 @@ func index(w http.ResponseWriter, r *http.Request) {
updateGraph(); updateGraph();
} }
function removeNodeX(node) { function showNodeID(node) {
if (node.id in nodesById) { document.getElementById("nodeId").innerHTML = "ID: " + node.id;
removeNode(node.id);
} var incoming = data.links.filter(l => (l.target.id == node.id));
document.getElementById("in").innerHTML = "IN: " + incoming.length + "<br>";
incoming.forEach(function(link){
document.getElementById("in").innerHTML += link.source.id + " &rarr; NODE <br>";
});
var outgoing = data.links.filter(l => (l.source.id == node.id));
document.getElementById("out").innerHTML = "OUT: " + outgoing.length + "<br>";
outgoing.forEach(function(link){
document.getElementById("out").innerHTML += "NODE &rarr; " + link.target.id + "<br>";
});
} }
</script> </script>
</body>`) </body>`)
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment