2 files changed, 187 insertions, 0 deletions
diff --git a/applications/luci-app-vnstat2/htdocs/luci-static/resources/view/vnstat2/config.js b/applications/luci-app-vnstat2/htdocs/luci-static/resources/view/vnstat2/config.js
new file mode 100644
index 0000000000..46781442a3
--- /dev/null
+++ b/applications/luci-app-vnstat2/htdocs/luci-static/resources/view/vnstat2/config.js
@@ -0,0 +1,113 @@
+// This is free software, licensed under the Apache License, Version 2.0
+
+'use strict';
+'require view';
+'require fs';
+'require ui';
+'require uci';
+'require form';
+'require tools.widgets as widgets';
+
+var isReadonlyView = !L.hasViewPermission() || null;
+
+return view.extend({
+	handleDeleteModal: function(m, iface, ev) {
+		L.showModal(_('Delete interface <em>%h</em>').format(iface), [
+			E('p', _('The interface will be removed from the database permanently. This cannot be undone.')),
+			E('div', { 'class': 'right' }, [
+				E('div', {
+					'class': 'btn',
+					'click': L.hideModal
+				}, _('Cancel')),
+				' ',
+				E('div', {
+					'class': 'btn cbi-button-negative',
+					'click': ui.createHandlerFn(this, 'handleDelete', m, iface)
+				}, _('Delete'))
+			])
+		]);
+	},
+
+	handleDelete: function(m, iface, ev) {
+		return fs.exec('/usr/bin/vnstat', ['--remove', '-i', iface, '--force'])
+			.then(L.bind(m.render, m))
+			.catch(function(e) {
+				ui.addNotification(null, E('p', e.message));
+			})
+			.finally(L.hideModal);
+	},
+
+	render: function() {
+		var m, s, o;
+
+		m = new form.Map('vnstat', _('vnStat'), _('vnStat is a network traffic monitor for Linux that keeps a log of network traffic for the selected interface(s).'));
+
+		s = m.section(form.TypedSection, 'vnstat', _('Interfaces'));
+		s.anonymous = true;
+		s.addremove = false;
+
+		o = s.option(widgets.DeviceSelect, 'interface', _('Monitor interfaces'), _('The selected interfaces are automatically added to the vnStat database upon startup.'));
+		o.rmempty = true;
+		o.multiple = true;
+		o.noaliases = true;
+		o.nobridges = false;
+		o.noinactive = false;
+		o.nocreate = false;
+
+
+		o = s.option(form.DummyValue, '_database');
+
+		o.load = function(section_id) {
+			return fs.exec('/usr/bin/vnstat', ['--json', 'f', '1']).then(L.bind(function(result) {
+				var databaseInterfaces = [];
+				if (result.code == 0) {
+					var vnstatData = JSON.parse(result.stdout);
+					for (var i = 0; i < vnstatData.interfaces.length; i++) {
+						databaseInterfaces.push(vnstatData.interfaces[i].name);
+					}
+				}
+
+				var configInterfaces = uci.get_first('vnstat', 'vnstat', 'interface') || [];
+
+				this.interfaces = databaseInterfaces.filter(function(iface) {
+					return configInterfaces.indexOf(iface) == -1;
+				});
+			}, this));
+		};
+
+		o.render = L.bind(function(view, section_id) {
+			var table = E('div', { 'class': 'table' }, [
+				E('div', { 'class': 'tr table-titles' }, [
+					E('div', { 'class': 'th' }, _('Interface')),
+					E('div', { 'class': 'th right' }, _('Delete'))
+				])
+			]);
+
+			var rows = [];
+
+			for (var i = 0; i < this.interfaces.length; i++) {
+				rows.push([
+					this.interfaces[i],
+					E('button', {
+						'class': 'btn cbi-button-remove',
+						'click': ui.createHandlerFn(view, 'handleDeleteModal', m, this.interfaces[i]),
+						'disabled': isReadonlyView
+					}, [ _('Delete…') ])
+				]);
+			}
+
+			cbi_update_table(table, rows, E('em', _('No unconfigured interfaces found in database.')));
+
+			return E([], [
+				E('h3', _('Unconfigured interfaces')),
+				E('div', { 'class': 'cbi-section-descr' },
+				         _('These interfaces are present in the vnStat database, but are not configured above.')),
+				table
+			]);
+		}, o, this);
+
+
+		return m.render();
+	}
+});
+
diff --git a/applications/luci-app-vnstat2/htdocs/luci-static/resources/view/vnstat2/graphs.js b/applications/luci-app-vnstat2/htdocs/luci-static/resources/view/vnstat2/graphs.js
new file mode 100644
index 0000000000..fbe9d59337
--- /dev/null
+++ b/applications/luci-app-vnstat2/htdocs/luci-static/resources/view/vnstat2/graphs.js
@@ -0,0 +1,74 @@
+// This is free software, licensed under the Apache License, Version 2.0
+
+'use strict';
+'require view';
+'require fs';
+'require ui';
+
+return view.extend({
+	renderTab: function(ifaces, style, title) {
+		var tab = E('div', {
+			'class': 'cbi-section',
+			'data-tab': style,
+			'data-tab-title': title
+		}, [
+			E('p', {}, E('em', { 'class': 'spinning' }, [ _('Loading graphs…') ]))
+		]);
+
+		ifaces.forEach(function(iface) {
+			tab.appendChild(E('p', {}, E('img', { 'data-iface': iface, 'style': 'display:none' })));
+			fs.exec_direct('/usr/bin/vnstati', [ '-'+style, '-i', iface, '-o', '-' ], 'blob').then(function(res) {
+				var img = tab.querySelector('img[data-iface="%s"]'.format(iface));
+				img.src = URL.createObjectURL(res);
+				img.style.display = '';
+				tab.firstElementChild.style.display = 'none';
+			});
+		});
+
+		return tab;
+	},
+
+	load: function() {
+		return fs.exec_direct('/usr/bin/vnstat', [ '--json', 'f', '1' ], 'text').then(function(res) {
+			var json = null;
+
+			try {
+				json = JSON.parse(res)
+			}
+			catch(e) {
+				throw new Error(res.replace(/^Error: /, ''));
+			}
+
+			return (L.isObject(json) ? L.toArray(json.interfaces) : []).map(function(iface) {
+				return iface.name;
+			}).sort();
+		}).catch(function(err) {
+			ui.addNotification(null, E('p', { 'style': 'white-space:pre' }, [err]));
+			return [];
+		});
+	},
+
+	render: function(ifaces) {
+		var view = E([], [
+			E('h2', [_('vnStat Graphs')]),
+			E('div', ifaces.length ? [
+				this.renderTab(ifaces, 's', _('Summary')),
+				this.renderTab(ifaces, 't', _('Top')),
+				this.renderTab(ifaces, '5', _('5 Minute')),
+				this.renderTab(ifaces, 'h', _('Hourly')),
+				this.renderTab(ifaces, 'd', _('Daily')),
+				this.renderTab(ifaces, 'm', _('Monthly')),
+				this.renderTab(ifaces, 'y', _('Yearly'))
+			] : [ E('em', [_('No monitored interfaces have been found. Go to the configuration to enable monitoring for one or more interfaces.')]) ])
+		]);
+
+		if (ifaces.length)
+			ui.tabs.initTabGroup(view.lastElementChild.childNodes);
+
+		return view;
+	},
+
+	handleSave: null,
+	handleSaveApply: null,
+	handleReset: null
+});