Permalink
Browse files

Replace Cube front-end with node-static.

The Cube front-end is now just a static file server (in addition to the /event
and /metric endpoints that power the collector and evaluator). This removes the
visualization component from Cube, so that it can focus on data collection and
metric computation. To make visualizations, you now simply write a bit of HTML
and JavaScript to fetch and display metrics. This commit will followup with some
examples that demonstrate the technique.

Also, add a 1-minute tier, and remove the week and year tiers. The highest tier
is now the 1-day tier. We could still use the old tiers, but there's a little
bit of overhead to invalidate every tier for every event; perhaps in the future,
we'll want to configure tiers on a per-event basis.
  • Loading branch information...
mbostock committed Apr 16, 2012
1 parent e51cd37 commit f848376e90bbfc9c27f333a21d080dc6b7e4ee73
Showing with 183 additions and 2,000 deletions.
  1. +2 −2 Makefile
  2. +0 −1 bin/evaluator.js
  3. +0 −12 lib/cube/client/board.css
  4. +0 −225 lib/cube/client/board.js
  5. +0 −87 lib/cube/client/body.css
  6. +0 −3 lib/cube/client/cube.js
  7. +0 −1 lib/cube/client/end.js
  8. +0 −58 lib/cube/client/header.js
  9. +0 −12 lib/cube/client/palette.css
  10. +0 −63 lib/cube/client/palette.js
  11. +0 −255 lib/cube/client/piece-area.js
  12. +0 −137 lib/cube/client/piece-sum.js
  13. +0 −65 lib/cube/client/piece-text.js
  14. +0 −151 lib/cube/client/piece.css
  15. +0 −270 lib/cube/client/piece.js
  16. +0 −1 lib/cube/client/semicolon.js
  17. +0 −45 lib/cube/client/squares.js
  18. +0 −1 lib/cube/client/start.js
  19. +0 −24 lib/cube/client/visualizer.html
  20. 0 lib/cube/{server → }/collectd.js
  21. +44 −0 lib/cube/collector.js
  22. 0 lib/cube/{server → }/emitter.js
  23. +8 −0 lib/cube/endpoint.js
  24. +10 −6 lib/cube/{server → }/evaluator.js
  25. 0 lib/cube/{server → }/event-expression.js
  26. 0 lib/cube/{server → }/event-expression.peg
  27. 0 lib/cube/{server → }/event.js
  28. +5 −7 lib/cube/index.js
  29. 0 lib/cube/{server → }/metric-expression.js
  30. 0 lib/cube/{server → }/metric-expression.peg
  31. 0 lib/cube/{server → }/metric.js
  32. 0 lib/cube/{server → }/reduces.js
  33. +12 −3 lib/cube/{server → }/server.js
  34. +0 −41 lib/cube/server/collector.js
  35. +0 −86 lib/cube/server/endpoint.js
  36. +0 −191 lib/cube/server/visualizer.js
  37. +8 −22 lib/cube/{server → }/tiers.js
  38. 0 lib/cube/{server → }/types.js
  39. +2 −2 package.json
  40. +4 −4 test/collector-test.js
  41. +0 −65 test/endpoint-test.js
  42. +1 −1 test/event-expression-test.js
  43. +1 −1 test/metric-expression-test.js
  44. +17 −28 test/metric-test.js
  45. +1 −1 test/reduces-test.js
  46. +67 −128 test/tiers-test.js
  47. +1 −1 test/types-test.js
View
@@ -7,8 +7,8 @@ PEG_COMPILER = ./node_modules/pegjs/bin/pegjs
$(PEG_COMPILER) < $< > $@
all: \
- lib/cube/server/event-expression.js \
- lib/cube/server/metric-expression.js
+ lib/cube/event-expression.js \
+ lib/cube/metric-expression.js
test: all
@$(JS_TESTER)
View
@@ -4,7 +4,6 @@ var options = require("./evaluator-config"),
server.register = function(db, endpoints) {
cube.evaluator.register(db, endpoints);
- cube.visualizer.register(db, endpoints);
};
server.start();
View
@@ -1,12 +0,0 @@
-.squares rect {
- fill: none;
- stroke: #ddd;
-}
-
-.squares rect.black {
- fill: #fafafa;
-}
-
-.squares rect.shadow {
- fill: #e7e7e7;
-}
View
@@ -1,225 +0,0 @@
-cube.board = function(url, id) {
- var board = {id: cube_board_formatId(id)},
- socket,
- interval,
- pieceId = 0,
- palette,
- squares,
- pieces = [],
- size = [32, 18], // in number of squares
- squareSize = 40, // in pixels
- squareRadius = 4, // in pixels
- padding = 9.5; // half-pixel for crisp strokes
-
- var event = d3.dispatch(
- "size",
- "squareSize",
- "squareRadius",
- "padding",
- "view"
- );
-
- var svg = document.createElementNS(d3.ns.prefix.svg, "svg");
-
- d3.select(svg)
- .attr("class", "board");
-
- event.on("size.board", resize);
- event.on("squareSize.board", resize);
- event.on("squareRadius.board", resize);
- event.on("padding.board", resize);
-
- function message(message) {
- var e = JSON.parse(message.data);
- switch (e.type) {
- case "view": {
- event.view.call(board, e);
- break;
- }
- case "add": {
- var piece = board.add(cube.piece.type[e.piece.type])
- .fromJSON(e.piece)
- .on("move.board", move);
-
- d3.select(piece.node())
- .style("opacity", 1e-6)
- .transition()
- .duration(500)
- .style("opacity", 1);
-
- pieceId = Math.max(pieceId, piece.id = e.piece.id);
- break;
- }
- case "edit": {
- pieces.some(function(piece) {
- if (piece.id == e.piece.id) {
- piece
- .on("move.board", null)
- .transition(d3.transition().duration(500))
- .fromJSON(e.piece);
-
- // Renable events after transition starts.
- d3.timer(function() { piece.on("move.board", move); }, 250);
- return true;
- }
- });
- break;
- }
- case "move": {
- pieces.some(function(piece) {
- if (piece.id == e.piece.id) {
- piece
- .on("move.board", null)
- .transition(d3.transition().duration(500))
- .size(e.piece.size)
- .position(e.piece.position);
-
- // Bring to front.
- svg.parentNode.appendChild(piece.node());
-
- // Renable events after transition starts.
- d3.timer(function() { piece.on("move.board", move); }, 250);
- return true;
- }
- });
- break;
- }
- case "remove": {
- pieces.some(function(piece) {
- if (piece.id == e.piece.id) {
- board.remove(piece, true);
- return true;
- }
- });
- break;
- }
- }
- }
-
- function reopen() {
- if (socket) {
- pieces.slice().forEach(function(piece) { board.remove(piece, true); });
- socket.close();
- }
- socket = new WebSocket(url);
- socket.onopen = load;
- socket.onmessage = message;
- if (!interval) interval = setInterval(ping, 5000);
- }
-
- function load() {
- if (id && socket && socket.readyState == 1) {
- socket.send(JSON.stringify({type: "load", id: id}));
- }
- }
-
- function ping() {
- if (socket.readyState == 1) {
- socket.send(JSON.stringify({type: "ping", id: id}));
- } else if (socket.readyState > 1) {
- reopen();
- }
- }
-
- // A one-time listener to send an add event on mouseup.
- function add() {
- socket.send(JSON.stringify({type: "add", id: id, piece: this}));
- this.on("move.board", move);
- }
-
- function move() {
- socket.send(JSON.stringify({type: "move", id: id, piece: this}));
- }
-
- function edit() {
- socket.send(JSON.stringify({type: "edit", id: id, piece: this}));
- }
-
- function resize() {
- d3.select(svg)
- .attr("width", size[0] * squareSize + 2 * padding)
- .attr("height", (size[1] + 2) * squareSize + 2 * padding);
-
- d3.select(palette.node())
- .attr("transform", "translate(" + padding + "," + padding + ")");
-
- d3.select(squares.node())
- .attr("transform", "translate(" + padding + "," + (1.5 * squareSize + padding) + ")");
- }
-
- board.node = function() {
- return svg;
- };
-
- board.on = function(type, listener) {
- event.on(type, listener);
- return board;
- };
-
- board.size = function(x) {
- if (!arguments.length) return size;
- event.size.call(board, size = x);
- return board;
- };
-
- board.squareSize = function(x) {
- if (!arguments.length) return squareSize;
- event.squareSize.call(board, squareSize = x);
- return board;
- };
-
- board.squareRadius = function(x) {
- if (!arguments.length) return squareRadius;
- event.squareRadius.call(board, squareRadius = x);
- return board;
- };
-
- board.padding = function(x) {
- if (!arguments.length) return padding;
- event.padding.call(board, padding = x);
- return board;
- };
-
- board.add = function(type) {
- var piece = type(board);
- piece.id = ++pieceId;
- piece.on("move.board", add).on("edit.board", edit);
- svg.parentNode.appendChild(piece.node());
- pieces.push(piece);
- return piece;
- };
-
- board.remove = function(piece, silent) {
- piece.on("move.board", null).on("edit.board", null);
- if (silent) {
- d3.select(piece.node())
- .style("opacity", 1)
- .transition()
- .duration(500)
- .style("opacity", 1e-6)
- .remove();
- } else {
- socket.send(JSON.stringify({type: "remove", id: id, piece: {id: piece.id}}));
- svg.parentNode.removeChild(piece.node());
- }
- pieces.splice(pieces.indexOf(piece), 1);
- return piece;
- };
-
- board.toJSON = function() {
- return {id: id, size: size, pieces: pieces};
- };
-
- svg.appendChild((palette = cube.palette(board)).node());
- svg.appendChild((squares = cube.squares(board)).node());
- resize();
- reopen();
-
- return board;
-};
-
-function cube_board_formatId(id) {
- id = id.toString(36);
- if (id.length < 6) id = new Array(7 - id.length).join("0") + id;
- return id;
-}
View
@@ -1,87 +0,0 @@
-body {
- overflow-x: hidden;
- overflow-y: scroll;
- margin-top: 50px;
-}
-
-body, button {
- font: 14px "Helvetica Neue";
-}
-
-#header {
- display: block;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 40px;
- background: #222;
- background: -webkit-gradient(linear,left top,left bottom,from(#333),to(#111));
- color: #fff;
- -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
- z-index: 1;
-}
-
-.view #header {
- top: -60px;
-}
-
-.header {
- height: 40px;
- line-height: 40px;
- width: 1281px;
-}
-
-.header, #board {
- display: block;
- margin: auto;
- position: relative;
-}
-
-#board {
- width: 1299px;
-}
-
-.left {
- float: left;
-}
-
-.right {
- float: right;
-}
-
-.right button {
- margin: 0 0 0 4px;
-}
-
-svg {
- display: block;
-}
-
-button {
- background: #333;
- background: -webkit-gradient(linear,left top,left bottom,from(#444),to(#222));
- color: #fff;
- cursor: pointer;
- height: 30px;
- width: 113px;
- margin: 0 4px 0 0;
- padding: 0;
- border: solid 1px #000;
- border-radius: 4px;
-}
-
-.view {
- margin-top: -60px;
- overflow: hidden;
-}
-
-.view .squares {
- display: none;
-}
-
-@media screen and (min-width: 1920px) {
- .view {
- -webkit-transform: scale(1.4,1.4)translate(0px,110px);
- }
-}
View
@@ -1,3 +0,0 @@
-cube = {version: "0.0.1"};
-
-var cube_time = d3.time.format.iso;
View
@@ -1 +0,0 @@
-})();
Oops, something went wrong.

0 comments on commit f848376

Please sign in to comment.