[ISSUE #5]Different pages are displayed based on the user role. (#7)

* [ISSUE #5]Different pages are displayed based on the user role.

* Put the role judgment logic into js

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

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

@@ -25,13 +25,11 @@
                     <input type="text" class="form-control" ng-model="filterStr">
                 </div>
                 <div class="form-group form-group-sm">
-
-                    <button class="btn btn-raised btn-sm btn-primary" type="button" ng-click="openAddDialog()">{{'ADD' |
-                        translate}}/ {{'UPDATE' | translate}}
+                    <button class="btn btn-raised btn-sm btn-primary" type="button" ng-show="{{writeOperationEnabled}}"
+                            ng-click="openAddDialog()">{{'ADD' | translate}}/ {{'UPDATE' | translate}}
                     </button>
                 </div>
                 <div class="form-group form-group-sm">
-
                     <button class="btn btn-raised btn-sm btn-primary" type="button" ng-click="refreshConsumerData()">
                         {{'REFRESH' | translate}}
                     </button>
@@ -48,8 +46,7 @@
             <div id="deployList" class="row">
                 <table class="table table-bordered">
                     <tr>
-                        <th class="text-center"><a ng-click="sortByKey('group')">{{ 'SUBSCRIPTION_GROUP' |
-                            translate}}</a></th>
+                        <th class="text-center"><a ng-click="sortByKey('group')">{{ 'SUBSCRIPTION_GROUP' | translate}}</a></th>
                         <th class="text-center"><a ng-click="sortByKey('count')">{{ 'QUANTITY' | translate}}</a></th>
                         <th class="text-center">{{ 'VERSION' | translate}}</th>
                         <th class="text-center">{{ 'TYPE' | translate}}</th>
@@ -83,6 +80,7 @@
                             <!--</button>-->
                             <button name="client" ng-click="delete(consumerGroup.group)"
                                     class="btn btn-raised btn-sm btn-danger"
+                                    ng-show="{{writeOperationEnabled}}"
                                     type="button">{{'DELETE' | translate}}
                             </button>
 
@@ -242,25 +240,28 @@
                     <div class="form-group">
                         <label class="control-label col-sm-4">consumeEnable:</label>
                         <div class="col-sm-8">
-                            <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="item.subscriptionGroupConfig.consumeEnable">
+                            <md-switch class="md-primary" ng-disabled="{{!ngDialogData.writeOperationEnabled}}" md-no-ink
+                                       aria-label="Switch No Ink" ng-model="item.subscriptionGroupConfig.consumeEnable">
                             </md-switch>
                             <!--<input class="form-control" ng-model="item.subscriptionGroupConfig.consumeEnable"-->
-                                   <!--type="text"-->
-                                   <!--required/>-->
+                            <!--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-4">consumeFromMinEnable:</label>-->
-                        <!--<div class="col-sm-8">-->
-                            <!--<md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="item.subscriptionGroupConfig.consumeFromMinEnable">-->
-                            <!--</md-switch>-->
-                        <!--</div>-->
+                    <!--<label class="control-label col-sm-4">consumeFromMinEnable:</label>-->
+                    <!--<div class="col-sm-8">-->
+                    <!--<md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="item.subscriptionGroupConfig.consumeFromMinEnable">-->
+                    <!--</md-switch>-->
+                    <!--</div>-->
                     <!--</div>-->
                     <div class="form-group">
                         <label class="control-label col-sm-4">consumeBroadcastEnable:</label>
                         <div class="col-sm-8">
-                            <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="item.subscriptionGroupConfig.consumeBroadcastEnable">
+                            <md-switch class="md-primary" ng-disabled="{{!ngDialogData.writeOperationEnabled}}" md-no-ink
+                                       aria-label="Switch No Ink"
+                                       ng-model="item.subscriptionGroupConfig.consumeBroadcastEnable">
                             </md-switch>
                         </div>
                     </div>
@@ -268,25 +269,25 @@
                         <label class="control-label col-sm-4">retryQueueNums:</label>
                         <div class="col-sm-8">
                             <input class="form-control" ng-model="item.subscriptionGroupConfig.retryQueueNums"
-                                   type="text"
+                                   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-4">retryMaxTimes:</label>-->
-                        <!--<div class="col-sm-8">-->
-                            <!--<input class="form-control" ng-model="item.subscriptionGroupConfig.retryMaxTimes"-->
-                                   <!--type="text"-->
-                                   <!--required/>-->
-                            <!--<span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>-->
-                        <!--</div>-->
+                    <!--<label class="control-label col-sm-4">retryMaxTimes:</label>-->
+                    <!--<div class="col-sm-8">-->
+                    <!--<input class="form-control" ng-model="item.subscriptionGroupConfig.retryMaxTimes"-->
+                    <!--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-4">brokerId:</label>
                         <div class="col-sm-8">
                             <input class="form-control" ng-model="item.subscriptionGroupConfig.brokerId" type="text"
-                                   required/>
+                                   ng-disabled="{{!ngDialogData.writeOperationEnabled}}" required/>
                             <span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>
                         </div>
                     </div>
@@ -295,18 +296,26 @@
                         <div class="col-sm-8">
                             <input class="form-control"
                                    ng-model="item.subscriptionGroupConfig.whichBrokerWhenConsumeSlowly" type="text"
-                                   required/>
+                                   ng-disabled="{{!ngDialogData.writeOperationEnabled}}" required/>
                             <span class="text-danger" ng-show="addAppForm.name.$error.required">编号不能为空.</span>
                         </div>
                     </div>
                 </form>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-raised btn-primary" ng-disabled="addAppForm.$invalid"
-                            ng-click="postConsumerRequest(item)">{{ 'COMMIT' | translate }}
-                    </button>
+                    <div class="ngdialog-buttons">
+                        <button type="button" class="ngdialog-button ngdialog-button-primary"
+                                ng-disabled="addAppForm.$invalid"
+                                ng-show="{{ngDialogData.writeOperationEnabled}}"
+                                ng-click="postConsumerRequest(item)">{{ 'COMMIT' | translate }}
+                        </button>
+                        <button type="button" class="ngdialog-button ngdialog-button-secondary"
+                                ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
+    </div>
 
     </div>
 </script>
@@ -396,7 +405,9 @@
                             <td><label>{{ 'DELAY' | translate }}</label></td>
                             <td>{{consumeDetail.diffTotal}}</td>
                             <td><label>{{ 'LAST_CONSUME_TIME' | translate }}</label></td>
-                            <td>{{(consumeDetail.lastTimestamp == 0)?"N/A":consumeDetail.lastTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+                            <td>{{(consumeDetail.lastTimestamp == 0)?"N/A":consumeDetail.lastTimestamp |
+                                date:'yyyy-MM-dd HH:mm:ss'}}
+                            </td>
                         </tr>
                     </table>
                 </td>
@@ -422,7 +433,8 @@
                             <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 == 0)?"N/A":item.lastTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+                            <td class="text-center">{{(item.lastTimestamp == 0)?"N/A":item.lastTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}
+                            </td>
                         </tr>
                     </table>
                 </td>

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

@@ -41,7 +41,8 @@
                                     <div class="form-group ">
                                         <label>{{'BEGIN' | translate}}:</label>
                                         <div class="input-group">
-                                            <input class="form-control" datetimepicker ng-change="onChangeQueryCondition()" ng-model="timepickerBegin"
+                                            <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>
@@ -50,7 +51,8 @@
                                     <div class="form-group">
                                         <label>{{'END' | translate}}:</label>
                                         <div class="input-group">
-                                            <input class="form-control" datetimepicker ng-change="onChangeQueryCondition()" ng-model="timepickerEnd"
+                                            <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>
@@ -79,8 +81,7 @@
                                         </td>
                                         <td class="text-center">
                                             <button class="btn btn-raised btn-sm btn-primary" type="button"
-                                                    ng-click="queryMessageByMessageId(item.msgId,item.topic)">Message
-                                                Detail
+                                                    ng-click="queryMessageByMessageId(item.msgId,item.topic)">{{'MESSAGE_DETAIL' | translate}}
                                             </button>
                                         </td>
                                     </tr>
@@ -237,11 +238,11 @@
                 <td class="text-center">
                     <button class="btn btn-raised btn-sm btn-primary" type="button"
                             ng-click="resendMessage(ngDialogData.messageView,item.consumerGroup)">
-                        Resend Message
+                        {{ 'RESEND_MESSAGE' | translate}}
                     </button>
                     <button class="btn btn-raised btn-sm btn-primary" type="button"
                             ng-click="showExceptionDesc(item.exceptionDesc)">
-                        View Exception
+                        {{ 'VIEW_EXCEPTION' | translate}}
                     </button>
                 </td>
             </tr>

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

@@ -18,21 +18,24 @@
     <div class="page-content">
         <h2 class="md-title">NameServerAddressList</h2>
         <div class="pull-left">
-            <input type="text" class="form-control" ng-model="namesvrAddrList"  />
+            <input type="text" class="form-control" ng-model="namesvrAddrList" ng-disabled="{{!writeOperationEnabled}}"/>
         </div>
         <div class="pull-left">
-            <button class="btn btn-raised btn-sm btn-primary" type="button" ng-click="updateNameSvrAddr()">{{'UPDATE' | translate}}
+            <button class="btn btn-raised btn-sm btn-primary" type="button" ng-show="{{writeOperationEnabled}}"
+                    ng-click="updateNameSvrAddr()">{{'UPDATE' | translate}}
             </button>
         </div>
         <br/>
         <br/>
         <h2 class="md-title">IsUseVIPChannel</h2>
-        <div  class="pull-left">
-            <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="useVIPChannel">
+        <div class="pull-left">
+            <md-switch class="md-primary" ng-disabled="{{!writeOperationEnabled}}" md-no-ink aria-label="Switch No Ink"
+                       ng-model="useVIPChannel">
             </md-switch>
         </div>
         <div class="pull-left">
-            <button class="btn btn-raised btn-sm btn-primary" type="button" ng-click="updateIsVIPChannel()">{{'UPDATE' | translate}}
+            <button class="btn btn-raised btn-sm btn-primary" type="button" ng-show="{{writeOperationEnabled}}"
+                    ng-click="updateIsVIPChannel()">{{'UPDATE' | translate}}
             </button>
         </div>
 
@@ -40,12 +43,14 @@
         <br/>
         <br/>
         <h2 class="md-title">useTLS</h2>
-        <div  class="pull-left">
-            <md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="useTLS">
+        <div class="pull-left">
+            <md-switch class="md-primary" ng-disabled="{{!writeOperationEnabled}}" md-no-ink aria-label="Switch No Ink"
+                       ng-model="useTLS">
             </md-switch>
         </div>
         <div class="pull-left">
-            <button class="btn btn-raised btn-sm btn-primary" type="button" ng-click="updateUseTLS()">{{'UPDATE' | translate}}
+            <button class="btn btn-raised btn-sm btn-primary" type="button" ng-show="{{writeOperationEnabled}}"
+                    ng-click="updateUseTLS()">{{'UPDATE' | translate}}
             </button>
         </div>
     </div>

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

@@ -30,8 +30,8 @@
                 </md-checkbox>
                 <md-checkbox aria-label="Checkbox" ng-model="filterSystem" class="md-primary">{{'SYSTEM' | translate}}
                 </md-checkbox>
-                <button class="btn btn-raised btn-sm btn-primary" type="button" ng-click="openAddDialog()">{{'ADD' |
-                    translate}}/ {{'UPDATE' | translate}}
+                <button class="btn btn-raised btn-sm btn-primary" type="button" ng-show="{{writeOperationEnabled}}"
+                        ng-click="openAddDialog()">{{'ADD' | translate}}/ {{'UPDATE' | translate}}
                 </button>
                 <button class="btn btn-raised btn-sm btn-primary" type="button" ng-click="refreshTopicList()">
                     {{'REFRESH' | translate}}
@@ -68,15 +68,16 @@
                                     ng-click="openSendTopicMessageDialog(topic)">{{'SEND_MSG' | translate}}
                             </button>
                             <button class="btn btn-raised btn-sm btn-danger" type="button"
-                                    ng-show="{{!sysFlag}}"
+                                    ng-show="{{!sysFlag && writeOperationEnabled}}"
                                     ng-click="openConsumerResetOffsetDialog(topic)">{{'RESET_CUS_OFFSET' | translate}}
                             </button>
                             <button class="btn btn-raised btn-sm btn-danger" type="button"
-                                    ng-show="{{!sysFlag}}"
-                                    ng-click="openSkipMessageAccumulateDialog(topic)">{{'SKIP_MESSAGE_ACCUMULATE' | translate}}
+                                    ng-show="{{!sysFlag && writeOperationEnabled}}"
+                                    ng-click="openSkipMessageAccumulateDialog(topic)">{{'SKIP_MESSAGE_ACCUMULATE' |
+                                translate}}
                             </button>
                             <button class="btn btn-raised btn-sm btn-danger" type="button"
-                                    ng-show="{{!sysFlag}}"
+                                    ng-show="{{!sysFlag && writeOperationEnabled}}"
                                     ng-confirm-click="Are you sure to delete?"
                                     confirmed-click="deleteTopic(topic)">{{'DELETE' | translate}}
                             </button>
@@ -192,7 +193,7 @@
                 <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" name="writeQueueNums" type="text"
-                           required/>
+                           ng-disabled="{{!ngDialogData.writeOperationEnabled}}" required/>
                     <span class="text-danger" ng-show="addAppForm.writeQueueNums.$error.required">{{'WRITE_QUEUE_NUMS'|translate}}不能为空.</span>
                 </div>
             </div>
@@ -200,7 +201,7 @@
                 <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" name="readQueueNums" type="text"
-                           required/>
+                           ng-disabled="{{!ngDialogData.writeOperationEnabled}}" required/>
                     <span class="text-danger" ng-show="addAppForm.readQueueNums.$error.required">{{'READ_QUEUE_NUMS'|translate}}不能为空.</span>
                 </div>
             </div>
@@ -208,7 +209,7 @@
                 <label class="control-label col-sm-2">{{'PERM'|translate}}:</label>
                 <div class="col-sm-10">
                     <input class="form-control" ng-model="item.perm" name="perm" type="text"
-                           required/>
+                           ng-disabled="{{!ngDialogData.writeOperationEnabled}}" required/>
                     <span class="text-danger" ng-show="addAppForm.perm.$error.required">{{'PERM'|translate}}不能为空.</span>
                 </div>
             </div>
@@ -216,7 +217,7 @@
         <div class="modal-footer">
             <div class="ngdialog-buttons">
                 <button type="button" class="ngdialog-button ngdialog-button-primary"
-                        ng-show="{{!ngDialogData.sysFlag}}"
+                        ng-show="{{!ngDialogData.sysFlag && ngDialogData.writeOperationEnabled}}"
                         ng-click="postTopicRequest(item)">{{ 'COMMIT' | translate }}
                 </button>
                 <button type="button" class="ngdialog-button ngdialog-button-secondary"