jiazhizhong/kafka-console-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ACL加载遮置

Browse Source
This commit is contained in:
许晓东
2021-10-09 15:21:19 +08:00
parent d4fdb739b9
commit 2baf8d093e
2 changed files with 249 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

405
ui/src/views/acl/Acl.vue
View File

@@ -1,155 +1,157 @@
<template> <template>
<div class="content"> <div class="content">
<div class="acl"> <a-spin :spinning="loading">
<div id="components-form-acl-advanced-search"> <div class="acl">
<a-form <div id="components-form-acl-advanced-search">
class="ant-advanced-search-form" <a-form
:form="form" class="ant-advanced-search-form"
@submit="handleSearch" :form="form"
> @submit="handleSearch"
<a-row :gutter="24">
<a-col :span="8">
<a-form-item :label="`用户名`">
<a-input
placeholder="username"
class="input-w"
v-decorator="['username']"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item :label="`topic`">
<a-input
placeholder="topic"
class="input-w"
v-decorator="['topic']"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item :label="`消费组`">
<a-input
placeholder="groupId"
class="input-w"
v-decorator="['groupId']"
/>
</a-form-item>
</a-col>
<a-col :span="24" :style="{ textAlign: 'right' }">
<a-button type="primary" html-type="submit"> 搜索</a-button>
<a-button :style="{ marginLeft: '8px' }" @click="handleReset">
重置
</a-button>
</a-col>
</a-row>
</a-form>
</div>
<div class="operation-row-button">
<a-button type="primary" @click="updateUser">新增/更新用户</a-button>
<UpdateUser
:visible="showUpdateUser"
@updateUserDialogData="closeUpdateUserDialog"
></UpdateUser>
</div>
<a-table :columns="columns" :data-source="data" bordered>
<div slot="username" slot-scope="username">
<span>{{ username }}</span
><a-button
size="small"
shape="round"
type="dashed"
style="float: right"
@click="onUserDetail(username)"
>详情</a-button
> >
</div> <a-row :gutter="24">
<a-col :span="8">
<a-form-item :label="`用户名`">
<a-input
placeholder="username"
class="input-w"
v-decorator="['username']"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item :label="`topic`">
<a-input
placeholder="topic"
class="input-w"
v-decorator="['topic']"
/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item :label="`消费组`">
<a-input
placeholder="groupId"
class="input-w"
v-decorator="['groupId']"
/>
</a-form-item>
</a-col>
<div slot="topicList" slot-scope="topicList, record"> <a-col :span="24" :style="{ textAlign: 'right' }">
<a <a-button type="primary" html-type="submit"> 搜索</a-button>
href="#" <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
v-for="t in topicList" 重置
:key="t" </a-button>
@click="onTopicDetail(t, record.username)" </a-col>
><div style="border-bottom: 1px solid #e5e1e1">{{ t }}</div> </a-row>
</a> </a-form>
</div> </div>
<div class="operation-row-button">
<div slot="groupList" slot-scope="groupList, record"> <a-button type="primary" @click="updateUser">新增/更新用户</a-button>
<a <UpdateUser
href="#" :visible="showUpdateUser"
v-for="t in groupList" @updateUserDialogData="closeUpdateUserDialog"
:key="t" ></UpdateUser>
@click="onGroupDetail(t, record.username)"
><div style="border-bottom: 1px solid #e5e1e1">{{ t }}</div>
</a>
</div> </div>
<a-table :columns="columns" :data-source="data" bordered>
<div <div slot="username" slot-scope="username">
slot="operation" <span>{{ username }}</span
slot-scope="record" ><a-button
v-show="!record.user || record.user.role != 'admin'" size="small"
> shape="round"
<a-popconfirm type="dashed"
:title="'删除用户: ' + record.username + '及相关权限？'" style="float: right"
ok-text="确认" @click="onUserDetail(username)"
cancel-text="取消" >详情</a-button
@confirm="onDeleteUser(record)"
>
<a-button size="small" href="javascript:;" class="operation-btn"
>删除</a-button
> >
</a-popconfirm> </div>
<a-button
size="small"
href="javascript:;"
class="operation-btn"
@click="onManageProducerAuth(record)"
>管理生产权限
</a-button>
<a-button <div slot="topicList" slot-scope="topicList, record">
size="small" <a
href="javascript:;" href="#"
class="operation-btn" v-for="t in topicList"
@click="onManageConsumerAuth(record)" :key="t"
>管理消费权限 @click="onTopicDetail(t, record.username)"
</a-button> ><div style="border-bottom: 1px solid #e5e1e1">{{ t }}</div>
<a-button </a>
size="small" </div>
href="javascript:;"
class="operation-btn" <div slot="groupList" slot-scope="groupList, record">
@click="onAddAuth(record)" <a
>增加权限 href="#"
</a-button> v-for="t in groupList"
</div> :key="t"
</a-table> @click="onGroupDetail(t, record.username)"
<UserDetail ><div style="border-bottom: 1px solid #e5e1e1">{{ t }}</div>
:visible="openUserDetailDialog" </a>
:username="selectDetail.username" </div>
@userDetailDialog="closeUserDetailDialog"
></UserDetail> <div
<AclDetail slot="operation"
:visible="openAclDetailDialog" slot-scope="record"
:selectDetail="selectDetail" v-show="!record.user || record.user.role != 'admin'"
@aclDetailDialog="closeAclDetailDialog" >
></AclDetail> <a-popconfirm
<ManageProducerAuth :title="'删除用户: ' + record.username + '及相关权限？'"
:visible="openManageProducerAuthDialog" ok-text="确认"
:record="selectRow" cancel-text="取消"
@manageProducerAuthDialog="closeManageProducerAuthDialog" @confirm="onDeleteUser(record)"
></ManageProducerAuth> >
<ManageConsumerAuth <a-button size="small" href="javascript:;" class="operation-btn"
:visible="openManageConsumerAuthDialog" >删除</a-button
:record="selectRow" >
@manageConsumerAuthDialog="closeManageConsumerAuthDialog" </a-popconfirm>
></ManageConsumerAuth> <a-button
<AddAuth size="small"
:visible="openAddAuthDialog" href="javascript:;"
:record="selectRow" class="operation-btn"
@addAuthDialog="closeAddAuthDialog" @click="onManageProducerAuth(record)"
></AddAuth> >管理生产权限
</div> </a-button>
<a-button
size="small"
href="javascript:;"
class="operation-btn"
@click="onManageConsumerAuth(record)"
>管理消费权限
</a-button>
<a-button
size="small"
href="javascript:;"
class="operation-btn"
@click="onAddAuth(record)"
>增加权限
</a-button>
</div>
</a-table>
<UserDetail
:visible="openUserDetailDialog"
:username="selectDetail.username"
@userDetailDialog="closeUserDetailDialog"
></UserDetail>
<AclDetail
:visible="openAclDetailDialog"
:selectDetail="selectDetail"
@aclDetailDialog="closeAclDetailDialog"
></AclDetail>
<ManageProducerAuth
:visible="openManageProducerAuthDialog"
:record="selectRow"
@manageProducerAuthDialog="closeManageProducerAuthDialog"
></ManageProducerAuth>
<ManageConsumerAuth
:visible="openManageConsumerAuthDialog"
:record="selectRow"
@manageConsumerAuthDialog="closeManageConsumerAuthDialog"
></ManageConsumerAuth>
<AddAuth
:visible="openAddAuthDialog"
:record="selectRow"
@addAuthDialog="closeAddAuthDialog"
></AddAuth>
</div>
</a-spin>
</div> </div>
</template> </template>
@@ -193,6 +195,7 @@ export default {
resourceType: "", resourceType: "",
username: "", username: "",
}, },
loading: false,
}; };
}, },
methods: { methods: {
@@ -211,7 +214,7 @@ export default {
queryParam.resourceName = values.groupId; queryParam.resourceName = values.groupId;
} }
Object.assign(this.queryParam, queryParam); Object.assign(this.queryParam, queryParam);
getAclList(this.data, queryParam); this.getAclList();
}); });
}, },
@@ -225,7 +228,7 @@ export default {
closeUpdateUserDialog(data) { closeUpdateUserDialog(data) {
this.showUpdateUser = data.show; this.showUpdateUser = data.show;
if (data.ok) { if (data.ok) {
getAclList(this.data, this.queryParam); this.getAclList();
} }
}, },
onDeleteUser(row) { onDeleteUser(row) {
@@ -234,7 +237,7 @@ export default {
method: KafkaAclApi.deleteKafkaUser.method, method: KafkaAclApi.deleteKafkaUser.method,
data: { username: row.username }, data: { username: row.username },
}).then((res) => { }).then((res) => {
getAclList(this.data, this.queryParam); this.getAclList();
if (res.code == 0) { if (res.code == 0) {
this.$message.success(res.msg); this.$message.success(res.msg);
} else { } else {
@@ -278,65 +281,99 @@ export default {
}, },
closeManageProducerAuthDialog() { closeManageProducerAuthDialog() {
this.openManageProducerAuthDialog = false; this.openManageProducerAuthDialog = false;
getAclList(this.data, this.queryParam); this.getAclList();
}, },
closeManageConsumerAuthDialog() { closeManageConsumerAuthDialog() {
this.openManageConsumerAuthDialog = false; this.openManageConsumerAuthDialog = false;
getAclList(this.data, this.queryParam); this.getAclList();
}, },
closeAddAuthDialog(p) { closeAddAuthDialog(p) {
this.openAddAuthDialog = false; this.openAddAuthDialog = false;
if (p.refresh) { if (p.refresh) {
getAclList(this.data, this.queryParam); this.getAclList();
} }
}, },
closeAclDetailDialog(p) { closeAclDetailDialog(p) {
this.openAclDetailDialog = false; this.openAclDetailDialog = false;
if (p.refresh) { if (p.refresh) {
getAclList(this.data, this.queryParam); this.getAclList();
} }
}, },
closeUserDetailDialog() { closeUserDetailDialog() {
this.openUserDetailDialog = false; this.openUserDetailDialog = false;
}, },
getAclList() {
this.loading = true;
request({
url: KafkaAclApi.getAclList.url,
method: KafkaAclApi.getAclList.method,
data: this.queryParam,
}).then((response) => {
this.loading = false;
this.data.splice(0, this.data.length);
if (response.code != 0) {
notification.error({
message: response.msg,
});
return;
}
for (let k in response.data.map) {
let v = response.data.map[k];
let topicList = Object.keys(v)
.filter((e) => e.startsWith("TOPIC"))
.map((e) => e.split("#")[1]);
let groupList = Object.keys(v)
.filter((e) => e.startsWith("GROUP"))
.map((e) => e.split("#")[1]);
this.data.push({
key: k,
username: k,
topicList: topicList,
groupList: groupList,
user: response.data.map[k]["USER"],
});
this.data.sort((a, b) => a.username.localeCompare(b.username));
}
});
},
}, },
created() { created() {
getAclList(this.data, this.queryParam); this.getAclList();
}, },
}; };
function getAclList(data, requestParameters) { // function getAclList(data, requestParameters) {
request({ // request({
url: KafkaAclApi.getAclList.url, // url: KafkaAclApi.getAclList.url,
method: KafkaAclApi.getAclList.method, // method: KafkaAclApi.getAclList.method,
data: requestParameters, // data: requestParameters,
}).then((response) => { // }).then((response) => {
data.splice(0, data.length); // data.splice(0, data.length);
if (response.code != 0) { // if (response.code != 0) {
notification.error({ // notification.error({
message: response.msg, // message: response.msg,
}); // });
return; // return;
} // }
for (let k in response.data.map) { // for (let k in response.data.map) {
let v = response.data.map[k]; // let v = response.data.map[k];
let topicList = Object.keys(v) // let topicList = Object.keys(v)
.filter((e) => e.startsWith("TOPIC")) // .filter((e) => e.startsWith("TOPIC"))
.map((e) => e.split("#")[1]); // .map((e) => e.split("#")[1]);
let groupList = Object.keys(v) // let groupList = Object.keys(v)
.filter((e) => e.startsWith("GROUP")) // .filter((e) => e.startsWith("GROUP"))
.map((e) => e.split("#")[1]); // .map((e) => e.split("#")[1]);
data.push({ // data.push({
key: k, // key: k,
username: k, // username: k,
topicList: topicList, // topicList: topicList,
groupList: groupList, // groupList: groupList,
user: response.data.map[k]["USER"], // user: response.data.map[k]["USER"],
}); // });
data.sort((a, b) => a.username.localeCompare(b.username)); // data.sort((a, b) => a.username.localeCompare(b.username));
} // }
}); // });
} // }
const columns = [ const columns = [
{ {

50
ui/src/views/acl/AclDetail.vue
View File

@@ -10,28 +10,30 @@
:footer="null" :footer="null"
:maskClosable="false" :maskClosable="false"
> >
<div> <a-spin :spinning="loading">
<a-table <div>
:columns="columns" <a-table
:data-source="data" :columns="columns"
:rowKey=" :data-source="data"
(record, index) => { :rowKey="
return index; (record, index) => {
} return index;
" }
>> "
<a slot="action" slot-scope="record"> >>
<a-popconfirm <a slot="action" slot-scope="record">
:title="'删除操作权限: ' + record.operation + '？'" <a-popconfirm
ok-text="确认" :title="'删除操作权限: ' + record.operation + '？'"
cancel-text="取消" ok-text="确认"
@confirm="onDelete(record)" cancel-text="取消"
> @confirm="onDelete(record)"
<a-button>删除</a-button> >
</a-popconfirm> <a-button>删除</a-button>
</a> </a-popconfirm>
</a-table> </a>
</div> </a-table>
</div>
</a-spin>
</a-modal> </a-modal>
</template> </template>
@@ -55,12 +57,14 @@ export default {
show: this.visible, show: this.visible,
data, data,
columns, columns,
loading: false,
}; };
}, },
watch: { watch: {
visible(v) { visible(v) {
this.show = v; this.show = v;
if (this.show) { if (this.show) {
this.data = [];
this.getAclDetail(); this.getAclDetail();
} }
}, },
@@ -70,12 +74,14 @@ export default {
this.$emit("aclDetailDialog", { refresh: true }); this.$emit("aclDetailDialog", { refresh: true });
}, },
getAclDetail() { getAclDetail() {
this.loading = true;
const api = KafkaAclApi.getAclDetailList; const api = KafkaAclApi.getAclDetailList;
request({ request({
url: api.url, url: api.url,
method: api.method, method: api.method,
data: this.selectDetail, data: this.selectDetail,
}).then((res) => { }).then((res) => {
this.loading = false;
if (res.code != 0) { if (res.code != 0) {
this.$message.error(res.msg); this.$message.error(res.msg);
} else { } else {