Add user interface for monitor, #44

inbucket.go

@@ -97,7 +97,7 @@ func main() {
 	}
 
 	// Create message hub
-	msgHub := msghub.New(rootCtx, 100)
+	msgHub := msghub.New(rootCtx, 30)
 
 	// Grab our datastore
 	ds := smtpd.DefaultFileDataStore()

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}}
+

webui/root_controller.go

@@ -23,6 +23,13 @@ func RootIndex(w http.ResponseWriter, req *http.Request, ctx *httpd.Context) (er
 	})
 }
 
+// RootMonitor serves the Inbucket monitor page
+func RootMonitor(w http.ResponseWriter, req *http.Request, ctx *httpd.Context) (err error) {
+	return httpd.RenderTemplate("root/monitor.html", w, map[string]interface{}{
+		"ctx": ctx,
+	})
+}
+
 // RootStatus serves the Inbucket status page
 func RootStatus(w http.ResponseWriter, req *http.Request, ctx *httpd.Context) (err error) {
 	smtpListener := fmt.Sprintf("%s:%d", config.GetSMTPConfig().IP4address.String(),

webui/routes.go

@@ -8,14 +8,26 @@ import (
 
 // SetupRoutes populates routes for the webui into the provided Router
 func SetupRoutes(r *mux.Router) {
-	r.Path("/").Handler(httpd.Handler(RootIndex)).Name("RootIndex").Methods("GET")
+	r.Path("/").Handler(
-	r.Path("/status").Handler(httpd.Handler(RootStatus)).Name("RootStatus").Methods("GET")
+		httpd.Handler(RootIndex)).Name("RootIndex").Methods("GET")
-	r.Path("/link/{name}/{id}").Handler(httpd.Handler(MailboxLink)).Name("MailboxLink").Methods("GET")
+	r.Path("/monitor").Handler(
-	r.Path("/mailbox").Handler(httpd.Handler(MailboxIndex)).Name("MailboxIndex").Methods("GET")
+		httpd.Handler(RootMonitor)).Name("RootMonitor").Methods("GET")
-	r.Path("/mailbox/{name}").Handler(httpd.Handler(MailboxList)).Name("MailboxList").Methods("GET")
+	r.Path("/status").Handler(
-	r.Path("/mailbox/{name}/{id}").Handler(httpd.Handler(MailboxShow)).Name("MailboxShow").Methods("GET")
+		httpd.Handler(RootStatus)).Name("RootStatus").Methods("GET")
-	r.Path("/mailbox/{name}/{id}/html").Handler(httpd.Handler(MailboxHTML)).Name("MailboxHtml").Methods("GET")
+	r.Path("/link/{name}/{id}").Handler(
-	r.Path("/mailbox/{name}/{id}/source").Handler(httpd.Handler(MailboxSource)).Name("MailboxSource").Methods("GET")
+		httpd.Handler(MailboxLink)).Name("MailboxLink").Methods("GET")
-	r.Path("/mailbox/dattach/{name}/{id}/{num}/{file}").Handler(httpd.Handler(MailboxDownloadAttach)).Name("MailboxDownloadAttach").Methods("GET")
+	r.Path("/mailbox").Handler(
-	r.Path("/mailbox/vattach/{name}/{id}/{num}/{file}").Handler(httpd.Handler(MailboxViewAttach)).Name("MailboxViewAttach").Methods("GET")
+		httpd.Handler(MailboxIndex)).Name("MailboxIndex").Methods("GET")
+	r.Path("/mailbox/{name}").Handler(
+		httpd.Handler(MailboxList)).Name("MailboxList").Methods("GET")
+	r.Path("/mailbox/{name}/{id}").Handler(
+		httpd.Handler(MailboxShow)).Name("MailboxShow").Methods("GET")
+	r.Path("/mailbox/{name}/{id}/html").Handler(
+		httpd.Handler(MailboxHTML)).Name("MailboxHtml").Methods("GET")
+	r.Path("/mailbox/{name}/{id}/source").Handler(
+		httpd.Handler(MailboxSource)).Name("MailboxSource").Methods("GET")
+	r.Path("/mailbox/dattach/{name}/{id}/{num}/{file}").Handler(
+		httpd.Handler(MailboxDownloadAttach)).Name("MailboxDownloadAttach").Methods("GET")
+	r.Path("/mailbox/vattach/{name}/{id}/{num}/{file}").Handler(
+		httpd.Handler(MailboxViewAttach)).Name("MailboxViewAttach").Methods("GET")
 }