luci/applications/luci-app-mwan3/luasrc/view/mwan/overview_status_interface.htm

<%#
 Copyright 2014 Aedan Renner <chipdankly@gmail.com>
 Copyright 2018 Florian Eckert <fe@dev.tdt.de>
 Licensed to the public under the GNU General Public License v2.
-%>

<script type="text/javascript">//<![CDATA[
XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "status", "mwan", "interface_status")%>', null,
		function(x, status)
		{
			var statusDiv = document.getElementById('mwan_status_text');
			if (status.interfaces)
			{
				var statusview = '';
				for ( var iface in status.interfaces)
				{
					var state = '';
					var css = ''
					switch (status.interfaces[iface].status)
					{
						case 'online':
							state = '<%:Online (tracking active)%>';
							css = 'success';
							break;
						case 'offline':
							state = '<%:Offline%>';
							css = 'danger';
							break;
						default:
							state = '<%:Disabled%>';
							css = 'warning';
							break;
					}
					statusview += String.format(
						'<div class="alert-message %s">',
						css
					);
					statusview += String.format(
						'<div><strong>Interface: </strong>%s</div>',
						iface
					);
					statusview += String.format(
						'<div><strong>Status: </strong>%s</div>',
						state
					);
					statusview += '</div>'
				}
				statusDiv.innerHTML = statusview;
			}
			else
			{
				statusDiv.innerHTML = '<strong><%:No MWAN interfaces found%></strong>';
			}
		}
	);
//]]></script>

<style type="text/css">
	#mwan_status_text > div {
		display: inline-block;
		margin: 1rem;
		padding: 1rem;
		width: 10rem;
		float: left;
		line-height: 125%;
	}
</style>

<fieldset id="interface_field" class="cbi-section">
	<legend><%:MWAN Interfaces%></legend>
	<div id="mwan_status_text">
		<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" />
		<%:Collecting data...%>
	</div>
</fieldset>