Panel-ize status, move js to public

themes/bootstrap/public/metrics.js

@@ -0,0 +1,127 @@
+// Inbucket Status Metrics
+jQuery.ajaxSetup({ cache: false });
+flashOn = jQuery.Color("rgba(255,255,0,1)");
+flashOff = jQuery.Color("rgba(255,255,0,0)");
+dataHist = new Object();
+
+function timeFilter(seconds) {
+  if (seconds < 60) {
+    return seconds + " seconds";
+  } else if (seconds < 3600) {
+    return (seconds/60).toFixed(0) + " minute(s)";
+  } else if (seconds < 86400) {
+    return (seconds/3600).toFixed(1) + " hour(s)";
+  }
+  return (seconds/86400).toFixed(0) + " day(s)";
+}
+
+function sizeFilter(bytes) {
+  if (bytes < 1024) {
+    return bytes + " bytes";
+  } else if (bytes < 1048576) {
+    return (bytes/1024).toFixed(0) + " KB";
+  } else if (bytes < 1073741824) {
+    return (bytes/1048576).toFixed(2) + " MB";
+  }
+  return (bytes/1073741824).toFixed(2) + " GB";
+}
+
+function numberFilter(x) {
+  var parts = x.toString().split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+}
+
+function appendHistory(name, value) {
+  var h = dataHist[name];
+  if (! h) {
+    h = new Array(0);
+  }
+  // Prevent array from growing
+  if (h.length >= 60) {
+    h = h.slice(1,60);
+  }
+  h.push(parseInt(value));
+  dataHist[name] = h;
+  el = $('#s-' + name);
+  if (el) {
+    el.sparkline(dataHist[name]);
+  }
+}
+
+// Show spikes for numbers that only increase
+function setHistoryOfActivity(name, value) {
+  var h = value.split(",");
+  var prev = parseInt(h[0]);
+  for (i=0; i<h.length; i++) {
+    var t = parseInt(h[i]);
+    h[i] = t-prev;
+    prev = t;
+  }
+  // First value will always be zero
+  if (h.length > 0) {
+    h = h.slice(1);
+  }
+  el = $('#s-' + name);
+  if (el) {
+    el.sparkline(h);
+  }
+}
+
+// Show up/down for numbers that can decrease
+function setHistoryOfCount(name, value) {
+  var h = value.split(",");
+  el = $('#s-' + name);
+  if (el) {
+    el.sparkline(h);
+  }
+}
+
+function metric(name, value, filter, chartable) {
+  if (chartable) {
+    appendHistory(name, value);
+  }
+  if (filter) {
+    value = filter(value);
+  }
+  var el = $('#m-' + name)
+    if (el.text() != value) {
+      el.text(value);
+      el.css('background-color', flashOn);
+      el.animate({ backgroundColor: flashOff }, 1500);
+    }
+}
+
+function displayMetrics(data, textStatus, jqXHR) {
+  // Non graphing
+  metric('uptime', data.uptime, timeFilter, false);
+  metric('retentionScanCompleted', data.retention.SecondsSinceScanCompleted, timeFilter, false);
+  metric('retentionPeriod', data.retention.Period, timeFilter, false);
+
+  // JavaScript history
+  metric('memstatsSys', data.memstats.Sys, sizeFilter, true);
+  metric('memstatsHeapAlloc', data.memstats.HeapAlloc, sizeFilter, true);
+  metric('memstatsHeapSys', data.memstats.HeapSys, sizeFilter, true);
+  metric('memstatsHeapObjects', data.memstats.HeapObjects, numberFilter, true);
+  metric('smtpConnectsCurrent', data.smtp.ConnectsCurrent, numberFilter, true);
+
+  // Server-side history
+  metric('smtpReceivedTotal', data.smtp.ReceivedTotal, numberFilter, false);
+  setHistoryOfActivity('smtpReceivedTotal', data.smtp.ReceivedHist);
+  metric('smtpConnectsTotal', data.smtp.ConnectsTotal, numberFilter, false);
+  setHistoryOfActivity('smtpConnectsTotal', data.smtp.ConnectsHist);
+  metric('smtpWarnsTotal', data.smtp.WarnsTotal, numberFilter, false);
+  setHistoryOfActivity('smtpWarnsTotal', data.smtp.WarnsHist);
+  metric('smtpErrorsTotal', data.smtp.ErrorsTotal, numberFilter, false);
+  setHistoryOfActivity('smtpErrorsTotal', data.smtp.ErrorsHist);
+  metric('retentionDeletesTotal', data.retention.DeletesTotal, numberFilter, false);
+  setHistoryOfActivity('retentionDeletesTotal', data.retention.DeletesHist);
+  metric('retainedCurrent', data.retention.RetainedCurrent, numberFilter, false);
+  setHistoryOfCount('retainedCurrent', data.retention.RetainedHist);
+}
+
+function loadMetrics() {
+  // jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )
+  jQuery.getJSON('/debug/vars', null, displayMetrics);
+}
+

themes/bootstrap/templates/mailbox/_show.html

@@ -62,7 +62,7 @@
       </a>
       <a class="btn btn-primary btn-sm"
          role="button"
-         hhref="/mailbox/dattach/{{$name}}/{{$id}}/{{$i}}/{{$e.FileName}}"
+         href="/mailbox/dattach/{{$name}}/{{$id}}/{{$i}}/{{$e.FileName}}"
          aria-label="Download">
         <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
         Download

themes/bootstrap/templates/root/status.html

@@ -3,140 +3,14 @@
 {{define "script"}}
 <script src="/public/jquery.sparkline.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/public/jquery.color-2.1.2.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="/public/metrics.js" type="text/javascript" charset="utf-8"></script>
 <script>
-  jQuery.ajaxSetup({ cache: false });
+$(document).ready(
-  flashOn = jQuery.Color("rgba(255,255,0,1)");
+    function() {
-  flashOff = jQuery.Color("rgba(255,255,0,0)");
+      $('#nav-status').addClass('active');
-  dataHist = new Object();
+      loadMetrics();
-
+      setInterval(loadMetrics, 10000);
-  function timeFilter(seconds) {
+    });
-    if (seconds < 60) {
-      return seconds + " seconds";
-    } else if (seconds < 3600) {
-      return (seconds/60).toFixed(0) + " minute(s)";
-    } else if (seconds < 86400) {
-      return (seconds/3600).toFixed(1) + " hour(s)";
-    }
-    return (seconds/86400).toFixed(0) + " day(s)";
-  }
-
-  function sizeFilter(bytes) {
-    if (bytes < 1024) {
-      return bytes + " bytes";
-    } else if (bytes < 1048576) {
-      return (bytes/1024).toFixed(0) + " KB";
-    } else if (bytes < 1073741824) {
-      return (bytes/1048576).toFixed(2) + " MB";
-    }
-    return (bytes/1073741824).toFixed(2) + " GB";
-  }
-
-  function numberFilter(x) {
-    var parts = x.toString().split(".");
-    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-    return parts.join(".");
-  }
-
-  function appendHistory(name, value) {
-    var h = dataHist[name];
-    if (! h) {
-      h = new Array(0);
-    }
-    // Prevent array from growing
-    if (h.length >= 60) {
-      h = h.slice(1,60);
-    }
-    h.push(parseInt(value));
-    dataHist[name] = h;
-    el = $('#s-' + name);
-    if (el) {
-      el.sparkline(dataHist[name]);
-    }
-  }
-
-  // Show spikes for numbers that only increase
-  function setHistoryOfActivity(name, value) {
-    var h = value.split(",");
-    var prev = parseInt(h[0]);
-    for (i=0; i<h.length; i++) {
-      var t = parseInt(h[i]);
-      h[i] = t-prev;
-      prev = t;
-    }
-    // First value will always be zero
-    if (h.length > 0) {
-      h = h.slice(1);
-    }
-    el = $('#s-' + name);
-    if (el) {
-      el.sparkline(h);
-    }
-  }
-
-  // Show up/down for numbers that can decrease
-  function setHistoryOfCount(name, value) {
-    var h = value.split(",");
-    el = $('#s-' + name);
-    if (el) {
-      el.sparkline(h);
-    }
-  }
-
-  function metric(name, value, filter, chartable) {
-    if (chartable) {
-      appendHistory(name, value);
-    }
-    if (filter) {
-      value = filter(value);
-    }
-    var el = $('#m-' + name)
-    if (el.text() != value) {
-      el.text(value);
-      el.css('background-color', flashOn);
-      el.animate({ backgroundColor: flashOff }, 1500);
-    }
-  }
-
-  function displayMetrics(data, textStatus, jqXHR) {
-    // Non graphing
-    metric('uptime', data.uptime, timeFilter, false);
-    metric('retentionScanCompleted', data.retention.SecondsSinceScanCompleted, timeFilter, false);
-    metric('retentionPeriod', data.retention.Period, timeFilter, false);
-
-    // JavaScript history
-    metric('memstatsSys', data.memstats.Sys, sizeFilter, true);
-    metric('memstatsHeapAlloc', data.memstats.HeapAlloc, sizeFilter, true);
-    metric('memstatsHeapSys', data.memstats.HeapSys, sizeFilter, true);
-    metric('memstatsHeapObjects', data.memstats.HeapObjects, numberFilter, true);
-    metric('smtpConnectsCurrent', data.smtp.ConnectsCurrent, numberFilter, true);
-
-    // Server-side history
-    metric('smtpReceivedTotal', data.smtp.ReceivedTotal, numberFilter, false);
-    setHistoryOfActivity('smtpReceivedTotal', data.smtp.ReceivedHist);
-    metric('smtpConnectsTotal', data.smtp.ConnectsTotal, numberFilter, false);
-    setHistoryOfActivity('smtpConnectsTotal', data.smtp.ConnectsHist);
-    metric('smtpWarnsTotal', data.smtp.WarnsTotal, numberFilter, false);
-    setHistoryOfActivity('smtpWarnsTotal', data.smtp.WarnsHist);
-    metric('smtpErrorsTotal', data.smtp.ErrorsTotal, numberFilter, false);
-    setHistoryOfActivity('smtpErrorsTotal', data.smtp.ErrorsHist);
-    metric('retentionDeletesTotal', data.retention.DeletesTotal, numberFilter, false);
-    setHistoryOfActivity('retentionDeletesTotal', data.retention.DeletesHist);
-    metric('retainedCurrent', data.retention.RetainedCurrent, numberFilter, false);
-    setHistoryOfCount('retainedCurrent', data.retention.RetainedHist);
-  }
-
-  function loadMetrics() {
-    // jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )
-    jQuery.getJSON('/debug/vars', null, displayMetrics);
-  }
-
-  function aboutInit() {
-    $('#navStatus').addClass('active');
-    loadMetrics();
-    setInterval(loadMetrics, 10000);
-  }
-
-  $(document).ready(aboutInit)
 </script>
 {{end}}
 
@@ -153,135 +27,148 @@
 <p>Metrics are polled every 10 seconds.  Inbucket does not keep history for the
 10 minute graphs, but your web browser will accumulate the data over time.</p>
 
-<div class="box">
+<div class="panel panel-default">
-  <h3>Configuration</h3>
+  <div class="panel-heading">
-  <table class="metrics">
+    <h3 class="panel-title">Configuration</h3>
-    <tr>
+  </div>
-      <th>Version:</th>
+  <div class="panel-body">
-      <td><span>{{.version}}, built on {{.buildDate}}</span></td>
+    <table class="metrics">
-    </tr>
+      <tr>
-    <tr>
+        <th>Version:</th>
-      <th>SMTP Listener:</th>
+        <td><span>{{.version}}, built on {{.buildDate}}</span></td>
-      <td><span>{{.smtpListener}}</span></td>
+      </tr>
-    </tr>
+      <tr>
-    <tr>
+        <th>SMTP Listener:</th>
-      <th>POP3 Listener:</th>
+        <td><span>{{.smtpListener}}</span></td>
-      <td><span>{{.pop3Listener}}</span></td>
+      </tr>
-    </tr>
+      <tr>
-    <tr>
+        <th>POP3 Listener:</th>
-      <th>HTTP Listener:</th>
+        <td><span>{{.pop3Listener}}</span></td>
-      <td><span>{{.webListener}}</span></td>
+      </tr>
-    </tr>
+      <tr>
-  </table>
+        <th>HTTP Listener:</th>
-  <p class="last">&nbsp;</p>
+        <td><span>{{.webListener}}</span></td>
+      </tr>
+    </table>
+  </div>
 </div>
-<div class="box">
+
-  <h3>General Metrics</h3>
+<div class="panel panel-default">
-  <table class="metrics">
+  <div class="panel-heading">
-    <tr>
+    <h3 class="panel-title">General Metrics</h3>
-      <th>Uptime:</th>
+  </div>
-      <td class="number"><span id="m-uptime">.</span></td>
+  <div class="panel-body">
-    </tr>
+    <table class="metrics">
-    <tr>
+      <tr>
-      <th>System Memory:</th>
+        <th>Uptime:</th>
-      <td class="number"><span id="m-memstatsSys">.</span></td>
+        <td class="number"><span id="m-uptime">.</span></td>
-      <td class="sparkline"><span id="s-memstatsSys">.</span></td>
+      </tr>
-      <td>(10min)</td>
+      <tr>
-    </tr>
+        <th>System Memory:</th>
-    <tr>
+        <td class="number"><span id="m-memstatsSys">.</span></td>
-      <th>Heap Size:</th>
+        <td class="sparkline"><span id="s-memstatsSys">.</span></td>
-      <td class="number"><span id="m-memstatsHeapSys">.</span></td>
+        <td>(10min)</td>
-      <td class="sparkline"><span id="s-memstatsHeapSys">.</span></td>
+      </tr>
-      <td>(10min)</td>
+      <tr>
-    </tr>
+        <th>Heap Size:</th>
-    <tr>
+        <td class="number"><span id="m-memstatsHeapSys">.</span></td>
-      <th>Heap In-Use:</th>
+        <td class="sparkline"><span id="s-memstatsHeapSys">.</span></td>
-      <td class="number"><span id="m-memstatsHeapAlloc">.</span></td>
+        <td>(10min)</td>
-      <td class="sparkline"><span id="s-memstatsHeapAlloc">.</span></td>
+      </tr>
-      <td>(10min)</td>
+      <tr>
-    </tr>
+        <th>Heap In-Use:</th>
-    <tr>
+        <td class="number"><span id="m-memstatsHeapAlloc">.</span></td>
-      <th>Heap # Objects:</th>
+        <td class="sparkline"><span id="s-memstatsHeapAlloc">.</span></td>
-      <td class="number"><span id="m-memstatsHeapObjects">.</span></td>
+        <td>(10min)</td>
-      <td class="sparkline"><span id="s-memstatsHeapObjects">.</span></td>
+      </tr>
-      <td>(10min)</td>
+      <tr>
-    </tr>
+        <th>Heap # Objects:</th>
-  </table>
+        <td class="number"><span id="m-memstatsHeapObjects">.</span></td>
-  <p class="last">&nbsp;</p>
+        <td class="sparkline"><span id="s-memstatsHeapObjects">.</span></td>
+        <td>(10min)</td>
+      </tr>
+    </table>
+  </div>
 </div>
-<div class="box">
+<div class="panel panel-default">
-  <h3>SMTP Metrics</h3>
+  <div class="panel-heading">
-  <table class="metrics">
+    <h3 class="panel-title">SMTP Metrics</h3>
-    <tr>
+  </div>
-      <th>Current Connections:</th>
+  <div class="panel-body">
-      <td class="number"><span id="m-smtpConnectsCurrent">.</span></td>
+    <table class="metrics">
-      <td class="sparkline"><span id="s-smtpConnectsCurrent">.</span></td>
+      <tr>
-      <td>(10min)</td>
+        <th>Current Connections:</th>
-    </tr>
+        <td class="number"><span id="m-smtpConnectsCurrent">.</span></td>
-    <tr>
+        <td class="sparkline"><span id="s-smtpConnectsCurrent">.</span></td>
-      <th>Total Connections:</th>
+        <td>(10min)</td>
-      <td class="number"><span id="m-smtpConnectsTotal">.</span></td>
+      </tr>
-      <td class="sparkline"><span id="s-smtpConnectsTotal">.</span></td>
+      <tr>
-      <td>(60min)</td>
+        <th>Total Connections:</th>
-    </tr>
+        <td class="number"><span id="m-smtpConnectsTotal">.</span></td>
-    <tr>
+        <td class="sparkline"><span id="s-smtpConnectsTotal">.</span></td>
-      <th>Messages Received:</th>
+        <td>(60min)</td>
-      <td class="number"><span id="m-smtpReceivedTotal">.</span></td>
+      </tr>
-      <td class="sparkline"><span id="s-smtpReceivedTotal">.</span></td>
+      <tr>
-      <td>(60min)</td>
+        <th>Messages Received:</th>
-    </tr>
+        <td class="number"><span id="m-smtpReceivedTotal">.</span></td>
-    <tr>
+        <td class="sparkline"><span id="s-smtpReceivedTotal">.</span></td>
-      <th>Errors Logged:</th>
+        <td>(60min)</td>
-      <td class="number"><span id="m-smtpErrorsTotal">.</span></td>
+      </tr>
-      <td class="sparkline"><span id="s-smtpErrorsTotal"></span></td>
+      <tr>
-      <td>(60min)</td>
+        <th>Errors Logged:</th>
-    </tr>
+        <td class="number"><span id="m-smtpErrorsTotal">.</span></td>
-    <tr>
+        <td class="sparkline"><span id="s-smtpErrorsTotal"></span></td>
-      <th>Warnings Logged:</th>
+        <td>(60min)</td>
-      <td class="number"><span id="m-smtpWarnsTotal">.</span></td>
+      </tr>
-      <td class="sparkline"><span id="s-smtpWarnsTotal"></span></td>
+      <tr>
-      <td>(60min)</td>
+        <th>Warnings Logged:</th>
-    </tr>
+        <td class="number"><span id="m-smtpWarnsTotal">.</span></td>
-  </table>
+        <td class="sparkline"><span id="s-smtpWarnsTotal"></span></td>
-  <p class="last">&nbsp;</p>
+        <td>(60min)</td>
+      </tr>
+    </table>
+  </div>
 </div>
-<div class="box">
+<div class="panel panel-default">
-  <h3>Data Store Metrics</h3>
+  <div class="panel-heading">
-  <table class="metrics">
+    <h3 class="panel-title">Data Store Metrics</h3>
-    <tr>
+  </div>
-      <th>Retention Period:</th>
+  <div class="panel-body">
-      <td colspan="3">
+    <table class="metrics">
-        {{if .retentionMinutes}}
+      <tr>
-        <span id="m-retentionPeriod">.</span>
+        <th>Retention Period:</th>
-        {{else}}
+        <td colspan="3">
-        Disabled
+          {{if .retentionMinutes}}
-        {{end}}
+          <span id="m-retentionPeriod">.</span>
-      </td>
+          {{else}}
-    </tr>
+          Disabled
-    <tr>
+          {{end}}
-      <th>Retention Scan:</th>
+        </td>
-      <td colspan="3">
+      </tr>
-        {{if .retentionMinutes}}
+      <tr>
-        Completed <span id="m-retentionScanCompleted">.</span> ago
+        <th>Retention Scan:</th>
-        {{else}}
+        <td colspan="3">
-        Disabled
+          {{if .retentionMinutes}}
-        {{end}}
+          Completed <span id="m-retentionScanCompleted">.</span> ago
-      </td>
+          {{else}}
-    </tr>
+          Disabled
-    <tr>
+          {{end}}
-      <th>Retention Deletes:</th>
+        </td>
-      <td class="number"><span id="m-retentionDeletesTotal">.</span></td>
+      </tr>
-      <td class="sparkline"><span id="s-retentionDeletesTotal"></span></td>
+      <tr>
-      <td>(60min)</td>
+        <th>Retention Deletes:</th>
-    </tr>
+        <td class="number"><span id="m-retentionDeletesTotal">.</span></td>
-    <tr>
+        <td class="sparkline"><span id="s-retentionDeletesTotal"></span></td>
-      <th>Currently Retained:</th>
+        <td>(60min)</td>
-      <td class="number"><span id="m-retainedCurrent">.</span></td>
+      </tr>
-      <td class="sparkline"><span id="s-retainedCurrent"></span></td>
+      <tr>
-      <td>(60min)</td>
+        <th>Currently Retained:</th>
-    </tr>
+        <td class="number"><span id="m-retainedCurrent">.</span></td>
-  </table>
+        <td class="sparkline"><span id="s-retainedCurrent"></span></td>
-  <p class="last">&nbsp;</p>
+        <td>(60min)</td>
+      </tr>
+    </table>
+  </div>
 </div>
 {{end}}