luci-app-statistics: rearrange graph display

 - Add a per-plugin overview tab that contains the (non-detail) graphs of
   each plugin instance, similar to the old Lua based implementation
 - Numerically order plugin instances starting with numbers
 - Avoid multiple renderings of the same graphs
 - Fix legend of tcpconns graphs
 - Move cpufreq distribution and transition charts to detail tabs

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

3 files changed, 45 insertions, 4 deletions

diff --git a/applications/luci-app-statistics/htdocs/luci-static/resources/statistics/rrdtool.js b/applications/luci-app-statistics/htdocs/luci-static/resources/statistics/rrdtool.js
index fbb5da626d..00b65d5b6d 100644
--- a/applications/luci-app-statistics/htdocs/luci-static/resources/statistics/rrdtool.js
+++ b/applications/luci-app-statistics/htdocs/luci-static/resources/statistics/rrdtool.js
@@ -259,7 +259,17 @@ return L.Class.extend({
 	},
 
 	pluginInstances: function(hostInstance, pluginName) {
-		return Object.keys((rrdtree[hostInstance] || {})[pluginName] || {}).sort();
+		return Object.keys((rrdtree[hostInstance] || {})[pluginName] || {}).sort(function(a, b) {
+			var x = a.match(/^(\d+)\b/),
+			    y = b.match(/^(\d+)\b/);
+
+			if (!x != !y)
+				return !x - !y;
+			else if (x && y && x[0] != y[0])
+				return +x[0] - +y[0];
+			else
+				return a > b;
+		});
 	},
 
 	dataTypes: function(hostInstance, pluginName, pluginInstance) {
@@ -279,6 +289,21 @@ return L.Class.extend({
 		return (graphdefs[pluginName] != null);
 	},
 
+	hasInstanceDetails: function(hostInstance, pluginName, pluginInstance) {
+		var def = graphdefs[pluginName];
+
+		if (!def || typeof(def.rrdargs) != 'function')
+			return false;
+
+		var optlist = this._forcelol(def.rrdargs(this, hostInstance, pluginName, pluginInstance, null, false));
+
+		for (var i = 0; i < optlist.length; i++)
+			if (optlist[i].detail)
+				return true;
+
+		return false;
+	},
+
 	_mkpath: function(host, plugin, plugin_instance, dtype, data_instance) {
 		var path = host + '/' + plugin;
 
@@ -304,7 +329,7 @@ return L.Class.extend({
 		return L.isObject(list[0]) ? list : [ list ];
 	},
 
-	_rrdtool: function(def, rrd, timespan, width, height) {
+	_rrdtool: function(def, rrd, timespan, width, height, cache) {
 		var cmdline = [
 			'graph', '-', '-a', 'PNG',
 			'-s', 'NOW-%s'.format(timespan || this.opts.timespan),
@@ -322,6 +347,15 @@ return L.Class.extend({
 			cmdline.push(opt);
 		}
 
+		if (L.isObject(cache)) {
+			var key = sfh(cmdline.join('\0'));
+
+			if (!cache.hasOwnProperty(key))
+				cache[key] = fs.exec_direct('/usr/bin/rrdtool', cmdline, 'blob', true);
+
+			return cache[key];
+		}
+
 		return fs.exec_direct('/usr/bin/rrdtool', cmdline, 'blob', true);
 	},
 
@@ -682,7 +716,7 @@ return L.Class.extend({
 		return defs;
 	},
 
-	render: function(plugin, plugin_instance, is_index, hostname, timespan, width, height) {
+	render: function(plugin, plugin_instance, is_index, hostname, timespan, width, height, cache) {
 		var pngs = [];
 
 		/* check for a whole graph handler */
@@ -705,7 +739,7 @@ return L.Class.extend({
 					/* render all diagrams */
 					for (var j = 0; j < diagrams.length; j++) {
 						/* exec */
-						_images[i][j] = this._rrdtool(diagrams[j], null, timespan, width, height);
+						_images[i][j] = this._rrdtool(diagrams[j], null, timespan, width, height, cache);
 					}
 				}
 			}
diff --git a/applications/luci-app-statistics/htdocs/luci-static/resources/statistics/rrdtool/definitions/cpufreq.js b/applications/luci-app-statistics/htdocs/luci-static/resources/statistics/rrdtool/definitions/cpufreq.js
index c12260ea9d..6f4d52deb2 100644
--- a/applications/luci-app-statistics/htdocs/luci-static/resources/statistics/rrdtool/definitions/cpufreq.js
+++ b/applications/luci-app-statistics/htdocs/luci-static/resources/statistics/rrdtool/definitions/cpufreq.js
@@ -22,6 +22,7 @@ return L.Class.extend({
 
 	    if (uci.get("luci_statistics", "collectd_cpufreq", "ExtraItems")) {
 			var transitions = {
+				detail: true,
 				title: "%H: Frequency transitions - core %pi",
 				alt_autoscale: true,
 				vlabel: "Transitions",
@@ -35,6 +36,7 @@ return L.Class.extend({
 			};
 
 			var percentage = {
+				detail: true,
 				title: "%H: Frequency distribution - core %pi",
 				alt_autoscale: true,
 				vlabel: "Percent",
diff --git a/applications/luci-app-statistics/htdocs/luci-static/resources/statistics/rrdtool/definitions/tcpconns.js b/applications/luci-app-statistics/htdocs/luci-static/resources/statistics/rrdtool/definitions/tcpconns.js
index f2a2d7c222..4ecd532fa0 100644
--- a/applications/luci-app-statistics/htdocs/luci-static/resources/statistics/rrdtool/definitions/tcpconns.js
+++ b/applications/luci-app-statistics/htdocs/luci-static/resources/statistics/rrdtool/definitions/tcpconns.js
@@ -21,6 +21,11 @@ return L.Class.extend({
 					options: {
 						load__ESTABLISHED: { title: "%di", noarea: true }
 					}
+				},
+				options: {
+					tcp_connections__value: {
+						title: '%di'
+					}
 				}
 			}
 		};