From 6b6d00a5db6c41a85b0157129fe232fea899035a Mon Sep 17 00:00:00 2001
From: Chisu Yu <puseori9th@gmail.com>
Date: Tue, 20 Aug 2013 02:02:41 +0000
Subject: [PATCH] =?UTF-8?q?[=EC=9C=A0=EC=B9=98=EC=88=98]=20[NOBTS]=20selec?=
 =?UTF-8?q?ted=20transaction=20list=20ui=20=EB=B3=80=EA=B2=BD.?=
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@2169 84d0f5b1-2673-498c-a247-62c4ff18d310
---
 .../webapp/WEB-INF/views/transactionList.jsp  | 100 ++++++++++--------
 1 file changed, 56 insertions(+), 44 deletions(-)
diff --git a/src/main/webapp/WEB-INF/views/transactionList.jsp b/src/main/webapp/WEB-INF/views/transactionList.jsp
index 941c72f0a..8f50a2f1e 100644
--- a/src/main/webapp/WEB-INF/views/transactionList.jsp
+++ b/src/main/webapp/WEB-INF/views/transactionList.jsp
@@ -78,40 +78,45 @@
 <body>
 
 <div class="table-container">
-    <div class="table-left">
-		<h4>Application : ${applicationName}</h4>
-		<h5>Time : <fmt:formatDate value="${from}" pattern="yyyy-MM-dd HH:mm:ss"/> ~ <fmt:formatDate value="${to}" pattern="yyyy-MM-dd HH:mm:ss"/></h5>
-		<h5>Total URL count : <fmt:formatNumber value="${urlCount}" type="number" /></h5>
-		<h5>Total request count : <fmt:formatNumber value="${totalCount}" type="number" /></h5>
-		
-		<div style="max-height:300px;overflow:scroll;">
-			<table class="table table-bordered table-condensed table-hover sortable">
-				<thead>
-					<tr>
-						<th>URL</th>
-						<th class="sorttable_numeric">Calls</th>
-						<th class="sorttable_numeric">Avg</th>
-						<th class="sorttable_numeric">Min</th>
-						<th class="sorttable_numeric">Max</th>
-					</tr>
-				</thead>
-				<tbody>
-					<c:forEach items="${rpcList}" var="t" varStatus="status">
-					<tr style="cursor:pointer;" onclick="showRequestList(${status.count}, this);">
-						<td>${t.rpc}</td>
-						<td class="num" sorttable_customkey="${t.calls}"><fmt:formatNumber value="${t.calls}" type="number" /></td>
-						<td class="num" sorttable_customkey="${t.totalTime / t.calls}"><fmt:formatNumber value="${t.totalTime / t.calls}" type="number" /></td>
-						<td class="num" sorttable_customkey="${t.minTime}"><fmt:formatNumber value="${t.minTime}" type="number" /></td>
-						<td class="num" sorttable_customkey="${t.maxTime}"><fmt:formatNumber value="${t.maxTime}" type="number" /></td>
-					</tr>
-					</c:forEach>
-				</tbody>
-			</table>
-		</div>
+
+	<h4>Application : ${applicationName}</h4>
+	<h5>Time : <fmt:formatDate value="${from}" pattern="yyyy-MM-dd HH:mm:ss"/> ~ <fmt:formatDate value="${to}" pattern="yyyy-MM-dd HH:mm:ss"/></h5>
+	<h5>Total URL count : <fmt:formatNumber value="${urlCount}" type="number" /></h5>
+	<h5>Total request count : <fmt:formatNumber value="${totalCount}" type="number" /></h5>
+
+	<div style="width:800px;" class="progress progress-info" id="readProgress">
+	  <div class="bar" style="width: 40%">fetched</div>
+	  <div id="fetchButtons">
+	  	<span id="fetchMore" style="cursor:pointer;">fetch more</span> / 
+	  	<span id="fetchAll" style="cursor:pointer;">fetch all</span>
+	  </div>
 	</div>
-	<div class="table-right">
-		<div id="scatterchart"></div>
+
+	<div style="width:800px;max-height:300px;overflow:scroll;">
+		<table class="table table-bordered table-condensed table-hover sortable">
+			<thead>
+				<tr>
+					<th>URL</th>
+					<th class="sorttable_numeric">Calls</th>
+					<th class="sorttable_numeric">Avg</th>
+					<th class="sorttable_numeric">Min</th>
+					<th class="sorttable_numeric">Max</th>
+				</tr>
+			</thead>
+			<tbody>
+				<c:forEach items="${rpcList}" var="t" varStatus="status">
+				<tr style="cursor:pointer;" onclick="showRequestList(${status.count}, this);">
+					<td>${t.rpc}</td>
+					<td class="num" sorttable_customkey="${t.calls}"><fmt:formatNumber value="${t.calls}" type="number" /></td>
+					<td class="num" sorttable_customkey="${t.totalTime / t.calls}"><fmt:formatNumber value="${t.totalTime / t.calls}" type="number" /></td>
+					<td class="num" sorttable_customkey="${t.minTime}"><fmt:formatNumber value="${t.minTime}" type="number" /></td>
+					<td class="num" sorttable_customkey="${t.maxTime}"><fmt:formatNumber value="${t.maxTime}" type="number" /></td>
+				</tr>
+				</c:forEach>
+			</tbody>
+		</table>
 	</div>
+	<div id="scatterchart"></div>
 </div>
 
 <script type="text/javascript">
@@ -125,23 +130,30 @@ function showRequestList(id, row) {
 	selectedRow = row;
 	$(row).css({'background-color':'#FFFF00'});
 	
-	drawScatter("${applicationName}", ${from.time}, ${to.time}, "scatterchart", 500, 450);
+	drawScatter("${applicationName}", ${from.time}, ${to.time}, "scatterchart", 800, 400);
 	updateScatter("", "", datamap[id]);
-		return false;
+	return false;
 }
 
+$(document).ready(function () {
+	drawScatter("${applicationName}", ${from.time}, ${to.time}, "scatterchart", 800, 400);
+	$.each(datamap, function(i, e) {
+		updateScatter("", "", e);
+	});
+});
+
 <c:forEach items="${requestList}" var="t" varStatus="status">
 datamap["${status.count}"] = [
-	    <c:forEach items="${t.traces}" var="trace" varStatus="status2">
-		{
-   			"x" : ${trace.startTime},
-   			"y" : ${trace.executionTime},
-   			"traceId" : "${trace.traceId}",
-   			"type" : <c:choose><c:when test="${trace.exceptionCode == 1}">"Failed"</c:when><c:otherwise>"Success"</c:otherwise></c:choose> 
-   		}
-	    <c:if test="${!status2.last}">,</c:if>
-		</c:forEach>		
-    	];
+	<c:forEach items="${t.traces}" var="trace" varStatus="status2">
+	{
+	"x" : ${trace.startTime},
+	"y" : ${trace.executionTime},
+	"traceId" : "${trace.traceId}",
+	"type" : <c:choose><c:when test="${trace.exceptionCode == 1}">"Failed"</c:when><c:otherwise>"Success"</c:otherwise></c:choose> 
+	}
+	<c:if test="${!status2.last}">,</c:if>
+	</c:forEach>		
+];
 </c:forEach>
 </script>
 </body>
