Files
rocketmq-dashboard/src/main/resources/static/view/pages/acl.html
Xiaodong Xu 4269879d93 [ISSUE #70] The rocketmq-dashboard supports ACL configuration (#71)
* Add Acl menu, support config acl.

* Optimize one line code.

* Add some unit tests for acl.

* Add permission control by role and optimize some code.

* The secret keys are hidden by asterisks.

* Search acl data will exclude secretKey info if the login role is not admin in the background.

* Optimize some code again.

* recover default application.yml config
2022-03-05 10:34:39 +08:00

483 lines
26 KiB
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">
<div class="modal-body">
<div ng-cloak="" class="tabsdemoDynamicHeight">
<md-content>
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab label="Account Info">
<md-content class="md-padding" style="min-height:600px">
<form class="form-inline pull-left col-sm-12">
<div class="form-group">
<label>Access Key:</label>
<input class="form-control" style="width: 450px" type="text" ng-model="filterStr"/>
</div>
<button ng-show="writeOperationEnabled" class="btn btn-raised btn-sm btn-primary"
type="button"
ng-click="openAddDialog()">{{'ADD' |
translate}}
</button>
</form>
<table class="table table-bordered">
<tr>
<th class="text-center">Access Key</th>
<th ng-show="writeOperationEnabled" class="text-center">Secret Key</th>
<th class="text-center">{{'IS_ADMIN' | translate}}</th>
<th class="text-center">{{'DEFAULT_TOPIC_PERM' | translate}}</th>
<th class="text-center">{{'DEFAULT_GROUP_PERM' | translate}}</th>
<th class="text-center">{{'TOPIC_PERM' | translate}}</th>
<th class="text-center">{{'GROUP_PERM' | translate}}</th>
<th ng-show="writeOperationEnabled" class="text-center">
{{'OPERATION' | translate}}
</th>
</tr>
<tr ng-repeat="item in plainAccessConfigs">
<td class="text-center">{{item.accessKey}}</td>
<td ng-show="writeOperationEnabled" class="text-center">
<input type="{{showSecretKeyType[item.accessKey].type}}"
value="{{item.secretKey}}" class="input-none" ng-disabled="true"/>
<a href="javascript:;"
ng-click="switchSecretKeyType(item.accessKey)">{{showSecretKeyType[item.accessKey].action | translate}}</a>
</td>
<td class="text-center">{{item.admin}}</td>
<td class="text-center">{{item.defaultTopicPerm}}</td>
<td class="text-center">{{item.defaultGroupPerm}}</td>
<td class="text-center">
<table ng-repeat="topic in item.topicPerms" class="perm-table">
<tr>
<td class="perm-tg">{{topic}}</td>
<td ng-show="writeOperationEnabled" class="center"><a
href="javascript:;"
ng-click="openUpdateTopicDialog(item, topic)">
{{'UPDATE' | translate}}</a></td>
<td ng-show="writeOperationEnabled"><a href="javascript:;"
ng-confirm-click="Are you sure to delete {{topic}}?"
confirmed-click="deletePermConfig(item, topic, 'topic')">{{'DELETE' | translate}}</a>
</td>
</tr>
</table>
</td>
<td class="text-center">
<table ng-repeat="group in item.groupPerms" class="perm-table">
<tr>
<td class="perm-tg">{{group}}</td>
<td ng-show="writeOperationEnabled" class="center"><a
href="javascript:;"
ng-click="openUpdateGroupDialog(item, group)">
{{'UPDATE' | translate}}</a></td>
<td ng-show="writeOperationEnabled"><a href="javascript:;"
ng-confirm-click="Are you sure to delete {{group}}?"
confirmed-click="deletePermConfig(item, group, 'group')">{{'DELETE' | translate}}</a>
</td>
</tr>
</table>
</td>
<td ng-show="writeOperationEnabled" class="text-center">
<button class="btn btn-raised btn-sm btn-primary" type="button"
ng-click="openAddTopicDialog(item)">
{{'ADD' | translate}}topic
</button>
<button class="btn btn-raised btn-sm btn-primary" type="button"
ng-click="openAddGroupDialog(item)">
{{'ADD' | translate}}group
</button>
<button class="btn btn-raised btn-sm btn-primary" type="button"
ng-click="openUpdateDialog(item)">
{{'UPDATE' | translate}}
</button>
<button class="btn btn-raised btn-sm btn-danger" type="button"
ng-confirm-click="Are you sure to delete {{item.accessKey}}?"
confirmed-click="deleteAclConfig(item.accessKey)">{{'DELETE' | translate}}
</button>
<button class="btn btn-raised btn-sm btn-danger" type="button"
ng-click="synchronizeData(item)">{{'SYNCHRONIZE' | translate}}
</button>
</td>
</tr>
</table>
<tm-pagination conf="paginationConf"></tm-pagination>
</md-content>
</md-tab>
<md-tab label="Global White List">
<md-content class="md-padding" style="min-height:600px">
<form class="form-inline pull-left col-sm-12">
<button ng-show="writeOperationEnabled" class="btn btn-raised btn-sm btn-primary"
type="button"
ng-click="openAddAddrDialog()">{{'ADD' |
translate}}
</button>
<button ng-show="writeOperationEnabled" class="btn btn-raised btn-sm btn-danger"
type="button"
ng-confirm-click="Are you sure to synchronize white list to all broker int the cluster?"
confirmed-click="synchronizeWhiteList(allGlobalWhiteAddrs)">
{{'SYNCHRONIZE' | translate}}
</button>
</form>
<table class="table table-bordered">
<tr>
<th class="text-center">{{'WHITE_LIST' | translate}}</th>
<th ng-show="writeOperationEnabled" class="text-center">
{{'OPERATION' | translate}}
</th>
</tr>
<tr ng-repeat="item in allGlobalWhiteAddrs">
<td class="text-center">{{item}}
</td>
<td ng-show="writeOperationEnabled" class="text-center">
<button class="btn btn-raised btn-sm btn-danger" type="button"
ng-confirm-click="Are you sure to delete {{item}}?"
confirmed-click="deleteGlobalWhiteAddr(item)">{{'DELETE' | translate}}
</button>
</td>
</tr>
</table>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</div>
</div>
</div>
<script type="text/ng-template" id="addAclAccountDialog">
<div class="modal-header">
<h4 class="modal-title">{{'ADD' | translate }}</h4>
</div>
<div class="modal-body ">
<form id="addAppForm" name="addAppForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2">Access Key:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.accessKey" type="text" required/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Secret Key:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.secretKey" type="text" required/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">{{'IS_ADMIN' | translate}}:</label>
<div class="col-sm-8">
<md-switch class="md-primary" md-no-ink aria-label="Switch No Ink"
ng-model="ngDialogData.admin">
</md-switch>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">{{'DEFAULT_TOPIC_PERM' | translate}}:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.defaultTopicPerm" type="text" readonly/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">{{'DEFAULT_GROUP_PERM' | translate}}:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.defaultGroupPerm" type="text" readonly/>
</div>
</div>
</form>
<div class="modal-footer">
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="addRequest({'accessKey':ngDialogData.accessKey, 'secretKey': ngDialogData.secretKey, 'admin': ngDialogData.admin, 'defaultTopicPerm': ngDialogData.defaultTopicPerm, 'defaultGroupPerm': ngDialogData.defaultGroupPerm})">
{{ '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="updateAclAccountDialog">
<div class="modal-header">
<h4 class="modal-title">{{'UPDATE' | translate }}</h4>
</div>
<div class="modal-body ">
<form id="updateAccountForm" name="updateAccountForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2">Access Key:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.accessKey" type="text" disabled/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Secret Key:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.secretKey" type="text" required/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">{{'IS_ADMIN' | translate}}:</label>
<div class="col-sm-8">
<md-switch class="md-primary" md-no-ink aria-label="Switch No Ink"
ng-model="ngDialogData.admin">
</md-switch>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">{{'DEFAULT_TOPIC_PERM' | translate}}:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.defaultTopicPerm" type="text" disabled/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">{{'DEFAULT_GROUP_PERM' | translate}}:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.defaultGroupPerm" type="text" disabled/>
</div>
</div>
</form>
<div class="modal-footer">
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="updateAclAccountRequest({'accessKey':ngDialogData.accessKey, 'secretKey': ngDialogData.secretKey, 'admin': ngDialogData.admin, 'defaultTopicPerm': ngDialogData.defaultTopicPerm, 'defaultGroupPerm': ngDialogData.defaultGroupPerm})">
{{ '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="addAclTopicDialog">
<div class="modal-header">
<h4 class="modal-title">{{'ADD' | translate }}{{'TOPIC_PERM' | translate }}</h4>
</div>
<div class="modal-body ">
<form id="addAclTopicForm" name="addAclTopicForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2">Access Key:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.accessKey" type="text" disabled/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Secret Key:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.secretKey" type="text" disabled/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">{{'TOPIC' | translate}}:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="topic" type="text" required/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">{{'TOPIC_PERM' | translate}}:</label>
<div class="col-sm-8">
<md-checkbox class="md-primary" ng-model="ngDialogData.pub">PUB</md-checkbox>
<md-checkbox class="md-primary" ng-model="ngDialogData.sub">SUB</md-checkbox>
<md-checkbox class="md-primary" ng-model="ngDialogData.deny">DENY</md-checkbox>
</div>
</div>
</form>
<div class="modal-footer">
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="updateAclAccountRequest({'originalData':ngDialogData,'topic': topic , 'pub': ngDialogData.pub, 'sub': ngDialogData.sub, 'deny': ngDialogData.deny})">
{{ '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="updateAclTopicDialog">
<div class="modal-header">
<h4 class="modal-title">{{'UPDATE' | translate }}{{'TOPIC_PERM' | translate }}</h4>
</div>
<div class="modal-body ">
<form id="updateAclTopicForm" name="updateAclTopicForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2">Access Key:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.accessKey" type="text" disabled/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Secret Key:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.secretKey" type="text" disabled/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">{{'TOPIC' | translate}}:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.topic" type="text" disabled/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">{{'TOPIC_PERM' | translate}}:</label>
<div class="col-sm-8">
<md-checkbox class="md-primary" ng-model="ngDialogData.pub">PUB</md-checkbox>
<md-checkbox class="md-primary" ng-model="ngDialogData.sub">SUB</md-checkbox>
<md-checkbox class="md-primary" ng-model="ngDialogData.deny">DENY</md-checkbox>
</div>
</div>
</form>
<div class="modal-footer">
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="updateAclAccountRequest({'originalData':ngDialogData,'topic': ngDialogData.topic , 'pub': ngDialogData.pub, 'sub': ngDialogData.sub, 'deny': ngDialogData.deny})">
{{ '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="addAclGroupDialog">
<div class="modal-header">
<h4 class="modal-title">{{'ADD' | translate }}{{'GROUP_PERM' | translate }}</h4>
</div>
<div class="modal-body ">
<form id="addAclGroupForm" name="addAclGroupForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2">Access Key:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.accessKey" type="text" disabled/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Secret Key:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.secretKey" type="text" disabled/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">{{'CONSUMER' | translate}}:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="group" type="text" required/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">{{'GROUP_PERM' | translate}}:</label>
<div class="col-sm-8">
<md-checkbox class="md-primary" ng-model="ngDialogData.pub">PUB</md-checkbox>
<md-checkbox class="md-primary" ng-model="ngDialogData.sub">SUB</md-checkbox>
<md-checkbox class="md-primary" ng-model="ngDialogData.deny">DENY</md-checkbox>
</div>
</div>
</form>
<div class="modal-footer">
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="updateAclAccountRequest({'originalData':ngDialogData,'group': group , 'pub': ngDialogData.pub, 'sub': ngDialogData.sub, 'deny': ngDialogData.deny})">
{{ '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="updateAclGroupDialog">
<div class="modal-header">
<h4 class="modal-title">{{'UPDATE' | translate }}{{'GROUP_PERM' | translate }}</h4>
</div>
<div class="modal-body ">
<form id="updateAclGroupForm" name="updateAclGroupForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2">Access Key:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.accessKey" type="text" disabled/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Secret Key:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.secretKey" type="text" disabled/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">{{'CONSUMER' | translate}}:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ngDialogData.group" type="text" disabled/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">{{'GROUP_PERM' | translate}}:</label>
<div class="col-sm-8">
<md-checkbox class="md-primary" ng-model="ngDialogData.pub">PUB</md-checkbox>
<md-checkbox class="md-primary" ng-model="ngDialogData.sub">SUB</md-checkbox>
<md-checkbox class="md-primary" ng-model="ngDialogData.deny">DENY</md-checkbox>
</div>
</div>
</form>
<div class="modal-footer">
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="updateAclAccountRequest({'originalData':ngDialogData,'group': ngDialogData.group , 'pub': ngDialogData.pub, 'sub': ngDialogData.sub, 'deny': ngDialogData.deny})">
{{ '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="addWhiteListDialog">
<div class="modal-header">
<h4 class="modal-title">{{'ADD' | translate }}{{'WHITE_LIST' | translate }}</h4>
</div>
<div class="modal-body ">
<form id="addWhiteListForm" name="addWhiteListForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2">{{'WHITE_LIST' | translate }}:</label>
<div class="col-sm-10">
<input class="form-control" ng-model="ip" type="text"/>
</div>
</div>
</form>
<div class="modal-footer">
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="addWhiteListRequest(ip)">
{{ 'COMMIT' | translate }}
</button>
<button type="button" class="ngdialog-button ngdialog-button-secondary"
ng-click="closeThisDialog('Cancel')">{{ 'CLOSE' | translate }}
</button>
</div>
</div>
</div>
</script>