From 6005367900a15624a534c08d97a366a88cb50dd2 Mon Sep 17 00:00:00 2001
From: Chisu Yu <puseori9th@gmail.com>
Date: Wed, 17 Oct 2012 08:00:36 +0000
Subject: [PATCH] =?UTF-8?q?[=EC=9C=A0=EC=B9=98=EC=88=98]=20[NOBTS]=20modif?=
 =?UTF-8?q?y=20timeline?=
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@799 84d0f5b1-2673-498c-a247-62c4ff18d310
---
 .../WEB-INF/views/selectTransaction.jsp       | 80 +++++++++++--------
 1 file changed, 48 insertions(+), 32 deletions(-)
diff --git a/src/main/webapp/WEB-INF/views/selectTransaction.jsp b/src/main/webapp/WEB-INF/views/selectTransaction.jsp
index 06a0e63cd..3b271a8b4 100644
--- a/src/main/webapp/WEB-INF/views/selectTransaction.jsp
+++ b/src/main/webapp/WEB-INF/views/selectTransaction.jsp
@@ -19,56 +19,72 @@
 
     <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">
+    function showDetail(id) {
+    	$("#spanDetail" + id).css("display", "");
+    	$("#spanDetail" + id).css("top", event.pageY);
+    	$("#spanDetail" + id).css("left", event.pageX);
+    }
+    
+    function hideDetail(id) {
+    	$("#spanDetail" + id).css("display", "none");
+    }
+    </script>
 </head>
 <body>
 	<h4>TraceId: ${traceId}</h4>
 
 
-	<c:set var="startTime" scope="page" value="0"/>
 
+<div id="timeline" style="margin-left:100px;margin-top:50px;background-color:#E8E8E8;">
+	<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>service name = ${sp.serviceName}</li>
+			<li>timestamp = ${hippo:longToDateStr(sp.timestamp)}</li>
+			<li>endpoint = ${sp.endPoint}</li>
 		
-		<c:forEach items="${sp.annotations}" 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}"/>
-				
-				<c:if test="${status.first}">
-					<c:set var="startTime" scope="page" value="${ano.timestamp}"/>
+			<c:forEach items="${sp.annotations}" 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}"/>
+					
+					<c:if test="${status.first}">
+						<c:set var="startTime" scope="page" value="${ano.timestamp}"/>
+					</c:if>
 				</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}"/>
-			</c:if>
-			${hippo:bytesToString(ano.valueTypeCode, ano.value)} 
-		</c:forEach>
-		
-		
-		<div style="width:${end - begin}px; background-color:red;margin-left:px">
-		${sp.serviceName}<br/>
-		${end - begin}
+				<c:if test="${ano.key eq 'CR' or ano.key eq 'SS'}">
+					<c:set var="end" scope="page" value="${ano.timestamp}"/>
+					<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.valueTypeCode, ano.value)}</li>
+				</c:if>
+			</c:forEach>
+		</ul>
 		</div>
 		
-		
-		<br/>
-		<br/>
+		<div style="width:${end - begin}px; background-color:#69B2E9;margin-left:${begin - startTime}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>
 
+	<script type="text/javascript">
+	$("#timeline").css("width", ${endTime - startTime});
+	</script>
 
-
-
-
-
-
-
-
-
-
-
-
+	<br/>
+	<br/>
+	<br/>
+	<br/>
 
 		
 	<table id="businessTransactions" class="table table-bordered">
