From aecbb9c4c9926e2fd263dc541a2eecd862055595 Mon Sep 17 00:00:00 2001 From: denz Date: Wed, 14 Oct 2015 16:46:23 +0900 Subject: [PATCH] Update realtime resonpse JSON format. --- .../services/realtime-websocket.service.js | 85 ++++++++++++ .../realtime-chart.controller.js | 130 +++++++++--------- .../realtimeChart/realtime-chart.directive.js | 1 + web/src/main/webapp/index.html | 1 + web/src/main/webapp/pages/main/main.html | 4 + web/src/main/webapp/styles/main.css | 18 ++- 6 files changed, 175 insertions(+), 64 deletions(-) create mode 100644 web/src/main/webapp/common/services/realtime-websocket.service.js diff --git a/web/src/main/webapp/common/services/realtime-websocket.service.js b/web/src/main/webapp/common/services/realtime-websocket.service.js new file mode 100644 index 000000000..4df70255d --- /dev/null +++ b/web/src/main/webapp/common/services/realtime-websocket.service.js @@ -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 ); + } + + }]); +})(); \ No newline at end of file diff --git a/web/src/main/webapp/features/realtimeChart/realtime-chart.controller.js b/web/src/main/webapp/features/realtimeChart/realtime-chart.controller.js index 40eabdf97..69acf6571 100644 --- a/web/src/main/webapp/features/realtimeChart/realtime-chart.controller.js +++ b/web/src/main/webapp/features/realtimeChart/realtime-chart.controller.js @@ -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: '
', chartDirectiveTemplate: Handlebars.compile( '' ) }); - 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; } } ]); diff --git a/web/src/main/webapp/features/realtimeChart/realtime-chart.directive.js b/web/src/main/webapp/features/realtimeChart/realtime-chart.directive.js index 55b4d9567..ef48023c9 100644 --- a/web/src/main/webapp/features/realtimeChart/realtime-chart.directive.js +++ b/web/src/main/webapp/features/realtimeChart/realtime-chart.directive.js @@ -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; diff --git a/web/src/main/webapp/index.html b/web/src/main/webapp/index.html index 9c16c85a1..58dea5004 100644 --- a/web/src/main/webapp/index.html +++ b/web/src/main/webapp/index.html @@ -418,6 +418,7 @@ + diff --git a/web/src/main/webapp/pages/main/main.html b/web/src/main/webapp/pages/main/main.html index f6f8da005..2a35ec46e 100644 --- a/web/src/main/webapp/pages/main/main.html +++ b/web/src/main/webapp/pages/main/main.html @@ -15,6 +15,10 @@
{{currentApplicationName}} ({{currentAgentCount == 0 ? "..." : currentAgentCount}})
+
+ +

Closed connection.

Select node again.

+
diff --git a/web/src/main/webapp/styles/main.css b/web/src/main/webapp/styles/main.css index 5e41660c0..c89dc09db 100644 --- a/web/src/main/webapp/styles/main.css +++ b/web/src/main/webapp/styles/main.css @@ -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; +}