[ISSUE #743] Implement RocketMQ message trace UI (#744)

* Backend
1. Add viewMessageTraceGraph method (aggregate MessageTraceView list)
2. MessageTraceView add filed requestId and retryTimes
3. Add Unit Test MessageTraceServiceImplTest
4. Add lombok dependency

Frontend
1. implement message trace graph UI
2. upgrade echarts to 5.1.2
3. message trace page can fetch messageId from routeParams

* 1. fix code style issue
2. fix pom duplicate maven-compiler-plugin issue

* 1. subAfterTrace groupName use subBeforeTrace groupName instead
2. fix MessageTraceServiceImplTest UT

* 1. implement features
  1.1 support transaction message trace
  1.2 support only producer trace enabled case
  1.3 support only consumer trace enabled case
2. add(fix) trace type (message type)
3. use rocketmq.version = 4.9.0

* [ISSUE #743] fix trace UI issue (when costTime is 0, will not show trace node)
Solution: use minimum width 1

src/main/resources/static/src/messageTrace.js

@@ -16,34 +16,43 @@
  */
 
 var module = app;
-
-module.controller('messageTraceController', ['$scope', 'ngDialog', '$http','Notification',function ($scope, ngDialog, $http,Notification) {
+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 TRANSACTION_UNKNOWN_COLOR = 'grey'
+const TIME_FORMAT_PATTERN = "YYYY-MM-DD HH:mm:ss.SSS";
+const DEFAULT_DISPLAY_DURATION = 10 * 1000
+// transactionTraceNode do not have costTime, assume it cost 50ms
+const transactionCheckCostTime = 50;
+module.controller('messageTraceController', ['$scope', '$routeParams', 'ngDialog', '$http', 'Notification', function ($scope, $routeParams, ngDialog, $http, Notification) {
     $scope.allTopicList = [];
-    $scope.selectedTopic =[];
-    $scope.key ="";
-    $scope.messageId ="";
-    $scope.queryMessageByTopicAndKeyResult=[];
-    $scope.queryMessageByMessageIdResult={};
-    $scope.queryMessageTraceListsByTopicAndKeyResult=[];
+    $scope.selectedTopic = [];
+    $scope.key = "";
+    $scope.messageId = $routeParams.messageId;
+    $scope.queryMessageByTopicAndKeyResult = [];
+    $scope.queryMessageByMessageIdResult = {};
+    $scope.queryMessageTraceListsByTopicAndKeyResult = [];
 
     $http({
         method: "GET",
         url: "topic/list.query",
         params: {
-            skipSysProcess:"true"
+            skipSysProcess: "true"
         }
     }).success(function (resp) {
-        if(resp.status ==0){
+        if (resp.status == 0) {
             $scope.allTopicList = resp.data.topicList.sort();
             console.log($scope.allTopicList);
-        }else {
+        } else {
             Notification.error({message: resp.errMsg, delay: 2000});
         }
     });
     $scope.timepickerBegin = moment().subtract(1, 'hour').format('YYYY-MM-DD HH:mm');
-    $scope.timepickerEnd = moment().add(1,'hour').format('YYYY-MM-DD HH:mm');
-    $scope.timepickerOptions ={format: 'YYYY-MM-DD HH:mm', showClear: true};
-    
+    $scope.timepickerEnd = moment().add(1, 'hour').format('YYYY-MM-DD HH:mm');
+    $scope.timepickerOptions = {format: 'YYYY-MM-DD HH:mm', showClear: true};
+
     $scope.queryMessageByTopicAndKey = function () {
         console.log($scope.selectedTopic);
         console.log($scope.key);
@@ -52,45 +61,45 @@ 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) {
@@ -98,27 +107,247 @@ module.controller('messageTraceController', ['$scope', 'ngDialog', '$http','Noti
                 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) {
-
-        $scope.showExceptionDesc = function (errmsg) {
-            if(errmsg == null){
-                errmsg = "Don't have Exception"
+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);
+                    })
+                })
             }
-            ngDialog.open({
-                template: 'operationResultDialog',
-                data:{
-                    result:errmsg
+
+            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: Math.max(end[0] - start[0], 1),
+                    height: height
+                }, {
+                    x: params.coordSys.x,
+                    y: params.coordSys.y,
+                    width: params.coordSys.width,
+                    height: params.coordSys.height
+                });
+
+                return rectShape && {
+                    type: 'rect',
+                    transition: ['shape'],
+                    shape: rectShape,
+                    style: api.style({
+                        text: `${api.value(3)}ms`,
+                        textFill: '#fff'
+                    })
+                };
+            }
+
+            option = {
+                tooltip: {
+                    formatter: function (params) {
+                        return formatNodeToolTip(params);
+                    }
+                },
+                title: {
+                    text: messageTraceGraph.producerNode ? messageTraceGraph.producerNode.topic : "",
+                    left: 'center'
+                },
+                dataZoom: [{
+                    type: 'slider',
+                    filterMode: 'weakFilter',
+                    showDataShadow: false,
+                    top: 400,
+                    start: 0,
+                    end: dataZoomEnd,
+                    labelFormatter: ''
+                }, {
+                    type: 'inside',
+                    filterMode: 'weakFilter'
+                }
+                ],
+                grid: {
+                    height: 300
+                },
+                xAxis: {
+                    min: startTime,
+                    scale: true,
+                    axisLabel: {
+                        formatter: function (value) {
+                            return formatXAxisTime(value)
+                        }
+                    }
+                },
+                yAxis: {
+                    data: messageGroups
+                },
+                series: [{
+                    type: 'custom',
+                    renderItem: renderItem,
+                    itemStyle: {
+                        opacity: 0.8
+                    },
+                    encode: {
+                        x: [1, 2],
+                        y: 0
+                    },
+                    data: data
+                }]
+            };
+            $scope.messageTraceGraph.setOption(option);
+        }
+        $scope.showGraph = function () {
+            $scope.displayGraph = !$scope.displayGraph;
+            if ($scope.displayGraph) {
+                $scope.graphButtonName = 'Hide Graph';
+                $scope.displayMessageTraceGraph($scope.ngDialogData);
+            } else {
+                $scope.messageTraceGraph.dispose();
+                $scope.graphButtonName = 'Show Graph';
+            }
+            console.log("here is my data", $scope.ngDialogData)
         };
+
+        function initGraph() {
+            $timeout(function () {
+                if (document.getElementById('messageTraceGraph') == null) {
+                    initGraph();
+                } else {
+                    $scope.showGraph();
+                }
+            }, 50);
+        }
+
+        initGraph();
     }]
 );

src/main/resources/static/view/pages/messageTrace.html

@@ -131,7 +131,13 @@
 
 <script type="text/ng-template" id="messageTraceDetailViewDialog">
     <md-content class="md-padding">
-        <div>
+        <div class="row" >
+            <button class="ngdialog-button ngdialog-button-primary" type="button"
+                    ng-click="showGraph()">{{graphButtonName}}
+            </button>
+        </div>
+        <div class="row" ng-hide="!displayGraph" id="messageTraceGraph" style="height: 500px; width: 1024px"></div>
+        <div class="row">
             <table class="table table-bordered">
                 <tr>
                     <th class="text-center">Message ID</th>
@@ -143,8 +149,10 @@
                     <th class="text-center">costTime</th>
                     <th class="text-center">status</th>
                     <th class="text-center">traceType</th>
+                    <th class="text-center">msgType</th>
+                    <th class="text-center">transactionState</th>
                 </tr>
-                <tr ng-repeat="item in ngDialogData">
+                <tr ng-repeat="item in ngDialogData.messageTraceViews">
                     <td class="text-center">{{item.msgId}}</td>
                     <td class="text-center">{{item.tags}}</td>
                     <td class="text-center">{{item.keys}}</td>
@@ -153,7 +161,9 @@
                     <td class="text-center">{{item.clientHost}}</td>
                     <td class="text-center">{{item.costTime}}ms</td>
                     <td class="text-center">{{item.status}}</td>
+                    <th class="text-center">{{item.traceType}}</th>
                     <th class="text-center">{{item.msgType}}</th>
+                    <th class="text-center">{{item.transactionState}}</th>
                 </tr>
             </table>
         </div>