From bb08d466f9ed9abc7fd2078abc1946500278a14b Mon Sep 17 00:00:00 2001 From: StyleTang Date: Wed, 21 Jul 2021 09:01:48 +0800 Subject: [PATCH] [ISSUE #745] Message trace data table improvement (#746) * Message trace data table improvement 1. Send Message Trace 1.1 Send Message Info 1.2 Check Transaction Info 2. Consume Message Trace 2.1 Message Trace (group by subscription group ) 3. X Axis time format(keep two decimal places) 4. use min instead of m --- .../service/impl/MessageTraceServiceImpl.java | 10 +- src/main/resources/static/src/messageTrace.js | 43 ++++-- .../static/view/pages/messageTrace.html | 140 +++++++++++++++++- 3 files changed, 175 insertions(+), 18 deletions(-) diff --git a/src/main/java/org/apache/rocketmq/console/service/impl/MessageTraceServiceImpl.java b/src/main/java/org/apache/rocketmq/console/service/impl/MessageTraceServiceImpl.java index af40984..49e3630 100644 --- a/src/main/java/org/apache/rocketmq/console/service/impl/MessageTraceServiceImpl.java +++ b/src/main/java/org/apache/rocketmq/console/service/impl/MessageTraceServiceImpl.java @@ -117,7 +117,7 @@ public class MessageTraceServiceImpl implements MessageTraceService { } } if (producerNode != null) { - producerNode.setTransactionNodeList(transactionNodeList); + producerNode.setTransactionNodeList(sortTraceNodeListByBeginTimestamp(transactionNodeList)); } messageTraceGraph.setProducerNode(producerNode); messageTraceGraph.setSubscriptionNodeList(buildSubscriptionNodeList(requestIdTracePairMap)); @@ -149,9 +149,10 @@ public class MessageTraceServiceImpl implements MessageTraceService { } return subscriptionTraceNodeMap.entrySet().stream() .map((Function>, SubscriptionNode>) subscriptionEntry -> { + List traceNodeList = subscriptionEntry.getValue(); SubscriptionNode subscriptionNode = new SubscriptionNode(); subscriptionNode.setSubscriptionGroup(subscriptionEntry.getKey()); - subscriptionNode.setConsumeNodeList(subscriptionEntry.getValue()); + subscriptionNode.setConsumeNodeList(sortTraceNodeListByBeginTimestamp(traceNodeList)); return subscriptionNode; }).collect(Collectors.toList()); } @@ -186,4 +187,9 @@ public class MessageTraceServiceImpl implements MessageTraceService { traceNode.setEndTimeStamp(messageTraceView.getTimeStamp() + messageTraceView.getCostTime()); return traceNode; } + + private List sortTraceNodeListByBeginTimestamp(List traceNodeList) { + traceNodeList.sort((o1, o2) -> -Long.compare(o1.getBeginTimeStamp(), o2.getBeginTimeStamp())); + return traceNodeList; + } } diff --git a/src/main/resources/static/src/messageTrace.js b/src/main/resources/static/src/messageTrace.js index d975467..f53cbb3 100644 --- a/src/main/resources/static/src/messageTrace.js +++ b/src/main/resources/static/src/messageTrace.js @@ -16,11 +16,14 @@ */ var module = app; -const PRODUCER_COLOR = '#029e02' const SUCCESS_COLOR = '#75d874'; const ERROR_COLOR = 'red'; const TRANSACTION_COMMIT_COLOR = SUCCESS_COLOR; const TRANSACTION_ROLLBACK_COLOR = ERROR_COLOR; +const SHOW_GRAPH = 'Show Graph'; +const HIDE_GRAPH = 'Hide Graph'; +const SHOW_GRAPH_TRACE_DATA = 'Show Graph Trace Data'; +const SHOW_ORIGINAL_TRACE_DATA = 'Show Original Trace Data'; const TRANSACTION_UNKNOWN_COLOR = 'grey' const TIME_FORMAT_PATTERN = "YYYY-MM-DD HH:mm:ss.SSS"; const DEFAULT_DISPLAY_DURATION = 10 * 1000 @@ -118,7 +121,9 @@ module.controller('messageTraceController', ['$scope', '$routeParams', 'ngDialog module.controller('messageTraceDetailViewDialogController', ['$scope', '$timeout', 'ngDialog', '$http', 'Notification', function ($scope, $timeout, ngDialog, $http, Notification) { $scope.displayGraph = false; - $scope.graphButtonName = 'Show Graph'; + $scope.showGraphData = true; + $scope.graphButtonName = SHOW_GRAPH; + $scope.traceDataButtonName = SHOW_ORIGINAL_TRACE_DATA; $scope.displayMessageTraceGraph = function (messageTraceGraph) { let dom = document.getElementById("messageTraceGraph"); $scope.messageTraceGraph = echarts.init(dom); @@ -139,9 +144,9 @@ module.controller('messageTraceDetailViewDialogController', ['$scope', '$timeout }) } - function buildNodeColor(traceNode, index) { + function buildNodeColor(traceNode) { let nodeColor = SUCCESS_COLOR; - if (traceNode.transactionState) { + if (traceNode.transactionState != null) { switch (traceNode.transactionState) { case 'COMMIT_MESSAGE': return TRANSACTION_COMMIT_COLOR; @@ -156,9 +161,6 @@ module.controller('messageTraceDetailViewDialogController', ['$scope', '$timeout if (traceNode.status !== 'success') { nodeColor = ERROR_COLOR; } - if (index === messageGroups.length - 1) { - nodeColor = PRODUCER_COLOR; - } return nodeColor; } @@ -168,14 +170,19 @@ module.controller('messageTraceDetailViewDialogController', ['$scope', '$timeout return duration + 'ms'; duration /= 1000; if (duration < 60) - return duration + 's'; + return timeFormat(duration, 's'); duration /= 60; if (duration < 60) - return duration + 'm'; + return timeFormat(duration, 'min'); duration /= 60; - return duration + 'h'; + return timeFormat(duration, 'h'); } + function timeFormat(duration, unit) { + return duration.toFixed(2) + unit; + } + + function buildTraceInfo(itemName, itemValue) { if (itemValue) { return `${itemName}: ${itemValue}
` @@ -210,7 +217,7 @@ module.controller('messageTraceDetailViewDialogController', ['$scope', '$timeout ], itemStyle: { normal: { - color: buildNodeColor(traceNode, index), + color: buildNodeColor(traceNode), opacity: 1 } }, @@ -329,15 +336,23 @@ module.controller('messageTraceDetailViewDialogController', ['$scope', '$timeout $scope.showGraph = function () { $scope.displayGraph = !$scope.displayGraph; if ($scope.displayGraph) { - $scope.graphButtonName = 'Hide Graph'; + $scope.graphButtonName = HIDE_GRAPH; $scope.displayMessageTraceGraph($scope.ngDialogData); } else { $scope.messageTraceGraph.dispose(); - $scope.graphButtonName = 'Show Graph'; + $scope.graphButtonName = SHOW_GRAPH; } - console.log("here is my data", $scope.ngDialogData) }; + $scope.changeTraceDataFormat = function () { + $scope.showGraphData = !$scope.showGraphData; + if ($scope.showGraphData) { + $scope.traceDataButtonName = SHOW_ORIGINAL_TRACE_DATA; + } else { + $scope.traceDataButtonName = SHOW_GRAPH_TRACE_DATA; + } + } + function initGraph() { $timeout(function () { if (document.getElementById('messageTraceGraph') == null) { diff --git a/src/main/resources/static/view/pages/messageTrace.html b/src/main/resources/static/view/pages/messageTrace.html index e264974..9bfb8dd 100644 --- a/src/main/resources/static/view/pages/messageTrace.html +++ b/src/main/resources/static/view/pages/messageTrace.html @@ -131,13 +131,149 @@