Finalize first monitor html version

contrib/monitor/index.html

@@ -37,10 +37,11 @@
             
             <div class="collapse navbar-collapse" id="header-nav">
                 <ul class="nav navbar-nav">
-                    <li><a href="#gateway">Gateway</a></li>
+                    <li><a href="#gateways">Gateways</a></li>
-                    <li><a href="#relay">Relay</a></li>
+                    <li><a href="#relays">Relays</a></li>
-                    <li><a href="#software">Software</a></li>
+                    <li><a href="#softwares">Softwares</a></li>
-                    <li><a href="#uploader">Uploader</a></li>
+                    <li><a href="#uploaders">Uploaders</a></li>
+                    <li><a href="#schemas">Schemas</a></li>
                 </ul>
             </div>
             
@@ -59,14 +60,14 @@
         </div>
     </section>
   
-    <section id="gateway" class="container">
+    <section id="gateways" class="container">
         <div class="row">
             <div class="col-md-6">
-                <h2>Gateway</h2>
+                <h2>Gateways</h2>
             </div>
             <div class="col-md-6">
                 <div class="text-right form-inline">
-                    <select name="gateway" class="form-control"></select>
+                    <select name="gateways" class="form-control"></select>
                 </div>
             </div>
         </div>
@@ -119,7 +120,7 @@
                         <div class="row">
                             <div class="col-md-4">
                                 <p class="text-muted small">
-                                    EDDN version <strong><span class="version">N/A</span></strong>.
+                                    EDDN version: <strong><span class="version">N/A</span></strong>.
                                 </p>
                             </div>
                             <div class="col-md-4">
@@ -129,24 +130,25 @@
                             </div>
                             <div class="col-md-4">
                                 <p class="text-muted small">
-                                    Last updated <strong><span class="update_timestamp">N/A</span></strong>.
+                                    Last updated: <strong><span class="update_timestamp">N/A</span></strong>.
                                 </p>
                             </div>
                         </div>
+                        
                     </div>
                 </div>
             </div>    
         </div>
     </section>
     
-    <section id="relay" class="container">
+    <section id="relays" class="container">
         <div class="row">
             <div class="col-md-6">
-                <h2>Relay</h2>
+                <h2>Relays</h2>
             </div>
             <div class="col-md-6">
                 <div class="text-right form-inline">
-                    <select name="relay" class="form-control"></select>
+                    <select name="relays" class="form-control"></select>
                 </div>
             </div>
         </div>
@@ -194,7 +196,7 @@
                         <div class="row">
                             <div class="col-md-4">
                                 <p class="text-muted small">
-                                    EDDN version <strong><span class="version">N/A</span></strong>.
+                                    EDDN version: <strong><span class="version">N/A</span></strong>.
                                 </p>
                             </div>
                             <div class="col-md-4">
@@ -204,20 +206,21 @@
                             </div>
                             <div class="col-md-4">
                                 <p class="text-muted small">
-                                    Last updated <strong><span class="update_timestamp">N/A</span></strong>.
+                                    Last updated: <strong><span class="update_timestamp">N/A</span></strong>.
                                 </p>
                             </div>
                         </div>
+                        
                     </div>
                 </div>
             </div>
         </div>
     </section>
     
-    <section id="software" class="container">
+    <section id="softwares" class="container">
         <div class="row">
             <div class="col-md-6">
-                <h2>Software</h2>
+                <h2>Softwares</h2>
             </div>
         </div>
         
@@ -225,17 +228,38 @@
             <div class="col-md-12">
                 <div class="panel panel-default">
                     <div class="panel-body">
-                    
+                        
+                        <div class="row">
+                            <div class="col-md-7">
+                                <table class="table">
+                                    <thead>
+                                        <tr>
+                                            <th style="width: 50%;"></th>
+                                            <th>Today hits</th>
+                                            <th>Yesterday hits</th>
+                                            <th>Total hits</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div class="col-md-5">
+                                <div class="chart" style="height: 450px;"></div>
+                            </div>
+                        </div>
+                        
                     </div>
                 </div>
             </div>
         </div>
     </section>
     
-    <section id="uploader" class="container">
+    <section id="uploaders" class="container">
         <div class="row">
             <div class="col-md-6">
-                <h2>Uploader</h2>
+                <h2>Uploaders (Top 20)</h2>
             </div>
         </div>
         
@@ -243,7 +267,67 @@
             <div class="col-md-12">
                 <div class="panel panel-default">
                     <div class="panel-body">
-                    
+                        
+                        <div class="row">
+                            <div class="col-md-7">
+                                <table class="table">
+                                    <thead>
+                                        <tr>
+                                            <th style="width: 50%;"></th>
+                                            <th>Today hits</th>
+                                            <th>Yesterday hits</th>
+                                            <th>Total hits</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div class="col-md-5">
+                                <div class="chart" style="height: 450px;"></div>
+                            </div>
+                        </div>
+                        
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <section id="schemas" class="container">
+        <div class="row">
+            <div class="col-md-6">
+                <h2>Schemas</h2>
+            </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-7">
+                                <table class="table">
+                                    <thead>
+                                        <tr>
+                                            <th style="width: 50%;"></th>
+                                            <th>Today hits</th>
+                                            <th>Yesterday hits</th>
+                                            <th>Total hits</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div class="col-md-5">
+                                <div class="chart" style="height: 450px;"></div>
+                            </div>
+                        </div>
+                        
                     </div>
                 </div>
             </div>

contrib/monitor/js/eddn.js

@@ -6,15 +6,19 @@ var updateInterval      = 60000,
     relayBottlePort     = 9090,
     
     relays              = [
-        'eddn-gateway.elite-markets.net',
+        'eddn-relay.elite-markets.net',
-        'eddn-gateway.ed-td.space'
+        'eddn-relay.ed-td.space'
     ]; // Must find a way to bind them to monitor
     
 var stats = {
-    'gateway' : {},
+    'gateways' : {},
-    'relay'   : {}
+    'relays'   : {}
 }; // Stats placeholder
 
+formatNumber = function(num) {
+    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
+}
+
 
 secondsToDurationString = function(seconds) {
   var hours   = Math.floor(seconds / 3600);
@@ -40,6 +44,192 @@ secondsToDurationString = function(seconds) {
 }
 
 
+var doUpdateSoftwares = function()
+{
+    var yesterday   = Date.parse('yesterday').toString("yyyy-MM-dd")
+    var today       = Date.parse('today').toString("yyyy-MM-dd")
+    
+    $.ajax({
+        dataType: "json",
+        url: monitorEndPoint + 'getSoftwares/?dateStart=' + yesterday + '&dateEnd = ' + today,
+        success: function(softwares){
+            $.ajax({
+                dataType: "json",
+                url: monitorEndPoint + 'getTotalSoftwares/',
+                success: function(softwaresTotal){
+                    var chart   = $('#softwares .chart').highcharts(),
+                        series  = chart.get('softwares');
+                    
+                    $('#softwares .table tbody').empty();
+                    
+                    $.each(softwaresTotal, function(software, hits){
+                        $('#softwares .table tbody').append(
+                            $('<tr>').attr('data-name', software).append(
+                                $('<td>').html('<strong>' + software + '</strong>')
+                            )
+                            .append(
+                                $('<td>').addClass('stat today').html(formatNumber(softwares[today][software] || 0))
+                            )
+                            .append(
+                                $('<td>').addClass('stat yesterday').html(formatNumber(softwares[yesterday][software] || 0))
+                            )
+                            .append(
+                                $('<td>').addClass('stat total').html('<strong>' + formatNumber(hits) + '</strong>')
+                            )
+                        );
+                        
+                        var alreadyInChart = false;
+                        for( var i = 0, len = chart.get('softwares').data.length; i < len; i++ )
+                        {
+                            if(chart.get('softwares').data[i]['name'] == software)
+                            {
+                                chart.get('softwares').data[i].update(parseInt(hits), false);
+                                alreadyInChart = true;
+                                break;
+                            }
+                        }
+                        
+                        if(alreadyInChart === false)
+                            series.addPoint({name: software, y: parseInt(hits)}, false);
+                    });
+                    
+                    chart.redraw();
+                    
+                    $('#softwares').find(".stat").removeClass("warning").each(function() {
+                        if ($(this).html() == "0")
+                            $(this).addClass("warning");
+                    });
+                }
+            });
+        }
+    });
+}
+
+
+var doUpdateUploaders = function()
+{
+    var yesterday   = Date.parse('yesterday').toString("yyyy-MM-dd")
+    var today       = Date.parse('today').toString("yyyy-MM-dd")
+    
+    $.ajax({
+        dataType: "json",
+        url: monitorEndPoint + 'getUploaders/?dateStart=' + yesterday + '&dateEnd = ' + today,
+        success: function(uploaders){
+            $.ajax({
+                dataType: "json",
+                url: monitorEndPoint + 'getTotalUploaders/',
+                success: function(uploadersTotal){
+                    var chart   = $('#uploaders .chart').highcharts(),
+                        series  = chart.get('uploaders');
+                    
+                    $('#uploaders .table tbody').empty();
+                    
+                    $.each(uploadersTotal, function(uploader, hits){
+                        $('#uploaders .table tbody').append(
+                            $('<tr>').attr('data-name', uploader).append(
+                                $('<td>').html('<strong>' + uploader + '</strong>')
+                            )
+                            .append(
+                                $('<td>').addClass('stat today').html(formatNumber(uploaders[today][uploader] || 0))
+                            )
+                            .append(
+                                $('<td>').addClass('stat yesterday').html(formatNumber(uploaders[yesterday][uploader] || 0))
+                            )
+                            .append(
+                                $('<td>').addClass('stat total').html('<strong>' + formatNumber(hits) + '</strong>')
+                            )
+                        );
+                        
+                        var alreadyInChart = false;
+                        for( var i = 0, len = chart.get('uploaders').data.length; i < len; i++ )
+                        {
+                            if(chart.get('uploaders').data[i]['name'] == uploader)
+                            {
+                                chart.get('uploaders').data[i].update(parseInt(hits), false);
+                                alreadyInChart = true;
+                                break;
+                            }
+                        }
+                        
+                        if(alreadyInChart === false)
+                            series.addPoint({name: uploader, y: parseInt(hits)}, false);
+                    });
+                    
+                    chart.redraw();
+                    
+                    $('#uploaders').find(".stat").removeClass("warning").each(function() {
+                        if ($(this).html() == "0")
+                            $(this).addClass("warning");
+                    });
+                }
+            });
+        }
+    });
+}
+
+
+var doUpdateSchemas = function()
+{
+    var yesterday   = Date.parse('yesterday').toString("yyyy-MM-dd")
+    var today       = Date.parse('today').toString("yyyy-MM-dd")
+    
+    $.ajax({
+        dataType: "json",
+        url: monitorEndPoint + 'getSchemas/?dateStart=' + yesterday + '&dateEnd = ' + today,
+        success: function(schemas){
+            $.ajax({
+                dataType: "json",
+                url: monitorEndPoint + 'getTotalSchemas/',
+                success: function(schemasTotal){
+                    var chart   = $('#schemas .chart').highcharts(),
+                        series  = chart.get('schemas');
+                    
+                    $('#schemas .table tbody').empty();
+                    
+                    $.each(schemasTotal, function(schema, hits){
+                        $('#schemas .table tbody').append(
+                            $('<tr>').attr('data-name', schema).append(
+                                $('<td>').html('<strong>' + schema + '</strong>')
+                            )
+                            .append(
+                                $('<td>').addClass('stat today').html(formatNumber(schemas[today][schema] || 0))
+                            )
+                            .append(
+                                $('<td>').addClass('stat yesterday').html(formatNumber(schemas[yesterday][schema] || 0))
+                            )
+                            .append(
+                                $('<td>').addClass('stat total').html('<strong>' + formatNumber(hits) + '</strong>')
+                            )
+                        );
+                        
+                        var alreadyInChart = false;
+                        for( var i = 0, len = chart.get('schemas').data.length; i < len; i++ )
+                        {
+                            if(chart.get('schemas').data[i]['name'] == schema)
+                            {
+                                chart.get('schemas').data[i].update(parseInt(hits), false);
+                                alreadyInChart = true;
+                                break;
+                            }
+                        }
+                        
+                        if(alreadyInChart === false)
+                            series.addPoint({name: schema, y: parseInt(hits)}, false);
+                    });
+                    
+                    chart.redraw();
+                    
+                    $('#schemas').find(".stat").removeClass("warning").each(function() {
+                        if ($(this).html() == "0")
+                            $(this).addClass("warning");
+                    });
+                }
+            });
+        }
+    });
+}
+
+
 var doUpdates = function(type){
     $("select[name=" + type + "] option").each(function(){
         var currentItem = $(this).html(),
@@ -65,7 +255,7 @@ var doUpdates = function(type){
                 shift = chart.get('outbound').data.length > 60;
                 chart.get('outbound').addPoint([d.getTime(), (data['outbound'] || {})['1min'] || 0], true, shift);
                 
-                if(type == 'gateway')
+                if(type == 'gateways')
                 {
                     shift = chart.get('invalid').data.length > 60;
                     chart.get('invalid').addPoint([d.getTime(), (data['invalid'] || {})['1min'] || 0], true, shift);
@@ -83,7 +273,7 @@ var showStats = function(type, currentItem){
     el.find(".inbound_5min").html((currentItemStats["inbound"] || {})['5min'] || 0);
     el.find(".inbound_60min").html((currentItemStats["inbound"] || {})['60min'] || 0);
     
-    if(type == 'gateway')
+    if(type == 'gateways')
     {
         el.find(".invalid_1min").html((currentItemStats["invalid"] || {})['1min'] || 0);
         el.find(".invalid_5min").html((currentItemStats["invalid"] || {})['5min'] || 0);
@@ -130,21 +320,20 @@ var start       = function(){
                 gateway = gateway.replace('tcp://', '');
                 gateway = gateway.replace(':8500', '');
                 
-                $("select[name=gateway]").append($('<option>', { 
+                $("select[name=gateways]").append($('<option>', { 
                     value: 'http://' + gateway + ':' + gatewayBottlePort + '/stats/',
                     text : gateway
                 }));
                 
-                $('#gateway .charts').append(
+                $('#gateways .charts').append(
                                         $('<div>').addClass('chart')
                                                   .css('width', '100%')
                                                   .attr('data-name', gateway)
                                      );
                                      
-                $("#gateway .chart[data-name='" + gateway + "']").highcharts({
+                $("#gateways .chart[data-name='" + gateway + "']").highcharts({
                     chart: {
-                        type: 'spline', animation: Highcharts.svg,
+                        type: 'spline', animation: Highcharts.svg
-                        height: 200
                     },
                     title: { text: '', style: {display: 'none'} },
                     xAxis: {
@@ -160,18 +349,18 @@ var start       = function(){
                     credits: { enabled: false },
                     exporting: { enabled: false },
                     series: [
-                        {id: 'inbound', data: [], name: 'Messages received'}, 
+                        {id: 'inbound', data: [], name: 'Messages received', zIndex: 300}, 
-                        {id: 'outbound', data: [], name: 'Messages passed to relay'}, 
+                        {id: 'outbound', data: [], name: 'Messages passed to relay', zIndex: 200}, 
-                        {id: 'invalid', data: [], name: 'Invalid messages'}
+                        {id: 'invalid', data: [], name: 'Invalid messages', zIndex: 1}
                     ]
                 }).hide();
                 
-                stats['gateway'][gateway] = {};
+                stats['gateways'][gateway] = {};
             });
             
-            doUpdates('gateway');
+            doUpdates('gateways');
             setInterval(function(){
-                doUpdates('gateway');
+                doUpdates('gateways');
             }, updateInterval);
         }
     });
@@ -179,21 +368,20 @@ var start       = function(){
     // Grab relays
     relays = relays.sort();
     $.each(relays, function(k, relay){
-        $("select[name=relay]").append($('<option>', { 
+        $("select[name=relays]").append($('<option>', { 
             value: 'http://' + relay + ':' + relayBottlePort + '/stats/',
             text : relay
         }));
                 
-        $('#relay .charts').append(
+        $('#relays .charts').append(
                                 $('<div>').addClass('chart')
                                           .css('width', '100%')
                                           .attr('data-name', relay)
                              );
                              
-        $("#relay .chart[data-name='" + relay + "']").highcharts({
+        $("#relays .chart[data-name='" + relay + "']").highcharts({
             chart: {
                 type: 'spline', animation: Highcharts.svg,
-                height: 200,
                 events: {
                     load: function(){ setTimeout(function(){$(window).trigger('resize');}, 250); }
                 },
@@ -213,25 +401,91 @@ var start       = function(){
             credits: { enabled: false },
             exporting: { enabled: false },
             series: [
-                {id: 'inbound', data: [], name: 'Messages received'}, 
+                {id: 'inbound', data: [], name: 'Messages received', zIndex: 300}, 
-                {id: 'outbound', data: [], name: 'Messages passed to subscribers'}
+                {id: 'outbound', data: [], name: 'Messages passed to subscribers', zIndex: 200}
             ]
         }).hide();
         
-        stats['relay'][relay] = {};
+        stats['relays'][relay] = {};
     });
     
-    doUpdates('relay');
+    doUpdates('relays');
     setInterval(function(){
-        doUpdates('relay');
+        doUpdates('relays');
     }, updateInterval);
     
-    // Attach events
+    // Grab software from monitor
-    $("select[name=gateway]").change(function(){
+    $('#softwares .chart').highcharts({
-        showStats('gateway', $(this).find('option:selected').html());
+        chart: {
+            type: 'pie', animation: Highcharts.svg
+        },
+        title: { text: '', style: {display: 'none'} },
+        credits: { enabled: false },
+        tooltip: { headerFormat: '', pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>' },
+        legend: { enabled: false },
+        plotOptions: {pie: {allowPointSelect: false,dataLabels: { enabled: false }}},
+        series: [{
+            id: 'softwares',
+            type: 'pie',
+            data: []
+        }]
     });
-    $("select[name=relay]").change(function(){
+    
-        showStats('relay', $(this).find('option:selected').html());
+    doUpdateSoftwares();
+    setInterval(function(){
+        doUpdateSoftwares();
+    }, updateInterval);
+    
+    // Grab uploader from monitor
+    $('#uploaders .chart').highcharts({
+        chart: {
+            type: 'pie', animation: Highcharts.svg
+        },
+        title: { text: '', style: {display: 'none'} },
+        credits: { enabled: false },
+        tooltip: { headerFormat: '', pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>' },
+        legend: { enabled: false },
+        plotOptions: {pie: {allowPointSelect: false,dataLabels: { enabled: false }}},
+        series: [{
+            id: 'uploaders',
+            type: 'pie',
+            data: []
+        }]
+    });
+    
+    doUpdateUploaders();
+    setInterval(function(){
+        doUpdateUploaders();
+    }, updateInterval);
+    
+    // Grab schema from monitor
+    $('#schemas .chart').highcharts({
+        chart: {
+            type: 'pie', animation: Highcharts.svg
+        },
+        title: { text: '', style: {display: 'none'} },
+        credits: { enabled: false },
+        tooltip: { headerFormat: '', pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>' },
+        legend: { enabled: false },
+        plotOptions: {pie: {allowPointSelect: false,dataLabels: { enabled: false }}},
+        series: [{
+            id: 'schemas',
+            type: 'pie',
+            data: []
+        }]
+    });
+    
+    doUpdateSchemas();
+    setInterval(function(){
+        doUpdateSchemas();
+    }, updateInterval); 
+    
+    // Attach events
+    $("select[name=gateways]").change(function(){
+        showStats('gateways', $(this).find('option:selected').html());
+    });
+    $("select[name=relays]").change(function(){
+        showStats('relays', $(this).find('option:selected').html());
     });    
 }