rocketmq-console/src/main/resources/static/view/pages/topic.html

<!--
  ~ 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" role="main">
    <div class="modal-body">
        <div class="row">
            <form class="form-inline pull-left col-sm-12">
                <div class="form-group form-group-sm">
                    <label>{{'TOPIC' | translate}}:</label>
                    <input type="text" class="form-control" ng-model="filterStr">
                </div>
                <md-checkbox aria-label="Checkbox" ng-model="filterNormal" class="md-primary">{{'NORMAL' | translate}}
                </md-checkbox>
                <md-checkbox aria-label="Checkbox" ng-model="filterRetry" class="md-primary">{{'RETRY' | translate}}
                </md-checkbox>
                <md-checkbox aria-label="Checkbox" ng-model="filterDLQ" class="md-primary">{{'DLQ' | translate}}
                </md-checkbox>
                <button class="btn btn-raised btn-sm btn-primary" type="button" ng-click="openAddDialog()">{{'ADD' |
                    translate}}/ {{'UPDATE' | translate}}
                </button>

            </form>
        </div>
        <br>
        <div>
            <div class="row">
                <table class="table table-bordered text-middle">
                    <tr>
                        <th class="text-center">{{'TOPIC' | translate}}</th>
                        <th class="text-center">{{ 'OPERATION' | translate}}</th>
                    </tr>
                    <tr ng-repeat="topic in topicShowList">
                        <td class="text-center">{{topic}}</td>
                        <td class="text-center">
                            <button class="btn btn-raised btn-sm btn-primary" type="button"
                                    ng-click="statsView(topic)">{{'STATUS' | translate}}
                            </button>
                            <button class="btn btn-raised btn-sm btn-primary" type="button"
                                    ng-click="routerView(topic)">{{'ROUTER' | translate}}
                            </button>

                            <button class="btn btn-raised btn-sm btn-primary" type="button"
                                    ng-click="consumerView(topic)">consumer {{'MANAGE' | translate}}
                            </button>
                            <button class="btn btn-raised btn-sm btn-primary" type="button"
                                    ng-click="openUpdateDialog(topic)">topic {{'CONFIG' |translate}}
                            </button>
                            <button class="btn btn-raised btn-sm btn-primary" type="button"
                                    ng-click="openSendTopicMessageDialog(topic)">{{'SEND_MSG' | translate}}
                            </button>
                            <button class="btn btn-raised btn-sm btn-danger" type="button"
                                    ng-click="openConsumerResetOffsetDialog(topic)">{{'RESET_CUS_OFFSET' | translate}}
                            </button>
                            <button class="btn btn-raised btn-sm btn-danger" type="button"
                                    ng-confirm-click="Are you sure to delete?"
                                    confirmed-click="deleteTopic(topic)">{{'DELETE' | translate}}
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
            <tm-pagination conf="paginationConf"></tm-pagination>
        </div>


    </div>
</div>


<script type="text/ng-template" id="resetOffsetResultDialog">
    <div class="modal-header">
        <h4 class="modal-title">ResetResult</h4>
    </div>
    <div class="modal-body ">
        <table class="table table-bordered table-hover" ng-repeat="(key, value) in ngDialogData.result" novalidate>
            <tr>
                <td>
                    <table class="table table-bordered table-hover">
                        <tr>
                            <td>GroupName:{{key}}</td>
                            <td>State:{{value.status}}</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <div ng-show="value.rollbackStatsList == null">
                        You Should Check It Yourself
                    </div>
                    <table class="table table-bordered table-hover">
                        <tr ng-repeat="item in value.rollbackStatsList">
                            <td>{{item}}</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </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>
<script type="text/ng-template" id="sendResultDialog">
    <div class="modal-header">
        <h4 class="modal-title">SendResult</h4>
    </div>
    <div class="modal-body ">
        <form class="form-horizontal" novalidate>
            <table class="table table-bordered">
                <tr ng-repeat="(key, value) in ngDialogData.result">
                    <td>{{key}}</td>
                    <td>{{value}}</td>
                </tr>
            </table>
        </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>
<script type="text/ng-template" id="topicModifyDialog">
    <div class="modal-header">
        <h4 class="modal-title">{{'TOPIC_CHANGE'| translate }}</h4>
    </div>
    <div class="modal-body " ng-repeat="item in ngDialogData.topicRequestList">
        <form id="addAppForm" name="addAppForm" class="form-horizontal" novalidate>
            <div class="form-group" ng-hide="ngDialogData.bIsUpdate">
                <label class="control-label col-sm-2">{{'CLUSTER_NAME'|translate}}:</label>
                <div class="col-sm-10">
                    <select name="mySelectClusterNameList" multiple chosen
                            ng-model="item.clusterNameList"
                            ng-options="clusterNameItem for clusterNameItem in ngDialogData.allClusterNameList"
                    >
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{'BROKER_NAME'|translate}}:</label>
                <div class="col-sm-10">
                    <select name="mySelectBrokerNameList" multiple chosen ng-disabled="ngDialogData.bIsUpdate"
                            ng-model="item.brokerNameList"
                            ng-options="brokerNameItem for brokerNameItem in ngDialogData.allBrokerNameList"
                    >
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{'TOPIC_NAME'|translate}}:</label>
                <div class="col-sm-10">
                    <input class="form-control" ng-model="item.topicName" 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-2">{{'WRITE_QUEUE_NUMS'|translate}}:</label>
                <div class="col-sm-10">
                    <input class="form-control" ng-model="item.writeQueueNums" type="text"
                           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">{{'READ_QUEUE_NUMS'|translate}}:</label>
                <div class="col-sm-10">
                    <input class="form-control" ng-model="item.readQueueNums" type="text"
                           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">{{'PERM'|translate}}:</label>
                <div class="col-sm-10">
                    <input class="form-control" ng-model="item.perm" type="text"
                           required/>
                    <span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>
                </div>
            </div>
        </form>
        <div class="modal-footer">
            <div class="ngdialog-buttons">
                <button type="button" class="ngdialog-button ngdialog-button-primary"
                        ng-click="postTopicRequest(item)">{{ 'COMMIT' | translate }}
                </button>
                <button type="button" class="ngdialog-button ngdialog-button-secondary"
                        ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
                </button>
            </div>
        </div>
    </div>

</script>
<script type="text/ng-template" id="consumerViewDialog">
    <div class="modal-header">
        <h4 class="modal-title">{{ngDialogData.topic}}{{ 'SUBSCRIPTION_GROUP' | translate }}</h4>
    </div>
    <div class="modal-body ">
        <form name="addAppForm" class="form-horizontal" novalidate>
            <div ng-show="ngDialogData.consumerGroupCount == 0">
                Don't have {{ 'SUBSCRIPTION_GROUP' | translate }}
            </div>


            <table class="table table-bordered table-hover"
                   ng-repeat="(consumerGroup, consumeDetail) in ngDialogData.consumerData">
                <tbody>
                <tr>
                    <td>
                        <table class="table table-bordered">
                            <tr>
                                <td><label>{{ 'SUBSCRIPTION_GROUP' | translate }}</label></td>
                                <td>{{consumerGroup}}</td>
                                <td><label>{{ 'DELAY' | translate }}</label></td>
                                <td>{{consumeDetail.diffTotal}}</td>
                                <td><label>{{ 'LAST_CONSUME_TIME' | translate }}</label></td>
                                <td>{{consumeDetail.lastTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="table table-bordered">
                            <tr>
                                <th class="text-center">{{'BROKER'|translate}}</th>
                                <th class="text-center">{{'QUEUE'|translate}}</th>
                                <th class="text-center">{{'CONSUMER_CLIENT'|translate}}</th>
                                <th class="text-center">{{'BROKER_OFFSET'|translate}}</th>
                                <th class="text-center">{{'CONSUMER_OFFSET'|translate}}</th>
                                <th class="text-center">{{'DIFF_TOTAL'|translate}}</th>
                                <th class="text-center">{{'LAST_TIME_STAMP'|translate}}</th>
                            </tr>
                            <tr ng-repeat="item in consumeDetail.queueStatInfoList">
                                <td class="text-center">{{item.brokerName}}</td>
                                <td class="text-center">{{item.queueId}}</td>
                                <td class="text-center">{{item.clientInfo}}</td>
                                <td class="text-center">{{item.brokerOffset}}</td>
                                <td class="text-center">{{item.consumerOffset}}</td>
                                <td class="text-center">{{item.brokerOffset-item.consumerOffset}}</td>
                                <td class="text-center">{{item.lastTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
                                </td>
                        </table>
                    </td>
                </tr>
                </tbody>
            </table>
        </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>
<script type="text/ng-template" id="consumerResetOffsetDialog">
    <div class="modal-header">
        <h4 class="modal-title">{{topic}} {{'RESET_OFFSET'|translate}}</h4>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" novalidate>
            <div class="form-group">
                <label class="control-label col-sm-2"> {{ 'SUBSCRIPTION_GROUP' | translate }}:</label>
                <div class="col-sm-10">
                    <select name="mySelect" multiple chosen
                            ng-model="ngDialogData.selectedConsumerGroup"
                            ng-options="item for item in ngDialogData.allConsumerGroupList"
                            required>
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{ 'TIME' | translate }}:</label>
                <div class="col-sm-10">
                    <div class="input-group">
                        <input class="form-control" datetimepicker ng-model="timepicker.date"
                               options="timepicker.options"/>
                        <span class="input-group-addon"><span
                                class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-primary"
                    ng-click="resetOffset()">{{ 'RESET' | translate }}
            </button>
            <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="statsViewDialog">
    <div class="modal-header">
        <h4 class="modal-title"> [{{ngDialogData.topic}}]{{'STATUS' | translate}}</h4>
    </div>
    <div class="modal-body limit_height">
        <table class="table table-bordered text-middle">
            <tr>
                <th class="text-center">{{'QUEUE'|translate}}</th>
                <th class="text-center">{{'MIN_OFFSET'|translate}}</th>
                <th class="text-center">{{'MAX_OFFSET'|translate}}</th>
                <th class="text-center">{{'LAST_UPDATE_TIME_STAMP'|translate}}</th>

            </tr>
            <tr ng-repeat="(queue,info) in ngDialogData.statsData.offsetTable">
                <td class="text-center">{{queue}}</td>
                <td class="text-center">{{info.minOffset}}</td>
                <td class="text-center">{{info.maxOffset}}</td>
                <td class="text-center">{{info.lastUpdateTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}</td>
            </tr>
        </table>
    </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>
<!--路由查看窗口-->
<script type="text/ng-template" id="routerViewDialog">
    <div class="modal-header">
        <h4 class="modal-title"> {{ngDialogData.topic}}{{'ROUTER' | translate}}</h4>
    </div>
    <div class="modal-body limit_height">

        <table class="table table-bordered table-hover">
            <tbody>
            <tr>
                <td>brokerDatas:</td>
                <td>
                    <table class="table table-bordered table-hover"
                           ng-repeat="item in ngDialogData.routeData.brokerDatas">
                        <tr>
                            <td>broker:</td>
                            <td>
                                {{item.brokerName}}
                            </td>
                        </tr>
                        <tr>
                            <td>brokerAddrs:</td>
                            <td>
                                <table class="table table-bordered table-hover">
                                    <tr ng-repeat="(index,address) in item.brokerAddrs">
                                        <td>{{index}}</td>
                                        <td>{{address}}</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>{{'QUEUE_DATAS'|translate}}</td>
                <td>
                    <table class="table table-bordered table-hover"
                           ng-repeat="item in ngDialogData.routeData.queueDatas">
                        <tr>
                            <td>{{'BROKER_NAME'|translate}}</td>
                            <td>{{item.brokerName}}</td>
                        </tr>
                        <tr>
                            <td>{{'READ_QUEUE_NUMS'|translate}}</td>
                            <td>{{item.readQueueNums}}</td>
                        </tr>
                        <tr>
                            <td>{{'WRITE_QUEUE_NUMS'|translate}}</td>
                            <td>{{item.writeQueueNums}}</td>
                        </tr>
                        <tr>
                            <td>{{'PERM'|translate}}</td>
                            <td>{{item.perm}}</td>
                        </tr>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>

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

<!--删除主题窗口-->
<script type="text/ng-template" id="deleteTopicDialog">
    <div>
        <div>
            <md-toolbar md-scroll-shrink="">
                <div class="md-toolbar-tools">
                    {{ngDialogData.topic}} {{ 'DELETE' | translate }}
                </div>
            </md-toolbar>
            <md-content>
                <md-card>

                </md-card>
                <div class="ngdialog-buttons">
                    <button type="button" class="ngdialog-button ngdialog-button-secondary"
                            ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
                    </button>
                </div>
            </md-content>
        </div>
    </div>
</script>

<!--发送自定义消息窗口-->
<script type="text/ng-template" id="sendTopicMessageDialog">

    <div class="modal-header">
        <h4 class="modal-title">{{'SEND'|translate}}[{{ngDialogData.topic}}]{{'MESSAGE'| translate}}</h4>
    </div>
    <div class="modal-body ">
        <form class="form-horizontal" novalidate>

            <div class="form-group">
                <label class="control-label col-sm-2">{{'TOPIC'|translate}}:</label>
                <div class="col-sm-10">
                    <input class="form-control" name="name" ng-model="sendTopicMessage.topic" type="text"
                           disabled/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{'TAG'|translate}}:</label>
                <div class="col-sm-10">
                    <input class="form-control" name="name" ng-model="sendTopicMessage.tag" type="text"
                           ng-disabled/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{'KEY'|translate}}:</label>
                <div class="col-sm-10">
                    <input class="form-control" name="name" ng-model="sendTopicMessage.key" type="text"
                           ng-disabled/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">{{'MESSAGE_BODY'|translate}}:</label>
                <div class="col-sm-10">
                    <textarea class="form-control" name="name"
                              ng-model="sendTopicMessage.messageBody"
                              style="max-height:200px;min-height:200px; resize: none"
                              ng-disabled></textarea>
                </div>
            </div>

        </form>
    </div>
    <div class="modal-footer">
        <div class="ngdialog-buttons">
            <button type="button" class="ngdialog-button ngdialog-button-primary"
                    ng-click="send()">{{ 'COMMIT' | translate }}
            </button>
            <button type="button" class="ngdialog-button ngdialog-button-secondary"
                    ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
            </button>
        </div>
    </div>
</script>