home/pinpoint
2
0
Fork 0
mirror of https://github.com/wahyd4/pinpoint.git synced 2026-08-09 04:46:06 +10:00
Code Issues Packages Projects Releases Wiki Activity

support new timeline api. ( #2606 #2608 )

Browse Source
This commit is contained in:
denz
2017-04-13 11:33:51 +09:00
committed by HyoJong
parent 4c872733c0
commit b065ad445f
10 changed files with 193 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/main/webapp/components/time-slider/time-slider.event-data.js
-104
View File
@@ -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);
web/src/main/webapp/components/time-slider/time-slider.events.js
+50 -83
View File
@@ -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");
web/src/main/webapp/components/time-slider/time-slider.js
+12 -30
View File
@@ -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);
web/src/main/webapp/components/time-slider/time-slider.loading-indicator.js
-1
View File
@@ -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;
web/src/main/webapp/components/time-slider/time-slider.selection-manager.js
+24 -11
View File
@@ -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] );
web/src/main/webapp/components/time-slider/time-slider.selection-zone.js
+14
View File
@@ -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);
web/src/main/webapp/components/time-slider/time-slider.state-line.js
+66 -103
View File
@@ -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");
web/src/main/webapp/features/agentInfo/agent-info.directive.js
+15 -15
View File
@@ -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) {
web/src/main/webapp/features/agentInfo/agentInfoMain.html
+11 -13
View File
@@ -36,22 +36,20 @@
</div>
<div class="panel panel-info" ng-show="showEventInfo">
<div class="panel-heading">
<h3 class="panel-title">{{eventInfo.eventTypeDesc}} - Event <span class="glyphicon glyphicon-remove" style="float:right;cursor:pointer" aria-hidden="true" ng-click="hideEventInfo()"></span></h3>
<h3 class="panel-title">Event <span class="glyphicon glyphicon-remove" style="float:right;cursor:pointer" aria-hidden="true" ng-click="hideEventInfo()"></span></h3>
</div>
<div class="panel-body">
<table class="table table-condensed" style="font-size:12px;">
<table class="table table-condensed" style="font-size:12px;margin-bottom:0px;">
<thead>
<th>Time</th>
<th>Description</th>
<th>Message</th>
</thead>
<tbody>
<tr>
<td class="col-md-2 text-left"><strong>Event Time</strong></td>
<td class="col-md-10 text-left">{{formatDate(eventInfo.eventTimestamp)}}</td>
</tr>
<tr>
<td class="text-left"><strong>Description</strong></td>
<td class="text-left">{{eventInfo.eventTypeDesc}}</td>
</tr>
<tr ng-show="eventInfo.hasEventMessage">
<td class="text-left"><strong>Message</strong></td>
<td class="text-left">{{eventInfo.eventMessage}}</td>
<tr ng-repeat="event in eventInfo">
<td>{{formatDate(event.eventTimestamp)}}</td>
<td>{{event.eventTypeDesc}}</td>
<td>{{event.eventMessage}}</td>
</tr>
</tbody>
</table>
web/src/main/webapp/features/timeSlider/timeSlider.html
+1 -1
View File
@@ -1,6 +1,6 @@
<div class="timeslider navbar main-navbar bs-docs-nav">
<div class="nav-container">
<a href="/" class="navbar-brand"><img class="brand" src="/images/logo2.png" width="116" height="18"></a>
<a href="/" class="navbar-brand"><img class="brand" src="images/logo2.png" width="116" height="18"></a>
<div class="timeslider_more" ng-show="showSlider()">
<button type="button" ng-click="more()" class="btn btn-info btn-sm" ng-disabled="getButtonStatus()" ng-class="getButtonClass()">{{ getButtonText() }}<span ng-show="showCount()"> ({{oTimeSliderVoService.getCount() | number}}/{{oTimeSliderVoService.getTotal() | number}})</span></button>
</div>