[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/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>