[ISSUE #30]Added DLQ message management (#31)

* [ISSUE #30]Added DLQ message management

* remove the specific namesrvAddr in application.properties.

Co-authored-by: zhangjidi <zhangjidi@cmss.chinamobile.com>

src/main/resources/static/index.html

@@ -107,6 +107,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/dlqMessage.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>

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

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

src/main/resources/static/src/dlqMessage.js

@@ -0,0 +1,184 @@
+/*
+ * 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;
+const SYS_GROUP_TOPIC_PREFIX = "%SYS%";
+module.controller('dlqMessageController', ['$scope', 'ngDialog', '$http', 'Notification', function ($scope, ngDialog, $http, Notification) {
+    $scope.allConsumerGroupList = [];
+    $scope.selectedConsumerGroup = [];
+    $scope.messageId = "";
+    $scope.queryDlqMessageByConsumerGroupResult = [];
+    $scope.queryDlqMessageByMessageIdResult = {};
+    $http({
+        method: "GET",
+        url: "consumer/groupList.query"
+    }).success(function (resp) {
+        if (resp.status == 0) {
+            for (const consumerGroup of resp.data) {
+                if (!consumerGroup.group.startsWith(SYS_GROUP_TOPIC_PREFIX)) {
+                    $scope.allConsumerGroupList.push(consumerGroup.group);
+                }
+            }
+            $scope.allConsumerGroupList.sort();
+        } else {
+            Notification.error({message: resp.errMsg, delay: 2000});
+        }
+    });
+    $scope.timepickerBegin = moment().subtract(3, 'hour').format('YYYY-MM-DD HH:mm');
+    $scope.timepickerEnd = moment().format('YYYY-MM-DD HH:mm');
+    $scope.timepickerOptions = {format: 'YYYY-MM-DD HH:mm', showClear: true};
+
+    $scope.taskId = "";
+
+    $scope.paginationConf = {
+        currentPage: 1,
+        totalItems: 0,
+        itemsPerPage: 20,
+        pagesLength: 15,
+        perPageOptions: [10],
+        rememberPerPage: 'perPageItems',
+        onChange: function () {
+            $scope.queryDlqMessageByConsumerGroup()
+        }
+    };
+
+    $scope.queryDlqMessageByConsumerGroup = function () {
+        $("#noMsgTip").css("display", "none");
+        if ($scope.timepickerEnd < $scope.timepickerBegin) {
+            Notification.error({message: "endTime is later than beginTime!", delay: 2000});
+            return
+        }
+        if ($scope.selectedConsumerGroup === [] || (typeof $scope.selectedConsumerGroup) == "object") {
+            return
+        }
+        $http({
+            method: "POST",
+            url: "dlqMessage/queryDlqMessageByConsumerGroup.query",
+            data: {
+                topic: DLQ_GROUP_TOPIC_PREFIX + $scope.selectedConsumerGroup,
+                begin: $scope.timepickerBegin.valueOf(),
+                end: $scope.timepickerEnd.valueOf(),
+                pageNum: $scope.paginationConf.currentPage,
+                pageSize: $scope.paginationConf.itemsPerPage,
+                taskId: $scope.taskId
+            }
+        }).success(function (resp) {
+            if (resp.status === 0) {
+                $scope.messageShowList = resp.data.page.content;
+                if ($scope.messageShowList.length == 0){
+                    $("#noMsgTip").removeAttr("style");
+                }
+                console.log($scope.messageShowList);
+                if (resp.data.page.first) {
+                    $scope.paginationConf.currentPage = 1;
+                }
+                $scope.paginationConf.currentPage = resp.data.page.number + 1;
+                $scope.paginationConf.totalItems = resp.data.page.totalElements;
+                $scope.taskId = resp.data.taskId
+            } else {
+                Notification.error({message: resp.errMsg, delay: 2000});
+            }
+        });
+    }
+
+    $scope.queryDlqMessageDetail = function (messageId, consumerGroup) {
+        $http({
+            method: "GET",
+            url: "messageTrace/viewMessage.query",
+            params: {
+                msgId: messageId,
+                topic: DLQ_GROUP_TOPIC_PREFIX + consumerGroup
+            }
+        }).success(function (resp) {
+            if (resp.status == 0) {
+                console.log(resp);
+                ngDialog.open({
+                    template: 'dlqMessageDetailViewDialog',
+                    data: resp.data
+                });
+            } else {
+                Notification.error({message: resp.errMsg, delay: 2000});
+            }
+        });
+    };
+
+    $scope.queryDlqMessageByMessageId = function (messageId, consumerGroup) {
+        $http({
+            method: "GET",
+            url: "messageTrace/viewMessage.query",
+            params: {
+                msgId: messageId,
+                topic: DLQ_GROUP_TOPIC_PREFIX + consumerGroup
+            }
+        }).success(function (resp) {
+            if (resp.status == 0) {
+                $scope.queryDlqMessageByMessageIdResult = resp.data;
+            } else {
+                Notification.error({message: resp.errMsg, delay: 2000});
+            }
+        });
+    };
+
+    $scope.changeShowMessageList = function (currentPage, totalItem) {
+        var perPage = $scope.paginationConf.itemsPerPage;
+        var from = (currentPage - 1) * perPage;
+        var to = (from + perPage) > totalItem ? totalItem : from + perPage;
+        $scope.messageShowList = $scope.queryMessageByTopicResult.slice(from, to);
+        $scope.paginationConf.totalItems = totalItem;
+    };
+
+    $scope.onChangeQueryCondition = function () {
+        console.log("change")
+        $scope.taskId = "";
+        $scope.paginationConf.currentPage = 1;
+        $scope.paginationConf.totalItems = 0;
+    }
+
+    $scope.resendDlqMessage = function (messageView, consumerGroup) {
+        const topic = messageView.properties.RETRY_TOPIC;
+        const msgId = messageView.properties.ORIGIN_MESSAGE_ID;
+        $http({
+            method: "POST",
+            url: "message/consumeMessageDirectly.do",
+            params: {
+                msgId: msgId,
+                consumerGroup: consumerGroup,
+                topic: topic
+            }
+        }).success(function (resp) {
+            if (resp.status == 0) {
+                ngDialog.open({
+                    template: 'operationResultDialog',
+                    data: {
+                        result: resp.data
+                    }
+                });
+            } else {
+                ngDialog.open({
+                    template: 'operationResultDialog',
+                    data: {
+                        result: resp.errMsg
+                    }
+                });
+            }
+        });
+    };
+
+    $scope.exportDlqMessage = function (msgId, consumerGroup) {
+        window.location.href = "dlqMessage/exportDlqMessage.do?msgId=" + msgId + "&consumerGroup=" + consumerGroup;
+    }
+}]);

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

@@ -41,6 +41,7 @@ var en = {
     "RESEND_MESSAGE":"Resend Message",
     "VIEW_EXCEPTION":"View Exception",
     "MESSAGETRACE":"MessageTrace",
+    "DLQ_MESSAGE":"DLQMessage",
     "COMMIT": "Commit",
     "OPERATION": "Operation",
     "ADD": "Add",
@@ -108,5 +109,7 @@ var en = {
     "ENABLE_MESSAGE_TRACE":"Enable Message Trace",
     "MESSAGE_TRACE_DETAIL":"Message Trace Detail",
     "TRACE_TOPIC":"TraceTopic",
-    "SELECT_TRACE_TOPIC":"selectTraceTopic"
+    "SELECT_TRACE_TOPIC":"selectTraceTopic",
+    "EXPORT": "export",
+    "NO_MATCH_RESULT": "no match result"
 }

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

@@ -39,8 +39,9 @@ var zh = {
     "PRODUCER":"生产者",
     "MESSAGE":"消息",
     "MESSAGE_DETAIL":"消息详情",
-    "RESEND_MESSAGE":"重新消费",
+    "RESEND_MESSAGE":"重新发送",
     "VIEW_EXCEPTION":"查看异常",
+    "DLQ_MESSAGE":"死信消息",
     "MESSAGETRACE":"消息轨迹",
     "OPERATION": "操作",
     "ADD": "新增",
@@ -109,5 +110,7 @@ var zh = {
     "ENABLE_MESSAGE_TRACE":"开启消息轨迹",
     "MESSAGE_TRACE_DETAIL":"消息轨迹详情",
     "TRACE_TOPIC":"消息轨迹主题",
-    "SELECT_TRACE_TOPIC":"选择消息轨迹主题"
+    "SELECT_TRACE_TOPIC":"选择消息轨迹主题",
+    "EXPORT": "导出",
+    "NO_MATCH_RESULT": "没有查到符合条件的结果"
 }

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

@@ -34,6 +34,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 =='dlqMessage' ? 'active':''"><a ng-href="#/dlqMessage">{{'DLQ_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">

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

@@ -209,8 +209,8 @@
             <div class="modal-body " ng-repeat="item in ngDialogData.consumerRequestList">
                 <form id="addAppForm" name="addAppForm" class="form-horizontal" novalidate>
                     <div class="form-group" ng-hide="ngDialogData.bIsUpdate">
-                        <label class="control-label col-sm-4">clusterName:</label>
-                        <div class="col-sm-8">
+                        <label class="control-label col-sm-3">clusterName:</label>
+                        <div class="col-sm-9">
                             <select name="mySelectClusterNameList" multiple chosen
                                     ng-model="item.clusterNameList"
                                     ng-options="clusterNameItem for clusterNameItem in ngDialogData.allClusterNameList">
@@ -219,8 +219,8 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-4">brokerName:</label>
-                        <div class="col-sm-8">
+                        <label class="control-label col-sm-3">brokerName:</label>
+                        <div class="col-sm-9">
                             <select name="mySelectBrokerNameList" multiple chosen
                                     ng-disabled="ngDialogData.bIsUpdate"
                                     ng-model="item.brokerNameList"
@@ -230,16 +230,16 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-4">groupName:</label>
-                        <div class="col-sm-8">
+                        <label class="control-label col-sm-3">groupName:</label>
+                        <div class="col-sm-9">
                             <input class="form-control" ng-model="item.subscriptionGroupConfig.groupName" type="text"
                                    ng-disabled="ngDialogData.bIsUpdate" required/>
                             <span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-4">consumeEnable:</label>
-                        <div class="col-sm-8">
+                        <label class="control-label col-sm-3">consumeEnable:</label>
+                        <div class="col-sm-9">
                             <md-switch class="md-primary" ng-disabled="{{!ngDialogData.writeOperationEnabled}}" md-no-ink
                                        aria-label="Switch No Ink" ng-model="item.subscriptionGroupConfig.consumeEnable">
                             </md-switch>
@@ -257,8 +257,8 @@
                     <!--</div>-->
                     <!--</div>-->
                     <div class="form-group">
-                        <label class="control-label col-sm-4">consumeBroadcastEnable:</label>
-                        <div class="col-sm-8">
+                        <label class="control-label col-sm-3">consumeBroadcastEnable:</label>
+                        <div class="col-sm-9">
                             <md-switch class="md-primary" ng-disabled="{{!ngDialogData.writeOperationEnabled}}" md-no-ink
                                        aria-label="Switch No Ink"
                                        ng-model="item.subscriptionGroupConfig.consumeBroadcastEnable">
@@ -266,8 +266,8 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-4">retryQueueNums:</label>
-                        <div class="col-sm-8">
+                        <label class="control-label col-sm-3">retryQueueNums:</label>
+                        <div class="col-sm-9">
                             <input class="form-control" ng-model="item.subscriptionGroupConfig.retryQueueNums"
                                    type="text" ng-disabled="{{!ngDialogData.writeOperationEnabled}}"
                                    required/>
@@ -284,16 +284,16 @@
                     <!--</div>-->
                     <!--</div>-->
                     <div class="form-group">
-                        <label class="control-label col-sm-2">brokerId:</label>
-                        <div class="col-sm-8">
+                        <label class="control-label col-sm-3">brokerId:</label>
+                        <div class="col-sm-9">
                             <input class="form-control" ng-model="item.subscriptionGroupConfig.brokerId" type="text"
                                    ng-disabled="{{!ngDialogData.writeOperationEnabled}}" required/>
                             <span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label class="control-label col-sm-2">whichBrokerWhenConsumeSlowly:</label>
-                        <div class="col-sm-8">
+                        <label class="control-label col-sm-3">whichBrokerWhenConsumeSlowly:</label>
+                        <div class="col-sm-9">
                             <input class="form-control"
                                    ng-model="item.subscriptionGroupConfig.whichBrokerWhenConsumeSlowly" type="text"
                                    ng-disabled="{{!ngDialogData.writeOperationEnabled}}" required/>

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

@@ -0,0 +1,266 @@
+<!--
+  ~ 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="Consumer">
+                        <h5 class="md-display-5">Total {{paginationConf.totalItems}} Messages</h5>
+                        <md-content class="md-padding" style="min-height:600px">
+                            <div class="row">
+                                <form class="form-inline pull-left">
+                                    <div class="form-group">
+                                        <label>{{'CONSUMER' | translate}}:</label>
+                                    </div>
+                                    <div class="form-group ">
+                                        <div style="width: 300px">
+                                            <select name="mySelectGroup" chosen
+                                                    ng-model="selectedConsumerGroup"
+                                                    ng-options="item for item in allConsumerGroupList"
+                                                    ng-change="onChangeQueryCondition()"
+                                                    required>
+                                                <option value=""></option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                    <div class="form-group ">
+                                        <label>{{'BEGIN' | translate}}:</label>
+                                        <div class="input-group">
+                                            <input class="form-control" datetimepicker
+                                                   ng-change="onChangeQueryCondition()" ng-model="timepickerBegin"
+                                                   options="timepickerOptions"/>
+                                            <span class="input-group-addon"><span
+                                                    class="glyphicon glyphicon-calendar"></span></span>
+                                        </div>
+                                    </div>
+                                    <div class="form-group">
+                                        <label>{{'END' | translate}}:</label>
+                                        <div class="input-group">
+                                            <input class="form-control" datetimepicker
+                                                   ng-change="onChangeQueryCondition()" ng-model="timepickerEnd"
+                                                   options="timepickerOptions"/>
+                                            <span class="input-group-addon"><span
+                                                    class="glyphicon glyphicon-calendar"></span></span>
+                                        </div>
+                                    </div>
+                                    <button id="searchAppsButton" type="button"
+                                            class="btn btn-raised btn-sm  btn-primary"
+                                            data-toggle="modal"
+                                            ng-click="queryDlqMessageByConsumerGroup()">
+                                        <span class="glyphicon glyphicon-search"></span> {{ 'SEARCH' | translate}}
+                                    </button>
+                                </form>
+                                <table class="table table-bordered text-middle">
+                                    <tr>
+                                        <th class="text-center">Message ID</th>
+                                        <th class="text-center">Tag</th>
+                                        <th class="text-center">Key</th>
+                                        <th class="text-center">StoreTime</th>
+                                        <th class="text-center">Operation</th>
+                                    </tr>
+                                    <tr style="display: none" id="noMsgTip">
+                                        <td colspan="6" style="text-align: center">{{'NO_MATCH_RESULT' | translate}}</td>
+                                    </tr>
+                                    <tr ng-repeat="item in messageShowList">
+                                        <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="queryDlqMessageDetail(item.msgId, selectedConsumerGroup)">
+                                                {{'MESSAGE_DETAIL' | translate}}
+                                            </button>
+                                            <button class="btn btn-raised btn-sm btn-primary" type="button"
+                                                    ng-click="resendDlqMessage(item, selectedConsumerGroup)">
+                                                {{'RESEND_MESSAGE' | translate}}
+                                            </button>
+                                            <button class="btn btn-raised btn-sm btn-primary" type="button"
+                                                    ng-click="exportDlqMessage(item.msgId, selectedConsumerGroup)">
+                                                {{'EXPORT' | translate}}
+                                            </button>
+                                        </td>
+                                    </tr>
+                                </table>
+                                <tm-pagination conf="paginationConf"></tm-pagination>
+                            </div>
+                        </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">
+                            <div class="row">
+                                <form class="form-inline pull-left">
+                                    <div class="form-group">
+                                        <label>{{'CONSUMER' | translate}}:</label>
+                                    </div>
+                                    <div class="form-group ">
+                                        <div style="width: 300px">
+                                            <select name="mySelectGroup" chosen
+                                                    ng-model="selectedConsumerGroup"
+                                                    ng-options="item for item in allConsumerGroupList"
+                                                    ng-change="onChangeQueryCondition()"
+                                                    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="queryDlqMessageByMessageId(messageId, selectedConsumerGroup)">
+                                        <span class="glyphicon glyphicon-search"></span> {{ 'SEARCH' | translate}}
+                                    </button>
+                                </form>
+                                <table class="table table-bordered text-middle">
+                                    <tr>
+                                        <th class="text-center">Message ID</th>
+                                        <th class="text-center">Tag</th>
+                                        <th class="text-center">Key</th>
+                                        <th class="text-center">StoreTime</th>
+                                        <th class="text-center">Operation</th>
+                                    </tr>
+                                    <tr ng-repeat="item in queryDlqMessageByMessageIdResult">
+                                        <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="queryDlqMessageDetail(item.msgId, selectedConsumerGroup)">
+                                                {{'MESSAGE_DETAIL' | translate}}
+                                            </button>
+                                            <button class="btn btn-raised btn-sm btn-primary" type="button"
+                                                    ng-click="resendDlqMessage(item, selectedConsumerGroup)">
+                                                {{'RESEND_MESSAGE' | translate}}
+                                            </button>
+                                            <button class="btn btn-raised btn-sm btn-primary" type="button"
+                                                    ng-click="exportDlqMessage(item.msgId, selectedConsumerGroup)">
+                                                {{'EXPORT' | translate}}
+                                            </button>
+                                        </td>
+                                    </tr>
+                                </table>
+                            </div>
+                        </md-content>
+                    </md-tab>
+                </md-tabs>
+            </md-content>
+        </div>
+
+    </div>
+</div>
+
+
+<script type="text/ng-template" id="dlqMessageDetailViewDialog">
+    <md-content class="md-padding">
+        <div>
+            <form id="addAppForm" name="addAppForm" class="form-horizontal" novalidate>
+                <div class="form-group">
+                    <label class="control-label col-sm-2">Message ID:</label>
+                    <div class="col-sm-10">
+                        <label class="form-control">{{ngDialogData.messageView.msgId}}</label>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="control-label col-sm-2">Topic:</label>
+                    <div class="col-sm-10">
+                        <label class="form-control">{{ngDialogData.messageView.topic}}</label>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="control-label col-sm-2">Properties:</label>
+                    <div class="col-sm-10">
+                        <textarea class="form-control"
+                                  style="min-height:60px; resize: none"
+                                  readonly>{{ngDialogData.messageView.properties}}</textarea>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="control-label col-sm-2">ReconsumeTimes:</label>
+                    <div class="col-sm-10">
+                        <label class="form-control">{{ngDialogData.messageView.reconsumeTimes}}</label>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="control-label col-sm-2">Tag:</label>
+                    <div class="col-sm-10">
+                        <label class="form-control">{{ngDialogData.messageView.properties.TAGS}}</label>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="control-label col-sm-2">Key:</label>
+                    <div class="col-sm-10">
+                        <label class="form-control">{{ngDialogData.messageView.properties.KEYS}}</label>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="control-label col-sm-2">Storetime:</label>
+                    <div class="col-sm-10">
+                        <label class="form-control">{{ngDialogData.messageView.storeTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}</label>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="control-label col-sm-2">StoreHost:</label>
+                    <div class="col-sm-10">
+                        <label class="form-control">{{ngDialogData.messageView.storeHost}}</label>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="control-label col-sm-2">Message body:</label>
+                    <div class="col-sm-10">
+                        <textarea class="form-control"
+                                  ng-model="ngDialogData.messageView.messageBody"
+                                  style="min-height:100px; resize: none"
+                                  readonly></textarea>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </md-content>
+    <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>
+
+<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>

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

@@ -228,7 +228,7 @@
             </form>
         </div>
         <p>messageTrackList:</p>
-        <table class="table-bordered table">
+        <table class="table-bordered table text-middle">
             <tr>
                 <th class="text-center">consumerGroup</th>
                 <th class="text-center">trackType</th>