nanki · August 29, 2015 13:56
diff --git a/fluentd.conf b/fluentd.conf
 <match fluent.digraph fluent.warn>
  type websocket
  port 8080
 </match>

 ...
diff --git a/fluentd_tracer.html b/fluentd_tracer.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>fluentd tracer</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
    <script src="graph.js"></script>
    <style>
       svg {
          overflow: hidden;
       }

       .node rect {
          fill: #fff;
          stroke: #333;
          stroke-width: 1.5px;
       }

       .edgeLabel rect {
          fill: #fff;
       }

       .edgePath {
          fill: none;
          stroke: #333;
          stroke-width: 1.5px;
       }
    </style>
  </head>
  <body>
    <svg width="100%" height="100%">
    <g transform="translate(20,20)"/>
    </svg>
  </body>
 </html>
diff --git a/graph.js b/graph.js
 $(function() {
  var edges, maxt, nodes, oldDrawEdgePaths, oldDrawNodes, queue, tick, wait, ws;
  ws = new WebSocket("ws://localhost:8080/");
  window.g = new dagreD3.Digraph();
  window.r = new dagreD3.Renderer();
  oldDrawNodes = r.drawNodes();
  r.drawNodes(function(g, svg) {
    var ns;
    ns = oldDrawNodes(g, svg);
    ns.select("rect").attr("style", function(u) {
      return g.node(u).style;
    });
    return ns;
  });
  oldDrawEdgePaths = r.drawEdgePaths();
  r.drawEdgePaths(function(g, svg) {
    var es;
    es = oldDrawEdgePaths(g, svg);
    es.select("path").attr("style", function(u) {
      return g.edge(u).style;
    });
    return es;
  });
  r.layout().nodeSep(50).rankDir("LR");
  r.transition(function(selection) {
    return selection.transition().duration(150);
  });
  wait = function(a, b) {
    return setTimeout(b, a);
  };
  nodes = {};
  edges = {};
  queue = [];
  tick = 100;
  wait(tick, function() {
    r.run(g, d3.select('svg g'));
    return wait(tick, arguments.callee);
  });
  maxt = 1;
  return ws.onmessage = function(msg) {
    var data, json, key, source, tag, target;
    json = JSON.parse(msg.data);
    tag = json[0];
    data = json[1];
    if (tag === "fluent.warn") {
      if (data.message && data.message === "retry succeeded.") {
        g.node(data.instance).style = "fill: none";
      } else {
        g.node(data.instance).style = "fill: red";
      }
    }
    if (tag === "fluent.digraph") {
      source = data.source.id.toString();
      target = data.target.id.toString();
      if (!nodes[source]) {
        nodes[source] = g.addNode(source, {
          "label": data.source.label
        });
      }
      if (!nodes[target]) {
        nodes[target] = g.addNode(target, {
          "label": data.target.label
        });
      }
      key = [source, target].join(':');
      if (!edges[key]) edges[key] = g.addEdge(key, source, target, {});
      if (maxt < data.throughput) maxt = data.throughput;
      g.edge(edges[key]).label = data.throughput.toFixed(2).toString() + "/s";
      return g.edge(edges[key]).style = 'stroke-width: ' + (0.5 + 3 * data.throughput / maxt) + "px";
    }
  };
 });
	<match fluent.digraph fluent.warn>
	type websocket
	port 8080
	</match>

	...
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<title>fluentd tracer</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
	<script src="graph.js"></script>
	<style>
	svg {
	overflow: hidden;
	}

	.node rect {
	fill: #fff;
	stroke: #333;
	stroke-width: 1.5px;
	}

	.edgeLabel rect {
	fill: #fff;
	}

	.edgePath {
	fill: none;
	stroke: #333;
	stroke-width: 1.5px;
	}
	</style>
	</head>
	<body>
	<svg width="100%" height="100%">
	<g transform="translate(20,20)"/>
	</svg>
	</body>
	</html>
	$(function() {
	var edges, maxt, nodes, oldDrawEdgePaths, oldDrawNodes, queue, tick, wait, ws;
	ws = new WebSocket("ws://localhost:8080/");
	window.g = new dagreD3.Digraph();
	window.r = new dagreD3.Renderer();
	oldDrawNodes = r.drawNodes();
	r.drawNodes(function(g, svg) {
	var ns;
	ns = oldDrawNodes(g, svg);
	ns.select("rect").attr("style", function(u) {
	return g.node(u).style;
	});
	return ns;
	});
	oldDrawEdgePaths = r.drawEdgePaths();
	r.drawEdgePaths(function(g, svg) {
	var es;
	es = oldDrawEdgePaths(g, svg);
	es.select("path").attr("style", function(u) {
	return g.edge(u).style;
	});
	return es;
	});
	r.layout().nodeSep(50).rankDir("LR");
	r.transition(function(selection) {
	return selection.transition().duration(150);
	});
	wait = function(a, b) {
	return setTimeout(b, a);
	};
	nodes = {};
	edges = {};
	queue = [];
	tick = 100;
	wait(tick, function() {
	r.run(g, d3.select('svg g'));
	return wait(tick, arguments.callee);
	});
	maxt = 1;
	return ws.onmessage = function(msg) {
	var data, json, key, source, tag, target;
	json = JSON.parse(msg.data);
	tag = json[0];
	data = json[1];
	if (tag === "fluent.warn") {
	if (data.message && data.message === "retry succeeded.") {
	g.node(data.instance).style = "fill: none";
	} else {
	g.node(data.instance).style = "fill: red";
	}
	}
	if (tag === "fluent.digraph") {
	source = data.source.id.toString();
	target = data.target.id.toString();
	if (!nodes[source]) {
	nodes[source] = g.addNode(source, {
	"label": data.source.label
	});
	}
	if (!nodes[target]) {
	nodes[target] = g.addNode(target, {
	"label": data.target.label
	});
	}
	key = [source, target].join(':');
	if (!edges[key]) edges[key] = g.addEdge(key, source, target, {});
	if (maxt < data.throughput) maxt = data.throughput;
	g.edge(edges[key]).label = data.throughput.toFixed(2).toString() + "/s";
	return g.edge(edges[key]).style = 'stroke-width: ' + (0.5 + 3 * data.throughput / maxt) + "px";
	}
	};
	});