From: Florian Eckert <fe@dev.tdt.de>
Date: Mon, 7 Nov 2022 12:40:24 +0000 (+0100)
Subject: luci-mod-network: convert diagnostic page to LuCI look and feel
X-Git-Url: http://git.openwrt.org/?a=commitdiff_plain;h=5f2d305476289c305618a7dc51d3784dbf26488c;p=project%2Fluci.git

luci-mod-network: convert diagnostic page to LuCI look and feel

Signed-off-by: Florian Eckert <fe@dev.tdt.de>
---

diff --git a/modules/luci-mod-network/htdocs/luci-static/resources/view/network/diagnostics.js b/modules/luci-mod-network/htdocs/luci-static/resources/view/network/diagnostics.js
index da7cd95bdc..90ad67aeaf 100644
--- a/modules/luci-mod-network/htdocs/luci-static/resources/view/network/diagnostics.js
+++ b/modules/luci-mod-network/htdocs/luci-static/resources/view/network/diagnostics.js
@@ -14,8 +14,7 @@ return view.extend({
 			buttons[i].setAttribute('disabled', 'true');
 
 		return fs.exec(exec, args).then(function(res) {
-			var out = document.querySelector('.command-output');
-			    out.style.display = '';
+			var out = document.querySelector('textarea');
 
 			dom.content(out, [ res.stdout || '', res.stderr || '' ]);
 		}).catch(function(err) {
@@ -75,9 +74,7 @@ return view.extend({
 			ping_host = uci.get('luci', 'diag', 'ping') || 'openwrt.org',
 			route_host = uci.get('luci', 'diag', 'route') || 'openwrt.org';
 
-		return E([], [
-			E('h2', {}, [ _('Network Utilities') ]),
-			E('table', { 'class': 'table' }, [
+		var table = E('table', { 'class': 'table' }, [
 				E('tr', { 'class': 'tr' }, [
 					E('td', { 'class': 'td left' }, [
 						E('input', {
@@ -156,9 +153,26 @@ return view.extend({
 						])
 					]) : E([]),
 				])
-			]),
-			E('pre', { 'class': 'command-output', 'style': 'display:none' })
+			]);
+
+		var view = E('div', { 'class': 'cbi-map'}, [
+			E('h2', {}, [ _('Diagnostics') ]),
+			E('div', { 'class': 'cbi-map-descr'}, _('Execution of various network commands to check the connection and name resolution to other systems.')),
+			table,
+			E('div', {'class': 'cbi-section'}, [
+				E('div', { 'id' : 'command-output'},
+					E('textarea', {
+						'id': 'widget.command-output',
+						'style': 'width: 100%',
+						'readonly': true,
+						'wrap': 'off',
+						'rows': '20'
+					})
+				)
+			])
 		]);
+
+		return view;
 	},
 
 	handleSaveApply: null,