From f68b6ddd6486c074b7c5b73b7078803969fa5aa4 Mon Sep 17 00:00:00 2001
From: Chisu Yu <puseori9th@gmail.com>
Date: Thu, 25 Oct 2012 01:43:28 +0000
Subject: [PATCH] =?UTF-8?q?[=EC=9C=A0=EC=B9=98=EC=88=98]=20[NOBTS]=20add?=
 =?UTF-8?q?=20sankey=20chart=20on=20the=20transaction=20detail=20view.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

git-svn-id: http://svn.bds.nhncorp.com/pe/hippo-web/trunk@820 84d0f5b1-2673-498c-a247-62c4ff18d310
---
 .../BusinessTransactionController.java        |  49 ++-
 .../java/com/nhn/hippo/web/vo/TraceId.java    |   6 +
 .../WEB-INF/views/selectTransaction.jsp       | 267 +++++++++-------
 src/main/webapp/common/js/hippo/hippo.js      | 176 +++++++++++
 src/main/webapp/index.html                    | 298 ++++--------------
 5 files changed, 424 insertions(+), 372 deletions(-)
 create mode 100644 src/main/webapp/common/js/hippo/hippo.js

diff --git a/src/main/java/com/nhn/hippo/web/controller/BusinessTransactionController.java b/src/main/java/com/nhn/hippo/web/controller/BusinessTransactionController.java
index 00b7ae656..b6a21e3ee 100644
--- a/src/main/java/com/nhn/hippo/web/controller/BusinessTransactionController.java
+++ b/src/main/java/com/nhn/hippo/web/controller/BusinessTransactionController.java
@@ -1,7 +1,9 @@
 package com.nhn.hippo.web.controller;
 
-import com.nhn.hippo.web.calltree.span.SpanAlign;
-import com.nhn.hippo.web.service.SpanService;
+import java.util.HashSet;
+import java.util.List;
+import java.util.Set;
+import java.util.UUID;
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -12,24 +14,41 @@ import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.servlet.ModelAndView;
 
-import java.util.List;
+import com.nhn.hippo.web.calltree.server.ServerCallTree;
+import com.nhn.hippo.web.calltree.span.SpanAlign;
+import com.nhn.hippo.web.service.FlowChartService;
+import com.nhn.hippo.web.service.SpanService;
+import com.nhn.hippo.web.vo.TraceId;
 
 /**
  *
  */
 @Controller
 public class BusinessTransactionController {
-    private Logger logger = LoggerFactory.getLogger(this.getClass());
-    @Autowired
-    private SpanService spanService;
 
-    @RequestMapping(value = "/selectTransaction", method = RequestMethod.GET)
-    public ModelAndView flow(@RequestParam(value = "traceId") String traceId) {
-        logger.debug("traceId:{}", traceId);
-        List<SpanAlign> spanAligns = spanService.selectSpan(traceId);
-        ModelAndView mv = new ModelAndView("selectTransaction");
-        mv.addObject("spanList", spanAligns);
-        mv.addObject("traceId", traceId);
-        return mv;
-    }
+	private Logger logger = LoggerFactory.getLogger(this.getClass());
+
+	@Autowired
+	private SpanService spanService;
+
+	@Autowired
+	private FlowChartService flow;
+
+	@RequestMapping(value = "/selectTransaction", method = RequestMethod.GET)
+	public ModelAndView flow(@RequestParam(value = "traceId") String traceId) {
+		logger.debug("traceId:{}", traceId);
+		List<SpanAlign> spanAligns = spanService.selectSpan(traceId);
+
+		ModelAndView mv = new ModelAndView("selectTransaction");
+		mv.addObject("spanList", spanAligns);
+		mv.addObject("traceId", traceId);
+
+		Set<TraceId> traceIds = new HashSet<TraceId>(1);
+		traceIds.add(new TraceId(UUID.fromString(traceId)));
+		ServerCallTree callTree = flow.selectServerCallTree(traceIds);
+		mv.addObject("nodes", callTree.getNodes());
+		mv.addObject("links", callTree.getLinks());
+
+		return mv;
+	}
 }
diff --git a/src/main/java/com/nhn/hippo/web/vo/TraceId.java b/src/main/java/com/nhn/hippo/web/vo/TraceId.java
index e35863c72..beb4c6e44 100644
--- a/src/main/java/com/nhn/hippo/web/vo/TraceId.java
+++ b/src/main/java/com/nhn/hippo/web/vo/TraceId.java
@@ -21,6 +21,12 @@ public class TraceId {
         this.most = BytesUtils.bytesToFirstLong(id);
         this.least = BytesUtils.bytesToSecondLong(id);
     }
+    
+	public TraceId(UUID uuid) {
+		this.most = uuid.getMostSignificantBits();
+		this.least = uuid.getLeastSignificantBits();
+		this.id = BytesUtils.longLongToBytes(most, least);
+	}
 
     public byte[] getBytes() {
         return id;
diff --git a/src/main/webapp/WEB-INF/views/selectTransaction.jsp b/src/main/webapp/WEB-INF/views/selectTransaction.jsp
index 14ebe0e95..444b43814 100644
--- a/src/main/webapp/WEB-INF/views/selectTransaction.jsp
+++ b/src/main/webapp/WEB-INF/views/selectTransaction.jsp
@@ -8,9 +8,13 @@
     <title>Transaction details (${traceId})</title>
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <link href="/common/css/hippo/hippo.css" rel="stylesheet">
+    <link href="/common/css/bootstrap/bootstrap.css" rel="stylesheet">
     <link href="/common/css/bootstrap/bootstrap.css" rel="stylesheet">
     <link href="/common/css/bootstrap/bootstrap-responsive.css" rel="stylesheet"/>
+    <link href="/select2/select2-customized.css" rel="stylesheet"/>
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
@@ -19,6 +23,11 @@
 
     <script type="text/javascript" src="/common/js/jquery/jquery-1.7.1.min.js"></script>
     <script type="text/javascript" src="/common/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="/select2/select2.js"></script>
+    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
+    <script type="text/javascript" src="http://d3js.org/d3.v2.min.js?2.9.1"></script>
+    <script type="text/javascript" src="/common/js/sankey/sankey.js"></script>
+    <script type="text/javascript" src="/common/js/hippo/hippo.js"></script>
     <script type="text/javascript">
         function showDetail(id) {
             $("#spanDetail" + id).css("display", "");
@@ -34,135 +43,151 @@
 <body>
 <h4>TraceId: ${traceId}</h4>
 
-
-<div id="timeline" style="margin-left:100px;margin-top:50px;background-color:#E8E8E8;width:1000px;">
-    <c:set var="startTime" scope="page" value="0"/>
-    <c:set var="endTime" scope="page" value="0"/>
-    <c:forEach items="${spanList}" var="span" varStatus="status">
-        <c:set var="sp" scope="page" value="${span.span}"/>
-        <c:set var="begin" scope="page" value="0"/>
-        <c:set var="end" scope="page" value="0"/>
-
-        <div id="spanDetail${status.count}" style="display:none; position:absolute; left:0; top:0;width:500px;background-color:#E8CA68;padding:10px;">
-            <ul>
-                <li>AgentId = ${sp.agentId}</li>
-                <li>UUID = ${hippo:longLongToUUID(sp.mostTraceId, sp.leastTraceId)}</li>
-                <li>spanId = ${sp.spanId}</li>
-                <li>parentSpanId = ${sp.parentSpanId}</li>
-                <li>service = ${sp.serviceName}</li>
-                <li>name = ${sp.name}</li>
-                <li>timestamp = ${hippo:longToDateStr(sp.timestamp)}</li>
-                <li>endpoint = ${sp.endPoint}</li>
-                <li>terminal = ${sp.terminal}</li>
-
-                <c:forEach items="${sp.annotationBoList}" var="ano" varStatus="annoStatus">
-                    <c:if test="${ano.key eq 'CS' or ano.key eq 'SR'}">
-                        <c:set var="begin" scope="page" value="${ano.timestamp}"/>
-                        <li>${ano.key} = ${ano.duration}</li>
-                        <c:if test="${status.first}">
-                            <c:set var="startTime" scope="page" value="${ano.timestamp}"/>
-                        </c:if>
-                    </c:if>
-                    <c:if test="${ano.key eq 'CR' or ano.key eq 'SS'}">
-                        <c:set var="end" scope="page" value="${ano.timestamp}"/>
-                        <li>${ano.key} = ${ano.duration}</li>
-                        <c:if test="${status.first}">
-                            <c:set var="endTime" scope="page" value="${ano.timestamp}"/>
-                        </c:if>
-                    </c:if>
-                    <c:if test="${ano.key != 'CR' and ano.key != 'SS' and ano.key != 'CS' and ano.key != 'SR'}">
-                        <li>${ano.key} = ${hippo:bytesToString(ano.valueType, ano.value)}</li>
-                    </c:if>
-                </c:forEach>
-            </ul>
+<div class="container">
+    <div class="row">
+        <div class="span10">Application Flow Map</div>
+    </div>
+    <div class="row">
+        <div class="span10">
+            <p id="graph"></p>
         </div>
+    </div>
 
-        <c:if test="${status.first}">
-            <c:set var="barRatio" scope="page" value="${1000 / (end - begin)}"/>
-        </c:if>
+	<div class="row"><div class="span10"></div></div>
+    <div class="row">
+        <div class="span10">Application Timeline</div>
+    </div>
+	<div class="row">
 
-        <div style="width:${(end - begin) * barRatio}px; background-color:#69B2E9;margin-left:${(begin - startTime) * barRatio}px;margin-top:3px;"
-             onmouseover="showDetail(${status.count})" onmouseout="hideDetail(${status.count})">
-            <div style="width:200px;">${sp.serviceName} (${end - begin}ms)</div>
+		<div id="timeline" style="background-color:#E8E8E8;width:1000px;">
+		    <c:set var="startTime" scope="page" value="0"/>
+		    <c:set var="endTime" scope="page" value="0"/>
+		    <c:forEach items="${spanList}" var="span" varStatus="status">
+		        <c:set var="sp" scope="page" value="${span.span}"/>
+		        <c:set var="begin" scope="page" value="0"/>
+		        <c:set var="end" scope="page" value="0"/>
+		
+		        <div id="spanDetail${status.count}" style="display:none; position:absolute; left:0; top:0;width:500px;background-color:#E8CA68;padding:10px;">
+		            <ul>
+		                <li>AgentId = ${sp.agentId}</li>
+		                <li>UUID = ${hippo:longLongToUUID(sp.mostTraceId, sp.leastTraceId)}</li>
+		                <li>spanId = ${sp.spanId}</li>
+		                <li>parentSpanId = ${sp.parentSpanId}</li>
+		                <li>service = ${sp.serviceName}</li>
+		                <li>name = ${sp.name}</li>
+		                <li>timestamp = ${hippo:longToDateStr(sp.timestamp)}</li>
+		                <li>endpoint = ${sp.endPoint}</li>
+		                <li>terminal = ${sp.terminal}</li>
+		
+		                <c:forEach items="${sp.annotationBoList}" var="ano" varStatus="annoStatus">
+		                    <c:if test="${ano.key eq 'CS' or ano.key eq 'SR'}">
+		                        <c:set var="begin" scope="page" value="${ano.timestamp}"/>
+		                        <li>${ano.key} = ${ano.duration}</li>
+		                        <c:if test="${status.first}">
+		                            <c:set var="startTime" scope="page" value="${ano.timestamp}"/>
+		                        </c:if>
+		                    </c:if>
+		                    <c:if test="${ano.key eq 'CR' or ano.key eq 'SS'}">
+		                        <c:set var="end" scope="page" value="${ano.timestamp}"/>
+		                        <li>${ano.key} = ${ano.duration}</li>
+		                        <c:if test="${status.first}">
+		                            <c:set var="endTime" scope="page" value="${ano.timestamp}"/>
+		                        </c:if>
+		                    </c:if>
+		                    <c:if test="${ano.key != 'CR' and ano.key != 'SS' and ano.key != 'CS' and ano.key != 'SR'}">
+		                        <li>${ano.key} = ${hippo:bytesToString(ano.valueType, ano.value)}</li>
+		                    </c:if>
+		                </c:forEach>
+		            </ul>
+		        </div>
+		
+		        <c:if test="${status.first}">
+		            <c:set var="barRatio" scope="page" value="${1000 / (end - begin)}"/>
+		        </c:if>
+		
+		        <div style="width:${(end - begin) * barRatio}px; background-color:#69B2E9;margin-left:${(begin - startTime) * barRatio}px;margin-top:3px;"
+		             onmouseover="showDetail(${status.count})" onmouseout="hideDetail(${status.count})">
+		            <div style="width:200px;">${sp.serviceName} (${end - begin}ms)</div>
+		        </div>
+		    </c:forEach>
+		</div>
+	</div>
+	
+    <div class="row"><div class="span10"></div></div>
+    <div class="row">
+        <div class="span10">Application Details</div>
+    </div>
+    <div class="row">
+        <div class="span10">
+			<table id="businessTransactions" class="table table-bordered">
+	        <thead>
+	        <tr>
+	            <th>#</th>
+	            <th>TIME</th>
+	            <th>GAP</th>
+	            <th>Application</th>
+	            <th>time</th>
+	            <th>endpoint</th>
+	            <th>Action</th>
+	            <th>Action</th>
+	        </tr>
+	        </thead>
+	        <tbody>
+	
+	        <c:forEach items="${spanList}" var="span" varStatus="status">
+	            <c:set var="sp" scope="page" value="${span.span}"/>
+	            <c:forEach items="${sp.annotationBoList}" var="ano" varStatus="annoStatus">
+	                <tr>
+	                    <td>${status.count}</td>
+	                    <td>${ano.timestamp}</td>
+	                    <td>
+	                        <c:if test="${not annoStatus.first}">${ano.timestamp - bt}<br/>${ano.timestamp}<br/>${bt}</c:if>
+	                    </td>
+	
+	                    <td>${sp.serviceName}</td>
+	                    <td>${sp.timestamp}</td>
+	                    <td>${sp.endPoint}</td>
+	                    <td>${ano.key}</td>
+	                    <td>${hippo:bytesToString(ano.valueType, ano.value)}</td>
+	                </tr>
+	                <c:set var="bt" scope="page" value="${ano.timestamp}"/>
+	            </c:forEach>
+	            <tr>
+	                <td colspan="8">&nbsp;</td>
+	            </tr>
+	        </c:forEach>
+	
+	        </tbody>
+	    </table>
         </div>
-    </c:forEach>
+    </div>
 </div>
 
 <script type="text/javascript">
-    //$("#timeline").css("width", ${endTime - startTime});
+var data = {
+		"nodes" : [
+		<c:forEach items="${nodes}" var="node" varStatus="status">
+		    <c:if test="${node.terminal}">
+		        { "name" : "${node.endPoint}" }
+		    </c:if>
+		    <c:if test="${not node.terminal}">
+		        { "name" : "${node}" }
+		    </c:if>
+		    <c:if test="${!status.last}">,</c:if>
+		</c:forEach>
+		],
+		"links" : [
+		<c:forEach items="${links}" var="link" varStatus="status">
+		    {"source" : ${link.from.sequence}, "target" : ${link.to.sequence}, "value" : ${link.callCount}}
+		    <c:if test="${!status.last}">,</c:if>
+		</c:forEach>
+		]
+	};
+
+$(document).ready(function () {
+	drawSankeyChart(data, "#graph");
+});
 </script>
 
-
-struct Annotation {
-1: i64 timestamp,
-2: optional i64 duration,
-3: string key,
-4: i32 valueTypeCode,
-5: optional binary value,
-}
-
-struct Span {
-1: string agentID
-2: i64 timestamp,
-3: i64 mostTraceID
-4: i64 leastTraceID
-5: string name,
-6: string serviceName
-7: i64 spanID,
-8: optional i64 parentSpanId,
-9: list
-<Annotation> annotations,
-    10: optional i32 flag = 0
-    11: string endPoint
-    12: bool terminal
-    }
-
-
-    <br/>
-    <br/>
-    <br/>
-    <br/>
-
-
-    <table id="businessTransactions" class="table table-bordered">
-        <thead>
-        <tr>
-            <th>#</th>
-            <th>TIME</th>
-            <th>GAP</th>
-            <th>Application</th>
-            <th>time</th>
-            <th>endpoint</th>
-            <th>Action</th>
-            <th>Action</th>
-        </tr>
-        </thead>
-        <tbody>
-
-        <c:forEach items="${spanList}" var="span" varStatus="status">
-            <c:set var="sp" scope="page" value="${span.span}"/>
-            <c:forEach items="${sp.annotationBoList}" var="ano" varStatus="annoStatus">
-                <tr>
-                    <td>${status.count}</td>
-                    <td>${ano.timestamp}</td>
-                    <td>
-                        <c:if test="${not annoStatus.first}">${ano.timestamp - bt}<br/>${ano.timestamp}<br/>${bt}</c:if>
-                    </td>
-
-                    <td>${sp.serviceName}</td>
-                    <td>${sp.timestamp}</td>
-                    <td>${sp.endPoint}</td>
-                    <td>${ano.key}</td>
-                    <td>${hippo:bytesToString(ano.valueType, ano.value)}</td>
-                </tr>
-                <c:set var="bt" scope="page" value="${ano.timestamp}"/>
-            </c:forEach>
-            <tr>
-                <td colspan="8">&nbsp;</td>
-            </tr>
-        </c:forEach>
-
-        </tbody>
-    </table>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/webapp/common/js/hippo/hippo.js b/src/main/webapp/common/js/hippo/hippo.js
new file mode 100644
index 000000000..8c023e2f1
--- /dev/null
+++ b/src/main/webapp/common/js/hippo/hippo.js
@@ -0,0 +1,176 @@
+function drawSankeyChart(graphdata, targetId) {
+	var margin = {
+		    top:1,
+		    right:1,
+		    bottom:6,
+		    left:1
+		}, width = 1300 - margin.left - margin.right, height = 450 - margin.top - margin.bottom;
+
+	var formatNumber = d3.format(",.0f"), format = function (d) {
+	    	return formatNumber(d) + " Requests";
+		}, color = d3.scale.category20();
+
+    var svg = d3.select(targetId).append("svg")
+            .attr("width", width + margin.left + margin.right)
+            .attr("height", height + margin.top + margin.bottom)
+            .append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+    var sankey = d3.sankey().nodeWidth(15).nodePadding(10).size([ width, height ]);
+    var path = sankey.link();
+
+	sankey.nodes(graphdata.nodes).links(graphdata.links).layout(32);
+	
+	if (graphdata.nodes.length == 0) {
+	    alert("no data");
+	    return;
+	}
+	
+	var link = svg.append("g").selectAll(".link").data(graphdata.links)
+	        .enter().append("path")
+	        .attr("class", "link")
+	        .attr("d", path).style("stroke-width",function (d) {
+	            return Math.max(1, d.dy);
+	        }).sort(function (a, b) {
+	            return b.dy - a.dy;
+	        }).on("click", function (a, b) {
+	            console.log(a);
+	            console.log(b);
+	        });
+	
+	link.append("title").text(
+	        function (d) {
+	            return d.source.name + " → " + d.target.name + "\n"
+	                    + format(d.value);
+	        });
+	
+	var node = svg.append("g").selectAll(".node").data(graphdata.nodes)
+	        .enter().append("g").attr("class", "node").attr(
+	        "transform",function (d) {
+	            return "translate(" + d.x + "," + d.y + ")";
+	        }).call(d3.behavior.drag().origin(function (d) {
+	    return d;
+	}).on("dragstart",function () {
+	            this.parentNode.appendChild(this);
+	        }).on("drag", dragmove));
+	
+	node.on("click", function (d) {
+	    console.log(d);
+	});
+	
+	node.append("rect").attr("height",function (d) {
+	    return d.dy;
+	}).attr("width", sankey.nodeWidth()).style("fill",function (d) {
+	            return d.color = color(d.name.replace(/ .*/, ""));
+	        }).style("stroke",function (d) {
+	            return d3.rgb(d.color).darker(2);
+	        }).append("title").text(function (d) {
+	            return d.name + "\n" + format(d.value);
+	        });
+	
+	node.append("text").attr("x", -6).attr("y",function (d) {
+	    return d.dy / 2;
+	}).attr("dy", ".35em").attr("text-anchor", "end").attr("transform",
+	        null).text(function (d) {
+	            return d.name;
+	        }).filter(function (d) {
+	            return d.x < width / 2;
+	        }).attr("x", 6 + sankey.nodeWidth()).attr("text-anchor", "start");
+	
+	function dragmove(d) {
+	    d3.select(this).attr(
+	            "transform",
+	            "translate("
+	                    + d.x
+	                    + ","
+	                    + (d.y = Math.max(0, Math.min(height - d.dy,
+	                    d3.event.y))) + ")");
+	    sankey.relayout();
+	    link.attr("d", path);
+	}
+}
+
+function drawScatter(data, targetId) {
+	var margin = {top: 20, right: 20, bottom: 30, left: 40},
+	    width = 960 - margin.left - margin.right,
+	    height = 500 - margin.top - margin.bottom;
+
+	var x = d3.time.scale().range([0, width]);
+	var y = d3.scale.linear().range([height, 0]);
+	var color = d3.scale.category10();
+
+	var xAxis = d3.svg.axis()
+	    .scale(x)
+	    .orient("bottom");
+
+	var yAxis = d3.svg.axis()
+	    .scale(y)
+	    .orient("left");
+	
+	var svg = d3.select(targetId).append("svg")
+	    .attr("width", width + margin.left + margin.right)
+	    .attr("height", height + margin.top + margin.bottom)
+	  .append("g")
+	    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+	  //data.forEach(function(d) {
+	  //  d.timestamp = +d.timestamp;
+	  //  d.executionTime = +d.executionTime;
+	  //});
+
+	  x.domain(d3.extent(data, function(d) { return d.timestamp; }));//.nice();
+	  y.domain(d3.extent(data, function(d) { return d.executionTime; }));//.nice();
+
+	  svg.append("g")
+	      .attr("class", "x axis")
+	      .attr("transform", "translate(0," + height + ")")
+	      .call(xAxis)
+	    .append("text")
+	      .attr("class", "label")
+	      .attr("x", width)
+	      .attr("y", -6)
+	      .style("text-anchor", "end")
+	      .text("Timestamp (HH:mm)");
+
+	  svg.append("g")
+	      .attr("class", "y axis")
+	      .call(yAxis)
+	    .append("text")
+	      .attr("class", "label")
+	      .attr("transform", "rotate(-90)")
+	      .attr("y", 6)
+	      .attr("dy", ".71em")
+	      .style("text-anchor", "end")
+	      .text("Execute time (ms)")
+
+	  svg.selectAll(".dot")
+	      .data(data)
+	    .enter().append("circle")
+	      .attr("class", "dot")
+	      .attr("r", 3.5)
+	      .attr("cx", function(d) { return x(d.timestamp); })
+	      .attr("cy", function(d) { return y(d.executionTime); })
+	      .style("fill", function(d) { return color(d.name); })
+	      .on("click", function(d) { openTrace(d.traceId); });
+
+	  var legend = svg.selectAll(".legend")
+	      .data(color.domain())
+	    .enter().append("g")
+	      .attr("class", "legend")
+	      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
+
+	  legend.append("rect")
+	      .attr("x", width - 18)
+	      .attr("width", 18)
+	      .attr("height", 18)
+	      .style("fill", color);
+
+	  legend.append("text")
+	      .attr("x", width - 24)
+	      .attr("y", 9)
+	      .attr("dy", ".35em")
+	      .style("text-anchor", "end")
+	      .text(function(d) { return d; });
+}
+
+function openTrace(uuid) {
+    window.open("/selectTransaction.hippo?traceId=" + uuid);
+}
\ No newline at end of file
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
index 22d61ae8c..9502ec3ec 100644
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@@ -24,6 +24,7 @@
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script type="text/javascript" src="http://d3js.org/d3.v2.min.js?2.9.1"></script>
     <script type="text/javascript" src="/common/js/sankey/sankey.js"></script>
+    <script type="text/javascript" src="/common/js/hippo/hippo.js"></script>
 </head>
 <body>
 <div class="navbar navbar-fixed-top">
@@ -143,7 +144,6 @@
 </div>
 <!-- END OF MENU -->
 
-
 <script type="text/javascript">
 function getStartTime() {
     return new Date($("#startdate").val() + " " + $("#starttime").val() + ":00").getTime();
@@ -153,152 +153,53 @@ function getEndTime() {
     return new Date($("#enddate").val() + " " + $("#endtime").val() + ":00").getTime();
 }
 
-function cleanupChart() {
-    $("#graph").empty();
-    $("#scatter").empty();
-}
-
-function cleanupTracesTable() {
-    $("#businessTransactions TBODY").empty();
-    $("#businessTransactionsDetail TBODY").empty();
-}
-
 function getChartData(chartType, callback) {
     var hosts = $("#servers").val();
 	d3.json("/" + chartType + ".hippo?host=" + hosts + "&from=" + getStartTime() + "&to=" + getEndTime(), function(d) { callback(d); });
 }
 
-function drawSankeyChart(graphdata) {
-	var margin = {
-		    top:1,
-		    right:1,
-		    bottom:6,
-		    left:1
-		}, width = 1300 - margin.left - margin.right, height = 450 - margin.top - margin.bottom;
-
-	var formatNumber = d3.format(",.0f"), format = function (d) {
-	    	return formatNumber(d) + " Requests";
-		}, color = d3.scale.category20();
-
-    var svg = d3.select("#graph").append("svg")
-            .attr("width", width + margin.left + margin.right)
-            .attr("height", height + margin.top + margin.bottom)
-            .append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-    var sankey = d3.sankey().nodeWidth(15).nodePadding(10).size([ width, height ]);
-    var path = sankey.link();
-
-	sankey.nodes(graphdata.nodes).links(graphdata.links).layout(32);
-	
-	if (graphdata.nodes.length == 0) {
-	    alert("no data");
-	    return;
-	}
-	
-	var link = svg.append("g").selectAll(".link").data(graphdata.links)
-	        .enter().append("path")
-	        .attr("class", "link")
-	        .attr("d", path).style("stroke-width",function (d) {
-	            return Math.max(1, d.dy);
-	        }).sort(function (a, b) {
-	            return b.dy - a.dy;
-	        }).on("click", function (a, b) {
-	            console.log(a);
-	            console.log(b);
-	        });
-	
-	link.append("title").text(
-	        function (d) {
-	            return d.source.name + " → " + d.target.name + "\n"
-	                    + format(d.value);
-	        });
-	
-	var node = svg.append("g").selectAll(".node").data(graphdata.nodes)
-	        .enter().append("g").attr("class", "node").attr(
-	        "transform",function (d) {
-	            return "translate(" + d.x + "," + d.y + ")";
-	        }).call(d3.behavior.drag().origin(function (d) {
-	    return d;
-	}).on("dragstart",function () {
-	            this.parentNode.appendChild(this);
-	        }).on("drag", dragmove));
-	
-	node.on("click", function (d) {
-	    console.log(d);
-	});
-	
-	node.append("rect").attr("height",function (d) {
-	    return d.dy;
-	}).attr("width", sankey.nodeWidth()).style("fill",function (d) {
-	            return d.color = color(d.name.replace(/ .*/, ""));
-	        }).style("stroke",function (d) {
-	            return d3.rgb(d.color).darker(2);
-	        }).append("title").text(function (d) {
-	            return d.name + "\n" + format(d.value);
-	        });
-	
-	node.append("text").attr("x", -6).attr("y",function (d) {
-	    return d.dy / 2;
-	}).attr("dy", ".35em").attr("text-anchor", "end").attr("transform",
-	        null).text(function (d) {
-	            return d.name;
-	        }).filter(function (d) {
-	            return d.x < width / 2;
-	        }).attr("x", 6 + sankey.nodeWidth()).attr("text-anchor", "start");
-	
-	function dragmove(d) {
-	    d3.select(this).attr(
-	            "transform",
-	            "translate("
-	                    + d.x
-	                    + ","
-	                    + (d.y = Math.max(0, Math.min(height - d.dy,
-	                    d3.event.y))) + ")");
-	    sankey.relayout();
-	    link.attr("d", path);
-	}
-}
-
-var transactions;
+var transactionsCache;
 var prevDetaildRow;
 
 function showTransactionList(transactions) {
-   var html = [];
-   for (var i = 0; i < transactions.length; i++) {
-       html.push("<tr>");
-
-       html.push("<td>");
-       html.push(i + 1);
-       html.push("</td>");
-
-       html.push("<td><a href='#' onclick='openTransactionDetails(");
-       html.push(i);
-       html.push(", this);'>");
-       html.push(transactions[i].name);
-       html.push("</a></td>");
-
-       html.push("<td>");
-       html.push(transactions[i].calls);
-       html.push("</td>");
-
-       html.push("<td>");
-       html.push(transactions[i].time);
-       html.push("</td>");
-
-       html.push("<td>");
-       html.push(transactions[i].minTime);
-       html.push("</td>");
-
-       html.push("<td>");
-       html.push(transactions[i].maxTime);
-       html.push("</td>");
-
-       html.push("<td>");
-       html.push(transactions[i].health);
-       html.push("</td>");
-
-       html.push("</tr>");
-   }
-   $("#businessTransactions TBODY").append(html.join(''));	
+	transactionsCache = transactions;
+	var html = [];
+	for (var i = 0; i < transactions.length; i++) {
+	    html.push("<tr>");
+	
+	    html.push("<td>");
+	    html.push(i + 1);
+	    html.push("</td>");
+	
+	    html.push("<td><a href='#' onclick='openTransactionDetails(");
+	    html.push(i);
+	    html.push(", this);'>");
+	    html.push(transactions[i].name);
+	    html.push("</a></td>");
+	
+	    html.push("<td>");
+	    html.push(transactions[i].calls);
+	    html.push("</td>");
+	
+	    html.push("<td>");
+	    html.push(transactions[i].time);
+	    html.push("</td>");
+	
+	    html.push("<td>");
+	    html.push(transactions[i].minTime);
+	    html.push("</td>");
+	
+	    html.push("<td>");
+	    html.push(transactions[i].maxTime);
+	    html.push("</td>");
+	
+	    html.push("<td>");
+	    html.push(transactions[i].health);
+	    html.push("</td>");
+	
+	    html.push("</tr>");
+	}
+	$("#businessTransactions TBODY").append(html.join(''));	
 }
 
 function openTransactionDetails(index, row) {
@@ -311,7 +212,7 @@ function openTransactionDetails(index, row) {
 
     $("#businessTransactionsDetail TBODY").empty();
 
-    var traces = transactions[index].traces;
+    var traces = transactionsCache[index].traces;
     var html = [];
     for (var i = 0; i < traces.length; i++) {
         html.push("<tr>");
@@ -335,113 +236,38 @@ function openTransactionDetails(index, row) {
     $("#businessTransactionsDetail TBODY").append(html.join(''));
 }
 
-function drawScatter(data) {
-	var margin = {top: 20, right: 20, bottom: 30, left: 40},
-	    width = 960 - margin.left - margin.right,
-	    height = 500 - margin.top - margin.bottom;
-
-	var x = d3.time.scale().range([0, width]);
-	var y = d3.scale.linear().range([height, 0]);
-	var color = d3.scale.category10();
-
-	var xAxis = d3.svg.axis()
-	    .scale(x)
-	    .orient("bottom");
-
-	var yAxis = d3.svg.axis()
-	    .scale(y)
-	    .orient("left");
-	
-	var svg = d3.select("#scatter").append("svg")
-	    .attr("width", width + margin.left + margin.right)
-	    .attr("height", height + margin.top + margin.bottom)
-	  .append("g")
-	    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-	  //data.forEach(function(d) {
-	  //  d.timestamp = +d.timestamp;
-	  //  d.executionTime = +d.executionTime;
-	  //});
-
-	  x.domain(d3.extent(data, function(d) { return d.timestamp; }));//.nice();
-	  y.domain(d3.extent(data, function(d) { return d.executionTime; }));//.nice();
-
-	  svg.append("g")
-	      .attr("class", "x axis")
-	      .attr("transform", "translate(0," + height + ")")
-	      .call(xAxis)
-	    .append("text")
-	      .attr("class", "label")
-	      .attr("x", width)
-	      .attr("y", -6)
-	      .style("text-anchor", "end")
-	      .text("Timestamp (HH:mm)");
-
-	  svg.append("g")
-	      .attr("class", "y axis")
-	      .call(yAxis)
-	    .append("text")
-	      .attr("class", "label")
-	      .attr("transform", "rotate(-90)")
-	      .attr("y", 6)
-	      .attr("dy", ".71em")
-	      .style("text-anchor", "end")
-	      .text("Execute time (ms)")
-
-	  svg.selectAll(".dot")
-	      .data(data)
-	    .enter().append("circle")
-	      .attr("class", "dot")
-	      .attr("r", 3.5)
-	      .attr("cx", function(d) { return x(d.timestamp); })
-	      .attr("cy", function(d) { return y(d.executionTime); })
-	      .style("fill", function(d) { return color(d.name); })
-	      .on("click", function(d) { openTrace(d.traceId); });
-
-	  var legend = svg.selectAll(".legend")
-	      .data(color.domain())
-	    .enter().append("g")
-	      .attr("class", "legend")
-	      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
-
-	  legend.append("rect")
-	      .attr("x", width - 18)
-	      .attr("width", 18)
-	      .attr("height", 18)
-	      .style("fill", color);
-
-	  legend.append("text")
-	      .attr("x", width - 24)
-	      .attr("y", 9)
-	      .attr("dy", ".35em")
-	      .style("text-anchor", "end")
-	      .text(function(d) { return d; });
-}
-
-function openTrace(uuid) {
-    window.open("/selectTransaction.hippo?traceId=" + uuid);
-}
-
 $(document).ready(function () {
     $("#servers").select2();
     
     $("#btnTraceRPC").click(function() { 
-        cleanupChart();
-        cleanupTracesTable();
+    	// cleanup chart
+        $("#graph").empty();
+        $("#scatter").empty();
+        
+        // cleanup transaction tables
+        $("#businessTransactions TBODY").empty();
+        $("#businessTransactionsDetail TBODY").empty();
+        
         getChartData("flow", function(data) {
-	        drawSankeyChart(data.graphdata);
+	        drawSankeyChart(data.graphdata, "#graph");
 	        showTransactionList(data.businessTransactions);
-	        drawScatter(data.scatter);
+	        drawScatter(data.scatter, "#scatter");
         });
     });
     
-    $("#btnTraceServer").click(function() { 
-        cleanupChart();
-        cleanupTracesTable();
+    $("#btnTraceServer").click(function() {
+    	// cleanup chart
+        $("#graph").empty();
+        $("#scatter").empty();
+        
+        // cleanup transaction tables
+        $("#businessTransactions TBODY").empty();
+        $("#businessTransactionsDetail TBODY").empty();
+        
         getChartData("flowserver", function(data) {
-	        drawSankeyChart(data.graphdata);
+	        drawSankeyChart(data.graphdata, "#graph");
 	        showTransactionList(data.businessTransactions);
-	        drawScatter(data.scatter);
+	        drawScatter(data.scatter, "#scatter");
         });
     });
 });