diff --git a/web/src/main/webapp/features/linkInfoDetails/link-info-details.directive.js b/web/src/main/webapp/features/linkInfoDetails/link-info-details.directive.js index e7048a74f..34946cb94 100644 --- a/web/src/main/webapp/features/linkInfoDetails/link-info-details.directive.js +++ b/web/src/main/webapp/features/linkInfoDetails/link-info-details.directive.js @@ -8,8 +8,6 @@ * @class */ pinpointApp.constant('linkInfoDetailsDirectiveConfig', { - linkStatisticsUrl: '/linkStatistics.pinpoint', - myColors: ["#2ca02c", "#3c81fa", "#f8c731", "#f69124", "#f53034"], maxTimeToShowLoadAsDefaultForUnknown: 60 * 60 * 12 // 12h }); diff --git a/web/src/main/webapp/features/loadChart/load-chart.directive.js b/web/src/main/webapp/features/loadChart/load-chart.directive.js index 47cd7fcdd..a957519ad 100644 --- a/web/src/main/webapp/features/loadChart/load-chart.directive.js +++ b/web/src/main/webapp/features/loadChart/load-chart.directive.js @@ -7,12 +7,9 @@ * @name loadChartDirective * @class */ - pinpointApp.constant('loadChartDirectiveConfig', { - myColors: ["#2ca02c", "#3c81fa", "#f8c731", "#f69124", "#f53034"] - // myColors: ["#c9e7a5", "#bbcdf0", "#fce0b5", "#f69124", "#f53034"] - }); + pinpointApp.constant('loadChartDirectiveConfig', {}); - pinpointApp.directive('loadChartDirective', ['loadChartDirectiveConfig', '$timeout', 'AnalyticsService', function (cfg, $timeout, analyticsService) { + pinpointApp.directive('loadChartDirective', ['loadChartDirectiveConfig', 'responseTypeColor', '$timeout', 'AnalyticsService', function (cfg, responseTypeColor, $timeout, analyticsService) { return { template: '
', replace: true, @@ -71,7 +68,7 @@ "markerType" : "circle", // square, circle, diamond, triangleUp, triangleDown, triangleLeft, triangleDown, bubble, line, none. "position": "top" }, -// "colors" : cfg.myColors, +// "colors" : responseTypeColor, "dataProvider": data, "valueAxes": [{ "stackType": "regular", @@ -106,57 +103,57 @@ "balloonText": "[[title]] : [[value]]", // "balloonColor": "red", "fillAlphas": 0.2, - "fillColors": cfg.myColors[0], + "fillColors": responseTypeColor[0], // "labelText": "[[value]]", "lineAlpha": 0.8, "lineColor": "#787779", "title": aDynamicKey[0], "type": "step", - "legendColor": cfg.myColors[0], + "legendColor": responseTypeColor[0], "valueField": aDynamicKey[0] }, { "balloonText": "[[title]] : [[value]]", "fillAlphas": 0.3, - "fillColors": cfg.myColors[1], + "fillColors": responseTypeColor[1], // "labelText": "[[value]]", "lineAlpha": 0.8, "lineColor": "#787779", "title": aDynamicKey[1], "type": "step", - "legendColor": cfg.myColors[1], + "legendColor": responseTypeColor[1], "valueField": aDynamicKey[1] }, { "balloonText": "[[title]] : [[value]]", "fillAlphas": 0.4, - "fillColors": cfg.myColors[2], + "fillColors": responseTypeColor[2], // "labelText": "[[value]]", "lineAlpha": 0.8, "lineColor": "#787779", "title": aDynamicKey[2], "type": "step", - "legendColor": cfg.myColors[2], + "legendColor": responseTypeColor[2], "valueField": aDynamicKey[2] }, { "balloonText": "[[title]] : [[value]]", "fillAlphas": 0.6, - "fillColors": cfg.myColors[3], + "fillColors": responseTypeColor[3], // "labelText": "[[value]]", "lineAlpha": 0.8, "lineColor": "#787779", "title": aDynamicKey[3], "type": "step", - "legendColor": cfg.myColors[3], + "legendColor": responseTypeColor[3], "valueField": aDynamicKey[3] }, { "balloonText": "[[title]] : [[value]]", "fillAlphas": 0.6, - "fillColors": cfg.myColors[4], + "fillColors": responseTypeColor[4], // "labelText": "[[value]]", "lineAlpha": 0.8, "lineColor": "#787779", "title": aDynamicKey[4], "type": "step", - "legendColor": cfg.myColors[4], + "legendColor": responseTypeColor[4], "valueField": aDynamicKey[4] }] }; @@ -206,7 +203,7 @@ "graphs": [{ "id": "AmGraph-1", "fillAlphas": 0.2, - "fillColors": cfg.myColors[0], + "fillColors": responseTypeColor[0], "lineAlpha": 0.8, "lineColor": "#787779", "type": "step", @@ -214,7 +211,7 @@ }, { "id": "AmGraph-2", "fillAlphas": 0.3, - "fillColors": cfg.myColors[1], + "fillColors": responseTypeColor[1], "lineAlpha": 0.8, "lineColor": "#787779", "type": "step", @@ -222,7 +219,7 @@ }, { "id": "AmGraph-3", "fillAlphas": 0.4, - "fillColors": cfg.myColors[2], + "fillColors": responseTypeColor[2], "lineAlpha": 0.8, "lineColor": "#787779", "type": "step", @@ -230,7 +227,7 @@ }, { "id": "AmGraph-4", "fillAlphas": 0.6, - "fillColors": cfg.myColors[3], + "fillColors": responseTypeColor[3], "lineAlpha": 0.8, "lineColor": "#787779", "type": "step", @@ -238,7 +235,7 @@ }, { "id": "AmGraph-5", "fillAlphas": 0.6, - "fillColors": cfg.myColors[4], + "fillColors": responseTypeColor[4], "lineAlpha": 0.8, "lineColor": "#787779", "type": "step", diff --git a/web/src/main/webapp/features/nodeInfoDetails/node-info-details.directive.js b/web/src/main/webapp/features/nodeInfoDetails/node-info-details.directive.js index 73392af29..2231506bb 100644 --- a/web/src/main/webapp/features/nodeInfoDetails/node-info-details.directive.js +++ b/web/src/main/webapp/features/nodeInfoDetails/node-info-details.directive.js @@ -1,5 +1,5 @@ (function() { - 'use strict'; + "use strict"; /** * (en)nodeInfoDetailsDirective * @ko nodeInfoDetailsDirective @@ -7,18 +7,16 @@ * @name nodeInfoDetailsDirective * @class */ - pinpointApp.constant('nodeInfoDetailsDirectiveConfig', { - applicationStatisticsUrl: '/applicationStatistics.pinpoint', - myColors: ["#2ca02c", "#3c81fa", "#f8c731", "#f69124", "#f53034"], + pinpointApp.constant("nodeInfoDetailsDirectiveConfig", { maxTimeToShowLoadAsDefaultForUnknown: 60 * 60 * 12 // 12h }); - pinpointApp.directive('nodeInfoDetailsDirective', [ 'nodeInfoDetailsDirectiveConfig', '$filter', '$timeout', 'isVisibleService', '$window', 'helpContentTemplate', 'helpContentService', 'AnalyticsService', - function (cfg, $filter, $timeout, isVisibleService, $window, helpContentTemplate, helpContentService, analyticsService) { + pinpointApp.directive("nodeInfoDetailsDirective", [ "nodeInfoDetailsDirectiveConfig", "$filter", "$timeout", "isVisibleService", "$window", "helpContentTemplate", "helpContentService", "AnalyticsService", "CONST_SET", + function (cfg, $filter, $timeout, isVisibleService, $window, helpContentTemplate, helpContentService, analyticsService, CONST_SET) { return { - restrict: 'EA', + restrict: "EA", replace: true, - templateUrl: 'features/nodeInfoDetails/nodeInfoDetails.html?v=' + G_BUILD_TIME, + templateUrl: "features/nodeInfoDetails/nodeInfoDetails.html?v=" + G_BUILD_TIME, scope: {}, link: function postLink(scope, element) { @@ -34,15 +32,15 @@ bShown = false; scope.htLastUnknownNode = false; - angular.element($window).bind('resize',function(e) { + angular.element($window).bind("resize",function(e) { if (bShown && /_GROUP$/.test( htLastNode.category ) ) { renderAllChartWhichIsVisible(htLastNode); } }); element - .find('.unknown-list') - .bind('scroll', function (e) { + .find(".unknown-list") + .bind("scroll", function (e) { renderAllChartWhichIsVisible(htLastNode); }); @@ -54,6 +52,7 @@ htUnknownLoad = {}; htAgentChartRendered = {}; htQuery = false; + scope.currentAgent = CONST_SET.AGENT_ALL; scope.showNodeInfoDetails = false; scope.node = false; scope.unknownNodeGroup = null; @@ -65,13 +64,13 @@ scope.showNodeResponseSummary = false; scope.showNodeLoad = false; scope.agentHistogram = false; - scope.nodeOrderBy = 'totalCount'; - scope.nodeOrderByNameClass = ''; - scope.nodeOrderByCountClass = 'glyphicon-sort-by-order-alt'; + scope.nodeOrderBy = "totalCount"; + scope.nodeOrderByNameClass = ""; + scope.nodeOrderByCountClass = "glyphicon-sort-by-order-alt"; scope.nodeOrderByDesc = true; - if (!(scope.$$phase == '$apply' || scope.$$phase == '$digest') ) { - if (!(scope.$root.$$phase == '$apply' || scope.$root.$$phase == '$digest') ) { + if (!(scope.$$phase == "$apply" || scope.$$phase == "$digest") ) { + if (!(scope.$root.$$phase == "$apply" || scope.$root.$$phase == "$digest") ) { scope.$digest(); } } @@ -106,23 +105,19 @@ scope.showNodeResponseSummary = true; scope.showNodeLoad = true; - renderResponseSummary('forNode', node.applicationName, node.histogram, '100%', '150px'); - renderLoad('forNode', node.applicationName, node.timeSeriesHistogram, '100%', '220px', true); + renderResponseSummary("forNode", node.applicationName, node.histogram, "100%", "150px"); + renderLoad("forNode", node.applicationName, node.timeSeriesHistogram, "100%", "220px", true); } else if ( /_GROUP$/.test( node.serviceType ) ){ scope.showNodeResponseSummaryForUnknown = (scope.oNavbarVoService.getPeriod() <= cfg.maxTimeToShowLoadAsDefaultForUnknown) ? false : true; renderAllChartWhichIsVisible(node); -// scope.htLastUnknownNode = angular.copy(node); scope.htLastUnknownNode = node; $timeout(function () { - element.find('[data-toggle="tooltip"]').tooltip('destroy').tooltip(); + element.find('[data-toggle="tooltip"]').tooltip("destroy").tooltip(); }); } -// if (!scope.$$phase) { -// scope.$digest(); -// } - if (!(scope.$$phase == '$apply' || scope.$$phase == '$digest') ) { - if (!(scope.$root.$$phase == '$apply' || scope.$root.$$phase == '$digest') ) { + if (!(scope.$$phase == "$apply" || scope.$$phase == "$digest") ) { + if (!(scope.$root.$$phase == "$apply" || scope.$root.$$phase == "$digest") ) { scope.$digest(); } } @@ -136,21 +131,21 @@ $timeout(function () { angular.forEach(node.unknownNodeGroup, function (node){ var applicationName = node.applicationName, - className = $filter('applicationNameToClassName')(applicationName); + className = $filter("applicationNameToClassName")(applicationName); if (angular.isDefined(htUnknownResponseSummary[applicationName])) return; if (angular.isDefined(htUnknownLoad[applicationName])) return; - var elQuery = '.nodeInfoDetails .summaryCharts_' + className, + var elQuery = ".nodeInfoDetails .summaryCharts_" + className, el = angular.element(elQuery); var visible = isVisibleService(el.get(0), 1); if (!visible) return; if (scope.showNodeResponseSummaryForUnknown) { htUnknownResponseSummary[applicationName] = true; - renderResponseSummary(null, applicationName, node.histogram, '360px', '180px'); + renderResponseSummary(null, applicationName, node.histogram, "360px", "180px"); } else { htUnknownLoad[applicationName] = true; - renderLoad(null, applicationName, node.timeSeriesHistogram, '360px', '200px', true); + renderLoad(null, applicationName, node.timeSeriesHistogram, "360px", "200px", true); } }); }); @@ -165,9 +160,9 @@ * @param h */ renderResponseSummary = function (namespace, toApplicationName, histogram, w, h) { - var className = $filter('applicationNameToClassName')(toApplicationName), - namespace = namespace || 'forNode_' + className; - scope.$broadcast('responseTimeChartDirective.initAndRenderWithData.' + namespace, histogram, w, h, false, true); + var className = $filter("applicationNameToClassName")(toApplicationName), + namespace = namespace || "forNode_" + className; + scope.$broadcast("responseTimeChartDirective.initAndRenderWithData." + namespace, histogram, w, h, false, true); }; /** @@ -180,9 +175,9 @@ * @param useChartCursor */ renderLoad = function (namespace, toApplicationName, timeSeriesHistogram, w, h, useChartCursor) { - var className = $filter('applicationNameToClassName')(toApplicationName), - namespace = namespace || 'forNode_' + className; - scope.$broadcast('loadChartDirective.initAndRenderWithData.' + namespace, timeSeriesHistogram, w, h, useChartCursor); + var className = $filter("applicationNameToClassName")(toApplicationName), + namespace = namespace || "forNode_" + className; + scope.$broadcast("loadChartDirective.initAndRenderWithData." + namespace, timeSeriesHistogram, w, h, useChartCursor); }; getUnknownNode = function( key ) { @@ -219,7 +214,7 @@ scope.showNodeDetailInformation = function (key) { htLastNode = getUnknownNode(key);//htLastNode.unknownNodeGroup[index]; showDetailInformation(htLastNode); - scope.$emit('nodeInfoDetail.showDetailInformationClicked', htQuery, htLastNode); + scope.$emit("nodeInfoDetail.showDetailInformationClicked", htQuery, htLastNode); }; /** @@ -230,7 +225,7 @@ htUnknownResponseSummary = {}; htUnknownLoad = {}; showDetailInformation(htLastNode); - scope.$emit('nodeInfoDetail.showDetailInformationClicked', htQuery, htLastNode); + scope.$emit("nodeInfoDetail.showDetailInformationClicked", htQuery, htLastNode); }; /** @@ -241,7 +236,7 @@ scope.renderNodeResponseSummary = function (applicationName, key) { if (angular.isUndefined(htUnknownResponseSummary[applicationName])) { htUnknownResponseSummary[applicationName] = true; - renderResponseSummary(null, applicationName, getUnknownNode(key).histogram, '360px', '180px'); + renderResponseSummary(null, applicationName, getUnknownNode(key).histogram, "360px", "180px"); } }; @@ -253,7 +248,7 @@ scope.renderNodeLoad = function (applicationName, key) { if (angular.isUndefined(htUnknownLoad[applicationName])) { htUnknownLoad[applicationName] = true; - renderLoad(null, applicationName, getUnknownNode(key).timeSeriesHistogram, '360px', '200px', true); + renderLoad(null, applicationName, getUnknownNode(key).timeSeriesHistogram, "360px", "200px", true); } }; @@ -265,8 +260,8 @@ analyticsService.send(analyticsService.CONST.MAIN, analyticsService.CONST.CLK_SHOW_GRAPH); if (angular.isDefined(htAgentChartRendered[applicationName])) return; htAgentChartRendered[applicationName] = true; - renderResponseSummary(null, applicationName, htLastNode.agentHistogram[applicationName], '100%', '150px'); - renderLoad(null, applicationName, htLastNode.agentTimeSeriesHistogram[applicationName], '100%', '200px', true); + renderResponseSummary(null, applicationName, htLastNode.agentHistogram[applicationName], "100%", "150px"); + renderLoad(null, applicationName, htLastNode.agentTimeSeriesHistogram[applicationName], "100%", "200px", true); }; /** @@ -280,18 +275,18 @@ * scope node order by name */ scope.nodeOrderByName = function () { - if (scope.nodeOrderBy === 'applicationName') { + if (scope.nodeOrderBy === "applicationName") { scope.nodeOrderByDesc = !scope.nodeOrderByDesc; - if (scope.nodeOrderByNameClass === 'glyphicon-sort-by-alphabet-alt') { - scope.nodeOrderByNameClass = 'glyphicon-sort-by-alphabet'; + if (scope.nodeOrderByNameClass === "glyphicon-sort-by-alphabet-alt") { + scope.nodeOrderByNameClass = "glyphicon-sort-by-alphabet"; } else { - scope.nodeOrderByNameClass = 'glyphicon-sort-by-alphabet-alt'; + scope.nodeOrderByNameClass = "glyphicon-sort-by-alphabet-alt"; } } else { - scope.nodeOrderByNameClass = 'glyphicon-sort-by-alphabet-alt'; - scope.nodeOrderByCountClass = ''; + scope.nodeOrderByNameClass = "glyphicon-sort-by-alphabet-alt"; + scope.nodeOrderByCountClass = ""; scope.nodeOrderByDesc = true; - scope.nodeOrderBy = 'applicationName'; + scope.nodeOrderBy = "applicationName"; } renderAllChartWhichIsVisible(htLastNode); }; @@ -300,18 +295,18 @@ * scope node order by count */ scope.nodeOrderByCount = function () { - if (scope.nodeOrderBy === 'totalCount') { + if (scope.nodeOrderBy === "totalCount") { scope.nodeOrderByDesc = !scope.nodeOrderByDesc; - if (scope.nodeOrderByCountClass === 'glyphicon-sort-by-order-alt') { - scope.nodeOrderByCountClass = 'glyphicon-sort-by-order'; + if (scope.nodeOrderByCountClass === "glyphicon-sort-by-order-alt") { + scope.nodeOrderByCountClass = "glyphicon-sort-by-order"; } else { - scope.nodeOrderByCountClass = 'glyphicon-sort-by-order-alt'; + scope.nodeOrderByCountClass = "glyphicon-sort-by-order-alt"; } } else { - scope.nodeOrderByCountClass = 'glyphicon-sort-by-order-alt'; - scope.nodeOrderByNameClass = ''; + scope.nodeOrderByCountClass = "glyphicon-sort-by-order-alt"; + scope.nodeOrderByNameClass = ""; scope.nodeOrderByDesc = true; - scope.nodeOrderBy = 'totalCount'; + scope.nodeOrderBy = "totalCount"; } renderAllChartWhichIsVisible(htLastNode); }; @@ -341,11 +336,11 @@ /** * scope event on nodeInfoDetailsDirective.initialize */ - scope.$on('nodeInfoDetailsDirective.initialize', function (event, e, query, node, mapData, navbarVoService, reloadOnly, searchQuery) { + scope.$on("nodeInfoDetailsDirective.initialize", function (event, e, query, node, mapData, navbarVoService, reloadOnly, searchQuery) { show(); // DISABLE node Cache //if (angular.equals(sLastKey, node.key) && !reloadOnly) { - // if (htLastNode.category === 'UNKNOWN_GROUP') { + // if (htLastNode.category === "UNKNOWN_GROUP") { // renderAllChartWhichIsVisible(htLastNode); // } // return; @@ -364,29 +359,42 @@ /** * scope event on nodeInfoDetailsDirective.hide */ - scope.$on('nodeInfoDetailsDirective.hide', function (event) { + scope.$on("nodeInfoDetailsDirective.hide", function (event) { hide(); }); /** * scope event on nodeInfoDetailsDirective.lazyRendering */ - scope.$on('nodeInfoDetailsDirective.lazyRendering', function (event, e) { + scope.$on("nodeInfoDetailsDirective.lazyRendering", function (event, e) { renderAllChartWhichIsVisible(htLastNode); }); - scope.$on('responseTimeChartDirective.itemClicked.forNode', function (event, data) { -// console.log('on responseTimeChartDirective.itemClicked.forNode', data); + scope.$on("responseTimeChartDirective.itemClicked.forNode", function (event, data) { +// console.log("on responseTimeChartDirective.itemClicked.forNode", data); }); + scope.$on("changedCurrentAgent", function( event, agentName ) { + var responseSummaryData = null; + var loadData = null; + if ( agentName === "All" ) { + responseSummaryData = scope.node.histogram; + loadData = scope.node.timeSeriesHistogram; + } else { + responseSummaryData = scope.node.agentHistogram[agentName]; + loadData = scope.node.agentTimeSeriesHistogram[agentName]; + } + renderResponseSummary("forNode", scope.node.applicationName, responseSummaryData, "100%", "150px"); + renderLoad("forNode", scope.node.applicationName, loadData, "100%", "220px", true); + }); - jQuery('.responseSummaryChartTooltip').tooltipster({ + jQuery(".responseSummaryChartTooltip").tooltipster({ content: function() { return helpContentTemplate(helpContentService.nodeInfoDetails.responseSummary); }, position: "top", trigger: "click" }); - jQuery('.loadChartTooltip').tooltipster({ + jQuery(".loadChartTooltip").tooltipster({ content: function() { return helpContentTemplate(helpContentService.nodeInfoDetails.load); }, diff --git a/web/src/main/webapp/features/responseTimeChart/response-time-chart.directive.js b/web/src/main/webapp/features/responseTimeChart/response-time-chart.directive.js index c3521ee78..e2f057120 100644 --- a/web/src/main/webapp/features/responseTimeChart/response-time-chart.directive.js +++ b/web/src/main/webapp/features/responseTimeChart/response-time-chart.directive.js @@ -11,8 +11,8 @@ myColors: ["#2ca02c", "#3c81fa", "#f8c731", "#f69124", "#f53034"] }); - pinpointApp.directive('responseTimeChartDirective', ['responseTimeChartDirectiveConfig', '$timeout', 'AnalyticsService', - function (cfg, $timeout, analyticsService) { + pinpointApp.directive('responseTimeChartDirective', ['responseTimeChartDirectiveConfig', 'responseTypeColor', '$timeout', 'AnalyticsService', + function (cfg, responseTypeColor, $timeout, analyticsService) { return { template: '
', replace: true, @@ -150,7 +150,7 @@ newData.push({ responseTime: key, count: data[key], - color: cfg.myColors[i], + color: responseTypeColor[i], alpha: alpha[i++] }); } diff --git a/web/src/main/webapp/features/scatter/jquery.BigScatterChart.js b/web/src/main/webapp/features/scatter/jquery.BigScatterChart.js index dca3b73e2..514e23141 100644 --- a/web/src/main/webapp/features/scatter/jquery.BigScatterChart.js +++ b/web/src/main/webapp/features/scatter/jquery.BigScatterChart.js @@ -16,11 +16,10 @@ var BigScatterChart = $.Class({ * @param {Object} option option object * @param {Service} helpContentService angularjs service object */ - $init: function (htOption, aAgentList, tooltipService, webStorage, analyticsService) { - this._consts = { - "ALL": "All" - }; + $init: function (htOption, aAgentList, tooltipService, webStorage, analyticsService, CONST_SET) { + this._constSet = CONST_SET; this.analyticsService = analyticsService; + this._currentAgent = this._constSet.AGENT_ALL; this._aAgentList = aAgentList; this.option({ "sContainerId": "", @@ -213,12 +212,6 @@ var BigScatterChart = $.Class({ "margin-top": "5px" }); - this._welAgentSelect.append(''); - jQuery.each( this._aAgentList, function( index, value ) { - self._welAgentSelect.append(''); - }); - this._welAgentSelect.appendTo( this._welContainer ); - // guide this._welGuideCanvas = $("") .attr({ @@ -699,15 +692,14 @@ var BigScatterChart = $.Class({ } e.preventDefault(); - var currentAgent = self._welAgentSelect.val(); - if ( currentAgent === self._consts.ALL ) { + if ( self._currentAgent === self._constSet.AGENT_ALL ) { jQuery.each( self._htwelChartCanvas, function( k, obj ) { if ( k.endsWith( sKey ) ) { obj.toggle(); } }); } else { - self._htwelChartCanvas[currentAgent + "-" + sPrefix + sKey].toggle(); + self._htwelChartCanvas[self._currentAgent + "-" + sPrefix + sKey].toggle(); } if (!welTypeLi.hasClass("unchecked")) { @@ -749,10 +741,6 @@ var BigScatterChart = $.Class({ } } }); - - this._welAgentSelect.on("change", function() { - self.selectAgent( $(this).val() ); - }); }, fireDragEvent: function( oParam ) { var fOnSelect = this.option("fOnSelect"); @@ -1416,7 +1404,7 @@ var BigScatterChart = $.Class({ for (var i = 0, nLen = aBubbleStep.length; i < nLen; i++) { var oBubbleStep = aBubbleStep[i]; for( var p in oBubbleStep ) { - if ( currentAgent === self._consts.ALL || currentAgent == p ) { + if ( currentAgent === self._constSet.AGENT_ALL || currentAgent == p ) { var aBubbleStepData = oBubbleStep[p]; for (var j = 0, nLen2 = aBubbleStepData.nLength; j < nLen2; j++) { var oBubbleData = aBubbles[i][p][j]; @@ -1721,12 +1709,22 @@ var BigScatterChart = $.Class({ this._bPause = false; this._drawWithDataSource(); }, - selectAgent: function( agentName ) { + selectAgent: function( agentName, bInitCheck ) { var self = this; - var bIsAll = agentName === this._consts.ALL; + var bIsAll = agentName === this._constSet.AGENT_ALL; var sPrefix = this.option("sPrefix"); - var viewSuccess = this._htwelTypeLi["Success"].hasClass("unchecked") === false; - var viewFail = this._htwelTypeLi["Failed"].hasClass("unchecked") === false; + + var viewSuccess = true; + var viewFail = true; + if ( bInitCheck === true) { + var htCheckBoxImage = this.option("htCheckBoxImage"); + self._htwelTypeLi["Success"].removeClass("unchecked").css("background-image", "url(" + htCheckBoxImage.checked + ")"); + self._htwelTypeLi["Failed"].removeClass("unchecked").css("background-image", "url(" + htCheckBoxImage.checked + ")"); + } else { + viewSuccess = this._htwelTypeLi["Success"].hasClass("unchecked") === false; + viewFail = this._htwelTypeLi["Failed"].hasClass("unchecked") === false; + } + this._currentAgent = agentName; jQuery.each( this._htwelChartCanvas, function( sKey, sVal ) { if ( bIsAll ) { @@ -1762,7 +1760,7 @@ var BigScatterChart = $.Class({ }); }); jQuery.each( htTypeCount, function( sKey, nVal ) { - self._htwelTypeLi[sKey].find("span").html( nVal ); + self._htwelTypeSpan[sKey].html( self._addComma( parseInt(nVal) ) ); }); } }); \ No newline at end of file diff --git a/web/src/main/webapp/features/scatter/scatter.directive.js b/web/src/main/webapp/features/scatter/scatter.directive.js index f8f154a5b..b76d27b0f 100644 --- a/web/src/main/webapp/features/scatter/scatter.directive.js +++ b/web/src/main/webapp/features/scatter/scatter.directive.js @@ -63,8 +63,8 @@ } }); - pinpointApp.directive("scatterDirective", ["scatterDirectiveConfig", "$rootScope", "$compile", "$timeout", "webStorage", "$window", "TooltipService", "AnalyticsService", - function (cfg, $rootScope, $compile, $timeout, webStorage, $window, tooltipService, analyticsService) { + pinpointApp.directive("scatterDirective", ["scatterDirectiveConfig", "$rootScope", "$compile", "$timeout", "webStorage", "$window", "TooltipService", "AnalyticsService", "CONST_SET", + function (cfg, $rootScope, $compile, $timeout, webStorage, $window, tooltipService, analyticsService, CONST_SET) { return { template: cfg.template, restrict: "EA", @@ -93,13 +93,11 @@ $window.open( "#/scatterFullScreenMode/" + htLastNode.applicationName + "@" + htLastNode.serviceType + "/" + oNavbarVoService.getPartialURL( false, true ) + "/" + getAgentList().join(","), "width=900, height=700, resizable=yes"); }; - var oScatterChart = new BigScatterChart(options, getAgentList(scatterData), tooltipService, webStorage, analyticsService); + var oScatterChart = new BigScatterChart(options, getAgentList(scatterData), tooltipService, webStorage, analyticsService, CONST_SET); $timeout(function () { if (angular.isUndefined(scatterData)) { - // 주는 데이터가 없으면 기반 정보를 기반으로 로딩 oScatterChart.drawWithDataSource(getDataSource(applicationName, start, end, filter)); } else { - // 주는 데이터가 있으면 그걸로 끝. oScatterChart.addBubbleAndMoveAndDraw(scatterData.scatter, scatterData.resultFrom); } $window.htoScatter[application] = oScatterChart; @@ -113,6 +111,7 @@ if (angular.isDefined(htScatterSet[application])) { htScatterSet[application].target.show(); htScatterSet[application].scatter.resume(); + htScatterSet[application].scatter.selectAgent(CONST_SET.AGENT_ALL, true); } else { makeNewScatter( application, w, h ); } @@ -139,6 +138,7 @@ element.children().hide(); if (angular.isDefined(htScatterSet[application])) { htScatterSet[application].target.show(); + htScatterSet[application].scatter.selectAgent(CONST_SET.AGENT_ALL, true); } } @@ -235,6 +235,7 @@ element.empty(); }); scope.$on("scatterDirective.initializeWithNode", function (event, node, w, h) { + scope.currentAgent = CONST_SET.AGENT_ALL; htLastNode = node; showScatter(node.key, w, h); }); @@ -242,7 +243,8 @@ var aSplit = application.split("^"); htLastNode = { applicationName: aSplit[0], - serviceType: aSplit[1] + serviceType: aSplit[1], + key: application }; showScatterWithData(application, null, null, data); }); @@ -251,7 +253,7 @@ showScatterBy(node.key); }); scope.$on("responseTimeChartDirective.showErrorTransacitonList", function() { - $window.htoScatter[htLastNode.applicationName].selectFailedOnly().fireDragEvent({ + $window.htoScatter[htLastNode.key].selectFailedOnly().fireDragEvent({ animate: function() {}, css : function( param ) { return ( param === "left" ) ? "51px" : "40px"; @@ -264,6 +266,9 @@ } }); }); + scope.$on("changedCurrentAgent", function( event, selectedAgentName ) { + htScatterSet[htLastNode.key].scatter.selectAgent( selectedAgentName ); + }); } }; } diff --git a/web/src/main/webapp/features/serverMap/serverMap.html b/web/src/main/webapp/features/serverMap/serverMap.html index 95c8e75db..47bdf83d1 100644 --- a/web/src/main/webapp/features/serverMap/serverMap.html +++ b/web/src/main/webapp/features/serverMap/serverMap.html @@ -1,7 +1,7 @@
-
+
@@ -20,7 +20,7 @@
- +
diff --git a/web/src/main/webapp/features/sidebar/title/sidebar-title.directive.js b/web/src/main/webapp/features/sidebar/title/sidebar-title.directive.js index 7b18e87ff..37724a41f 100644 --- a/web/src/main/webapp/features/sidebar/title/sidebar-title.directive.js +++ b/web/src/main/webapp/features/sidebar/title/sidebar-title.directive.js @@ -1,5 +1,5 @@ (function() { - 'use strict'; + "use strict"; /** * (en)sidebarTitleDirective * @ko sidebarTitleDirective @@ -7,32 +7,41 @@ * @name sidebarTitleDirective * @class */ - pinpointApp.directive('sidebarTitleDirective', [ '$timeout', - function ($timeout) { + pinpointApp.directive("sidebarTitleDirective", [ "$timeout", "$rootScope", "CONST_SET", + function ($timeout, $rootScope, CONST_SET) { return { - restrict: 'E', + restrict: "E", replace: true, - templateUrl: 'features/sidebar/title/sidebarTitle.html?v=' + G_BUILD_TIME, + templateUrl: "features/sidebar/title/sidebarTitle.html?v=" + G_BUILD_TIME, scope: { - namespace: '@' + namespace: "@" }, link: function poLink(scope, element, attrs) { - - // define private variables of methods - var initialize, empty; - - /** - * bootrap - */ + scope.agentList = []; + $timeout(function () { empty(); }); + + function initializeAgentList( node ) { + scope.currentAgent = CONST_SET.AGENT_ALL; + if ( typeof node === "undefined" ) { + scope.agentList = []; + return; + } + var aAgentList = []; + if ( node.serverList ) { + for ( var server in node.serverList ) { + var oInstanceList = node.serverList[server].instanceList; + for (var agentName in oInstanceList) { + aAgentList.push(agentName); + } + } + } + scope.agentList = aAgentList; + } - /** - * initialize - * @param oSidebarTitleVoService - */ - initialize = function (oSidebarTitleVoService) { + function initialize(oSidebarTitleVoService) { scope.stImage = oSidebarTitleVoService.getImage(); scope.stImageShow = oSidebarTitleVoService.getImage() ? true : false; scope.stTitle = oSidebarTitleVoService.getTitle(); @@ -40,35 +49,38 @@ scope.stImage2Show = oSidebarTitleVoService.getImage2() ? true : false; scope.stTitle2 = oSidebarTitleVoService.getTitle2(); $timeout(function () { - element.find('[data-toggle="tooltip"]').tooltip('destroy').tooltip(); + element.find('[data-toggle="tooltip"]').tooltip("destroy").tooltip(); }); - }; + } - /** - * empty - */ - empty = function () { + function empty() { + scope.currentAgent = CONST_SET.AGENT_ALL; scope.stImage = false; scope.stImageShow = false; scope.stTitle = false; scope.stImage2 = false; scope.stTitle2 = false; scope.stImage2Show = false; - }; - + scope.agentList = []; + } + scope.changeAgent = function() { + $rootScope.$broadcast("changedCurrentAgent", scope.currentAgent ); + }; /** * scope on sidebarTitle.initialize.namespace */ - scope.$on('sidebarTitleDirective.initialize.' + scope.namespace, function (event, oSidebarTitleVoService) { + scope.$on("sidebarTitleDirective.initialize." + scope.namespace, function (event, oSidebarTitleVoService, node) { + initializeAgentList( node ); initialize(oSidebarTitleVoService); }); /** * scope on sidebarTitle.empty.namespace */ - scope.$on('sidebarTitleDirective.empty.' + scope.namespace, function (event) { + scope.$on("sidebarTitleDirective.empty." + scope.namespace, function (event) { empty(); }); + } }; }] diff --git a/web/src/main/webapp/features/sidebar/title/sidebarTitle.html b/web/src/main/webapp/features/sidebar/title/sidebarTitle.html index d4e075dc1..4355acfd3 100644 --- a/web/src/main/webapp/features/sidebar/title/sidebarTitle.html +++ b/web/src/main/webapp/features/sidebar/title/sidebarTitle.html @@ -9,5 +9,9 @@ {{stTitle2}} +
diff --git a/web/src/main/webapp/pages/main/main.controller.js b/web/src/main/webapp/pages/main/main.controller.js index 93f679068..ec1c4cc2b 100644 --- a/web/src/main/webapp/pages/main/main.controller.js +++ b/web/src/main/webapp/pages/main/main.controller.js @@ -175,7 +175,7 @@ $scope.hasScatter = false; } $scope.hasFilter = false; - $scope.$broadcast('sidebarTitleDirective.initialize.forMain', oSidebarTitleVoService); + $scope.$broadcast('sidebarTitleDirective.initialize.forMain', oSidebarTitleVoService, node); $scope.$broadcast('nodeInfoDetailsDirective.initialize', e, query, node, data, oNavbarVoService, null, searchQuery); $scope.$broadcast('linkInfoDetailsDirective.hide'); @@ -269,7 +269,7 @@ $scope.$on('nodeInfoDetailDirective.showDetailInformationClicked', function (event, query, node) { $scope.hasScatter = false; var oSidebarTitleVoService = new SidebarTitleVoService; - + oSidebarTitleVoService .setImageType(node.serviceType); if (node.unknownNodeGroup) { @@ -279,11 +279,11 @@ oSidebarTitleVoService.setTitle(node.applicationName); $scope.hasScatter = false; } - + $scope.$broadcast('sidebarTitleDirective.initialize.forMain', oSidebarTitleVoService); $scope.$broadcast('linkInfoDetailsDirective.hide'); }); - + $scope.loadingOption = { hideTip : "init" }; diff --git a/web/src/main/webapp/scripts/app.js b/web/src/main/webapp/scripts/app.js index 4ad1799ab..c166fcb8e 100644 --- a/web/src/main/webapp/scripts/app.js +++ b/web/src/main/webapp/scripts/app.js @@ -62,8 +62,11 @@ pinpointApp.config(['$routeProvider', '$locationProvider', '$modalProvider', fun // $sceProvider.enabled(false); }]); +pinpointApp.value("responseTypeColor", [ "#2ca02c", "#3c81fa", "#f8c731", "#f69124", "#f53034" ]); pinpointApp.value("globalConfig", {}); - +pinpointApp.value("CONST_SET", { + AGENT_ALL: "All" +}); pinpointApp.run([ '$rootScope', '$window', '$timeout', '$modal', '$location', '$route', '$cookies', '$interval', '$http', 'globalConfig', function ($rootScope, $window, $timeout, $modal, $location, $route, $cookies, $interval, $http, globalConfig) { var original = $location.path;