Merge pull request #1800 from denzelsN/master

update time-slider ui at inspector.
pinpoint-apm · May 26, 2016 · df9a622 · df9a622
2 parents b474860 + 7f83452
commit df9a622
Show file tree

Hide file tree

Showing 15 changed files with 190 additions and 79 deletions.
diff --git a/web/src/main/webapp/components/time-slider/time-slider.handler.js b/web/src/main/webapp/components/time-slider/time-slider.handler.js
@@ -23,7 +23,10 @@
         return this._handleSrc.substring( 0 , lastIndex ) + "_down" + this._handleSrc.substring( lastIndex );
     };
     ts.Handler.prototype._addElements = function() {
-        this.handlerGrip = this.timeSlider.snap.image( this._handleSrc, -(consts.HANDLER_IMAGE_WIDTH / 2), -(consts.HANDLER_IMAGE_HEIGHT / 2), consts.HANDLER_IMAGE_WIDTH, consts.HANDLER_IMAGE_HEIGHT );
+        //this.handlerGrip = this.timeSlider.snap.image( this._handleSrc, -(consts.HANDLER_IMAGE_WIDTH / 2), -(consts.HANDLER_IMAGE_HEIGHT / 2), consts.HANDLER_IMAGE_WIDTH, consts.HANDLER_IMAGE_HEIGHT );
+		this.handlerGrip = this.timeSlider.snap.circle( 0, 3, 7 ).attr({
+			"filter": this.timeSlider.snap.filter( Snap.filter.shadow(0, 0, 4, "#000", .5))
+		});
         this.handlerGroup = this.group.g();
         this.handlerGroup.add(
             this.timeSlider.snap.line( 0, 0, 0, this.opt.height ),
@@ -48,11 +51,11 @@
             self.callbackDrag( newX );
         }, function(x, y, event) {
             event.stopPropagation();
-            self.handlerGrip.attr( "href", self._handleDownSrc );
+            //self.handlerGrip.attr( "href", self._handleDownSrc );
             self.callbackStart( x - self.opt.margin );
         }, function(event) {
             event.stopPropagation();
-            self.handlerGrip.attr( "href", self._handleSrc );
+            //self.handlerGrip.attr( "href", self._handleSrc );
             if ( self._previousX !== lastX && lastX !== -1 ) {
                 self.callbackEnd( true, lastX );
                 self._previousX = lastX;

diff --git a/web/src/main/webapp/components/time-slider/time-slider.js b/web/src/main/webapp/components/time-slider/time-slider.js
@@ -27,7 +27,7 @@
             // "maxSliderTimeSeries": 172800000,         // 2day
             "maxSelectionTimeSeries": 172800000,
             "headerTextTopPadding": 10,   // 상단 상태선과 시간 text의 간격
-            "selectionPointRadius": 5
+            "selectionPointRadius": 4
         };
         this.opt.minSliderTimeSeries = ( this.opt.xAxisTicks + 1 ) * 1000;
         var p;
@@ -67,6 +67,14 @@
             "height": contentZoneHeight,
             "duration": this.opt.duration
         });
+		this.oStateLine = new TimeSlider.StateLine( this, this.getGroup("state-line", TimeSlider.GROUP_TYPE.TOP_BASE, TimeSlider.oDrawOrder["state-line"]), {
+			"width": this.opt.width,
+			"duration": this.opt.duration,
+			"topLineY": this.opt.headerZoneHeight,
+			"thickness": this.opt.stateLineThickness,
+			"timeSeries": this.opt.timeSeries,
+			"bottomLineY": this.opt.height - this.opt.eventZoneHeight
+		} );
         this.oSelectionManager = new TimeSlider.SelectionManager( this, {
             "margin": this.opt.left,
             "height": this.opt.height,
@@ -84,14 +92,6 @@
             "startY": this.opt.headerZoneHeight,
             "duration": this.opt.duration
         });
-        this.oStateLine = new TimeSlider.StateLine( this, this.getGroup("state-line", TimeSlider.GROUP_TYPE.TOP_BASE, TimeSlider.oDrawOrder["state-line"]), {
-            "width": this.opt.width,
-            "duration": this.opt.duration,
-            "topLineY": this.opt.headerZoneHeight,
-            "thickness": this.opt.stateLineThickness,
-            "timeSeries": this.opt.timeSeries,
-            "bottomLineY": this.opt.height - this.opt.eventZoneHeight
-        } );
         this.oEvents = new TimeSlider.Events( this, this.getGroup("events", TimeSlider.GROUP_TYPE.BOTTOM_BASE, TimeSlider.oDrawOrder["events"]), {
             "duration": this.opt.duration
         } );
@@ -226,27 +226,27 @@
     };
     TimeSlider.oDrawOrder = {
         "background": 0,
+		"state-line": 3,
         "selection-zone": 5,
         "time-series-signboard": 7,
         "x-axis": 10,
         "events": 10,
         "time-signboard": 15,
         "selection-point": 15,
-        "state-line": 20,
         "left-handler": 25,
         "right-handler": 25,
         "guide": 30,
         "loading": 100
     };
     TimeSlider.EventColor = {
         "base": "rgba(187, 187, 187, .3)",
-        "10100": "#009E00",         //Agent connected
-        "10199": "#FAEBD7",            //Agent ping
-        "10200": "#D15260",            //Agent shutdown
-        "10201": "#E95C63",            //Agent unexpected shutdown
-        "10300": "#FF9D7B",            //Agent connection closed by server
-        "10301": "#F2F089",            //Agent connection unexpectedly closed by server
-        "20100": "#00F"             //thread dump
+        "10100": "rgba(0, 158, 0, .2 )",	//"#009E00",         //Agent connected
+        "10199": "rgba(250, 235, 215, .7)",	//"#FAEBD7",         //Agent ping
+        "10200": "rgba(209, 82, 96, .7)",	//"#D15260",         //Agent shutdown
+        "10201": "rgba(233, 92, 99, .7)",	//"#E95C63",         //Agent unexpected shutdown
+        "10300": "rgba(255, 157, 123, .7)", //"#FF9D7B",         //Agent connection closed by server
+        "10301": "rgba(242, 240, 137, .7)",	//"#F2F089",         //Agent connection unexpectedly closed by server
+        "20100": "rgba(0, 0, 255, .5)"		//"#00F"             //thread dump
     };
     w.TimeSlider = TimeSlider;
 })(window, jQuery);
diff --git a/web/src/main/webapp/components/time-slider/time-slider.selection-point.js b/web/src/main/webapp/components/time-slider/time-slider.selection-point.js
@@ -11,7 +11,7 @@
         this.group.add(
             this.timeSlider.snap.line( 0, 0, 0, this.opt.height ),
             this.timeSlider.snap.circle( 0, this.opt.height / 2, this.opt.radius ).attr({
-                filter: this.timeSlider.snap.filter( Snap.filter.shadow(0, 0, 2, "#000", 0.3))
+                filter: this.timeSlider.snap.filter( Snap.filter.shadow(0, 0, 4, "#FF0", 1))
             })
         );
     };

diff --git a/web/src/main/webapp/components/time-slider/time-slider.state-line.js b/web/src/main/webapp/components/time-slider/time-slider.state-line.js
@@ -24,8 +24,13 @@
     };
     ts.StateLine.prototype._addBaseLine = function() {
         this._baseColor = TimeSlider.EventColor["base"];
-        this._aBaseLine = [ this._makeLine( 0, this.opt.width, this.opt.topLineY, "base", "base-" + Date.now() ), this._makeLine( 0, this.opt.width, this.opt.bottomLineY, "base", "base-" + Date.now() ) ];
-        this.group.add( this._aBaseLine[0], this._aBaseLine[1] );
+        this._aBaseLine = [
+			this._makeRect( 0, this.opt.width, this.opt.topLineY, this.opt.bottomLineY - this.opt.topLineY, "base", "base-" + Date.now() )
+			// this._makeLine( 0, this.opt.width, this.opt.topLineY, "base", "base-" + Date.now() )//,
+			// this._makeLine( 0, this.opt.width, this.opt.bottomLineY, "base", "base-" + Date.now() )
+		];
+        //this.group.add( this._aBaseLine[0], this._aBaseLine[1] );
+		this.group.add( this._aBaseLine[0] );
     };
     ts.StateLine.prototype._addEventElements = function( ) {
         var len = this._oEventData.count();
@@ -34,6 +39,7 @@
         }
     };
     ts.StateLine.prototype._addEventElement = function( oEvent ) {
+		return;
         if ( typeof oEvent.durationStartTimestamp !== "undefined" ) {
             if ( this.timeSlider.oPositionManager.isInSliderTimeSeries( oEvent.durationStartTimestamp ) === false && this.timeSlider.oPositionManager.isInSliderTimeSeries( oEvent.durationEndTimestamp ) === false ) return;
             this._hasDurationData = true;
@@ -49,12 +55,26 @@
     };
     ts.StateLine.prototype._addLine = function( x, x2, oEvent ) {
         var lineID = this._makeID( oEvent );
-        var elLineTop = this._makeLine( x, x2, this.opt.topLineY, oEvent.eventTypeCode, lineID );
-        var elLineBottom = this._makeLine( x, x2, this.opt.bottomLineY, oEvent.eventTypeCode, lineID );
-        this._oLineElementHash[lineID] = [ elLineTop, elLineBottom ];
-        this.group.add( elLineTop, elLineBottom );
-    };
+		var elRect = this._makeRect( x, x2, this.opt.topLineY, this.opt.bottomLineY - this.opt.topLineY, oEvent.eventTypeCode, lineID );
+		// var elLineTop = this._makeLine( x, x2, this.opt.topLineY, oEvent.eventTypeCode, lineID );
+        //var elLineBottom = this._makeLine( x, x2, this.opt.bottomLineY, oEvent.eventTypeCode, lineID );
+        //this._oLineElementHash[lineID] = [ elLineTop, elLineBottom ];
+        //this.group.add( elLineTop, elLineBottom );
+		// this._oLineElementHash[lineID] = [ elLineTop ];
+		// this.group.add( elLineTop );
+		this._oLineElementHash[lineID] = [ elRect ];
+		this.group.add( elRect );
+    };
+	ts.StateLine.prototype._makeRect = function( x, x2, y, y2, eventType, id ) {
+		console.log( x, x2, y, y2, eventType );
+		return  this.timeSlider.snap.rect( x, y, x2, y2 ).attr({
+			//"filter": this._filterShadow,
+			"fill": TimeSlider.EventColor[eventType],
+			"data-id": id
+		});
+	};
     ts.StateLine.prototype._makeLine = function( x, x2, y, eventType, id ) {
+		console.log( x, x2, y );
         return  this.timeSlider.snap.line( x, y, x2, y ).attr({
             //"filter": this._filterShadow,
             "stroke": TimeSlider.EventColor[eventType],
@@ -82,21 +102,23 @@
         for( var p in this._oLineElementHash ) {
             var aLine = this._oLineElementHash[p];
             aLine[0].remove();
-            aLine[1].remove();
+            //aLine[1].remove();
         }
         this._oLineElementHash = {};
     };
     ts.StateLine.prototype.setDefaultStateLineColor = function( color ) {
         this._baseColor = color;
         if ( this._hasDurationData === true ) return;
         this._aBaseLine.forEach(function( elLine ) {
-            elLine.attr("stroke", color);
+            //elLine.attr("stroke", color);
+			elLine.attr("fill", color);
         });
     };
     ts.StateLine.prototype._resetBaseLineColor = function() {
         var self = this;
         this._aBaseLine.forEach(function( elLine ) {
-            elLine.attr("stroke", self._hasDurationData === true ? TimeSlider.EventColor["base"] : self._baseColor );
+            //elLine.attr("stroke", self._hasDurationData === true ? TimeSlider.EventColor["base"] : self._baseColor );
+			elLine.attr("fill", self._hasDurationData === true ? TimeSlider.EventColor["base"] : self._baseColor );
         });
     };
     ts.StateLine.prototype.reset = function() {
@@ -108,10 +130,14 @@
             if ( oPM.isInSliderTimeSeries( oEvent.durationStartTimestamp ) || oPM.isInSliderTimeSeries( oEvent.durationEndTimestamp ) ) {
                 aLine.forEach(function( elLine ) {
                     self.show( elLine );
-                    elLine.animate({
-                        "x1": oPM.getPositionFromTime( oEvent.durationStartTimestamp ),
-                        "x2": self._getX2( oEvent )
-                    }, self.opt.duration);
+                    // elLine.animate({
+                    //     "x1": oPM.getPositionFromTime( oEvent.durationStartTimestamp ),
+                    //     "x2": self._getX2( oEvent )
+                    // }, self.opt.duration);
+					elLine.animate({
+					    "x": oPM.getPositionFromTime( oEvent.durationStartTimestamp ),
+					    "width": self._getX2( oEvent ) - oPM.getPositionFromTime( oEvent.durationStartTimestamp )
+					}, self.opt.duration);
                 });
             } else {
                 aLine.forEach(function( elLine ) {
@@ -121,7 +147,8 @@
         }
         this._aBaseLine.forEach(function( elBase ) {
             elBase.animate({
-                "x2": oPM.getSliderEndPosition()
+                // "x2": oPM.getSliderEndPosition()
+				"width": oPM.getSliderEndPosition()
             }, self.opt.duration);
         });
         this._resetBaseLineColor();

diff --git a/web/src/main/webapp/components/time-slider/time-slider.time-signboard.js b/web/src/main/webapp/components/time-slider/time-slider.time-signboard.js
@@ -5,7 +5,7 @@
         this.group = svgGroup;
         this.opt = options;
         this._textMaxWidth = 100;
-        this._xPadding = 2;
+        this._xPadding = 10;
         this._addElements();
     };
     ts.TimeSignboard.prototype._addElements = function() {

diff --git a/web/src/main/webapp/features/agentInfo/agent-info.directive.js b/web/src/main/webapp/features/agentInfo/agent-info.directive.js
@@ -257,9 +257,16 @@
 						getEventList( scope.agent.agentId, aRange );
 					};
 
-					scope.toggleShowDetail = function() {
+					scope.toggleShowDetail = function( $event ) {
 						analyticsService.send( analyticsService.CONST.INSPECTOR, analyticsService.CONST.CLK_SHOW_SERVER_TYPE_DETAIL );
 						scope.showDetail = !scope.showDetail;
+						if ( scope.showDetail === true ) {
+							$(".detailIndicator").animate({
+								"left": $( $event.currentTarget ).position().left
+							});
+						} else {
+							$(".detailIndicator").css("left", "0px");
+						}
 					};
 	                scope.hasDuplicate = function( libName, index ) {
 	                	var len = scope.currentServiceInfo.serviceLibs.length;

diff --git a/web/src/main/webapp/features/agentInfo/agentInfoMain.html b/web/src/main/webapp/features/agentInfo/agentInfoMain.html
@@ -5,20 +5,26 @@
     <div ng-include=" 'loading' "></div>
     <div class="slider">
 		<div class="slider-command">
-			<button type="button" class="btn btn-default btn-success btn-sm" ng-click="moveHead()" style="margin-right:22px;"><span class="glyphicon glyphicon-fast-forward"></span></button>
-			<button type="button" class="btn btn-default btn-success btn-sm" ng-click="moveNext()"><span class="glyphicon glyphicon-forward"></span></button>
-			<button type="button" class="btn btn-default btn-success btn-sm" ng-click="movePrev()"><span class="glyphicon glyphicon-backward"></span></button>
-
-			<button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomOutTimeSlider()" style="margin-right:4px;"><span class="glyphicon glyphicon-minus"></span></button>
-			<button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomInTimeSlider()"><span class="glyphicon glyphicon-plus"></span></button>
+			<div class="btn-group" style="margin-right:22px">
+				<button type="button" class="btn btn-default btn-success btn-sm" ng-click="movePrev()"><span class="glyphicon glyphicon-backward"></span></button>
+				<button type="button" class="btn btn-default btn-success btn-sm" ng-click="moveNext()"><span class="glyphicon glyphicon-forward"></span></button>
+				<button type="button" class="btn btn-default btn-success btn-sm" ng-click="moveHead()"><span class="glyphicon glyphicon-fast-forward"></span></button>
+			</div>
+			<div class="btn-group" style="margin-right:4px;">
+				<button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomInTimeSlider()"><span class="glyphicon glyphicon-plus"></span></button>
+				<button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomOutTimeSlider()"><span class="glyphicon glyphicon-minus"></span></button>
+			</div>
 
-			<div class="datetimepicker input-group input-group-sm date" style="width:189px;margin-right:4px;float:right">
-				 <input id="target-picker" type="text" class="form-control">
+			<div class="datetimepicker input-group input-group-sm date" style="width:189px;margin-right:4px;">
 				 <span class="input-group-btn">
+					 <button class="btn btn-default btn-success"><span class="current-point"></span></button>
+				 </span>
+				 <input id="target-picker" type="text" class="form-control">
+				 <!--span class="input-group-btn">
 					<button class="btn btn-default btn-success" ng-click="selectTime()">
 						<span class="glyphicon glyphicon-search"></span>
 					</button>
-				 </span>
+				 </span-->
 			</div>
 		</div>
 		<span>Timeline</span>
@@ -48,7 +54,7 @@ <h3 class="panel-title">{{eventInfo.eventTypeDesc}} - Event <span class="glyphic
         </div>
     </div>
     <div>
-        <h3 style="text-align:right"><span style="font-size:16px;" class="label label-default">{{formatDate(selectTime)}}</span></h3>
+        <!--h3 style="text-align:right"><span style="font-size:16px;font-weight:normal;border-radius:0px" class="label label-default">{{formatDate(selectTime)}}</span></h3-->
         <div class="row">
             <div class="col-md-12">
                 <table class="table table-condensed" style="font-size:12px;margin-bottom:0px">
@@ -97,7 +103,7 @@ <h3 style="text-align:right"><span style="font-size:16px;" class="label label-de
                             {{agent.serviceType}}
                             <span ng-show="agent.serverMetaData">
                                 <span ng-show="agent.serverMetaData.serverInfo.length">&nbsp;({{agent.serverMetaData.serverInfo}})&nbsp;</span>
-                                <button type="button" class="btn btn-default btn-xs" ng-click="toggleShowDetail()" ng-show="agent.serverMetaData.vmArgs.length || agent.serverMetaData.serviceInfos.length">Detail</button>
+                                <button type="button" class="btn btn-default btn-xs" ng-click="toggleShowDetail($event)" ng-show="agent.serverMetaData.vmArgs.length || agent.serverMetaData.serviceInfos.length">Detail</button>
                             </span>
                         </td>
                         <td class="text-right"><strong>End Status</strong></td>
@@ -108,7 +114,7 @@ <h3 style="text-align:right"><span style="font-size:16px;" class="label label-de
             </div>
         </div>
         <div ng-show="showDetail" style="margin-top:4px;">
-			<div style="position:relative;width:0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #BBB5B5;"></div>
+			<div class="detailIndicator" style="position:relative;width:0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #BBB5B5;"></div>
             <div class="row">
                 <div class="col-md-12">
                     <table class="table table-condensed table-bordered" style="font-size:12px;margin-bottom:20px;">

diff --git a/web/src/main/webapp/features/serverList/server-list.directive.js b/web/src/main/webapp/features/serverList/server-list.directive.js
@@ -22,6 +22,7 @@
 					var $element = $(element);
 					scope.bIsNode = true;
 					scope.hasScatter = false;
+					scope.selectedAgent = "";
 					/*
 
 					tooltipService.init( "serverList" );
@@ -34,6 +35,7 @@
 						});
 					};
 					var showChart = function( instanceName, histogram, timeSeriesHistogram ) {
+						scope.selectedAgent = instanceName;
 						scope.$broadcast('changedCurrentAgent.forServerList', instanceName );
 						if ( bInitialized ) {
 							scope.$broadcast('responseTimeChartDirective.updateData.forServerList', histogram);

diff --git a/web/src/main/webapp/features/serverList/serverList.html b/web/src/main/webapp/features/serverList/serverList.html
@@ -39,6 +39,8 @@
 	</div>
 	<div class="server-list-chart">
 		<div class="chart-header">
+			<span class="title">Selected Agent ></span>
+			<span class="selected-agent">{{selectedAgent}}</span>
 			<button ng-click="hideLayer()" class="btn btn-sm"><span class="glyphicon glyphicon-remove"></span></button>
 		</div>
 		<scatter-directive ng-show="hasScatter" namespace="forServerList"></scatter-directive>