From 0bdf7eaae44e485fb725e46bfff1cff8305a08ca Mon Sep 17 00:00:00 2001
From: Chisu Yu <puseori9th@gmail.com>
Date: Tue, 8 Oct 2013 07:44:29 +0000
Subject: [PATCH] =?UTF-8?q?[=EC=9C=A0=EC=B9=98=EC=88=98]=20[NOBTS]=20filte?=
 =?UTF-8?q?red=20map=20=EB=B6=84=ED=95=A0=20=EC=A1=B0=ED=9A=8C=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20UI=20=EC=B6=94=EA=B0=80.?=
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@2468 84d0f5b1-2673-498c-a247-62c4ff18d310
---
 .../webapp/scripts/directives/servermap.js    | 47 ++++++++++++++++++-
 src/main/webapp/views/filteredMap.html        |  7 +++
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/scripts/directives/servermap.js b/src/main/webapp/scripts/directives/servermap.js
index 36d4718c4..2a9d8fe1c 100644
--- a/src/main/webapp/scripts/directives/servermap.js
+++ b/src/main/webapp/scripts/directives/servermap.js
@@ -29,7 +29,8 @@ pinpointApp.constant('cfg', {
         }
     },
     FILTER_DELIMETER : "^",
-    FILTER_ENTRY_DELIMETER : "|"
+    FILTER_ENTRY_DELIMETER : "|",
+    FILTER_FETCH_LIMIT : 99
 });
 
 pinpointApp.directive('servermap', [ 'cfg', '$rootScope', '$templateCache', '$compile', '$timeout', function (cfg, $rootScope, $templateCache, $compile, $timeout) {
@@ -87,6 +88,47 @@ pinpointApp.directive('servermap', [ 'cfg', '$rootScope', '$templateCache', '$co
                 if (filterText) {
                     getFilteredServerMapData(query, function (query, result) {
                         serverMapCallback(query, result, mergeUnknowns, linkRouting, linkCurve);
+
+                        var DAY = 60 * 60 * 24 * 1000;
+                        var period = query.to - query.from;
+                        var fetchedPeriod = query.to - result.lastFetchedTimestamp;
+                        var ratio = Math.floor(fetchedPeriod / period * 100);
+                        var nextFetchFrom = result.lastFetchedTimestamp + 1;
+                        
+                        // TODO 대충 24시간으로 계산하나 걸치는 경우 체크가 필요할지도. 예: 22:00 ~ 03:00
+                        // TODO 그냥 날짜까지 보여줄까.
+                        var dateFormat = (period > DAY) ? "yyyy/MM/dd HH:mm:ss" : "HH:mm:ss"; 
+                        
+                        console.log("query", query);
+                        console.log("result", result);
+                        
+                        var strFrom = new Date(query.from).toString(dateFormat);
+                    	var strTo = new Date(query.to).toString(dateFormat);
+                    	var strOffset = new Date(result.lastFetchedTimestamp).toString(dateFormat);
+                        
+                    	$("#readProgress .bar").text("fetched " + strFrom + " ~ " + strTo + " , " + strOffset);
+                    	$("#readProgress .bar").css("width", ratio + "%");
+                    	
+                    	var fetchNext = function() {
+                    		// TODO next 조회 로직 추가 필요.
+                    		// TODO 새로 조회한 것과 기존에 조회된 것 머지 기능 추가 필요.
+                    		console.log("fetch more " + new Date(nextFetchFrom).toString("yyyy/MM/dd HH:mm:ss") + " ~ " + new Date(query.to).toString("yyyy/MM/dd HH:mm:ss"));
+                    	}
+                    	
+                    	var fetchDone = function() {
+                    		// TODO 조회가 완료되면 할 거 없음.
+                    		console.log("That's all.");
+                    	}
+                    	
+                    	// lastFetchedTimestamp + 1 ~ query.to까지 계속 조회하고.
+                    	// 조회된 데이터가 0개이면 모두 조회되었다고 판단해도 됨.
+                    	// lastFetchedTimestamp가 query.to하고 같으면 더 조회하지 않아도 됨.
+                    	var needMoreFetch = result.applicationMapData.nodeDataArray.length > 0;
+                    	needMoreFetch |= result.lastFetchedTimestamp == query.to;
+                    	
+                    	// TODO 밖으로 빼내서 핸들러 하나만 등록하도록 변경할 것.
+                    	$("#readProgress #fetchMore").unbind("click");
+                    	$("#readProgress #fetchMore").bind("click", (needMoreFetch) ? fetchNext : fetchDone);
                     });
                 } else {
                     getServerMapData2(query, function (query, result) {
@@ -132,7 +174,8 @@ pinpointApp.directive('servermap', [ 'cfg', '$rootScope', '$templateCache', '$co
                         serviceType: query.serviceType,
                         from: query.from,
                         to: query.to,
-                        filter: query.filter
+                        filter: query.filter,
+                        limit: cfg.FILTER_FETCH_LIMIT
                     },
                     success: function (result) {
                         callback(query, result);
diff --git a/src/main/webapp/views/filteredMap.html b/src/main/webapp/views/filteredMap.html
index 6ec1ef2f5..db7417b7e 100644
--- a/src/main/webapp/views/filteredMap.html
+++ b/src/main/webapp/views/filteredMap.html
@@ -4,6 +4,13 @@
 <!-- Add your site or application content here -->
 <div class="main-container">
     <div class="main" ng-class="main">
+		<div style="width:100%;" class="progress progress-info" id="readProgress">
+			<div class="bar" style="width: 0%">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>    
         <servermap></servermap>
     </div>
     <div class="sidebar" ng-class="sidebar">