go-inbucket/themes/integral/templates/root/status.html

{{define "title"}}About Inbucket{{end}}

{{define "script"}}
<script src="/public/jquery.sparkline.min.js" type="text/javascript" charset="utf-8"></script>
<script>
  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 >= 50) {
      h = h.slice(1,50)
    }
    h.push(parseInt(value))
    dataHist[name] = h
    el = $('#s-' + name)
    if (el) {
      el.sparkline(dataHist[name])
    }
  }

  function setHistory(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
    }
    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)

    // 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('smtpDeliveredTotal', data.smtp.DeliveredTotal, numberFilter, false)
    setHistory('smtpDeliveredTotal', data.smtp.DeliveredHist)
    metric('smtpConnectsTotal', data.smtp.ConnectsTotal, numberFilter, false)
    setHistory('smtpConnectsTotal', data.smtp.ConnectsHist)
    metric('smtpWarnsTotal', data.smtp.WarnsTotal, numberFilter, false)
    setHistory('smtpWarnsTotal', data.smtp.WarnsHist)
    metric('smtpErrorsTotal', data.smtp.ErrorsTotal, numberFilter, false)
    setHistory('smtpErrorsTotal', data.smtp.ErrorsHist)
    metric('retentionDeletesTotal', data.retention.DeletesTotal, numberFilter, false)
    setHistory('retentionDeletesTotal', data.retention.DeletesHist)
  }

  function loadMetrics() {
    // jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )
    jQuery.getJSON('/debug/vars', null, displayMetrics)
  }

  function aboutInit() {
    loadMetrics()
    setInterval(loadMetrics, 5000)
  }

  $(document).ready(aboutInit)
</script>
{{end}}

{{define "menu"}}
<div id="logo">
  <h1><a href="/">inbucket</a></h1>
  <h2>email testing service</h2>
</div>
{{end}}

{{define "content"}}
<h2>Inbucket Status</h2>

<p>Metrics are polled every 5 seconds.  Inbucket does not keep history for the
graphs labeled <em>(5s)</em>, but your web browser will chart the last 50
values over time.</p>

<div class="box">
  <h3>General Metrics</h3>
  <table class="metrics">
    <tr>
      <th>Uptime:</th>
      <td><span id="m-uptime">.</span></td>
    </tr>
    <tr>
      <th>System Memory:</th>
      <td><span id="m-memstatsSys">.</span></td>
      <td class="sparkline"><span id="s-memstatsSys">.</span></td>
      <td>(5s)</td>
    </tr>
    <tr>
      <th>Heap Size:</th>
      <td><span id="m-memstatsHeapSys">.</span></td>
      <td class="sparkline"><span id="s-memstatsHeapSys">.</span></td>
      <td>(5s)</td>
    </tr>
    <tr>
      <th>Heap In-Use:</th>
      <td><span id="m-memstatsHeapAlloc">.</span></td>
      <td class="sparkline"><span id="s-memstatsHeapAlloc">.</span></td>
      <td>(5s)</td>
    </tr>
    <tr>
      <th>Heap # Objects:</th>
      <td><span id="m-memstatsHeapObjects">.</span></td>
      <td class="sparkline"><span id="s-memstatsHeapObjects">.</span></td>
      <td>(5s)</td>
    </tr>
  </table>
  <p class="last">&nbsp;</p>
</div>
<div class="box">
  <h3>SMTP Metrics</h3>
  <table class="metrics">
    <tr>
      <th>Current Connections:</th>
      <td><span id="m-smtpConnectsCurrent">.</span></td>
      <td class="sparkline"><span id="s-smtpConnectsCurrent">.</span></td>
      <td>(5s)</td>
    </tr>
    <tr>
      <th>Total Connections:</th>
      <td><span id="m-smtpConnectsTotal">.</span></td>
      <td class="sparkline"><span id="s-smtpConnectsTotal">.</span></td>
      <td>(60s)</td>
    </tr>
    <tr>
      <th>Messages Delivered:</th>
      <td><span id="m-smtpDeliveredTotal">.</span></td>
      <td class="sparkline"><span id="s-smtpDeliveredTotal">.</span></td>
      <td>(60s)</td>
    </tr>
    <tr>
      <th>Errors Logged:</th>
      <td><span id="m-smtpErrorsTotal">.</span></td>
      <td class="sparkline"><span id="s-smtpErrorsTotal"></span></td>
      <td>(60s)</td>
    </tr>
    <tr>
      <th>Warnings Logged:</th>
      <td><span id="m-smtpWarnsTotal">.</span></td>
      <td class="sparkline"><span id="s-smtpWarnsTotal"></span></td>
      <td>(60s)</td>
    </tr>
  </table>
  <p class="last">&nbsp;</p>
</div>
<div class="box">
  <h3>Data Store Metrics</h3>
  <table class="metrics">
    <tr>
      <th>Retention Scan:</th>
      <td colspan="3">Completed <span id="m-retentionScanCompleted">.</span> ago</td>
    </tr>
    <tr>
      <th>Retention Deletes:</th>
      <td><span id="m-retentionDeletesTotal">.</span></td>
      <td class="sparkline"><span id="s-retentionDeletesTotal"></span></td>
      <td>(60s)</td>
    </tr>
  </table>
  <p class="last">&nbsp;</p>
</div>
{{end}}