|
| 1 | +<!DOCTYPE html> |
| 2 | +<meta charset="utf-8"> |
| 3 | +<title>Collectd</title> |
| 4 | +<style> |
| 5 | + |
| 6 | +@import url(../style.css); |
| 7 | + |
| 8 | +</style> |
| 9 | +<select id="step"> |
| 10 | + <option value="1e4">10 seconds</option> |
| 11 | + <option value="6e4">1 minute</option> |
| 12 | + <option value="3e5">5 minutes</option> |
| 13 | +</select> |
| 14 | +<script src="../d3.v2.js"></script> |
| 15 | +<script src="../cubism.v1.js"></script> |
| 16 | +<script> |
| 17 | + |
| 18 | +// |
| 19 | +var step = +cubism.option("step", 1e4); |
| 20 | + |
| 21 | +// |
| 22 | +var context = cubism.context() |
| 23 | + .serverDelay(1e4) |
| 24 | + .step(step) |
| 25 | + .size(1440); |
| 26 | + |
| 27 | +// |
| 28 | +var cube = context.cube(); |
| 29 | + |
| 30 | +// |
| 31 | +var horizon = context.horizon(); |
| 32 | + |
| 33 | +// |
| 34 | +var metrics = [ |
| 35 | + cube.metric("sum(collectd(interface.if_octets.rx))").multiply(8).divide(step / 1e3), |
| 36 | + cube.metric("sum(collectd(-interface.if_octets.tx))").multiply(8).divide(step / 1e3), |
| 37 | + cube.metric("sum(collectd(disk.disk_ops.read))").divide(step / 1e3), |
| 38 | + cube.metric("sum(collectd(-disk.disk_ops.write))").divide(step / 1e3), |
| 39 | + cube.metric("max(collectd(load.shortterm))"), |
| 40 | + cube.metric("max(collectd(load.midterm))"), |
| 41 | + cube.metric("max(collectd(load.longterm))"), |
| 42 | + cube.metric("max(collectd(memory).eq(type, 'wired'))"), |
| 43 | + cube.metric("max(collectd(memory).eq(type, 'inactive'))"), |
| 44 | + cube.metric("max(collectd(memory).eq(type, 'active'))"), |
| 45 | + cube.metric("max(collectd(memory).eq(type, 'free'))"), |
| 46 | + cube.metric("max(collectd(df.df_complex).eq(plugin, 'root').eq(type, 'reserved'))"), |
| 47 | + cube.metric("max(collectd(df.df_complex).eq(plugin, 'root').eq(type, 'used'))"), |
| 48 | + cube.metric("max(collectd(df.df_complex).eq(plugin, 'root').eq(type, 'free'))"), |
| 49 | + cube.metric("sum(collectd(df.df_complex).eq(host, 'localhost').eq(plugin, 'root').eq(type, 'used')) / sum(collectd(df.df_complex).eq(host, 'localhost').eq(plugin, 'root').in(type, ['used', 'free']))") |
| 50 | +]; |
| 51 | + |
| 52 | +// Add top and bottom axes to display the time. |
| 53 | +d3.select("body").selectAll(".axis") |
| 54 | + .data(["top", "bottom"]) |
| 55 | + .enter().append("div") |
| 56 | + .attr("class", function(d) { return d + " axis"; }) |
| 57 | + .each(function(d) { d3.select(this).call(context.axis().ticks(12).orient(d)); }); |
| 58 | + |
| 59 | +// Add a mouseover rule. |
| 60 | +d3.select("body").append("div") |
| 61 | + .attr("class", "rule") |
| 62 | + .call(context.rule()); |
| 63 | + |
| 64 | +// |
| 65 | +d3.select("body").selectAll(".horizon") |
| 66 | + .data(metrics) |
| 67 | + .enter().insert("div", ".bottom") |
| 68 | + .attr("class", "horizon") |
| 69 | + .call(horizon); |
| 70 | + |
| 71 | +// On mousemove, reposition the chart values to match the rule. |
| 72 | +context.on("focus", function(i) { |
| 73 | + d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px"); |
| 74 | +}); |
| 75 | + |
| 76 | +// Initialize the step menu's selection. |
| 77 | +d3.selectAll("#step option").property("selected", function() { |
| 78 | + return this.value == step; |
| 79 | +}); |
| 80 | + |
| 81 | +// Update the location on step change. |
| 82 | +d3.select("#step").on("change", function() { |
| 83 | + window.location = "?step=" + this.value + "&" + location.search.replace(/[?&]step=[^&]*(&|$)/g, "$1").substring(1); |
| 84 | +}); |
| 85 | + |
| 86 | +</script> |
0 commit comments