dehart/status.html

## status.html
<html>
<head>
	<title>Status</title>
	<style>
		body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial; color: rgba(0, 0, 0, 0.54);}
		p { width: 340px; float:left;}
		.Running { background-color: greenyellow;}
		label,span { display:inline-block;}
		label {  width: 340px;}
		label > span {width:170px;}
		table {font-size: .9em;width: 100%; border-collapse: collapse; table-layout:fixed;}
		td {border-bottom: 1px solid #aaa;padding:4px 0;white-space: nowrap; overflow: hidden;}
		th { text-align:left; border-bottom: 1px solid grey;}
		em {background-color:#eee; border:1px solid #aaa; border-radius: 4px; font-style:normal; padding:2px; font-size: .8em;}
	</style>
<script>
	function duration(t) {
		var d = Math.floor(t/86400),
			h = ('0'+Math.floor(t/3600) % 24).slice(-2),
			m = ('0'+Math.floor(t/60)%60).slice(-2),
			s = ('0' + t % 60).slice(-2);
		return (d>0?d+'d ':'')+(h>0?h+':':'')+(m>0?m+':':'')+(t>60?s:s+'s');
	}
	function ms(ms) {
		return (ms > 2000) ? (Math.round(ms/1000, 2))+'s' : ms+'ms';
	}
	function size(a,b,c,d,e){
		return (b=Math,c=b.log,d=1e3,e=c(a)/c(d)|0,a/b.pow(d,e)).toFixed(2)+' '+(e?'kMGTPEZY'[--e]+'B':'Bytes')
	}
	function date(ts) {
		d = new Date(ts*1000);
		return `${d.getDate()}-${d.getMonth()+1}-${d.getFullYear()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
	}

	function tmpl(d) { return `<h2>${d.pool} - ${d['process manager']} <span style="float:right">${date(d['start time'])} (${duration(d['start since'])})</span></h2>
	<p>
		<b>Processes</b><br>
		<label><span>Idle</span>${d['idle processes']}</label>
		<label><span>Active</span>${d['active processes']} / ${d['max active processes']}</label>
		<label><span>Total</span>${d['total processes']}</label>
	</p>
	<p>
		<b>Queue</b><br>
		<label><span>Accepted conn</span>${d['accepted conn']}</label>
		<label><span>Listen queue</span>${d['listen queue']} / ${d['max listen queue']}</label>
		<label><span>Listen queue len</span>${d['listen queue len']}</label>
	</p>
	<p>
		<b>Other</b><br>
		<label><span>Max children reached</span>${d['max children reached']}</label>
		<label><span>Slow requests</span>${d['slow requests']}</label>
	</p>

	<table>
		<tr>
			<th width="44px"></th>
			<th>Started</th>
			<th>x ago</th>
			<th>Requests</th>
			<th>Duration</th>
			<th width="50%">Link</th>
			<th>Length</th>
			<th>Auth_User</th>
			<th>CPU</th>
			<th>Memory</th>
		</tr>
		${d.processes.map(p =>
			`<tr>
			<td><em class="${p.state}" title="${p.state}">${p.pid}</em></td>
			<td>${date(p['start time'])}</td>
			<td>${ms(p['start since'])}</td>
			<td>${p.requests}</td>
			<td>${ms(p['request duration'])}</td>
			<td>
				<em>${p['request method']}</em>
				<span>${p['request uri']}</span><br>
			</td>
			<td>${size(p['content length'])}</td>
			<td>${p.user}</td>
			<td>${p['last request cpu']}%</td>
			<td>${size(p['last request memory'])}</td>
		</tr>`
			)}
	</table>`;
}
	function start() {
		fetch("http://localhost/status?full&json")
		.then(function(response) {return response.json();})
		.then(function (data) {document.body.innerHTML = tmpl(data);})
		.catch(function (err) {clearInterval(intervalId);});
	}
	var intervalId = setInterval(start,4000);
	document.addEventListener("DOMContentLoaded", start);
</script>
</head>
<body>

</body>
</html>
	<html>
	<head>
	<title>Status</title>
	<style>
	body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial; color: rgba(0, 0, 0, 0.54);}
	p { width: 340px; float:left;}
	.Running { background-color: greenyellow;}
	label,span { display:inline-block;}
	label { width: 340px;}
	label > span {width:170px;}
	table {font-size: .9em;width: 100%; border-collapse: collapse; table-layout:fixed;}
	td {border-bottom: 1px solid #aaa;padding:4px 0;white-space: nowrap; overflow: hidden;}
	th { text-align:left; border-bottom: 1px solid grey;}
	em {background-color:#eee; border:1px solid #aaa; border-radius: 4px; font-style:normal; padding:2px; font-size: .8em;}
	</style>
	<script>
	function duration(t) {
	var d = Math.floor(t/86400),
	h = ('0'+Math.floor(t/3600) % 24).slice(-2),
	m = ('0'+Math.floor(t/60)%60).slice(-2),
	s = ('0' + t % 60).slice(-2);
	return (d>0?d+'d ':'')+(h>0?h+':':'')+(m>0?m+':':'')+(t>60?s:s+'s');
	}
	function ms(ms) {
	return (ms > 2000) ? (Math.round(ms/1000, 2))+'s' : ms+'ms';
	}
	function size(a,b,c,d,e){
	return (b=Math,c=b.log,d=1e3,e=c(a)/c(d)\|0,a/b.pow(d,e)).toFixed(2)+' '+(e?'kMGTPEZY'[--e]+'B':'Bytes')
	}
	function date(ts) {
	d = new Date(ts*1000);
	return `${d.getDate()}-${d.getMonth()+1}-${d.getFullYear()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
	}

	function tmpl(d) { return `<h2>${d.pool} - ${d['process manager']} <span style="float:right">${date(d['start time'])} (${duration(d['start since'])})</span></h2>
	<p>
	<b>Processes</b><br>
	<label><span>Idle</span>${d['idle processes']}</label>
	<label><span>Active</span>${d['active processes']} / ${d['max active processes']}</label>
	<label><span>Total</span>${d['total processes']}</label>
	</p>
	<p>
	<b>Queue</b><br>
	<label><span>Accepted conn</span>${d['accepted conn']}</label>
	<label><span>Listen queue</span>${d['listen queue']} / ${d['max listen queue']}</label>
	<label><span>Listen queue len</span>${d['listen queue len']}</label>
	</p>
	<p>
	<b>Other</b><br>
	<label><span>Max children reached</span>${d['max children reached']}</label>
	<label><span>Slow requests</span>${d['slow requests']}</label>
	</p>

	<table>
	<tr>
	<th width="44px"></th>
	<th>Started</th>
	<th>x ago</th>
	<th>Requests</th>
	<th>Duration</th>
	<th width="50%">Link</th>
	<th>Length</th>
	<th>Auth_User</th>
	<th>CPU</th>
	<th>Memory</th>
	</tr>
	${d.processes.map(p =>
	`<tr>
	<td><em class="${p.state}" title="${p.state}">${p.pid}</em></td>
	<td>${date(p['start time'])}</td>
	<td>${ms(p['start since'])}</td>
	<td>${p.requests}</td>
	<td>${ms(p['request duration'])}</td>
	<td>
	<em>${p['request method']}</em>
	<span>${p['request uri']}</span><br>
	</td>
	<td>${size(p['content length'])}</td>
	<td>${p.user}</td>
	<td>${p['last request cpu']}%</td>
	<td>${size(p['last request memory'])}</td>
	</tr>`
	)}
	</table>`;
	}
	function start() {
	fetch("http://localhost/status?full&json")
	.then(function(response) {return response.json();})
	.then(function (data) {document.body.innerHTML = tmpl(data);})
	.catch(function (err) {clearInterval(intervalId);});
	}
	var intervalId = setInterval(start,4000);
	document.addEventListener("DOMContentLoaded", start);
	</script>
	</head>
	<body>

	</body>
	</html>