Add user interface for monitor, #44

themes/bootstrap/public/inbucket.css

@@ -81,3 +81,8 @@ table.metrics {
   width: 200px;
 }
 
+/* Monitor */
+#monitor-message-list td {
+  cursor: pointer;
+  font-size: 12px;
+}

themes/bootstrap/public/monitor.js

@@ -0,0 +1,39 @@
+var baseURL = window.location.protocol + '//' + window.location.host;
+
+function startMonitor() {
+  $.addTemplateFormatter({
+    "date": function(value, template) {
+      return moment(value).calendar();
+    },
+    "subject": function(value, template) {
+      if (value == null || value.length == 0) {
+        return "(No Subject)";
+      }
+      return value;
+    }
+  });
+
+  var uri = '/api/v1/monitor/all/messages'
+  var l = window.location;
+  var url = ((l.protocol === "https:") ? "wss://" : "ws://") + l.host + uri
+  var ws = new WebSocket(url);
+
+  ws.addEventListener('message', function (e) {
+    var msg = JSON.parse(e.data);
+    msg['href'] = '/mailbox?name=' + msg.mailbox + '&id=' + msg.id;
+    $('#monitor-message-list').loadTemplate(
+        $('#message-template'),
+        msg,
+        { append: true });
+  });
+}
+
+function messageClick(node) {
+  var href = node.attributes['href'].value;
+  var url = baseURL + href;
+  window.location.assign(url);
+}
+
+function clearClick() {
+  $('#monitor-message-list').empty();
+}

themes/bootstrap/templates/_base.html

@@ -48,7 +48,8 @@
               </ul>
             </li>
             {{end}}
-            <li id="nav-status"><a href="/status" accesskey="2">Status</a></li>
+            <li id="nav-monitor"><a href="/monitor" accesskey="2">Monitor</a></li>
+            <li id="nav-status"><a href="/status" accesskey="3">Status</a></li>
           </ul>
           <form class="navbar-form navbar-right" action="{{reverse "MailboxIndex"}}" method="GET">
             <div class="form-group">

themes/bootstrap/templates/root/monitor.html

@@ -0,0 +1,51 @@
+{{define "title"}}Inbucket Monitor{{end}}
+
+{{define "script"}}
+<script src="/public/monitor.js" type="text/javascript" charset="utf-8"></script>
+<script>
+$(document).ready(function () {
+  $('#nav-monitor').addClass('active');
+  startMonitor();
+});
+</script>
+<script type="text/html" id="message-template">
+  <tr data-href="href" onclick="messageClick(this);">
+    <td data-content="date" data-format="date"/>
+    <td data-content-text="from"/>
+    <td data-content-text="mailbox"/>
+    <td data-content-text="subject" data-format="subject"/>
+  </tr>
+</script>
+{{end}}
+
+{{define "menu"}}
+<div id="logo">
+  <h1><a href="/">inbucket</a></h1>
+  <h2>email testing service</h2>
+</div>
+{{end}}
+
+{{define "content"}}
+<h2>Inbucket Monitor</h2>
+
+<div class="pull-right">
+  <button class="btn btn-primary" onclick="clearClick();">Clear</button>
+</div>
+
+<p class="small">Messages will be listed here shortly after delivery.</p>
+
+<div class="table-responsive clearfix">
+  <table class="table table-condensed table-hover">
+    <thead>
+      <tr>
+        <th>Date</th>
+        <th>From</th>
+        <th>Mailbox</th>
+        <th>Subject</th>
+      </tr>
+    </thead>
+    <tbody id="monitor-message-list"></tbody>
+  </table>
+</div>
+{{end}}
+