diff options
-rw-r--r-- | config-jarmon-proton.js (renamed from config-jarmon.js) | 75 | ||||
-rw-r--r-- | config-jarmon-winston.js | 151 | ||||
-rwxr-xr-x | index.html.gen | 7 | ||||
-rw-r--r-- | jarmon-style/style.scss | 4 | ||||
-rw-r--r-- | jarmon.html.part | 35 | ||||
-rw-r--r-- | style.scss | 2 |
6 files changed, 224 insertions, 50 deletions
diff --git a/config-jarmon.js b/config-jarmon-proton.js index 2159221..532f802 100644 --- a/config-jarmon.js +++ b/config-jarmon-proton.js @@ -13,27 +13,26 @@ $(function() { } } - var proton = 'https://proton.parabola.nu/collectd/proton.parabola.nu/' - var winston = 'https://winston.parabola.nu/collectd/winston.parabola.nu/' + var srv = 'https://proton.parabola.nu/collectd/proton.parabola.nu/' var tabRecipes = [ ['Overview', ['cpu', 'memory', 'swap-use']], ['Iface', ['interface-inet', 'interface-lvpn', 'interface-lo']], - ['Other', ['load', 'swap-use', 'swap-io', 'users', 'entropy', 'uptime']] + ['Other', ['load', 'swap-use', 'swap-io', 'users', 'entropy', 'uptime']], ]; var chartRecipes = { 'cpu': { title: 'CPU Usage', data: [ - [proton+'cpu-0/cpu-steal.rrd', 0, 'Steal', 'jiffy'], - [proton+'cpu-0/cpu-interrupt.rrd', 0, 'IRQ', 'jiffy'], - [proton+'cpu-0/cpu-softirq.rrd', 0, 'SoftIRQ', 'jiffy'], - [proton+'cpu-0/cpu-system.rrd', 0, 'System', 'jiffy'], - [proton+'cpu-0/cpu-wait.rrd', 0, 'IO', 'jiffy'], - [proton+'cpu-0/cpu-user.rrd', 0, 'User', 'jiffy'], - //[proton+'cpu-0/cpu-nice.rrd', 0, 'Nice', 'jiffy'], - [proton+'cpu-0/cpu-idle.rrd', 0, 'Idle', 'jiffy'], + [srv+'cpu-0/cpu-steal.rrd', 0, 'Steal', 'jiffy'], + [srv+'cpu-0/cpu-interrupt.rrd', 0, 'IRQ', 'jiffy'], + [srv+'cpu-0/cpu-softirq.rrd', 0, 'SoftIRQ', 'jiffy'], + [srv+'cpu-0/cpu-system.rrd', 0, 'System', 'jiffy'], + [srv+'cpu-0/cpu-wait.rrd', 0, 'IO', 'jiffy'], + [srv+'cpu-0/cpu-user.rrd', 0, 'User', 'jiffy'], + //[srv+'cpu-0/cpu-nice.rrd', 0, 'Nice', 'jiffy'], + [srv+'cpu-0/cpu-idle.rrd', 0, 'Idle', 'jiffy'], ], options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS, @@ -44,12 +43,12 @@ $(function() { 'memory': { title: 'Memory', data: [ - [proton+'memory/memory-used.rrd', 0, 'Used', 'B'], - [proton+'memory/memory-slab_unrecl.rrd', 0, 'Slab', 'B'], - [proton+'memory/memory-slab_recl.rrd', 0, 'Slab (Recl)', 'B'], - [proton+'memory/memory-cached.rrd', 0, 'Cached', 'B'], - [proton+'memory/memory-buffered.rrd', 0, 'Buffered', 'B'], - [proton+'memory/memory-free.rrd', 0, 'Free', 'B'] + [srv+'memory/memory-used.rrd', 0, 'Used', 'B'], + [srv+'memory/memory-slab_unrecl.rrd', 0, 'Slab', 'B'], + [srv+'memory/memory-slab_recl.rrd', 0, 'Slab (Recl)', 'B'], + [srv+'memory/memory-cached.rrd', 0, 'Cached', 'B'], + [srv+'memory/memory-buffered.rrd', 0, 'Buffered', 'B'], + [srv+'memory/memory-free.rrd', 0, 'Free', 'B'] ], options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS, jarmon.Chart.STACKED_OPTIONS) @@ -58,9 +57,9 @@ $(function() { 'load': { title: 'Load Average', data: [ - [proton+'load/load.rrd', 'shortterm', 'Short Term', ''], - [proton+'load/load.rrd', 'midterm', 'Medium Term', ''], - [proton+'load/load.rrd', 'longterm', 'Long Term', ''] + [srv+'load/load.rrd', 'shortterm', 'Short Term (1m)', ''], + [srv+'load/load.rrd', 'midterm', 'Medium Term (5m)', ''], + [srv+'load/load.rrd', 'longterm', 'Long Term (15m)', ''] ], options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS) }, @@ -68,8 +67,8 @@ $(function() { 'interface-inet': { title: 'ens18 Throughput', data: [ - [proton+'interface-ens18/if_octets.rrd', 'tx', 'Transmit', 'bit/s', function (v) { return -v*8; }], - [proton+'interface-ens18/if_octets.rrd', 'rx', 'Receive', 'bit/s', function (v) { return v*8; }] + [srv+'interface-ens18/if_octets.rrd', 'tx', 'Transmit', 'bit/s', function (v) { return -v*8; }], + [srv+'interface-ens18/if_octets.rrd', 'rx', 'Receive', 'bit/s', function (v) { return v*8; }] ], options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS) }, @@ -77,8 +76,8 @@ $(function() { 'interface-lvpn': { title: 'lvpn Throughput', data: [ - [proton+'interface-lvpn/if_octets.rrd', 'tx', 'Transmit', 'bit/s', function (v) { return -v*8; }], - [proton+'interface-lvpn/if_octets.rrd', 'rx', 'Receive', 'bit/s', function (v) { return v*8; }] + [srv+'interface-lvpn/if_octets.rrd', 'tx', 'Transmit', 'bit/s', function (v) { return -v*8; }], + [srv+'interface-lvpn/if_octets.rrd', 'rx', 'Receive', 'bit/s', function (v) { return v*8; }] ], options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS) }, @@ -86,8 +85,8 @@ $(function() { 'interface-lo': { title: 'lo Throughput', data: [ - [proton+'interface-lo/if_octets.rrd', 'tx', 'Transmit', 'bit/s', function (v) { return -v*8; }], - [proton+'interface-lo/if_octets.rrd', 'rx', 'Receive', 'bit/s', function (v) { return v*8; }] + [srv+'interface-lo/if_octets.rrd', 'tx', 'Transmit', 'bit/s', function (v) { return -v*8; }], + [srv+'interface-lo/if_octets.rrd', 'rx', 'Receive', 'bit/s', function (v) { return v*8; }] ], options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS) }, @@ -95,7 +94,7 @@ $(function() { 'entropy': { title: 'Entropy', data: [ - [proton+'entropy/entropy.rrd', 0, 'Entropy', 'b'] + [srv+'entropy/entropy.rrd', 0, 'Entropy', 'b'] ], options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS, @@ -105,7 +104,7 @@ $(function() { 'users': { title: 'Users', data: [ - [proton+'users/users.rrd', 0, 'Users', 'users'] + [srv+'users/users.rrd', 0, 'Users', 'users'] ], options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS, @@ -115,7 +114,7 @@ $(function() { 'uptime': { title: 'Uptime', data: [ - [proton+'uptime/uptime.rrd', 0, 'Uptime', 'days', function(v) { return v/(60*60*24); }] + [srv+'uptime/uptime.rrd', 0, 'Uptime', 'days', function(v) { return v/(60*60*24); }] ], options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS, @@ -125,9 +124,9 @@ $(function() { 'swap-use': { title: 'Swap Usage', data: [ - [proton+'swap/swap-used.rrd', 0, 'Used', 'B'], - [proton+'swap/swap-cached.rrd', 0, 'Cached', 'B'], - [proton+'swap/swap-free.rrd', 0, 'Free', 'B'] + [srv+'swap/swap-used.rrd', 0, 'Used', 'B'], + [srv+'swap/swap-cached.rrd', 0, 'Cached', 'B'], + [srv+'swap/swap-free.rrd', 0, 'Free', 'B'] ], options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS, jarmon.Chart.STACKED_OPTIONS) @@ -136,21 +135,21 @@ $(function() { 'swap-io': { title: 'Swap IO', data: [ - /* In pages unless the Swap.ReportBytes option is set */ - [proton+'swap/swap_io-in.rrd', 0, 'In', 'page'], - [proton+'swap/swap_io-out.rrd', 0, 'Out', 'page'] + // In pages unless the Swap.ReportBytes option is set + [srv+'swap/swap_io-in.rrd', 0, 'In', 'page'], + [srv+'swap/swap_io-out.rrd', 0, 'Out', 'page'] ], options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS) } }; - var chartTemplate = $('.chart-container').remove(); + var chartTemplate = $(".jarmon.proton .chart-container").remove(); jarmon.buildTabbedChartUi( chartTemplate, chartRecipes, - $('.tabbed-chart-interface'), + $('.jarmon.proton .tabbed-chart-interface'), tabRecipes, - $('.chartRangeControl') + $('.jarmon.proton .chartRangeControl') ); }); diff --git a/config-jarmon-winston.js b/config-jarmon-winston.js new file mode 100644 index 0000000..e0dfeaa --- /dev/null +++ b/config-jarmon-winston.js @@ -0,0 +1,151 @@ +/* Copyright (c) Richard Wall + * See LICENSE for details. + * + * Some example recipes for Collectd RRD data - you *will* need to modify this + * based on the RRD data available on your system. + */ + +$(function() { + + for (var i = 0; i < jarmon.timeRangeShortcuts.length; i++) { + if (jarmon.timeRangeShortcuts[i][0] === 'last day') { + jarmon.timeRangeShortcuts[i][2] = true; + } + } + + var srv = 'https://winston.parabola.nu/collectd/winston.parabola.nu/' + + var tabRecipes = [ + ['wOverview', ['wload', 'wmemory', 'winterface-inet']], + //['wOverview', [/*'cpu', */'wmemory'/*, 'swap-use'*/]], + //['wIface', ['winterface-inet', /*'interface-lvpn',*/ 'winterface-lo']], + //['wOther', ['wload', /*'swap-use', 'swap-io', 'users', 'entropy', 'uptime'*/]], + ]; + + var chartRecipes = { + /* + 'cpu': { + title: 'CPU Usage', + data: [ + [srv+'cpu-0/cpu-steal.rrd', 0, 'Steal', 'jiffy'], + [srv+'cpu-0/cpu-interrupt.rrd', 0, 'IRQ', 'jiffy'], + [srv+'cpu-0/cpu-softirq.rrd', 0, 'SoftIRQ', 'jiffy'], + [srv+'cpu-0/cpu-system.rrd', 0, 'System', 'jiffy'], + [srv+'cpu-0/cpu-wait.rrd', 0, 'IO', 'jiffy'], + [srv+'cpu-0/cpu-user.rrd', 0, 'User', 'jiffy'], + //[srv+'cpu-0/cpu-nice.rrd', 0, 'Nice', 'jiffy'], + [srv+'cpu-0/cpu-idle.rrd', 0, 'Idle', 'jiffy'], + ], + options: jQuery.extend(true, {}, + jarmon.Chart.BASE_OPTIONS, + jarmon.Chart.STACKED_OPTIONS, + {yaxis: {min: 0, max: 110}}) + }, + */ + + 'wmemory': { + title: 'Memory', + data: [ + [srv+'memory/memory-used.rrd', 0, 'Used', 'B'], + [srv+'memory/memory-slab_unrecl.rrd', 0, 'Slab', 'B'], + [srv+'memory/memory-slab_recl.rrd', 0, 'Slab (Recl)', 'B'], + [srv+'memory/memory-cached.rrd', 0, 'Cached', 'B'], + [srv+'memory/memory-buffered.rrd', 0, 'Buffered', 'B'], + [srv+'memory/memory-free.rrd', 0, 'Free', 'B'] + ], + options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS, + jarmon.Chart.STACKED_OPTIONS) + }, + + 'wload': { + title: 'Load Average', + data: [ + [srv+'load/load.rrd', 'shortterm', 'Short Term (1m)', ''], + [srv+'load/load.rrd', 'midterm', 'Medium Term (5m)', ''], + [srv+'load/load.rrd', 'longterm', 'Long Term (15m)', ''] + ], + options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS) + }, + + 'winterface-inet': { + title: 'eth0 Throughput', + data: [ + [srv+'interface-eth0/if_octets.rrd', 'tx', 'Transmit', 'bit/s', function (v) { return -v*8; }], + [srv+'interface-eth0/if_octets.rrd', 'rx', 'Receive', 'bit/s', function (v) { return v*8; }] + ], + options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS) + }, + + 'winterface-lo': { + title: 'lo Throughput', + data: [ + [srv+'interface-lo/if_octets.rrd', 'tx', 'Transmit', 'bit/s', function (v) { return -v*8; }], + [srv+'interface-lo/if_octets.rrd', 'rx', 'Receive', 'bit/s', function (v) { return v*8; }] + ], + options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS) + }, + + /* + 'entropy': { + title: 'Entropy', + data: [ + [srv+'entropy/entropy.rrd', 0, 'Entropy', 'b'] + ], + options: jQuery.extend(true, {}, + jarmon.Chart.BASE_OPTIONS, + {series: {lines: {fill: 0.5}}}) + }, + + 'users': { + title: 'Users', + data: [ + [srv+'users/users.rrd', 0, 'Users', 'users'] + ], + options: jQuery.extend(true, {}, + jarmon.Chart.BASE_OPTIONS, + {series: {lines: {fill: 0.5}}}) + }, + + 'uptime': { + title: 'Uptime', + data: [ + [srv+'uptime/uptime.rrd', 0, 'Uptime', 'days', function(v) { return v/(60*60*24); }] + ], + options: jQuery.extend(true, {}, + jarmon.Chart.BASE_OPTIONS, + {series: {lines: {fill: 0.5}}}) + }, + + 'swap-use': { + title: 'Swap Usage', + data: [ + [srv+'swap/swap-used.rrd', 0, 'Used', 'B'], + [srv+'swap/swap-cached.rrd', 0, 'Cached', 'B'], + [srv+'swap/swap-free.rrd', 0, 'Free', 'B'] + ], + options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS, + jarmon.Chart.STACKED_OPTIONS) + }, + + 'swap-io': { + title: 'Swap IO', + data: [ + // In pages unless the Swap.ReportBytes option is set + [srv+'swap/swap_io-in.rrd', 0, 'In', 'page'], + [srv+'swap/swap_io-out.rrd', 0, 'Out', 'page'] + ], + options: jQuery.extend(true, {}, jarmon.Chart.BASE_OPTIONS) + } + */ + }; + + var chartTemplate = $(".jarmon.winston .chart-container").remove(); + + jarmon.buildTabbedChartUi( + chartTemplate, + chartRecipes, + $('.jarmon.winston .tabbed-chart-interface'), + tabRecipes, + $('.jarmon.winston .chartRangeControl') + ); +}); diff --git a/index.html.gen b/index.html.gen index da0a0a7..b6fd603 100755 --- a/index.html.gen +++ b/index.html.gen @@ -13,9 +13,10 @@ echo '<!DOCTYPE html> <link rel="stylesheet" type="text/css" href="jarmon-style/jquerytools.tabs.tabs-no-images.css" /> <link rel="stylesheet" type="text/css" href="jarmon-style/jquerytools.dateinput.skin1.css" /> - <script type="text/javascript" src="jarmon-dependencies.js"></script> - <script type="text/javascript" src="jarmon.js"></script> - <script type="text/javascript" src="config-jarmon.js"></script> + <script src="jarmon-dependencies.js"></script> + <script src="jarmon.js"></script> + <script src="config-jarmon-proton.js"></script> + <script src="config-jarmon-winston.js"></script> </head> <body>' cat jarmon.html.part tls.html.part crtsh.html.part diff.html.part diff --git a/jarmon-style/style.scss b/jarmon-style/style.scss index 6e12541..81f6077 100644 --- a/jarmon-style/style.scss +++ b/jarmon-style/style.scss @@ -1,5 +1,5 @@ -.jarmon-proton { - width: 50%; +.jarmon { + width: 32%; border: solid 1px black; padding: -1px; border-radius: 4px; diff --git a/jarmon.html.part b/jarmon.html.part index afec6f4..65ddede 100644 --- a/jarmon.html.part +++ b/jarmon.html.part @@ -1,4 +1,10 @@ -<div class="jarmon-proton"> +<div class="jarmon proton"> + <div class="chart-container"> + <h2 class="title"></h2> + <div class="error"></div> + <div class="chart"></div> + <div class="graph-legend"></div> + </div> <div class="chartRangeControl"> <form> <div class="range-inputs"> @@ -15,9 +21,26 @@ </div> <div class="tabbed-chart-interface"></div> </div> -<div class="chart-container"> - <h2 class="title"></h2> - <div class="error"></div> - <div class="chart"></div> - <div class="graph-legend"></div> +<div class="jarmon winston"> + <div class="chart-container"> + <h2 class="title"></h2> + <div class="error"></div> + <div class="chart"></div> + <div class="graph-legend"></div> + </div> + <div class="chartRangeControl"> + <form> + <div class="range-inputs"> + <input name="from" type="datetime-local" step="1" /> + <input name="to" type="datetime-local" step="1" /> + <select name="shortcuts" title="Time range shortcuts - click to select an alternative time range" ></select> + <select name="tzoffset" title="Timezone offset - click to choose a custom timezone offset" ></select> + <input name="action" value="Update" type="button" + title="Graph update - click to update all graphs" /> + </div> + <div class="range-preview" + title="Time range preview - click and drag to select a custom timerange" ></div> + </form> + </div> + <div class="tabbed-chart-interface"></div> </div> @@ -3,7 +3,7 @@ html { height: 100%; } body { - font-size: 10px; + font-size: 8px; font-family: monospace; height: 100%; margin: 0; |