2015-01-25 10:24:07 +00:00
|
|
|
{{define "dashboard"}}
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>Burlesque v{{.version}}</title>
|
|
|
|
|
<meta charset="utf8">
|
|
|
|
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
|
.title, td, th {
|
|
|
|
|
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
2015-01-25 15:38:47 +00:00
|
|
|
font-size: 1.3em;
|
2015-01-25 16:15:44 +00:00
|
|
|
padding: 0.6em;
|
2015-01-25 15:38:47 +00:00
|
|
|
font-weight: 300;
|
2015-01-25 10:24:07 +00:00
|
|
|
}
|
|
|
|
|
|
2015-01-25 16:15:44 +00:00
|
|
|
.title, table {
|
2015-01-25 10:24:07 +00:00
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
2015-01-25 16:15:44 +00:00
|
|
|
width: 650px;
|
|
|
|
|
margin-left: -325px;
|
|
|
|
|
}
|
|
|
|
|
.title {
|
|
|
|
|
top: 10px;
|
2015-01-25 10:24:07 +00:00
|
|
|
text-align: center;
|
2015-01-25 15:38:47 +00:00
|
|
|
font-size: 1.8em;
|
2015-01-25 10:24:07 +00:00
|
|
|
}
|
|
|
|
|
table {
|
2015-01-25 15:38:47 +00:00
|
|
|
top: 100px;
|
2015-01-25 10:24:07 +00:00
|
|
|
border-spacing: 0;
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
}
|
|
|
|
|
th {
|
2015-01-25 15:38:47 +00:00
|
|
|
font-weight: 400;
|
2015-01-25 10:24:07 +00:00
|
|
|
}
|
|
|
|
|
thead tr {
|
2015-01-25 15:38:47 +00:00
|
|
|
border-bottom: #666 1px solid;
|
2015-01-25 10:24:07 +00:00
|
|
|
}
|
|
|
|
|
tbody tr:nth-child(even) {
|
|
|
|
|
background-color: #f5f5f5;
|
|
|
|
|
}
|
|
|
|
|
.name {
|
2015-01-25 16:15:44 +00:00
|
|
|
width: 350px;
|
|
|
|
|
max-width: 350px;
|
2015-01-25 15:38:47 +00:00
|
|
|
text-align: left;
|
2015-01-25 10:24:07 +00:00
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
.messages, .subscriptions {
|
|
|
|
|
width: 150px;
|
|
|
|
|
max-width: 150px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
.zero {
|
|
|
|
|
color: #aaa;
|
|
|
|
|
}
|
2015-01-25 15:38:47 +00:00
|
|
|
.fat {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
2015-01-25 10:24:07 +00:00
|
|
|
.hot {
|
|
|
|
|
font-weight: 600;
|
2015-01-25 15:38:47 +00:00
|
|
|
color: #f20;
|
2015-01-25 10:24:07 +00:00
|
|
|
}
|
2015-01-25 16:15:44 +00:00
|
|
|
#loading {
|
|
|
|
|
display: none;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 10px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
font-size: 0.5em;
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
#placeholder td {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
2015-01-25 10:24:07 +00:00
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<h1 class="title">Burlesque v{{.version}} at {{.hostname}}</h1>
|
|
|
|
|
|
|
|
|
|
<table class="stats">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th class="name">Queue</th>
|
|
|
|
|
<th class="messages">Messages</th>
|
|
|
|
|
<th class="subscriptions">Subscriptions</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="queues">
|
|
|
|
|
<tr id="placeholder">
|
|
|
|
|
<td colspan="3">Loading queues...</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
2015-01-25 16:15:44 +00:00
|
|
|
<div id="loading">Loading...</div>
|
2015-01-25 10:24:07 +00:00
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
function loadStatus(callback) {
|
2015-01-25 16:15:44 +00:00
|
|
|
var xhr = new XMLHttpRequest(),
|
|
|
|
|
loading = document.getElementById('loading');
|
|
|
|
|
|
|
|
|
|
loading.setAttribute('style', 'display: block;');
|
2015-01-25 10:24:07 +00:00
|
|
|
xhr.open('GET', '/status', true);
|
|
|
|
|
xhr.onreadystatechange = function() {
|
|
|
|
|
if (xhr.readyState === 4) {
|
|
|
|
|
if (xhr.status === 200) {
|
|
|
|
|
var queues = JSON.parse(xhr.responseText);
|
2015-01-25 16:15:44 +00:00
|
|
|
loading.setAttribute('style', 'display: none;');
|
2015-01-25 10:24:07 +00:00
|
|
|
callback(queues);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
xhr.send(null);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateDashboard(queues) {
|
|
|
|
|
var queuesList = document.getElementById('queues'),
|
|
|
|
|
placeholder = document.getElementById('placeholder'),
|
2015-01-25 15:38:47 +00:00
|
|
|
fatThreshold = 100,
|
2015-01-25 10:24:07 +00:00
|
|
|
hotThreshold = 1000;
|
|
|
|
|
|
|
|
|
|
if (placeholder) {
|
|
|
|
|
queuesList.removeChild(placeholder);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (queue in queues) {
|
|
|
|
|
var meta = queues[queue],
|
|
|
|
|
id = 'queue_' + queue,
|
|
|
|
|
tr = document.getElementById(id);
|
|
|
|
|
|
|
|
|
|
if (!tr) {
|
|
|
|
|
tr = document.createElement('tr');
|
|
|
|
|
tr.setAttribute('id', id);
|
2015-01-25 16:15:44 +00:00
|
|
|
|
|
|
|
|
var nameCol = document.createElement('td');
|
|
|
|
|
nameCol.appendChild(document.createTextNode(queue));
|
|
|
|
|
tr.appendChild(nameCol);
|
|
|
|
|
tr.appendChild(document.createElement('td'));
|
|
|
|
|
tr.appendChild(document.createElement('td'));
|
|
|
|
|
|
2015-01-25 10:24:07 +00:00
|
|
|
queuesList.appendChild(tr);
|
|
|
|
|
}
|
|
|
|
|
|
2015-01-25 16:15:44 +00:00
|
|
|
|
|
|
|
|
var cols = tr.getElementsByTagName('td'),
|
2015-01-25 15:38:47 +00:00
|
|
|
nameCol = cols[0],
|
|
|
|
|
messagesCol = cols[1],
|
|
|
|
|
subscriptionsCol = cols[2];
|
|
|
|
|
|
|
|
|
|
messagesCol.innerHTML = meta.messages;
|
|
|
|
|
subscriptionsCol.innerHTML = meta.subscriptions;
|
|
|
|
|
|
2015-01-25 16:15:44 +00:00
|
|
|
if (meta.messages > hotThreshold) {
|
2015-01-25 15:38:47 +00:00
|
|
|
nameCol.setAttribute('class', 'name hot');
|
|
|
|
|
messagesCol.setAttribute('class', 'messages hot');
|
2015-01-25 16:15:44 +00:00
|
|
|
} else if (meta.messages > fatThreshold) {
|
2015-01-25 15:38:47 +00:00
|
|
|
nameCol.setAttribute('class', 'name fat');
|
|
|
|
|
messagesCol.setAttribute('class', 'messages fat');
|
2015-01-25 16:15:44 +00:00
|
|
|
} else if (meta.messages === 0) {
|
2015-01-25 15:38:47 +00:00
|
|
|
messagesCol.setAttribute('class', 'messages zero');
|
2015-01-25 10:24:07 +00:00
|
|
|
} else {
|
2015-01-25 16:15:44 +00:00
|
|
|
nameCol.setAttribute('class', 'name');
|
2015-01-25 15:38:47 +00:00
|
|
|
messagesCol.setAttribute('class', 'messages');
|
2015-01-25 10:24:07 +00:00
|
|
|
}
|
|
|
|
|
|
2015-01-25 16:15:44 +00:00
|
|
|
if (meta.subscriptions === 0) {
|
2015-01-25 15:38:47 +00:00
|
|
|
subscriptionsCol.setAttribute('class', 'subscriptions zero');
|
2015-01-25 10:24:07 +00:00
|
|
|
} else {
|
2015-01-25 15:38:47 +00:00
|
|
|
subscriptionsCol.setAttribute('class', 'subscriptions');
|
2015-01-25 10:24:07 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2015-01-25 15:16:49 +00:00
|
|
|
function loop(timeout, func) {
|
2015-01-25 15:38:47 +00:00
|
|
|
func();
|
2015-01-25 15:16:49 +00:00
|
|
|
window.setTimeout(function(){
|
|
|
|
|
loop(timeout, func);
|
|
|
|
|
}, timeout);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
loop(1000, function(){
|
2015-01-25 10:24:07 +00:00
|
|
|
loadStatus(updateDashboard);
|
2015-01-25 15:16:49 +00:00
|
|
|
});
|
2015-01-25 10:24:07 +00:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
{{end}}
|
