kafka acl user search and show list

ui/src/main.js

@@ -5,9 +5,11 @@ import store from "./store";
 // eslint-disable-next-line no-unused-vars
 import Antd from "ant-design-vue";
 import "ant-design-vue/dist/antd.css";
+import { VueAxios } from "./utils/request";
 
 Vue.config.productionTip = false;
 Vue.use(Antd);
+Vue.use(VueAxios);
 
 new Vue({
   router,

ui/src/utils/axios.js

@@ -0,0 +1,33 @@
+const VueAxios = {
+  vm: {},
+  // eslint-disable-next-line no-unused-vars
+  install(Vue, instance) {
+    if (this.installed) {
+      return;
+    }
+    this.installed = true;
+
+    if (!instance) {
+      // eslint-disable-next-line no-console
+      console.error("You have to install axios");
+      return;
+    }
+
+    Vue.axios = instance;
+
+    Object.defineProperties(Vue.prototype, {
+      axios: {
+        get: function get() {
+          return instance;
+        },
+      },
+      $http: {
+        get: function get() {
+          return instance;
+        },
+      },
+    });
+  },
+};
+
+export { VueAxios };

ui/src/utils/request.js

@@ -0,0 +1,44 @@
+import axios from "axios";
+import notification from "ant-design-vue/es/notification";
+import { VueAxios } from "./axios";
+
+// 创建 axios 实例
+const request = axios.create({
+  // API 请求的默认前缀
+  baseURL: "/kafka-console",
+  timeout: 10000, // 请求超时时间
+});
+
+// 异常拦截处理器
+const errorHandler = (error) => {
+  if (error.response) {
+    const data = error.response.data;
+    notification.error({
+      message: error.response.status,
+      description: JSON.stringify(data),
+    });
+  }
+  return Promise.reject(error);
+};
+
+// request interceptor
+// request.interceptors.request.use(config => {
+//
+//   return config
+// }, errorHandler)
+
+// response interceptor
+request.interceptors.response.use((response) => {
+  return response.data;
+}, errorHandler);
+
+const installer = {
+  vm: {},
+  install(Vue) {
+    Vue.use(VueAxios, request);
+  },
+};
+
+export default request;
+
+export { installer as VueAxios, request as axios };

ui/src/views/acl/Acl.vue

@@ -1,6 +1,50 @@
 <template>
   <div class="content">
     <div class="acl">
+      <div id="components-form-demo-advanced-search">
+        <a-form
+          class="ant-advanced-search-form"
+          :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>
       <a-table :columns="columns" :data-source="data" bordered>
         <a slot="operation" slot-scope="{}">删除</a>
         <!--        <a-table-->
@@ -33,19 +77,87 @@
 </template>
 
 <script>
+import request from "@/utils/request";
+import notification from "ant-design-vue/es/notification";
+
 export default {
   name: "Acl",
   data() {
     return {
-      data,
+      queryParam: {},
+      data: [],
       columns,
       innerColumns,
       innerData,
+      form: this.$form.createForm(this, { name: "advanced_search" }),
     };
   },
-  methods: {},
+  methods: {
+    handleSearch(e) {
+      e.preventDefault();
+      this.form.validateFields((error, values) => {
+        let queryParam = {};
+        if (values.username) {
+          queryParam.username = values.username;
+        }
+        if (values.topic) {
+          queryParam.resourceType = "TOPIC";
+          queryParam.resourceName = values.topic;
+        } else if (values.groupId) {
+          queryParam.resourceType = "GROUP";
+          queryParam.resourceName = values.groupId;
+        }
+        getAclList(this.data, queryParam);
+      });
+    },
+
+    handleReset() {
+      this.form.resetFields();
+    },
+  },
+  created() {
+    getAclList(this.data, this.queryParam);
+  },
 };
 
+const api = {
+  getAclList: {
+    url: "/acl/list",
+    method: "post",
+  },
+};
+
+function getAclList(data, requestParameters) {
+  request({
+    url: api.getAclList.url,
+    method: api.getAclList.method,
+    data: requestParameters,
+  }).then((response) => {
+    data.splice(0, 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]);
+      data.push({
+        key: k,
+        username: k,
+        topicList: topicList.join(", "),
+        groupList: groupList.join(", "),
+      });
+    }
+  });
+}
+
 const columns = [
   { title: "用户名", dataIndex: "username", key: "username" },
   { title: "topic列表", dataIndex: "topicList", key: "topicList" },
@@ -57,20 +169,6 @@ const columns = [
   },
 ];
 
-const data = [];
-for (let i = 0; i < 30; ++i) {
-  data.push({
-    key: i,
-    username: "amdin",
-    topicList: ["test_topic1", "test_topic2", "test_topic3"].join(", "),
-    groupList: [
-      "test_topic1_consumer",
-      "test_topic2_consumer",
-      "test_topic3_consumer",
-    ].join(", "),
-  });
-}
-
 const innerColumns = [
   { title: "Date", dataIndex: "date", key: "date" },
   { title: "Name", dataIndex: "name", key: "name" },
@@ -100,4 +198,38 @@ for (let i = 0; i < 3; ++i) {
   width: 100%;
   height: 100%;
 }
+
+.ant-advanced-search-form {
+  padding: 24px;
+  background: #fbfbfb;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+}
+
+.ant-advanced-search-form .ant-form-item {
+  display: flex;
+}
+
+.ant-advanced-search-form .ant-form-item-control-wrapper {
+  flex: 1;
+}
+
+#components-form-demo-advanced-search .ant-form {
+  max-width: none;
+  margin-bottom: 1%;
+}
+
+#components-form-demo-advanced-search .search-result-list {
+  margin-top: 16px;
+  border: 1px dashed #e9e9e9;
+  border-radius: 6px;
+  background-color: #fafafa;
+  min-height: 200px;
+  text-align: center;
+  padding-top: 80px;
+}
+
+.input-w {
+  width: 400px;
+}
 </style>