mirror of
https://github.com/EDCD/EDDN.git
synced 2025-04-21 02:57:38 +03:00
Monitor page refactoring
This commit is contained in:
AnthorNet
parent
535b282c49
commit
3a92ffe1ad
@ -0,0 +1,11 @@
|
||||
body {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
section.container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.container h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -1,14 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>EDDN Status</title>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/eddn.css" rel="stylesheet">
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="./css/eddn.css" rel="stylesheet" />
|
||||
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
@ -18,92 +18,220 @@
|
||||
<![endif]-->
|
||||
|
||||
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script src="js/date.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h1>EDDN Status</h1>
|
||||
<script src="./js/date.js"></script>
|
||||
</head>
|
||||
<body data-spy="scroll" data-target="#header-nav">
|
||||
<header>
|
||||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container">
|
||||
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-nav">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="">EDDN Status</a>
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse" id="header-nav">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="#gateway">Gateway</a></li>
|
||||
<li><a href="#relay">Relay</a></li>
|
||||
<li><a href="#software">Software</a></li>
|
||||
<li><a href="#uploader">Uploader</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>This page shows transaction information (messages sent/received) for key points of the EDDN, over a one-, five- and sixty-minute period. Values automatically update every minute.</p>
|
||||
<h2>Gateway</h2>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="form-inline">
|
||||
<select id="gateway" class="form-control">
|
||||
<option value="http://eddn-gateway.elite-markets.net:8080/stats/">eddn-gateway.elite-markets.net</option>
|
||||
</select>
|
||||
</td>
|
||||
<th>1 min</th>
|
||||
<th>5 min</th>
|
||||
<th>60 min</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Messages received</th>
|
||||
<td id="gateway_inbound_1min" class="stat">-</td>
|
||||
<td id="gateway_inbound_5min" class="stat">-</td>
|
||||
<td id="gateway_inbound_60min" class="stat">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Invalid messages</th>
|
||||
<td id="gateway_invalid_1min" class="stat">-</td>
|
||||
<td id="gateway_invalid_5min" class="stat">-</td>
|
||||
<td id="gateway_invalid_60min" class="stat">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Messages passed to relay</th>
|
||||
<td id="gateway_outbound_1min" class="stat">-</td>
|
||||
<td id="gateway_outbound_5min" class="stat">-</td>
|
||||
<td id="gateway_outbound_60min" class="stat">-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="text-muted small">EDDN version <span id="gateway_version">N/A</span>. Uptime: <span id="gateway_uptime">N/A</span>. Last updated <span id="update_gateway_timestamp">N/A</span></p>
|
||||
<h2>Relay</h2>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="form-inline">
|
||||
<select id="relay" class="form-control">
|
||||
<option value="http://eddn-relay.elite-markets.net:9090/stats/">eddn-relay.elite-markets.net</option>
|
||||
</select>
|
||||
</td>
|
||||
<th>1 min</th>
|
||||
<th>5 min</th>
|
||||
<th>60 min</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Messages received</th>
|
||||
<td id="relay_inbound_1min" class="stat">-</td>
|
||||
<td id="relay_inbound_5min" class="stat">-</td>
|
||||
<td id="relay_inbound_60min" class="stat">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Messages passed to subscribers</th>
|
||||
<td id="relay_outbound_1min" class="stat">-</td>
|
||||
<td id="relay_outbound_5min" class="stat">-</td>
|
||||
<td id="relay_outbound_60min" class="stat">-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="text-muted small">EDDN version <span id="relay_version">N/A</span>. Uptime: <span id="relay_uptime">N/A</span>. Last updated <span id="update_relay_timestamp">N/A</span></p>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p>
|
||||
This page shows transaction information (messages sent/received) for key points of the EDDN, over a one-, five- and sixty-minute period.<br />
|
||||
Values automatically update every minute.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<p>The <em>Elite: Dangerous Data Network</em> is volunteer-run and not affiliated with Frontier Developments.</p>
|
||||
</section>
|
||||
|
||||
<section id="gateway" class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h2>Gateway</h2>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="text-right form-inline">
|
||||
<select name="gateway" class="form-control"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 50%;"></th>
|
||||
<th>1 min</th>
|
||||
<th>5 min</th>
|
||||
<th>60 min</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Messages received</th>
|
||||
<td class="inbound_1min stat">-</td>
|
||||
<td class="inbound_5min stat">-</td>
|
||||
<td class="inbound_60min stat">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Invalid messages</th>
|
||||
<td class="invalid_1min stat">-</td>
|
||||
<td class="invalid_5min stat">-</td>
|
||||
<td class="invalid_60min stat">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Messages passed to relay</th>
|
||||
<td class="outbound_1min stat">-</td>
|
||||
<td class="outbound_5min stat">-</td>
|
||||
<td class="outbound_60min stat">-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<p class="text-muted small">
|
||||
EDDN version <strong><span class="version">N/A</span></strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p class="text-muted small">
|
||||
Uptime: <strong><span class="uptime">N/A</span></strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p class="text-muted small">
|
||||
Last updated <strong><span class="update_timestamp">N/A</span></strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="relay" class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h2>Relay</h2>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="text-right form-inline">
|
||||
<select name="relay" class="form-control"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 50%;"></th>
|
||||
<th>1 min</th>
|
||||
<th>5 min</th>
|
||||
<th>60 min</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Messages received</th>
|
||||
<td class="inbound_1min stat">-</td>
|
||||
<td class="inbound_5min stat">-</td>
|
||||
<td class="inbound_60min stat">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Messages passed to subscribers</th>
|
||||
<td class="outbound_1min stat">-</td>
|
||||
<td class="outbound_5min stat">-</td>
|
||||
<td class="outbound_60min stat">-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<p class="text-muted small">
|
||||
EDDN version <strong><span class="version">N/A</span></strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p class="text-muted small">
|
||||
Uptime: <strong><span class="uptime">N/A</span></strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p class="text-muted small">
|
||||
Last updated <strong><span class="update_timestamp">N/A</span></strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="software" class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h2>Software</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="uploader" class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h2>Uploader</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<nav class="navbar navbar-default navbar-fixed-bottom">
|
||||
<div class="container">
|
||||
<p>
|
||||
The <em>Elite: Dangerous Data Network</em> is volunteer-run and not affiliated with Frontier Developments.
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
|
||||
<script src="js/eddn.js"></script>
|
||||
</body>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
|
||||
<script src="./js/eddn.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,3 +1,16 @@
|
||||
var updateInterval = 60000,
|
||||
|
||||
monitorEndPoint = 'http://eddn-monitor.ed-td.space:9091/',
|
||||
|
||||
gatewayBottlePort = 8080,
|
||||
relayBottlePort = 9090,
|
||||
|
||||
relays = [
|
||||
'eddn-gateway.elite-markets.net',
|
||||
'eddn-gateway.ed-td.space'
|
||||
];
|
||||
|
||||
|
||||
secondsToDurationString = function(seconds) {
|
||||
var hours = Math.floor(seconds / 3600);
|
||||
var minutes = Math.floor((seconds - (hours * 3600)) / 60);
|
||||
@ -21,42 +34,35 @@ secondsToDurationString = function(seconds) {
|
||||
}
|
||||
}
|
||||
|
||||
displayStats = function(el, stats){
|
||||
el.find(".inbound_1min").html((stats["inbound"] || {})["1min"] || 0);
|
||||
el.find(".inbound_5min").html((stats["inbound"] || {})["5min"] || 0);
|
||||
el.find(".inbound_60min").html((stats["inbound"] || {})["60min"] || 0);
|
||||
|
||||
el.find(".invalid_1min").html((stats["invalid"] || {})["1min"] || 0);
|
||||
el.find(".invalid_5min").html((stats["invalid"] || {})["5min"] || 0);
|
||||
el.find(".invalid_60min").html((stats["invalid"] || {})["60min"] || 0);
|
||||
|
||||
el.find(".outbound_1min").html((stats["outbound"] || {})["1min"] || 0);
|
||||
el.find(".outbound_5min").html((stats["outbound"] || {})["5min"] || 0);
|
||||
el.find(".outbound_60min").html((stats["outbound"] || {})["60min"] || 0);
|
||||
|
||||
d = new Date();
|
||||
el.find(".update_timestamp").html(d.toString("yyyy-MM-dd HH:mm:ss"));
|
||||
el.find(".version").html(stats['version'] || "N/A");
|
||||
|
||||
if (stats['uptime'])
|
||||
el.find(".uptime").html(secondsToDurationString(stats['uptime']));
|
||||
|
||||
formatStats();
|
||||
}
|
||||
|
||||
displayGatewayStats = function(stats) {
|
||||
$("#gateway_inbound_1min").html((stats["inbound"] || {})["1min"] || 0);
|
||||
$("#gateway_inbound_5min").html((stats["inbound"] || {})["5min"] || 0);
|
||||
$("#gateway_inbound_60min").html((stats["inbound"] || {})["60min"] || 0);
|
||||
|
||||
$("#gateway_invalid_1min").html((stats["invalid"] || {})["1min"] || 0);
|
||||
$("#gateway_invalid_5min").html((stats["invalid"] || {})["5min"] || 0);
|
||||
$("#gateway_invalid_60min").html((stats["invalid"] || {})["60min"] || 0);
|
||||
|
||||
$("#gateway_outbound_1min").html((stats["outbound"] || {})["1min"] || 0);
|
||||
$("#gateway_outbound_5min").html((stats["outbound"] || {})["5min"] || 0);
|
||||
$("#gateway_outbound_60min").html((stats["outbound"] || {})["60min"] || 0);
|
||||
d = new Date();
|
||||
$("#update_gateway_timestamp").html(d.toString("yyyy-MM-dd HH:mm:ss"));
|
||||
$("#gateway_version").html(stats['version'] || "N/A");
|
||||
if (stats['uptime']) {
|
||||
$("#gateway_uptime").html(secondsToDurationString(stats['uptime']));
|
||||
}
|
||||
formatStats();
|
||||
return displayStats($('#gateway'), stats)
|
||||
}
|
||||
|
||||
displayRelayStats = function(stats) {
|
||||
$("#relay_inbound_1min").html((stats["inbound"] || {})["1min"] || 0);
|
||||
$("#relay_inbound_5min").html((stats["inbound"] || {})["5min"] || 0);
|
||||
$("#relay_inbound_60min").html((stats["inbound"] || {})["60min"] || 0);
|
||||
|
||||
$("#relay_outbound_1min").html((stats["outbound"] || {})["1min"] || 0);
|
||||
$("#relay_outbound_5min").html((stats["outbound"] || {})["5min"] || 0);
|
||||
$("#relay_outbound_60min").html((stats["outbound"] || {})["60min"] || 0);
|
||||
d = new Date();
|
||||
$("#update_relay_timestamp").html(d.toString("yyyy-MM-dd HH:mm:ss"));
|
||||
$("#relay_version").html(stats['version'] || "N/A");
|
||||
if (stats['uptime']) {
|
||||
$("#relay_uptime").html(secondsToDurationString(stats['uptime']));
|
||||
}
|
||||
formatStats();
|
||||
return displayStats($('#relay'), stats)
|
||||
}
|
||||
|
||||
formatStats = function() {
|
||||
@ -70,26 +76,68 @@ formatStats = function() {
|
||||
});
|
||||
}
|
||||
|
||||
doUpdate = function(url, success, failure) {
|
||||
doUpdate = function(url, success) {
|
||||
$.ajax({
|
||||
dataType: "json",
|
||||
url: url,
|
||||
success: success,
|
||||
failure: failure
|
||||
success: success
|
||||
});
|
||||
}
|
||||
|
||||
getGatewayUrl = function() {
|
||||
return $("#gateway").val();
|
||||
return $("select[name=gateway]").val();
|
||||
}
|
||||
|
||||
getRelayUrl = function() {
|
||||
return $("#relay").val();
|
||||
return $("select[name=relay]").val();
|
||||
}
|
||||
|
||||
$("#gateway").change(function() {doUpdate(getGatewayUrl(), displayGatewayStats);})
|
||||
$("#relay").change(function() {doUpdate(getRelayUrl(), displayRelayStats);})
|
||||
|
||||
doUpdate(getGatewayUrl(), displayGatewayStats);
|
||||
doUpdate(getRelayUrl(), displayRelayStats);
|
||||
setInterval(function() {doUpdate(getGatewayUrl(), displayGatewayStats); doUpdate(getRelayUrl(), displayRelayStats)}, 60000);
|
||||
|
||||
/**
|
||||
* Launch monitoring
|
||||
*/
|
||||
var start = function(){
|
||||
// Grab gateways from monitor
|
||||
$.ajax({
|
||||
dataType: "json",
|
||||
url: monitorEndPoint + 'getGateways/',
|
||||
success: function(gateways){
|
||||
gateways = gateways.sort();
|
||||
$.each(gateways, function(k, gateway){
|
||||
gateway = gateway.replace('tcp://', '');
|
||||
gateway = gateway.replace(':8500', '');
|
||||
|
||||
$("select[name=gateway]").append($('<option>', {
|
||||
value: 'http://' + gateway + ':' + gatewayBottlePort + '/stats/',
|
||||
text : gateway
|
||||
}));
|
||||
});
|
||||
doUpdate(getGatewayUrl(), displayGatewayStats);
|
||||
}
|
||||
});
|
||||
|
||||
// Grab relays
|
||||
relays = relays.sort();
|
||||
$.each(relays, function(k, relay){
|
||||
$("select[name=relay]").append($('<option>', {
|
||||
value: 'http://' + relay + ':' + relayBottlePort + '/stats/',
|
||||
text : relay
|
||||
}));
|
||||
});
|
||||
|
||||
// Attach events
|
||||
$("select[name=gateway]").change(function() {doUpdate(getGatewayUrl(), displayGatewayStats);})
|
||||
$("select[name=relay]").change(function() {doUpdate(getRelayUrl(), displayRelayStats);})
|
||||
|
||||
// Start updates interval
|
||||
setInterval(doUpdates, updateInterval);
|
||||
doUpdates();
|
||||
}
|
||||
var doUpdates = function(){
|
||||
doUpdate(getGatewayUrl(), displayGatewayStats);
|
||||
doUpdate(getRelayUrl(), displayRelayStats);
|
||||
}
|
||||
$(document).ready(function(){
|
||||
start();
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user