home/pinpoint
2
0
Fork 0
mirror of https://github.com/wahyd4/pinpoint.git synced 2026-08-18 17:26:14 +10:00
Code Issues Packages Projects Releases Wiki Activity

Update realtime resonpse JSON format.

Browse Source
This commit is contained in:
denz
2015-10-14 16:46:23 +09:00
parent bac83c7978
commit aecbb9c4c9
6 changed files with 175 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/main/webapp/common/services/realtime-websocket.service.js
+85
View File
@@ -0,0 +1,85 @@
(function() {
'use strict';
/**
* (en)RealtimeWebsocketService
* @ko RealtimeWebsocketService
* @group Service
* @name RealtimeWebsocketService
* @class
*/
pinpointApp.constant('RealtimeWebsocketServiceConfig', {
wsUrl: "/agent/activeThread.pinpointws",
wsTimeout: 10000, //ms
});
pinpointApp.service('RealtimeWebsocketService', [ 'RealtimeWebsocketServiceConfig', function(cfg) {
var self = this;
var lastReceiveTime = null;
var websocket = null;
var refInterval = null;
var oHandlers;
this.open = function( handlers ) {
websocket = null;
oHandlers = handlers;
if ( angular.isDefined( WebSocket ) ) {
websocket = new WebSocket("ws://" + location.host + cfg.wsUrl);
websocket.onopen = function(event) {
lastReceiveTime = Date.now();
startTimeoutChecker();
oHandlers.onopen(event);
};
websocket.onmessage = function(event) {
lastReceiveTime = Date.now();
oHandlers.onmessage(JSON.parse( event.data ));
};
websocket.onclose = function(event) {
console.log( "onClose websocket", event);
websocket = null;
stopTimeoutChecker();
oHandlers.onclose(event);
};
return true;
}
return false;
};
this.isOpened = function() {
return websocket !== null;
};
this.close = function() {
if ( websocket !== null ) {
websocket.close();
}
websocket = null;
};
this.send = function( message ) {
if ( websocket !== null ) {
websocket.send( message );
}
};
this.stopReceive = function( message ) {
if ( websocket !== null ) {
websocket.send( message );
}
stopTimeoutChecker();
}
function startTimeoutChecker() {
refInterval = setInterval(function() {
if ( lastReceiveTime == null ) {
return;
}
if ( Date.now() - lastReceiveTime < cfg.wsTimeout ) {
return;
}
oHandlers.ondelay();
}, 1000);
}
function stopTimeoutChecker() {
lastReceiveTime = null;
clearInterval( refInterval );
}
}]);
})();
web/src/main/webapp/features/realtimeChart/realtime-chart.controller.js
+68 -62
View File
@@ -8,33 +8,42 @@
* @class
*/
pinpointApp.constant('RealtimeChartCtrlConfig', {
wsUrl: "/agent/activeThread.pinpointws",
// wsUrl: "/agent/activeThread.pinpointws",
// wsTimeout: 10000, //ms
keys: {
CODE: "code",
STATUS: "status",
MESSAGE: "message",
TIME_STAMP: "timeStamp",
APPLICATION_NAME: "applicationName",
ACTIVE_THREAD_COUNTS: "activeThreadCounts"
},
agentChartTemplate: '<div class="agent-chart"><div></div></div>',
chartDirectiveTemplate: Handlebars.compile( '<realtime-chart-directive chart-color="{{chartColor}}" xcount="{{xAxisCount}}" show-extra-info="{{showExtraInfo}}" request-label="requestLabelNames" namespace="{{namespace}}" width="{{width}}" height="{{height}}"></realtime-chart-directive>' )
});
pinpointApp.controller('RealtimeChartCtrl', ['RealtimeChartCtrlConfig', '$scope', '$element', '$rootScope', '$compile', '$window', 'globalConfig',
function (cfg, $scope, $element, $rootScope, $compile, $window, globalConfig) {
pinpointApp.controller('RealtimeChartCtrl', ['RealtimeChartCtrlConfig', '$scope', '$element', '$rootScope', '$compile', '$window', 'globalConfig', 'RealtimeWebsocketService',
function (cfg, $scope, $element, $rootScope, $compile, $window, globalConfig, websocketService) {
//@TODO will move to preference-service
var X_AXIS_COUNT = 10;
var RECEIVE_SUCCESS = 0;
var $elSumChartWrapper = $element.find("div.agent-sum-chart");
var $elAgentChartListWrapper = $element.find("div.agent-chart-list");
var bWebsocketOpened = false;
var websocket = null;
var aSumChartData = [0];
var aAgentChartElementList = [];
var oNamespaceToIndexMap = {};
var aSumChartData = [0];
var screenState = "small";
$scope.hasCriticalError = false;
$scope.showRealtimeChart = false;
$scope.sumChartColor = ["rgba(44, 160, 44, 1)", "rgba(60, 129, 250, 1)", "rgba(248, 199, 49, 1)", "rgba(246, 145, 36, 1)" ];
$scope.agentChartColor = ["rgba(44, 160, 44, .8)", "rgba(60, 129, 250, .8)", "rgba(248, 199, 49, .8)", "rgba(246, 145, 36, .8)"];
$scope.requestLabelNames= [ "Fast", "Normal", "Slow", "Very Slow"];
$scope.currentAgentCount = 0;
$scope.currentApplicationName = "";
function getInitChartData( len ) {
var a = [];
for( var i = 0 ; i < $scope.sumChartColor.length ; i++ ) {
@@ -43,14 +52,17 @@
return a;
}
function initChartDirective() {
$elSumChartWrapper.append( $compile( cfg.chartDirectiveTemplate({
"chartColor": "sumChartColor",
"xAxisCount": X_AXIS_COUNT,
"namespace": "sum",
"showExtraInfo": "true",
"height": 120,
"width": 260
}))($scope) );
if ( hasAgentChart( "sum" ) === false ) {
$elSumChartWrapper.append( $compile( cfg.chartDirectiveTemplate({
"chartColor": "sumChartColor",
"xAxisCount": X_AXIS_COUNT,
"namespace": "sum",
"showExtraInfo": "true",
"height": 120,
"width": 260
}))($scope) );
oNamespaceToIndexMap["sum"] = -1;
}
}
function hasAgentChart( agentName ) {
return angular.isDefined( oNamespaceToIndexMap[agentName] );
@@ -69,53 +81,47 @@
linkNamespaceToIndex( agentName, aAgentChartElementList.length );
aAgentChartElementList.push( $newAgentChart );
}
function initWS() {
websocket = null;
if ( angular.isDefined( WebSocket ) ) {
websocket = new WebSocket("ws://" + location.host + cfg.wsUrl);
websocket.onopen = function(event) {
console.log( "onOpen websocket", event);
bWebsocketOpened = true;
send();
};
websocket.onmessage = function(event) {
receive( JSON.parse( event.data ) );
};
websocket.onclose = function(event) {
console.log( "onClose websocket", event);
bWebsocketOpened = false;
websocket = null;
// @TODO
// if ( $scope.showRealtimeChart === true ) {
// //reinit
// }
};
initChartDirective();
function initSend() {
var bConnected = websocketService.open({
onopen: function(event) {
startReceive();
},
onmessage: function(data) {
receive( data );
},
onclose: function(event) {
$scope.$apply(function() {
$scope.hasCriticalError = true;
});
},
ondelay: function() {
websocketService.close();
}
});
if ( bConnected ) {
initChartDirective();
}
}
function receive( data ) {
if ( angular.isUndefined( data[$scope.currentApplicationName] ) ) return;
if ( data[cfg.keys.APPLICATION_NAME] !== $scope.currentApplicationName ) return;
var applicationData = data[$scope.currentApplicationName];
var applicationData = data[cfg.keys.ACTIVE_THREAD_COUNTS];
var aRequestSum = getSumOfRequestType( applicationData );
addSumYValue( aRequestSum );
broadcastData( applicationData, aRequestSum );
broadcastData( applicationData, aRequestSum, data[cfg.keys.TIME_STAMP] );
}
function broadcastData( applicationData, aRequestSum ) {
function broadcastData( applicationData, aRequestSum, timeStamp ) {
var maxY = getMaxOfYValue();
var agentIndexAndCount = 0;
var timeStamp;
for( var agentName in applicationData ) {
checkAgentChart( agentName, agentIndexAndCount );
timeStamp = applicationData[agentName].timeStamp;
if ( applicationData[agentName].code === RECEIVE_SUCCESS ) {
$rootScope.$broadcast('realtimeChartDirective.onData.' + oNamespaceToIndexMap[agentName], applicationData[agentName].status, timeStamp, maxY );
if ( applicationData[agentName][cfg.keys.CODE] === RECEIVE_SUCCESS ) {
$rootScope.$broadcast('realtimeChartDirective.onData.' + oNamespaceToIndexMap[agentName], applicationData[agentName][cfg.keys.STATUS], timeStamp, maxY );
} else {
$rootScope.$broadcast('realtimeChartDirective.onError.' + oNamespaceToIndexMap[agentName], applicationData[agentName].message, timeStamp, maxY );
$rootScope.$broadcast('realtimeChartDirective.onError.' + oNamespaceToIndexMap[agentName], applicationData[agentName][cfg.keys.MESSAGE], timeStamp, maxY );
}
showAgentChart( agentIndexAndCount );
@@ -152,8 +158,8 @@
function getSumOfRequestType( datum ) {
var aRequestSum = [0, 0, 0, 0];
for( var p in datum ) {
if ( datum[p].code === RECEIVE_SUCCESS ) {
jQuery.each(datum[p].status, function( i, v ) {
if ( datum[p][cfg.keys.CODE] === RECEIVE_SUCCESS ) {
jQuery.each(datum[p][cfg.keys.STATUS], function( i, v ) {
aRequestSum[i] += v;
});
}
@@ -173,23 +179,22 @@
return d;
});
}
function send() {
websocket.send("applicationName=" + $scope.currentApplicationName);
function startReceive() {
websocketService.send("applicationName=" + $scope.currentApplicationName);
}
function startWS( applicationName ) {
$scope.currentApplicationName = applicationName;
if ( bWebsocketOpened === false || websocket == null) {
initWS();
function initReceive() {
if ( websocketService.isOpened() == false ) {
initSend();
} else {
send();
startReceive();
}
$scope.$apply(function() {
$scope.showRealtimeChart = true;
});
}
function stopWS() {
function stopReceive() {
$scope.showRealtimeChart = false;
websocket.send("applicationName=");
websocketService.stopReceive("applicationName=");
}
function stopChart() {
$rootScope.$broadcast('realtimeChartDirective.clear.sum');
@@ -197,7 +202,6 @@
$rootScope.$broadcast('realtimeChartDirective.clear.' + index);
el.hide();
});
}
$scope.$on('realtimeChartController.initialize', function (event, isWas, applicationName) {
@@ -208,9 +212,10 @@
if ( $scope.showRealtimeChart === true ) {
$scope.closePopup();
}
startWS( applicationName );
$scope.currentApplicationName = applicationName;
initReceive();
} else {
stopWS();
stopReceive();
}
});
@@ -235,10 +240,11 @@
}
}
$scope.closePopup = function() {
stopWS();
stopReceive();
stopChart();
$scope.currentApplicationName = "";
$scope.currentAgentCount = 0;
$scope.hasCriticalError = false;
}
}
]);
web/src/main/webapp/features/realtimeChart/realtime-chart.directive.js
+1
View File
@@ -313,6 +313,7 @@
scope.$on('realtimeChartDirective.onError.' + namespace, function (event, errorMessage, timeStamp, maxY) {
sumOfMaxY = maxY;
errorLabel.text( errorMessage );
aRealTimeData.push( aInnerStack[aInnerStack.length - 1] );
});
scope.$on('realtimeChartDirective.clear.' + namespace, function (event, aNewRequestCount, timeStamp) {
aRealTimeData.length = 0;
web/src/main/webapp/index.html
+1
View File
@@ -418,6 +418,7 @@
<script src="common/services/user-locales.service.js?v=${buildTime}"></script>
<script src="common/services/help-content.service.js?v=${buildTime}"></script>
<script src="common/services/analytics.service.js?v=${buildTime}"></script>
<script src="common/services/realtime-websocket.service.js?v=${buildTime}"></script>
<script src="common/services/preference.service.js?v=${buildTime}"></script>
<script src="common/help/help-content-en.js?v=${buildTime}"></script>
<script src="common/help/help-content-ko.js?v=${buildTime}"></script>
web/src/main/webapp/pages/main/main.html
+4
View File
@@ -15,6 +15,10 @@
<div>{{currentApplicationName}} ({{currentAgentCount == 0 ? "..." : currentAgentCount}})</div>
</div>
<div class="agent-chart-list"></div>
<div class="critical-error" ng-show="hasCriticalError">
<span class="chart-close glyphicon glyphicon-remove" aria-hidden="true" ng-click="closePopup()"></span>
<h4>Closed connection.<br/><br/>Select node again.</h4>
</div>
</div>
</div>
<div class="sidebar" ng-class="sidebar" loading-directive="sidebarLoading" loading-message="Loading...">
web/src/main/webapp/styles/main.css
+16 -2
View File
@@ -234,7 +234,7 @@ canvas {outline:none}
}
.realtime {
left: 1%;
left: 6px;
width: 98%;
height: 180px;
border: 2px solid #64a71a;
@@ -288,7 +288,7 @@ canvas {outline:none}
float: left;
width: 120px;
height: 70px;
margin: 1px 2px 1px 4px;
margin: 1px 2px 4px 4px;
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.75);
border-radius: 4px 4px 0px 0px;
background-color: #FFF;
@@ -334,4 +334,18 @@ canvas {outline:none}
.realtime .agent-chart-list text {
font-size: 8px;
}
.realtime .critical-error {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: absolute;
text-align: center;
background-color: rgba(200, 200, 200, 0.9);
}
.realtime .critical-error h4 {
color: red;
padding-top: 40px;
font-weight: bold;
}