luci-app-statistics: js linting fixes / ES6 treatment

Follow-up to 2bebe21493

rrdtool.js:
Fix variable collision with dir in inner loop j, now entrj.

graphs.js: ES6 treatment

Signed-off-by: Paul Donald <newtwen+github@gmail.com>

applications/luci-app-statistics/htdocs/luci-static/resources/statistics/rrdtool.js

@@ -131,8 +131,8 @@ const colors = L.Class.singleton({
 	}
 });
 
-const rrdtree = {};
+let rrdtree = {};
-const graphdefs = {};
+let graphdefs = {};
 
 return baseclass.extend({
 	__init__() {
@@ -153,7 +153,7 @@ return baseclass.extend({
 			this.opts.rrasingle = (uci.get('luci_statistics', 'collectd_rrdtool', 'RRASingle') == '1');
 			this.opts.rramax    = (uci.get('luci_statistics', 'collectd_rrdtool', 'RRAMax') == '1');
 
-			const graphdefs = {};
+			graphdefs = {};
 
 			const tasks = [ this.scan() ];
 
@@ -185,17 +185,17 @@ return baseclass.extend({
 				tasks.push(L.resolveDefault(fs.list(dir + '/' + entr.name), []).then(L.bind(function(entries) {
 					const tasks = [];
 
-					for (let dir of entries) {
+					for (let entrj of entries) {
-						if (dir.type != 'directory')
+						if (entrj.type != 'directory')
 							continue;
 
-						tasks.push(L.resolveDefault(fs.list(dir + '/' + this.name + '/' + dir.name), []).then(L.bind(function(entries) {
+						tasks.push(L.resolveDefault(fs.list(dir + '/' + this.name + '/' + entrj.name), []).then(L.bind(function(entries) {
 							return Object.assign(this, {
 								entries: entries.filter(function(e) {
 									return e.type == 'file' && e.name.match(/\.rrd$/);
 								})
 							});
-						}, dir)));
+						}, entrj)));
 					}
 
 					return Promise.all(tasks).then(L.bind(function(entries) {
@@ -212,7 +212,7 @@ return baseclass.extend({
 
 	scan() {
 		return this.ls().then(L.bind(function(entries) {
-			const rrdtree = {};
+			rrdtree = {};
 
 			for (let entr of entries) {
 				const hostInstance = entr.name;

applications/luci-app-statistics/htdocs/luci-static/resources/view/statistics/graphs.js

@@ -6,9 +6,9 @@
 'require uci';
 'require statistics.rrdtool as rrdtool';
 
-var pollFn = null,
+let pollFn = null;
-    activePlugin = null,
+let activePlugin = null;
-    activeInstance = null;
+let activeInstance = null;
 
 return view.extend({
 	load() {
@@ -16,12 +16,12 @@ return view.extend({
 	},
 
 	updatePluginTab(host, span, time, ev) {
-		var container = ev.target,
+		const container = ev.target;
-		    width = Math.max(200, container.offsetWidth - 100),
+		const width = Math.max(200, container.offsetWidth - 100);
-		    plugin = ev.detail.tab,
+		const plugin = ev.detail.tab;
-		    render_instances = [],
+		const render_instances = [];
-		    plugin_instances = rrdtool.pluginInstances(host.value, plugin),
+		const plugin_instances = rrdtool.pluginInstances(host.value, plugin);
-		    cache = {};
+		const cache = {};
 
 		activePlugin = plugin;
 
@@ -31,7 +31,7 @@ return view.extend({
 			])
 		]);
 
-		for (var i = 0; i < plugin_instances.length; i++) {
+		for (let i = 0; i < plugin_instances.length; i++) {
 			if (rrdtool.hasInstanceDetails(host.value, plugin, plugin_instances[i])) {
 				render_instances.push([
 					plugin_instances[i],
@@ -49,9 +49,9 @@ return view.extend({
 
 		Promise.all(render_instances.map(function(instance) {
 			if (instance[0] == '-') {
-				var tasks = [];
+				const tasks = [];
 
-				for (var i = 0; i < plugin_instances.length; i++)
+				for (let i = 0; i < plugin_instances.length; i++)
 					tasks.push(rrdtool.render(plugin, plugin_instances[i], true, host.value, span.value, width, null, cache));
 
 				return Promise.all(tasks).then(function(blobs) {
@@ -62,11 +62,11 @@ return view.extend({
 				return rrdtool.render(plugin, instance[0], false, host.value, span.value, width, null, cache);
 			}
 		})).then(function(blobs) {
-			var multiple = blobs.length > 1;
+			const multiple = blobs.length > 1;
 
 			dom.content(container, E('div', {}, blobs.map(function(blobs, i) {
-				var plugin_instance = i ? render_instances[i][0] : plugin_instances.join('|'),
+				const plugin_instance = i ? render_instances[i][0] : plugin_instances.join('|');
-				    title = render_instances[i][1];
+				const title = render_instances[i][1];
 
 				return E('div', {
 					'class': 'center',
@@ -91,7 +91,7 @@ return view.extend({
 	},
 
 	updateGraphs(host, span, time, container, ev) {
-		var plugin_names = rrdtool.pluginNames(host.value);
+		const plugin_names = rrdtool.pluginNames(host.value);
 
 		container.querySelectorAll('img').forEach(function(img) {
 			URL.revokeObjectURL(img.src);
@@ -104,7 +104,7 @@ return view.extend({
 			container.parentNode.removeChild(container.previousElementSibling);
 		}
 
-		for (var i = 0; i < plugin_names.length; i++) {
+		for (let i = 0; i < plugin_names.length; i++) {
 			if (!rrdtool.hasDefinition(plugin_names[i]))
 				continue;
 
@@ -123,9 +123,9 @@ return view.extend({
 	},
 
 	refreshGraphs(host, span, time, container) {
-		var div = document.querySelector('[data-plugin="%s"][data-plugin-instance="%s"]'.format(activePlugin, activeInstance || '')),
+		const div = document.querySelector('[data-plugin="%s"][data-plugin-instance="%s"]'.format(activePlugin, activeInstance || ''));
-		    width = Math.max(200, container.offsetWidth - 100),
+		const width = Math.max(200, container.offsetWidth - 100);
-		    render_instances = activeInstance.split(/\|/);
+		const render_instances = activeInstance.split(/\|/);
 
 		return Promise.all(render_instances.map(function(render_instance) {
 			return rrdtool.render(activePlugin, render_instance || '', div.hasAttribute('data-is-index'), host.value, span.value, width);
@@ -134,7 +134,7 @@ return view.extend({
 		}).then(function(blobs) {
 			return Promise.all(blobs.map(function(blob) {
 				return new Promise(function(resolveFn, rejectFn) {
-					var img = E('img', { 'src': URL.createObjectURL(new Blob([blob], { type: 'image/png' })) });
+					const img = E('img', { 'src': URL.createObjectURL(new Blob([blob], { type: 'image/png' })) });
 					img.onload = function(ev) { resolveFn(img) };
 					img.onerror = function(ev) { resolveFn(img) };
 				});
@@ -142,7 +142,7 @@ return view.extend({
 				while (div.childNodes.length > imgs.length)
 					div.removeChild(div.lastElementChild);
 
-				for (var i = 0; i < imgs.length; i++) {
+				for (let i = 0; i < imgs.length; i++) {
 					if (i < div.childNodes.length) {
 						URL.revokeObjectURL(div.childNodes[i].src);
 						div.childNodes[i].src = imgs[i].src;
@@ -156,7 +156,7 @@ return view.extend({
 	},
 
 	togglePolling(host, span, time, container, ev) {
-		var btn = ev.currentTarget;
+		const btn = ev.currentTarget;
 
 		if (pollFn) {
 			poll.remove(pollFn);
@@ -170,7 +170,7 @@ return view.extend({
 	},
 
 	render() {
-		var hosts = rrdtool.hostInstances();
+		const hosts = rrdtool.hostInstances();
 		return hosts.length ? this.renderGraphs() : this.renderNoData();
 	},
 
@@ -188,28 +188,28 @@ return view.extend({
 	},
 
 	renderGraphs() {
-		var hostSel = E('select', { 'style': 'max-width:170px', 'data-name': 'host' }, rrdtool.hostInstances().map(function(host) {
+		const hostSel = E('select', { 'style': 'max-width:170px', 'data-name': 'host' }, rrdtool.hostInstances().map(function(host) {
 			return E('option', {
 				'selected': (rrdtool.opts.host == host) ? 'selected' : null
 			}, [ host ])
 		}));
 
-		var spanSel = E('select', { 'style': 'max-width:170px', 'data-name': 'timespan' }, L.toArray(uci.get('luci_statistics', 'collectd_rrdtool', 'RRATimespans')).map(function(span) {
+		const spanSel = E('select', { 'style': 'max-width:170px', 'data-name': 'timespan' }, L.toArray(uci.get('luci_statistics', 'collectd_rrdtool', 'RRATimespans')).map(function(span) {
 			return E('option', {
 				'selected': (rrdtool.opts.timespan == span) ? 'selected' : null
 			}, [ span ])
 		}));
 
-		var timeSel = E('select', { 'style': 'max-width:170px', 'data-name': 'refresh' }, [
+		const timeSel = E('select', { 'style': 'max-width:170px', 'data-name': 'refresh' }, [
 			E('option', { 'value': 0 }, [ _('Do not refresh') ]),
 			E('option', { 'value': 5 }, [ _('Every 5 seconds') ]),
 			E('option', { 'value': 30 }, [ _('Every 30 seconds') ]),
 			E('option', { 'value': 60 }, [ _('Every minute') ])
 		]);
 
-		var graphDiv = E('div', { 'data-name': 'graphs' });
+		const graphDiv = E('div', { 'data-name': 'graphs' });
 
-		var view = E([], [
+		const view = E([], [
 			E('h2', {}, [ _('Statistics') ]),
 			E('div', {}, [
 				E('p', { 'class': 'controls' }, [
@@ -244,8 +244,8 @@ return view.extend({
 
 		requestAnimationFrame(L.bind(this.updateGraphs, this, hostSel, spanSel, timeSel, graphDiv));
 
-		var resizeTimeout;
+		let resizeTimeout;
-		var rgCallback = L.bind(this.refreshGraphs, this, hostSel, spanSel, timeSel, graphDiv);
+		const rgCallback = L.bind(this.refreshGraphs, this, hostSel, spanSel, timeSel, graphDiv);
 		addEventListener('resize', function() { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(rgCallback, 250); });
 
 		return view;