[유치수] [NOBTS] request목록을 새 창으로 보여주도록 변경.

git-svn-id: http://svn.bds.nhncorp.com/pe/hippo-web/trunk@1416 84d0f5b1-2673-498c-a247-62c4ff18d310
2026-08-15 15:55:54 +10:00 · 2013-04-09 07:52:30 +00:00
parent 26939ad38f
commit 40754d2a16
9 changed files with 149 additions and 66 deletions
@@ -1,5 +1,6 @@
 package com.nhn.hippo.web.controller;

+import java.util.Date;
 import java.util.List;
 import java.util.Set;

@@ -59,8 +60,12 @@ public class BusinessTransactionController extends BaseController {

 		BusinessTransactions selectBusinessTransactions = flow.selectBusinessTransactions(traceIdList, applicationName, from, to);

-		model.addAttribute("businessTransactions", selectBusinessTransactions.getBusinessTransactionIterator());
-
+		model.addAttribute("rpcList", selectBusinessTransactions.getBusinessTransactionIterator());
+		model.addAttribute("requestList", selectBusinessTransactions.getBusinessTransactionIterator());
+		model.addAttribute("applicationName", applicationName);
+		model.addAttribute("from", new Date(from));
+		model.addAttribute("to", new Date(to));
+		
 		addResponseHeader(response);
 		return "businesstransactions";
 	}
@@ -10,7 +10,6 @@ import com.profiler.common.bo.SpanBo;
 public class BusinessTransactions {

 	private final Map<String, BusinessTransaction> transactions = new HashMap<String, BusinessTransaction>();
-	private Iterator<Entry<String, BusinessTransaction>> iterator;

 	public void add(SpanBo span) {
 		String rpc = span.getRpc();
@@ -22,7 +21,7 @@ public class BusinessTransactions {
 	}

 	public Iterator<BusinessTransaction> getBusinessTransactionIterator() {
-		iterator = transactions.entrySet().iterator();
+		final Iterator<Entry<String, BusinessTransaction>> iterator = transactions.entrySet().iterator();

 		return new Iterator<BusinessTransaction>() {
 			@Override
@@ -41,6 +40,4 @@ public class BusinessTransactions {
 			}
 		};
 	}
-
-
 }
@@ -1,23 +1,117 @@
-<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
-<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
-<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
-{
-	"businessTransactions" : [
-	<c:forEach items="${businessTransactions}" var="t" varStatus="status">
-	    {
-		    "name" : "${t.rpc}",
-		    "calls" : ${t.calls},
-		    "avgTime" : <fmt:formatNumber value="${t.totalTime / t.calls}" type="number" pattern="#"/>,
-		    "minTime" : ${t.minTime},
-		    "maxTime" : ${t.maxTime},
-		    "health" : 1,
-		    "traces" : [
-		    <c:forEach items="${t.traces}" var="trace" varStatus="status2">
-		        { "traceId" : "${trace.traceId}", "executionTime" : ${trace.executionTime}, "timestamp" : ${trace.startTime} }
-		        <c:if test="${!status2.last}">,</c:if>
-		    </c:forEach>
-		    ]
-	    } <c:if test="${!status.last}">,</c:if>
-	</c:forEach>
-	]
-}
+<%@ page language="java" contentType="text/html; charset=UTF-8"
+	pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
+<%@ taglib prefix="hippo" uri="http://hippo.nhncorp.com/hippo" %>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>PROBE - ${applicationName} request list</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/bootstrap/bootstrap.css" rel="stylesheet">
+    <link href="/common/css/bootstrap/bootstrap-responsive.css" rel="stylesheet"/>
+    <link href="/common/css/hippo/sorttable.css" rel="stylesheet"/>
+    <link href="/common/css/datepicker.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]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <script type="text/javascript" src="/common/js/jquery/jquery-1.9.1.min.js"></script>
+    <script type="text/javascript" src="/common/js/jquery/jquery-ui-1.10.2.js"></script>
+    <script type="text/javascript" src="/common/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="/common/js/sorttable.js"></script>
+    <script type="text/javascript" src="/common/js/hippo/hippo.js"></script>
+    <script type="text/javascript">
+	var shownList;
+	var selectedRow;
+    function showRequestList(rpc, row) {
+    	if (shownList) {
+    		$(shownList).hide();
+    	}
+    	if (selectedRow) {
+    		$(selectedRow).css({'background-color':'#FFFFFF'});
+    	}
+    	
+    	shownList = "#requestList-" + rpc;
+    	selectedRow = row;
+    	
+   		$(shownList).show();
+		$(row).css({'background-color':'#FFFF00'});
+   		return false;
+    }
+    </script>
+    <style type="text/css">
+    body {
+    	padding: 30px;
+	}
+    </style>
+</head>
+<body>
+
+<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>
+
+    <div style="position:relative;">
+        <div style="margin-right:530px;overflow:scroll;height:600px;width:600px;">
+		<h5>URL list</h5>
+		<table class="table table-bordered 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><fmt:formatNumber value="${t.calls}" type="number" /></td>
+					<td><fmt:formatNumber value="${t.totalTime / t.calls}" type="number" pattern="#" /></td>
+					<td><fmt:formatNumber value="${t.minTime}" type="number" /></td>
+					<td><fmt:formatNumber value="${t.maxTime}" type="number" /></td>
+				</tr>
+				</c:forEach>
+			</tbody>
+		</table>
+		</div>
+	
+		<div style="position:absolute;top:0;right:0;overflow:scroll;height:600px;width:600px;">
+		<c:forEach items="${requestList}" var="t" varStatus="status">
+		<div id="requestList-${status.count}" style="display:none;">
+			<h5>Request list</h5>
+			<table class="table table-bordered table-hover sortable">
+				<thead>
+					<tr>
+						<th>#</th>
+						<th class="sorttable_numeric">Time</th>
+						<th>TraceId</th>
+						<th class="sorttable_numeric">Response Time (ms)</th>
+					</tr>
+				</thead>
+				<tbody>
+				    <c:forEach items="${t.traces}" var="trace" varStatus="status2">
+				    <tr>
+				    	<td>${status2.count}</td>
+				    	<td>${hippo:longToDateStr(trace.startTime, "HH:mm:ss SSS")}</td>
+				    	<td><a href="/selectTransaction.hippo?traceId=${trace.traceId}&focusTimestamp=-1" target="_blank">${trace.traceId}</a></td>
+				    	<td>${trace.executionTime}</td>
+				    </tr>
+					</c:forEach>		
+				</tbody>
+			</table>
+		</div>
+		</c:forEach>
+		</div>
+	</div>
+	
+</body>
+</html>
@@ -11,6 +11,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="/common/css/hippo/hippo.css" rel="stylesheet">
+    <link href="/common/css/hippo/sorttable.css" rel="stylesheet"/>
    <link href="/common/css/bootstrap/bootstrap.css" rel="stylesheet">
    <link href="/common/css/bootstrap/bootstrap-responsive.css" rel="stylesheet"/>

@@ -92,18 +92,6 @@ path.link {
 	display:none; 
 }

-/* Sortable tables */
-table.sortable thead {
-	background-color:#eee;
-	color:#666666;
-	font-weight: bold;
-	cursor: pointer;
-}
-
-table.sortable th.sorttable_nosort {
-	cursor:default;
-}
-
 .hippo-action-icon {
 	cursor:pointer;
 }
@@ -0,0 +1,11 @@
+/* Sortable tables */
+table.sortable thead {
+	background-color:#eee;
+	color:#666666;
+	font-weight: bold;
+	cursor: pointer;
+}
+
+table.sortable th.sorttable_nosort {
+	cursor:default;
+}
@@ -1,18 +1,16 @@
 function showRequests(applicationName) {
-    $("#businessTransactions TBODY").empty();
-    $("#businessTransactionsDetail TBODY").empty();
-    
-    var businessTransactionCallback = function(data) {
-    	showTransactionList(data.businessTransactions);
-    };
-    
+	var app = applicationName.split("@");
    if (isQueryFromNow()) {
-        getLastBusinessTransactionsData(applicationName, getQueryPeriod(), businessTransactionCallback);
+    	var begin = getQueryStartTime();
+    	var end = getQueryEndTime();
+    	window.open("/getBusinessTransactionsData.hippo?application=" + app[0] + "&from=" + begin + "&to=" + end);
    } else {
-        getBusinessTransactionsData(applicationName, getQueryStartTime(), getQueryEndTime(), businessTransactionCallback);
+    	var period = getQueryPeriod();
+    	window.open("/getLastBusinessTransactionsData.hippo?application=" + app[0] + "&period=" + period);
    }
 }

+/*
 var transactionsCache;
 var prevDetaildRow;

@@ -74,13 +72,11 @@ function openTransactionDetails(index, row) {
        html.push(formatDate(new Date(traces[i].timestamp)));
        html.push("</a></td>");

-        /*
        html.push("<td><a href='#' onclick='openTrace(\"");
        html.push(traces[i].traceId);
        html.push("\", -1); return false;' style='cursor:pointer;'>");
        html.push(traces[i].traceId);
        html.push("</a></td>");
-        */

        html.push("<td sorttable_customkey='" + traces[i].executionTime + "'>");
        html.push(traces[i].executionTime);
@@ -89,4 +85,5 @@ function openTransactionDetails(index, row) {
        html.push("</tr>");
    }
    $("#businessTransactionsDetail TBODY").append(html.join(''));
-}
+}
+*/
@@ -41,16 +41,6 @@ function getRealtimeScatterData(application, begin, callback) {
 	d3.json("/getRealtimeScatterData.hippo?application=" + app[0] + "&from=" + begin + "&limit=5000", function(d) { callback(d); });
 }

-function getBusinessTransactionsData(application, begin, end, callback) {
-	var application = $("#application").val().split("@")[0];
-	d3.json("/getBusinessTransactionsData.hippo?application=" + app[0] + "&from=" + begin + "&to=" + end, function(d) { callback(d); });
-}
-
-function getLastBusinessTransactionsData(application, period, callback) {
-    var app = application.split("@");
-	d3.json("/getLastBusinessTransactionsData.hippo?application=" + app[0] + "&period=" + period, function(d) { callback(d); });
-}
-
 function getQueryPeriod() {
 	return $("#period").find("button.active").val().split(",") * 1000 * 60;
 }
@@ -9,6 +9,7 @@
    <link href="/common/css/bootstrap/bootstrap.css" rel="stylesheet">
    <link href="/common/css/bootstrap/bootstrap-responsive.css" rel="stylesheet"/>
    <link href="/common/css/hippo/hippo.css" rel="stylesheet"/>
+    <link href="/common/css/hippo/sorttable.css" rel="stylesheet"/>
    <link href="/common/css/hippo/scatter.css" rel="stylesheet"/>
    <link href="/common/css/datepicker.css" rel="stylesheet"/>
    <link href="/select2/select2-customized.css" rel="stylesheet"/>
@@ -191,6 +192,7 @@
 				</div>
 			</div>
 			
+			<!-- 
 			<ul class="nav nav-tabs" id="transactionTabs">
 				<li class="active">
 					<a href="#BusinessTransactionList" data-toggle="tab">Requests <i class="hippo-action-icon icon-resize-full" onclick="expandToNewWindow();"></i> <i class="hippo-action-icon icon-question-sign" onclick="help(2002);"></i></a>
@@ -217,9 +219,7 @@
 		                <tr>
 		                    <th>#</th>
 		                    <th class="sorttable_numeric">Time</th>
-		                    <!-- 
 		                    <th>TraceId</th>
-		                    -->
 		                    <th class="sorttable_numeric">Response Time (ms)</th>
 		                </tr>
 		                </thead>
@@ -228,6 +228,7 @@
 		            </table>
 				</div>
 			</div>
+			-->
 		</div>
    </div>
    
@@ -291,7 +292,6 @@ $(document).ready(function () {
    	}
    	
    	showServerMap(applicationName);
-    	showRequests(applicationName);
    	showResponseScatter(applicationName);
    }