add auth detail

2021-09-03 21:01:09 +08:00
parent 4d26a97b63
commit 399d67fd3c
6 changed files with 253 additions and 35 deletions
--- a/src/main/java/com/xuxd/kafka/console/controller/AclAuthController.java
+++ b/src/main/java/com/xuxd/kafka/console/controller/AclAuthController.java
@@ -28,9 +28,9 @@ public class AclAuthController {
    @Autowired
    private AclService aclService;

-    @GetMapping
-    public Object getAclList() {
-        return aclService.getAclList();
+    @PostMapping("/detail")
+    public Object getAclDetailList(@RequestBody QueryAclDTO param) {
+        return aclService.getAclDetailList(param.toEntry());
    }

    @GetMapping("/operation/list")
--- a/src/main/java/com/xuxd/kafka/console/service/AclService.java
+++ b/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);

--- a/src/main/java/com/xuxd/kafka/console/service/impl/AclServiceImpl.java
+++ b/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() {
-        List<AclBinding> aclBindingList = aclConsole.getAclList(null);
+    @Override public ResponseData getAclDetailList(AclEntry entry) {
+        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();
    }
--- a/ui/src/utils/api.js
+++ b/ui/src/utils/api.js
@@ -35,4 +35,8 @@ export const KafkaAclApi = {
    url: "/acl",
    method: "post",
  },
+  getAclDetailList: {
+    url: "/acl/detail",
+    method: "post",
+  },
 };
--- a/ui/src/views/acl/Acl.vue
+++ b/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-->
-        <!--          slot="expandedRowRender"-->
-        <!--          slot-scope="{}"-->
-        <!--          :columns="innerColumns"-->
-        <!--          :data-source="innerData"-->
-        <!--          :pagination="false"-->
-        <!--        >-->
-        <!--          <span slot="status" slot-scope="{}"> <a-badge status="success" />Finished </span>-->
-        <!--          <span slot="operation" slot-scope="{}" class="table-operation">-->
-        <!--            <a>Pause</a>-->
-        <!--            <a>Stop</a>-->
-        <!--            <a-dropdown>-->
-        <!--              <a-menu slot="overlay">-->
-        <!--                <a-menu-item>-->
-        <!--                  Action 1-->
-        <!--                </a-menu-item>-->
-        <!--                <a-menu-item>-->
-        <!--                  Action 2-->
-        <!--                </a-menu-item>-->
-        <!--              </a-menu>-->
-        <!--              <a> More <a-icon type="down" /> </a>-->
-        <!--            </a-dropdown>-->
-        <!--          </span>-->
-        <!--        </a-table>-->
+        <!--                <a-table-->
+        <!--                  slot="expandedRowRender"-->
+        <!--                  slot-scope="{}"-->
+        <!--                  :columns="innerColumns"-->
+        <!--                  :data-source="innerData"-->
+        <!--                  :pagination="false"-->
+        <!--                >-->
+        <!--                  <span slot="status" slot-scope="{}"> <a-badge status="success" />Finished </span>-->
+        <!--                  <span slot="operation" slot-scope="{}" class="table-operation">-->
+        <!--                    <a>Pause</a>-->
+        <!--                    <a>Stop</a>-->
+        <!--                    <a-dropdown>-->
+        <!--                      <a-menu slot="overlay">-->
+        <!--                        <a-menu-item>-->
+        <!--                          Action 1-->
+        <!--                        </a-menu-item>-->
+        <!--                        <a-menu-item>-->
+        <!--                          Action 2-->
+        <!--                        </a-menu-item>-->
+        <!--                      </a-menu>-->
+        <!--                      <a> More <a-icon type="down" /> </a>-->
+        <!--                    </a-dropdown>-->
+        <!--                  </span>-->
+        <!--                </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(", "),
-        groupList: groupList.join(", "),
+        topicList: topicList,
+        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",
--- a/ui/src/views/acl/AclDetail.vue
+++ b/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>