Add graphs for Winston.

Having two `jarmon.TabbedInterface`s seems buggy, but things have been
adjusted to be usable (mostly Winston only has one tab).

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>
diff --git a/style.scss b/style.scss
index b380815..ef61e18 100644
--- a/style.scss
+++ b/style.scss
@@ -3,7 +3,7 @@ html {
 	height: 100%;
 }
 body {
-	font-size: 10px;
+	font-size: 8px;
 	font-family: monospace;
 	height: 100%;
 	margin: 0;