StyleTang commented on a change in pull request #744:
URL: https://github.com/apache/rocketmq-externals/pull/744#discussion_r667816635
##########
File path: rocketmq-console/src/main/resources/static/src/messageTrace.js
##########
@@ -52,73 +61,293 @@ module.controller('messageTraceController', ['$scope',
'ngDialog', '$http','Noti
url: "message/queryMessageByTopicAndKey.query",
params: {
topic: $scope.selectedTopic,
- key:$scope.key
+ key: $scope.key
}
}).success(function (resp) {
if (resp.status == 0) {
console.log(resp);
$scope.queryMessageByTopicAndKeyResult = resp.data;
console.log($scope.queryMessageByTopicAndKeyResult);
- }else {
+ } else {
Notification.error({message: resp.errMsg, delay: 2000});
}
});
};
- $scope.queryMessageByMessageId = function (messageId,topic) {
+ $scope.queryMessageByMessageId = function (messageId, topic) {
$http({
method: "GET",
url: "messageTrace/viewMessage.query",
params: {
msgId: messageId,
- topic:topic
+ topic: topic
}
}).success(function (resp) {
if (resp.status == 0) {
console.log(resp);
$scope.queryMessageByMessageIdResult = resp.data;
console.log($scope.queryMessageByTopicAndKeyResult);
- }else {
+ } else {
Notification.error({message: resp.errMsg, delay: 2000});
}
});
};
- $scope.queryMessageTraceByMessageId = function (messageId,topic) {
+ $scope.queryMessageTraceByMessageId = function (messageId, topic) {
$http({
method: "GET",
- url: "messageTrace/viewMessageTraceDetail.query",
+ url: "messageTrace/viewMessageTraceGraph.query",
params: {
msgId: messageId,
- topic:topic
+ topic: topic
}
}).success(function (resp) {
if (resp.status == 0) {
console.log(resp);
ngDialog.open({
template: 'messageTraceDetailViewDialog',
controller: 'messageTraceDetailViewDialogController',
- data:resp.data
+ data: resp.data
});
- }else {
+ } else {
Notification.error({message: resp.errMsg, delay: 2000});
}
});
};
}]);
-module.controller('messageTraceDetailViewDialogController',['$scope',
'ngDialog', '$http','Notification', function ($scope, ngDialog,
$http,Notification) {
+module.controller('messageTraceDetailViewDialogController', ['$scope',
'$timeout', 'ngDialog', '$http', 'Notification', function ($scope, $timeout,
ngDialog, $http, Notification) {
+ $scope.displayGraph = false;
+ $scope.graphButtonName = 'Show Graph';
+ $scope.displayMessageTraceGraph = function (messageTraceGraph) {
+ let dom = document.getElementById("messageTraceGraph");
+ $scope.messageTraceGraph = echarts.init(dom);
+ let option;
+ let data = [];
+ let dataZoomEnd = 100;
+ let startTime = Number.MAX_VALUE;
+ let endTime = 0;
+ let messageGroups = [];
+ if (messageTraceGraph.producerNode) {
+ startTime =
+messageTraceGraph.producerNode.traceNode.beginTimeStamp;
+ endTime =
+messageTraceGraph.producerNode.traceNode.endTimeStamp;
+ } else {
+
messageTraceGraph.subscriptionNodeList.forEach(subscriptionNode => {
+ subscriptionNode.consumeNodeList.forEach(consumeNode => {
+ startTime = Math.min(startTime,
consumeNode.beginTimeStamp);
+ })
+ })
+ }
+
+ function buildNodeColor(traceNode, index) {
+ let nodeColor = SUCCESS_COLOR;
+ if (traceNode.transactionState) {
+ switch (traceNode.transactionState) {
+ case 'COMMIT_MESSAGE':
+ return TRANSACTION_COMMIT_COLOR;
+ case 'ROLLBACK_MESSAGE':
+ return TRANSACTION_ROLLBACK_COLOR;
+ case 'UNKNOW':
+ return TRANSACTION_UNKNOWN_COLOR;
+ default:
+ return ERROR_COLOR;
+ }
+ }
+ if (traceNode.status !== 'success') {
+ nodeColor = ERROR_COLOR;
+ }
+ if (index === messageGroups.length - 1) {
+ nodeColor = PRODUCER_COLOR;
+ }
+ return nodeColor;
+ }
+
+ function formatXAxisTime(value) {
+ let duration = Math.max(0, value - startTime);
+ if (duration < 1000)
+ return duration + 'ms';
+ duration /= 1000;
+ if (duration < 60)
+ return duration + 's';
+ duration /= 60;
+ if (duration < 60)
+ return duration + 'm';
+ duration /= 60;
+ return duration + 'h';
+ }
+
+ function buildTraceInfo(itemName, itemValue) {
+ if (itemValue) {
+ return `${itemName}: ${itemValue}<br />`
+ }
+ return "";
+ }
+
+ function formatNodeToolTip(params) {
+ let traceNode = params.data.traceData.traceNode;
+ return `
+ costTime: ${traceNode.costTime}ms<br />
+ status: ${traceNode.status}<br />
+ beginTimeStamp: ${new
moment(traceNode.beginTimeStamp).format(TIME_FORMAT_PATTERN)}<br />
+ endTimeStamp: ${new
moment(traceNode.endTimeStamp).format(TIME_FORMAT_PATTERN)}<br />
+ clientHost: ${traceNode.clientHost}<br />
+ storeHost: ${traceNode.storeHost}<br />
+ retryTimes: ${traceNode.retryTimes}<br />
+ ${buildTraceInfo('msgType', traceNode.msgType)}
+ ${buildTraceInfo('transactionId',
traceNode.transactionId)}
+ ${buildTraceInfo('transactionState',
traceNode.transactionState)}
+ ${buildTraceInfo('fromTransactionCheck',
traceNode.fromTransactionCheck)}
+ `;
+ }
+
+ function addTraceData(traceNode, index) {
+ data.push({
+ value: [
+ index,
+ traceNode.beginTimeStamp,
+ traceNode.endTimeStamp,
+ traceNode.costTime
+ ],
+ itemStyle: {
+ normal: {
+ color: buildNodeColor(traceNode, index),
+ opacity: 1
+ }
+ },
+ traceData: {
+ traceNode: traceNode
+ }
+ });
+ endTime = Math.max(traceNode.endTimeStamp, endTime);
+ }
+
+ messageTraceGraph.subscriptionNodeList.forEach(item => {
+ messageGroups.push(item.subscriptionGroup)
+ })
+ messageTraceGraph.subscriptionNodeList.forEach((subscriptionNode,
index) => {
+ subscriptionNode.consumeNodeList.forEach(traceNode =>
addTraceData(traceNode, index))
+ })
+ if (messageTraceGraph.producerNode) {
+ messageGroups.push(messageTraceGraph.producerNode.groupName)
+ let producerNodeIndex = messageGroups.length - 1;
+ addTraceData(messageTraceGraph.producerNode.traceNode,
producerNodeIndex);
+
messageTraceGraph.producerNode.transactionNodeList.forEach(transactionNode => {
+ transactionNode.beginTimeStamp =
Math.max(messageTraceGraph.producerNode.traceNode.endTimeStamp,
+ transactionNode.endTimeStamp -
transactionCheckCostTime);
+ addTraceData(transactionNode, producerNodeIndex)
+ endTime = Math.max(endTime, transactionNode.endTimeStamp);
+ })
+ }
+
+ let totalDuration = endTime - startTime;
+ if (totalDuration > DEFAULT_DISPLAY_DURATION) {
+ dataZoomEnd = DEFAULT_DISPLAY_DURATION / totalDuration * 100
+ }
+
+ function renderItem(params, api) {
+ let messageGroup = api.value(0);
+ let start = api.coord([api.value(1), messageGroup]);
+ let end = api.coord([api.value(2), messageGroup]);
+ let height = api.size([0, 1])[1] * 0.6;
+
+ let rectShape = echarts.graphic.clipRectByRect({
+ x: start[0],
+ y: start[1] - height / 2,
+ width: end[0] - start[0],
Review comment:
Yes, you are right. If the the end timestamp is equals to the begin
timestamp, the width will be 0, no trace node will show in the graph.
It is a good idea to use minimum width 1, I will fix it later, thanks for
your suggestion.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
