Commit 803cb20b authored by Fabian Reinartz's avatar Fabian Reinartz

Merge pull request #389 from prometheus/routing-tree-deux

Update routing tree location
parents 11378470 465fd250
.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;
}
......@@ -12,6 +12,9 @@ While the command-line flags configure immutable system parameters, the
configuration file defines inhibition rules, notification routing and
notification receivers.
The [visual editor](/webtools/alerting/routing-tree-editor) can assist in
building routing trees.
To view all available command-line flags, run `alertmanager -h`.
Alertmanager can reload its configuration at runtime. If the new configuration
......
---
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>
......
......@@ -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">
......
......@@ -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.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment