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

Merge pull request #1507 from denzelsN/master

Browse Source 
update some feature.
This commit is contained in:
HyoJong
2016-02-01 18:47:55 +09:00
parent 1cd23f6e88 12c487e524
commit 9b291712fc
11 changed files with 179 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/main/webapp/features/linkInfoDetails/link-info-details.directive.js
-2
View File
@@ -8,8 +8,6 @@
* @class
*/
pinpointApp.constant('linkInfoDetailsDirectiveConfig', {
linkStatisticsUrl: '/linkStatistics.pinpoint',
myColors: ["#2ca02c", "#3c81fa", "#f8c731", "#f69124", "#f53034"],
maxTimeToShowLoadAsDefaultForUnknown: 60 * 60 * 12 // 12h
});
web/src/main/webapp/features/loadChart/load-chart.directive.js
+18 -21
View File
@@ -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: '<div style="text-align:center"></div>',
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]] : <b>[[value]]</b>",
// "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]] : <b>[[value]]</b>",
"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]] : <b>[[value]]</b>",
"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]] : <b>[[value]]</b>",
"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]] : <b>[[value]]</b>",
"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",
web/src/main/webapp/features/nodeInfoDetails/node-info-details.directive.js
+71 -63
View File
@@ -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);
},
web/src/main/webapp/features/responseTimeChart/response-time-chart.directive.js
+3 -3
View File
@@ -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: '<div></div>',
replace: true,
@@ -150,7 +150,7 @@
newData.push({
responseTime: key,
count: data[key],
color: cfg.myColors[i],
color: responseTypeColor[i],
alpha: alpha[i++]
});
}
web/src/main/webapp/features/scatter/jquery.BigScatterChart.js
+21 -23
View File
@@ -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('<option value="' + this._consts.ALL + '" selected>' + this._consts.ALL + '</option>');
jQuery.each( this._aAgentList, function( index, value ) {
self._welAgentSelect.append('<option value="'+ value + '">' + value + '</option>');
});
this._welAgentSelect.appendTo( this._welContainer );
// guide
this._welGuideCanvas = $("<canvas>")
.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) ) );
});
}
});
web/src/main/webapp/features/scatter/scatter.directive.js
+12 -7
View File
@@ -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 );
});
}
};
}
web/src/main/webapp/features/serverMap/serverMap.html
+2 -2
View File
@@ -1,7 +1,7 @@
<div class="servermap">
<div id="servermap" style="width:100%;height:100%;position: relative;"></div>
<div id="servermapOverview"></div>
<div class="servermap-toolbar" ng-show="bShowServerMapStatus">
<div class="servermap-toolbar" ng-show="bShowServerMapStatus" style="top:-55px">
<span class="glyphicon glyphicon-question-sign serverMapTooltip"></span>
<div class="servermap-status" style="right:420px">
<input type="text" class="form-control" ng-keydown="searchNodeByEnter($event)" ng-model="searchNodeQuery" placeholder="Enter node name" style="display:inline-block;;width:147px"/>
@@ -20,7 +20,7 @@
</div>
</div>
<div class="servermap-toolbar-handle" ng-show="bShowServerMapStatus">
<button type="button" class="btn btn-xs btn-default btn-info" ng-click="toggleToolbar()" style="height:54px"><span class="glyphicon glyphicon-chevron-up"></span></button>
<button type="button" class="btn btn-xs btn-default btn-info" ng-click="toggleToolbar()" style="height:54px"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
<div ng-include=" 'error' "></div>
<div ng-include=" 'warning' "></div>
web/src/main/webapp/features/sidebar/title/sidebar-title.directive.js
+40 -28
View File
@@ -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();
});
}
};
}]
web/src/main/webapp/features/sidebar/title/sidebarTitle.html
+4
View File
@@ -9,5 +9,9 @@
<img ng-src="{{stImage2}}" style="height:25px;" ng-if="stImage2Show"/>
<span>{{stTitle2}}</span>
</span>
<select ng-show="stTitle2 === false" ng-model="currentAgent" ng-change="changeAgent()" class="form-control" style="float:right;width:160px;margin-top:10px;padding:2px 4px;height:24px;line-height:1;font-size:12px">
<option value="All" selected>All</option>
<option ng-repeat="agentName in agentList" value="{{agentName}}">{{agentName}}</option>
</select>
</h3>
</div>
web/src/main/webapp/pages/main/main.controller.js
+4 -4
View File
@@ -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"
};
web/src/main/webapp/scripts/app.js
+4 -1
View File
@@ -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;