[ISSUE #525]Support the message track detail showing function in the rocketmq console (#154)

* I have finished developing the new feature for the message track which includes the part of rocketmq-console#525 initially.Please review it.

* [ISSUE #525] Support the message track,add the function which supports trace topic name value configurable by users.

* [ISSUE#525]optimize codes for message track

* [ISSUE#525]remove the unnecessary codes for msg trace feature.

* [ISSUE#525]implement the HttpBasicAuthorizedFilter to add Basic realm="rocketmq" in the http response header

src/main/resources/static/index.html

@@ -109,6 +109,7 @@
 <script type="text/javascript" src="src/consumer.js?timestamp=6"></script>
 <script type="text/javascript" src="src/producer.js"></script>
 <script type="text/javascript" src="src/message.js"></script>
+<script type="text/javascript" src="src/messageTrace.js"></script>
 <script type="text/javascript" src="src/ops.js?timestamp=7"></script>
 <script type="text/javascript" src="src/remoteApi/remoteApi.js"></script>
 <script type="text/javascript" src="vendor/preLoading/main.js"></script>

src/main/resources/static/src/app.js

@@ -145,6 +145,9 @@ app.config(['$routeProvider', '$httpProvider','$cookiesProvider','getDictNamePro
         }).when('/message', {
             templateUrl: 'view/pages/message.html',
             controller:'messageController'
+        }).when('/messageTrace', {
+            templateUrl: 'view/pages/messageTrace.html',
+            controller:'messageTraceController'
         }).when('/ops', {
             templateUrl: 'view/pages/ops.html',
             controller:'opsController'

src/main/resources/static/src/i18n/en.js

@@ -20,6 +20,7 @@ var en = {
     "CONSUMER":"Consumer",
     "PRODUCER":"Producer",
     "MESSAGE":"Message",
+    "MESSAGETRACE":"MessageTrace",
     "COMMIT": "Commit",
     "OPERATION": "Operation",
     "ADD": "Add",

src/main/resources/static/src/i18n/zh.js

@@ -21,6 +21,7 @@ var zh = {
     "CONSUMER":"消费者",
     "PRODUCER":"生产者",
     "MESSAGE":"消息",
+    "MESSAGETRACE":"消息轨迹",
     "OPERATION": "操作",
     "ADD": "新增",
     "UPDATE": "更新",

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

@@ -0,0 +1,121 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var module = app;
+
+module.controller('messageTraceController', ['$scope', 'ngDialog', '$http','Notification',function ($scope, ngDialog, $http,Notification) {
+    $scope.allTopicList = [];
+    $scope.selectedTopic =[];
+    $scope.key ="";
+    $scope.messageId ="";
+    $scope.queryMessageByTopicAndKeyResult=[];
+    $scope.queryMessageByMessageIdResult={};
+    $scope.queryMessageTraceListsByTopicAndKeyResult=[];
+
+    $http({
+        method: "GET",
+        url: "topic/list.query"
+    }).success(function (resp) {
+        if(resp.status ==0){
+            $scope.allTopicList = resp.data.topicList.sort();
+            console.log($scope.allTopicList);
+        }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.queryMessageByTopicAndKey = function () {
+        console.log($scope.selectedTopic);
+        console.log($scope.key);
+        $http({
+            method: "GET",
+            url: "message/queryMessageByTopicAndKey.query",
+            params: {
+                topic: $scope.selectedTopic,
+                key:$scope.key
+            }
+        }).success(function (resp) {
+            if (resp.status == 0) {
+                console.log(resp);
+                $scope.queryMessageByTopicAndKeyResult = resp.data;
+                console.log($scope.queryMessageByTopicAndKeyResult);
+            }else {
+                Notification.error({message: resp.errMsg, delay: 2000});
+            }
+        });
+    };
+
+    $scope.queryMessageByMessageId = function (messageId,topic) {
+        $http({
+            method: "GET",
+            url: "messageTrace/viewMessage.query",
+            params: {
+                msgId: messageId,
+                topic:topic
+            }
+        }).success(function (resp) {
+            if (resp.status == 0) {
+                console.log(resp);
+                $scope.queryMessageByMessageIdResult = resp.data;
+                console.log($scope.queryMessageByTopicAndKeyResult);
+            }else {
+                Notification.error({message: resp.errMsg, delay: 2000});
+            }
+        });
+    };
+
+    $scope.queryMessageTraceByMessageId = function (messageId,topic) {
+        $http({
+            method: "GET",
+            url: "messageTrace/viewMessageTraceDetail.query",
+            params: {
+                msgId: messageId,
+                topic:topic
+            }
+        }).success(function (resp) {
+            if (resp.status == 0) {
+                console.log(resp);
+                ngDialog.open({
+                    template: 'messageTraceDetailViewDialog',
+                    controller: 'messageTraceDetailViewDialogController',
+                    data:resp.data
+                });
+            }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"
+            }
+            ngDialog.open({
+                template: 'operationResultDialog',
+                data:{
+                    result:errmsg
+                }
+            });
+        };
+    }]
+);

src/main/resources/static/view/layout/_header.html

@@ -17,6 +17,7 @@
                 <li ng-class="path =='consumer' ? 'active':''"><a ng-href="#/consumer">{{'CONSUMER' | translate}}</a></li>
                 <li ng-class="path =='producer' ? 'active':''"><a ng-href="#/producer">{{'PRODUCER' | translate}}</a></li>
                 <li ng-class="path =='message' ? 'active':''"><a ng-href="#/message">{{'MESSAGE' | translate}}</a></li>
+                <li ng-class="path =='messageTrace' ? 'active':''"><a ng-href="#/messageTrace">{{'MESSAGETRACE' | translate}}</a></li>
             </ul>
             <ul class="nav navbar-nav navbar-right">
                 <li class="dropdown">

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

@@ -0,0 +1,182 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~ contributor license agreements.  See the NOTICE file distributed with
+  ~ this work for additional information regarding copyright ownership.
+  ~ The ASF licenses this file to You under the Apache License, Version 2.0
+  ~ (the "License"); you may not use this file except in compliance with
+  ~ the License.  You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<div class="container-fluid" id="deployHistoryList">
+    <div class="modal-body">
+        <div ng-cloak="" class="tabsdemoDynamicHeight">
+            <md-content>
+                <md-tabs md-dynamic-height="" md-border-bottom="">
+                    <md-tab label="Message Key">
+                        <md-content class="md-padding" style="min-height:600px">
+                            <h5 class="md-display-5">Only Return 64 Messages</h5>
+
+                            <form class="form-inline pull-left col-sm-12">
+                                <div class="form-group">
+                                    <label>Topic:</label>
+                                </div>
+                                <div class="form-group">
+                                    <div style="width: 300px">
+                                        <select name="mySelectTopic" chosen
+                                                ng-model="selectedTopic"
+                                                ng-options="item for item in allTopicList"
+                                                required>
+                                            <option value=""></option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label>Key:</label>
+                                    <input class="form-control" style="width: 450px" type="text" ng-model="key"
+                                           required/>
+                                </div>
+
+                                <button type="button" class="btn btn-raised btn-sm  btn-primary" data-toggle="modal"
+                                        ng-click="queryMessageByTopicAndKey()">
+                                    <span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
+                                </button>
+                            </form>
+                            <table class="table table-bordered">
+                                <tr>
+                                    <th class="text-center">Message ID</th>
+                                    <th class="text-center">Tag</th>
+                                    <th class="text-center">Message Key</th>
+                                    <th class="text-center">StoreTime</th>
+                                    <th class="text-center">Operation</th>
+                                </tr>
+                                <tr ng-repeat="item in queryMessageByTopicAndKeyResult">
+                                    <td class="text-center">{{item.msgId}}</td>
+                                    <td class="text-center">{{item.properties.TAGS}}</td>
+                                    <td class="text-center">{{item.properties.KEYS}}</td>
+                                    <td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
+                                    </td>
+                                    <td class="text-center">
+                                        <button class="btn btn-raised btn-sm btn-primary" type="button"
+                                                ng-click="queryMessageTraceByMessageId(item.msgId,item.topic)">Message Trace Detail
+                                        </button>
+                                    </td>
+                                </tr>
+                            </table>
+                        </md-content>
+                    </md-tab>
+                    <md-tab label="Message ID">
+                        <h5 class="md-display-5">topic can't be empty if you producer client version>=v3.5.8</h5>
+                        <md-content class="md-padding" style="min-height:600px">
+                            <form class="form-inline pull-left col-sm-12">
+                                <div class="form-group">
+                                    <label>Topic:</label>
+                                </div>
+                                <div class="form-group ">
+                                    <div style="width: 300px">
+                                        <select name="mySelectTopic" chosen
+                                                ng-model="selectedTopic"
+                                                ng-options="item for item in allTopicList"
+                                                required>
+                                            <option value=""></option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label>MessageId:</label>
+                                    <input class="form-control" style="width: 450px" type="text" ng-model="messageId"
+                                           required/>
+                                </div>
+                                <button type="button" class="btn btn-raised btn-sm  btn-primary" data-toggle="modal"
+                                        ng-click="queryMessageByMessageId(messageId,selectedTopic)">
+                                    <span class="glyphicon glyphicon-search"></span>{{ 'SEARCH' | translate}}
+                                </button>
+                            </form>
+                            <table class="table table-bordered">
+                                <tr>
+                                    <th class="text-center">Message ID</th>
+                                    <th class="text-center">Tag</th>
+                                    <th class="text-center">Message Key</th>
+                                    <th class="text-center">StoreTime</th>
+                                    <th class="text-center">Operation</th>
+                                </tr>
+                                <tr ng-repeat="item in queryMessageByMessageIdResult">
+                                    <td class="text-center">{{item.msgId}}</td>
+                                    <td class="text-center">{{item.properties.TAGS}}</td>
+                                    <td class="text-center">{{item.properties.KEYS}}</td>
+                                    <td class="text-center">{{item.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
+                                    </td>
+                                    <td class="text-center">
+                                        <button class="btn btn-raised btn-sm btn-primary" type="button"
+                                                ng-click="queryMessageTraceByMessageId(item.msgId,item.topic)">Message Trace Detail
+                                        </button>
+                                    </td>
+                                </tr>
+                            </table>
+                        </md-content>
+                    </md-tab>
+                </md-tabs>
+            </md-content>
+        </div>
+
+    </div>
+</div>
+
+
+<script type="text/ng-template" id="messageTraceDetailViewDialog">
+    <md-content class="md-padding">
+        <div>
+            <table class="table table-bordered">
+                <tr>
+                    <th class="text-center">Message ID</th>
+                    <th class="text-center">Tag</th>
+                    <th class="text-center">Message Key</th>
+                    <th class="text-center">StoreTime</th>
+                    <th class="text-center">StoreHost</th>
+                    <th class="text-center">costTime</th>
+                    <th class="text-center">status</th>
+                    <th class="text-center">traceType</th>
+                </tr>
+                <tr ng-repeat="item in ngDialogData">
+                    <td class="text-center">{{item.msgId}}</td>
+                    <td class="text-center">{{item.tags}}</td>
+                    <td class="text-center">{{item.keys}}</td>
+                    <td class="text-center">{{item.timeStamp | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+                    <td class="text-center">{{item.storeHost}}</td>
+                    <td class="text-center">{{item.costTime}}ms</td>
+                    <td class="text-center">{{item.status}}</td>
+                    <th class="text-center">{{item.msgType}}</th>
+                </tr>
+            </table>
+        </div>
+    </md-content>
+    <div class="ngdialog-buttons">
+        <button type="button" class="ngdialog-button ngdialog-button-secondary"
+                ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
+        </button>
+    </div>
+</script>
+
+<script type="text/ng-template" id="operationResultDialog">
+    <div class="modal-header">
+        <h4 class="modal-title">Result</h4>
+    </div>
+    <div class="modal-body ">
+        <form class="form-horizontal" novalidate>
+            {{ngDialogData.result}}
+        </form>
+    </div>
+    <div class="modal-footer">
+        <div class="ngdialog-buttons">
+            <button type="button" class="ngdialog-button ngdialog-button-secondary"
+                    ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
+            </button>
+        </div>
+    </div>
+</script>