add auth detail

src/main/java/com/xuxd/kafka/console/controller/AclAuthController.java

@@ -28,9 +28,9 @@ public class AclAuthController {
     @Autowired
     private AclService aclService;
 
-    @GetMapping
+    @PostMapping("/detail")
-    public Object getAclList() {
+    public Object getAclDetailList(@RequestBody QueryAclDTO param) {
-        return aclService.getAclList();
+        return aclService.getAclDetailList(param.toEntry());
     }
 
     @GetMapping("/operation/list")

src/main/java/com/xuxd/kafka/console/service/AclService.java

@@ -20,7 +20,7 @@ public interface AclService {
 
     ResponseData deleteUserAndAuth(String name);
 
-    ResponseData getAclList();
+    ResponseData getAclDetailList(AclEntry entry);
 
     ResponseData getAclList(AclEntry entry);
 

src/main/java/com/xuxd/kafka/console/service/impl/AclServiceImpl.java

@@ -80,8 +80,8 @@ public class AclServiceImpl implements AclService, SmartInitializingSingleton {
         return ResponseData.create().success();
     }
 
-    @Override public ResponseData getAclList() {
+    @Override public ResponseData getAclDetailList(AclEntry entry) {
-        List<AclBinding> aclBindingList = aclConsole.getAclList(null);
+        List<AclBinding> aclBindingList = entry ==null || entry.isNull() ? aclConsole.getAclList(null) : aclConsole.getAclList(entry);
 
         return ResponseData.create().data(new CounterList<>(aclBindingList.stream().map(x -> AclEntry.valueOf(x)).collect(Collectors.toList()))).success();
     }

ui/src/utils/api.js

@@ -35,4 +35,8 @@ export const KafkaAclApi = {
     url: "/acl",
     method: "post",
   },
+  getAclDetailList: {
+    url: "/acl/detail",
+    method: "post",
+  },
 };

ui/src/views/acl/Acl.vue

@@ -53,6 +53,31 @@
         ></UpdateUser>
       </div>
       <a-table :columns="columns" :data-source="data" bordered>
+        <a slot="topicList" slot-scope="topicList, record">
+          <a
+            href="#"
+            v-for="t in topicList"
+            :key="t"
+            @click="onTopicDetail(t, record.username)"
+            >{{ t }},
+          </a>
+          <AclDetail
+            :visible="openAclDetailDialog"
+            :selectDetail="selectDetail"
+            @aclDetailDialog="closeAclDetailDialog"
+          ></AclDetail>
+        </a>
+
+        <a slot="groupList" slot-scope="groupList, record">
+          <a
+            href="#"
+            v-for="t in groupList"
+            :key="t"
+            @click="onGroupDetail(t, record.username)"
+            >{{ t }},
+          </a>
+        </a>
+
         <a
           slot="operation"
           slot-scope="record"
@@ -101,30 +126,30 @@
             ></AddAuth>
           </a>
         </a>
-        <!--        <a-table-->
+        <!--                <a-table-->
-        <!--          slot="expandedRowRender"-->
+        <!--                  slot="expandedRowRender"-->
-        <!--          slot-scope="{}"-->
+        <!--                  slot-scope="{}"-->
-        <!--          :columns="innerColumns"-->
+        <!--                  :columns="innerColumns"-->
-        <!--          :data-source="innerData"-->
+        <!--                  :data-source="innerData"-->
-        <!--          :pagination="false"-->
+        <!--                  :pagination="false"-->
-        <!--        >-->
+        <!--                >-->
-        <!--          <span slot="status" slot-scope="{}"> <a-badge status="success" />Finished </span>-->
+        <!--                  <span slot="status" slot-scope="{}"> <a-badge status="success" />Finished </span>-->
-        <!--          <span slot="operation" slot-scope="{}" class="table-operation">-->
+        <!--                  <span slot="operation" slot-scope="{}" class="table-operation">-->
-        <!--            <a>Pause</a>-->
+        <!--                    <a>Pause</a>-->
-        <!--            <a>Stop</a>-->
+        <!--                    <a>Stop</a>-->
-        <!--            <a-dropdown>-->
+        <!--                    <a-dropdown>-->
-        <!--              <a-menu slot="overlay">-->
+        <!--                      <a-menu slot="overlay">-->
-        <!--                <a-menu-item>-->
+        <!--                        <a-menu-item>-->
-        <!--                  Action 1-->
+        <!--                          Action 1-->
-        <!--                </a-menu-item>-->
+        <!--                        </a-menu-item>-->
-        <!--                <a-menu-item>-->
+        <!--                        <a-menu-item>-->
-        <!--                  Action 2-->
+        <!--                          Action 2-->
-        <!--                </a-menu-item>-->
+        <!--                        </a-menu-item>-->
-        <!--              </a-menu>-->
+        <!--                      </a-menu>-->
-        <!--              <a> More <a-icon type="down" /> </a>-->
+        <!--                      <a> More <a-icon type="down" /> </a>-->
-        <!--            </a-dropdown>-->
+        <!--                    </a-dropdown>-->
-        <!--          </span>-->
+        <!--                  </span>-->
-        <!--        </a-table>-->
+        <!--                </a-table>-->
       </a-table>
     </div>
   </div>
@@ -138,10 +163,17 @@ import { KafkaAclApi } from "@/utils/api";
 import ManageProducerAuth from "@/views/acl/ManageProducerAuth";
 import ManageConsumerAuth from "@/views/acl/ManageConsumerAuth";
 import AddAuth from "@/views/acl/AddAuth";
+import AclDetail from "@/views/acl/AclDetail";
 
 export default {
   name: "Acl",
-  components: { UpdateUser, ManageProducerAuth, ManageConsumerAuth, AddAuth },
+  components: {
+    UpdateUser,
+    ManageProducerAuth,
+    ManageConsumerAuth,
+    AddAuth,
+    AclDetail,
+  },
   data() {
     return {
       queryParam: {},
@@ -156,6 +188,12 @@ export default {
       openManageProducerAuthDialog: false,
       openManageConsumerAuthDialog: false,
       openAddAuthDialog: false,
+      openAclDetailDialog: false,
+      selectDetail: {
+        resourceName: "",
+        resourceType: "",
+        username: "",
+      },
     };
   },
   methods: {
@@ -223,6 +261,18 @@ export default {
       Object.assign(rowData, row);
       this.selectRow = rowData;
     },
+    onTopicDetail(topic, username) {
+      this.selectDetail.resourceType = "TOPIC";
+      this.selectDetail.resourceName = topic;
+      this.selectDetail.username = username;
+      this.openAclDetailDialog = true;
+    },
+    onGroupDetail(group, username) {
+      this.selectDetail.resourceType = "GROUP";
+      this.selectDetail.resourceName = group;
+      this.selectDetail.username = username;
+      this.openAclDetailDialog = true;
+    },
     closeManageProducerAuthDialog() {
       this.openManageProducerAuthDialog = false;
       getAclList(this.data, this.queryParam);
@@ -235,6 +285,10 @@ export default {
       this.openAddAuthDialog = false;
       getAclList(this.data, this.queryParam);
     },
+    closeAclDetailDialog() {
+      this.openAclDetailDialog = false;
+      getAclList(this.data, this.queryParam);
+    },
   },
   created() {
     getAclList(this.data, this.queryParam);
@@ -265,8 +319,8 @@ function getAclList(data, requestParameters) {
       data.push({
         key: k,
         username: k,
-        topicList: topicList.join(", "),
+        topicList: topicList,
-        groupList: groupList.join(", "),
+        groupList: groupList,
         user: response.data.map[k]["USER"],
       });
     }
@@ -275,8 +329,20 @@ function getAclList(data, requestParameters) {
 
 const columns = [
   { title: "用户名", dataIndex: "username", key: "username" },
-  { title: "topic列表", dataIndex: "topicList", key: "topicList" },
+  {
-  { title: "消费组列表", dataIndex: "groupList", key: "groupList" },
+    title: "topic列表",
+    dataIndex: "topicList",
+    key: "topicList",
+    slots: { title: "topicList" },
+    scopedSlots: { customRender: "topicList" },
+  },
+  {
+    title: "消费组列表",
+    dataIndex: "groupList",
+    key: "groupList",
+    slots: { title: "groupList" },
+    scopedSlots: { customRender: "groupList" },
+  },
   {
     title: "操作",
     key: "operation",

ui/src/views/acl/AclDetail.vue

@@ -0,0 +1,148 @@
+<template>
+  <a-modal
+    :title="selectDetail.resourceName + '权限明细'"
+    :visible="show"
+    :confirm-loading="confirmLoading"
+    :width="1200"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    okText="提交"
+    cancelText="取消"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+  >
+    <div>
+      <a-table
+        :columns="columns"
+        :data-source="data"
+        :rowKey="
+          (record, index) => {
+            return index;
+          }
+        "
+        >>
+        <a slot="name" slot-scope="text">{{ text }}</a>
+      </a-table>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { KafkaAclApi } from "@/utils/api";
+import request from "@/utils/request";
+
+export default {
+  name: "AuthDetail",
+  props: {
+    selectDetail: {},
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      formLayout: "horizontal",
+      confirmLoading: false,
+      show: this.visible,
+      data,
+      columns,
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.getAclDetail();
+      }
+    },
+  },
+  methods: {
+    handleOk() {
+      const form = this.form;
+      form.validateFields((e, v) => {
+        if (e) {
+          return;
+        }
+        const param = Object.assign({}, v);
+        const api = KafkaAclApi.addAclAuth;
+        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("aclDetailDialog", v);
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+      });
+    },
+    handleCancel() {
+      this.$emit("aclDetailDialog", {});
+    },
+    getAclDetail() {
+      const api = KafkaAclApi.getAclDetailList;
+      request({
+        url: api.url,
+        method: api.method,
+        data: this.selectDetail,
+      }).then((res) => {
+        if (res.code != 0) {
+          this.$message.error(res.msg);
+        } else {
+          this.data = res.data.list;
+          // this.data.slice(0, data.length);
+          // this.data.push(...res.data.list);
+        }
+      });
+    },
+  },
+  beforeMount() {
+    // this.getAclDetail();
+  },
+};
+
+const columns = [
+  {
+    title: "用户名",
+    dataIndex: "principal",
+    key: "principal",
+  },
+  {
+    title: "资源名称",
+    dataIndex: "name",
+    key: "name",
+  },
+  {
+    title: "主机",
+    dataIndex: "host",
+    key: "host",
+  },
+  {
+    title: "操作类型",
+    dataIndex: "operation",
+    key: "operation",
+  },
+  {
+    title: "权限类型",
+    dataIndex: "permissionType",
+    key: "permissionType",
+  },
+  {
+    title: "操作",
+    key: "action",
+    scopedSlots: { customRender: "action" },
+  },
+];
+
+const data = [];
+</script>
+
+<style scoped></style>