mirror of
https://github.com/wahyd4/pinpoint.git
synced 2026-08-16 08:16:15 +10:00
[임대현] [NOBTS] 리펙토링
git-svn-id: http://svn.bds.nhncorp.com/pe/hippo-web/trunk@2533 84d0f5b1-2673-498c-a247-62c4ff18d310
This commit is contained in:
@@ -49,7 +49,7 @@ pinpointApp
|
||||
]);
|
||||
// jQuery.ajax({
|
||||
// type: 'GET',
|
||||
// url: cfg.agentListUrl,
|
||||
// url: cfg.agentGroupUrl,
|
||||
// cache: false,
|
||||
// dataType: 'json',
|
||||
// data: {
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
}]);
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
} ]);
|
||||
}
|
||||
};
|
||||
} ]);
|
||||
|
||||
Reference in New Issue
Block a user