Merge pull request #10 from gw826943555/view_pr

beautify interface and log view

htdocs/luci-static/resources/view/tailscale/interface.js

@@ -5,7 +5,9 @@
  */
 
 'use strict';
+'require dom';
 'require fs';
+'require poll';
 'require ui';
 'require view';
 
@@ -68,12 +70,17 @@ return view.extend({
 		});
 	},
 
-	render: function(data) {
+	pollData: function (container) {
-		var title = E('h2', {class: 'content'}, _('Tailscale'));
+		poll.add(L.bind(function () {
-		var desc = E('div', {class: 'cbi-map-descr'}, _('Tailscale is a cross-platform and easy to use virtual LAN.'));
+			return this.load().then(L.bind(function (data) {
+				dom.content(container, this.renderContent(data));
+			}, this));
+		}, this));
+	},
 
+	renderContent: function (data) {
 		if (!Array.isArray(data)) {
-			return E('div', {}, [title, desc, E('div', {}, _('No interface online.'))]);
+			return E('div', {}, _('No interface online.'));
 		}
 		var rows = data.flatMap(function(interfaceData) {
 			return [
@@ -105,7 +112,21 @@ return view.extend({
 			];
 		});
 
-		return E('div', {}, [title, desc, E('table', { 'class': 'table' }, rows)]);
+		return E('table', { 'class': 'table' }, rows);
+	},
+
+	render: function(data) {
+		var content = E([], [
+			E('h2', {class: 'content'}, _('Tailscale')),
+			E('div', {class: 'cbi-map-descr'}, _('Tailscale is a cross-platform and easy to use virtual LAN.')),
+			E('div')
+		]);
+		var container = content.lastElementChild;
+
+		dom.content(container, this.renderContent(data));
+		this.pollData(container);
+
+		return content;
 	},
 
 	handleSaveApply: null,

htdocs/luci-static/resources/view/tailscale/log.js

@@ -1,7 +1,3 @@
-/* SPDX-License-Identifier: GPL-3.0-only
- *
- * Copyright (C) 2024 asvow
- */
 'use strict';
 'require fs';
 'require poll';
@@ -9,68 +5,86 @@
 'require view';
 
 return view.extend({
-	logs: [],
+	retrieveLog: async function() {
-	reverseLogs: false,
+		return Promise.all([
+			L.resolveDefault(fs.stat('/sbin/logread'), null),
+			L.resolveDefault(fs.stat('/usr/sbin/logread'), null)
+		]).then(function(stat) {
+			var logger = stat[0] ? stat[0].path : stat[1] ? stat[1].path : null;
 
-	load: function () {
+			return fs.exec_direct(logger, [ '-e', 'tailscale' ]).then(logdata => {
-		var self = this;
+				var statusMappings = {
-		/* Thanks to @animegasan */
+					'daemon.err': { status: 'StdErr', startIndex: 9 },
-		poll.add(function() {
+					'daemon.notice': { status: 'Info', startIndex: 10 }
-			return fs.exec('/sbin/logread', ['-e', 'tailscale'])
+				};
-				.then(function (res) {
+				const loglines = logdata.trim().split(/\n/).map(function(log) {
-					if (res.code === 0) {
+					var logParts = log.split(' ').filter(Boolean);
-						var statusMappings = {
+					if (logParts.length >= 6) {
-							'daemon.err': { status: 'StdErr', startIndex: 9 },
+						var formattedTime = logParts[1] + ' ' + logParts[2] + ' - ' + logParts[3];
-							'daemon.notice': { status: 'Info', startIndex: 10 }
+						var status = logParts[5];
-						};
+						var mapping = statusMappings[status] || { status: status, startIndex: 9 };
-						if (res.stdout) {
+						status = mapping.status;
-							self.logs = res.stdout.split('\n').map(function(log) {
+						var startIndex = mapping.startIndex;
-								var logParts = log.split(' ').filter(Boolean);
+						var message = logParts.slice(startIndex).join(' ');
-								if (logParts.length >= 6) {
+						return formattedTime + ' [ ' + status + ' ] - ' + message;
-									var formattedTime = logParts[1] + ' ' + logParts[2] + ' - ' + logParts[3];
-									var status = logParts[5];
-									var mapping = statusMappings[status] || { status: status, startIndex: 9 };
-									status = mapping.status;
-									var startIndex = mapping.startIndex;
-									var message = logParts.slice(startIndex).join(' ');
-									return formattedTime + ' [ ' + status + ' ] - ' + message;
-								} else {
-									return '';
-								}
-							}).filter(Boolean);
-						}
-						self.updateLogView();
 					} else {
-						throw new Error(res.stdout + ' ' + res.stderr);
+						return 'Log is empty.';
 					}
-				})
+				}).filter(Boolean);
+				return { value: loglines.join('\n'), rows: loglines.length + 1 };
+			}).catch(function(err) {
+				ui.addNotification(null, E('p', {}, _('Unable to load log data: ' + err.message)));
+				return '';
+			});
 		});
 	},
 
-	updateLogView: function() {
+	pollLog: async function() {
-		var view = document.getElementById('syslog');
+		const element = document.getElementById('syslog');
-		var logs = this.logs;
+		if (element) {
-		if (logs.length <= 100) {
+			const log = await this.retrieveLog();
-			view.textContent = _('No logs available');
+			element.value = log.value;
-			return;
+			element.rows = log.rows;
 		}
-		if (this.reverseLogs) {
-			logs = logs.slice().reverse();
-		}
-		view.textContent = logs.join('\n');
 	},
 
-	render: function () {
+	load: async function() {
-		var self = this;
+		poll.add(this.pollLog.bind(this));
-		var button = E('button', {
+		return await this.retrieveLog();
-			'class': 'cbi-button cbi-button-neutral',
+	},
-			click: function() {
+
-				self.reverseLogs = !self.reverseLogs;
+	render: function(loglines) {
-				self.updateLogView();
+		var scrollDownButton = E('button', { 
-			}
+				'id': 'scrollDownButton',
-		}, _('Toggle Log Order'));
+				'class': 'cbi-button cbi-button-neutral'
-		var logArea = E('div', { 'id': 'syslog', 'style': 'white-space: pre;' });
+			}, _('Scroll to tail', 'scroll to bottom (the tail) of the log file')
-		return E('div', {}, [ button, logArea ]);
+		);
+		scrollDownButton.addEventListener('click', function() {
+			scrollUpButton.scrollIntoView();
+		});
+
+		var scrollUpButton = E('button', { 
+				'id' : 'scrollUpButton',
+				'class': 'cbi-button cbi-button-neutral'
+			}, _('Scroll to head', 'scroll to top (the head) of the log file')
+		);
+		scrollUpButton.addEventListener('click', function() {
+			scrollDownButton.scrollIntoView();
+		});
+
+		return E([], [
+			E('div', { 'id': 'content_syslog' }, [
+				E('div', {'style': 'padding-bottom: 20px'}, [scrollDownButton]),
+				E('textarea', {
+					'id': 'syslog',
+					'style': 'font-size:12px',
+					'readonly': 'readonly',
+					'wrap': 'off',
+					'rows': loglines.rows,
+				}, [ loglines.value ]),
+				E('div', {'style': 'padding-bottom: 20px'}, [scrollUpButton])
+			])
+		]);
 	},
 
 	handleSaveApply: null,