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[

function secondsToString(time) {
	var seconds = parseInt(time, 10);

	var hrs   = Math.floor(seconds / 3600);
	seconds  -= hrs*3600;
	var mnts = Math.floor(seconds / 60);
	seconds  -= mnts*60;
	return String.format("%sh:%sm:%ss", hrs, mnts, seconds);
}

XHR.poll(-1, '<%=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 = '';
					var time = '';
					switch (status.interfaces[iface].status)
					{
						case 'online':
							state = '<%:Online%>';
							time = String.format(
								'<div><strong>Uptime: </strong>%s</div>',
								secondsToString(status.interfaces[iface].online)
							);
							css = 'success';
							break;
						case 'offline':
							state = '<%:Offline%>';
							time = String.format(
								'<div><strong>Downtime: </strong>%s</div>',
								secondsToString(status.interfaces[iface].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
					);
					if (time)
					{
						statusview += time;
					}
					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>