Skip to content

Commit 2c77e69

Browse files
denzelsNdenzelsN
committed
update thread-dump layer ui
1 parent ffe7c99 commit 2c77e69

File tree

5 files changed

+163
-139
lines changed

5 files changed

+163
-139
lines changed

‎web/src/main/webapp/common/services/analytics.service.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
this.CONST.CLK_CHANGE_AGENT_INSPECTOR = "ClickChangeAgentInspector";
7070
this.CONST.CLK_CHANGE_AGENT_MAIN = "ClickChangeAgentMain";
7171
this.CONST.CLK_START_REALTIME = "ClickStartRealtime";
72+
this.CONST.CLK_OPEN_THREAD_DUMP_LAYER = "ClickOpenThreadDumpLayer";
7273

7374
this.CONST.CLK_CONFIGURATION = "ClickConfiguration";
7475
this.CONST.CLK_GENERAL = "ClickConfigurationGeneral";

‎web/src/main/webapp/features/realtimeChart/realtime-chart.controller.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
});
5353

5454
pinpointApp.controller( "RealtimeChartCtrl", [ "RealtimeChartCtrlConfig", "$scope", "$element", "$rootScope", "$compile", "$timeout", "$window", "$http", "globalConfig", "UrlVoService", "RealtimeWebsocketService", "AnalyticsService", "TooltipService",
55-
function (cfg, $scope, $element, $rootScope, $compile, $timeout, $window, $http, globalConfig, UrlVoService, webSocketService, analyticsService, tooltipService) {
55+
function (cfg, $scope, $element, $rootScope, $compile, $timeout, $window, $http, globalConfig, UrlVoService, webSocketService, AnalyticsService, tooltipService) {
5656
$element = $($element);
5757
//@TODO will move to preference-service
5858
var TIMEOUT_MAX_COUNT = 10;
@@ -405,11 +405,11 @@
405405
};
406406
$scope.pin = function() {
407407
bIsPinned = !bIsPinned;
408-
analyticsService.send( analyticsService.CONST.MAIN, bIsPinned ? analyticsService.CONST.CLK_REALTIME_CHART_PIN_ON : analyticsService.CONST.CLK_REALTIME_CHART_PIN_OFF );
408+
AnalyticsService.send( AnalyticsService.CONST.MAIN, bIsPinned ? AnalyticsService.CONST.CLK_REALTIME_CHART_PIN_ON : AnalyticsService.CONST.CLK_REALTIME_CHART_PIN_OFF );
409409
setPinColor();
410410
};
411411
$scope.resizePopup = function($event) {
412-
analyticsService.send( analyticsService.CONST.MAIN, analyticsService.CONST.TG_REALTIME_CHART_RESIZE );
412+
AnalyticsService.send( AnalyticsService.CONST.MAIN, AnalyticsService.CONST.TG_REALTIME_CHART_RESIZE );
413413
var $elBtn = $($event.target);
414414
if ( bIsFullWindow ) {
415415
popupHeight = cfg.css.height;
@@ -437,6 +437,7 @@
437437
}
438438
var agentId = $target.hasClass("agent-chart" ) ? $target.find( "> div" ).html() : $target.parent(".agent-chart").find("> div").html();
439439
$rootScope.$broadcast( "thread-dump-info-layer.open", currentApplicationName, agentId );
440+
AnalyticsService.send( AnalyticsService.CONST.MAIN, AnalyticsService.CONST.CLK_OPEN_THREAD_DUMP_LAYER );
440441
};
441442
function hideSub() {
442443
$rootScope.$broadcast( "thread-dump-info-layer.close" );

‎web/src/main/webapp/features/threadDumpInfoLayer/thread-dump-info-layer.directive.js‎

Lines changed: 33 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
pinpointApp.constant("ThreadDumpInfoLayerDirectiveConfig", {
44
ACTIVE_THREAD_LIGHT_DUMP_URL: "agent/activeThreadLightDump.pinpoint",
55
ACTIVE_THREAD_DUMP_URL: "agent/activeThreadDump.pinpoint",
6-
PADDING_WIDTH: 15, // %
6+
PADDING_WIDTH: 5, // %
77
PADDING_HEIGHT: 15 // %
88
});
9-
pinpointApp.directive( "threadDumpInfoLayerDirective", [ "ThreadDumpInfoLayerDirectiveConfig", "$rootScope", "$timeout", "$http", "$window", "CommonUtilService", "AnalyticsService",
10-
function ( cfg, $rootScope, $timeout, $http, $window, CommonUtilService, AnalyticsService ) {
9+
pinpointApp.directive( "threadDumpInfoLayerDirective", [ "ThreadDumpInfoLayerDirectiveConfig", "$rootScope", "$timeout", "$http", "$window", "CommonUtilService",
10+
function ( cfg, $rootScope, $timeout, $http, $window, CommonUtilService ) {
1111
return {
1212
restrict: "EA",
1313
replace: true,
@@ -18,10 +18,9 @@
1818
link: function(scope, element) {
1919
var $el = $(element);
2020
var $elSpin = $el.find("i");
21-
var $elHeader = $el.find("table");
2221
var $elListWrapper = $el.find(".thread-list");
23-
var $elList = $elListWrapper.find("tbody");
2422
var $elEmpty = $el.find(".panel-body");
23+
var $elDetailMessage = $el.find(".detail-message");
2524
var $elTextarea = $el.find("textarea");
2625
var oRefListAjax = {
2726
"obj": null,
@@ -31,11 +30,14 @@
3130
"obj": null,
3231
"ing": false
3332
};
34-
var applicationName = "";
33+
var currentAgentId = "";
34+
var currentApplicationName = "";
3535

3636
$el.draggable({
3737
handle: ".panel-heading"
3838
});
39+
scope.threadList = [];
40+
scope.sortType = "-execTime";
3941

4042
initLayerSizeNPosition();
4143
function initAjax( oRef, bForceAbort ) {
@@ -48,30 +50,20 @@
4850
oRef.ing = false;
4951
}
5052
scope.$on( "thread-dump-info-layer.open", function( event, appName, agentId ) {
51-
// 이미 오픈된 상태면 "Loading..."을 어딘가에 표시
52-
// 기존 요청이 끝나지 않았으면 취소 후 새로운 요청 생성
5353
initAjax( oRefListAjax, true );
5454
if ( $el.is(":visible") ) {
5555
$elSpin.show();
5656
}
57-
applicationName = appName;
57+
currentApplicationName = appName;
58+
currentAgentId = agentId;
5859
oRefListAjax.obj = $http( {
5960
"url": cfg.ACTIVE_THREAD_LIGHT_DUMP_URL +
6061
"?applicationName=" + appName +
6162
"&agentId=" + agentId,
6263
"method": "GET"
6364
}).then(function ( oResult ) {
64-
var aThread = oResult.data.message.threadDumpData;
65-
if ( aThread.length === 0 ) {
66-
hideContent();
67-
$elEmpty.show();
68-
$elTextarea.val("");
69-
} else {
70-
$elList.empty();
71-
addThreadDumpData( aThread, agentId );
72-
$elEmpty.hide();
73-
showContent();
74-
}
65+
scope.threadList = oResult.data.message.threadDumpData;
66+
$elTextarea.val("");
7567
$elSpin.hide();
7668
$el.show();
7769
initAjax( oRefListAjax );
@@ -86,105 +78,80 @@
8678
scope.hideThreadDump();
8779
});
8880

81+
scope.changeSortType = function( type ) {
82+
scope.sortType = ( scope.sortType.indexOf( type ) <= 0 ? "-" : "" ) + type;
83+
};
8984
scope.hideThreadDump = function() {
9085
initAjax( oRefListAjax, true );
9186
initAjax( oRefDetailAjax, true );
9287
$el.hide();
9388
$elSpin.hide();
94-
hideContent();
89+
$elTextarea.val("");
9590
};
9691

9792
scope.loadDetailMessage = function( $event ) {
9893
var $elThread = $($( $event.target ).parents("tr")[0]);
94+
$elThread.parent().find(".selected").removeClass("selected").end().end().addClass("selected");
9995
if ( $elThread.attr("data-detail-message") ) {
100-
$elTextarea.val($elThread.attr("data-detail-message")).show();
96+
$elTextarea.val($elThread.attr("data-detail-message"));
10197
} else {
10298
$elSpin.show();
10399
initAjax( oRefDetailAjax, true );
104100
oRefDetailAjax.obj = $http( {
105101
"url": cfg.ACTIVE_THREAD_DUMP_URL +
106-
"?applicationName=" + applicationName +
107-
"&agentId=" + $elThread.attr("data-agent") +
108-
"&threadName=" + $elThread.next().find("td:nth-child(1)").html() +
109-
"&localTraceId=" + $elThread.next().attr("data-traceId"),
102+
"?applicationName=" + currentApplicationName +
103+
"&agentId=" + currentAgentId +
104+
"&threadName=" + $elThread.find("td:nth-child(3)").html() +
105+
"&localTraceId=" + $elThread.attr("data-traceId"),
110106
"method": "GET"
111107
}).then(function ( oResult ) {
112-
$elThread.find("button span").removeClass("glyphicon-repeat").addClass("glyphicon-ok-circle");
113108
var msg = "";
114109
if ( oResult.data.message.threadDumpData.length > 0 ) {
115110
msg = oResult.data.message.threadDumpData[0].detailMessage;
116111
} else {
117112
msg = "There is no message";
118113
}
119114
$elThread.attr("data-detail-message", msg );
120-
$elTextarea.val( msg ).show();
115+
$elTextarea.val( msg );
121116
initAjax( oRefDetailAjax );
122117
$elSpin.hide();
123118
}, function () {
124119
$elSpin.hide();
125-
console.log( arguments );
126120
});
127121
oRefDetailAjax.ing = true;
128122
}
129123
};
130-
131-
function addThreadDumpData( aThread, agentId ) {
132-
for( var i = 0 ; i < aThread.length ; i++ ) {
133-
$elList.append(
134-
'<tr data-agent="' + agentId + '">' +
135-
'<td rowspan="2">' + (i + 1 ) + '</td>' +
136-
'<td>' + aThread[i].threadId + '</td>' +
137-
'<td>' + aThread[i].threadState + '</td>' +
138-
'<td>' + CommonUtilService.formatDate(aThread[i].startTime, "MM/DD HH:mm:ss SSS") + '</td>' +
139-
'<td>' + aThread[i].entryPoint + '</td>' +
140-
'<td rowspan="2"><button class="btn btn-xs btn-default"><span class="glyphicon glyphicon-repeat"></span></button></td>' +
141-
'</tr>' +
142-
'<tr data-traceId="' + aThread[i].localTraceId + '">' +
143-
'<td>' + aThread[i].threadName + '</td>' +
144-
'<td>' + aThread[i].sampled + '</td>' +
145-
'<td>' + aThread[i].execTime + '</td>' +
146-
'<td>' + aThread[i].transactionId + '</td>' +
147-
'</tr>'
148-
);
149-
}
150-
}
124+
scope.formatDate = function( startTime ) {
125+
return CommonUtilService.formatDate(startTime, "MM/DD HH:mm:ss SSS");
126+
};
151127
function initLayerSizeNPosition() {
152128
var docWidth = $window.document.body.clientWidth;
153129
var docHeight = $window.document.body.clientHeight;
154130
var paddingWidthPixel = parseInt(( cfg.PADDING_WIDTH * docWidth ) / 100);
155131
var paddingHeightPixel = parseInt(( cfg.PADDING_HEIGHT * docHeight ) / 100);
132+
var titleHeight = 78;
156133

157134
var layerWidth = docWidth - ( paddingWidthPixel * 2 );
158135
var layerHeight = docHeight - ( paddingHeightPixel * 2 );
159-
var layerHeightHalf = parseInt( layerHeight / 2 );
136+
var layerHeightHalf = parseInt( (layerHeight - titleHeight) / 2 );
160137

161-
// title: 41
162-
// thead: 50
138+
// thead: 67
163139
$el.css({
164140
"top": paddingHeightPixel,
165141
"left": paddingWidthPixel,
166142
"width": layerWidth,
167-
"height": layerHeightHalf
143+
"height": layerHeight
168144
});
169145
$elListWrapper.css({
170-
"height": layerHeightHalf - 91
146+
"height": layerHeightHalf - 67 - 30
171147
});
172148
$elEmpty.css({
173-
"height": layerHeightHalf - 41
149+
"height": layerHeightHalf
174150
});
175-
$elTextarea.css({
151+
$elDetailMessage.css({
176152
"height": layerHeightHalf
177153
});
178154
}
179-
function hideContent() {
180-
$elHeader.hide();
181-
$elListWrapper.hide();
182-
$elTextarea.hide().val("");
183-
}
184-
function showContent() {
185-
$elHeader.show();
186-
$elListWrapper.show();
187-
}
188155
}
189156
};
190157
}

‎web/src/main/webapp/features/threadDumpInfoLayer/threadDumpInfoLayer.html‎

Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,45 @@
11
<div id="threadDump">
2-
<div class="panel panel-info">
3-
<div class="panel-heading">Thread Dump <i class="xi-spinner-2 xi-spin"></i> <button ng-click="hideThreadDump()" class="btn btn-sm"><span class="glyphicon glyphicon-remove"></span></button></div>
4-
<table class="table table-info thread-header">
5-
<thead>
6-
<tr>
7-
<th>&nbsp;</th>
8-
<th>id</th>
9-
<th>state</th>
10-
<th>start time</th>
11-
<th>path</th>
12-
<th>&nbsp;</th>
13-
</tr>
14-
<tr>
15-
<th>&nbsp;</th>
16-
<th>name</th>
17-
<th>sampled</th>
18-
<th>exec(ms)</th>
19-
<th>transaction id</th>
20-
<th>&nbsp;</th>
21-
</tr>
22-
</thead>
23-
</table>
24-
<div class="thread-list">
2+
<div class="panel">
3+
<div class="panel-heading">Thread Dump <i class="xi-spinner-2 xi-spin"></i> <button ng-click="hideThreadDump()" class="btn btn-sm">X</button></div>
4+
<div class="thread-header" ng-hide="threadList.length === 0">
255
<table class="table table-info">
26-
<tbody ng-click="loadDetailMessage($event)"></tbody>
6+
<thead>
7+
<tr>
8+
<th>&nbsp;</th>
9+
<th ng-click="changeSortType('threadId')">id</th>
10+
<th ng-click="changeSortType('threadName')">name</th>
11+
<th ng-click="changeSortType('threadState')">state</th>
12+
<th>sampled</th>
13+
<th ng-click="changeSortType('startTime')">start time</th>
14+
<th ng-click="changeSortType('execTime')">exec(ms)</th>
15+
<th ng-click="changeSortType('entryPoint')">path</th>
16+
<th ng-click="changeSortType('transactionId')">transaction id</th>
17+
<th>&nbsp;</th>
18+
</tr>
19+
</thead>
2720
</table>
2821
</div>
29-
<div class="panel-body">There is no data</div>
22+
<div class="thread-list" ng-hide="threadList.length === 0">
23+
<table class="table table-info">
24+
<tbody ng-click="loadDetailMessage($event)">
25+
<tr ng-repeat="oThread in threadList | orderBy:sortType" data-traceId="{{oThread.localTraceId}}">
26+
<td>{{ $index + 1 }}</td>
27+
<td>{{ oThread.threadId }}</td>
28+
<td>{{ oThread.threadName }}</td>
29+
<td>{{ oThread.threadState }}</td>
30+
<td>{{ oThread.sampled }}</td>
31+
<td>{{ formatDate( oThread.startTime ) }}</td>
32+
<td>{{ oThread.execTime }}</td>
33+
<td>{{ oThread.entryPoint }}</td>
34+
<td>{{ oThread.transactionId }}</td>
35+
<td><button class="btn btn-xs btn-default"><span class="glyphicon glyphicon-search"></span></button></td>
36+
</tr>
37+
</tbody>
38+
</table>
39+
</div>
40+
<div class="panel-body" ng-show="threadList.length === 0">There is no data</div>
41+
</div>
42+
<div class="detail-message">
43+
<textarea></textarea>
3044
</div>
31-
<textarea></textarea>
3245
</div>

0 commit comments

Comments
 (0)