diff --git a/web/src/main/webapp/components/time-slider/time-slider.event-data.js b/web/src/main/webapp/components/time-slider/time-slider.event-data.js deleted file mode 100644 index 28f8351fb..000000000 --- a/web/src/main/webapp/components/time-slider/time-slider.event-data.js +++ /dev/null @@ -1,104 +0,0 @@ -(function(w, $) { - var ts = w.TimeSlider; - ts.EventData = function( aRawData ) { - this._init( aRawData ); - }; - ts.EventData.prototype._init = function( aRawData ) { - var self = this; - this._aRawData = aRawData; - this._oHash = {}; - this._aRawData.forEach(function( o ) { - self._oHash[self.makeID(o)] = o; - }); - }; - ts.EventData.prototype.makeID = function( oEvent ) { - return oEvent.eventTypeCode + "-" + oEvent.eventTimestamp; - }; - ts.EventData.prototype.count = function() { - return this._aRawData.length; - }; - ts.EventData.prototype.getDataByIndex = function( index ) { - return this._aRawData[index]; - }; - ts.EventData.prototype.getDataByKey = function( key ) { - return this._oHash[key]; - }; - ts.EventData.prototype.emptyData = function() { - this._aRawData = []; - this._oHash = {}; - }; - ts.EventData.prototype.addData = function( aNewData ) { - if ( aNewData.length === 0 ) return; - - var i, j; - var beforeBoundary = this._getBeforeDataBoundary( aNewData ); - for ( i = beforeBoundary ; i >= 0 ; i-- ) { - this._aRawData.unshift( aNewData[i] ); - this._oHash[this.makeID(aNewData[i])] = aNewData[i]; - } - - var afterBoundary = this._getAfterDataBoundary( aNewData, beforeBoundary ); - for ( i = afterBoundary ; i < aNewData.length ; i++ ) { - this._aRawData.push( aNewData[i] ); - this._oHash[this.makeID(aNewData[i])] = aNewData[i]; - } - - beforeBoundary = beforeBoundary === -1 ? 0 : beforeBoundary + 1; - afterBoundary = afterBoundary === Number.MAX_SAFE_INTEGER ? aNewData.length - 1 : afterBoundary - 1; - - var skip = beforeBoundary; - if ( afterBoundary > beforeBoundary ) { - for( i = beforeBoundary ; i < this._aRawData.length ; i++ ) { - var rawTimestamp = this._aRawData[i].eventTimestamp; - for( j = skip; j < aNewData.length ; j++ ) { - var oNewEventData = aNewData[j]; - if ( oNewEventData.eventTimestamp < rawTimestamp ) { - this._aRawData.splice( i, 0, oNewEventData ); - this._oHash[this.makeID(oNewEventData)] = oNewEventData; - i++; - skip = j + 1; - } else if ( oNewEventData.eventTimestamp === rawTimestamp ) { - skip = j + 1; - break; - } - } - if ( skip === aNewData.length ) break; - } - } - }; - ts.EventData.prototype._getBeforeDataBoundary = function( aNewData ) { - var boundary = -1; - if ( this._aRawData.length === 0 ) { - boundary = aNewData.length - 1; - } else { - var startTime = this._aRawData[0].eventTimestamp; - var len = aNewData.length; - for ( var i = 0 ; i < len ; i++ ) { - var time = aNewData[i].eventTimestamp; - if ( time < startTime ) { - boundary = i; - } else { - break; - } - } - } - return boundary; - }; - ts.EventData.prototype._getAfterDataBoundary = function( aNewData, skipIndex ) { - var boundary = Number.MAX_SAFE_INTEGER; - var startIndex = skipIndex + 1; - var len = aNewData.length; - if ( len > startIndex ) { - var endTime = this._aRawData[this._aRawData.length - 1].eventTimestamp; - for ( var i = startIndex ; i < len ; i++ ) { - var time = aNewData[i].eventTimestamp; - if ( time > endTime ) { - boundary = i; - break; - } - } - } - return boundary; - }; - -})(window, jQuery); diff --git a/web/src/main/webapp/components/time-slider/time-slider.events.js b/web/src/main/webapp/components/time-slider/time-slider.events.js index 533bb42f9..2006f4032 100644 --- a/web/src/main/webapp/components/time-slider/time-slider.events.js +++ b/web/src/main/webapp/components/time-slider/time-slider.events.js @@ -1,20 +1,16 @@ (function(w, $) { - var consts = { - ID_POSTFIX: "+event-circle", - ID_SPLITER: "+" - }; var ts = w.TimeSlider; ts.Events = function( timeSlider, svgGroup, options ) { this.timeSlider = timeSlider; this.group = svgGroup; - this._oEventData = timeSlider.oEventData; + this._oTimelineData = timeSlider.oTimelineData; this._init(options); this._addEventElements(); this._addEvents(); }; ts.Events.prototype._init = function( options ) { - this._oEventGroupElementHash = {}; + this._aEventGroupElement = []; this.opt = { "y": 4, "barLength": 4, @@ -27,40 +23,35 @@ this._filterShadow = this.timeSlider.snap.filter( Snap.filter.shadow(1, 1, 1, "#000", 0.3)); }; ts.Events.prototype._addEventElements = function() { - var len = this._oEventData.count(); + var len = this._oTimelineData.eventCount(); for ( var i = 0 ; i < len ; i++ ) { - this._addEventElement( this._oEventData.getDataByIndex(i), true ); + this._addEventElement( this._oTimelineData.getEventDataByIndex(i), i ); } }; - ts.Events.prototype._addEventElement = function( oEvent, bAppend ) { - var el = this._makeElement( oEvent ); - this.group[bAppend ? "append": "prepend"]( el ); - if ( this.timeSlider.oPositionManager.isInSliderTimeSeries( oEvent.eventTimestamp ) === false ) { - this.hide( el ); - } + ts.Events.prototype._addEventElement = function( oEvent, index ) { + var el = this._makeElement( oEvent, index ); + this.group.append( el ); return el; }; - ts.Events.prototype._makeID = function( oEvent ) { - return this._oEventData.makeID( oEvent ) + consts.ID_POSTFIX; - }; - ts.Events.prototype._makeElement = function( oEvent ) { + ts.Events.prototype._makeElement = function( oEvent, index ) { var opt = this.opt; - var time = oEvent.eventTimestamp; - var groupID = this._makeID( oEvent ); + var time = oEvent.startTimestamp + ( oEvent.endTimestamp - oEvent.startTimestamp ) / 2; var elEventGroup = this.group.g().attr({ - "data-id": groupID, + "data-id": index, "data-time": time, "transform": "translate(" + this.timeSlider.oPositionManager.getPositionFromTime( time ) + ",0)" }).add( this.timeSlider.snap.line( 0, opt.y, 0, opt.y + opt.barLength ), this.timeSlider.snap.circle( 0, opt.y + opt.circleRadius + opt.gapBarNCircle + opt.barLength, opt.circleRadius ).attr({ - "fill": TimeSlider.EventColor[oEvent.eventTypeCode], + // "stroke": "#000",//TimeSlider.StatusColor[oEvent.value], + // "stroke-width": "2", + "fill": "#000", "class": "event", "filter": this._filterShadow, "data-time": time }) ); - this._oEventGroupElementHash[groupID] = elEventGroup; + this._aEventGroupElement.push(elEventGroup); return elEventGroup; }; ts.Events.prototype._addEvents = function() { @@ -76,74 +67,50 @@ }); }; ts.Events.prototype._fireEvent = function( eventType, event, x, y ) { - this.timeSlider.fireEvent(eventType, [x, y, this._oEventData.getDataByKey( event.srcElement.parentNode.getAttribute("data-id").split(consts.ID_SPLITER)[0] )] ); + this.timeSlider.fireEvent(eventType, [x, y, this._oTimelineData.getEventDataByIndex( parseInt(event.srcElement.parentNode.getAttribute("data-id")) )] ); }; ts.Events.prototype.reset = function() { - var self = this; - for ( var p in this._oEventGroupElementHash ) { - var elGroupEvent = this._oEventGroupElementHash[p]; - var time = this._oEventData.getDataByKey(p.split(consts.ID_SPLITER)[0]).eventTimestamp; + var oldLen = this._aEventGroupElement.length; + var newLen = this._oTimelineData.eventCount(); - if ( self.timeSlider.oPositionManager.isInSliderTimeSeries( time ) ) { - self.show( elGroupEvent ); - (function( el, x ) { - el.animate({ - "transform": "translate(" + x + ",0)" - }, self.opt.duration); - })(elGroupEvent, this.timeSlider.oPositionManager.getPositionFromTime( time )); - } else { - (function( el, x ) { - el.animate({ - "transform": "translate(" + x + ",0)" - }, self.opt.duration, function() { - self.hide( el ); - }); - })(elGroupEvent, self.timeSlider.oPositionManager.isBeforeSliderStartTime( time ) ? 0 : self.timeSlider.oPositionManager.getSliderEndPosition() ); - } - } + if ( oldLen === newLen ) { + for( var i = 0 ; i < newLen ; i++ ) { + this.reposition(this._aEventGroupElement[i], i); + } + } else if ( oldLen > newLen ) { + for( var i = newLen ; i < oldLen ; i++ ) { + this.hide( this._aEventGroupElement[i] ); + } + for( var i = 0 ; i < newLen ; i++ ) { + this.reposition(this._aEventGroupElement[i], i); + } + } else { // oldLen < newLen + for( var i = 0 ; i < oldLen ; i++ ) { + this.reposition(this._aEventGroupElement[i], i); + } + for( var i = oldLen ; i < newLen ; i++ ) { + this._addEventElement( this._oTimelineData.getEventDataByIndex(i), i ); + } + } }; + ts.Events.prototype.reposition = function( elEventGroup, index ) { + var oEvent = this._oTimelineData.getEventDataByIndex(index); + var time = oEvent.startTimestamp + ( oEvent.endTimestamp - oEvent.startTimestamp ) / 2; + var x = this.timeSlider.oPositionManager.getPositionFromTime( time ); + this.show(elEventGroup); + elEventGroup.animate({ + "transform": "translate(" + x + ",0)" + }, this.opt.duration); + }; ts.Events.prototype.changeData = function() { - var aGroupElements = this.group.selectAll("g"); - if ( aGroupElements.length === 0 ) { - this._addEventElements(); - return; - } - var i, j, oEvent, skip = 0, lenData = this._oEventData.count(), lenElements = aGroupElements.length; - var lastElement = aGroupElements[lenElements - 1]; - - for( i = 0 ; i < lenElements ; i++ ) { - var el = aGroupElements[i]; - var timestamp = parseInt( el.attr("data-time") ); - - for( j = skip ; j < lenData ; j++ ) { - oEvent = this._oEventData.getDataByIndex(j); - if ( oEvent.eventTimestamp < timestamp ) { - el.before( this._makeElement( oEvent ) ); - skip = j; - } else if ( oEvent.eventTimestamp === timestamp ) { - skip = j + 1; - lastElement = el; - break; - } else { - skip = j; - lastElement = el; - break; - } - } - } - for( skip ; skip < lenData ; skip++ ) { - oEvent = this._oEventData.getDataByIndex(skip); - var newEl = this._makeElement( oEvent ); - lastElement.after( newEl ); - lastElement = newEl; - } + this.emptyData(); this.reset(); }; ts.Events.prototype.emptyData = function() { - for ( var p in this._oEventGroupElementHash ) { - this._oEventGroupElementHash[p].remove(); - } - this._oEventGroupElementHash = {}; + var self = this; + this._aEventGroupElement.forEach(function(el) { + self.hide(el); + }); }; ts.Events.prototype.show = function( el ) { el.attr("display", "block"); diff --git a/web/src/main/webapp/components/time-slider/time-slider.js b/web/src/main/webapp/components/time-slider/time-slider.js index 016cdedc2..5d8ec24ea 100644 --- a/web/src/main/webapp/components/time-slider/time-slider.js +++ b/web/src/main/webapp/components/time-slider/time-slider.js @@ -18,22 +18,21 @@ "changeSelectionZone": [] }; this.opt = { - "duration": 300, + "duration": 0, "xAxisTicks": 5, "eventZoneHeight": 30, // 하단 이벤트 영역의 height "headerZoneHeight": 20, // 상단 시간 표시영역의 height "stateLineThickness": 4, // 상태선의 두께 - "minSliderTimeSeries": 6000, // 6sec + "minSliderTimeSeries": 6000, // 6sec "maxSelectionTimeSeries": TimeSlider.MAX_TIME_RANGE, // 7day "headerTextTopPadding": 10, // 상단 상태선과 시간 text의 간격 "selectionPointRadius": 4 }; this.opt.minSliderTimeSeries = ( this.opt.xAxisTicks + 1 ) * 1000; - var p; - for( p in options ) { + for( var p in options ) { this.opt[p] = options[p]; } - this.oEventData = new TimeSlider.EventData( this.opt.eventData || [] ); + this.oTimelineData = new TimeSlider.TimelineData( this.opt.timelineData || {} ); this._checkOffset(); }; TimeSlider.prototype._initControlClass = function() { @@ -49,10 +48,6 @@ }); var contentZoneHeight = this.opt.height - this.opt.headerZoneHeight - this.opt.eventZoneHeight; - // this.oTimeSeriesSignboard = new TimeSlider.TimeSeriesSignboard( this, this.getGroup("time-series-signboard", TimeSlider.GROUP_TYPE.CONTENT_BASE, TimeSlider.oDrawOrder["time-series-signboard"]), { - // "height": contentZoneHeight, - // "duration": this.opt.duration - // }); this.oLoading = new TimeSlider.LoadingIndicator( this, this.getGroup("loading", TimeSlider.GROUP_TYPE.TOP_BASE, TimeSlider.oDrawOrder["loading"]), { "width": this.opt.width, "height": this.opt.height, @@ -166,9 +161,9 @@ this._aListener[eventType].push( listener ); return this; }; - TimeSlider.prototype.addEventData = function( aNewData ) { + TimeSlider.prototype.addData = function( oNewData ) { this.oLoading.show(); - this.oEventData.addData( aNewData ); + this.oTimelineData.addData( oNewData ); this.oEvents.changeData(); this.oStateLine.changeData(); this.oLoading.hide(); @@ -227,7 +222,7 @@ }; TimeSlider.prototype.emptyData = function() { this.oLoading.show(); - this.oEventData.emptyData(); + this.oTimelineData.emptyData(); this.oEvents.emptyData(); this.oStateLine.emptyData(); this.oLoading.hide(); @@ -255,25 +250,12 @@ "guide": 30, "loading": 100 }; - TimeSlider.EventColor = { - "base": "rgba(187, 187, 187, .3)", - "10100": "rgba(0, 158, 0, .4 )", //"#009E00", //Agent connected <-> shutdown - "10199": "rgba(250, 235, 215, .7)", //"#FAEBD7", //Agent ping --- - "10200": "rgba(209, 82, 96, .7)", //"#D15260", //Agent shutdown <-> connect - "10201": "rgba(233, 92, 99, .7)", //"#E95C63", //Agent unexpected shutdown <-> connect - "10300": "rgba(255, 157, 123, .7)", //"#FF9D7B", //Agent connection closed by server <-> connect - "10301": "rgba(242, 240, 137, .7)", //"#F2F089", //Agent connection unexpectedly closed by server <-> connect - "20100": "rgba(0, 0, 255, .5)" //"#00F" //thread dump - }; - TimeSlider.EmptyEventColor = { - "10100": TimeSlider.EventColor["10200"], - "10200": TimeSlider.EventColor["10100"], - "10201": TimeSlider.EventColor["10100"], - "10300": TimeSlider.EventColor["10100"], - "10301": TimeSlider.EventColor["10100"] + TimeSlider.StatusColor = { + "BASE": "rgba(187, 187, 187, .3)", + "UNKNOWN": "rgba(220, 214, 214, .8)", + "RUNNING": "rgba(0, 158, 0, .4 )", + "SHUTDOWN": "rgba(209, 82, 96, .7)" }; - TimeSlider.GREEN = "10100"; - TimeSlider.RED = "10200"; TimeSlider.MAX_TIME_RANGE = 604800000; w.TimeSlider = TimeSlider; })(window, jQuery); diff --git a/web/src/main/webapp/components/time-slider/time-slider.loading-indicator.js b/web/src/main/webapp/components/time-slider/time-slider.loading-indicator.js index c0bb99d0f..78853fa1a 100644 --- a/web/src/main/webapp/components/time-slider/time-slider.loading-indicator.js +++ b/web/src/main/webapp/components/time-slider/time-slider.loading-indicator.js @@ -12,7 +12,6 @@ this.show(); }; ts.LoadingIndicator.prototype._addElements = function() { - var size = 30; var halfSize = consts.SIZE / 2; var x = this.opt.width / 2 - halfSize; var y = this.opt.height / 2 - halfSize; diff --git a/web/src/main/webapp/components/time-slider/time-slider.selection-manager.js b/web/src/main/webapp/components/time-slider/time-slider.selection-manager.js index f3d080abf..ae22c3908 100644 --- a/web/src/main/webapp/components/time-slider/time-slider.selection-manager.js +++ b/web/src/main/webapp/components/time-slider/time-slider.selection-manager.js @@ -13,7 +13,7 @@ "left": aHandlerPosition[0], "width": aHandlerPosition[1] - aHandlerPosition[0], "height": this.opt.contentZoneHeight, - "duration": 50//this.opt.duration + "duration": this.opt.duration }); this.oSelectionPoint = new TimeSlider.SelectionPoint( this.timeSlider, this.timeSlider.getGroup("selection-point", TimeSlider.GROUP_TYPE.CONTENT_BASE, TimeSlider.oDrawOrder["selection-point"]), { "y": this.opt.headerZoneHeight, @@ -29,16 +29,18 @@ "zone": [0, aHandlerPosition[1]], "height": this.opt.contentZoneHeight, "margin": this.opt.margin, - "duration": 50,//this.opt.duration + "duration": this.opt.duration, "handleSrc": this.opt.handleSrc }, function( x ) { + self.oLeftTimeSignboard.onDragStart( x ); }, function( x ) { + self.oSelectionZone.onDragXStart(x); self.oLeftTimeSignboard.onDrag( x ); }, function( bIsDraged, x ) { self.oLeftTimeSignboard.onDragEnd(); if ( bIsDraged ) { - self.moveLeftHandler( x ); + self.movedLeftHandler( x ); } }); this.oRightHandler = new TimeSlider.Handler( this.timeSlider, this.timeSlider.getGroup("right-handler", TimeSlider.GROUP_TYPE.CONTENT_BASE, TimeSlider.oDrawOrder["right-handler"]), { @@ -46,16 +48,17 @@ "zone": [ aHandlerPosition[0], this.timeSlider.oPositionManager.getSliderEndPosition() ], "height": this.opt.contentZoneHeight, "margin": this.opt.margin, - "duration": 0,//this.opt.duration + "duration": this.opt.duration, "handleSrc": this.opt.handleSrc }, function( x ) { self.oRightTimeSignboard.onDragStart( x ); }, function( x ) { + self.oSelectionZone.onDragXEnd(x); self.oRightTimeSignboard.onDrag( x ); }, function( bIsDraged, x ) { self.oRightTimeSignboard.onDragEnd(); if ( bIsDraged ) { - self.moveRightHandler( x ); + self.movedRightHandler( x ); } }); this.oLeftTimeSignboard = new TimeSlider.TimeSignboard( this.timeSlider, this.timeSlider.getGroup("time-left-signboard", TimeSlider.GROUP_TYPE.CONTENT_BASE, TimeSlider.oDrawOrder["time-signboard"]), { @@ -67,12 +70,17 @@ "direction": "right" }); }; - ts.SelectionManager.prototype.moveLeftHandler = function( x ) { + ts.SelectionManager.prototype.movedLeftHandler = function( x ) { var aCurrentSelectionTimeSeries = this.timeSlider.oPositionManager.getSelectionTimeSeries(); var newLeftTime = this.timeSlider.oPositionManager.getTimeFromPosition( x ); if ( this.timeSlider.oPositionManager.isInMaxSelectionTimeSeries( newLeftTime, aCurrentSelectionTimeSeries[1] ) ) { this.oRightHandler.setZone( x, this.timeSlider.oPositionManager.getSliderEndPosition() ); this.timeSlider.oPositionManager.setSelectionStartPosition( x ); + + if ( this.timeSlider.oPositionManager.isInSelectionZone() === false ) { + this.oSelectionPoint.onMouseClick( x ); + this.timeSlider.fireEvent( "selectTime", newLeftTime ); + } } else { var aNewSelectionTimeSeries = this.timeSlider.oPositionManager.getNewSelectionTimeSeriesFromStart( newLeftTime ); var newRightX = this.timeSlider.oPositionManager.getPositionFromTime( aNewSelectionTimeSeries[1] ); @@ -83,21 +91,26 @@ this.oLeftHandler.setZone( 0, newRightX ); this.timeSlider.oPositionManager.setSelectionEndPosition( newRightX ); - if ( this.timeSlider.oPositionManager.isInSelectionZone() === false ) { - this.oSelectionPoint.onMouseClick( newRightX ); - this.timeSlider.fireEvent( "selectTime", aNewSelectionTimeSeries[1] ); - } + if ( this.timeSlider.oPositionManager.isInSelectionZone() === false ) { + this.oSelectionPoint.onMouseClick( newRightX ); + this.timeSlider.fireEvent( "selectTime", aNewSelectionTimeSeries[1] ); + } } this.oSelectionZone.redraw(); this._fireChangeZoneEvent(); }; - ts.SelectionManager.prototype.moveRightHandler = function( x ) { + ts.SelectionManager.prototype.movedRightHandler = function( x ) { var aCurrentSelectionTimeSeries = this.timeSlider.oPositionManager.getSelectionTimeSeries(); var newRightTime = this.timeSlider.oPositionManager.getTimeFromPosition( x ); if ( this.timeSlider.oPositionManager.isInMaxSelectionTimeSeries( aCurrentSelectionTimeSeries[0], newRightTime ) ) { this.oLeftHandler.setZone( 0, x ); this.timeSlider.oPositionManager.setSelectionEndPosition( x ); + + if ( this.timeSlider.oPositionManager.isInSelectionZone() === false ) { + this.oSelectionPoint.onMouseClick( x ); + this.timeSlider.fireEvent( "selectTime", newRightTime ); + } } else { var aNewSelectionTimeSeries = this.timeSlider.oPositionManager.getNewSelectionTimeSeriesFromEnd( newRightTime ); var newLeftX = this.timeSlider.oPositionManager.getPositionFromTime( aNewSelectionTimeSeries[0] ); diff --git a/web/src/main/webapp/components/time-slider/time-slider.selection-zone.js b/web/src/main/webapp/components/time-slider/time-slider.selection-zone.js index 41977b2ce..4cac4614c 100644 --- a/web/src/main/webapp/components/time-slider/time-slider.selection-zone.js +++ b/web/src/main/webapp/components/time-slider/time-slider.selection-zone.js @@ -18,4 +18,18 @@ "width": aSelectionZone[1] - aSelectionZone[0] }, this.opt.duration); }; + ts.SelectionZone.prototype.onDragXStart = function(x) { + var aSelectionZone = this.timeSlider.oPositionManager.getSelectionPosition(); + this.elZone.attr({ + "x": x, + "width": aSelectionZone[1] - x + }); + }; + ts.SelectionZone.prototype.onDragXEnd = function(x) { + var aSelectionZone = this.timeSlider.oPositionManager.getSelectionPosition(); + this.elZone.attr({ + "x": aSelectionZone[0], + "width": x - aSelectionZone[0] + }); + }; })(window, jQuery); 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 index aa9bfba30..b493fd1a0 100644 --- 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 @@ -1,16 +1,13 @@ (function(w, $) { - var consts = { - AGENT_CONNECT: 10100, - AGENT_SHUTDOWN: 10200, - ID_POSTFIX: "+state-line", - ID_SPLITER: "+" - }; + var ID_SPLITER = "+"; + var ID_POSTFIX = ID_SPLITER + "state-line"; + var ts = w.TimeSlider; ts.StateLine = function( timeSlider, svgGroup, options ) { this.timeSlider = timeSlider; this.group = svgGroup; this.opt = options; - this._oEventData = timeSlider.oEventData; + this._oTimelineData = timeSlider.oTimelineData; this._init(); this._addBaseLine(); @@ -18,146 +15,112 @@ this._resetBaseLineColor(); }; ts.StateLine.prototype._init = function() { - this._hasDurationData = false; this._filterShadow = this.timeSlider.snap.filter( Snap.filter.shadow(0, 1, 0.5, "#000", 0.2)); - this._oLineElementHash = {}; + this._aLineElement = []; }; ts.StateLine.prototype._addBaseLine = function() { - this._defaultBaseColor = TimeSlider.EventColor["base"]; + this._defaultBaseColor = TimeSlider.StatusColor["BASE"]; 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(); + var len = this._oTimelineData.count(); for( var i = 0 ; i < len ; i++ ) { - this._addEventElement( this._oEventData.getDataByIndex(i), i ); + this._addEventElement( this._oTimelineData.getDataByIndex(i), i ); } }; ts.StateLine.prototype._addEventElement = function( oEvent, index ) { - if ( typeof oEvent.durationStartTimestamp !== "undefined" ) { - if ( this.timeSlider.oPositionManager.isInSliderTimeSeries( oEvent.durationStartTimestamp ) === false && this.timeSlider.oPositionManager.isInSliderTimeSeries( oEvent.durationEndTimestamp ) === false ) return; - this._hasDurationData = true; - this._addLine( - this.timeSlider.oPositionManager.getPositionFromTime( oEvent.durationStartTimestamp ), - this._getX2( oEvent ), - oEvent - ); - if ( index === 0 ) { - this._resetBaseLineColor( TimeSlider.EmptyEventColor[oEvent.eventTypeCode+ ""] ); - } - } + if ( this.timeSlider.oPositionManager.isInSliderTimeSeries( oEvent.startTimestamp ) === false && this.timeSlider.oPositionManager.isInSliderTimeSeries( oEvent.endTimestamp ) === false ) return; + this._addLine( + this.timeSlider.oPositionManager.getPositionFromTime( oEvent.startTimestamp ), + this._getX2( oEvent ), + oEvent + ); + if ( index === 0 ) { + this._resetBaseLineColor( TimeSlider.StatusColor["BASE"] ); + } }; ts.StateLine.prototype._makeID = function( oEvent ) { - return this._oEventData.makeID( oEvent ) + consts.ID_POSTFIX; + return this._oTimelineData.makeID( oEvent ) + ID_POSTFIX; }; ts.StateLine.prototype._addLine = function( x, x2, oEvent ) { var lineID = this._makeID( oEvent ); - 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 ]; + var elRect = this._makeRect( x, x2, this.opt.topLineY, this.opt.bottomLineY - this.opt.topLineY, TimeSlider.StatusColor[oEvent.value], lineID ); + this._aLineElement.push(elRect); this.group.add( elRect ); }; - ts.StateLine.prototype._makeRect = function( x, x2, y, y2, eventType, id ) { + ts.StateLine.prototype._makeRect = function( x, x2, y, y2, color, id ) { return this.timeSlider.snap.rect( x, y, x2, y2 ).attr({ - //"filter": this._filterShadow, - "fill": TimeSlider.EventColor[eventType], + "fill": color, "data-id": id }); }; - // ts.StateLine.prototype._makeLine = function( x, x2, y, eventType, id ) { - // return this.timeSlider.snap.line( x, y, x2, y ).attr({ - // //"filter": this._filterShadow, - // "stroke": TimeSlider.EventColor[eventType], - // "data-id": id, - // "strokeWidth": this.opt.thickness - // }); - // }; - ts.StateLine.prototype._hasEventData = function( id ) { - return typeof this._oLineElementHash[id] === "undefined" ? false : true; - }; ts.StateLine.prototype._getX2 = function( oEvent ) { - return this.timeSlider.oPositionManager.getPositionFromTime( oEvent.durationEndTimestamp == -1 ? this.timeSlider.oPositionManager.getSliderEndTime() : oEvent.durationEndTimestamp ); + return this.timeSlider.oPositionManager.getPositionFromTime( oEvent.endTimestamp == -1 ? this.timeSlider.oPositionManager.getSliderEndTime() : oEvent.endTimestamp ); }; ts.StateLine.prototype.changeData = function() { - var len = this._oEventData.count(); - for( var i = 0 ; i < len ; i++ ) { - var oEvent = this._oEventData.getDataByIndex(i); - if ( this._hasEventData( this._makeID( oEvent ) ) === false ) { - this._addEventElement( oEvent, i ); - } - } + var curLen = this._aLineElement.length; + var newLen = this._oTimelineData.count(); + if ( curLen === newLen ) { + for( var i = 0 ; i < curLen ; i++ ) { + this.show( this._aLineElement[i] ); + } + } else if ( curLen > newLen ) { + for( var i = newLen ; i < curLen ; i++ ) { + this.hide( this._aLineElement[i] ); + } + } else { // curLen < newLen + for( var i = 0 ; i < curLen ; i++ ) { + this.show( this._aLineElement[i] ); + } + for( var i = curLen ; i < newLen ; i++ ) { + var oEvent = this._oTimelineData.getDataByIndex(i); + this._addEventElement( oEvent, i ); + } + } this.reset(); }; ts.StateLine.prototype.emptyData = function() { - for( var p in this._oLineElementHash ) { - var aLine = this._oLineElementHash[p]; - aLine[0].remove(); - //aLine[1].remove(); - } - this._oLineElementHash = {}; - this._hasDurationData = false; + var self = this; + this._aLineElement.forEach(function(line) { + self.hide( line ); + }); }; ts.StateLine.prototype.setDefaultStateLineColor = function( color ) { this._defaultBaseColor = color; - if ( this._hasDurationData === true ) return; - this._resetBaseLineColor(); + // if ( this._hasDurationData === true ) return; + this._resetBaseLineColor(color); }; ts.StateLine.prototype._resetBaseLineColor = function( baseColor ) { - var self = this; + // var self = this; this._aBaseLine.forEach(function( elLine ) { - //elLine.attr("stroke", self._hasDurationData === true ? TimeSlider.EventColor["base"] : self._defaultBaseColor ); - elLine.attr("fill", self._hasDurationData === true ? baseColor : self._defaultBaseColor ); + // elLine.attr("fill", self._hasDurationData === true ? baseColor : self._defaultBaseColor ); + elLine.attr("fill", baseColor); }); }; ts.StateLine.prototype.reset = function() { - var self = this; - var oPM = this.timeSlider.oPositionManager; - var lessDurationStartTime = Number.MAX_VALUE; - var lessEventTypeCode = ""; - for( var p in this._oLineElementHash ) { - var aLine = this._oLineElementHash[p]; - var oEvent = this._oEventData.getDataByKey(p.split(consts.ID_SPLITER)[0]); - 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({ - "x": oPM.getPositionFromTime( oEvent.durationStartTimestamp ), - "width": self._getX2( oEvent ) - oPM.getPositionFromTime( oEvent.durationStartTimestamp ) - }, self.opt.duration); - }); - if ( oEvent.durationStartTimestamp < lessDurationStartTime ) { - lessDurationStartTime = oEvent.durationStartTimestamp; - lessEventTypeCode = oEvent.eventTypeCode; - } - } else { - aLine.forEach(function( elLine ) { - self.hide( elLine ); - }); - } - } + var self = this; + var oPM = this.timeSlider.oPositionManager; + for( var i = 0 ; i < this._aLineElement.length ; i++ ) { + var elLine = this._aLineElement[i]; + var oEvent = this._oTimelineData.getDataByIndex(i); + if ( oEvent ) { + this.show(elLine); + elLine.animate({ + "x": oPM.getPositionFromTime(oEvent.startTimestamp), + "width": this._getX2(oEvent) - oPM.getPositionFromTime(oEvent.startTimestamp) + }, this.opt.duration); + } else { + this.hide(elLine); + } + } this._aBaseLine.forEach(function( elBase ) { elBase.animate({ - // "x2": oPM.getSliderEndPosition() "width": oPM.getSliderEndPosition() }, self.opt.duration); }); - if ( lessEventTypeCode != "" ) { - this._resetBaseLineColor( TimeSlider.EmptyEventColor[lessEventTypeCode] ); - } }; ts.StateLine.prototype.show = function( el ) { el.attr("display", "block"); diff --git a/web/src/main/webapp/features/agentInfo/agent-info.directive.js b/web/src/main/webapp/features/agentInfo/agent-info.directive.js index cd7e6a9dd..e74821f1d 100644 --- a/web/src/main/webapp/features/agentInfo/agent-info.directive.js +++ b/web/src/main/webapp/features/agentInfo/agent-info.directive.js @@ -1,7 +1,6 @@ (function( $ ) { pinpointApp.constant( "agentInfoDirectiveConfig", { - ID: "AGENT_INFO_DRTV_", - agentStatUrl: "/getAgentStat.pinpoint" + ID: "AGENT_INFO_DRTV_" }); pinpointApp.directive( "agentInfoDirective", [ "agentInfoDirectiveConfig", "$timeout", "SystemConfigurationService", "CommonUtilService", "UrlVoService", "AlertsService", "ProgressBarService", "AgentDaoService", "AgentAjaxService", "TooltipService", "AnalyticsService", "helpContentService", @@ -38,7 +37,7 @@ "timeSeries": aFromTo ? aFromTo : calcuSliderTimeSeries( aSelectionFromTo ), "handleTimeSeries": aSelectionFromTo, "selectTime": aSelectionFromTo[1], - "eventData": [] + "timelineData": {} }).addEvent("clickEvent", function( aEvent ) {// [x, y, obj] loadEventInfo(aEvent[2]); }).addEvent("selectTime", function( time ) { @@ -55,7 +54,8 @@ return (to - from) / 1000 / 60; } function setTimeSliderBaseColor() { - timeSlider.setDefaultStateLineColor( TimeSlider.EventColor[ scope.agent.status.state.code == 100 ? TimeSlider.GREEN : TimeSlider.RED] ); + // console.log('setTimeSliderBaseColor :', scope.agent ); + // timeSlider.setDefaultStateLineColor( TimeSlider.StatusColor[ scope.agent.status.state.code == 100 ? "RUNNING" : "SHUTDOWN"] ); } function loadChartData( agentId, aFromTo, period, callback ) { @@ -133,10 +133,10 @@ }); } function loadEventInfo( oEvent ) { - AgentAjaxService.getEvent({ + AgentAjaxService.getEventList({ "agentId": scope.agent.agentId, - "eventTimestamp": oEvent.eventTimestamp, - "eventTypeCode": oEvent.eventTypeCode + "from": oEvent.startTimestamp, + "to": oEvent.endTimestamp }, function( result ) { if ( result.errorCode || result.status ) { oAlertService.showError('There is some error.'); @@ -299,8 +299,8 @@ } } } - function getEventList( agentId, aFromTo ) { - AgentAjaxService.getEventList({ + function getTimelineList( agentId, aFromTo ) { + AgentAjaxService.getAgentTimeline({ "agentId": agentId, "from": aFromTo[0], "to": aFromTo[1] @@ -308,7 +308,7 @@ if ( result.errorCode || result.status ) { oAlertService.showError('There is some error.'); } else { - timeSlider.addEventData(result); + timeSlider.addData(result); } }); } @@ -357,22 +357,22 @@ }; scope.movePrev = function() { timeSlider.movePrev(); - getEventList( scope.agent.agentId, timeSlider.getSliderTimeSeries() ); + getTimelineList( scope.agent.agentId, timeSlider.getSliderTimeSeries() ); }; scope.moveNext = function() { timeSlider.moveNext(); - getEventList( scope.agent.agentId, timeSlider.getSliderTimeSeries() ); + getTimelineList( scope.agent.agentId, timeSlider.getSliderTimeSeries() ); }; scope.moveHead = function() { timeSlider.moveHead(); - getEventList( scope.agent.agentId, timeSlider.getSliderTimeSeries() ); + getTimelineList( scope.agent.agentId, timeSlider.getSliderTimeSeries() ); }; scope.zoomInTimeSlider = function() { timeSlider.zoomIn(); }; scope.zoomOutTimeSlider = function() { timeSlider.zoomOut(); - getEventList( scope.agent.agentId, timeSlider.getSliderTimeSeries() ); + getTimelineList( scope.agent.agentId, timeSlider.getSliderTimeSeries() ); }; scope.toggleShowDetail = function( $event ) { AnalyticsService.send( AnalyticsService.CONST.INSPECTOR, AnalyticsService.CONST.CLK_SHOW_SERVER_TYPE_DETAIL ); @@ -452,7 +452,7 @@ initTime( scope.selectTime ); initTimeSlider( aSelectionFromTo, aFromTo ); setTimeSliderBaseColor(); - getEventList( scope.agent.agentId, aFromTo || calcuSliderTimeSeries( aSelectionFromTo ) ); + getTimelineList( scope.agent.agentId, aFromTo || calcuSliderTimeSeries( aSelectionFromTo ) ); } scope.$on('jvmMemoryChartDirective.cursorChanged.forHeap', function (e, event) { diff --git a/web/src/main/webapp/features/agentInfo/agentInfoMain.html b/web/src/main/webapp/features/agentInfo/agentInfoMain.html index f977e18bd..51d221953 100644 --- a/web/src/main/webapp/features/agentInfo/agentInfoMain.html +++ b/web/src/main/webapp/features/agentInfo/agentInfoMain.html @@ -36,22 +36,20 @@
-

{{eventInfo.eventTypeDesc}} - Event

+

Event

- +
+ + + + + - - - - - - - - - - - + + + +
TimeDescriptionMessage
Event Time{{formatDate(eventInfo.eventTimestamp)}}
Description{{eventInfo.eventTypeDesc}}
Message{{eventInfo.eventMessage}}
{{formatDate(event.eventTimestamp)}}{{event.eventTypeDesc}}{{event.eventMessage}}
diff --git a/web/src/main/webapp/features/timeSlider/timeSlider.html b/web/src/main/webapp/features/timeSlider/timeSlider.html index 2652c00c2..3b44827b5 100644 --- a/web/src/main/webapp/features/timeSlider/timeSlider.html +++ b/web/src/main/webapp/features/timeSlider/timeSlider.html @@ -1,6 +1,6 @@
- +