Update routing tree location

Routing tree editor is now only available as a
link from within the configuration docs for
alertmanager.

Code changes:
- Routing tree CSS is now in a CSS file
- The label set input now draws the route when
"enter" is pressed

content/css/routing-tree-editor.css

+.routing-table {
+  font: 12px sans-serif;
+}
+
+.node circle {
+  stroke: #e6522c;
+  stroke-width: 1.5px;
+}
+
+.node text {
+  font: 10px sans-serif;
+}
+
+.link {
+  fill: none;
+  stroke: #ccc;
+  stroke-width: 1.5px;
+}
+
+.form-control.label-input {
+  padding: 2px;
+  width: 450px;
+}
+
+textarea {
+  border-color: #ddd;
+  height: 450px;
+  padding: 2px 0;
+  width: 100%;
+  font-family: monospace;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}

content/docs/alerting/configuration.md

@@ -12,6 +12,9 @@ While the command-line flags configure immutable system parameters, the
 configuration file defines inhibition rules, notification routing and
 notification receivers.
 
+An visual routing tree editor and label set matcher is available
+[here](/webtools/alerting/routing-tree-editor).
+
 To view all available command-line flags, run `alertmanager -h`.
 
 Alertmanager can reload its configuration at runtime. If the new configuration

content/docs/alerting/routing-tree-editor.html → content/webtools/alerting/routing-tree-editor.html

 ---
 title: Routing tree editor
-sort_rank: 4
-nav_icon: sliders
 ---
-<style>
-.routing-table {
-  font: 12px sans-serif;
-}
-
-.node circle {
-  stroke: #e6522c;
-  stroke-width: 1.5px;
-}
-
-.node text {
-  font: 10px sans-serif;
-}
-
-.link {
-  fill: none;
-  stroke: #ccc;
-  stroke-width: 1.5px;
-}
-
-.form-control.label-input {
-  padding: 2px;
-  width: 450px;
-}
-
-textarea {
-  border-color: #ddd;
-  height: 450px;
-  padding: 2px 0;
-  width: 100%;
-  font-family: monospace;
-}
-
-.block {
-  display: block;
-}
-
-.inline-block {
-  display: inline-block;
-}
-
-</style>
-
 <h1 id="routing-tree-editor" class="page-header">
   Routing tree editor
   <a class="header-anchor" href="#routing-tree-editor" name="routing-tree-editor"></a>
@@ -60,10 +15,10 @@ textarea {
 </div>
 <div class="form-inline">
   <div class="form-group">
-      <div class="form-group">
-      <input class="label-input form-control" type="text" placeholder='{service="foo-service", severity="critical"}' \>
+    <div class="form-group">
+      <input class="js-label-set-input label-input form-control" type="text" placeholder='{service="foo-service", severity="critical"}' \>
+      <button type="button" class="js-find-match btn btn-default">Match Label Set</button>
     </div>
-    <button type="button" class="js-find-match btn btn-default">Match Label Set</button>
   </div>
 </div>
 <script src="/assets/d3.v3.min.js"></script>

layouts/header.html

@@ -40,6 +40,7 @@
 
     <!-- Custom styles for this template -->
     <link href="/css/docs.css" rel="stylesheet">
+    <link href="/css/routing-tree-editor.css" rel="stylesheet">
 
     <!-- Custom Fonts -->
     <link href="/assets/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

static/routing-tree.js

@@ -25,7 +25,6 @@ var tooltip = d3.select("body")
     .style("z-index", "10")
     .style("visibility", "hidden");
 
-// Global for now so we can play with it from the console
 function parseSearch(searchString) {
   var labels = searchString.replace(/{|}|\"|\s/g, "").split(",");
   var o = {};
@@ -58,7 +57,18 @@ d3.select(".js-parse-and-draw").on("click", function() {
 
 // Click handler for input labelSet
 d3.select(".js-find-match").on("click", function() {
-  var searchValue = document.querySelector("input").value
+  labelServiceHandler();
+});
+
+$(document).on("keyup", function(e) {
+  if (e.keyCode != 13) {
+    return;
+  }
+  labelServiceHandler();
+});
+
+function labelServiceHandler() {
+  var searchValue = document.querySelector(".js-label-set-input").value
   var labelSet = parseSearch(searchValue);
   var matches = match(root, labelSet)
   var nodes = tree.nodes(root);
@@ -66,8 +76,7 @@ d3.select(".js-find-match").on("click", function() {
   nodes.forEach(function(n) { n.matched = false });
   nodes[idx].matched = true;
   update(root);
-  // Animate path to node?
-});
+}
 
 // Match does a depth-first left-to-right search through the route tree
 // and returns the matching routing nodes.