[13/39] Organized WebUI static assets into directories.

[bm...@apache.org]

http://git-wip-us.apache.org/repos/asf/mesos/blob/5852eb93/src/webui/master/static/js/dashboard.js
----------------------------------------------------------------------
diff --git a/src/webui/master/static/js/dashboard.js b/src/webui/master/static/js/dashboard.js
new file mode 100644
index 0000000..5b1769c
--- /dev/null
+++ b/src/webui/master/static/js/dashboard.js
@@ -0,0 +1,149 @@
+var horizons = {
+  create: function(context, name, metric, extent, units) {
+    // Add a "graph-container".
+    d3.select("#graphs")
+    .append("div")
+    .attr("id", name + "-container")
+    .attr("class", "graph-container");
+
+    // Add a header.
+    d3.select("#" + name + "-container")
+    .append("h4")
+    .text(name);
+
+    // Add a "graph".
+    d3.select("#" + name + "-container")
+    .append("div")
+    .attr("id", name)
+    .attr("class", "graph");
+
+    // Add the bottom axis.
+    d3.select("#" + name + "-container")
+    .select("#" + name)
+    .append("div")
+    .attr("id", "bottom-axis")
+    .attr("class", "bottom axis")
+    .call(context.axis().ticks(12).orient("bottom"));
+
+    // Add the rule.
+    d3.select("#" + name + "-container")
+      .select("#" + name)
+      .append("div")
+      .attr("class", "rule")
+      .call(context.rule());
+
+    var horizon = context.horizon()
+      .title(name)
+      .height(30)
+      .extent(extent)
+      .metric(metric)
+      .format(function (value) { return d3.format(".3g")(value) + " " + units; });
+
+    function clicked(datum, index) {
+      // Remove the graph from the dashboard.
+      d3.select("#" + name + "-container")
+          .select("#" + name)
+          .select("#" + name + "-horizon")
+          .call(horizon.remove)
+          .remove();
+
+      // Now increase it or decrease it.
+      if (!d3.event.shiftKey) {
+          // Increase size.
+          horizon = context.horizon()
+              .height(horizon.height() * 2)
+              .extent([horizon.extent()[0] * 2, horizon.extent()[1] * 2])
+              .metric(metric)
+              .format(function (value) { return d3.format(".3g")(value) + " " + units; });
+          horizon(
+            d3.select("#" + name + "-container")
+              .select("#" + name)
+              .insert("div", ".bottom")
+              .attr("class", "horizon")
+              .attr("id", name + "-horizon")
+              .style("cursor", "pointer")
+              .on("click", clicked));
+      } else {
+          // Decrease size.
+          horizon = context.horizon()
+            .height(horizon.height() / 2)
+            .extent([horizon.extent()[0] / 2, horizon.extent()[1] / 2])
+            .metric(metric)
+            .format(function (value) { return d3.format(".3g")(value) + " " + units; });
+          horizon(
+            d3.select("#" + name + "-container")
+              .select("#" + name)
+              .insert("div", ".bottom")
+              .attr("class", "horizon")
+              .attr("id", name + "-horizon")
+              .style("cursor", "pointer")
+              .on("click", clicked));
+      }
+    }
+
+    horizon(
+      d3.select("#" + name + "-container")
+        .select("#" + name)
+         .insert("div", ".bottom")
+         .attr("class", "horizon")
+         .attr("id", name + "-horizon")
+         .style("cursor", "pointer")
+         .on("click", clicked));
+
+    context.on("focus", function(i) {
+      d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
+    });
+
+    return context;
+  }
+};
+
+
+function metric_cpus(context) {
+  return context.metric(function(start, stop, step, callback) {
+    // Convert the start and stop "dates" into milliseconds.
+    start = +start, stop = +stop;
+
+    var values = [];
+    _((stop - start) / step).times(function() {
+      values.push(4);
+    });
+
+    // Return the data requested.
+    callback(null, values);
+  }, "cpus");
+}
+
+
+function metric_mem(context) {
+  return context.metric(function(start, stop, step, callback) {
+    // Convert the start and stop "dates" into milliseconds.
+    start = +start, stop = +stop;
+
+    var values = [];
+    _((stop - start) / step).times(function() {
+      values.push(34);
+    });
+
+    // Return the data requested.
+    callback(null, values);
+  }, "mem");
+}
+
+
+function random(context, name) {
+  var value = 0,
+      values = [],
+      i = 0,
+      last;
+  return context.metric(function(start, stop, step, callback) {
+    start = +start, stop = +stop;
+    if (isNaN(last)) last = start;
+    while (last < stop) {
+        last += step;
+        value = Math.abs(value + .8 * Math.random() - .4 + .2 * Math.cos(i += .2));
+        values.push(value);
+    }
+    callback(null, values = values.slice((start - stop) / step));
+  }, name);
+}