From 28546e479838e6709df1712c1c2a3260d8d37515 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=99=93=E4=B8=9C?= <763795151@qq.com>
Date: Fri, 3 Sep 2021 10:57:13 +0800
Subject: [PATCH] add consumer authorization manage

---
 ui/src/utils/api.js                     |   8 ++
 ui/src/views/acl/Acl.vue                |  26 ++++-
 ui/src/views/acl/ManageConsumerAuth.vue | 122 ++++++++++++++++++++++++
 ui/src/views/acl/ManageProducerAuth.vue |  74 +++++++-------
 4 files changed, 189 insertions(+), 41 deletions(-)
 create mode 100644 ui/src/views/acl/ManageConsumerAuth.vue

diff --git a/ui/src/utils/api.js b/ui/src/utils/api.js
index 1fa8e2d..06ae9bd 100644
--- a/ui/src/utils/api.js
+++ b/ui/src/utils/api.js
@@ -19,4 +19,12 @@ export const KafkaAclApi = {
     url: "/acl/producer",
     method: "delete",
   },
+  addConsumerAuth: {
+    url: "/acl/consumer",
+    method: "post",
+  },
+  deleteConsumerAuth: {
+    url: "/acl/consumer",
+    method: "delete",
+  },
 };
diff --git a/ui/src/views/acl/Acl.vue b/ui/src/views/acl/Acl.vue
index a27de0b..39b3935 100644
--- a/ui/src/views/acl/Acl.vue
+++ b/ui/src/views/acl/Acl.vue
@@ -74,7 +74,17 @@
             ></ManageProducerAuth>
           </a>
 
-          <a href="javascript:;" class="operation-btn">管理消费权限</a>
+          <a
+            href="javascript:;"
+            class="operation-btn"
+            @click="onManageConsumerAuth(record)"
+            >管理消费权限
+            <ManageConsumerAuth
+              :visible="openManageConsumerAuthDialog"
+              :record="selectRow"
+              @manageConsumerAuthDialog="closeManageConsumerAuthDialog"
+            ></ManageConsumerAuth>
+          </a>
           <a href="javascript:;" class="operation-btn">增加权限</a>
         </a>
         <!--        <a-table-->
@@ -112,10 +122,11 @@ import notification from "ant-design-vue/es/notification";
 import UpdateUser from "@/views/acl/UpdateUser";
 import { KafkaAclApi } from "@/utils/api";
 import ManageProducerAuth from "@/views/acl/ManageProducerAuth";
+import ManageConsumerAuth from "@/views/acl/ManageConsumerAuth";
 
 export default {
   name: "Acl",
-  components: { UpdateUser, ManageProducerAuth },
+  components: { UpdateUser, ManageProducerAuth, ManageConsumerAuth },
   data() {
     return {
       queryParam: {},
@@ -128,6 +139,7 @@ export default {
       showUpdateUser: false,
       deleteUserConfirm: false,
       openManageProducerAuthDialog: false,
+      openManageConsumerAuthDialog: false,
     };
   },
   methods: {
@@ -183,6 +195,12 @@ export default {
       Object.assign(rowData, row);
       this.selectRow = rowData;
     },
+    onManageConsumerAuth(row) {
+      this.openManageConsumerAuthDialog = true;
+      const rowData = {};
+      Object.assign(rowData, row);
+      this.selectRow = rowData;
+    },
     cancel(e) {
       console.log(e);
       this.$message.error("Click on No");
@@ -191,6 +209,10 @@ export default {
       this.openManageProducerAuthDialog = false;
       getAclList(this.data, this.queryParam);
     },
+    closeManageConsumerAuthDialog() {
+      this.openManageConsumerAuthDialog = false;
+      getAclList(this.data, this.queryParam);
+    },
   },
   created() {
     getAclList(this.data, this.queryParam);
diff --git a/ui/src/views/acl/ManageConsumerAuth.vue b/ui/src/views/acl/ManageConsumerAuth.vue
new file mode 100644
index 0000000..ccd9c50
--- /dev/null
+++ b/ui/src/views/acl/ManageConsumerAuth.vue
@@ -0,0 +1,122 @@
+<template>
+  <a-modal
+    title="管理消费权限"
+    :visible="show"
+    :confirm-loading="confirmLoading"
+    :width="800"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    okText="提交"
+    cancelText="取消"
+    :mask="false"
+    :destroyOnClose="true"
+  >
+    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+      <a-form-item label="用户名">
+        <a-input
+          v-decorator="['username', { initialValue: record.username }]"
+          disabled="disabled"
+        />
+      </a-form-item>
+      <a-form-item label="topic">
+        <a-input
+          v-decorator="[
+            'topic',
+            { rules: [{ required: true, message: '请输入topic!' }] },
+          ]"
+        />
+      </a-form-item>
+      <a-form-item label="消费组">
+        <a-input
+          v-decorator="[
+            'groupId',
+            { rules: [{ required: true, message: '请输入消费组!' }] },
+          ]"
+        />
+      </a-form-item>
+      <a-form-item label="类型">
+        <a-radio-group v-decorator="['type', { initialValue: 'grant' }]">
+          <a-radio value="grant"> 授予 </a-radio>
+          <a-radio value="revoke"> 收回 </a-radio>
+        </a-radio-group>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script>
+import { KafkaAclApi } from "@/utils/api";
+import request from "@/utils/request";
+export default {
+  name: "AddProducerAuth",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    record: {
+      default: {},
+    },
+  },
+  data() {
+    return {
+      formLayout: "horizontal",
+      form: this.$form.createForm(this, { name: "AddProducerAuthForm" }),
+      confirmLoading: false,
+      show: this.visible,
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+    },
+  },
+  methods: {
+    handleOk() {
+      const form = this.form;
+      form.validateFields((e, v) => {
+        if (e) {
+          return;
+        }
+        const param = {
+          username: v.username,
+          topic: v.topic,
+          groupId: v.groupId,
+        };
+        const api = {};
+        switch (v.type) {
+          case "grant":
+            Object.assign(api, KafkaAclApi.addConsumerAuth);
+            break;
+          case "revoke":
+            Object.assign(api, KafkaAclApi.deleteConsumerAuth);
+            break;
+          default:
+            this.$message.error("unknown error");
+            return;
+        }
+
+        this.confirmLoading = true;
+        request({
+          url: api.url,
+          method: api.method,
+          data: param,
+        }).then((res) => {
+          this.confirmLoading = false;
+          if (res.code == 0) {
+            this.$message.success(res.msg);
+            this.$emit("manageConsumerAuthDialog", v);
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+      });
+    },
+    handleCancel() {
+      this.$emit("manageConsumerAuthDialog", {});
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/ui/src/views/acl/ManageProducerAuth.vue b/ui/src/views/acl/ManageProducerAuth.vue
index f7e77cd..07258b8 100644
--- a/ui/src/views/acl/ManageProducerAuth.vue
+++ b/ui/src/views/acl/ManageProducerAuth.vue
@@ -1,39 +1,35 @@
 <template>
   <a-modal
-      title="管理生产权限"
-      :visible="show"
-      :confirm-loading="confirmLoading"
-      :width="800"
-      @ok="handleOk"
-      @cancel="handleCancel"
-      okText="提交"
-      cancelText="取消"
-      :mask="false"
-      :destroyOnClose="true"
+    title="管理生产权限"
+    :visible="show"
+    :confirm-loading="confirmLoading"
+    :width="800"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    okText="提交"
+    cancelText="取消"
+    :mask="false"
+    :destroyOnClose="true"
   >
     <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
       <a-form-item label="用户名">
         <a-input
-            v-decorator="['username', { initialValue: record.username }]"
-            disabled="disabled"
+          v-decorator="['username', { initialValue: record.username }]"
+          disabled="disabled"
         />
       </a-form-item>
       <a-form-item label="topic">
         <a-input
-            v-decorator="[
+          v-decorator="[
             'topic',
             { rules: [{ required: true, message: '请输入topic!' }] },
           ]"
         />
       </a-form-item>
       <a-form-item label="类型">
-        <a-radio-group v-decorator="['type', {initialValue: 'grant'}]">
-          <a-radio value="grant">
-            授予
-          </a-radio>
-          <a-radio value="revoke">
-            收回
-          </a-radio>
+        <a-radio-group v-decorator="['type', { initialValue: 'grant' }]">
+          <a-radio value="grant"> 授予 </a-radio>
+          <a-radio value="revoke"> 收回 </a-radio>
         </a-radio-group>
       </a-form-item>
     </a-form>
@@ -41,31 +37,31 @@
 </template>
 
 <script>
-import {KafkaAclApi} from "@/utils/api";
+import { KafkaAclApi } from "@/utils/api";
 import request from "@/utils/request";
 export default {
   name: "AddProducerAuth",
   props: {
     visible: {
       type: Boolean,
-      default: false
+      default: false,
     },
     record: {
-      default: {}
-    }
+      default: {},
+    },
   },
   data() {
     return {
       formLayout: "horizontal",
       form: this.$form.createForm(this, { name: "AddProducerAuthForm" }),
       confirmLoading: false,
-      show: this.visible
+      show: this.visible,
     };
   },
   watch: {
     visible(v) {
       this.show = v;
-    }
+    },
   },
   methods: {
     handleOk() {
@@ -74,18 +70,18 @@ export default {
         if (e) {
           return;
         }
-        const param = {username: v.username, topic: v.topic};
-        const api = {}
+        const param = { username: v.username, topic: v.topic };
+        const api = {};
         switch (v.type) {
           case "grant":
-            Object.assign(api, KafkaAclApi.addProducerAuth)
+            Object.assign(api, KafkaAclApi.addProducerAuth);
             break;
           case "revoke":
-            Object.assign(api, KafkaAclApi.deleteProducerAuth)
+            Object.assign(api, KafkaAclApi.deleteProducerAuth);
             break;
-            default:
-              this.$message.error("unknown error");
-              return;
+          default:
+            this.$message.error("unknown error");
+            return;
         }
 
         this.confirmLoading = true;
@@ -93,21 +89,21 @@ export default {
           url: api.url,
           method: api.method,
           data: param,
-        }).then(res => {
+        }).then((res) => {
           this.confirmLoading = false;
           if (res.code == 0) {
-            this.$message.success(res.msg)
+            this.$message.success(res.msg);
             this.$emit("manageProducerAuthDialog", v);
           } else {
-            this.$message.error(res.msg)
+            this.$message.error(res.msg);
           }
-        })
+        });
       });
     },
     handleCancel() {
       this.$emit("manageProducerAuthDialog", {});
-    }
-  }
+    },
+  },
 };
 </script>