diff --git a/src/main/webapp/scripts/directives/agentList.js b/src/main/webapp/scripts/directives/agentList.js index e2b74a072..f830c3e18 100644 --- a/src/main/webapp/scripts/directives/agentList.js +++ b/src/main/webapp/scripts/directives/agentList.js @@ -49,7 +49,7 @@ pinpointApp ]); // jQuery.ajax({ // type: 'GET', -// url: cfg.agentListUrl, +// url: cfg.agentGroupUrl, // cache: false, // dataType: 'json', // data: { diff --git a/src/main/webapp/scripts/directives/callStacks.js b/src/main/webapp/scripts/directives/callStacks.js index 3a82bc60b..4ce4b4adf 100644 --- a/src/main/webapp/scripts/directives/callStacks.js +++ b/src/main/webapp/scripts/directives/callStacks.js @@ -7,10 +7,16 @@ pinpointApp.directive('callStacks', [ function () { templateUrl: 'views/callStacks.html', link: function postLink(scope, element, attrs) { + // define private variables of methods var initialize; + // initialize scope variables scope.transactionDetail = null; + /** + * initialize + * @param transactionDetail + */ initialize = function (transactionDetail) { scope.transactionDetail = transactionDetail; scope.key = transactionDetail.callStackIndex; @@ -22,6 +28,9 @@ pinpointApp.directive('callStacks', [ function () { }); }; + /** + * scope event on callStacks.initialize + */ scope.$on('callStacks.initialize', function (event, transactionDetail) { initialize(transactionDetail); }); diff --git a/src/main/webapp/scripts/directives/divider.js b/src/main/webapp/scripts/directives/divider.js deleted file mode 100644 index 6742e4bb5..000000000 --- a/src/main/webapp/scripts/directives/divider.js +++ /dev/null @@ -1,22 +0,0 @@ -'use strict'; - -pinpointApp - .directive('divider', ['$rootScope', function ($rootScope) { - return { - restrict: 'EA', - replace: true, - templateUrl: 'views/divider.html', - link: function postLink(scope, element, attrs) { - scope.onoff = 'divider-open'; - scope.toggle = function(){ - if(scope.onoff === 'divider-open'){ - scope.onoff = 'divider-closed'; - $rootScope.$broadcast('dividerClosed'); - }else{ - scope.onoff = 'divider-open'; - $rootScope.$broadcast('dividerOpen'); - } - }; - } - }; - }]); diff --git a/src/main/webapp/scripts/directives/linkInfoDetails.js b/src/main/webapp/scripts/directives/linkInfoDetails.js index fa8476c5a..652c251b5 100644 --- a/src/main/webapp/scripts/directives/linkInfoDetails.js +++ b/src/main/webapp/scripts/directives/linkInfoDetails.js @@ -2,219 +2,218 @@ pinpointApp.constant('linkInfoDetailsConfig', { linkStatisticsUrl: '/linkStatistics.pinpoint', - myColors : ["#008000", "#4B72E3", "#A74EA7", "#BB5004", "#FF0000"] + myColors: ["#008000", "#4B72E3", "#A74EA7", "#BB5004", "#FF0000"] }); -pinpointApp - .directive('linkInfoDetails', [ 'linkInfoDetailsConfig', function (config) { - return { - restrict: 'EA', - replace: true, - templateUrl: 'views/linkInfoDetails.html', - link: function postLink(scope, element, attrs) { +pinpointApp.directive('linkInfoDetails', [ 'linkInfoDetailsConfig', function (config) { + return { + restrict: 'EA', + replace: true, + templateUrl: 'views/linkInfoDetails.html', + link: function postLink(scope, element, attrs) { - // define private variables - var htQuery; + // define private variables + var htQuery; - // define private variables of methods; - var reset, showDetailInformation, getLinkStatisticsData, renderStatisticsTimeseriesHistogram, renderStatisticsSummary, showApplicationStatistics; + // define private variables of methods; + var reset, showDetailInformation, getLinkStatisticsData, renderStatisticsTimeseriesHistogram, renderStatisticsSummary, showApplicationStatistics; - /** - * reset - */ - reset = function () { - scope.linkCategory = null; - scope.rawdata = null; - scope.query = null; - scope.targetinfo = null; - scope.sourceinfo = null; - scope.showLinkInfoChart = false; - scope.showLinkInfoBarChart = false; - scope.$digest(); - }; + /** + * reset + */ + reset = function () { + scope.linkCategory = null; + scope.rawdata = null; + scope.query = null; + scope.targetinfo = null; + scope.sourceinfo = null; + scope.showLinkInfoChart = false; + scope.showLinkInfoBarChart = false; + scope.$digest(); + }; - /** - * show detail information of scope - * @param applicationName - */ - scope.showDetailInformation = function (applicationName) { - showDetailInformation(scope.rawdata[applicationName]); - }; + /** + * show detail information of scope + * @param applicationName + */ + scope.showDetailInformation = function (applicationName) { + showDetailInformation(scope.rawdata[applicationName]); + }; - /** - * show detail information - * @param query - * @param data - */ - showDetailInformation = function (data) { - console.log('showDetailInformation', data); - if (data.rawdata) { - scope.linkCategory = 'UnknownLinkInfoBox'; - } else { - scope.linkCategory = 'LinkInfoBox'; - showApplicationStatistics( - htQuery.from, - htQuery.to, - data.sourceinfo.serviceTypeCode, - data.sourceinfo.applicationName, - data.targetinfo.serviceTypeCode, - data.targetinfo.applicationName - ); + /** + * show detail information + * @param query + * @param data + */ + showDetailInformation = function (data) { + console.log('showDetailInformation', data); + if (data.rawdata) { + scope.linkCategory = 'UnknownLinkInfoBox'; + } else { + scope.linkCategory = 'LinkInfoBox'; + showApplicationStatistics( + htQuery.from, + htQuery.to, + data.sourceinfo.serviceTypeCode, + data.sourceinfo.applicationName, + data.targetinfo.serviceTypeCode, + data.targetinfo.applicationName + ); + } + + scope.rawdata = data.rawdata; + scope.query = data.query; + scope.targetinfo = data.targetinfo; + scope.sourceinfo = data.sourceinfo; + scope.$digest(); + }; + + /** + * get link statistics data + * @param query + * @param callback + */ + getLinkStatisticsData = function (query, callback) { + jQuery.ajax({ + type: 'GET', + url: config.linkStatisticsUrl, + cache: false, + dataType: 'json', + data: { + from: query.from, + to: query.to, + srcServiceType: query.srcServiceType, + srcApplicationName: query.srcApplicationName, + destServiceType: query.destServiceType, + destApplicationName: query.destApplicationName + }, + success: function (result) { + callback(query, result); + }, + error: function (xhr, status, error) { + console.log("ERROR", status, error); } + }); + }; - scope.rawdata = data.rawdata; - scope.query = data.query; - scope.targetinfo = data.targetinfo; - scope.sourceinfo = data.sourceinfo; - scope.$digest(); - }; - - /** - * get link statistics data - * @param query - * @param callback - */ - getLinkStatisticsData = function (query, callback) { - jQuery.ajax({ - type : 'GET', - url : config.linkStatisticsUrl, - cache : false, - dataType: 'json', - data : { - from : query.from, - to : query.to, - srcServiceType : query.srcServiceType, - srcApplicationName : query.srcApplicationName, - destServiceType : query.destServiceType, - destApplicationName : query.destApplicationName - }, - success : function (result) { - callback(query, result); - }, - error : function (xhr, status, error) { - console.log("ERROR", status, error); - } - }); - }; - - /** - * render statistics timseries histogram - * @param data - */ - renderStatisticsTimeseriesHistogram = function (data) { - nv.addGraph(function() { - var chart = nv.models.multiBarChart().x(function (d) { - return d[0]; - }).y(function(d) { + /** + * render statistics timseries histogram + * @param data + */ + renderStatisticsTimeseriesHistogram = function (data) { + nv.addGraph(function () { + var chart = nv.models.multiBarChart().x(function (d) { + return d[0]; + }).y(function (d) { return d[1]; }).clipEdge(true).showControls(false); - chart.stacked(true); + chart.stacked(true); - chart.xAxis.tickFormat(function (d) { - return d3.time.format('%H:%M')(new Date(d)); - }); - - chart.yAxis.tickFormat(function (d) { - return d; - }); - - chart.color(config.myColors); - - d3.select('.linkInfoDetails .infoChart svg') - .datum(data) - .transition() - .duration(0) - .call(chart); - - nv.utils.windowResize(chart.update); - - return chart; + chart.xAxis.tickFormat(function (d) { + return d3.time.format('%H:%M')(new Date(d)); }); - }; - /** - * render statics summary - * @param data - */ - renderStatisticsSummary = function (data) { - nv.addGraph(function() { - var chart = nv.models.discreteBarChart().x(function (d) { - return d.label; - }).y(function (d) { + chart.yAxis.tickFormat(function (d) { + return d; + }); + + chart.color(config.myColors); + + d3.select('.linkInfoDetails .infoChart svg') + .datum(data) + .transition() + .duration(0) + .call(chart); + + nv.utils.windowResize(chart.update); + + return chart; + }); + }; + + /** + * render statics summary + * @param data + */ + renderStatisticsSummary = function (data) { + nv.addGraph(function () { + var chart = nv.models.discreteBarChart().x(function (d) { + return d.label; + }).y(function (d) { return d.value; }).staggerLabels(false).tooltips(false).showValues(true); - chart.xAxis.tickFormat(function (d) { - if(angular.isNumber(d)) { - return (d >= 1000) ? d / 1000 + "s" : d + "ms"; - } - return d; - }); - - chart.yAxis.tickFormat(function (d) { - return d; - }); - - chart.valueFormat(function (d) { - return d; - }); - - chart.color(config.myColors); - - d3.select('.linkInfoDetails .infoBarChart svg') - .datum(data) - .transition() - .duration(0) - .call(chart); - - nv.utils.windowResize(chart.update); - - return chart; + chart.xAxis.tickFormat(function (d) { + if (angular.isNumber(d)) { + return (d >= 1000) ? d / 1000 + "s" : d + "ms"; + } + return d; }); + + chart.yAxis.tickFormat(function (d) { + return d; + }); + + chart.valueFormat(function (d) { + return d; + }); + + chart.color(config.myColors); + + d3.select('.linkInfoDetails .infoBarChart svg') + .datum(data) + .transition() + .duration(0) + .call(chart); + + nv.utils.windowResize(chart.update); + + return chart; + }); + }; + + /** + * show application statistics + * @param begin + * @param end + * @param srcServiceType + * @param srcApplicationName + * @param destServiceType + * @param destApplicationName + */ + showApplicationStatistics = function (begin, end, srcServiceType, srcApplicationName, destServiceType, destApplicationName) { + var params = { + "from": begin, + "to": end, + "srcServiceType": srcServiceType, + "srcApplicationName": srcApplicationName, + "destServiceType": destServiceType, + "destApplicationName": destApplicationName }; - /** - * show application statistics - * @param begin - * @param end - * @param srcServiceType - * @param srcApplicationName - * @param destServiceType - * @param destApplicationName - */ - showApplicationStatistics = function (begin, end, srcServiceType, srcApplicationName, destServiceType, destApplicationName) { - var params = { - "from" : begin, - "to" : end, - "srcServiceType" : srcServiceType, - "srcApplicationName" : srcApplicationName, - "destServiceType" : destServiceType, - "destApplicationName" : destApplicationName - }; - - getLinkStatisticsData(params, function(query, result) { - scope.showLinkInfoChart = true; - scope.showLinkInfoBarChart = true; - scope.$digest(); - renderStatisticsTimeseriesHistogram(result.timeseriesHistogram); - renderStatisticsSummary(result.histogramSummary); - }); - }; - - // define scope events on - scope.$on('servermap.nodeClicked', function (event, e, query, data) { - reset(); + getLinkStatisticsData(params, function (query, result) { + scope.showLinkInfoChart = true; + scope.showLinkInfoBarChart = true; + scope.$digest(); + renderStatisticsTimeseriesHistogram(result.timeseriesHistogram); + renderStatisticsSummary(result.histogramSummary); }); - scope.$on('servermap.linkClicked', function (event, e, query, data) { - reset(); - htQuery = query; - showDetailInformation(data); - }); - scope.$on('servermap.linkContextClicked', function (event, e, query, data) { + }; + + // define scope events on + scope.$on('servermap.nodeClicked', function (event, e, query, data) { + reset(); + }); + scope.$on('servermap.linkClicked', function (event, e, query, data) { + reset(); + htQuery = query; + showDetailInformation(data); + }); + scope.$on('servermap.linkContextClicked', function (event, e, query, data) { // alert('linkContextClicked'); - }); + }); - } - }; - } ]); + } + }; +} ]);