mirror of
https://github.com/EDCD/EDDN.git
synced 2025-06-20 08:43:55 +03:00
Lot of works on gateway/relay status
This commit is contained in:
AnthorNet
parent
3a92ffe1ad
commit
1fea0b638c
@ -4,8 +4,19 @@ body {
|
|||||||
|
|
||||||
section.container {
|
section.container {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
/* FIX ANCHORS */
|
||||||
|
padding-top:70px;
|
||||||
|
margin-top:-70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container h2 {
|
.container h2 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container .chart {
|
||||||
|
height: 200px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highcharts-container{width:100% !important; height:100% !important;}
|
||||||
@ -20,7 +20,7 @@
|
|||||||
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||||
<script src="./js/date.js"></script>
|
<script src="./js/date.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body data-spy="scroll" data-target="#header-nav">
|
<body data-spy="scroll" data-target="#header-nav" data-offset="70">
|
||||||
<header>
|
<header>
|
||||||
<nav class="navbar navbar-default navbar-fixed-top">
|
<nav class="navbar navbar-default navbar-fixed-top">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -110,6 +110,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12 charts">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<p class="text-muted small">
|
<p class="text-muted small">
|
||||||
@ -179,6 +185,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12 charts">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<p class="text-muted small">
|
<p class="text-muted small">
|
||||||
@ -208,6 +220,16 @@
|
|||||||
<h2>Software</h2>
|
<h2>Software</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-body">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="uploader" class="container">
|
<section id="uploader" class="container">
|
||||||
@ -216,10 +238,20 @@
|
|||||||
<h2>Uploader</h2>
|
<h2>Uploader</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-body">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<nav class="navbar navbar-default navbar-fixed-bottom">
|
<nav class="navbar navbar-default">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<p>
|
<p>
|
||||||
The <em>Elite: Dangerous Data Network</em> is volunteer-run and not affiliated with Frontier Developments.
|
The <em>Elite: Dangerous Data Network</em> is volunteer-run and not affiliated with Frontier Developments.
|
||||||
@ -231,7 +263,7 @@
|
|||||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
<!-- 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
|
<script src="http://code.highcharts.com/4.1.5/highcharts.js"></script>
|
||||||
<script src="./js/eddn.js"></script>
|
<script src="./js/eddn.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -8,7 +8,12 @@ var updateInterval = 60000,
|
|||||||
relays = [
|
relays = [
|
||||||
'eddn-gateway.elite-markets.net',
|
'eddn-gateway.elite-markets.net',
|
||||||
'eddn-gateway.ed-td.space'
|
'eddn-gateway.ed-td.space'
|
||||||
];
|
]; // Must find a way to bind them to monitor
|
||||||
|
|
||||||
|
var stats = {
|
||||||
|
'gateway' : {},
|
||||||
|
'relay' : {}
|
||||||
|
}; // Stats placeholder
|
||||||
|
|
||||||
|
|
||||||
secondsToDurationString = function(seconds) {
|
secondsToDurationString = function(seconds) {
|
||||||
@ -19,7 +24,7 @@ secondsToDurationString = function(seconds) {
|
|||||||
|
|
||||||
if (hours > 24) {
|
if (hours > 24) {
|
||||||
days = Math.floor(hours / 24)
|
days = Math.floor(hours / 24)
|
||||||
hours = Math.floor((seconds - days * 24) / 3600);
|
hours = Math.floor((hours - days * 24) / 3600);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (hours < 10) {hours = "0" + hours;}
|
if (hours < 10) {hours = "0" + hours;}
|
||||||
@ -34,63 +39,78 @@ 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) {
|
var doUpdates = function(type){
|
||||||
return displayStats($('#gateway'), stats)
|
$("select[name=" + type + "] option").each(function(){
|
||||||
}
|
var currentItem = $(this).html(),
|
||||||
|
isSelected = $(this).is(':selected');
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
dataType: "json",
|
||||||
|
url: $(this).val(),
|
||||||
|
success: function(data){
|
||||||
|
d = new Date();
|
||||||
|
|
||||||
|
stats[type][currentItem]['lastUpdate'] = d.toString("yyyy-MM-dd HH:mm:ss");
|
||||||
|
stats[type][currentItem]['last'] = data;
|
||||||
|
|
||||||
|
if(isSelected)
|
||||||
|
showStats(type, currentItem);
|
||||||
|
|
||||||
|
var chart = $("#" + type + " .chart[data-name='" + currentItem + "']").highcharts();
|
||||||
|
|
||||||
|
shift = chart.get('inbound').data.length > 60;
|
||||||
|
chart.get('inbound').addPoint([d.getTime(), (data['inbound'] || {})['1min'] || 0], true, shift);
|
||||||
|
|
||||||
|
shift = chart.get('outbound').data.length > 60;
|
||||||
|
chart.get('outbound').addPoint([d.getTime(), (data['outbound'] || {})['1min'] || 0], true, shift);
|
||||||
|
|
||||||
|
if(type == 'gateway')
|
||||||
|
{
|
||||||
|
shift = chart.get('invalid').data.length > 60;
|
||||||
|
chart.get('invalid').addPoint([d.getTime(), (data['invalid'] || {})['1min'] || 0], true, shift);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
displayRelayStats = function(stats) {
|
var showStats = function(type, currentItem){
|
||||||
return displayStats($('#relay'), stats)
|
var el = $('#' + type),
|
||||||
}
|
currentItemStats = stats[type][currentItem]['last'];
|
||||||
|
|
||||||
formatStats = function() {
|
el.find(".inbound_1min").html((currentItemStats['inbound'] || {})['1min'] || 0);
|
||||||
$(".stat").each(function() {
|
el.find(".inbound_5min").html((currentItemStats["inbound"] || {})['5min'] || 0);
|
||||||
if ($(this).html() == "0") {
|
el.find(".inbound_60min").html((currentItemStats["inbound"] || {})['60min'] || 0);
|
||||||
$(this).addClass("warning");
|
|
||||||
|
if(type == 'gateway')
|
||||||
|
{
|
||||||
|
el.find(".invalid_1min").html((currentItemStats["invalid"] || {})['1min'] || 0);
|
||||||
|
el.find(".invalid_5min").html((currentItemStats["invalid"] || {})['5min'] || 0);
|
||||||
|
el.find(".invalid_60min").html((currentItemStats["invalid"] || {})['60min'] || 0);
|
||||||
}
|
}
|
||||||
else {
|
|
||||||
$(this).removeClass("warning");
|
el.find(".outbound_1min").html((currentItemStats["outbound"] || {})['1min'] || 0);
|
||||||
}
|
el.find(".outbound_5min").html((currentItemStats["outbound"] || {})['5min'] || 0);
|
||||||
});
|
el.find(".outbound_60min").html((currentItemStats["outbound"] || {})['60min'] || 0);
|
||||||
}
|
|
||||||
|
el.find(".update_timestamp").html(stats[type][currentItem]['lastUpdate']);
|
||||||
doUpdate = function(url, success) {
|
el.find(".version").html(currentItemStats['version'] || 'N/A');
|
||||||
$.ajax({
|
|
||||||
dataType: "json",
|
if (currentItemStats['uptime'])
|
||||||
url: url,
|
el.find(".uptime").html(secondsToDurationString(currentItemStats['uptime']));
|
||||||
success: success
|
else
|
||||||
});
|
el.find(".uptime").html('N/A');
|
||||||
}
|
|
||||||
|
el.find(".stat").removeClass("warning").each(function() {
|
||||||
getGatewayUrl = function() {
|
if ($(this).html() == "0")
|
||||||
return $("select[name=gateway]").val();
|
$(this).addClass("warning");
|
||||||
}
|
});
|
||||||
|
|
||||||
getRelayUrl = function() {
|
el.find(".chart").hide();
|
||||||
return $("select[name=relay]").val();
|
el.find(".chart[data-name='" + currentItem + "']").show();
|
||||||
}
|
$(window).trigger('resize'); // Fix wrong size in chart
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -98,6 +118,8 @@ getRelayUrl = function() {
|
|||||||
* Launch monitoring
|
* Launch monitoring
|
||||||
*/
|
*/
|
||||||
var start = function(){
|
var start = function(){
|
||||||
|
Highcharts.setOptions({global: {useUTC: false}});
|
||||||
|
|
||||||
// Grab gateways from monitor
|
// Grab gateways from monitor
|
||||||
$.ajax({
|
$.ajax({
|
||||||
dataType: "json",
|
dataType: "json",
|
||||||
@ -112,8 +134,45 @@ var start = function(){
|
|||||||
value: 'http://' + gateway + ':' + gatewayBottlePort + '/stats/',
|
value: 'http://' + gateway + ':' + gatewayBottlePort + '/stats/',
|
||||||
text : gateway
|
text : gateway
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
$('#gateway .charts').append(
|
||||||
|
$('<div>').addClass('chart')
|
||||||
|
.css('width', '100%')
|
||||||
|
.attr('data-name', gateway)
|
||||||
|
);
|
||||||
|
|
||||||
|
$("#gateway .chart[data-name='" + gateway + "']").highcharts({
|
||||||
|
chart: {
|
||||||
|
type: 'spline', animation: Highcharts.svg,
|
||||||
|
height: 200
|
||||||
|
},
|
||||||
|
title: { text: '', style: {display: 'none'} },
|
||||||
|
xAxis: {
|
||||||
|
type: 'datetime',
|
||||||
|
tickPixelInterval: 150
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
title: {text: ''},
|
||||||
|
plotLines: [{value: 0, width: 1, color: '#808080'}],
|
||||||
|
min: 0
|
||||||
|
},
|
||||||
|
tooltip: { enabled: false },
|
||||||
|
credits: { enabled: false },
|
||||||
|
exporting: { enabled: false },
|
||||||
|
series: [
|
||||||
|
{id: 'inbound', data: [], name: 'Messages received'},
|
||||||
|
{id: 'outbound', data: [], name: 'Messages passed to relay'},
|
||||||
|
{id: 'invalid', data: [], name: 'Invalid messages'}
|
||||||
|
]
|
||||||
|
}).hide();
|
||||||
|
|
||||||
|
stats['gateway'][gateway] = {};
|
||||||
});
|
});
|
||||||
doUpdate(getGatewayUrl(), displayGatewayStats);
|
|
||||||
|
doUpdates('gateway');
|
||||||
|
setInterval(function(){
|
||||||
|
doUpdates('gateway');
|
||||||
|
}, updateInterval);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -124,20 +183,58 @@ var start = function(){
|
|||||||
value: 'http://' + relay + ':' + relayBottlePort + '/stats/',
|
value: 'http://' + relay + ':' + relayBottlePort + '/stats/',
|
||||||
text : relay
|
text : relay
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
$('#relay .charts').append(
|
||||||
|
$('<div>').addClass('chart')
|
||||||
|
.css('width', '100%')
|
||||||
|
.attr('data-name', relay)
|
||||||
|
);
|
||||||
|
|
||||||
|
$("#relay .chart[data-name='" + relay + "']").highcharts({
|
||||||
|
chart: {
|
||||||
|
type: 'spline', animation: Highcharts.svg,
|
||||||
|
height: 200,
|
||||||
|
events: {
|
||||||
|
load: function(){ setTimeout(function(){$(window).trigger('resize');}, 250); }
|
||||||
|
},
|
||||||
|
marginRight: 10
|
||||||
|
},
|
||||||
|
title: { text: '', style: {display: 'none'} },
|
||||||
|
xAxis: {
|
||||||
|
type: 'datetime',
|
||||||
|
tickPixelInterval: 150
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
title: {text: ''},
|
||||||
|
plotLines: [{value: 0, width: 1, color: '#808080'}],
|
||||||
|
min: 0
|
||||||
|
},
|
||||||
|
tooltip: { enabled: false },
|
||||||
|
credits: { enabled: false },
|
||||||
|
exporting: { enabled: false },
|
||||||
|
series: [
|
||||||
|
{id: 'inbound', data: [], name: 'Messages received'},
|
||||||
|
{id: 'outbound', data: [], name: 'Messages passed to subscribers'}
|
||||||
|
]
|
||||||
|
}).hide();
|
||||||
|
|
||||||
|
stats['relay'][relay] = {};
|
||||||
});
|
});
|
||||||
|
|
||||||
// Attach events
|
doUpdates('relay');
|
||||||
$("select[name=gateway]").change(function() {doUpdate(getGatewayUrl(), displayGatewayStats);})
|
setInterval(function(){
|
||||||
$("select[name=relay]").change(function() {doUpdate(getRelayUrl(), displayRelayStats);})
|
doUpdates('relay');
|
||||||
|
}, updateInterval);
|
||||||
|
|
||||||
// Start updates interval
|
// Attach events
|
||||||
setInterval(doUpdates, updateInterval);
|
$("select[name=gateway]").change(function(){
|
||||||
doUpdates();
|
showStats('gateway', $(this).find('option:selected').html());
|
||||||
}
|
});
|
||||||
var doUpdates = function(){
|
$("select[name=relay]").change(function(){
|
||||||
doUpdate(getGatewayUrl(), displayGatewayStats);
|
showStats('relay', $(this).find('option:selected').html());
|
||||||
doUpdate(getRelayUrl(), displayRelayStats);
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
start();
|
start();
|
||||||
});
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user