新增客户端限流菜单页.

ui/src/App.vue

@@ -12,6 +12,8 @@
       <span>|</span
       ><router-link to="/message-page" class="pad-l-r">消息</router-link>
       <span>|</span
+      ><router-link to="/client-quota-page" class="pad-l-r">限流</router-link>
+      <span>|</span
       ><router-link to="/acl-page" class="pad-l-r">Acl</router-link>
       <span>|</span
       ><router-link to="/op-page" class="pad-l-r">运维</router-link>

ui/src/router/index.js

@@ -49,6 +49,12 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "cluster" */ "../views/message/Message.vue"),
   },
+  {
+    path: "/client-quota-page",
+    name: "ClientQuota",
+    component: () =>
+        import(/* webpackChunkName: "cluster" */ "../views/quota/ClientQuota.vue"),
+  },
 ];
 
 const router = new VueRouter({

ui/src/utils/api.js

@@ -293,3 +293,14 @@ export const KafkaMessageApi = {
     method: "delete",
   },
 };
+
+export const KafkaClientQuotaApi = {
+  getClientQuotaConfigs: {
+    url: "/client/quota/list",
+    method: "post",
+  },
+  alterClientQuotaConfigs: {
+    url: "/client/quota",
+    method: "post",
+  },
+};

ui/src/views/quota/ClientQuota.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="content">
+    <a-spin :spinning="loading">
+      <a-tabs default-active-key="1" size="large" tabPosition="top">
+        <a-tab-pane key="1" tab="客户端ID">
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="用户">
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="客户端ID和用户">
+        </a-tab-pane>
+        <a-tab-pane key="4" tab="IP">
+        </a-tab-pane>
+        <a-tab-pane key="5" tab="使用说明">
+        </a-tab-pane>
+      </a-tabs>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+import {KafkaTopicApi} from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
+
+export default {
+  name: "ClientQuota",
+  components: {},
+  data() {
+    return {
+      loading: false,
+      topicList: [],
+    };
+  },
+  methods: {
+    getTopicNameList() {
+      request({
+        url: KafkaTopicApi.getTopicNameList.url,
+        method: KafkaTopicApi.getTopicNameList.method,
+      }).then((res) => {
+        if (res.code == 0) {
+          this.topicList = res.data;
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+  },
+  created() {
+    this.getTopicNameList();
+  },
+};
+</script>
+
+<style scoped></style>