EDDN/contrib/monitor/index.html
Athanasius cc68fbc644 Squashed commit of the following:
commit 84c75c17f76cff7e576402dd2a77eb52717e3758
Author: Athanasius <gitlab@miggy.org>
Date:   Wed Jun 24 20:00:58 2020 +0100

    Software jsGrid now uses cached data when sorting/drill changed

commit a9ed1d902c8301d62348eaa684eda5010a846ca1
Author: Athanasius <gitlab@miggy.org>
Date:   Wed Jun 24 16:49:47 2020 +0100

    Convert Schemas to jsGrid

commit 26fe4a7e0c997d71411d5159adafad24cff5dc74
Author: Athanasius <gitlab@miggy.org>
Date:   Wed Jun 24 16:20:57 2020 +0100

    Change schemas HTML to just div.tables

commit 45c86a901f8627a23f9b5c573b15c615cff40d8f
Author: Athanasius <gitlab@miggy.org>
Date:   Wed Jun 24 16:19:34 2020 +0100

    Remove defunct Uploaders section from index.html

commit 3680197f86c805a1472f2538f3135c8698201f4d
Author: Athanasius <gitlab@miggy.org>
Date:   Wed Jun 24 15:43:34 2020 +0100

    Style today/yesterday "0" as per boostrap td.warning

      The elements/classes/IDs are different so can't just have it use
    the actual bootstrap CSS.

commit ef855586305033854a3e74663f607c3ff68d3534
Author: Athanasius <gitlab@miggy.org>
Date:   Wed Jun 24 15:17:20 2020 +0100

    Sanitises producing the Softwares data array

      We were first making a dictionary only to immediately use it to make an
    array for jsgrid/highcharts to use, then never using the dictionary
    again.
      So, just generate the array to start with, no intermediate step.

      This also sanitised some of the variable names so it's more obvious
    what data they hold.

commit d5be067bb3bbe8837909e437f6ed099c65f66be7
Author: Athanasius <gitlab@miggy.org>
Date:   Tue Jun 23 20:10:20 2020 +0100

    Set padding on td elements to get size correct

      No need for that 37px line-height, it was a consequence of this
    padding on non-jsgrid table cells.

commit 109540131361cb6b44f55c506d913da6d43f3af2
Author: Athanasius <gitlab@miggy.org>
Date:   Tue Jun 23 19:58:32 2020 +0100

    Clicking back out of Software drilldown working

      * Also fixes CSS so all jsgrid rows are that 37px height.

commit f4c27fb53b33c3c28b7ad60b8e908a5dc330cce5
Author: Athanasius <gitlab@miggy.org>
Date:   Tue Jun 23 19:39:02 2020 +0100

    'side square' colouring on sorts and drilldown

commit 6c79f4b92bf1f9c73f760588e78ff874db2254a6
Author: Athanasius <gitlab@miggy.org>
Date:   Tue Jun 23 18:43:53 2020 +0100

    Drilldown *in* for Software -> Versions now works

commit 353b379d5a49aab826908f2c95f758d5fdd0114e
Author: Athanasius <gitlab@miggy.org>
Date:   Tue Jun 23 17:56:54 2020 +0100

    Starts work on displaying software -> version table drilldowns

      if/else in place, and the else handling the software*names*/totals
    table still works.

commit fe2f6f0e73787512c8b5ca511871792a393894ce
Author: Athanasius <gitlab@miggy.org>
Date:   Tue Jun 23 16:58:32 2020 +0100

    Sort order on different column is now the same as on previous column

      If we start on Today/Ascending then:

    	Yesterday -> Yesterday/Asc
    	Total     -> Total/Asc
    	Total     -> Total/Desc
    	Today     -> Today/Desc
    	Today     -> Today/Asc
    	Yesterday -> Yesterday/Asc
    	Total     -> Total/Asc
    	Total     -> Total/Desc

    i.e. it takes a second click on a column to change to the opposite sort
    order, not always defaulting to 'Asc' when you change column.

commit 9c471d2cebb5e26bca64f968b6846279fb488d84
Author: Athanasius <gitlab@miggy.org>
Date:   Tue Jun 23 16:37:26 2020 +0100

    Now changing the pie chart depending on current sort column

commit c1f07a38700860a859647cd563f0133965d9068d
Author: Athanasius <gitlab@miggy.org>
Date:   Tue Jun 23 12:24:33 2020 +0100

    Remember prior 'softwares' sort and re-apply for new data

      This defaults on first load as per:

    	var softwaresSort = ...

commit fa560cadd754fd5a934b9c926befe4d40651aa61
Author: Athanasius <gitlab@miggy.org>
Date:   Tue Jun 23 08:42:44 2020 +0100

    Sane initial sorting, and some cleanup.

     * We can specify a sort column and order, no need for the 'reverse'
       hack, which is just going to confuse users and doesn't cause initial
       sorting anyway.
     * The softwaresTotal list can just be an Array, and then actually
       matches what we were doing with jsGridSoftwareByName[] anyway, so
       just use it.

commit 05cc80d09b8107b94313481d20fdf3a94bd71b7a
Author: Athanasius <gitlab@miggy.org>
Date:   Mon Jun 22 21:53:59 2020 +0100

    Documents the data, and why it's in different formats

commit b567a1b452a5685fe296c9d8a3eb7aaae35d291f
Author: Athanasius <gitlab@miggy.org>
Date:   Mon Jun 22 21:43:30 2020 +0100

    Remove the long-since defunct dataUploaders bits

commit 282dd9df4d5200a3cc59e21005275440e1550464
Author: Athanasius <gitlab@miggy.org>
Date:   Mon Jun 22 21:41:13 2020 +0100

    Moving closer to understanding the data.

      * We'll now use an id'd div to put in a jsGrid set of divs per:
      	1) The totals per software
    	2) Each software's versions counts

    Currently this is working to display the software name totals, and
    attempts to add the per-software version-counts tables, but treats the
    data incorrectly.

commit 5bcf4fb0a23315f2d3029f0f328a5c7a4a8bdf1a
Author: Athanasius <gitlab@miggy.org>
Date:   Mon Jun 22 21:40:24 2020 +0100

    div for software tables needs an id, not a class.

      We want to put one div inside it per overal softwares and then one per
    specific software.

commit 90e1a34d4cda8e960dcd13b1f7000af8904a614e
Author: Athanasius <gitlab@miggy.org>
Date:   Mon Jun 22 18:16:56 2020 +0100

    Main Software table and pie chart rendering correctly

     * Having to force the row line-height to what FF ends up with in the
       old code, which is ~37px, not the ~20px specified.
     * Applying data-name to the .square elements so as to then later set
       their background colour.  Can't do this as they're created as the
       data isn't yet in place to lookup the colour.
     * Removes the commented out old version of all that code, as it's now
       jsgrid-ised in that rowRenderer.

commit dfd2d09513fb4dafe1bc4ec0e3a9fb32ba7518c1
Author: Athanasius <gitlab@miggy.org>
Date:   Mon Jun 22 17:41:08 2020 +0100

    Fix rendering of custom rowRenderer Software rows

     * As jsGrid adds its own table there's no need to have our own, just
       use the .table-responsive div
     * Use a rowRenderer function based on the existing code to make the row
     * But that means needing to ensure the <td> styling manually, as jsgrid
       does one table for its header and another for the data.  It would
       apply the configured styling to botj, but with the custom rowRenderer
       that doesn't happen.

commit 70bb2e822e4e5d8253f308b4c862127126731637
Author: Athanasius <gitlab@miggy.org>
Date:   Mon Jun 22 16:55:20 2020 +0100

    Enable the Software main pie chart to actually render

      * The code to add the data points to it initially had been commented
        out.
      * That 'sort the data' also is the only thing populating
        softwaresTotal.

commit 61e1a17a1fba63cdcc7ce016b304c39670d90a11
Author: Athanasius <gitlab@miggy.org>
Date:   Mon Jun 22 16:04:51 2020 +0100

    CSS: Prevent jsGrid tables from showing un-necessary scrollbars

commit 1109bf57122428b6603fcea9836f0b95c36ee31b
Author: Athanasius <gitlab@miggy.org>
Date:   Mon Jun 22 15:49:26 2020 +0100

    Placeholder to implement clicking into drilldowns

      For now I want to just get the generation of drilldowns converted to
    jsGrid.  Then I'll look into hooking up clicking the softwareName
    causing switching to displaying its drilldown.

commit 87b78c98a0f59f10010c29abc3ee40f1ca3536e1
Author: Athanasius <gitlab@miggy.org>
Date:   Mon Jun 22 14:54:30 2020 +0100

    Numeric sorting now DESC first-click

commit 571a058a3fa3658ef4b7c4f3f40beab37585eb33
Author: Athanasius <gitlab@miggy.org>
Date:   Mon Jun 22 14:13:56 2020 +0100

    More progress.  Headings, comma-formatted numbers, widths...

      * Column added for the high-chart colours, not yet implemented fully.
        This will rely on implementing a custom jsGrid field.
      * comma-separated thousands formatting on the numbers.
      * Some width settings to match the pre-jsGrid layout.

commit a73f069d014c9ff5ea98158afe4ea993f2109a2c
Author: Athanasius <gitlab@miggy.org>
Date:   Mon Jun 22 12:52:12 2020 +0100

    Replace Software table with sortable jsgrid

    This is very rough and ready, but works:

      * Defaults to no sort
      * Sort will initially be ascending, we want descending
      * All the old styling is lost
      * Not yet handling click-through to per-softwareName version tables

commit 2afb5f435617ed4fec9771a0f5e95ceef5fdd671
Author: Athanasius <gitlab@miggy.org>
Date:   Mon Jun 22 12:51:52 2020 +0100

    Include jsgrid css and js
2020-06-25 14:00:55 +01:00

416 lines
18 KiB
HTML

<!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" />
<title>EDDN Status</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<!-- JS-Grid -->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<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:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<script src="./js/date.js"></script>
<script type="text/javascript" src="./netdata/dashboard.js?v20181412"></script>
</head>
<body data-spy="scroll" data-target="#header-nav" data-offset="70">
<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="#monitoring">Server monitoring</a></li>
<li><a href="#gateways">Gateways</a></li>
<li><a href="#relays">Relays</a></li>
<li><a href="#software">Software</a></li>
<!--
<li><a href="#uploaders">Uploaders</a></li>
-->
<li><a href="#schemas">Schemas</a></li>
</ul>
<p class="navbar-right navbar-text">
<em>Provided by <a href="https://www.edsm.net/" target="_blank" class="navbar-link"><strong>EDSM</strong></a></em>
</p>
</div>
</div>
</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>
</section>
<section id="monitoring" class="container">
<div class="row">
<div class="col-md-12">
<h2>Server monitoring</h2>
</div>
</div>
<div class="row">
<div class="col-md-3 text-center">
<div data-netdata="system.ram"
data-dimensions="used|buffers|active|wired"
data-title="Used RAM"
data-chart-library="easypiechart"
data-append-options="percentage"
data-units="%"
data-easypiechart-max-value="100"
data-colors="#EE9911"
data-width="85%"
data-height="100%"></div>
</div>
<div class="col-md-3 text-center">
<div data-netdata="system.cpu"
data-title="CPU"
data-chart-library="gauge"
data-gauge-max-value="100"
data-units="%"
data-after="-420"
data-points="420"
data-width="100%"
data-height="100%"
data-colors="#22AA99"></div>
<br/>
<div data-netdata="system.load"
data-chart-library="dygraph"
data-dygraph-theme="sparkline"
data-width="100%"
data-height="50px"
data-after="-420"
data-points="420"></div>
</div>
<div class="col-md-3 text-center">
<div data-netdata="system.net"
data-dimensions="received"
data-title="Inbound Traffic"
data-chart-library="easypiechart"
data-after="-420"
data-points="420"
data-width="85%"
data-height="100%"></div>
</div>
<div class="col-md-3 text-center">
<div data-netdata="system.net"
data-dimensions="sent"
data-common-units="system.net.mainhead"
data-title="Outbound Traffic"
data-chart-library="easypiechart"
data-after="-420"
data-points="420"
data-width="85%"
data-height="100%"></div>
</div>
</div>
</section>
<section id="gateways" class="container">
<div class="row">
<div class="col-md-6">
<h2>Gateways</h2>
</div>
<div class="col-md-6">
<div class="text-right form-inline">
<select name="gateways" 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>Invalid messages</th>
<td class="invalid_1min stat">-</td>
<td class="invalid_5min stat">-</td>
<td class="invalid_60min stat">-</td>
</tr>
<tr>
<th>Outdated messages</th>
<td class="outdated_1min stat">-</td>
<td class="outdated_5min stat">-</td>
<td class="outdated_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-12 charts">
</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="relays" class="container">
<div class="row">
<div class="col-md-6">
<h2>Relays</h2>
</div>
<div class="col-md-6">
<div class="text-right form-inline">
<select name="relays" 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 duplicate</th>
<td class="duplicate_1min stat">-</td>
<td class="duplicate_5min stat">-</td>
<td class="duplicate_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-12 charts">
</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>
<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">
<div id="tables">
</div>
</div>
<div class="col-md-5">
<div class="chart" style="height: 450px;"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
Total hits calculated since May 5, 2015
</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="schemas" class="container">
<div class="row">
<div class="col-md-6">
<h2>Schemas <a href="./schemas.html"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></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">
<div id="tables">
</div>
</div>
<div class="col-md-5">
<div class="chart" style="height: 450px;"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
Total hits calculated since May 5, 2015
</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>
<footer>
<nav class="navbar navbar-default">
<div class="container">
<p class="navbar-text">
The <em>Elite: Dangerous Data Network</em> is volunteer-run and not affiliated with <a href="https://frontier.co.uk/" target="_blank">Frontier Developments</a>.
|
Charts by <a href="http://www.highcharts.com/" target="_blank">HighCharts</a>
</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="https://code.highcharts.com/5.0.12/highcharts.js"></script>
<script src="https://code.highcharts.com/5.0.12/modules/drilldown.js"></script>
<script src="./js/eddn.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-496332-23', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>