Added instrumentation for admin dashboard interface

adminui/.hz/config.toml

@@ -0,0 +1,91 @@
+# This is a TOML file
+
+###############################################################################
+# IP options
+# 'bind' controls which local interfaces will be listened on
+# 'port' controls which port will be listened on
+#------------------------------------------------------------------------------
+bind = [ "0.0.0.0" ]
+port = 8000
+stats = true
+
+###############################################################################
+# HTTPS Options
+# 'insecure' will disable HTTPS and use HTTP instead
+# 'key_file' and 'cert_file' are required for serving HTTPS
+#------------------------------------------------------------------------------
+insecure = true
+# key_file = "key.pem"
+# cert_file = "cert.pem"
+
+
+###############################################################################
+# App Options
+# 'project' will change to the given directory
+# 'serve_static' will serve files from the given directory over HTTP/HTTPS
+#------------------------------------------------------------------------------
+# project = "horizon"
+serve_static = "dist"
+
+
+###############################################################################
+# Data Options
+# WARNING: these should probably not be enabled on a publically accessible
+# service.  Tables and indexes are not lightweight objects, and allowing them
+# to be created like this could open the service up to denial-of-service
+# attacks.
+# 'auto_create_table' creates a table when one is needed but does not exist
+# 'auto_create_index' creates an index when one is needed but does not exist
+#------------------------------------------------------------------------------
+auto_create_table = true
+auto_create_index = true
+
+
+###############################################################################
+# RethinkDB Options
+# These options are mutually exclusive
+# 'connect' will connect to an existing RethinkDB instance
+# 'start_rethinkdb' will run an internal RethinkDB instance
+#------------------------------------------------------------------------------
+# connect = "rethinkdb-stable:28015"
+# start_rethinkdb = false
+
+
+###############################################################################
+# Debug Options
+# 'debug' enables debug log statements
+#------------------------------------------------------------------------------
+# debug = true
+
+
+###############################################################################
+# Authentication Options
+# Each auth subsection will add an endpoint for authenticating through the
+# specified provider.
+# 'allow_anonymous' issues new accounts to users without an auth provider
+# 'allow_unauthenticated' allows connections that are not tied to a user id
+# 'auth_redirect' specifies where users will be redirected to after login
+#------------------------------------------------------------------------------
+allow_anonymous = true
+allow_unauthenticated = true
+# auth_redirect = "/"
+#
+# [auth.facebook]
+# id = "000000000000000"
+# secret = "00000000000000000000000000000000"
+#
+# [auth.google]
+# id = "00000000000-00000000000000000000000000000000.apps.googleusercontent.com"
+# secret = "000000000000000000000000"
+#
+# [auth.twitter]
+# id = "0000000000000000000000000"
+# secret = "00000000000000000000000000000000000000000000000000"
+#
+# [auth.github]
+# id = "00000000000000000000"
+# secret = "0000000000000000000000000000000000000000"
+#
+# [auth.twitch]
+# id = "0000000000000000000000000000000"
+# secret = "0000000000000000000000000000000"

adminui/build.js

@@ -0,0 +1,37 @@
+"use strict";
+
+const fs = require("fs");
+const jumptag = require("jumptag");
+const stylus = require("stylus");
+
+let readFileAsync = path =>
+  new Promise((resolve, reject) =>
+    fs.readFile(path, (err, data) => err ? reject(err) : resolve(data)));
+
+let writeFileAsync = (path, content) =>
+  new Promise((resolve, reject) =>
+    fs.writeFile(path, content, err => err ? reject(err) : resolve(true)));
+
+let stylusAsync = (content, include, outfn) =>
+  new Promise((resolve, reject) =>
+    stylus(content).include(include)
+      .render((err, css) => err ? reject(err) : resolve(css)));
+
+let params = process.argv.slice(2);
+
+if (params[0] === "serve") {
+  jumptag.server("src/components", "*.jump").listen(8001);
+  console.log("Jumptag hot reload server running on 8001");
+}
+else {
+  readFileAsync("src/styles/main.styl")
+  .then(content => stylusAsync(content.toString("utf8"), `${__dirname}/src/styles`, "main.css"))
+  .then(output => writeFileAsync("dist/main.css", output))
+  .then(complete => console.log("Finished building styles"))
+  .catch(err => console.log("Style ERROR:", err.stack));
+
+  jumptag.watcher("src/components", "*.jump")
+  .then(output => writeFileAsync("dist/bundle.js", output))
+  .then(complete => console.log("Finished building templates"))
+  .catch(err => console.log("Template ERROR:", err.stack));
+}

adminui/dist/graphing.js

@@ -0,0 +1,31 @@
+
+let timestamp = () => (new Date).getTime() / 1000;
+
+class RealtimeGraph {
+  constructor(selector, captions) {
+    this.captions = captions; 
+    this.selector = selector;
+    this.graph = null;
+  }
+
+  attach() {
+    this.graph = $(this.selector).epoch({
+      type: "time.line",
+      axes: ["left", "bottom"],
+      data: this.captions.map(label => ({
+        label: label, values: [{time: timestamp(), y: 0}]
+      }))
+    });
+  }
+
+  update(data) {
+    if (!this.graph) return;
+    this.graph.push(data.map(value => ({time: timestamp(), y: value})));
+  }
+
+  resize(ev) {
+    if (!this.graph) return;
+    let element = document.querySelector(this.selector).parentNode;
+    this.graph.option("width", element.getBoundingClientRect().width);
+  }
+}

adminui/dist/index.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+  <head>
+    <script src="https://cdn.rawgit.com/arqex/freezer/master/build/freezer.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/incremental-dom/0.3.0/incremental-dom-min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/js/epoch.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/css/epoch.min.css">
+    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+
+    <script src="/horizon/horizon.js"></script>
+    <script src="/index.js"></script>
+    <script src="/bundle.js"></script>
+
+    <link rel="stylesheet" href="/main.css">
+  </head>
+  <body>
+
+    <div id="app">
+    </div>
+
+    <script>
+      function update() {
+        IncrementalDOM.patch(document.getElementById("app"), app);
+      }
+
+      let model = new Model();
+      model.subscribe(update);
+
+      update();
+    </script>
+  </body>
+</html>

adminui/dist/index.js

@@ -0,0 +1,129 @@
+
+const typeDisplay = {
+  string: 'AZ', number: "01", boolean: "==",
+  object: "{ }", array: "[ ]", null: "0"
+};
+
+const dashQueries = {
+  "clients": ["clients", {}],
+  "requests": ["requests", {}],
+  "cursors": ["requests", {live: true}],
+  "collections": ["collections", {}]
+};
+
+let dashQueriesState =
+  Object.assign({}, ...Object.keys(dashQueries).map(k => ({[k]: []})));
+
+const initialState = {
+  state: {
+    browser: {
+      query: {
+        order: [["id"], "ascending"],
+        collection: null,
+        limit: 5,
+      },
+    },
+    navigation: {
+      selected: "Collections",
+      items: [
+        "Dashboard",
+        "Users",
+        "Collections",
+        "Requests",
+        "Servers"
+      ]
+    }
+  },
+  data: {
+    browser: [],
+    dashboard: dashQueriesState
+  }
+};
+
+let expandState = new Map();
+
+class Model {
+  constructor() {
+    this.horizon = Horizon();
+    this.freezer = new Freezer(initialState);
+    this.graph = new RealtimeGraph("#epoch", ["Requests", "Clients"]);
+
+    for (let [target, [command, opts]] of Object.entries(dashQueries))
+      this.horizon.send(`admin:${command}`, opts)
+          .forEach(item => this.onDashboardUpdate(target, item));
+
+    this.store.state.browser.getListener()
+        .on("update", (ch, old) => this.onBrowserStateChange(ch, old));
+
+    //this.store.state.browser.query.set("collection", "test");
+    setInterval(() => this.onGraphUpdateTick(), 1000);
+  }
+
+  subscribe(fn) {
+    this.freezer.on("update", fn);
+  }
+
+  get store() {
+    return this.freezer.get();
+  }
+
+  browserPrev() {
+    let {state: {browser: {query: state}}, data: {browser: data}} = this.store;
+    let {order: [[orderIndex = "id"], orderDir = "ascending"]} = state;
+
+    let queryDir = orderDir === "ascending" ? "descending" : "ascending";
+    let filterDir = queryDir === "ascending" ? "above": "below";
+
+    let query = {
+      limit: state.limit,
+      collection: state.collection,
+      order: [[orderIndex], queryDir],
+      [filterDir]: [{[orderIndex]: data[0][orderIndex]}, "open"]
+    };
+
+    this.horizon.send("query", query).toArray().forEach(output => {
+      let value = output[output.length - 1][orderIndex];
+      if (value) state.set({above: [{[orderIndex]: value}, "open"]});
+    });
+  }
+
+  browserNext() {
+    let {state: {browser: {query}}, data: {browser: data}} = this.store;
+    let {order: [[orderIndex], orderDir]} = query;
+
+    let value = data[data.length - 1][orderIndex];
+    query.set({above: [{[orderIndex]: value}, "open"]});
+  }
+
+  browserSelect(collection) {
+    this.browserClear();
+    this.store.state.browser.query.set("collection", collection);
+  }
+
+  browserClear() {
+    this.store.state.browser.query.reset(initialState.state.browser.query);
+  }
+
+  onGraphUpdateTick() {
+    let {clients, cursors} = this.store.data.dashboard;
+    this.graph.update([clients.length, cursors.length]);
+  }
+
+  onDashboardUpdate(target, change) {
+    applyChange(this.store.data.dashboard[target], change);
+  }
+
+  onBrowserStateChange(change, old) {
+    this.store.data.browser.reset([]);
+
+    if (this.browserWatch)
+      this.browserWatch.dispose();
+
+    if (change.query.collection === null)
+      return;
+
+    this.horizon.send("subscribe", change.query.toJS())
+      .forEach(c => applyChange(this.store.data.browser, c));
+
+  }
+}