luci-app-mwan3: initial commit

Moved over here from the packages repository.

Signed-off-by: Dan Luedtke <mail@danrl.com>

10 files changed, 589 insertions, 0 deletions

diff --git a/applications/luci-app-mwan3/luasrc/view/mwan/advanced_diagnostics.htm b/applications/luci-app-mwan3/luasrc/view/mwan/advanced_diagnostics.htm
new file mode 100644
index 0000000000..14d404bc7c
--- /dev/null
+++ b/applications/luci-app-mwan3/luasrc/view/mwan/advanced_diagnostics.htm
@@ -0,0 +1,129 @@
+<%+header%>
+
+<ul class="cbi-tabmenu">
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/hotplugscript")%>"><%:Hotplug Script%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/mwanconfig")%>"><%:MWAN Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/networkconfig")%>"><%:Network Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/wirelessconfig")%>"><%:Wireless Config%></a></li>
+	<li class="cbi-tab"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/diagnostics")%>"><%:Diagnostics%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/troubleshooting")%>"><%:Troubleshooting%></a></li>
+</ul>
+
+<%
+	local uci = require "luci.model.uci"
+
+	interfaceNames = ""
+	uci.cursor():foreach("mwan3", "interface",
+		function (section)
+			interfaceNames = interfaceNames .. section[".name"] .. " "
+		end
+	)
+%>
+
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+<script type="text/javascript">//<![CDATA[
+	var stxhr = new XHR();
+
+	function update_status(tool, task)
+	{
+		var iface = document.getElementById('mwaniface').value;
+		var output = document.getElementById('diag_output');
+
+		if (tool == "service")
+			{
+				output.innerHTML =
+					'<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="padding: 20px; vertical-align: middle;" /> ' +
+					"Waiting for MWAN to " + task + "..."
+				;
+			}
+			else
+			{
+				output.innerHTML =
+					'<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="padding: 20px; vertical-align: middle;" /> ' +
+					"Waiting for diagnostic results..."
+				;
+			}
+
+		output.parentNode.style.display = 'block';
+		output.style.display = 'inline';
+
+		stxhr.get('<%=luci.dispatcher.build_url("admin", "network", "mwan", "advanced")%>/diagnostics_display' + '/' + iface + '/' + tool + '/' + task, null,
+			function(x, mArray)
+			{
+				if (mArray.diagnostics)
+				{
+					output.innerHTML = String.format('<pre id="diag_output_css">%h</pre>', mArray.diagnostics[0]);
+				}
+				else
+				{
+					output.innerHTML = '<pre id="diag_output_css"><strong>No diagnostic results returned</strong></pre>';
+				}
+			}
+		);
+	}
+//]]></script>
+
+<div id="mwan_diagnostics" class="cbi-map">
+	<fieldset id="diag_select" class="cbi-section">
+		<legend><%:MWAN Interface Diagnostics%></legend>
+		<select id="mwaniface">
+			<% for z in interfaceNames:gmatch("[^ ]+") do -%><option value="<%=z%>"><%=z%></option><%- end %>
+		</select>
+		<div id="buttoncss">
+			<input type="button" value="<%:Ping default gateway%>" class="cbi-button cbi-button-apply" onclick="update_status('ping', 'gateway')" />
+			<input type="button" value="<%:Ping tracking IP%>" class="cbi-button cbi-button-apply" onclick="update_status('ping', 'track_ip')" />
+			<input type="button" value="<%:Check IP rules%>" class="cbi-button cbi-button-apply" onclick="update_status('rulechk', null)" />
+			<input type="button" value="<%:Check routing table%>" class="cbi-button cbi-button-apply" onclick="update_status('routechk', null)" />
+			<input type="button" value="<%:Hotplug ifup%>" class="cbi-button cbi-button-apply" onclick="update_status('hotplug', 'ifup')" />
+			<input type="button" value="<%:Hotplug ifdown%>" class="cbi-button cbi-button-apply" onclick="update_status('hotplug', 'ifdown')" />
+		</div>
+	</fieldset>
+	<fieldset id="diag_select" class="cbi-section">
+		<legend><%:MWAN Service Control%></legend>
+		<div id="buttoncss">
+			<input type="button" value="<%:Restart MWAN%>" class="cbi-button cbi-button-apply" onclick="update_status('service', 'restart')" />
+			<input type="button" value="<%:Stop MWAN%>" class="cbi-button cbi-button-apply" onclick="update_status('service', 'stop')" />
+			<input type="button" value="<%:Start MWAN%>" class="cbi-button cbi-button-apply" onclick="update_status('service', 'start')" />
+		</div>
+	</fieldset>
+	<fieldset class="cbi-section" style="display:none">
+		<legend><%:Diagnostic Results%></legend>
+		<div id="diag_output"></div>
+	</fieldset>
+</div>
+
+<style type="text/css">
+  .container {  /* container for entire page. fixes bootstrap theme's ridiculously small page width */
+	max-width: none;
+	margin-left: 30px;
+	padding-right: 30px;
+	width: auto;
+  }
+  #mwan_diagnostics {
+	background-color: #FFFFFF;
+	border: 1px dotted #555555;
+	padding: 20px;
+  }
+  #diag_select {
+	padding: 12px 20px 20px 20px;
+  }
+  #mwaniface {
+	float: left;
+	margin: 8px 20px 0px 0px;
+  }
+  #buttoncss {
+	display: table;
+	float: left;
+	text-align: left;
+  }
+  .cbi-button {
+	margin: 8px 20px 0px 0px;
+	min-width: 153px;
+  }
+  #diag_output_css {
+	padding: 20px;
+	text-align: left;
+  }
+</style>
+
+<%+footer%>
diff --git a/applications/luci-app-mwan3/luasrc/view/mwan/advanced_hotplugscript.htm b/applications/luci-app-mwan3/luasrc/view/mwan/advanced_hotplugscript.htm
new file mode 100644
index 0000000000..4c2a0dc208
--- /dev/null
+++ b/applications/luci-app-mwan3/luasrc/view/mwan/advanced_hotplugscript.htm
@@ -0,0 +1,24 @@
+<ul class="cbi-tabmenu">
+	<li class="cbi-tab"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/hotplugscript")%>"><%:Hotplug Script%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/mwanconfig")%>"><%:MWAN Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/networkconfig")%>"><%:Network Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/wirelessconfig")%>"><%:Wireless Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/diagnostics")%>"><%:Diagnostics%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/troubleshooting")%>"><%:Troubleshooting%></a></li>
+</ul>
+
+<style type="text/css">
+  .container {	/* container for entire page. fixes bootstrap theme's ridiculously small page width */
+	max-width: none;
+	margin: 0px 0px 0px 30px;
+	padding-right: 30px;
+	width: auto;
+  }
+  .cbi-section-node {
+	margin-top: 20px;
+  }
+  .cbi-section {
+	border: 1px dotted #555555;
+	padding: 20px;
+  }
+</style>
diff --git a/applications/luci-app-mwan3/luasrc/view/mwan/advanced_mwanconfig.htm b/applications/luci-app-mwan3/luasrc/view/mwan/advanced_mwanconfig.htm
new file mode 100644
index 0000000000..fba3fa6940
--- /dev/null
+++ b/applications/luci-app-mwan3/luasrc/view/mwan/advanced_mwanconfig.htm
@@ -0,0 +1,24 @@
+<ul class="cbi-tabmenu">
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/hotplugscript")%>"><%:Hotplug Script%></a></li>
+	<li class="cbi-tab"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/mwanconfig")%>"><%:MWAN Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/networkconfig")%>"><%:Network Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/wirelessconfig")%>"><%:Wireless Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/diagnostics")%>"><%:Diagnostics%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/troubleshooting")%>"><%:Troubleshooting%></a></li>
+</ul>
+
+<style type="text/css">
+  .container {	/* container for entire page. fixes bootstrap theme's ridiculously small page width */
+	max-width: none;
+	margin: 0px 0px 0px 30px;
+	padding-right: 30px;
+	width: auto;
+  }
+  .cbi-section-node {
+	margin-top: 20px;
+  }
+  .cbi-section {
+	border: 1px dotted #555555;
+	padding: 20px;
+  }
+</style>
diff --git a/applications/luci-app-mwan3/luasrc/view/mwan/advanced_networkconfig.htm b/applications/luci-app-mwan3/luasrc/view/mwan/advanced_networkconfig.htm
new file mode 100644
index 0000000000..cf90112078
--- /dev/null
+++ b/applications/luci-app-mwan3/luasrc/view/mwan/advanced_networkconfig.htm
@@ -0,0 +1,24 @@
+<ul class="cbi-tabmenu">
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/hotplugscript")%>"><%:Hotplug Script%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/mwanconfig")%>"><%:MWAN Config%></a></li>
+	<li class="cbi-tab"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/networkconfig")%>"><%:Network Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/wirelessconfig")%>"><%:Wireless Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/diagnostics")%>"><%:Diagnostics%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/troubleshooting")%>"><%:Troubleshooting%></a></li>
+</ul>
+
+<style type="text/css">
+  .container {	/* container for entire page. fixes bootstrap theme's ridiculously small page width */
+	max-width: none;
+	margin: 0px 0px 0px 30px;
+	padding-right: 30px;
+	width: auto;
+  }
+  .cbi-section-node {
+	margin-top: 20px;
+  }
+  .cbi-section {
+	border: 1px dotted #555555;
+	padding: 20px;
+  }
+</style>
diff --git a/applications/luci-app-mwan3/luasrc/view/mwan/advanced_troubleshooting.htm b/applications/luci-app-mwan3/luasrc/view/mwan/advanced_troubleshooting.htm
new file mode 100644
index 0000000000..0a12496899
--- /dev/null
+++ b/applications/luci-app-mwan3/luasrc/view/mwan/advanced_troubleshooting.htm
@@ -0,0 +1,74 @@
+<%+header%>
+
+<ul class="cbi-tabmenu">
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/hotplugscript")%>"><%:Hotplug Script%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/mwanconfig")%>"><%:MWAN Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/networkconfig")%>"><%:Network Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/wirelessconfig")%>"><%:Wireless Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/diagnostics")%>"><%:Diagnostics%></a></li>
+	<li class="cbi-tab"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/troubleshooting")%>"><%:Troubleshooting%></a></li>
+</ul>
+
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+<script type="text/javascript">//<![CDATA[
+	XHR.poll(15, '<%=luci.dispatcher.build_url("admin", "network", "mwan", "advanced", "troubleshooting_display")%>', null,
+		function(x, mArray)
+		{
+			var tshoot = document.getElementById('troubleshoot_text');
+			if (mArray.versions)
+			{
+				var versions = '<span class="description">Software versions : </span><br /><br />';
+				var mwanConfig = '<br /><br /><span class="description">Output of &#34;cat /etc/config/mwan3&#34; : </span><br /><br />';
+				var netConfig = '<br /><br /><span class="description">Output of &#34;cat /etc/config/network&#34; : </span><br /><br />';
+				var wifiConfig = '<br /><br /><span class="description">Output of &#34;cat /etc/config/wireless&#34; : </span><br /><br />';
+				var ifconfig = '<br /><br /><span class="description">Output of &#34;ifconfig&#34; : </span><br /><br />';
+				var ipRoute = '<br /><br /><span class="description">Output of &#34;route -n&#34; : </span><br /><br />';
+				var ipRuleShow = '<br /><br /><span class="description">Output of &#34;ip rule show&#34; : </span><br /><br />';
+				var routeListTable = '<br /><br /><span class="description">Output of &#34;ip route list table 1-250&#34; : </span><br /><br />';
+				var firewallOut = '<br /><br /><span class="description">Firewall default output policy (must be ACCEPT) : </span><br /><br />';
+				var iptables = '<br /><br /><span class="description">Output of &#34;iptables -L -t mangle -v -n&#34; : </span><br /><br />';
+				tshoot.innerHTML = String.format(
+					'<pre>%s%s%s%s%s%s%s%s%s%s%s%s%s%s%s%s%s%s%s%s</pre>',
+					versions, mArray.versions[0], mwanConfig, mArray.mwanconfig[0], netConfig, mArray.netconfig[0],
+					wifiConfig, mArray.wificonfig[0], ifconfig, mArray.ifconfig[0], ipRoute, mArray.routeshow[0],
+					ipRuleShow, mArray.iprule[0], routeListTable, mArray.routelist[0], firewallOut, mArray.firewallout[0],
+					iptables, mArray.iptables[0]
+				);
+			}
+			else
+			{
+				tshoot.innerHTML = '<strong>Error collecting troubleshooting information</strong>';
+			}
+		}
+	);
+//]]></script>
+
+<div id="troubleshoot">
+	<fieldset class="cbi-section">
+		<legend><%:Troubleshooting Data%></legend>
+		<div id="troubleshoot_text"><img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" /> Collecting data...</div>
+	</fieldset>
+</div>
+
+<style type="text/css">
+  .container {	/* container for entire page. fixes bootstrap theme's ridiculously small page width */
+	max-width: none;
+	margin-left: 30px;
+	padding-right: 30px;
+	width: auto;
+  }
+  #troubleshoot {
+	background-color: #FFFFFF;
+	border: 1px dotted #555555;
+	padding: 20px;
+  }
+  #troubleshoot_text {
+	padding: 20px;
+	text-align: left;
+  }
+  .description {
+	background-color: rgb(78, 186, 241);
+  }
+</style>
+
+<%+footer%>
diff --git a/applications/luci-app-mwan3/luasrc/view/mwan/advanced_wirelessconfig.htm b/applications/luci-app-mwan3/luasrc/view/mwan/advanced_wirelessconfig.htm
new file mode 100644
index 0000000000..5077674185
--- /dev/null
+++ b/applications/luci-app-mwan3/luasrc/view/mwan/advanced_wirelessconfig.htm
@@ -0,0 +1,24 @@
+<ul class="cbi-tabmenu">
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/hotplugscript")%>"><%:Hotplug Script%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/mwanconfig")%>"><%:MWAN Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/networkconfig")%>"><%:Network Config%></a></li>
+	<li class="cbi-tab"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/wirelessconfig")%>"><%:Wireless Config%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/diagnostics")%>"><%:Diagnostics%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/advanced/troubleshooting")%>"><%:Troubleshooting%></a></li>
+</ul>
+
+<style type="text/css">
+  .container {	/* container for entire page. fixes bootstrap theme's ridiculously small page width */
+	max-width: none;
+	margin: 0px 0px 0px 30px;
+	padding-right: 30px;
+	width: auto;
+  }
+  .cbi-section-node {
+	margin-top: 20px;
+  }
+  .cbi-section {
+	border: 1px dotted #555555;
+	padding: 20px;
+  }
+</style>
diff --git a/applications/luci-app-mwan3/luasrc/view/mwan/config_css.htm b/applications/luci-app-mwan3/luasrc/view/mwan/config_css.htm
new file mode 100644
index 0000000000..99da4875b0
--- /dev/null
+++ b/applications/luci-app-mwan3/luasrc/view/mwan/config_css.htm
@@ -0,0 +1,34 @@
+<style type="text/css">
+  .container {	/* container for entire page. fixes bootstrap theme's ridiculously small page width */
+	max-width: none;
+	margin-left: 30px;
+	padding-right: 30px;
+	width: auto;
+  }
+  table td {	/* cells showing the configuration values */
+	padding: 0px;
+	text-align: center;
+	vertical-align: middle;
+  }
+  table th {	/* column for configuration section name */
+	padding: 0px;
+	text-align: center;
+	vertical-align: middle;
+  }
+  table tbody th {	/* column for configuration section name */
+	padding: 0px;
+	vertical-align: middle;
+  }
+  .cbi-section-node table div {	/* rows */
+	padding-top: 5px;
+  }
+  table.cbi-section-table td.cbi-section-table-cell {	/* sort buttons column */
+	text-align: center;
+  }
+  .cbi-section h3 {
+	color: rgb(85, 85, 85);
+	font-family: Trebuchet MS,Verdana,sans-serif;
+	font-style: italic;
+	font-weight: normal;
+  }
+</style>
diff --git a/applications/luci-app-mwan3/luasrc/view/mwan/openwrt_overview_status.htm b/applications/luci-app-mwan3/luasrc/view/mwan/openwrt_overview_status.htm
new file mode 100644
index 0000000000..9329b92735
--- /dev/null
+++ b/applications/luci-app-mwan3/luasrc/view/mwan/openwrt_overview_status.htm
@@ -0,0 +1,83 @@
+<script type="text/javascript">//<![CDATA[
+	XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "network", "mwan", "overview", "interface_status")%>', null,
+		function(x, mArray)
+		{
+			var status = document.getElementById('mwan_status_text');
+			if (mArray.wans)
+			{
+				var temp = '';
+				for ( var i = 0; i < mArray.wans.length; i++ )
+				{
+					var stat = '';
+					var cssc = '';
+					switch (mArray.wans[i].status)
+					{
+						case 'online':
+							stat = 'Online (tracking active)';
+							cssc = 'wanon';
+							break;
+						case 'notMonitored':
+							stat = 'Online (tracking off)';
+							cssc = 'wanon';
+							break;
+						case 'offline':
+							stat = 'Offline';
+							cssc = 'wanoff';
+							break;
+						case 'notEnabled':
+							stat = 'Disabled';
+							cssc = 'wanoff';
+							break;
+					}
+					temp += String.format(
+						'<span class="%s"><strong>%s (<a href="%q">%s</a>)</strong><br />%s</span>',
+						cssc, mArray.wans[i].name, mArray.wans[i].link, mArray.wans[i].ifname, stat
+					);
+				}
+				status.innerHTML = temp;
+			}
+			else
+			{
+				status.innerHTML = '<strong>No MWAN interfaces found</strong>';
+			}
+		}
+	);
+//]]></script>
+
+<fieldset id="interface_field" class="cbi-section">
+	<legend><%:MWAN Interface Live Status%></legend>
+	<div id="mwan_status_text"><img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" /> Collecting data...</div>
+</fieldset>
+
+<style type="text/css">
+  .container {	/* container for entire page. fixes bootstrap theme's ridiculously small page width */
+	max-width: 1044px;
+  }
+  #interface_field {
+	padding: 12px 20px 20px 20px;
+  }
+  #mwan_status_text {
+	display: table;
+	font-size: 14px;
+	margin: auto;
+	max-width: 1044px;
+	min-width: 246px;
+	width: 100%;
+  }
+  .wanon {
+	background-color: rgb(144, 240, 144);
+  }
+  .wanoff {
+	background-color: rgb(240, 144, 144);
+  }
+  .wanon, .wanoff {
+	border-radius: 60px;
+	box-shadow: 0px 2px 5px -3px;
+	float: left;
+	margin: 8px 3px 0px 3px;
+	min-height: 30px;
+	min-width: 235px;
+	padding: 5px 10px 8px 10px;
+	text-align: center;
+  }
+</style>
diff --git a/applications/luci-app-mwan3/luasrc/view/mwan/overview_detailed.htm b/applications/luci-app-mwan3/luasrc/view/mwan/overview_detailed.htm
new file mode 100644
index 0000000000..b80b9f3acf
--- /dev/null
+++ b/applications/luci-app-mwan3/luasrc/view/mwan/overview_detailed.htm
@@ -0,0 +1,51 @@
+<%+header%>
+
+<ul class="cbi-tabmenu">
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/overview")%>"><%:Interface Status%></a></li>
+	<li class="cbi-tab"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/overview/overview_detailed")%>"><%:Detailed Status%></a></li>
+</ul>
+
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+<script type="text/javascript">//<![CDATA[
+	XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "network", "mwan", "overview", "detailed_status")%>', null,
+		function(x, mArray)
+		{
+			var status = document.getElementById('mwan_detail_text');
+			if (mArray.mwandetail)
+			{
+				status.innerHTML = String.format('<pre>%s</pre>', mArray.mwandetail[0]);
+			}
+			else
+			{
+				status.innerHTML = '<strong>No detailed status information available</strong>';
+			}
+		}
+	);
+//]]></script>
+
+<div id="mwan_detail_status">
+	<fieldset class="cbi-section">
+		<legend><%:MWAN Detailed Status%></legend>
+		<div id="mwan_detail_text"><img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" /> Collecting data...</div>
+	</fieldset>
+</div>
+
+<style type="text/css">
+  .container {	/* container for entire page. fixes bootstrap theme's ridiculously small page width */
+	max-width: none;
+	margin-left: 30px;
+	padding-right: 30px;
+	width: auto;
+  }
+  #mwan_detail_status {
+	border: 1px dotted #555555;
+	background-color: #FFFFFF;
+	padding: 20px;
+  }
+  #mwan_detail_text {
+	padding: 20px;
+	text-align: left;
+  }
+</style>
+
+<%+footer%>
diff --git a/applications/luci-app-mwan3/luasrc/view/mwan/overview_interface.htm b/applications/luci-app-mwan3/luasrc/view/mwan/overview_interface.htm
new file mode 100644
index 0000000000..472c7ce7fc
--- /dev/null
+++ b/applications/luci-app-mwan3/luasrc/view/mwan/overview_interface.htm
@@ -0,0 +1,122 @@
+<%+header%>
+
+<ul class="cbi-tabmenu">
+	<li class="cbi-tab"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/overview")%>"><%:Interface Status%></a></li>
+	<li class="cbi-tab-disabled"><a href="<%=luci.dispatcher.build_url("admin/network/mwan/overview/overview_detailed")%>"><%:Detailed Status%></a></li>
+</ul>
+
+<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
+<script type="text/javascript">//<![CDATA[
+	XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "network", "mwan", "overview", "interface_status")%>', null,
+		function(x, mArray)
+		{
+			var statusDiv = document.getElementById('mwan_status_text');
+			if (mArray.wans)
+			{
+				var interfaceStatus = '';
+				for ( var i = 0; i < mArray.wans.length; i++ )
+				{
+					var status = '';
+					var css = '';
+					switch (mArray.wans[i].status)
+					{
+						case 'online':
+							status = 'Online (tracking active)';
+							css = 'wanon';
+							break;
+						case 'notMonitored':
+							status = 'Online (tracking off)';
+							css = 'wanon';
+							break;
+						case 'offline':
+							status = 'Offline';
+							css = 'wanoff';
+							break;
+						case 'notEnabled':
+							status = 'Disabled';
+							css = 'wanoff';
+							break;
+					}
+					interfaceStatus += String.format(
+						'<span class="%s"><strong>%s (<a href="%q">%s</a>)</strong><br />%s</span>',
+						css, mArray.wans[i].name, mArray.wans[i].link, mArray.wans[i].ifname, status
+					);
+				}
+				statusDiv.innerHTML = interfaceStatus;
+			}
+			else
+			{
+				statusDiv.innerHTML = '<strong>No MWAN interfaces found</strong>';
+			}
+
+			var logs = document.getElementById('mwan_statuslog_text');
+			if (mArray.mwanlog)
+			{
+				var mwanLog = 'Last 50 MWAN systemlog entries. Newest entries sorted at the top :';
+				logs.innerHTML = String.format('<pre>%s<br /><br />%s</pre>', mwanLog, mArray.mwanlog[0]);
+			}
+			else
+			{
+				logs.innerHTML = '<strong>No MWAN systemlog history found</strong>';
+			}
+		}
+	);
+//]]></script>
+
+<div id="mwan_interface_status">
+	<fieldset id="interface_field" class="cbi-section">
+		<legend><%:MWAN Interface Live Status%></legend>
+		<div id="mwan_status_text"><img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" /> Collecting data...</div>
+	</fieldset>
+	<fieldset class="cbi-section">
+		<legend><%:MWAN Interface Systemlog%></legend>
+		<div id="mwan_statuslog_text"><img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" /> Collecting data...</div>
+	</fieldset>
+</div>
+
+<style type="text/css">
+  .container {	/* container for entire page. fixes bootstrap theme's ridiculously small page width */
+	max-width: none;
+	margin-left: 30px;
+	padding-right: 30px;
+	width: auto;
+  }
+  #mwan_interface_status {
+	background-color: #FFFFFF;
+	border: 1px dotted #555555;
+	padding: 20px;
+  }
+  #interface_field {
+	padding: 12px 20px 20px 20px;
+  }
+  #mwan_status_text {
+	display: table;
+	font-size: 14px;
+	margin: auto;
+	max-width: 1044px;
+	min-width: 246px;
+	width: 100%;
+  }
+  .wanon {
+	background-color: rgb(144, 240, 144);
+  }
+  .wanoff {
+	background-color: rgb(240, 144, 144);
+  }
+  .wanon, .wanoff {
+	border-radius: 60px;
+	box-shadow: 0px 2px 5px -3px;
+	float: left;
+	margin: 8px 3px 0px 3px;
+	min-height: 30px;
+	min-width: 235px;
+	padding: 5px 10px 8px 10px;
+	text-align: center;
+  }
+  #mwan_statuslog_text {
+	padding: 20px;
+	text-align: left;
+  }
+</style>
+
+<%+footer%>