替换淘宝镜像，限制客户端ID太长显示宽度.

解决 Windows 操作系统下 CMD 路径转义的问题

README.md

@@ -1,13 +1,16 @@
 # kafka可视化管理平台
 一款轻量级的kafka可视化管理平台，安装配置快捷、简单易用。  
-为了开发的省事，没有国际化支持，只支持中文展示。  
+为了开发的省事，没有国际化支持，页面只支持中文展示。  
 用过rocketmq-console吧，对，前端展示风格跟那个有点类似。
 
 ## 页面预览
 如果github能查看图片的话，可以点击[查看菜单页面](./document/overview/概览.md)，查看每个页面的样子
 ## 集群迁移支持说明
 当前主分支及日后版本不再提供消息同步、集群迁移的解决方案，如有需要，查看：[集群迁移说明](./document/datasync/集群迁移.md)
+## ACL说明
+最新代码运行即可看到acl菜单，将权限管理和认证的用户管理（SASL_SCRAM)进行了分离。分离之后，支持只开启SASL_SCRAM认证的时候（未开启鉴权），用户变更操作。或者使用其它认证机制下的权限管理操作（可视化的权限管理），但是可视化的认证用户管理目前只支持Scram。
 
+v1.0.6版本之前，如果kafka集群启用了ACL，但是控制台没看到Acl菜单，可以查看：[Acl配置启用说明](./document/acl/Acl.md)
 ## 功能支持
 * 多集群支持
 * 集群信息
@@ -21,7 +24,11 @@
 ![功能特性](./document/img/功能特性.png)
 
 ## 安装包下载
-点击下载(v1.0.2版本)：[kafka-console-ui.zip](https://github.com/xxd763795151/kafka-console-ui/releases/download/v1.0.2/kafka-console-ui.zip)
+点击下载(v1.0.5版本)：[kafka-console-ui.zip](https://github.com/xxd763795151/kafka-console-ui/releases/download/v1.0.5/kafka-console-ui.zip)  
+
+如果安装包下载的比较慢，可以查看下面的源码打包说明，把代码下载下来，快速打包，不过最新main分支代码刚升级了kafka版本到3.2.0，还没有充分测试，如果需要稳定版本，可以下载 1.0.4-release分支代码  
+
+github下载慢也可以试试从gitee下载，点击下载[gitee来源kafka-console-ui.zip](https://gitee.com/xiaodong_xu/kafka-console-ui/attach_files/969018/download/kafka-console-ui.zip)
 
 ## 快速使用
 ### Windows
@@ -60,7 +67,7 @@ sh bin/shutdown.sh
 在新增集群的时候，除了集群地址还可以输入集群的其它属性配置，比如请求超时，ACL配置等。如果开启了ACL，切换到该集群的时候，导航栏上便会出现ACL菜单，支持进行相关操作（目前是基于SASL_SCRAM认证授权管理支持的最完善，其它的我也没验证过，虽然是我开发的，但是我也没具体全部验证这一块功能，授权部分应该是通用的）
 
 ## kafka版本
-* 当前使用的kafka 2.8.0
+* 当前使用的kafka 3.2.0
 ## 监控
 仅提供运维管理功能，监控、告警需要配合其它组件，如有需要，建议请查看：https://blog.csdn.net/x763795151/article/details/119705372
 
@@ -69,3 +76,23 @@ sh bin/shutdown.sh
 
 ## 本地开发
 如果需要本地开发，开发环境配置查看：[本地开发](./document/develop/开发配置.md)
+
+## 登录认证和权限
+目前主分支不支持登录认证，感谢@dongyinuo 同学开发了一版支持登录认证，及相关的按钮权限（主要有两个角色：管理员和普通开发人员）。  
+在分支：feature/dongyinuo/20220501/devops 上。  
+如果有需要使用管理台登录认证的，可以切换到这个分支上进行打包，打包方式看 源码打包 说明。  
+默认登录账户：admin/kafka-console-ui521
+
+## DockerCompose部署
+感谢@wdkang123 同学分享的部署方式，如果有需要请查看[DockerCompose部署方式](./document/deploy/docker部署.md)
+
+## 联系方式
++ 微信群
+
+<img src="./document/contact/weixin_contact.jpg" width="40%"/>
+
+[//]: # (<img src="https://github.com/xxd763795151/kafka-console-ui/blob/main/document/contact/weixin_contact.jpg" width="40%"/>)
+
++ 若联系方式失效, 请联系加一下微信, 说明意图
+    - xxd763795151
+    - wxid_7jy2ezljvebt12

bin/start.bat

@@ -5,4 +5,4 @@ set JAVA_OPTS=-Xmx512m -Xms512m -Xmn256m -Xss256k
 set CONFIG_FILE=../config/application.yml
 set TARGET=../lib/kafka-console-ui.jar
 set DATA_DIR=..
-%JAVA_CMD% -jar %TARGET% --spring.config.location=%CONFIG_FILE% --data.dir=%DATA_DIR%
+"%JAVA_CMD%" -jar %TARGET% --spring.config.location=%CONFIG_FILE% --data.dir=%DATA_DIR%

document/acl/Acl.md

@@ -0,0 +1,36 @@
+# Acl配置启用说明
+## 前言
+可能有的同学是看了这篇文章来的：[如何通过可视化方式快捷管理kafka的acl配置](https://blog.csdn.net/x763795151/article/details/120200119)
+
+这篇文章里可能说了是通过修改配置文件application.yml的方式来启用ACL，示例如下：
+```yaml
+kafka:
+  config:
+    # kafka broker地址，多个以逗号分隔
+    bootstrap-server: 'localhost:9092'
+    # 服务端是否启用acl，如果不启用，下面的几项都忽略即可
+    enable-acl: true
+    # 只支持2种安全协议SASL_PLAINTEXT和PLAINTEXT，启用acl则设置为SASL_PLAINTEXT，不启用acl不需关心这个配置
+    security-protocol: SASL_PLAINTEXT
+    sasl-mechanism: SCRAM-SHA-256
+    # 超级管理员用户名，在broker上已经配置为超级管理员
+    admin-username: admin
+    # 超级管理员密码
+    admin-password: admin
+    # 启动自动创建配置的超级管理员用户
+    admin-create: true
+    # broker连接的zk地址
+    zookeeper-addr: localhost:2181
+    sasl-jaas-config: org.apache.kafka.common.security.scram.ScramLoginModule required username="${kafka.config.admin-username}" password="${kafka.config.admin-password}";
+```
+其中说明了kafka.config.enable-acl配置项需要为true。
+
+注意：**现在不再支持这种方式了**
+## v1.0.6之前的版本说明
+因为现在支持多集群配置，关于多集群配置，可以看主页说明的 配置集群 介绍。
+所以这里把这些额外的配置项都去掉了。
+
+如果启用了ACL，在页面上新增集群的时候，在属性里配置集群的ACL相关信息，如下：![新增集群](./新增集群.png)
+如果控制台检测到属性里有ACL相关属性配置，切换到这个集群后，ACL菜单会自动出现的。
+
+注意：只支持SASL。

document/deploy/docker部署.md

@@ -0,0 +1,189 @@
+# Docker/DockerCompose部署
+
+# 1.快速上手
+
+## 1.1 镜像拉取
+
+```shell
+docker pull wdkang/kafka-console-ui
+```
+
+
+
+## 1.2 查看镜像
+
+```shell
+docker images
+```
+
+
+
+## 1.3 启动服务
+
+由于Docker内不会对数据进行持久化 所以这里推荐将数据目录映射到实体机中 
+
+详见 **2.数据持久**
+
+```shell
+docker run -d -p 7766:7766 wdkang/kafka-console-ui
+```
+
+
+
+## 1.4 查看状态
+
+```shell
+docker ps -a
+```
+
+
+
+## 1.5 查看日志
+
+```shell
+docker logs -f ${containerId}
+```
+
+
+
+## 1.6 访问服务
+
+```shell
+http://localhost:7766
+```
+
+
+
+# 2. 数据持久
+
+推荐对数据进行持久化
+
+## 2.1 新建目录
+
+```shell
+mkdir -p /home/kafka-console-ui/data /home/kafka-console-ui/log
+cd /home/kafka-console-ui
+```
+
+## 2.2 启动服务
+
+```shell
+docker run -d -p 7766:7766 -v $PWD/data:/app/data -v $PWD/log:/app/log wdkang/kafka-console-ui
+```
+
+
+
+# 3.自主打包
+
+## 3.1 构建镜像
+
+**前置需求**
+
+(可根据自身情况修改Dockerfile)
+
+下载[kafka-console-ui.zip](https://github.com/xxd763795151/kafka-console-ui/releases)包
+
+解压后 将Dockerfile放入文件夹的根目录
+
+**Dockefile**
+
+```dockerfile
+# jdk
+FROM openjdk:8-jdk-alpine
+# label
+LABEL by="https://github.com/xxd763795151/kafka-console-ui"
+# root
+RUN mkdir -p /app && cd /app
+WORKDIR /app
+# config log data
+RUN mkdir -p /app/config && mkdir -p /app/log && mkdir -p /app/data && mkdir -p /app/lib
+# add file
+ADD ./lib/kafka-console-ui.jar /app/lib
+ADD ./config /app/config
+# port
+EXPOSE 7766
+# start server
+CMD java -jar -Xmx512m -Xms512m -Xmn256m -Xss256k /app/lib/kafka-console-ui.jar --spring.config.location="/app/config/" --logging.home="/app/log" --data.dir="/app/data"
+
+```
+
+**进行打包**
+
+在文件夹根目录下
+
+(注意末尾有个点)
+
+```shell
+docker build -t ${your_docker_hub_addr} .
+```
+
+
+
+## 3.2 上传镜像
+
+```shell
+docker push ${your_docker_hub_addr}
+```
+
+
+
+# 4.容器编排
+
+```dockerfile
+# docker-compose 编排
+version: '3'
+services:
+  # 服务名
+  kafka-console-ui:
+  	# 容器名
+    container_name: "kafka-console-ui"
+		# 端口
+    ports:
+      - "7766:7766"
+    # 持久化
+    volumes:
+      - ./data:/app/data
+      - ./log:/app/log
+		# 防止读写文件有问题
+    privileged: true
+    user: root
+    # 镜像地址
+    image: "wdkang/kafka-console-ui"
+```
+
+
+
+## 4.1 拉取镜像
+
+```shell
+docker-compose pull kafka-console-ui
+```
+
+
+
+## 4.2 构建启动
+
+```shell
+docker-compose up --detach --build kafka-console-ui
+```
+
+
+
+## 4.3 查看状态
+
+```shell
+docker-compose ps -a
+```
+
+
+
+## 4.3 停止服务
+
+```shell
+docker-compose down
+```
+
+
+
+
+

document/develop/开发配置.md

@@ -12,8 +12,11 @@
 * scala 2.13
 * maven >=3.6+
 * webstorm
+* Node
   
 除了webstorm是开发前端的ide可以根据自己需要代替，jdk scala是必须有的。
+
+开发的时候，我本地用的node版本是v14.16.0，下载目录：https://nodejs.org/download/release/v14.16.0/ . 过高或过低版本是否适用，我也没测试过。
   
 scala 2.13下载地址，在这个页面最下面：https://www.scala-lang.org/download/scala2.html
 ## 克隆代码
@@ -21,7 +24,8 @@ scala 2.13下载地址，在这个页面最下面：https://www.scala-lang.org/d
 ## 后端配置
 1. 用idea打开项目
 2. 打开idea的Project Structure(Settings) ->  Modules -> 设置src/main/scala为Sources，因为约定src/main/java是源码目录，所以这里要再加一个源码目录
-3. 打开idea的Project Structure(Settings) -> Libraries 添加scala sdk，然后选择本地下载的scala 2.13的目录，确定添加进来（如果使用的idea可以直接勾选，也可以不用先下载到本地）
+3. 打开idea的Settings -> plugins 搜索scala plugin并安装，然后应该是要重启idea生效，这一步必须在第4步之前
+4. 打开idea的Project Structure(Settings) -> Libraries 添加scala sdk，然后选择本地下载的scala 2.13的目录，确定添加进来（如果使用的idea可以直接勾选，也可以不用先下载到本地）
 ## 前端
 前端代码在工程的ui目录下，找个前端开发的ide如web storm打开进行开发即可。
 

document/package/源码打包.md

@@ -29,4 +29,6 @@ package.bat
 cd kafka-console-ui
 # linux或mac执行
 sh package.sh
-```
+```  
+
+打包完成，会在target目录下生成一个kafka-console-ui.zip的安装包

pom.xml

@@ -10,7 +10,7 @@
     </parent>
     <groupId>com.xuxd</groupId>
     <artifactId>kafka-console-ui</artifactId>
-    <version>1.0.3</version>
+    <version>1.0.6</version>
     <name>kafka-console-ui</name>
     <description>Kafka console manage ui</description>
     <properties>
@@ -21,7 +21,7 @@
         <ui.path>${project.basedir}/ui</ui.path>
         <frontend-maven-plugin.version>1.11.0</frontend-maven-plugin.version>
         <compiler.version>1.8</compiler.version>
-        <kafka.version>2.8.0</kafka.version>
+        <kafka.version>3.2.0</kafka.version>
         <maven.assembly.plugin.version>3.0.0</maven.assembly.plugin.version>
         <mybatis-plus-boot-starter.version>3.4.2</mybatis-plus-boot-starter.version>
         <scala.version>2.13.6</scala.version>
@@ -76,6 +76,18 @@
             <groupId>org.apache.kafka</groupId>
             <artifactId>kafka_2.13</artifactId>
             <version>${kafka.version}</version>
+            <exclusions>
+                <exclusion>
+                    <groupId>com.typesafe.scala-logging</groupId>
+                    <artifactId>scala-logging_2.13</artifactId>
+                </exclusion>
+            </exclusions>
+        </dependency>
+
+        <dependency>
+            <groupId>com.typesafe.scala-logging</groupId>
+            <artifactId>scala-logging_2.13</artifactId>
+            <version>3.9.2</version>
         </dependency>
 
         <dependency>
@@ -207,7 +219,8 @@
                                     <goal>npm</goal>
                                 </goals>
                                 <configuration>
-                                    <arguments>install --registry=https://registry.npmjs.org/</arguments>
+<!--                                    <arguments>install &#45;&#45;registry=https://registry.npmjs.org/</arguments>-->
+                                    <arguments>install --registry=https://registry.npm.taobao.org</arguments>
                                 </configuration>
                             </execution>
                             <execution>

src/main/java/com/xuxd/kafka/console/beans/AclEntry.java

@@ -1,18 +1,15 @@
 package com.xuxd.kafka.console.beans;
 
-import java.util.Objects;
 import org.apache.commons.lang3.StringUtils;
-import org.apache.kafka.common.acl.AccessControlEntry;
-import org.apache.kafka.common.acl.AccessControlEntryFilter;
-import org.apache.kafka.common.acl.AclBinding;
-import org.apache.kafka.common.acl.AclBindingFilter;
-import org.apache.kafka.common.acl.AclOperation;
-import org.apache.kafka.common.acl.AclPermissionType;
+import org.apache.kafka.common.acl.*;
 import org.apache.kafka.common.resource.PatternType;
 import org.apache.kafka.common.resource.ResourcePattern;
 import org.apache.kafka.common.resource.ResourcePatternFilter;
 import org.apache.kafka.common.resource.ResourceType;
 import org.apache.kafka.common.security.auth.KafkaPrincipal;
+import org.apache.kafka.common.utils.SecurityUtils;
+
+import java.util.Objects;
 
 /**
  * kafka-console-ui.
@@ -41,7 +38,9 @@ public class AclEntry {
         entry.setResourceType(binding.pattern().resourceType().name());
         entry.setName(binding.pattern().name());
         entry.setPatternType(binding.pattern().patternType().name());
-        entry.setPrincipal(KafkaPrincipal.fromString(binding.entry().principal()).getName());
+//        entry.setPrincipal(KafkaPrincipal.fromString(binding.entry().principal()).getName());
+        // 3.x版本使用该方法
+        entry.setPrincipal(SecurityUtils.parseKafkaPrincipal(binding.entry().principal()).getName());
         entry.setHost(binding.entry().host());
         entry.setOperation(binding.entry().operation().name());
         entry.setPermissionType(binding.entry().permissionType().name());

src/main/java/com/xuxd/kafka/console/beans/BrokerNode.java

@@ -8,7 +8,7 @@ import org.apache.kafka.common.Node;
  * @author xuxd
  * @date 2021-10-08 14:03:21
  **/
-public class BrokerNode {
+public class BrokerNode implements Comparable{
 
     private int id;
 
@@ -80,4 +80,8 @@ public class BrokerNode {
     public void setController(boolean controller) {
         isController = controller;
     }
+
+    @Override public int compareTo(Object o) {
+        return this.id - ((BrokerNode)o).id;
+    }
 }

src/main/java/com/xuxd/kafka/console/beans/TopicPartition.java

@@ -21,7 +21,7 @@ public class TopicPartition implements Comparable {
         }
         TopicPartition other = (TopicPartition) o;
         if (!this.topic.equals(other.getTopic())) {
-            return this.compareTo(other);
+            return this.topic.compareTo(other.topic);
         }
 
         return this.partition - other.partition;

src/main/java/com/xuxd/kafka/console/beans/dto/AlterClientQuotaDTO.java

@@ -0,0 +1,27 @@
+package com.xuxd.kafka.console.beans.dto;
+
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * @author: xuxd
+ * @date: 2023/1/10 20:12
+ **/
+@Data
+public class AlterClientQuotaDTO {
+
+    private String type;
+
+    private List<String> types;
+
+    private List<String> names;
+
+    private String consumerRate;
+
+    private String producerRate;
+
+    private String requestPercentage;
+
+    private List<String> deleteConfigs;
+}

src/main/java/com/xuxd/kafka/console/beans/dto/ProposedAssignmentDTO.java

@@ -0,0 +1,18 @@
+package com.xuxd.kafka.console.beans.dto;
+
+import java.util.List;
+import lombok.Data;
+
+/**
+ * kafka-console-ui.
+ *
+ * @author xuxd
+ * @date 2022-02-15 19:08:13
+ **/
+@Data
+public class ProposedAssignmentDTO {
+
+    private String topic;
+
+    private List<Integer> brokers;
+}

src/main/java/com/xuxd/kafka/console/beans/dto/QueryClientQuotaDTO.java

@@ -0,0 +1,17 @@
+package com.xuxd.kafka.console.beans.dto;
+
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * @author: xuxd
+ * @date: 2023/1/9 21:53
+ **/
+@Data
+public class QueryClientQuotaDTO {
+
+    private List<String> types;
+
+    private List<String> names;
+}

src/main/java/com/xuxd/kafka/console/beans/vo/BrokerApiVersionVO.java

@@ -0,0 +1,24 @@
+package com.xuxd.kafka.console.beans.vo;
+
+import java.util.List;
+import lombok.Data;
+
+/**
+ * kafka-console-ui.
+ *
+ * @author xuxd
+ * @date 2022-01-22 16:24:58
+ **/
+@Data
+public class BrokerApiVersionVO {
+
+    private int brokerId;
+
+    private String host;
+
+    private int supportNums;
+
+    private int unSupportNums;
+
+    private List<String> versionInfo;
+}

src/main/java/com/xuxd/kafka/console/beans/vo/ClientQuotaEntityVO.java

@@ -0,0 +1,82 @@
+package com.xuxd.kafka.console.beans.vo;
+
+import lombok.Data;
+import org.apache.commons.lang3.StringUtils;
+import org.apache.kafka.common.config.internals.QuotaConfigs;
+import org.apache.kafka.common.quota.ClientQuotaEntity;
+
+import java.util.List;
+import java.util.Map;
+
+/**
+ * @author 晓东哥哥
+ */
+@Data
+public class ClientQuotaEntityVO {
+
+    private String user;
+
+    private String client;
+
+    private String ip;
+
+    private String consumerRate;
+
+    private String producerRate;
+
+    private String requestPercentage;
+
+    public static ClientQuotaEntityVO from(ClientQuotaEntity entity, List<String> entityTypes, Map<String, Object> config) {
+        ClientQuotaEntityVO entityVO = new ClientQuotaEntityVO();
+        Map<String, String> entries = entity.entries();
+        entityTypes.forEach(type -> {
+            switch (type) {
+                case ClientQuotaEntity.USER:
+                    entityVO.setUser(entries.get(type));
+                    break;
+                case ClientQuotaEntity.CLIENT_ID:
+                    entityVO.setClient(entries.get(type));
+                    break;
+                case ClientQuotaEntity.IP:
+                    entityVO.setIp(entries.get(type));
+                    break;
+                default:
+                    break;
+            }
+        });
+        entityVO.setConsumerRate(convert(config.getOrDefault(QuotaConfigs.CONSUMER_BYTE_RATE_OVERRIDE_CONFIG, "")));
+        entityVO.setProducerRate(convert(config.getOrDefault(QuotaConfigs.PRODUCER_BYTE_RATE_OVERRIDE_CONFIG, "")));
+        entityVO.setRequestPercentage(config.getOrDefault(QuotaConfigs.REQUEST_PERCENTAGE_OVERRIDE_CONFIG, "").toString());
+        return entityVO;
+    }
+
+
+    public static String convert(Object num) {
+        if (num == null) {
+            return null;
+        }
+
+        if (num instanceof String) {
+            if ((StringUtils.isBlank((String) num))) {
+                return (String) num;
+            }
+        }
+
+        if (num instanceof Number) {
+            Number number = (Number) num;
+            double value = number.doubleValue();
+            double _1kb = 1024;
+            double _1mb = 1024 * _1kb;
+            if (value < _1kb) {
+                return value + " Byte";
+            }
+            if (value < _1mb) {
+                return String.format("%.1f KB", (value / _1kb));
+            }
+            if (value >= _1mb) {
+                return String.format("%.1f MB", (value / _1mb));
+            }
+        }
+        return String.valueOf(num);
+    }
+}

src/main/java/com/xuxd/kafka/console/cache/TimeBasedCache.java

@@ -0,0 +1,33 @@
+package com.xuxd.kafka.console.cache;
+
+import com.google.common.cache.CacheBuilder;
+import com.google.common.cache.CacheLoader;
+import com.google.common.cache.LoadingCache;
+import com.google.common.cache.RemovalListener;
+import kafka.console.KafkaConsole;
+
+import java.util.concurrent.ExecutionException;
+import java.util.concurrent.TimeUnit;
+
+public class TimeBasedCache<K, V> {
+    private LoadingCache<K, V> cache;
+
+    private KafkaConsole console;
+
+    public TimeBasedCache(CacheLoader<K, V> loader, RemovalListener<K, V> listener) {
+        cache = CacheBuilder.newBuilder()
+                .maximumSize(50)                             // maximum 100 records can be cached
+                .expireAfterAccess(30, TimeUnit.MINUTES)      // cache will expire after 30 minutes of access
+                .removalListener(listener)
+                .build(loader);
+
+    }
+
+    public V get(K k) {
+        try {
+            return cache.get(k);
+        } catch (ExecutionException e) {
+            throw new RuntimeException("Get connection from cache error.", e);
+        }
+    }
+}

src/main/java/com/xuxd/kafka/console/config/KafkaConfig.java

@@ -20,6 +20,12 @@ public class KafkaConfig {
 
     private Properties properties;
 
+    private boolean cacheAdminConnection;
+
+    private boolean cacheProducerConnection;
+
+    private boolean cacheConsumerConnection;
+
     public String getBootstrapServer() {
         return bootstrapServer;
     }
@@ -43,4 +49,28 @@ public class KafkaConfig {
     public void setProperties(Properties properties) {
         this.properties = properties;
     }
+
+    public boolean isCacheAdminConnection() {
+        return cacheAdminConnection;
+    }
+
+    public void setCacheAdminConnection(boolean cacheAdminConnection) {
+        this.cacheAdminConnection = cacheAdminConnection;
+    }
+
+    public boolean isCacheProducerConnection() {
+        return cacheProducerConnection;
+    }
+
+    public void setCacheProducerConnection(boolean cacheProducerConnection) {
+        this.cacheProducerConnection = cacheProducerConnection;
+    }
+
+    public boolean isCacheConsumerConnection() {
+        return cacheConsumerConnection;
+    }
+
+    public void setCacheConsumerConnection(boolean cacheConsumerConnection) {
+        this.cacheConsumerConnection = cacheConsumerConnection;
+    }
 }

src/main/java/com/xuxd/kafka/console/config/KafkaConfiguration.java

@@ -1,13 +1,6 @@
 package com.xuxd.kafka.console.config;
 
-import kafka.console.ClusterConsole;
-import kafka.console.ConfigConsole;
-import kafka.console.ConsumerConsole;
-import kafka.console.KafkaAclConsole;
-import kafka.console.KafkaConfigConsole;
-import kafka.console.MessageConsole;
-import kafka.console.OperationConsole;
-import kafka.console.TopicConsole;
+import kafka.console.*;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 
@@ -52,7 +45,7 @@ public class KafkaConfiguration {
 
     @Bean
     public OperationConsole operationConsole(KafkaConfig config, TopicConsole topicConsole,
-        ConsumerConsole consumerConsole) {
+                                             ConsumerConsole consumerConsole) {
         return new OperationConsole(config, topicConsole, consumerConsole);
     }
 
@@ -60,4 +53,9 @@ public class KafkaConfiguration {
     public MessageConsole messageConsole(KafkaConfig config) {
         return new MessageConsole(config);
     }
+
+    @Bean
+    public ClientQuotaConsole clientQuotaConsole(KafkaConfig config) {
+        return new ClientQuotaConsole(config);
+    }
 }

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

@@ -118,4 +118,14 @@ public class AclAuthController {
         return aclService.deleteConsumerAcl(param.toTopicEntry(), param.toGroupEntry());
     }
 
+    /**
+     * clear principal acls.
+     *
+     * @param param acl principal.
+     * @return true or false.
+     */
+    @DeleteMapping("/clear")
+    public Object clearAcl(@RequestBody DeleteAclDTO param) {
+        return aclService.clearAcl(param.toUserEntry());
+    }
 }

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

@@ -1,7 +1,9 @@
 package com.xuxd.kafka.console.controller;
 
+import com.xuxd.kafka.console.beans.AclEntry;
 import com.xuxd.kafka.console.beans.AclUser;
 import com.xuxd.kafka.console.service.AclService;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.DeleteMapping;
 import org.springframework.web.bind.annotation.GetMapping;
@@ -12,7 +14,7 @@ import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
 /**
- * kafka-console-ui.
+ * kafka-console-ui. sasl scram user.
  *
  * @author xuxd
  * @date 2021-08-28 21:13:05
@@ -49,4 +51,11 @@ public class AclUserController {
     public Object getUserDetail(@RequestParam String username) {
         return aclService.getUserDetail(username);
     }
+
+    @GetMapping("/scram")
+    public Object getSaslScramUserList(@RequestParam(required = false) String username) {
+        AclEntry entry = new AclEntry();
+        entry.setPrincipal(StringUtils.isNotBlank(username) ? username : null);
+        return aclService.getSaslScramUserList(entry);
+    }
 }

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

@@ -0,0 +1,52 @@
+package com.xuxd.kafka.console.controller;
+
+import com.xuxd.kafka.console.beans.ResponseData;
+import com.xuxd.kafka.console.beans.dto.AlterClientQuotaDTO;
+import com.xuxd.kafka.console.beans.dto.QueryClientQuotaDTO;
+import com.xuxd.kafka.console.service.ClientQuotaService;
+import org.apache.commons.collections.CollectionUtils;
+import org.springframework.web.bind.annotation.*;
+
+/**
+ * @author: xuxd
+ * @date: 2023/1/9 21:50
+ **/
+@RestController
+@RequestMapping("/client/quota")
+public class ClientQuotaController {
+
+    private final ClientQuotaService clientQuotaService;
+
+    public ClientQuotaController(ClientQuotaService clientQuotaService) {
+        this.clientQuotaService = clientQuotaService;
+    }
+
+    @PostMapping("/list")
+    public Object getClientQuotaConfigs(@RequestBody QueryClientQuotaDTO request) {
+        return clientQuotaService.getClientQuotaConfigs(request.getTypes(), request.getNames());
+    }
+
+    @PostMapping
+    public Object alterClientQuotaConfigs(@RequestBody AlterClientQuotaDTO request) {
+        if (request.getTypes().size() != 2) {
+            if (CollectionUtils.isEmpty(request.getTypes())
+                    || CollectionUtils.isEmpty(request.getNames())
+                    || request.getTypes().size() != request.getNames().size()) {
+                return ResponseData.create().failed("types length and names length is invalid.");
+            }
+        }
+        return clientQuotaService.alterClientQuotaConfigs(request);
+    }
+
+    @DeleteMapping
+    public Object deleteClientQuotaConfigs(@RequestBody AlterClientQuotaDTO request) {
+        if (request.getTypes().size() != 2) {
+            if (CollectionUtils.isEmpty(request.getTypes())
+                    || CollectionUtils.isEmpty(request.getNames())
+                    || request.getTypes().size() != request.getNames().size()) {
+                return ResponseData.create().failed("types length and names length is invalid.");
+            }
+        }
+        return clientQuotaService.deleteClientQuotaConfigs(request);
+    }
+}

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

@@ -53,4 +53,9 @@ public class ClusterController {
     public Object peekClusterInfo() {
         return clusterService.peekClusterInfo();
     }
+
+    @GetMapping("/info/api/version")
+    public Object getBrokerApiVersionInfo() {
+        return clusterService.getBrokerApiVersionInfo();
+    }
 }

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

@@ -1,14 +1,15 @@
 package com.xuxd.kafka.console.controller;
 
+import com.xuxd.kafka.console.beans.QueryMessage;
+import com.xuxd.kafka.console.beans.ResponseData;
 import com.xuxd.kafka.console.beans.SendMessage;
 import com.xuxd.kafka.console.beans.dto.QueryMessageDTO;
 import com.xuxd.kafka.console.service.MessageService;
+import org.apache.commons.collections.CollectionUtils;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
 
 /**
  * kafka-console-ui.
@@ -52,4 +53,12 @@ public class MessageController {
     public Object resend(@RequestBody SendMessage message) {
         return messageService.resend(message);
     }
+
+    @DeleteMapping
+    public Object delete(@RequestBody List<QueryMessage> messages) {
+        if (CollectionUtils.isEmpty(messages)) {
+            return ResponseData.create().failed("params is null");
+        }
+        return messageService.delete(messages);
+    }
 }

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

@@ -2,6 +2,7 @@ package com.xuxd.kafka.console.controller;
 
 import com.xuxd.kafka.console.beans.TopicPartition;
 import com.xuxd.kafka.console.beans.dto.BrokerThrottleDTO;
+import com.xuxd.kafka.console.beans.dto.ProposedAssignmentDTO;
 import com.xuxd.kafka.console.beans.dto.ReplicationDTO;
 import com.xuxd.kafka.console.beans.dto.SyncDataDTO;
 import com.xuxd.kafka.console.service.OperationService;
@@ -74,4 +75,9 @@ public class OperationController {
     public Object cancelReassignment(@RequestBody TopicPartition partition) {
         return operationService.cancelReassignment(new org.apache.kafka.common.TopicPartition(partition.getTopic(), partition.getPartition()));
     }
+
+    @PostMapping("/replication/reassignments/proposed")
+    public Object proposedAssignments(@RequestBody ProposedAssignmentDTO dto) {
+        return operationService.proposedAssignments(dto.getTopic(), dto.getBrokers());
+    }
 }

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

@@ -43,8 +43,8 @@ public class TopicController {
     }
 
     @DeleteMapping
-    public Object deleteTopic(@RequestParam String topic) {
-        return topicService.deleteTopic(topic);
+    public Object deleteTopic(@RequestBody List<String> topics) {
+        return topicService.deleteTopics(topics);
     }
 
     @GetMapping("/partition")

src/main/java/com/xuxd/kafka/console/interceptor/ContextSetFilter.java

@@ -6,28 +6,25 @@ import com.xuxd.kafka.console.config.ContextConfig;
 import com.xuxd.kafka.console.config.ContextConfigHolder;
 import com.xuxd.kafka.console.dao.ClusterInfoMapper;
 import com.xuxd.kafka.console.utils.ConvertUtil;
-import java.io.IOException;
-import java.util.HashSet;
-import java.util.Set;
-import javax.servlet.Filter;
-import javax.servlet.FilterChain;
-import javax.servlet.ServletException;
-import javax.servlet.ServletRequest;
-import javax.servlet.ServletResponse;
-import javax.servlet.annotation.WebFilter;
-import javax.servlet.http.HttpServletRequest;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.MediaType;
 
+import javax.servlet.*;
+import javax.servlet.annotation.WebFilter;
+import javax.servlet.http.HttpServletRequest;
+import java.io.IOException;
+import java.util.HashSet;
+import java.util.Set;
+
 /**
  * kafka-console-ui.
  *
  * @author xuxd
  * @date 2022-01-05 19:56:25
  **/
-@WebFilter(filterName = "context-set-filter", urlPatterns = {"/acl/*","/user/*","/cluster/*","/config/*","/consumer/*","/message/*","/topic/*","/op/*"})
+@WebFilter(filterName = "context-set-filter", urlPatterns = {"/acl/*", "/user/*", "/cluster/*", "/config/*", "/consumer/*", "/message/*", "/topic/*", "/op/*", "/client/*"})
 @Slf4j
 public class ContextSetFilter implements Filter {
 
@@ -42,8 +39,9 @@ public class ContextSetFilter implements Filter {
     @Autowired
     private ClusterInfoMapper clusterInfoMapper;
 
-    @Override public void doFilter(ServletRequest req, ServletResponse response,
-        FilterChain chain) throws IOException, ServletException {
+    @Override
+    public void doFilter(ServletRequest req, ServletResponse response,
+                         FilterChain chain) throws IOException, ServletException {
         try {
             HttpServletRequest request = (HttpServletRequest) req;
             String uri = request.getRequestURI();
@@ -72,6 +70,7 @@ public class ContextSetFilter implements Filter {
                         config.setProperties(ConvertUtil.toProperties(infoDO.getProperties()));
                     }
                     ContextConfigHolder.CONTEXT_CONFIG.set(config);
+//                    log.info("current kafka config: {}", config);
                 }
             }
             chain.doFilter(req, response);

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

@@ -42,4 +42,7 @@ public interface AclService {
 
     ResponseData getUserDetail(String username);
 
+    ResponseData clearAcl(AclEntry entry);
+
+    ResponseData getSaslScramUserList(AclEntry entry);
 }

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

@@ -0,0 +1,18 @@
+package com.xuxd.kafka.console.service;
+
+import com.xuxd.kafka.console.beans.ResponseData;
+import com.xuxd.kafka.console.beans.dto.AlterClientQuotaDTO;
+
+import java.util.List;
+
+/**
+ * @author 晓东哥哥
+ */
+public interface ClientQuotaService {
+
+    ResponseData getClientQuotaConfigs(List<String> types, List<String> names);
+
+    ResponseData alterClientQuotaConfigs(AlterClientQuotaDTO request);
+
+    ResponseData deleteClientQuotaConfigs(AlterClientQuotaDTO request);
+}

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

@@ -21,4 +21,6 @@ public interface ClusterService {
     ResponseData updateClusterInfo(ClusterInfoDO infoDO);
 
     ResponseData peekClusterInfo();
+
+    ResponseData getBrokerApiVersionInfo();
 }

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

@@ -4,6 +4,8 @@ import com.xuxd.kafka.console.beans.QueryMessage;
 import com.xuxd.kafka.console.beans.ResponseData;
 import com.xuxd.kafka.console.beans.SendMessage;
 
+import java.util.List;
+
 /**
  * kafka-console-ui.
  *
@@ -23,4 +25,6 @@ public interface MessageService {
     ResponseData send(SendMessage message);
 
     ResponseData resend(SendMessage message);
+
+    ResponseData delete(List<QueryMessage> messages);
 }

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

@@ -30,4 +30,6 @@ public interface OperationService {
     ResponseData currentReassignments();
 
     ResponseData cancelReassignment(TopicPartition partition);
+
+    ResponseData proposedAssignments(String topic, List<Integer> brokerList);
 }

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

@@ -4,6 +4,8 @@ import com.xuxd.kafka.console.beans.ReplicaAssignment;
 import com.xuxd.kafka.console.beans.ResponseData;
 import com.xuxd.kafka.console.beans.enums.TopicThrottleSwitch;
 import com.xuxd.kafka.console.beans.enums.TopicType;
+
+import java.util.Collection;
 import java.util.List;
 import org.apache.kafka.clients.admin.NewTopic;
 
@@ -19,7 +21,7 @@ public interface TopicService {
 
     ResponseData getTopicList(String topic, TopicType type);
 
-    ResponseData deleteTopic(String topic);
+    ResponseData deleteTopics(Collection<String> topics);
 
     ResponseData getTopicPartitionInfo(String topic);
 

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

@@ -10,30 +10,23 @@ import com.xuxd.kafka.console.config.ContextConfigHolder;
 import com.xuxd.kafka.console.dao.KafkaUserMapper;
 import com.xuxd.kafka.console.service.AclService;
 import com.xuxd.kafka.console.utils.SaslUtil;
-import java.util.Arrays;
-import java.util.Collections;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
-import java.util.Properties;
-import java.util.Set;
-import java.util.stream.Collectors;
 import kafka.console.KafkaAclConsole;
 import kafka.console.KafkaConfigConsole;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.lang3.StringUtils;
-import org.apache.kafka.clients.CommonClientConfigs;
-import org.apache.kafka.clients.admin.ScramMechanism;
 import org.apache.kafka.clients.admin.UserScramCredentialsDescription;
 import org.apache.kafka.common.acl.AclBinding;
 import org.apache.kafka.common.acl.AclOperation;
 import org.apache.kafka.common.config.SaslConfigs;
-import org.apache.kafka.common.security.auth.SecurityProtocol;
+import org.apache.kafka.common.errors.SecurityDisabledException;
 import org.springframework.beans.factory.ObjectProvider;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import scala.Tuple2;
 
+import java.util.*;
+import java.util.stream.Collectors;
+
 import static com.xuxd.kafka.console.utils.SaslUtil.isEnableSasl;
 import static com.xuxd.kafka.console.utils.SaslUtil.isEnableScram;
 
@@ -139,39 +132,52 @@ public class AclServiceImpl implements AclService {
     }
 
     @Override public ResponseData getAclList(AclEntry entry) {
-        List<AclBinding> aclBindingList = entry.isNull() ? aclConsole.getAclList(null) : aclConsole.getAclList(entry);
+        List<AclBinding> aclBindingList = Collections.emptyList();
+        try {
+            aclBindingList = entry.isNull() ? aclConsole.getAclList(null) : aclConsole.getAclList(entry);
+        }catch (Exception ex) {
+            if (ex.getCause() instanceof SecurityDisabledException) {
+                Throwable e = ex.getCause();
+                log.info("SecurityDisabledException: {}", e.getMessage());
+                Map<String, String> hint = new HashMap<>(2);
+                hint.put("hint", "Security Disabled: " + e.getMessage());
+                return ResponseData.create().data(hint).success();
+            }
+            throw new RuntimeException(ex.getCause());
+        }
+//        List<AclBinding> aclBindingList = entry.isNull() ? aclConsole.getAclList(null) : aclConsole.getAclList(entry);
         List<AclEntry> entryList = aclBindingList.stream().map(x -> AclEntry.valueOf(x)).collect(Collectors.toList());
         Map<String, List<AclEntry>> entryMap = entryList.stream().collect(Collectors.groupingBy(AclEntry::getPrincipal));
         Map<String, Object> resultMap = new HashMap<>();
         entryMap.forEach((k, v) -> {
             Map<String, List<AclEntry>> map = v.stream().collect(Collectors.groupingBy(e -> e.getResourceType() + "#" + e.getName()));
-            String username = SaslUtil.findUsername(ContextConfigHolder.CONTEXT_CONFIG.get().getProperties().getProperty(SaslConfigs.SASL_JAAS_CONFIG));
-            if (k.equals(username)) {
-                Map<String, Object> map2 = new HashMap<>(map);
-                Map<String, Object> userMap = new HashMap<>();
-                userMap.put("role", "admin");
-                map2.put("USER", userMap);
-            }
+//            String username = SaslUtil.findUsername(ContextConfigHolder.CONTEXT_CONFIG.get().getProperties().getProperty(SaslConfigs.SASL_JAAS_CONFIG));
+//            if (k.equals(username)) {
+//                Map<String, Object> map2 = new HashMap<>(map);
+//                Map<String, Object> userMap = new HashMap<>();
+//                userMap.put("role", "admin");
+//                map2.put("USER", userMap);
+//            }
             resultMap.put(k, map);
         });
-        if (entry.isNull() || StringUtils.isNotBlank(entry.getPrincipal())) {
-            Map<String, UserScramCredentialsDescription> detailList = configConsole.getUserDetailList(StringUtils.isNotBlank(entry.getPrincipal()) ? Collections.singletonList(entry.getPrincipal()) : null);
-
-            detailList.values().forEach(u -> {
-                if (!resultMap.containsKey(u.name()) && !u.credentialInfos().isEmpty()) {
-                    String username = SaslUtil.findUsername(ContextConfigHolder.CONTEXT_CONFIG.get().getProperties().getProperty(SaslConfigs.SASL_JAAS_CONFIG));
-                    if (!u.name().equals(username)) {
-                        resultMap.put(u.name(), Collections.emptyMap());
-                    } else {
-                        Map<String, Object> map2 = new HashMap<>();
-                        Map<String, Object> userMap = new HashMap<>();
-                        userMap.put("role", "admin");
-                        map2.put("USER", userMap);
-                        resultMap.put(u.name(), map2);
-                    }
-                }
-            });
-        }
+//        if (entry.isNull() || StringUtils.isNotBlank(entry.getPrincipal())) {
+//            Map<String, UserScramCredentialsDescription> detailList = configConsole.getUserDetailList(StringUtils.isNotBlank(entry.getPrincipal()) ? Collections.singletonList(entry.getPrincipal()) : null);
+//
+//            detailList.values().forEach(u -> {
+//                if (!resultMap.containsKey(u.name()) && !u.credentialInfos().isEmpty()) {
+//                    String username = SaslUtil.findUsername(ContextConfigHolder.CONTEXT_CONFIG.get().getProperties().getProperty(SaslConfigs.SASL_JAAS_CONFIG));
+//                    if (!u.name().equals(username)) {
+//                        resultMap.put(u.name(), Collections.emptyMap());
+//                    } else {
+//                        Map<String, Object> map2 = new HashMap<>();
+//                        Map<String, Object> userMap = new HashMap<>();
+//                        userMap.put("role", "admin");
+//                        map2.put("USER", userMap);
+//                        resultMap.put(u.name(), map2);
+//                    }
+//                }
+//            });
+//        }
 
         return ResponseData.create().data(new CounterMap<>(resultMap)).success();
     }
@@ -236,6 +242,37 @@ public class AclServiceImpl implements AclService {
         return ResponseData.create().data(vo).success();
     }
 
+    @Override
+    public ResponseData clearAcl(AclEntry entry) {
+        log.info("Start clear acl, principal: {}", entry);
+        return aclConsole.deleteUserAcl(entry) ? ResponseData.create().success() : ResponseData.create().failed("操作失败");
+    }
+
+    @Override
+    public ResponseData getSaslScramUserList(AclEntry entry) {
+        Map<String, Object> resultMap = new HashMap<>();
+        if (entry.isNull() || StringUtils.isNotBlank(entry.getPrincipal())) {
+            Map<String, UserScramCredentialsDescription> detailList = configConsole.getUserDetailList(StringUtils.isNotBlank(entry.getPrincipal()) ? Collections.singletonList(entry.getPrincipal()) : null);
+
+            detailList.values().forEach(u -> {
+                if (!resultMap.containsKey(u.name()) && !u.credentialInfos().isEmpty()) {
+                    String username = SaslUtil.findUsername(ContextConfigHolder.CONTEXT_CONFIG.get().getProperties().getProperty(SaslConfigs.SASL_JAAS_CONFIG));
+                    if (!u.name().equals(username)) {
+                        resultMap.put(u.name(), Collections.emptyMap());
+                    } else {
+                        Map<String, Object> map2 = new HashMap<>();
+                        Map<String, Object> userMap = new HashMap<>();
+                        userMap.put("role", "admin");
+                        map2.put("USER", userMap);
+                        resultMap.put(u.name(), map2);
+                    }
+                }
+            });
+        }
+
+        return ResponseData.create().data(new CounterMap<>(resultMap)).success();
+    }
+
 //    @Override public void afterSingletonsInstantiated() {
 //        if (kafkaConfig.isEnableAcl() && kafkaConfig.isAdminCreate()) {
 //            log.info("Start create admin user, username: {}, password: {}", kafkaConfig.getAdminUsername(), kafkaConfig.getAdminPassword());

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

@@ -0,0 +1,172 @@
+package com.xuxd.kafka.console.service.impl;
+
+import com.xuxd.kafka.console.beans.ResponseData;
+import com.xuxd.kafka.console.beans.dto.AlterClientQuotaDTO;
+import com.xuxd.kafka.console.beans.vo.ClientQuotaEntityVO;
+import com.xuxd.kafka.console.service.ClientQuotaService;
+import kafka.console.ClientQuotaConsole;
+import lombok.extern.slf4j.Slf4j;
+import org.apache.commons.collections.CollectionUtils;
+import org.apache.commons.lang3.StringUtils;
+import org.apache.kafka.common.config.internals.QuotaConfigs;
+import org.apache.kafka.common.quota.ClientQuotaEntity;
+import org.springframework.stereotype.Service;
+import scala.Tuple2;
+
+import java.util.*;
+import java.util.stream.Collectors;
+
+/**
+ * @author 晓东哥哥
+ */
+@Slf4j
+@Service
+public class ClientQuotaServiceImpl implements ClientQuotaService {
+
+    private final ClientQuotaConsole clientQuotaConsole;
+
+    private final Map<String, String> typeDict = new HashMap<>();
+
+    private final Map<String, String> configDict = new HashMap<>();
+
+    private final String USER = "user";
+    private final String CLIENT_ID = "client-id";
+    private final String IP = "ip";
+    private final String USER_CLIENT = "user&client-id";
+
+    {
+        typeDict.put(USER, ClientQuotaEntity.USER);
+        typeDict.put(CLIENT_ID, ClientQuotaEntity.CLIENT_ID);
+        typeDict.put(IP, ClientQuotaEntity.IP);
+        typeDict.put(USER_CLIENT, USER_CLIENT);
+
+        configDict.put("producerRate", QuotaConfigs.PRODUCER_BYTE_RATE_OVERRIDE_CONFIG);
+        configDict.put("consumerRate", QuotaConfigs.CONSUMER_BYTE_RATE_OVERRIDE_CONFIG);
+        configDict.put("requestPercentage", QuotaConfigs.REQUEST_PERCENTAGE_OVERRIDE_CONFIG);
+    }
+
+    public ClientQuotaServiceImpl(ClientQuotaConsole clientQuotaConsole) {
+        this.clientQuotaConsole = clientQuotaConsole;
+    }
+
+    @Override
+    public ResponseData getClientQuotaConfigs(List<String> types, List<String> names) {
+        List<String> entityNames = names == null ? Collections.emptyList() : new ArrayList<>(names);
+        List<String> entityTypes = types.stream().map(e -> typeDict.get(e)).filter(e -> e != null).collect(Collectors.toList());
+        if (entityTypes.isEmpty() || entityTypes.size() != types.size()) {
+            throw new IllegalArgumentException("types illegal.");
+        }
+
+        boolean userAndClientFilterClientOnly = false;
+        // only type: [user and client-id], type.size == 2
+        if (entityTypes.size() == 2) {
+            if (names.size() == 2 && StringUtils.isBlank(names.get(0)) && StringUtils.isNotBlank(names.get(1))) {
+                userAndClientFilterClientOnly = true;
+            }
+        }
+        Map<ClientQuotaEntity, Map<String, Object>> clientQuotasConfigs = clientQuotaConsole.getClientQuotasConfigs(entityTypes,
+                userAndClientFilterClientOnly ? Collections.emptyList() : entityNames);
+
+        List<ClientQuotaEntityVO> voList = clientQuotasConfigs.entrySet().stream().map(entry -> ClientQuotaEntityVO.from(
+                entry.getKey(), entityTypes, entry.getValue())).collect(Collectors.toList());
+        if (!userAndClientFilterClientOnly) {
+            return ResponseData.create().data(voList).success();
+        }
+        List<ClientQuotaEntityVO> list = voList.stream().filter(e -> names.get(1).equals(e.getClient())).collect(Collectors.toList());
+
+        return ResponseData.create().data(list).success();
+    }
+
+    @Override
+    public ResponseData alterClientQuotaConfigs(AlterClientQuotaDTO request) {
+
+        if (StringUtils.isEmpty(request.getType()) || !typeDict.containsKey(request.getType())) {
+            return ResponseData.create().failed("Unknown type.");
+        }
+
+        List<String> types = new ArrayList<>();
+        List<String> names = new ArrayList<>();
+        parseTypesAndNames(request, types, names, request.getType());
+        Map<String, String> configsToBeAddedMap = new HashMap<>();
+
+        if (StringUtils.isNotEmpty(request.getProducerRate())) {
+            configsToBeAddedMap.put(QuotaConfigs.PRODUCER_BYTE_RATE_OVERRIDE_CONFIG, String.valueOf(Math.floor(Double.valueOf(request.getProducerRate()))));
+        }
+        if (StringUtils.isNotEmpty(request.getConsumerRate())) {
+            configsToBeAddedMap.put(QuotaConfigs.CONSUMER_BYTE_RATE_OVERRIDE_CONFIG, String.valueOf(Math.floor(Double.valueOf(request.getConsumerRate()))));
+        }
+        if (StringUtils.isNotEmpty(request.getRequestPercentage())) {
+            configsToBeAddedMap.put(QuotaConfigs.REQUEST_PERCENTAGE_OVERRIDE_CONFIG, String.valueOf(Math.floor(Double.valueOf(request.getRequestPercentage()))));
+        }
+
+        Tuple2<Object, String> tuple2 = clientQuotaConsole.addQuotaConfigs(types, names, configsToBeAddedMap);
+        if (!(Boolean) tuple2._1) {
+            return ResponseData.create().failed(tuple2._2);
+        }
+        if (CollectionUtils.isNotEmpty(request.getDeleteConfigs())) {
+            List<String> delete = request.getDeleteConfigs().stream().map(key -> configDict.get(key)).collect(Collectors.toList());
+            Tuple2<Object, String> tuple2Del = clientQuotaConsole.deleteQuotaConfigs(types, names, delete);
+            if (!(Boolean) tuple2Del._1) {
+                return ResponseData.create().failed(tuple2Del._2);
+            }
+        }
+        return ResponseData.create().success();
+    }
+
+    @Override
+    public ResponseData deleteClientQuotaConfigs(AlterClientQuotaDTO request) {
+        if (StringUtils.isEmpty(request.getType()) || !typeDict.containsKey(request.getType())) {
+            return ResponseData.create().failed("Unknown type.");
+        }
+        List<String> types = new ArrayList<>();
+        List<String> names = new ArrayList<>();
+        parseTypesAndNames(request, types, names, request.getType());
+        List<String> configs = new ArrayList<>();
+        configs.add(QuotaConfigs.PRODUCER_BYTE_RATE_OVERRIDE_CONFIG);
+        configs.add(QuotaConfigs.CONSUMER_BYTE_RATE_OVERRIDE_CONFIG);
+        configs.add(QuotaConfigs.REQUEST_PERCENTAGE_OVERRIDE_CONFIG);
+        Tuple2<Object, String> tuple2 = clientQuotaConsole.deleteQuotaConfigs(types, names, configs);
+        if (!(Boolean) tuple2._1) {
+            return ResponseData.create().failed(tuple2._2);
+        }
+        return ResponseData.create().success();
+    }
+
+    private void parseTypesAndNames(AlterClientQuotaDTO request, List<String> types, List<String> names, String type) {
+        switch (request.getType()) {
+            case USER:
+                getTypesAndNames(request, types, names, USER);
+                break;
+            case CLIENT_ID:
+                getTypesAndNames(request, types, names, CLIENT_ID);
+                break;
+            case IP:
+                getTypesAndNames(request, types, names, IP);
+                break;
+            case USER_CLIENT:
+                getTypesAndNames(request, types, names, USER);
+                getTypesAndNames(request, types, names, CLIENT_ID);
+                break;
+        }
+    }
+
+    private void getTypesAndNames(AlterClientQuotaDTO request, List<String> types, List<String> names, String type) {
+        int index = -1;
+        for (int i = 0; i < request.getTypes().size(); i++) {
+            if (type.equals(request.getTypes().get(i))) {
+                index = i;
+                break;
+            }
+        }
+        if (index < 0) {
+            throw new IllegalArgumentException("Does not contain the type：" + type);
+        }
+        types.add(request.getTypes().get(index));
+        if (CollectionUtils.isNotEmpty(request.getNames()) && request.getNames().size() > index) {
+            names.add(request.getNames().get(index));
+        } else {
+            names.add("");
+        }
+    }
+
+}

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

@@ -1,15 +1,23 @@
 package com.xuxd.kafka.console.service.impl;
 
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.xuxd.kafka.console.beans.BrokerNode;
+import com.xuxd.kafka.console.beans.ClusterInfo;
 import com.xuxd.kafka.console.beans.ResponseData;
 import com.xuxd.kafka.console.beans.dos.ClusterInfoDO;
+import com.xuxd.kafka.console.beans.vo.BrokerApiVersionVO;
 import com.xuxd.kafka.console.beans.vo.ClusterInfoVO;
 import com.xuxd.kafka.console.dao.ClusterInfoMapper;
 import com.xuxd.kafka.console.service.ClusterService;
-import java.util.List;
+
+import java.util.*;
 import java.util.stream.Collectors;
 import kafka.console.ClusterConsole;
+import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.collections.CollectionUtils;
+import org.apache.commons.lang3.StringUtils;
+import org.apache.kafka.clients.NodeApiVersions;
+import org.apache.kafka.common.Node;
 import org.springframework.beans.factory.ObjectProvider;
 import org.springframework.stereotype.Service;
 
@@ -19,6 +27,7 @@ import org.springframework.stereotype.Service;
  * @author xuxd
  * @date 2021-10-08 14:23:09
  **/
+@Slf4j
 @Service
 public class ClusterServiceImpl implements ClusterService {
 
@@ -33,7 +42,14 @@ public class ClusterServiceImpl implements ClusterService {
     }
 
     @Override public ResponseData getClusterInfo() {
-        return ResponseData.create().data(clusterConsole.clusterInfo()).success();
+        ClusterInfo clusterInfo = clusterConsole.clusterInfo();
+        Set<BrokerNode> nodes = clusterInfo.getNodes();
+        if (nodes == null) {
+            log.error("集群节点信息为空，集群地址可能不正确或集群内没有活跃节点");
+            return ResponseData.create().failed("集群节点信息为空，集群地址可能不正确或集群内没有活跃节点");
+        }
+        clusterInfo.setNodes(new TreeSet<>(nodes));
+        return ResponseData.create().data(clusterInfo).success();
     }
 
     @Override public ResponseData getClusterInfoList() {
@@ -57,6 +73,10 @@ public class ClusterServiceImpl implements ClusterService {
     }
 
     @Override public ResponseData updateClusterInfo(ClusterInfoDO infoDO) {
+        if (infoDO.getProperties() == null) {
+            // null 的话不更新，这个是bug，设置为空字符串解决
+            infoDO.setProperties("");
+        }
         clusterInfoMapper.updateById(infoDO);
         return ResponseData.create().success();
     }
@@ -69,4 +89,29 @@ public class ClusterServiceImpl implements ClusterService {
         return ResponseData.create().data(dos.stream().findFirst().map(ClusterInfoVO::from)).success();
     }
 
+    @Override public ResponseData getBrokerApiVersionInfo() {
+        HashMap<Node, NodeApiVersions> map = clusterConsole.listBrokerVersionInfo();
+        List<BrokerApiVersionVO> list = new ArrayList<>(map.size());
+        map.forEach(((node, versions) -> {
+            BrokerApiVersionVO vo = new BrokerApiVersionVO();
+            vo.setBrokerId(node.id());
+            vo.setHost(node.host() + ":" + node.port());
+            vo.setSupportNums(versions.allSupportedApiVersions().size());
+            String versionInfo = versions.toString(true);
+            int from = 0;
+            int count = 0;
+            int index = -1;
+            while ((index = versionInfo.indexOf("UNSUPPORTED", from)) >= 0 && from < versionInfo.length()) {
+                count++;
+                from = index + 1;
+            }
+            vo.setUnSupportNums(count);
+            versionInfo = versionInfo.substring(1, versionInfo.length() - 2);
+            vo.setVersionInfo(Arrays.asList(StringUtils.split(versionInfo, ",")));
+            list.add(vo);
+        }));
+        Collections.sort(list, Comparator.comparingInt(BrokerApiVersionVO::getBrokerId));
+        return ResponseData.create().data(list).success();
+    }
+
 }

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

@@ -24,6 +24,7 @@ import kafka.console.TopicConsole;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
+import org.apache.kafka.clients.admin.RecordsToDelete;
 import org.apache.kafka.clients.admin.TopicDescription;
 import org.apache.kafka.clients.consumer.ConsumerRecord;
 import org.apache.kafka.clients.producer.ProducerRecord;
@@ -242,6 +243,18 @@ public class MessageServiceImpl implements MessageService, ApplicationContextAwa
         return success ? ResponseData.create().success("success: " + tuple2._2()) : ResponseData.create().failed(tuple2._2());
     }
 
+    @Override
+    public ResponseData delete(List<QueryMessage> messages) {
+        Map<TopicPartition, RecordsToDelete> params = new HashMap<>(messages.size(), 1f);
+
+        messages.forEach(message -> {
+            params.put(new TopicPartition(message.getTopic(), message.getPartition()), RecordsToDelete.beforeOffset(message.getOffset()));
+        });
+        Tuple2<Object, String> tuple2 = messageConsole.delete(params);
+        boolean success = (boolean) tuple2._1();
+        return success ? ResponseData.create().success() : ResponseData.create().failed(tuple2._2());
+    }
+
     private Map<TopicPartition, ConsumerRecord<byte[], byte[]>> searchRecordByOffset(QueryMessage queryMessage) {
         Set<TopicPartition> partitions = getPartitions(queryMessage);
 

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

@@ -1,6 +1,7 @@
 package com.xuxd.kafka.console.service.impl;
 
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.google.common.collect.Lists;
 import com.google.gson.Gson;
 import com.google.gson.JsonObject;
 import com.xuxd.kafka.console.beans.ResponseData;
@@ -10,6 +11,7 @@ import com.xuxd.kafka.console.beans.vo.OffsetAlignmentVO;
 import com.xuxd.kafka.console.dao.MinOffsetAlignmentMapper;
 import com.xuxd.kafka.console.service.OperationService;
 import com.xuxd.kafka.console.utils.GsonUtil;
+import java.util.ArrayList;
 import java.util.Collections;
 import java.util.HashMap;
 import java.util.HashSet;
@@ -19,6 +21,7 @@ import java.util.Properties;
 import java.util.Set;
 import java.util.stream.Collectors;
 import kafka.console.OperationConsole;
+import org.apache.commons.lang3.StringUtils;
 import org.apache.kafka.clients.admin.PartitionReassignment;
 import org.apache.kafka.common.TopicPartition;
 import org.springframework.beans.factory.ObjectProvider;
@@ -162,4 +165,21 @@ public class OperationServiceImpl implements OperationService {
         }
         return ResponseData.create().success();
     }
+
+    @Override public ResponseData proposedAssignments(String topic, List<Integer> brokerList) {
+        Map<String, Object> params = new HashMap<>();
+        params.put("version", 1);
+        Map<String, String> topicMap = new HashMap<>(1, 1.0f);
+        topicMap.put("topic", topic);
+        params.put("topics", Lists.newArrayList(topicMap));
+        List<String> list = brokerList.stream().map(String::valueOf).collect(Collectors.toList());
+        Map<TopicPartition, List<Object>> assignments = operationConsole.proposedAssignments(gson.toJson(params), StringUtils.join(list, ","));
+        List<CurrentReassignmentVO> res = new ArrayList<>(assignments.size());
+        assignments.forEach((tp, replicas) -> {
+            CurrentReassignmentVO vo = new CurrentReassignmentVO(tp.topic(), tp.partition(),
+                replicas.stream().map(x -> (Integer) x).collect(Collectors.toList()), null, null);
+            res.add(vo);
+        });
+        return ResponseData.create().data(res).success();
+    }
 }

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

@@ -9,16 +9,6 @@ import com.xuxd.kafka.console.beans.vo.TopicDescriptionVO;
 import com.xuxd.kafka.console.beans.vo.TopicPartitionVO;
 import com.xuxd.kafka.console.service.TopicService;
 import com.xuxd.kafka.console.utils.GsonUtil;
-import java.util.Calendar;
-import java.util.Collections;
-import java.util.Comparator;
-import java.util.HashMap;
-import java.util.HashSet;
-import java.util.List;
-import java.util.Map;
-import java.util.Set;
-import java.util.concurrent.atomic.AtomicLong;
-import java.util.stream.Collectors;
 import kafka.console.MessageConsole;
 import kafka.console.TopicConsole;
 import lombok.extern.slf4j.Slf4j;
@@ -33,6 +23,10 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import scala.Tuple2;
 
+import java.util.*;
+import java.util.concurrent.atomic.AtomicLong;
+import java.util.stream.Collectors;
+
 /**
  * kafka-console-ui.
  *
@@ -87,8 +81,8 @@ public class TopicServiceImpl implements TopicService {
         return ResponseData.create().data(topicDescriptions.stream().map(d -> TopicDescriptionVO.from(d))).success();
     }
 
-    @Override public ResponseData deleteTopic(String topic) {
-        Tuple2<Object, String> tuple2 = topicConsole.deleteTopic(topic);
+    @Override public ResponseData deleteTopics(Collection<String> topics) {
+        Tuple2<Object, String> tuple2 = topicConsole.deleteTopics(topics);
         return (Boolean) tuple2._1 ? ResponseData.create().success() : ResponseData.create().failed(tuple2._2);
     }
 

src/main/resources/application.yml

@@ -12,6 +12,14 @@ kafka:
     # 集群其它属性配置
     properties:
 #      request.timeout.ms: 5000
+    # 缓存连接，不缓存的情况下，每次请求建立连接. 即使每次请求建立连接，其实也很快，某些情况下开启ACL，查询可能很慢，可以设置连接缓存为true，
+    # 或者想提高查询速度，也可以设置下面连接缓存为true
+    # 缓存 admin client的连接
+    cache-admin-connection: false
+    # 缓存 producer的连接
+    cache-producer-connection: false
+    # 缓存 consumer的连接
+    cache-consumer-connection: false
 
 spring:
   application:

src/main/scala/kafka/console/BrokerApiVersion.scala

@@ -0,0 +1,333 @@
+package kafka.console
+
+import com.xuxd.kafka.console.config.ContextConfigHolder
+import kafka.utils.Implicits.MapExtensionMethods
+import kafka.utils.Logging
+import org.apache.kafka.clients._
+import org.apache.kafka.clients.admin.AdminClientConfig
+import org.apache.kafka.clients.consumer.internals.{ConsumerNetworkClient, RequestFuture}
+import org.apache.kafka.common.Node
+import org.apache.kafka.common.config.ConfigDef.ValidString.in
+import org.apache.kafka.common.config.ConfigDef.{Importance, Type}
+import org.apache.kafka.common.config.{AbstractConfig, ConfigDef}
+import org.apache.kafka.common.errors.AuthenticationException
+import org.apache.kafka.common.internals.ClusterResourceListeners
+import org.apache.kafka.common.message.ApiVersionsResponseData.ApiVersionCollection
+import org.apache.kafka.common.metrics.Metrics
+import org.apache.kafka.common.network.Selector
+import org.apache.kafka.common.protocol.Errors
+import org.apache.kafka.common.requests._
+import org.apache.kafka.common.utils.{KafkaThread, LogContext, Time}
+import org.slf4j.{Logger, LoggerFactory}
+
+import java.io.IOException
+import java.util.Properties
+import java.util.concurrent.atomic.AtomicInteger
+import java.util.concurrent.{ConcurrentLinkedQueue, TimeUnit}
+import scala.jdk.CollectionConverters.{ListHasAsScala, MapHasAsJava, PropertiesHasAsScala, SetHasAsScala}
+import scala.util.{Failure, Success, Try}
+
+/**
+ * kafka-console-ui.
+ *
+ * Copy from {@link kafka.admin.BrokerApiVersionsCommand}.
+ *
+ * @author xuxd
+ * @date 2022-01-22 15:15:57
+ * */
+object BrokerApiVersion{
+
+  protected lazy val log : Logger = LoggerFactory.getLogger(this.getClass)
+
+    def listAllBrokerApiVersionInfo(): java.util.HashMap[Node, NodeApiVersions] = {
+        val res = new java.util.HashMap[Node, NodeApiVersions]()
+        val adminClient = createAdminClient()
+        try {
+            adminClient.awaitBrokers()
+            val brokerMap = adminClient.listAllBrokerVersionInfo()
+            brokerMap.forKeyValue {
+                (broker, versionInfoOrError) =>
+                    versionInfoOrError match {
+                        case Success(v) => {
+                            res.put(broker, v)
+                        }
+                        case Failure(v) => log.error(s"${broker} -> ERROR: ${v}\n")
+                    }
+            }
+        } finally {
+            adminClient.close()
+        }
+
+        res
+    }
+
+    private def createAdminClient(): AdminClient = {
+        val props = new Properties()
+        props.put(AdminClientConfig.BOOTSTRAP_SERVERS_CONFIG, ContextConfigHolder.CONTEXT_CONFIG.get().getBootstrapServer())
+        props.put(AdminClientConfig.REQUEST_TIMEOUT_MS_CONFIG, ContextConfigHolder.CONTEXT_CONFIG.get().getRequestTimeoutMs())
+        props.putAll(ContextConfigHolder.CONTEXT_CONFIG.get().getProperties())
+        AdminClient.create(props)
+    }
+
+    // org.apache.kafka.clients.admin.AdminClient doesn't currently expose a way to retrieve the supported api versions.
+    // We inline the bits we need from kafka.admin.AdminClient so that we can delete it.
+    private class AdminClient(val time: Time,
+        val client: ConsumerNetworkClient,
+        val bootstrapBrokers: List[Node]) extends Logging {
+
+        @volatile var running = true
+        val pendingFutures = new ConcurrentLinkedQueue[RequestFuture[ClientResponse]]()
+
+        val networkThread = new KafkaThread("admin-client-network-thread", () => {
+            try {
+                while (running)
+                    client.poll(time.timer(Long.MaxValue))
+            } catch {
+                case t: Throwable =>
+                    error("admin-client-network-thread exited", t)
+            } finally {
+                pendingFutures.forEach { future =>
+                    try {
+                        future.raise(Errors.UNKNOWN_SERVER_ERROR)
+                    } catch {
+                        case _: IllegalStateException => // It is OK if the future has been completed
+                    }
+                }
+                pendingFutures.clear()
+            }
+        }, true)
+
+        networkThread.start()
+
+        private def send(target: Node,
+            request: AbstractRequest.Builder[_ <: AbstractRequest]): AbstractResponse = {
+            val future = client.send(target, request)
+            pendingFutures.add(future)
+            future.awaitDone(Long.MaxValue, TimeUnit.MILLISECONDS)
+            pendingFutures.remove(future)
+            if (future.succeeded())
+                future.value().responseBody()
+            else
+                throw future.exception()
+        }
+
+        private def sendAnyNode(request: AbstractRequest.Builder[_ <: AbstractRequest]): AbstractResponse = {
+            bootstrapBrokers.foreach { broker =>
+                try {
+                    return send(broker, request)
+                } catch {
+                    case e: AuthenticationException =>
+                        throw e
+                    case e: Exception =>
+                        debug(s"Request ${request.apiKey()} failed against node $broker", e)
+                }
+            }
+            throw new RuntimeException(s"Request ${request.apiKey()} failed on brokers $bootstrapBrokers")
+        }
+
+        private def getApiVersions(node: Node): ApiVersionCollection = {
+            val response = send(node, new ApiVersionsRequest.Builder()).asInstanceOf[ApiVersionsResponse]
+            Errors.forCode(response.data.errorCode).maybeThrow()
+            response.data.apiKeys
+        }
+
+        /**
+         * Wait until there is a non-empty list of brokers in the cluster.
+         */
+        def awaitBrokers(): Unit = {
+            var nodes = List[Node]()
+            val start = System.currentTimeMillis()
+            val maxWait = 30 * 1000
+            do {
+                nodes = findAllBrokers()
+                if (nodes.isEmpty) {
+                    Thread.sleep(50)
+                }
+            }
+            while (nodes.isEmpty && (System.currentTimeMillis() - start < maxWait))
+        }
+
+        private def findAllBrokers(): List[Node] = {
+            val request = MetadataRequest.Builder.allTopics()
+            val response = sendAnyNode(request).asInstanceOf[MetadataResponse]
+            val errors = response.errors
+            if (!errors.isEmpty) {
+                log.info(s"Metadata request contained errors: $errors")
+            }
+
+            // 在3.x版本中这个方法是buildCluster 代替cluster()了
+                        response.buildCluster.nodes.asScala.toList
+//            response.cluster().nodes.asScala.toList
+        }
+
+        def listAllBrokerVersionInfo(): Map[Node, Try[NodeApiVersions]] =
+            findAllBrokers().map { broker =>
+                broker -> Try[NodeApiVersions](new NodeApiVersions(getApiVersions(broker)))
+            }.toMap
+
+        def close(): Unit = {
+            running = false
+            try {
+                client.close()
+            } catch {
+                case e: IOException =>
+                    error("Exception closing nioSelector:", e)
+            }
+        }
+
+    }
+
+    private object AdminClient {
+        val DefaultConnectionMaxIdleMs = 9 * 60 * 1000
+        val DefaultRequestTimeoutMs = 5000
+        val DefaultSocketConnectionSetupMs = CommonClientConfigs.SOCKET_CONNECTION_SETUP_TIMEOUT_MS_CONFIG
+        val DefaultSocketConnectionSetupMaxMs = CommonClientConfigs.SOCKET_CONNECTION_SETUP_TIMEOUT_MAX_MS_CONFIG
+        val DefaultMaxInFlightRequestsPerConnection = 100
+        val DefaultReconnectBackoffMs = 50
+        val DefaultReconnectBackoffMax = 50
+        val DefaultSendBufferBytes = 128 * 1024
+        val DefaultReceiveBufferBytes = 32 * 1024
+        val DefaultRetryBackoffMs = 100
+
+        val AdminClientIdSequence = new AtomicInteger(1)
+        val AdminConfigDef = {
+            val config = new ConfigDef()
+                .define(
+                    CommonClientConfigs.BOOTSTRAP_SERVERS_CONFIG,
+                    Type.LIST,
+                    Importance.HIGH,
+                    CommonClientConfigs.BOOTSTRAP_SERVERS_DOC)
+                .define(CommonClientConfigs.CLIENT_DNS_LOOKUP_CONFIG,
+                    Type.STRING,
+                    ClientDnsLookup.USE_ALL_DNS_IPS.toString,
+                    in(ClientDnsLookup.USE_ALL_DNS_IPS.toString,
+                        ClientDnsLookup.RESOLVE_CANONICAL_BOOTSTRAP_SERVERS_ONLY.toString),
+                    Importance.MEDIUM,
+                    CommonClientConfigs.CLIENT_DNS_LOOKUP_DOC)
+                .define(
+                    CommonClientConfigs.SECURITY_PROTOCOL_CONFIG,
+                    ConfigDef.Type.STRING,
+                    CommonClientConfigs.DEFAULT_SECURITY_PROTOCOL,
+                    ConfigDef.Importance.MEDIUM,
+                    CommonClientConfigs.SECURITY_PROTOCOL_DOC)
+                .define(
+                    CommonClientConfigs.REQUEST_TIMEOUT_MS_CONFIG,
+                    ConfigDef.Type.INT,
+                    DefaultRequestTimeoutMs,
+                    ConfigDef.Importance.MEDIUM,
+                    CommonClientConfigs.REQUEST_TIMEOUT_MS_DOC)
+                .define(
+                    CommonClientConfigs.SOCKET_CONNECTION_SETUP_TIMEOUT_MS_CONFIG,
+                    ConfigDef.Type.LONG,
+                    CommonClientConfigs.DEFAULT_SOCKET_CONNECTION_SETUP_TIMEOUT_MS,
+                    ConfigDef.Importance.MEDIUM,
+                    CommonClientConfigs.SOCKET_CONNECTION_SETUP_TIMEOUT_MS_DOC)
+                .define(
+                    CommonClientConfigs.SOCKET_CONNECTION_SETUP_TIMEOUT_MAX_MS_CONFIG,
+                    ConfigDef.Type.LONG,
+                    CommonClientConfigs.DEFAULT_SOCKET_CONNECTION_SETUP_TIMEOUT_MAX_MS,
+                    ConfigDef.Importance.MEDIUM,
+                    CommonClientConfigs.SOCKET_CONNECTION_SETUP_TIMEOUT_MAX_MS_DOC)
+                .define(
+                    CommonClientConfigs.RETRY_BACKOFF_MS_CONFIG,
+                    ConfigDef.Type.LONG,
+                    DefaultRetryBackoffMs,
+                    ConfigDef.Importance.MEDIUM,
+                    CommonClientConfigs.RETRY_BACKOFF_MS_DOC)
+                .withClientSslSupport()
+                .withClientSaslSupport()
+            config
+        }
+
+        class AdminConfig(originals: Map[_, _]) extends AbstractConfig(AdminConfigDef, originals.asJava, false)
+
+        def create(props: Properties): AdminClient = {
+            val properties = new Properties()
+            val names = props.stringPropertyNames()
+            for (name <- names.asScala.toSet) {
+                properties.put(name, props.get(name).toString())
+            }
+            create(properties.asScala.toMap)
+        }
+
+        def create(props: Map[String, _]): AdminClient = create(new AdminConfig(props))
+
+        def create(config: AdminConfig): AdminClient = {
+            val clientId = "admin-" + AdminClientIdSequence.getAndIncrement()
+            val logContext = new LogContext(s"[LegacyAdminClient clientId=$clientId] ")
+            val time = Time.SYSTEM
+            val metrics = new Metrics(time)
+            val metadata = new Metadata(100L, 60 * 60 * 1000L, logContext,
+                new ClusterResourceListeners)
+            val channelBuilder = ClientUtils.createChannelBuilder(config, time, logContext)
+            val requestTimeoutMs = config.getInt(CommonClientConfigs.REQUEST_TIMEOUT_MS_CONFIG)
+            val connectionSetupTimeoutMs = config.getLong(CommonClientConfigs.SOCKET_CONNECTION_SETUP_TIMEOUT_MS_CONFIG)
+            val connectionSetupTimeoutMaxMs = config.getLong(CommonClientConfigs.SOCKET_CONNECTION_SETUP_TIMEOUT_MAX_MS_CONFIG)
+            val retryBackoffMs = config.getLong(CommonClientConfigs.RETRY_BACKOFF_MS_CONFIG)
+
+            val brokerUrls = config.getList(CommonClientConfigs.BOOTSTRAP_SERVERS_CONFIG)
+            val clientDnsLookup = config.getString(CommonClientConfigs.CLIENT_DNS_LOOKUP_CONFIG)
+            val brokerAddresses = ClientUtils.parseAndValidateAddresses(brokerUrls, clientDnsLookup)
+            metadata.bootstrap(brokerAddresses)
+
+            val selector = new Selector(
+                DefaultConnectionMaxIdleMs,
+                metrics,
+                time,
+                "admin",
+                channelBuilder,
+                logContext)
+
+            // 版本不一样，这个地方的兼容性问题也不一样了
+            // 3.x版本用这个
+                        val networkClient = new NetworkClient(
+                            selector,
+                            metadata,
+                            clientId,
+                            DefaultMaxInFlightRequestsPerConnection,
+                            DefaultReconnectBackoffMs,
+                            DefaultReconnectBackoffMax,
+                            DefaultSendBufferBytes,
+                            DefaultReceiveBufferBytes,
+                            requestTimeoutMs,
+                            connectionSetupTimeoutMs,
+                            connectionSetupTimeoutMaxMs,
+                            time,
+                            true,
+                            new ApiVersions,
+                            logContext)
+
+//            val networkClient = new NetworkClient(
+//                selector,
+//                metadata,
+//                clientId,
+//                DefaultMaxInFlightRequestsPerConnection,
+//                DefaultReconnectBackoffMs,
+//                DefaultReconnectBackoffMax,
+//                DefaultSendBufferBytes,
+//                DefaultReceiveBufferBytes,
+//                requestTimeoutMs,
+//                connectionSetupTimeoutMs,
+//                connectionSetupTimeoutMaxMs,
+//                ClientDnsLookup.USE_ALL_DNS_IPS,
+//                time,
+//                true,
+//                new ApiVersions,
+//                logContext)
+
+            val highLevelClient = new ConsumerNetworkClient(
+                logContext,
+                networkClient,
+                metadata,
+                time,
+                retryBackoffMs,
+                requestTimeoutMs,
+                Integer.MAX_VALUE)
+
+            new AdminClient(
+                time,
+                highLevelClient,
+                metadata.fetch.nodes.asScala.toList)
+        }
+    }
+}

src/main/scala/kafka/console/ClientQuotaConsole.scala

@@ -0,0 +1,84 @@
+package kafka.console
+
+import com.xuxd.kafka.console.config.KafkaConfig
+import org.apache.kafka.clients.admin.{Admin, AlterClientQuotasOptions}
+import org.apache.kafka.common.quota.{ClientQuotaAlteration, ClientQuotaEntity, ClientQuotaFilter, ClientQuotaFilterComponent}
+
+import java.util.Collections
+import java.util.concurrent.TimeUnit
+import scala.jdk.CollectionConverters.{IterableHasAsJava, ListHasAsScala, MapHasAsScala, SeqHasAsJava}
+
+/**
+ * client quota console.
+ *
+ * @author xuxd
+ * @date 2022-12-30 10:55:56
+ * */
+class ClientQuotaConsole(config: KafkaConfig) extends KafkaConsole(config: KafkaConfig) with Logging {
+
+
+  def getClientQuotasConfigs(entityTypes: java.util.List[String], entityNames: java.util.List[String]): java.util.Map[ClientQuotaEntity, java.util.Map[String, Double]] = {
+    withAdminClientAndCatchError(admin => getAllClientQuotasConfigs(admin, entityTypes.asScala.toList, entityNames.asScala.toList),
+      e => {
+        log.error("getAllClientQuotasConfigs error.", e)
+        java.util.Collections.emptyMap()
+      })
+  }.asInstanceOf[java.util.Map[ClientQuotaEntity, java.util.Map[String, Double]]]
+
+  def addQuotaConfigs(entityTypes: java.util.List[String], entityNames: java.util.List[String], configsToBeAddedMap: java.util.Map[String, String]): (Boolean, String) = {
+    alterQuotaConfigs(entityTypes, entityNames, configsToBeAddedMap, Collections.emptyList())
+  }
+
+  def deleteQuotaConfigs(entityTypes: java.util.List[String], entityNames: java.util.List[String], configsToBeDeleted: java.util.List[String]): (Boolean, String) = {
+    alterQuotaConfigs(entityTypes, entityNames, Collections.emptyMap(), configsToBeDeleted)
+  }
+
+  def alterQuotaConfigs(entityTypes: java.util.List[String], entityNames: java.util.List[String], configsToBeAddedMap: java.util.Map[String, String], configsToBeDeleted: java.util.List[String]): (Boolean, String) = {
+    withAdminClientAndCatchError(admin => {
+      alterQuotaConfigsInner(admin, entityTypes.asScala.toList, entityNames.asScala.toList, configsToBeAddedMap.asScala.toMap, configsToBeDeleted.asScala.toSeq)
+      (true, "")
+    },
+      e => {
+        log.error("getAllClientQuotasConfigs error.", e)
+        (false, e.getMessage)
+      }).asInstanceOf[(Boolean, String)]
+  }
+
+  private def getAllClientQuotasConfigs(adminClient: Admin, entityTypes: List[String], entityNames: List[String]): java.util.Map[ClientQuotaEntity, java.util.Map[String, Double]] = {
+    val components = entityTypes.map(Some(_)).zipAll(entityNames.map(Some(_)), None, None).map { case (entityType, entityNameOpt) =>
+      entityNameOpt match {
+        case Some("") => ClientQuotaFilterComponent.ofDefaultEntity(entityType.get)
+        case Some(name) => ClientQuotaFilterComponent.ofEntity(entityType.get, name)
+        case None => ClientQuotaFilterComponent.ofEntityType(entityType.get)
+      }
+    }
+
+    adminClient.describeClientQuotas(ClientQuotaFilter.containsOnly(components.asJava)).entities.get(30, TimeUnit.SECONDS)
+  }.asInstanceOf[java.util.Map[ClientQuotaEntity, java.util.Map[String, Double]]]
+
+  private def alterQuotaConfigsInner(adminClient: Admin, entityTypes: List[String], entityNames: List[String], configsToBeAddedMap: Map[String, String], configsToBeDeleted: Seq[String]) = {
+    // handle altering client/user quota configs
+    //    val oldConfig = getAllClientQuotasConfigs(adminClient, entityTypes, entityNames)
+    //    val invalidConfigs = configsToBeDeleted.filterNot(oldConfig.asScala.toMap.contains)
+    //    if (invalidConfigs.nonEmpty)
+    //      throw new InvalidConfigurationException(s"Invalid config(s): ${invalidConfigs.mkString(",")}")
+
+    val alterEntityNames = entityNames.map(en => if (en.nonEmpty) en else null)
+    // Explicitly populate a HashMap to ensure nulls are recorded properly.
+    val alterEntityMap = new java.util.HashMap[String, String]
+    entityTypes.zip(alterEntityNames).foreach { case (k, v) => alterEntityMap.put(k, v) }
+    val entity = new ClientQuotaEntity(alterEntityMap)
+
+    val alterOptions = new AlterClientQuotasOptions().validateOnly(false)
+    val alterOps = (configsToBeAddedMap.map { case (key, value) =>
+      val doubleValue = try value.toDouble catch {
+        case _: NumberFormatException =>
+          throw new IllegalArgumentException(s"Cannot parse quota configuration value for $key: $value")
+      }
+      new ClientQuotaAlteration.Op(key, doubleValue)
+    } ++ configsToBeDeleted.map(key => new ClientQuotaAlteration.Op(key, null))).asJavaCollection
+
+    adminClient.alterClientQuotas(Collections.singleton(new ClientQuotaAlteration(entity, alterOps)), alterOptions)
+      .all().get(60, TimeUnit.SECONDS)
+  }
+}

src/main/scala/kafka/console/ClusterConsole.scala

@@ -1,11 +1,13 @@
 package kafka.console
 
+import com.xuxd.kafka.console.beans.{BrokerNode, ClusterInfo}
+import com.xuxd.kafka.console.config.{ContextConfigHolder, KafkaConfig}
+import org.apache.kafka.clients.NodeApiVersions
+import org.apache.kafka.clients.admin.DescribeClusterResult
+import org.apache.kafka.common.Node
+
 import java.util.Collections
 import java.util.concurrent.TimeUnit
-import com.xuxd.kafka.console.beans.{BrokerNode, ClusterInfo}
-import com.xuxd.kafka.console.config.{ContextConfigHolder, KafkaConfig}
-import org.apache.kafka.clients.admin.DescribeClusterResult
-
 import scala.jdk.CollectionConverters.{CollectionHasAsScala, SetHasAsJava, SetHasAsScala}
 
 /**
@@ -41,4 +43,8 @@ class ClusterConsole(config: KafkaConfig) extends KafkaConsole(config: KafkaConf
             new ClusterInfo
         }).asInstanceOf[ClusterInfo]
     }
+
+    def listBrokerVersionInfo(): java.util.HashMap[Node, NodeApiVersions] = {
+        BrokerApiVersion.listAllBrokerApiVersionInfo()
+    }
 }

src/main/scala/kafka/console/KafkaConsole.scala

@@ -1,18 +1,21 @@
 package kafka.console
 
+import com.google.common.cache.{CacheLoader, RemovalListener, RemovalNotification}
+import com.xuxd.kafka.console.cache.TimeBasedCache
 import com.xuxd.kafka.console.config.{ContextConfigHolder, KafkaConfig}
-import kafka.zk.{AdminZkClient, KafkaZkClient}
+import kafka.zk.AdminZkClient
 import org.apache.kafka.clients.admin._
 import org.apache.kafka.clients.consumer.{ConsumerConfig, KafkaConsumer, OffsetAndMetadata}
 import org.apache.kafka.clients.producer.KafkaProducer
 import org.apache.kafka.common.TopicPartition
 import org.apache.kafka.common.requests.ListOffsetsResponse
 import org.apache.kafka.common.serialization.{ByteArrayDeserializer, ByteArraySerializer, StringSerializer}
-import org.apache.kafka.common.utils.Time
 import org.slf4j.{Logger, LoggerFactory}
 
 import java.util.Properties
+import java.util.concurrent.Executors
 import scala.collection.{Map, Seq}
+import scala.concurrent.{ExecutionContext, Future}
 import scala.jdk.CollectionConverters.{MapHasAsJava, MapHasAsScala}
 
 /**
@@ -27,11 +30,13 @@ class KafkaConsole(config: KafkaConfig) {
 
     protected def withAdminClient(f: Admin => Any): Any = {
 
-        val admin = createAdminClient()
+        val admin = if (config.isCacheAdminConnection())  AdminCache.cache.get(ContextConfigHolder.CONTEXT_CONFIG.get().getBootstrapServer()) else createAdminClient()
         try {
             f(admin)
         } finally {
-            admin.close()
+            if (!config.isCacheAdminConnection) {
+                admin.close()
+            }
         }
     }
 
@@ -45,33 +50,40 @@ class KafkaConsole(config: KafkaConfig) {
 
     protected def withConsumerAndCatchError(f: KafkaConsumer[Array[Byte], Array[Byte]] => Any, eh: Exception => Any,
         extra: Properties = new Properties()): Any = {
-        val props = getProps()
-        props.putAll(extra)
-        props.put(ConsumerConfig.CLIENT_ID_CONFIG, String.valueOf(System.currentTimeMillis()))
-        val consumer = new KafkaConsumer(props, new ByteArrayDeserializer, new ByteArrayDeserializer)
+//        val props = getProps()
+//        props.putAll(extra)
+//        props.put(ConsumerConfig.CLIENT_ID_CONFIG, String.valueOf(System.currentTimeMillis()))
+//        val consumer = new KafkaConsumer(props, new ByteArrayDeserializer, new ByteArrayDeserializer)
+        ConsumerCache.setProperties(extra)
+        val consumer = if (config.isCacheConsumerConnection) ConsumerCache.cache.get(ContextConfigHolder.CONTEXT_CONFIG.get().getBootstrapServer()) else KafkaConsole.createByteArrayKVConsumer(extra)
+
         try {
             f(consumer)
         } catch {
             case er: Exception => eh(er)
         }
         finally {
-            consumer.close()
+            ConsumerCache.clearProperties()
+            if (!config.isCacheConsumerConnection) {
+                consumer.close()
+            }
         }
     }
 
     protected def withProducerAndCatchError(f: KafkaProducer[String, String] => Any, eh: Exception => Any,
         extra: Properties = new Properties()): Any = {
-        val props = getProps()
-        props.putAll(extra)
-        props.put(ConsumerConfig.CLIENT_ID_CONFIG, String.valueOf(System.currentTimeMillis()))
-        val producer = new KafkaProducer[String, String](props, new StringSerializer, new StringSerializer)
+        ProducerCache.setProperties(extra)
+        val producer = if (config.isCacheProducerConnection) ProducerCache.cache.get(ContextConfigHolder.CONTEXT_CONFIG.get().getBootstrapServer) else KafkaConsole.createProducer(extra)
         try {
             f(producer)
         } catch {
             case er: Exception => eh(er)
         }
         finally {
-            producer.close()
+            ProducerCache.clearProperties()
+            if (!config.isCacheProducerConnection) {
+                producer.close()
+            }
         }
     }
 
@@ -79,7 +91,6 @@ class KafkaConsole(config: KafkaConfig) {
         extra: Properties = new Properties()): Any = {
         val props = getProps()
         props.putAll(extra)
-        props.put(ConsumerConfig.CLIENT_ID_CONFIG, String.valueOf(System.currentTimeMillis()))
         val producer = new KafkaProducer[Array[Byte], Array[Byte]](props, new ByteArraySerializer, new ByteArraySerializer)
         try {
             f(producer)
@@ -91,14 +102,17 @@ class KafkaConsole(config: KafkaConfig) {
         }
     }
 
+    @Deprecated
     protected def withZKClient(f: AdminZkClient => Any): Any = {
-        val zkClient = KafkaZkClient(config.getZookeeperAddr, false, 30000, 30000, Int.MaxValue, Time.SYSTEM)
-        val adminZkClient = new AdminZkClient(zkClient)
-        try {
-            f(adminZkClient)
-        } finally {
-            zkClient.close()
-        }
+//        val zkClient = KafkaZkClient(config.getZookeeperAddr, false, 30000, 30000, Int.MaxValue, Time.SYSTEM)
+        // 3.x
+//        val zkClient = KafkaZkClient(config.getZookeeperAddr, false, 30000, 30000, Int.MaxValue, Time.SYSTEM, new ZKClientConfig(), "KafkaZkClient")
+//        val adminZkClient = new AdminZkClient(zkClient)
+//        try {
+//            f(adminZkClient)
+//        } finally {
+//            zkClient.close()
+//        }
     }
 
     protected def createAdminClient(props: Properties): Admin = {
@@ -110,20 +124,47 @@ class KafkaConsole(config: KafkaConfig) {
     }
 
     private def createAdminClient(): Admin = {
-        Admin.create(getProps())
+        KafkaConsole.createAdminClient()
     }
 
     private def getProps(): Properties = {
+        KafkaConsole.getProps()
+    }
+}
+
+object KafkaConsole {
+    val log: Logger = LoggerFactory.getLogger(this.getClass)
+
+    def createAdminClient(): Admin = {
+        Admin.create(getProps())
+    }
+
+    def createByteArrayKVConsumer(extra: Properties) : KafkaConsumer[Array[Byte], Array[Byte]] = {
+        val props = getProps()
+        props.putAll(extra)
+        props.put(ConsumerConfig.CLIENT_ID_CONFIG, String.valueOf(System.currentTimeMillis()))
+        new KafkaConsumer(props, new ByteArrayDeserializer, new ByteArrayDeserializer)
+    }
+
+    def createProducer(extra: Properties) : KafkaProducer[String, String] = {
+        val props = getProps()
+        props.putAll(extra)
+        new KafkaProducer(props, new StringSerializer, new StringSerializer)
+    }
+
+    def createByteArrayStringProducer(extra: Properties) : KafkaProducer[Array[Byte], Array[Byte]] = {
+        val props = getProps()
+        props.putAll(extra)
+        new KafkaProducer(props, new ByteArraySerializer, new ByteArraySerializer)
+    }
+
+    def getProps(): Properties = {
         val props: Properties = new Properties();
         props.put(AdminClientConfig.BOOTSTRAP_SERVERS_CONFIG, ContextConfigHolder.CONTEXT_CONFIG.get().getBootstrapServer())
         props.put(AdminClientConfig.REQUEST_TIMEOUT_MS_CONFIG, ContextConfigHolder.CONTEXT_CONFIG.get().getRequestTimeoutMs())
         props.putAll(ContextConfigHolder.CONTEXT_CONFIG.get().getProperties())
         props
     }
-}
-
-object KafkaConsole {
-    val log: Logger = LoggerFactory.getLogger(this.getClass)
 
     def getCommittedOffsets(admin: Admin, groupId: String,
         timeoutMs: Integer): Map[TopicPartition, OffsetAndMetadata] = {
@@ -174,4 +215,88 @@ object KafkaConsole {
         }.toMap
         res
     }
+    implicit val ec = ExecutionContext.fromExecutorService(Executors.newFixedThreadPool(2))
 }
+
+object AdminCache {
+
+    private val log: Logger = LoggerFactory.getLogger(this.getClass)
+
+    private val cacheLoader = new CacheLoader[String, Admin] {
+        override def load(key: String): Admin = KafkaConsole.createAdminClient()
+    }
+
+    private val removeListener = new RemovalListener[String, Admin] {
+        override def onRemoval(notification: RemovalNotification[String, Admin]): Unit = {
+            Future {
+                log.warn("Close expired admin connection: {}", notification.getKey)
+                notification.getValue.close()
+                log.warn("Close expired admin connection complete: {}", notification.getKey)
+            }(KafkaConsole.ec)
+
+        }
+    }
+    val cache = new TimeBasedCache[String, Admin](cacheLoader, removeListener)
+}
+
+object ConsumerCache {
+
+    private val log: Logger = LoggerFactory.getLogger(this.getClass)
+
+    private val threadLocal = new ThreadLocal[Properties]
+
+    private val cacheLoader = new CacheLoader[String, KafkaConsumer[Array[Byte], Array[Byte]]] {
+        override def load(key: String): KafkaConsumer[Array[Byte], Array[Byte]] = KafkaConsole.createByteArrayKVConsumer(threadLocal.get())
+    }
+
+    private val removeListener = new RemovalListener[String, KafkaConsumer[Array[Byte], Array[Byte]]] {
+        override def onRemoval(notification: RemovalNotification[String, KafkaConsumer[Array[Byte], Array[Byte]]]): Unit = {
+            Future {
+                log.warn("Close expired consumer connection: {}", notification.getKey)
+                notification.getValue.close()
+                log.warn("Close expired consumer connection complete: {}", notification.getKey)
+            }(KafkaConsole.ec)
+
+        }
+    }
+    val cache = new TimeBasedCache[String, KafkaConsumer[Array[Byte], Array[Byte]]](cacheLoader, removeListener)
+
+    def setProperties(props : Properties) : Unit = {
+        threadLocal.set(props)
+    }
+
+    def clearProperties() : Unit = {
+        threadLocal.remove()
+    }
+}
+
+object ProducerCache {
+
+    private val log: Logger = LoggerFactory.getLogger(this.getClass)
+
+    private val threadLocal = new ThreadLocal[Properties]
+
+    private val cacheLoader = new CacheLoader[String, KafkaProducer[String, String]] {
+        override def load(key: String): KafkaProducer[String, String] = KafkaConsole.createProducer(threadLocal.get())
+    }
+
+    private val removeListener = new RemovalListener[String, KafkaProducer[String, String]] {
+        override def onRemoval(notification: RemovalNotification[String, KafkaProducer[String, String]]): Unit = {
+            Future {
+                log.warn("Close expired producer connection: {}", notification.getKey)
+                notification.getValue.close()
+                log.warn("Close expired producer connection complete: {}", notification.getKey)
+            }(KafkaConsole.ec)
+
+        }
+    }
+    val cache = new TimeBasedCache[String, KafkaProducer[String, String]](cacheLoader, removeListener)
+
+    def setProperties(props : Properties) : Unit = {
+        threadLocal.set(props)
+    }
+
+    def clearProperties() : Unit = {
+        threadLocal.remove()
+    }
+}

src/main/scala/kafka/console/MessageConsole.scala

@@ -4,13 +4,14 @@ import com.xuxd.kafka.console.beans.MessageFilter
 import com.xuxd.kafka.console.beans.enums.FilterType
 import com.xuxd.kafka.console.config.{ContextConfigHolder, KafkaConfig}
 import org.apache.commons.lang3.StringUtils
+import org.apache.kafka.clients.admin.{DeleteRecordsOptions, RecordsToDelete}
 import org.apache.kafka.clients.consumer.{ConsumerConfig, ConsumerRecord}
 import org.apache.kafka.clients.producer.ProducerRecord
 import org.apache.kafka.common.TopicPartition
 
 import java.time.Duration
 import java.util
-import java.util.Properties
+import java.util.{Properties}
 import scala.collection.immutable
 import scala.jdk.CollectionConverters.{CollectionHasAsScala, MapHasAsScala, SeqHasAsJava}
 
@@ -127,7 +128,7 @@ class MessageConsole(config: KafkaConfig) extends KafkaConsole(config: KafkaConf
                                                 record.offset(),
                                                 record.timestamp(),
                                                 record.timestampType(),
-                                                record.checksum(),
+//                                                record.checksum(),
                                                 record.serializedKeySize(),
                                                 record.serializedValueSize(),
                                                 record.key(),
@@ -236,4 +237,14 @@ class MessageConsole(config: KafkaConfig) extends KafkaConsole(config: KafkaConf
             (false, e.getMessage)
         }).asInstanceOf[(Boolean, String)]
     }
+
+    def delete(recordsToDelete: util.Map[TopicPartition, RecordsToDelete]): (Boolean, String) = {
+      withAdminClientAndCatchError(admin => {
+        admin.deleteRecords(recordsToDelete, withTimeoutMs(new DeleteRecordsOptions())).all().get()
+        (true, "")
+      }, e => {
+        log.error("delete message error.", e)
+        (false, "delete error :" + e.getMessage)
+      }).asInstanceOf[(Boolean, String)]
+    }
 }

src/main/scala/kafka/console/OperationConsole.scala

@@ -242,8 +242,8 @@ class OperationConsole(config: KafkaConfig, topicConsole: TopicConsole,
         withAdminClientAndCatchError(admin => {
             admin.listPartitionReassignments(withTimeoutMs(new ListPartitionReassignmentsOptions)).reassignments().get()
         }, e => {
-            Collections.emptyMap()
             log.error("listPartitionReassignments error.", e)
+            Collections.emptyMap()
         }).asInstanceOf[util.Map[TopicPartition, PartitionReassignment]]
     }
 
@@ -256,4 +256,20 @@ class OperationConsole(config: KafkaConfig, topicConsole: TopicConsole,
             throw e
         }).asInstanceOf[util.Map[TopicPartition, Throwable]]
     }
+
+    def proposedAssignments(reassignmentJson: String,
+        brokerListString: String): util.Map[TopicPartition, util.List[Int]] = {
+        withAdminClientAndCatchError(admin => {
+            val map = ReassignPartitionsCommand.generateAssignment(admin, reassignmentJson, brokerListString, true)._1
+            val res = new util.HashMap[TopicPartition, util.List[Int]]()
+            for (tp <- map.keys) {
+                res.put(tp, map(tp).asJava)
+//                res.put(tp, map.getOrElse(tp, Seq.empty).asJava)
+            }
+            res
+        }, e => {
+            log.error("proposedAssignments error.", e)
+            throw e
+        })
+    }.asInstanceOf[util.Map[TopicPartition, util.List[Int]]]
 }

src/main/scala/kafka/console/TopicConsole.scala

@@ -66,17 +66,17 @@ class TopicConsole(config: KafkaConfig) extends KafkaConsole(config: KafkaConfig
     /**
      * delete topic by topic name.
      *
-     * @param topic topic name.
+     * @param topics topic name list.
      * @return result or : fail message.
      */
-    def deleteTopic(topic: String): (Boolean, String) = {
+    def deleteTopics(topics: util.Collection[String]): (Boolean, String) = {
         withAdminClientAndCatchError(admin => {
             val timeoutMs = ContextConfigHolder.CONTEXT_CONFIG.get().getRequestTimeoutMs()
-            admin.deleteTopics(Collections.singleton(topic), new DeleteTopicsOptions().retryOnQuotaViolation(false)).all().get(timeoutMs, TimeUnit.MILLISECONDS)
+            admin.deleteTopics(topics, new DeleteTopicsOptions().retryOnQuotaViolation(false)).all().get(timeoutMs, TimeUnit.MILLISECONDS)
             (true, "")
         },
             e => {
-                log.error("delete topic error, topic: " + topic, e)
+                log.error("delete topic error, topic: " + topics, e)
                 (false, e.getMessage)
             }).asInstanceOf[(Boolean, String)]
     }

src/test/java/com/xuxd/kafka/console/scala/ClientQuotaConsoleTest.java

@@ -0,0 +1,48 @@
+package com.xuxd.kafka.console.scala;
+
+import com.xuxd.kafka.console.config.ContextConfig;
+import com.xuxd.kafka.console.config.ContextConfigHolder;
+import com.xuxd.kafka.console.config.KafkaConfig;
+import kafka.console.ClientQuotaConsole;
+import org.apache.kafka.common.config.internals.QuotaConfigs;
+import org.apache.kafka.common.quota.ClientQuotaEntity;
+import org.junit.jupiter.api.Test;
+
+import java.util.Arrays;
+import java.util.HashMap;
+import java.util.Map;
+
+public class ClientQuotaConsoleTest {
+
+    String bootstrapServer = "localhost:9092";
+
+    @Test
+    void testGetClientQuotasConfigs() {
+        ClientQuotaConsole console = new ClientQuotaConsole(new KafkaConfig());
+        ContextConfig config = new ContextConfig();
+        config.setBootstrapServer(bootstrapServer);
+        ContextConfigHolder.CONTEXT_CONFIG.set(config);
+        Map<ClientQuotaEntity, Map<String, Object>> configs = console.getClientQuotasConfigs(Arrays.asList(ClientQuotaEntity.USER, ClientQuotaEntity.CLIENT_ID), Arrays.asList("user1", "clientA"));
+        configs.forEach((k, v) -> {
+            System.out.println(k);
+            System.out.println(v);
+        });
+    }
+
+    @Test
+    void testAlterClientQuotasConfigs() {
+        ClientQuotaConsole console = new ClientQuotaConsole(new KafkaConfig());
+        ContextConfig config = new ContextConfig();
+        config.setBootstrapServer(bootstrapServer);
+        ContextConfigHolder.CONTEXT_CONFIG.set(config);
+        Map<String, String> configsToBeAddedMap = new HashMap<>();
+        configsToBeAddedMap.put(QuotaConfigs.PRODUCER_BYTE_RATE_OVERRIDE_CONFIG, "1024000000");
+
+        console.addQuotaConfigs(Arrays.asList(ClientQuotaEntity.USER), Arrays.asList("user-test"), configsToBeAddedMap);
+        console.addQuotaConfigs(Arrays.asList(ClientQuotaEntity.USER), Arrays.asList(""), configsToBeAddedMap);
+        console.addQuotaConfigs(Arrays.asList(ClientQuotaEntity.CLIENT_ID), Arrays.asList(""), configsToBeAddedMap);
+        console.addQuotaConfigs(Arrays.asList(ClientQuotaEntity.CLIENT_ID), Arrays.asList("clientA"), configsToBeAddedMap);
+        console.addQuotaConfigs(Arrays.asList(ClientQuotaEntity.USER, ClientQuotaEntity.CLIENT_ID), Arrays.asList("", ""), configsToBeAddedMap);
+//        console.deleteQuotaConfigs(Arrays.asList(ClientQuotaEntity.CLIENT_ID), Arrays.asList(""), Arrays.asList(QuotaConfigs.CONSUMER_BYTE_RATE_OVERRIDE_CONFIG));
+    }
+}

ui/package-lock.json

@@ -1820,6 +1820,63 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "ssri": {
           "version": "8.0.1",
           "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz",
@@ -1828,6 +1885,28 @@
           "requires": {
             "minipass": "^3.1.1"
           }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.3",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -12097,87 +12176,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
-          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-ref": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-ref/download/vue-ref-2.0.0.tgz",

ui/src/App.vue

@@ -11,10 +11,10 @@
       ><router-link to="/group-page" class="pad-l-r">消费组</router-link>
       <span>|</span
       ><router-link to="/message-page" class="pad-l-r">消息</router-link>
-      <span v-show="enableSasl">|</span
-      ><router-link to="/acl-page" class="pad-l-r" v-show="enableSasl"
-        >Acl</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>
       <span class="right">集群：{{ clusterName }}</span>

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

@@ -47,6 +47,18 @@ export const KafkaAclApi = {
     url: "/acl",
     method: "delete",
   },
+  clearAcl: {
+    url: "/acl/clear",
+    method: "delete",
+  },
+  getSaslScramUserList: {
+    url: "/user/scram",
+    method: "get",
+  },
+  deleteSaslScramUser: {
+    url: "/user",
+    method: "delete",
+  },
 };
 
 export const KafkaConfigApi = {
@@ -203,6 +215,10 @@ export const KafkaClusterApi = {
     url: "/cluster/info/peek",
     method: "get",
   },
+  getBrokerApiVersionInfo: {
+    url: "/cluster/info/api/version",
+    method: "get",
+  },
 };
 
 export const KafkaOpApi = {
@@ -242,6 +258,10 @@ export const KafkaOpApi = {
     url: "/op/replication/reassignments",
     method: "delete",
   },
+  proposedAssignment: {
+    url: "/op/replication/reassignments/proposed",
+    method: "post",
+  },
 };
 export const KafkaMessageApi = {
   searchByTime: {
@@ -268,4 +288,23 @@ export const KafkaMessageApi = {
     url: "/message/resend",
     method: "post",
   },
+  delete: {
+    url: "/message",
+    method: "delete",
+  },
 };
+
+export const KafkaClientQuotaApi = {
+  getClientQuotaConfigs: {
+    url: "/client/quota/list",
+    method: "post",
+  },
+  alterClientQuotaConfigs: {
+    url: "/client/quota",
+    method: "post",
+  },
+  deleteClientQuotaConfigs: {
+    url: "/client/quota",
+    method: "delete",
+  },
+};

ui/src/utils/request.js

@@ -27,7 +27,7 @@ request.interceptors.request.use((config) => {
   const clusterInfo = getClusterInfo();
   if (clusterInfo) {
     config.headers["X-Cluster-Info-Id"] = clusterInfo.id;
-    config.headers["X-Cluster-Info-Name"] = clusterInfo.clusterName;
+    // config.headers["X-Cluster-Info-Name"] = encodeURIComponent(clusterInfo.clusterName);
   }
   return config;
 }, errorHandler);

ui/src/views/Home.vue

@@ -1,25 +1,66 @@
 <template>
   <div class="home">
-    <a-card title="kafka console 配置" style="width: 100%">
-      <!--      <a slot="extra" href="#">more</a>-->
+    <a-card title="控制台默认配置" class="card-style">
       <p v-for="(v, k) in config" :key="k">{{ k }}={{ v }}</p>
     </a-card>
+    <p></p>
+    <hr />
+    <h3>kafka API 版本兼容性</h3>
+    <a-spin :spinning="apiVersionInfoLoading">
+      <a-table
+        :columns="columns"
+        :data-source="brokerApiVersionInfo"
+        bordered
+        row-key="brokerId"
+      >
+        <div slot="operation" slot-scope="record">
+          <a-button
+            size="small"
+            href="javascript:;"
+            class="operation-btn"
+            @click="openApiVersionInfoDialog(record)"
+            >详情
+          </a-button>
+        </div>
+      </a-table>
+    </a-spin>
+    <VersionInfo
+      :version-info="apiVersionInfo"
+      :visible="showApiVersionInfoDialog"
+      @closeApiVersionInfoDialog="closeApiVersionInfoDialog"
+    >
+    </VersionInfo>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
 import request from "@/utils/request";
-import { KafkaConfigApi } from "@/utils/api";
+import { KafkaConfigApi, KafkaClusterApi } from "@/utils/api";
 import notification from "ant-design-vue/lib/notification";
+import VersionInfo from "@/views/home/VersionInfo";
 export default {
   name: "Home",
-  components: {},
+  components: { VersionInfo },
   data() {
     return {
       config: {},
+      columns,
+      brokerApiVersionInfo: [],
+      showApiVersionInfoDialog: false,
+      apiVersionInfo: [],
+      apiVersionInfoLoading: false,
     };
   },
+  methods: {
+    openApiVersionInfoDialog(record) {
+      this.apiVersionInfo = record.versionInfo;
+      this.showApiVersionInfoDialog = true;
+    },
+    closeApiVersionInfoDialog() {
+      this.showApiVersionInfoDialog = false;
+    },
+  },
 
   created() {
     request({
@@ -35,6 +76,53 @@ export default {
         });
       }
     });
+    this.apiVersionInfoLoading = true;
+    request({
+      url: KafkaClusterApi.getBrokerApiVersionInfo.url,
+      method: KafkaClusterApi.getBrokerApiVersionInfo.method,
+    }).then((res) => {
+      this.apiVersionInfoLoading = false;
+      if (res.code == 0) {
+        this.brokerApiVersionInfo = res.data;
+      } else {
+        notification.error({
+          message: "error",
+          description: res.msg,
+        });
+      }
+    });
   },
 };
+const columns = [
+  {
+    title: "id",
+    dataIndex: "brokerId",
+    key: "brokerId",
+  },
+  {
+    title: "地址",
+    dataIndex: "host",
+    key: "host",
+  },
+  {
+    title: "支持的api数量",
+    dataIndex: "supportNums",
+    key: "supportNums",
+  },
+  {
+    title: "不支持的api数量",
+    dataIndex: "unSupportNums",
+    key: "unSupportNums",
+  },
+  {
+    title: "操作",
+    key: "operation",
+    scopedSlots: { customRender: "operation" },
+  },
+];
 </script>
+<style scoped>
+.card-style {
+  width: 100%;
+}
+</style>

ui/src/views/acl/Acl.vue

@@ -1,461 +1,25 @@
 <template>
   <div class="content">
-    <a-spin :spinning="loading">
-      <div class="acl">
-        <div id="components-form-acl-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>
-        <div class="operation-row-button">
-          <a-button type="primary" @click="updateUser">新增/更新用户</a-button>
-          <UpdateUser
-            :visible="showUpdateUser"
-            @updateUserDialogData="closeUpdateUserDialog"
-          ></UpdateUser>
-        </div>
-        <a-table :columns="columns" :data-source="data" bordered>
-          <div slot="username" slot-scope="username">
-            <span>{{ username }}</span
-            ><a-button
-              size="small"
-              shape="round"
-              type="dashed"
-              style="float: right"
-              @click="onUserDetail(username)"
-              >详情</a-button
-            >
-          </div>
-
-          <div slot="topicList" slot-scope="topicList, record">
-            <a
-              href="#"
-              v-for="t in topicList"
-              :key="t"
-              @click="onTopicDetail(t, record.username)"
-              ><div style="border-bottom: 1px solid #e5e1e1">{{ t }}</div>
-            </a>
-          </div>
-
-          <div slot="groupList" slot-scope="groupList, record">
-            <a
-              href="#"
-              v-for="t in groupList"
-              :key="t"
-              @click="onGroupDetail(t, record.username)"
-              ><div style="border-bottom: 1px solid #e5e1e1">{{ t }}</div>
-            </a>
-          </div>
-
-          <div
-            slot="operation"
-            slot-scope="record"
-            v-show="!record.user || record.user.role != 'admin'"
-          >
-            <a-popconfirm
-              :title="'删除用户: ' + record.username + '及相关权限？'"
-              ok-text="确认"
-              cancel-text="取消"
-              @confirm="onDeleteUser(record)"
-            >
-              <a-button size="small" href="javascript:;" class="operation-btn"
-                >删除</a-button
-              >
-            </a-popconfirm>
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="onManageProducerAuth(record)"
-              >管理生产权限
-            </a-button>
-
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="onManageConsumerAuth(record)"
-              >管理消费权限
-            </a-button>
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="onAddAuth(record)"
-              >增加权限
-            </a-button>
-          </div>
-        </a-table>
-        <UserDetail
-          :visible="openUserDetailDialog"
-          :username="selectDetail.username"
-          @userDetailDialog="closeUserDetailDialog"
-        ></UserDetail>
-        <AclDetail
-          :visible="openAclDetailDialog"
-          :selectDetail="selectDetail"
-          @aclDetailDialog="closeAclDetailDialog"
-        ></AclDetail>
-        <ManageProducerAuth
-          :visible="openManageProducerAuthDialog"
-          :record="selectRow"
-          @manageProducerAuthDialog="closeManageProducerAuthDialog"
-        ></ManageProducerAuth>
-        <ManageConsumerAuth
-          :visible="openManageConsumerAuthDialog"
-          :record="selectRow"
-          @manageConsumerAuthDialog="closeManageConsumerAuthDialog"
-        ></ManageConsumerAuth>
-        <AddAuth
-          :visible="openAddAuthDialog"
-          :record="selectRow"
-          @addAuthDialog="closeAddAuthDialog"
-        ></AddAuth>
-      </div>
-    </a-spin>
+    <a-tabs default-active-key="1" size="large" tabPosition="top">
+      <a-tab-pane key="1" tab="资源授权">
+        <acl-list></acl-list>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="SaslScram用户管理">
+        <sasl-scram></sasl-scram>
+      </a-tab-pane>
+    </a-tabs>
   </div>
 </template>
 
 <script>
-import request from "@/utils/request";
-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";
-import AddAuth from "@/views/acl/AddAuth";
-import AclDetail from "@/views/acl/AclDetail";
-import UserDetail from "@/views/acl/UserDetail";
+import AclList from "@/views/acl/AclList";
+import SaslScram from "@/views/acl/SaslScram";
 
 export default {
   name: "Acl",
   components: {
-    UpdateUser,
-    ManageProducerAuth,
-    ManageConsumerAuth,
-    AddAuth,
-    AclDetail,
-    UserDetail,
-  },
-  data() {
-    return {
-      queryParam: {},
-      data: [],
-      columns,
-      selectRow: {},
-      form: this.$form.createForm(this, { name: "advanced_search" }),
-      showUpdateUser: false,
-      deleteUserConfirm: false,
-      openManageProducerAuthDialog: false,
-      openManageConsumerAuthDialog: false,
-      openAddAuthDialog: false,
-      openAclDetailDialog: false,
-      openUserDetailDialog: false,
-      selectDetail: {
-        resourceName: "",
-        resourceType: "",
-        username: "",
-      },
-      loading: false,
-    };
-  },
-  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;
-        }
-        Object.assign(this.queryParam, queryParam);
-        this.getAclList();
-      });
-    },
-
-    handleReset() {
-      this.form.resetFields();
-    },
-
-    updateUser() {
-      this.showUpdateUser = true;
-    },
-    closeUpdateUserDialog(data) {
-      this.showUpdateUser = data.show;
-      if (data.ok) {
-        this.getAclList();
-      }
-    },
-    onDeleteUser(row) {
-      this.loading = true;
-      request({
-        url: KafkaAclApi.deleteKafkaUser.url,
-        method: KafkaAclApi.deleteKafkaUser.method,
-        data: { username: row.username },
-      }).then((res) => {
-        this.loading = false;
-        this.getAclList();
-        if (res.code == 0) {
-          this.$message.success(res.msg);
-        } else {
-          this.$message.error(res.msg);
-        }
-      });
-    },
-    onManageProducerAuth(row) {
-      this.openManageProducerAuthDialog = true;
-      const rowData = {};
-      Object.assign(rowData, row);
-      this.selectRow = rowData;
-    },
-    onManageConsumerAuth(row) {
-      this.openManageConsumerAuthDialog = true;
-      const rowData = {};
-      Object.assign(rowData, row);
-      this.selectRow = rowData;
-    },
-    onAddAuth(row) {
-      this.openAddAuthDialog = true;
-      const rowData = {};
-      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;
-    },
-    onUserDetail(username) {
-      this.selectDetail.username = username;
-      this.openUserDetailDialog = true;
-    },
-    closeManageProducerAuthDialog() {
-      this.openManageProducerAuthDialog = false;
-      this.getAclList();
-    },
-    closeManageConsumerAuthDialog() {
-      this.openManageConsumerAuthDialog = false;
-      this.getAclList();
-    },
-    closeAddAuthDialog(p) {
-      this.openAddAuthDialog = false;
-      if (p.refresh) {
-        this.getAclList();
-      }
-    },
-    closeAclDetailDialog(p) {
-      this.openAclDetailDialog = false;
-      if (p.refresh) {
-        this.getAclList();
-      }
-    },
-    closeUserDetailDialog() {
-      this.openUserDetailDialog = false;
-    },
-    getAclList() {
-      this.loading = true;
-      request({
-        url: KafkaAclApi.getAclList.url,
-        method: KafkaAclApi.getAclList.method,
-        data: this.queryParam,
-      }).then((response) => {
-        this.loading = false;
-        this.data.splice(0, this.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]);
-          this.data.push({
-            key: k,
-            username: k,
-            topicList: topicList,
-            groupList: groupList,
-            user: response.data.map[k]["USER"],
-          });
-          this.data.sort((a, b) => a.username.localeCompare(b.username));
-        }
-      });
-    },
-  },
-  created() {
-    this.getAclList();
+    AclList,
+    SaslScram,
   },
 };
-
-// function getAclList(data, requestParameters) {
-//   request({
-//     url: KafkaAclApi.getAclList.url,
-//     method: KafkaAclApi.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,
-//         groupList: groupList,
-//         user: response.data.map[k]["USER"],
-//       });
-//       data.sort((a, b) => a.username.localeCompare(b.username));
-//     }
-//   });
-// }
-
-const columns = [
-  {
-    title: "用户名",
-    dataIndex: "username",
-    key: "username",
-    width: 300,
-    slots: { title: "username" },
-    scopedSlots: { customRender: "username" },
-  },
-  {
-    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",
-    scopedSlots: { customRender: "operation" },
-    width: 500,
-  },
-];
 </script>
-
-<style scoped>
-.acl {
-  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-acl-advanced-search .ant-form {
-  max-width: none;
-  margin-bottom: 1%;
-}
-
-#components-form-acl-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;
-}
-
-.operation-row-button {
-  height: 4%;
-  text-align: left;
-  margin-bottom: 8px;
-}
-
-.operation-btn {
-  margin-right: 3%;
-}
-</style>

ui/src/views/acl/AclList.vue

@@ -0,0 +1,449 @@
+<template>
+  <div class="acl">
+    <a-spin :spinning="loading">
+      <div class="acl">
+        <div id="components-form-acl-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="比如, 用户名"
+                    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>
+        <div class="operation-row-button">
+          <a-button type="primary" @click="onAddPrincipalAuth"
+            >新增主体权限</a-button
+          >
+          <span v-show="hint != ''" class="hint"
+            >broker未启用权限管理，所以不支持授权相关操作[{{ hint }}]</span
+          >
+        </div>
+        <a-table :columns="columns" :data-source="data" bordered>
+          <div slot="username" slot-scope="username">
+            <span>{{ username }}</span>
+          </div>
+
+          <div slot="topicList" slot-scope="topicList, record">
+            <a
+              href="#"
+              v-for="t in topicList"
+              :key="t"
+              @click="onTopicDetail(t, record.username)"
+              ><div style="border-bottom: 1px solid #e5e1e1">{{ t }}</div>
+            </a>
+          </div>
+
+          <div slot="groupList" slot-scope="groupList, record">
+            <a
+              href="#"
+              v-for="t in groupList"
+              :key="t"
+              @click="onGroupDetail(t, record.username)"
+              ><div style="border-bottom: 1px solid #e5e1e1">{{ t }}</div>
+            </a>
+          </div>
+
+          <div slot="operation" slot-scope="record">
+            <a-button
+              size="small"
+              href="javascript:;"
+              class="operation-btn"
+              @click="onManageProducerAuth(record)"
+              >管理生产权限
+            </a-button>
+
+            <a-button
+              size="small"
+              href="javascript:;"
+              class="operation-btn"
+              @click="onManageConsumerAuth(record)"
+              >管理消费权限
+            </a-button>
+            <a-button
+              size="small"
+              href="javascript:;"
+              class="operation-btn"
+              @click="onAddAuth(record)"
+              >增加权限
+            </a-button>
+            <a-popconfirm
+              :title="'清除: ' + record.username + '所有资源权限？'"
+              ok-text="确认"
+              cancel-text="取消"
+              @confirm="onClearUserAcl(record)"
+            >
+              <a-button size="small" href="javascript:;" class="operation-btn"
+                >清除权限</a-button
+              >
+            </a-popconfirm>
+          </div>
+        </a-table>
+        <AclDetail
+          :visible="openAclDetailDialog"
+          :selectDetail="selectDetail"
+          @aclDetailDialog="closeAclDetailDialog"
+        ></AclDetail>
+        <ManageProducerAuth
+          :visible="openManageProducerAuthDialog"
+          :record="selectRow"
+          @manageProducerAuthDialog="closeManageProducerAuthDialog"
+        ></ManageProducerAuth>
+        <ManageConsumerAuth
+          :visible="openManageConsumerAuthDialog"
+          :record="selectRow"
+          @manageConsumerAuthDialog="closeManageConsumerAuthDialog"
+        ></ManageConsumerAuth>
+        <AddAuth
+          :visible="openAddAuthDialog"
+          :record="selectRow"
+          @addAuthDialog="closeAddAuthDialog"
+        ></AddAuth>
+        <AddPrincipalAuth
+          :visible="openAddPrincipalAuthDialog"
+          @closeAddPrincipalAuthDialog="closeAddPrincipalAuthDialog"
+        ></AddPrincipalAuth>
+      </div>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+import notification from "ant-design-vue/es/notification";
+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";
+import AddPrincipalAuth from "@/views/acl/AddPrincipalAuth";
+
+export default {
+  name: "AclList",
+  components: {
+    ManageProducerAuth,
+    ManageConsumerAuth,
+    AddAuth,
+    AclDetail,
+    AddPrincipalAuth,
+  },
+  data() {
+    return {
+      queryParam: {},
+      data: [],
+      columns,
+      selectRow: {},
+      form: this.$form.createForm(this, { name: "advanced_search" }),
+      openManageProducerAuthDialog: false,
+      openManageConsumerAuthDialog: false,
+      openAddAuthDialog: false,
+      openAclDetailDialog: false,
+      openAddPrincipalAuthDialog: false,
+      selectDetail: {
+        resourceName: "",
+        resourceType: "",
+        username: "",
+      },
+      loading: false,
+      hint: "",
+    };
+  },
+  methods: {
+    handleSearch(e) {
+      e.preventDefault();
+      this.form.validateFields((error, values) => {
+        let queryParam = {};
+        queryParam.username = values.username ? values.username : null;
+        // 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;
+        }
+        Object.assign(this.queryParam, queryParam);
+        this.getAclList();
+      });
+    },
+
+    handleReset() {
+      this.form.resetFields();
+    },
+    onClearUserAcl(row) {
+      this.loading = true;
+      request({
+        url: KafkaAclApi.clearAcl.url,
+        method: KafkaAclApi.clearAcl.method,
+        data: { username: row.username },
+      }).then((res) => {
+        this.loading = false;
+        this.getAclList();
+        if (res.code == 0) {
+          this.$message.success(res.msg);
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+    onManageProducerAuth(row) {
+      this.openManageProducerAuthDialog = true;
+      const rowData = {};
+      Object.assign(rowData, row);
+      this.selectRow = rowData;
+    },
+    onManageConsumerAuth(row) {
+      this.openManageConsumerAuthDialog = true;
+      const rowData = {};
+      Object.assign(rowData, row);
+      this.selectRow = rowData;
+    },
+    onAddAuth(row) {
+      this.openAddAuthDialog = true;
+      const rowData = {};
+      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;
+    },
+    onAddPrincipalAuth() {
+      this.openAddPrincipalAuthDialog = true;
+    },
+    closeManageProducerAuthDialog() {
+      this.openManageProducerAuthDialog = false;
+      this.getAclList();
+    },
+    closeManageConsumerAuthDialog() {
+      this.openManageConsumerAuthDialog = false;
+      this.getAclList();
+    },
+    closeAddAuthDialog(p) {
+      this.openAddAuthDialog = false;
+      if (p.refresh) {
+        this.getAclList();
+      }
+    },
+    closeAddPrincipalAuthDialog(p) {
+      this.openAddPrincipalAuthDialog = false;
+      if (p.refresh) {
+        this.getAclList();
+      }
+    },
+    closeAclDetailDialog(p) {
+      this.openAclDetailDialog = false;
+      if (p.refresh) {
+        this.getAclList();
+      }
+    },
+    getAclList() {
+      this.loading = true;
+      request({
+        url: KafkaAclApi.getAclList.url,
+        method: KafkaAclApi.getAclList.method,
+        data: this.queryParam,
+      }).then((response) => {
+        this.loading = false;
+        this.data.splice(0, this.data.length);
+        if (response.code != 0) {
+          notification.error({
+            message: response.msg,
+          });
+          return;
+        }
+        if (!response.data.total && response.data.hint) {
+          this.hint = response.data.hint;
+          return;
+        }
+        this.hint = "";
+        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]);
+          this.data.push({
+            key: k,
+            username: k,
+            topicList: topicList,
+            groupList: groupList,
+            user: response.data.map[k]["USER"],
+          });
+          this.data.sort((a, b) => a.username.localeCompare(b.username));
+        }
+      });
+    },
+  },
+  created() {
+    this.getAclList();
+  },
+};
+
+// function getAclList(data, requestParameters) {
+//   request({
+//     url: KafkaAclApi.getAclList.url,
+//     method: KafkaAclApi.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,
+//         groupList: groupList,
+//         user: response.data.map[k]["USER"],
+//       });
+//       data.sort((a, b) => a.username.localeCompare(b.username));
+//     }
+//   });
+// }
+
+const columns = [
+  {
+    title: "主体标识",
+    dataIndex: "username", //历史原因使用变量username
+    key: "username",
+    width: 300,
+    slots: { title: "username" },
+    scopedSlots: { customRender: "username" },
+  },
+  {
+    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",
+    scopedSlots: { customRender: "operation" },
+    width: 500,
+  },
+];
+</script>
+
+<style scoped>
+.acl {
+  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-acl-advanced-search .ant-form {
+  max-width: none;
+  margin-bottom: 1%;
+}
+
+#components-form-acl-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;
+}
+
+.operation-row-button {
+  height: 4%;
+  text-align: left;
+  margin-bottom: 8px;
+}
+
+.operation-btn {
+  margin-right: 3%;
+}
+
+.hint {
+  margin-left: 1%;
+  color: red;
+}
+</style>

ui/src/views/acl/AddPrincipalAuth.vue

@@ -0,0 +1,154 @@
+<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',
+            { rules: [{ required: true, message: '请输入!' }] },
+          ]"
+        />
+      </a-form-item>
+      <a-form-item label="资源类型">
+        <a-radio-group
+          v-decorator="['resourceType', { initialValue: 'TOPIC' }]"
+        >
+          <a-radio value="TOPIC"> topic</a-radio>
+          <a-radio value="GROUP"> 消费组</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="资源名称">
+        <a-input
+          v-decorator="[
+            'resourceName',
+            { rules: [{ required: true, message: '请输入!' }] },
+          ]"
+          placeholder="请输入topic或消费组名称"
+        />
+      </a-form-item>
+      <a-form-item label="主机">
+        <a-input
+          v-decorator="[
+            'host',
+            {
+              rules: [{ required: true, message: '请输入!' }],
+              initialValue: '*',
+            },
+          ]"
+          placeholder="请输入主机地址，比如：*，全部匹配"
+        />
+      </a-form-item>
+      <a-form-item label="操作类型" has-feedback>
+        <a-select
+          v-decorator="[
+            'operation',
+            { rules: [{ required: true, message: '请选择!' }] },
+          ]"
+          placeholder="请选择!"
+        >
+          <a-select-option v-for="i in operations" :key="i">
+            {{ i }}</a-select-option
+          >
+        </a-select>
+      </a-form-item>
+      <a-form-item label="权限类型">
+        <a-radio-group
+          v-decorator="['permissionType', { initialValue: 'ALLOW' }]"
+        >
+          <a-radio value="ALLOW"> 允许</a-radio>
+          <a-radio value="DENY"> 拒绝</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: "AddPrincipalAuth",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      formLayout: "horizontal",
+      form: this.$form.createForm(this, { name: "AddPrincipalAuthForm" }),
+      confirmLoading: false,
+      show: this.visible,
+      operations: operationList,
+    };
+  },
+  watch: {
+    visible(v) {
+      if (this.show != v) {
+        this.show = v;
+        if (this.show) {
+          this.getOperationList();
+        }
+      }
+    },
+  },
+  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("closeAddPrincipalAuthDialog", { refresh: true });
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
+      });
+    },
+    handleCancel() {
+      this.$emit("closeAddPrincipalAuthDialog", { refresh: false });
+    },
+    getOperationList() {
+      request({
+        url: KafkaAclApi.getOperationList.url,
+        method: KafkaAclApi.getOperationList.method,
+      }).then((res) => {
+        if (res.code != 0) {
+          this.$message.error(res.msg);
+        } else {
+          operationList.splice(0, operationList.length);
+          operationList.push(...res.data);
+        }
+      });
+    },
+  },
+};
+const operationList = [];
+</script>
+
+<style scoped></style>

ui/src/views/acl/SaslScram.vue

@@ -0,0 +1,411 @@
+<template>
+  <a-spin :spinning="loading">
+    <div class="acl">
+      <div id="components-form-acl-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="12" :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>
+      <div class="operation-row-button">
+        <a-button type="primary" @click="updateUser">新增/更新用户</a-button>
+        <span class="hint" v-show="!enableSasl"
+          >未启用SASL SCRAM认证，不支持相关操作</span
+        >
+        <UpdateUser
+          :visible="showUpdateUser"
+          @updateUserDialogData="closeUpdateUserDialog"
+        ></UpdateUser>
+      </div>
+      <a-table :columns="columns" :data-source="data" bordered>
+        <div slot="username" slot-scope="username">
+          <span>{{ username }}</span
+          ><a-button
+            size="small"
+            shape="round"
+            type="dashed"
+            style="float: right"
+            @click="onUserDetail(username)"
+            >详情</a-button
+          >
+        </div>
+        <div
+          slot="operation"
+          slot-scope="record"
+          v-show="!record.user || record.user.role != 'admin'"
+        >
+          <a-popconfirm
+            :title="'删除用户: ' + record.username + '？'"
+            ok-text="确认"
+            cancel-text="取消"
+            @confirm="onDeleteUser(record)"
+          >
+            <a-button size="small" href="javascript:;" class="operation-btn"
+              >删除</a-button
+            >
+          </a-popconfirm>
+          <a-button
+            size="small"
+            href="javascript:;"
+            class="operation-btn"
+            @click="onManageProducerAuth(record)"
+            >管理生产权限
+          </a-button>
+
+          <a-button
+            size="small"
+            href="javascript:;"
+            class="operation-btn"
+            @click="onManageConsumerAuth(record)"
+            >管理消费权限
+          </a-button>
+          <a-button
+            size="small"
+            href="javascript:;"
+            class="operation-btn"
+            @click="onAddAuth(record)"
+            >增加权限
+          </a-button>
+          <a-popconfirm
+            :title="'删除用户: ' + record.username + '及相关权限？'"
+            ok-text="确认"
+            cancel-text="取消"
+            @confirm="onDeleteUserAndAuth(record)"
+          >
+            <a-button size="small" href="javascript:;" class="operation-btn"
+              >彻底删除</a-button
+            >
+          </a-popconfirm>
+        </div>
+      </a-table>
+      <UserDetail
+        :visible="openUserDetailDialog"
+        :username="selectDetail.username"
+        @userDetailDialog="closeUserDetailDialog"
+      ></UserDetail>
+      <AclDetail
+        :visible="openAclDetailDialog"
+        :selectDetail="selectDetail"
+        @aclDetailDialog="closeAclDetailDialog"
+      ></AclDetail>
+      <ManageProducerAuth
+        :visible="openManageProducerAuthDialog"
+        :record="selectRow"
+        @manageProducerAuthDialog="closeManageProducerAuthDialog"
+      ></ManageProducerAuth>
+      <ManageConsumerAuth
+        :visible="openManageConsumerAuthDialog"
+        :record="selectRow"
+        @manageConsumerAuthDialog="closeManageConsumerAuthDialog"
+      ></ManageConsumerAuth>
+      <AddAuth
+        :visible="openAddAuthDialog"
+        :record="selectRow"
+        @addAuthDialog="closeAddAuthDialog"
+      ></AddAuth>
+    </div>
+  </a-spin>
+</template>
+
+<script>
+import request from "@/utils/request";
+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";
+import AddAuth from "@/views/acl/AddAuth";
+import AclDetail from "@/views/acl/AclDetail";
+import UserDetail from "@/views/acl/UserDetail";
+import { mapState } from "vuex";
+
+export default {
+  name: "SaslScram",
+  components: {
+    UpdateUser,
+    ManageProducerAuth,
+    ManageConsumerAuth,
+    AddAuth,
+    AclDetail,
+    UserDetail,
+  },
+  data() {
+    return {
+      queryParam: {},
+      data: [],
+      columns,
+      selectRow: {},
+      form: this.$form.createForm(this, { name: "advanced_search" }),
+      showUpdateUser: false,
+      deleteUserConfirm: false,
+      openManageProducerAuthDialog: false,
+      openManageConsumerAuthDialog: false,
+      openAddAuthDialog: false,
+      openAclDetailDialog: false,
+      openUserDetailDialog: false,
+      selectDetail: {
+        resourceName: "",
+        resourceType: "",
+        username: "",
+      },
+      loading: false,
+    };
+  },
+  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;
+        }
+        this.queryParam = {};
+        Object.assign(this.queryParam, queryParam);
+        this.getSaslScramUserList();
+      });
+    },
+
+    handleReset() {
+      this.form.resetFields();
+    },
+
+    updateUser() {
+      this.showUpdateUser = true;
+    },
+    closeUpdateUserDialog(data) {
+      this.showUpdateUser = data.show;
+      if (data.ok) {
+        this.getSaslScramUserList();
+      }
+    },
+    onDeleteUser(row) {
+      this.loading = true;
+      request({
+        url: KafkaAclApi.deleteSaslScramUser.url,
+        method: KafkaAclApi.deleteSaslScramUser.method,
+        data: { username: row.username },
+      }).then((res) => {
+        this.loading = false;
+        this.getSaslScramUserList();
+        if (res.code == 0) {
+          this.$message.success(res.msg);
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+    onDeleteUserAndAuth(row) {
+      this.loading = true;
+      request({
+        url: KafkaAclApi.deleteKafkaUser.url,
+        method: KafkaAclApi.deleteKafkaUser.method,
+        data: { username: row.username },
+      }).then((res) => {
+        this.loading = false;
+        this.getSaslScramUserList();
+        if (res.code == 0) {
+          this.$message.success(res.msg);
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+    },
+    onManageProducerAuth(row) {
+      this.openManageProducerAuthDialog = true;
+      const rowData = {};
+      Object.assign(rowData, row);
+      this.selectRow = rowData;
+    },
+    onManageConsumerAuth(row) {
+      this.openManageConsumerAuthDialog = true;
+      const rowData = {};
+      Object.assign(rowData, row);
+      this.selectRow = rowData;
+    },
+    onAddAuth(row) {
+      this.openAddAuthDialog = true;
+      const rowData = {};
+      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;
+    },
+    onUserDetail(username) {
+      this.selectDetail.username = username;
+      this.openUserDetailDialog = true;
+    },
+    closeManageProducerAuthDialog() {
+      this.openManageProducerAuthDialog = false;
+    },
+    closeManageConsumerAuthDialog() {
+      this.openManageConsumerAuthDialog = false;
+    },
+    closeAddAuthDialog() {
+      this.openAddAuthDialog = false;
+    },
+    closeAclDetailDialog(p) {
+      this.openAclDetailDialog = false;
+      if (p.refresh) {
+        this.getSaslScramUserList();
+      }
+    },
+    closeUserDetailDialog() {
+      this.openUserDetailDialog = false;
+    },
+    getSaslScramUserList() {
+      if (!this.enableSasl) {
+        return;
+      }
+      this.loading = true;
+      request({
+        url: KafkaAclApi.getSaslScramUserList.url,
+        method: KafkaAclApi.getSaslScramUserList.method,
+        params: this.queryParam,
+      }).then((response) => {
+        this.loading = false;
+        this.data.splice(0, this.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]);
+          this.data.push({
+            key: k,
+            username: k,
+            topicList: topicList,
+            groupList: groupList,
+            user: response.data.map[k]["USER"],
+          });
+          this.data.sort((a, b) => a.username.localeCompare(b.username));
+        }
+      });
+    },
+  },
+  created() {
+    this.getSaslScramUserList();
+  },
+  computed: {
+    ...mapState({
+      enableSasl: (state) => state.clusterInfo.enableSasl,
+    }),
+  },
+};
+
+const columns = [
+  {
+    title: "用户名",
+    dataIndex: "username",
+    key: "username",
+    width: 300,
+    slots: { title: "username" },
+    scopedSlots: { customRender: "username" },
+  },
+  {
+    title: "操作",
+    key: "operation",
+    scopedSlots: { customRender: "operation" },
+    width: 500,
+  },
+];
+</script>
+
+<style scoped>
+.acl {
+  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-acl-advanced-search .ant-form {
+  max-width: none;
+  margin-bottom: 1%;
+}
+
+#components-form-acl-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;
+}
+
+.operation-row-button {
+  height: 4%;
+  text-align: left;
+  margin-bottom: 8px;
+}
+
+.operation-btn {
+  margin-right: 3%;
+}
+
+.hint {
+  margin-left: 1%;
+  color: red;
+}
+</style>

ui/src/views/group/ConsumerDetail.vue

@@ -272,6 +272,7 @@ const columns = [
     dataIndex: "clientId",
     key: "clientId",
     scopedSlots: { customRender: "clientId" },
+    width: 400,
   },
   {
     title: "日志位点",

ui/src/views/group/Member.vue

@@ -2,7 +2,7 @@
   <a-modal
     title="消费端成员"
     :visible="show"
-    :width="1500"
+    :width="1300"
     :mask="false"
     :destroyOnClose="true"
     :footer="null"
@@ -96,16 +96,19 @@ const columns = [
     title: "成员ID",
     dataIndex: "memberId",
     key: "memberId",
+    width: 300,
   },
   {
     title: "客户端ID",
     dataIndex: "clientId",
     key: "clientId",
+    width: 300,
   },
   {
     title: "实例ID",
     dataIndex: "groupInstanceId",
     key: "groupInstanceId",
+    width: 150,
   },
   {
     title: "主机",
@@ -117,6 +120,7 @@ const columns = [
     dataIndex: "partitions",
     key: "partitions",
     scopedSlots: { customRender: "partitions" },
+    width: 300,
   },
 ];
 </script>

ui/src/views/home/VersionInfo.vue

@@ -0,0 +1,61 @@
+<template>
+  <a-modal
+    title="API版本信息"
+    :visible="show"
+    :width="600"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      <h3>格式说明</h3>
+      <p>请求类型(1)：0 to n(2) [usage: v](3)</p>
+      <ol>
+        <li>表示客户端发出的请求类型</li>
+        <li>该请求在broker中支持的版本号区间</li>
+        <li>
+          表示当前控制台的kafka客户端使用的是v版本，如果是UNSUPPORTED，说明broker版本太老，无法处理控制台的这些请求，可能影响相关功能的使用
+        </li>
+      </ol>
+
+      <hr />
+      <ol>
+        <li v-for="info in versionInfo" v-bind:key="info">{{ info }}</li>
+      </ol>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: "APIVersionInfo",
+  props: {
+    versionInfo: {
+      type: Array,
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+    },
+  },
+  methods: {
+    handleCancel() {
+      this.$emit("closeApiVersionInfoDialog", {});
+    },
+  },
+};
+</script>
+
+<style scoped></style>

ui/src/views/message/DeleteMessage.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="tab-content">
+    <a-spin :spinning="loading">
+      <div>
+        <h4 class="hint-content">
+          注意：以下删除，将删除该分区比该偏移位点小的所有消息（不包含该位点）
+        </h4>
+        <hr />
+      </div>
+      <div id="search-offset-form-advanced-search">
+        <a-form
+          class="ant-advanced-search-form"
+          :form="form"
+          @submit="handleSearch"
+        >
+          <a-row :gutter="24">
+            <a-col :span="9">
+              <a-form-item label="topic">
+                <a-select
+                  class="topic-select"
+                  @change="handleTopicChange"
+                  show-search
+                  option-filter-prop="children"
+                  v-decorator="[
+                    'topic',
+                    {
+                      rules: [{ required: true, message: '请选择一个topic!' }],
+                    },
+                  ]"
+                  placeholder="请选择一个topic"
+                >
+                  <a-select-option v-for="v in topicList" :key="v" :value="v">
+                    {{ v }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-item label="分区">
+                <a-select
+                  class="type-select"
+                  show-search
+                  option-filter-prop="children"
+                  v-model="selectPartition"
+                  placeholder="请选择一个分区"
+                >
+                  <a-select-option v-for="v in partitions" :key="v" :value="v">
+                    <span v-if="v == -1">全部</span> <span v-else>{{ v }}</span>
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="7">
+              <a-form-item label="偏移">
+                <a-input
+                  v-decorator="[
+                    'offset',
+                    {
+                      rules: [{ required: true, message: '请输入消息偏移!' }],
+                    },
+                  ]"
+                  placeholder="消息偏移"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="2" :style="{ textAlign: 'right' }">
+              <a-form-item>
+                <a-button type="primary" html-type="submit"> 执行删除</a-button>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaMessageApi, KafkaTopicApi } from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
+
+export default {
+  name: "DeleteMessage",
+  props: {
+    topicList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      form: this.$form.createForm(this, { name: "message_search_offset" }),
+      partitions: [],
+      selectPartition: undefined,
+    };
+  },
+  methods: {
+    handleSearch(e) {
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          const data = Object.assign({}, values, {
+            partition: this.selectPartition,
+          });
+          this.loading = true;
+          request({
+            url: KafkaMessageApi.delete.url,
+            method: KafkaMessageApi.delete.method,
+            data: [data],
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.$message.success(res.msg);
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    getPartitionInfo(topic) {
+      this.loading = true;
+      request({
+        url: KafkaTopicApi.getPartitionInfo.url + "?topic=" + topic,
+        method: KafkaTopicApi.getPartitionInfo.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.partitions = res.data.map((v) => v.partition);
+        }
+      });
+    },
+    handleTopicChange(topic) {
+      this.selectPartition =
+        this.partitions.length > 0 ? this.partitions[0] : 0;
+      this.getPartitionInfo(topic);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.tab-content {
+  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-topic-advanced-search .ant-form {
+  max-width: none;
+  margin-bottom: 1%;
+}
+
+#search-offset-form-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;
+}
+.topic-select {
+  width: 400px !important;
+}
+.type-select {
+  width: 200px !important;
+}
+
+.hint-content {
+  color: red;
+}
+</style>

ui/src/views/message/Message.vue

@@ -11,6 +11,9 @@
         <a-tab-pane key="3" tab="在线发送">
           <SendMessage :topic-list="topicList"></SendMessage>
         </a-tab-pane>
+        <a-tab-pane key="4" tab="在线删除">
+          <DeleteMessage :topic-list="topicList"></DeleteMessage>
+        </a-tab-pane>
       </a-tabs>
     </a-spin>
   </div>
@@ -23,9 +26,10 @@ import request from "@/utils/request";
 import { KafkaTopicApi } from "@/utils/api";
 import notification from "ant-design-vue/lib/notification";
 import SendMessage from "@/views/message/SendMessage";
+import DeleteMessage from "./DeleteMessage";
 export default {
   name: "Message",
-  components: { SearchByTime, SearchByOffset, SendMessage },
+  components: { DeleteMessage, SearchByTime, SearchByOffset, SendMessage },
   data() {
     return {
       loading: false,

ui/src/views/message/MessageDetail.vue

@@ -203,7 +203,7 @@ export default {
       this.$emit("closeDetailDialog", { refresh: false });
     },
     formatTime(time) {
-      return moment(time).format("YYYY-MM-DD HH:mm:ss:SSS");
+      return time == -1 ? -1 : moment(time).format("YYYY-MM-DD HH:mm:ss:SSS");
     },
     keyDeserializerChange() {
       this.getMessageDetail();

ui/src/views/message/MessageList.vue

@@ -9,6 +9,7 @@
           return index;
         }
       "
+      @change="handleChange"
     >
       <div slot="operation" slot-scope="record">
         <a-button
@@ -41,9 +42,9 @@ export default {
   },
   data() {
     return {
-      columns: columns,
       showDetailDialog: false,
       record: {},
+      sortedInfo: null,
     };
   },
   methods: {
@@ -54,42 +55,56 @@ export default {
     closeDetailDialog() {
       this.showDetailDialog = false;
     },
-  },
-};
-const columns = [
-  {
-    title: "topic",
-    dataIndex: "topic",
-    key: "topic",
-    width: 300,
-  },
-  {
-    title: "分区",
-    dataIndex: "partition",
-    key: "partition",
-  },
-  {
-    title: "偏移",
-    dataIndex: "offset",
-    key: "offset",
-  },
-  {
-    title: "时间",
-    dataIndex: "timestamp",
-    key: "timestamp",
-    slots: { title: "timestamp" },
-    scopedSlots: { customRender: "timestamp" },
-    customRender: (text) => {
-      return moment(text).format("YYYY-MM-DD HH:mm:ss:SSS");
+    handleChange() {
+      this.sortedInfo = arguments[2];
     },
   },
-  {
-    title: "操作",
-    key: "operation",
-    scopedSlots: { customRender: "operation" },
-    width: 200,
+  computed: {
+    columns() {
+      let sortedInfo = this.sortedInfo || {};
+      const columns = [
+        {
+          title: "topic",
+          dataIndex: "topic",
+          key: "topic",
+          width: 300,
+        },
+        {
+          title: "分区",
+          dataIndex: "partition",
+          key: "partition",
+        },
+        {
+          title: "偏移",
+          dataIndex: "offset",
+          key: "offset",
+        },
+        {
+          title: "时间",
+          dataIndex: "timestamp",
+          key: "timestamp",
+          slots: { title: "timestamp" },
+          scopedSlots: { customRender: "timestamp" },
+          customRender: (text) => {
+            return text == -1
+              ? -1
+              : moment(text).format("YYYY-MM-DD HH:mm:ss:SSS");
+          },
+          sorter: (a, b) => a.timestamp - b.timestamp,
+          sortOrder: sortedInfo.columnKey === "timestamp" && sortedInfo.order,
+          sortDirections: ["ascend", "descend"],
+        },
+        {
+          title: "操作",
+          key: "operation",
+          scopedSlots: { customRender: "operation" },
+          width: 200,
+        },
+      ];
+      return columns;
+    },
   },
-];
+};
 </script>
 
 <style scoped></style>

ui/src/views/op/AddClusterInfo.vue

@@ -69,6 +69,9 @@ sasl.jaas.config=org.apache.kafka.common.security.scram.ScramLoginModule require
 import request from "@/utils/request";
 import { KafkaClusterApi } from "@/utils/api";
 import notification from "ant-design-vue/es/notification";
+import { getClusterInfo } from "@/utils/local-cache";
+import { mapMutations } from "vuex";
+import { CLUSTER } from "@/store/mutation-types";
 
 export default {
   name: "AddClusterInfo",
@@ -124,6 +127,17 @@ export default {
             if (res.code == 0) {
               this.$message.success(res.msg);
               this.$emit(this.closeDialogEvent, { refresh: true });
+              if (this.isModify) {
+                let clusterInfo = getClusterInfo();
+                if (
+                  clusterInfo &&
+                  clusterInfo.id &&
+                  clusterInfo.id == this.clusterInfo.id
+                ) {
+                  //  &&clusterInfo.clusterName != data.clusterName
+                  this.switchCluster(data);
+                }
+              }
             } else {
               notification.error({
                 message: "error",
@@ -138,6 +152,9 @@ export default {
       this.data = [];
       this.$emit(this.closeDialogEvent, { refresh: false });
     },
+    ...mapMutations({
+      switchCluster: CLUSTER.SWITCH,
+    }),
   },
 };
 const defaultInfo = { clusterName: "", address: "", properties: "" };

ui/src/views/op/Operation.vue

@@ -49,6 +49,15 @@
           <label>说明：</label>
           <span>查看正在进行副本变更/重分配的任务，或者将其取消</span>
         </p>
+        <p>
+          <a-button type="primary" @click="openReplicaReassignDialog">
+            副本重分配
+          </a-button>
+          <label>说明：</label>
+          <span
+            >副本所在节点重新分配，打个比方，集群有6个节点，分区1的3个副本在节点1、2、3上，现在将它们重新分配到3、4、5上</span
+          >
+        </p>
       </a-card>
     </div>
     <!--    隐藏数据同步相关-->
@@ -125,6 +134,11 @@
       :visible="clusterManager.showClusterInfoDialog"
       @closeClusterInfoDialog="closeClusterInfoDialog"
     ></ClusterInfo>
+    <ReplicaReassign
+      :visible="replicationManager.showReplicaReassignDialog"
+      @closeReplicaReassignDialog="closeReplicaReassignDialog"
+    >
+    </ReplicaReassign>
   </div>
 </template>
 
@@ -138,6 +152,7 @@ import ConfigThrottle from "@/views/op/ConfigThrottle";
 import RemoveThrottle from "@/views/op/RemoveThrottle";
 import CurrentReassignments from "@/views/op/CurrentReassignments";
 import ClusterInfo from "@/views/op/ClusterInfo";
+import ReplicaReassign from "@/views/op/ReplicaReassign";
 export default {
   name: "Operation",
   components: {
@@ -150,6 +165,7 @@ export default {
     RemoveThrottle,
     CurrentReassignments,
     ClusterInfo,
+    ReplicaReassign,
   },
   data() {
     return {
@@ -162,6 +178,7 @@ export default {
       replicationManager: {
         showElectPreferredLeaderDialog: false,
         showCurrentReassignmentsDialog: false,
+        showReplicaReassignDialog: false,
       },
       brokerManager: {
         showConfigThrottleDialog: false,
@@ -227,6 +244,12 @@ export default {
     closeClusterInfoDialog() {
       this.clusterManager.showClusterInfoDialog = false;
     },
+    openReplicaReassignDialog() {
+      this.replicationManager.showReplicaReassignDialog = true;
+    },
+    closeReplicaReassignDialog() {
+      this.replicationManager.showReplicaReassignDialog = false;
+    },
   },
 };
 </script>

ui/src/views/op/ReplicaReassign.vue

@@ -0,0 +1,296 @@
+<template>
+  <a-modal
+    title="副本重分配"
+    :visible="show"
+    :width="800"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      <a-spin :spinning="loading">
+        <a-form
+          :form="form"
+          :label-col="{ span: 5 }"
+          :wrapper-col="{ span: 12 }"
+          @submit="handleSubmit"
+        >
+          <a-form-item label="Topic">
+            <a-select
+              @change="handleTopicChange"
+              show-search
+              option-filter-prop="children"
+              v-decorator="[
+                'topic',
+                { rules: [{ required: true, message: '请选择一个topic!' }] },
+              ]"
+              placeholder="请选择一个topic"
+            >
+              <a-select-option v-for="v in topicList" :key="v" :value="v">
+                {{ v }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="分配到Broker">
+            <a-select
+              mode="multiple"
+              option-filter-prop="children"
+              v-decorator="[
+                'brokers',
+                {
+                  initialValue: brokers,
+                  rules: [{ required: true, message: '请选择一个broker!' }],
+                },
+              ]"
+              placeholder="请选择一个broker"
+            >
+              <a-select-option v-for="v in brokers" :key="v" :value="v">
+                <span v-if="v == -1">全部</span> <span v-else>{{ v }}</span>
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-table
+            bordered
+            :columns="columns"
+            :data-source="currentAssignment"
+            :rowKey="
+              (record, index) => {
+                return index;
+              }
+            "
+          >
+          </a-table>
+          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+            <a-button type="primary" html-type="submit">
+              重新生成分配计划
+            </a-button>
+          </a-form-item>
+        </a-form>
+        <hr />
+        <h2>新的分配计划</h2>
+        <a-table
+          bordered
+          :columns="columns"
+          :data-source="proposedAssignmentShow"
+          :rowKey="
+            (record, index) => {
+              return index;
+            }
+          "
+        >
+        </a-table>
+        <a-button type="danger" @click="updateAssignment"> 更新分配 </a-button>
+      </a-spin>
+      <hr />
+      <h4>注意</h4>
+      <ul>
+        <li>
+          副本重分配，可以将副本分配到其它broker上，通过选择上面的broker节点，根据这几个节点生成分配方案
+        </li>
+        <li>
+          选择的broker的节点数量不能少于当前的副本数，比如有3个副本，至少需要3个broker节点
+        </li>
+        <li>
+          数据量太大，考虑设置一下限流，毕竟重新分配后，不同broker之间可能做数据迁移
+        </li>
+      </ul>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaTopicApi, KafkaOpApi, KafkaClusterApi } from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+export default {
+  name: "ReplicaReassign",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: this.visible,
+      data: [],
+      loading: false,
+      form: this.$form.createForm(this, { name: "ReplicaReassignForm" }),
+      topicList: [],
+      partitions: [],
+      brokers: [],
+      currentAssignment: [],
+      proposedAssignment: [],
+      proposedAssignmentShow: [],
+      columns,
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.clearData();
+        this.getTopicNameList();
+        this.getClusterInfo();
+      }
+    },
+  },
+  methods: {
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.getProposedAssignment(values);
+        }
+      });
+    },
+    getTopicReplicaInfo(topic) {
+      this.loading = true;
+      request({
+        url: KafkaTopicApi.getCurrentReplicaAssignment.url + "?topic=" + topic,
+        method: KafkaTopicApi.getCurrentReplicaAssignment.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.currentAssignment = res.data.partitions;
+          this.currentAssignment.forEach(
+            (e) => (e.replicas = e.replicas.join(","))
+          );
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+    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,
+          });
+        }
+      });
+    },
+    getPartitionInfo(topic) {
+      this.loading = true;
+      request({
+        url: KafkaTopicApi.getPartitionInfo.url + "?topic=" + topic,
+        method: KafkaTopicApi.getPartitionInfo.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.partitions = res.data.map((v) => v.partition);
+          this.partitions.splice(0, 0, -1);
+        }
+      });
+    },
+    handleTopicChange(topic) {
+      // this.getPartitionInfo(topic);
+      this.clearData();
+      this.getTopicReplicaInfo(topic);
+    },
+    getClusterInfo() {
+      this.loading = true;
+      request({
+        url: KafkaClusterApi.getClusterInfo.url,
+        method: KafkaClusterApi.getClusterInfo.method,
+      }).then((res) => {
+        this.loading = false;
+        this.brokers = [];
+        res.data.nodes.forEach((node) => this.brokers.push(node.id));
+      });
+    },
+    getProposedAssignment(params) {
+      this.loading = true;
+      request({
+        url: KafkaOpApi.proposedAssignment.url,
+        method: KafkaOpApi.proposedAssignment.method,
+        data: params,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.proposedAssignmentShow = res.data;
+          this.proposedAssignment = JSON.parse(
+            JSON.stringify(this.proposedAssignmentShow)
+          );
+          this.proposedAssignmentShow.forEach(
+            (e) => (e.replicas = e.replicas.join(","))
+          );
+        }
+      });
+    },
+    clearData() {
+      this.currentAssignment = [];
+      this.proposedAssignment = [];
+      this.proposedAssignmentShow = [];
+    },
+    handleCancel() {
+      this.data = [];
+      this.$emit("closeReplicaReassignDialog", { refresh: false });
+    },
+    updateAssignment() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          if (this.proposedAssignment.length == 0) {
+            this.$message.warn("请先生成分配计划！");
+            return;
+          }
+          this.loading = true;
+          request({
+            url: KafkaTopicApi.updateReplicaAssignment.url,
+            method: KafkaTopicApi.updateReplicaAssignment.method,
+            data: { partitions: this.proposedAssignment },
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.$message.success(res.msg);
+              this.handleTopicChange(values.topic);
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+  },
+};
+
+const columns = [
+  {
+    title: "分区",
+    dataIndex: "partition",
+    key: "partition",
+  },
+  {
+    title: "副本所在broker",
+    dataIndex: "replicas",
+    key: "replicas",
+    scopedSlots: { customRender: "replicas" },
+  },
+];
+</script>
+
+<style scoped></style>

ui/src/views/quota/AddQuotaConfig.vue

@@ -0,0 +1,207 @@
+<script src="../../store/index.js"></script>
+<template>
+  <a-modal
+      title="新增配置"
+      :visible="show"
+      :width="800"
+      :mask="false"
+      :destroyOnClose="true"
+      :footer="null"
+      :maskClosable="false"
+      @cancel="handleCancel"
+  >
+    <div>
+      <a-spin :spinning="loading">
+        <a-form
+            :form="form"
+            :label-col="{ span: 5 }"
+            :wrapper-col="{ span: 12 }"
+            @submit="handleSubmit"
+        >
+          <a-form-item label="用户" v-show="showUser">
+            <a-input
+                v-decorator="[
+                'user',
+              ]"
+                placeholder="输入用户主体标识，比如：用户名，未指定表示用户默认设置"
+            />
+          </a-form-item>
+          <a-form-item label="客户端ID" v-show="showClientId">
+            <a-input
+                v-decorator="[
+                'client',
+              ]"
+                placeholder="输入用户客户端ID，未指定表示默认客户端设置"
+            />
+          </a-form-item>
+          <a-form-item label="IP" v-show="showIP">
+            <a-input
+                v-decorator="[
+                'ip',
+              ]"
+                placeholder="输入客户端IP"
+            />
+          </a-form-item>
+          <a-form-item label="生产速率">
+            <a-input-number
+                :min="1"
+                :max="102400000"
+                v-decorator="[
+                'producerRate',
+              ]"
+            />
+            <a-select default-value="MB" v-model="producerRateUnit" style="width: 100px">
+              <a-select-option value="MB"> MB/s</a-select-option>
+              <a-select-option value="KB"> KB/s</a-select-option>
+              <a-select-option value="Byte"> Byte/s</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="消费速率">
+            <a-input-number
+                :min="1"
+                :max="102400000"
+                v-decorator="[
+                'consumerRate',
+              ]"
+            />
+            <a-select default-value="MB" v-model="consumerRateUnit" style="width: 100px">
+              <a-select-option value="MB"> MB/s</a-select-option>
+              <a-select-option value="KB"> KB/s</a-select-option>
+              <a-select-option value="Byte"> Byte/s</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="吞吐量">
+            <a-input-number
+                :min="1"
+                :max="102400000"
+                v-decorator="[
+                'requestPercentage',
+              ]"
+            />
+          </a-form-item>
+          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+            <a-button type="primary" html-type="submit"> 提交</a-button>
+          </a-form-item>
+        </a-form>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import {KafkaClientQuotaApi} from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+
+export default {
+  name: "AddQuotaConfig",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: "",
+    },
+    showClientId: {
+      type: Boolean,
+      default: false,
+    },
+    showUser: {
+      type: Boolean,
+      default: false,
+    },
+    showIP: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: this.visible,
+      data: [],
+      loading: false,
+      form: this.$form.createForm(this, {name: "coordinated"}),
+      producerRateUnit: "MB",
+      consumerRateUnit: "MB",
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+    },
+  },
+  methods: {
+    handleSubmit() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          const params = Object.assign({type: this.type}, values);
+          const unitMap = {MB: 1024 * 1024, KB: 1024, Byte: 1};
+          if (values.consumerRate) {
+            params.consumerRate = params.consumerRate * unitMap[this.consumerRateUnit];
+          }
+          if (values.producerRate) {
+            params.producerRate = params.producerRate * unitMap[this.producerRateUnit];
+          }
+          params.types = [];
+          params.names = [];
+          if (this.showUser) {
+            params.types.push("user");
+            if (params.user) {
+              params.names.push(params.user.trim());
+            } else {
+              params.names.push("");
+            }
+          }
+          if (this.showClientId) {
+            params.types.push("client-id");
+            if (params.client) {
+              params.names.push(params.client.trim());
+            } else {
+              params.names.push("");
+            }
+          }
+          if (this.showIP) {
+            params.types.push("ip");
+            if (params.ip) {
+              params.names.push(params.ip.trim());
+            } else {
+              params.names.push("");
+            }
+          }
+          this.loading = true;
+          request({
+            url: KafkaClientQuotaApi.alterClientQuotaConfigs.url,
+            method: KafkaClientQuotaApi.alterClientQuotaConfigs.method,
+            data: params,
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.$message.success(res.msg);
+              this.$emit("closeAddQuotaDialog", {refresh: true});
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    handleCancel() {
+      this.data = [];
+      this.$emit("closeAddQuotaDialog", {refresh: false});
+      this.producerRateUnit = "MB";
+      this.consumerRateUnit = "MB";
+    },
+    create() {
+      this.producerRateUnit = "MB";
+      this.consumerRateUnit = "MB";
+    },
+  },
+};
+</script>
+
+<style scoped></style>

ui/src/views/quota/ClientIDQuota.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="tab-content">
+    <a-spin :spinning="loading">
+      <div id="search-offset-form-advanced-search">
+        <a-form
+            class="ant-advanced-search-form"
+            :form="form"
+            @submit="handleSearch"
+        >
+          <a-row :gutter="24">
+            <a-col :span="16">
+              <a-form-item label="客户端ID">
+                <a-input
+                    v-decorator="[
+                    'id',
+                  ]"
+                    placeholder="请输入生产者/消费者客户端ID!"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="2" :style="{ textAlign: 'right' }">
+              <a-form-item>
+                <a-button type="primary" html-type="submit"> 搜索</a-button>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <div class="operation-row-button">
+        <a-button type="primary" @click="openAddQuotaDialog"
+        >新增配置
+        </a-button>
+      </div>
+      <QuotaList type="client-id" :columns="columns" :data="data" @refreshQuotaList="refresh"></QuotaList>
+      <AddQuotaConfig type="client-id" :visible="showAddQuotaDialog" :showClientId="true" @closeAddQuotaDialog="closeAddQuotaDialog"></AddQuotaConfig>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+import {KafkaClientQuotaApi} from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
+import QuotaList from "@/views/quota/QuotaList.vue";
+import AddQuotaConfig from "@/views/quota/AddQuotaConfig.vue";
+
+export default {
+  name: "ClientIDQuota",
+  components: {QuotaList, AddQuotaConfig},
+  props: {
+    topicList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      form: this.$form.createForm(this, {name: "client_id_quota"}),
+      data: [],
+      showAlterQuotaDialog: false,
+      showAddQuotaDialog: false,
+      columns: [
+        {
+          title: "客户端ID",
+          dataIndex: "client",
+          key: "client",
+          slots: {title: "client"},
+          scopedSlots: {customRender: "client"},
+        },
+        {
+          title: "生产速率(带宽/秒)",
+          dataIndex: "producerRate",
+          key: "producerRate",
+        },
+        {
+          title: "消费速率(带宽/秒)",
+          dataIndex: "consumerRate",
+          key: "consumerRate",
+        },
+        {
+          title: "吞吐量(请求占比*100)",
+          dataIndex: "requestPercentage",
+          key: "requestPercentage",
+        },
+      ],
+    };
+  },
+  methods: {
+    handleSearch() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.loading = true;
+          const params = {types: ["client-id"]};
+          if (values.id) {
+            params.names = [values.id.trim()];
+          }
+          request({
+            url: KafkaClientQuotaApi.getClientQuotaConfigs.url,
+            method: KafkaClientQuotaApi.getClientQuotaConfigs.method,
+            data: params,
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.data = res.data;
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    openAddQuotaDialog() {
+      this.showAddQuotaDialog = true;
+    },
+    closeAddQuotaDialog(p) {
+      if (p.refresh) {
+        this.handleSearch();
+      }
+      this.showAddQuotaDialog = false;
+    },
+    refresh() {
+      this.handleSearch();
+    },
+  },
+  created() {
+    this.handleSearch();
+  },
+};
+</script>
+
+<style scoped>
+.tab-content {
+  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 input {
+  width: 400px;
+}
+
+.ant-advanced-search-form .ant-form-item-control-wrapper {
+  flex: 1;
+}
+
+#components-form-topic-advanced-search .ant-form {
+  max-width: none;
+  margin-bottom: 1%;
+}
+
+#search-offset-form-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;
+}
+
+.operation-row-button {
+  height: 4%;
+  text-align: left;
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+</style>

ui/src/views/quota/ClientQuota.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="content">
+    <a-spin :spinning="loading">
+      <a-tabs default-active-key="1" size="large" tabPosition="top">
+        <a-tab-pane key="1" tab="使用说明">
+          <ClientQuotaIntroduce></ClientQuotaIntroduce>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="用户">
+          <UserQuota></UserQuota>
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="客户端ID">
+          <ClientIDQuota></ClientIDQuota>
+        </a-tab-pane>
+        <a-tab-pane key="4" tab="用户_客户端ID">
+          <UserAndClientIDQuota></UserAndClientIDQuota>
+        </a-tab-pane>
+        <!--        <a-tab-pane key="5" tab="IP">-->
+        <!--          <IpQuota></IpQuota>-->
+        <!--        </a-tab-pane>-->
+      </a-tabs>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import ClientIDQuota from "@/views/quota/ClientIDQuota.vue";
+import UserQuota from "@/views/quota/UserQuota.vue";
+import UserAndClientIDQuota from "@/views/quota/UserAndClientIDQuota.vue";
+import ClientQuotaIntroduce from "@/views/quota/ClientQuotaIntroduce.vue";
+
+export default {
+  name: "ClientQuota",
+  components: {ClientIDQuota, UserQuota, UserAndClientIDQuota, ClientQuotaIntroduce},
+  data() {
+    return {
+      loading: false,
+    };
+  },
+};
+</script>
+
+<style scoped></style>

ui/src/views/quota/ClientQuotaIntroduce.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="content">
+    <h1>客户端限流说明（资源限额）</h1>
+    <hr/>
+    <hr/>
+    <h2>支持类型</h2>
+    <ul>
+      <li>基于用户主体标识的配置</li>
+      <li>基于客户端ID的配置</li>
+      <li>基于用户主体+客户端ID的配置</li>
+    </ul>
+    <hr/>
+    <h2>默认配置</h2>
+    <p>比如，基于用户的配置，在新增配置的时候未设置用户名称，则默认应用于所有用户</p>
+    <p>基于客户端ID的配置，新增的时候，未指定客户端ID，则应用于所有客户端</p>
+    <hr/>
+    <h2>配置优先级</h2>
+    下面的展示中，数字越小，即越靠上的优先级越高，相同的用户名称或者客户端ID，优先级最高的配置生效，下面的未指定表示 默认配置
+    <ol>
+      <li>[用户+客户端ID] 指定用户名称并且指定客户端ID（优先级最高）</li>
+      <li>[用户+客户端ID] 指定用户名称，未指定客户端ID</li>
+      <li>[用户] 指定用户名称</li>
+      <li>[用户+客户端ID] 未指定用户名称，但指定客户端ID</li>
+      <li>[用户+客户端ID] 未指定用户名称，未指定客户端ID</li>
+      <li>[用户] 未指定用户名称</li>
+      <li>[客户端ID] 指定客户端ID</li>
+      <li>[客户端ID] 未指定客户端ID（优先级最低）</li>
+    </ol>
+    <hr/>
+    <h2>使用注意</h2>
+    大多数集群一般没有开启认证，所以用户配置可能不支持，限流可以使用基于客户端ID的配置。但是对于优先级最低的："[客户端ID]
+    未指定客户端ID"，默认对于所有客户端生效，万一速率配置过小，可能无意间影响生产业务，所以尽量避免默认配置。
+    <hr/>
+    <h2>查询</h2>
+    查询默认配置，在查询项的输入框内，输入一个空格即可。
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "ClientQuotaIntroduce",
+};
+</script>
+
+<style scoped></style>

ui/src/views/quota/IpQuota.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="tab-content">
+    <a-spin :spinning="loading">
+      <div id="search-offset-form-advanced-search">
+        <a-form
+            class="ant-advanced-search-form"
+            :form="form"
+            @submit="handleSearch"
+        >
+          <a-row :gutter="24">
+            <a-col :span="16">
+              <a-form-item label="IP">
+                <a-input
+                    v-decorator="[
+                    'ip',
+                  ]"
+                    placeholder="请输入ip!"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="2" :style="{ textAlign: 'right' }">
+              <a-form-item>
+                <a-button type="primary" html-type="submit"> 搜索</a-button>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <div class="operation-row-button">
+        <a-button type="primary" @click="openAddQuotaDialog"
+        >新增配置
+        </a-button>
+      </div>
+      <QuotaList type="ip" :columns="columns" :data="data" @refreshQuotaList="refresh"></QuotaList>
+      <AddQuotaConfig type="ip" :visible="showAddQuotaDialog" :showIP="true" @closeAddQuotaDialog="closeAddQuotaDialog"></AddQuotaConfig>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+import {KafkaClientQuotaApi} from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
+import QuotaList from "@/views/quota/QuotaList.vue";
+import AddQuotaConfig from "@/views/quota/AddQuotaConfig.vue";
+
+export default {
+  name: "IpQuota",
+  components: {QuotaList, AddQuotaConfig},
+  props: {
+    topicList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      form: this.$form.createForm(this, {name: "ip_quota"}),
+      data: [],
+      showAlterQuotaDialog: false,
+      showAddQuotaDialog: false,
+      columns: [
+        {
+          title: "IP",
+          dataIndex: "ip",
+          key: "ip",
+          slots: {title: "ip"},
+          scopedSlots: {customRender: "ip"},
+        },
+        {
+          title: "生产速率(带宽/秒)",
+          dataIndex: "producerRate",
+          key: "producerRate",
+        },
+        {
+          title: "消费速率(带宽/秒)",
+          dataIndex: "consumerRate",
+          key: "consumerRate",
+        },
+        {
+          title: "吞吐量(请求占比*100)",
+          dataIndex: "requestPercentage",
+          key: "requestPercentage",
+        },
+      ],
+    };
+  },
+  methods: {
+    handleSearch() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.loading = true;
+          const params = {types: ["ip"]};
+          if (values.ip) {
+            params.names = [values.ip.trim()];
+          }
+          request({
+            url: KafkaClientQuotaApi.getClientQuotaConfigs.url,
+            method: KafkaClientQuotaApi.getClientQuotaConfigs.method,
+            data: params,
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.data = res.data;
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    openAddQuotaDialog() {
+      this.showAddQuotaDialog = true;
+    },
+    closeAddQuotaDialog(p) {
+      if (p.refresh) {
+        this.handleSearch();
+      }
+      this.showAddQuotaDialog = false;
+    },
+    refresh() {
+      this.handleSearch();
+    },
+  },
+  created() {
+    this.handleSearch();
+  },
+};
+</script>
+
+<style scoped>
+.tab-content {
+  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 input {
+  width: 400px;
+}
+
+.ant-advanced-search-form .ant-form-item-control-wrapper {
+  flex: 1;
+}
+
+#components-form-topic-advanced-search .ant-form {
+  max-width: none;
+  margin-bottom: 1%;
+}
+
+#search-offset-form-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;
+}
+
+.operation-row-button {
+  height: 4%;
+  text-align: left;
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+</style>

ui/src/views/quota/QuotaList.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <a-spin :spinning="loading">
+      <a-table
+          :columns="columns"
+          :data-source="data"
+          bordered
+          :row-key="
+        (record, index) => {
+          return index;
+        }
+      "
+          @change="handleChange"
+      >
+        <div slot="client" slot-scope="text">
+          <span v-if="text">{{ text }}</span><span v-else style="color: red">默认配置</span>
+        </div>
+        <div slot="user" slot-scope="text">
+          <span v-if="text">{{ text }}</span><span v-else style="color: red">默认配置</span>
+        </div>
+
+        <div slot="operation" slot-scope="record">
+          <a-popconfirm
+              :title="'删除当前配置？'"
+              ok-text="确认"
+              cancel-text="取消"
+              @confirm="deleteConfig(record)"
+          >
+            <a-button size="small" href="javascript:;" class="operation-btn"
+            >删除
+            </a-button>
+          </a-popconfirm>
+          <a-button
+              size="small"
+              href="javascript:;"
+              class="operation-btn"
+              @click="openUpdateDialog(record)"
+          >修改
+          </a-button>
+        </div>
+      </a-table>
+      <UpdateQuotaConfig :type="type" :record="selectRow" :visible="showUpdateDialog"
+                         @closeUpdateQuotaDialog="closeUpdateQuotaDialog"></UpdateQuotaConfig>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import {KafkaClientQuotaApi} from "@/utils/api";
+import request from "@/utils/request";
+import notification from "ant-design-vue/lib/notification";
+import UpdateQuotaConfig from "@/views/quota/UpdateQuotaConfig.vue";
+
+export default {
+  name: "QuotaList",
+  components: {UpdateQuotaConfig},
+  props: {
+    columns: {
+      type: Array,
+    },
+    data: {
+      type: Array,
+    },
+    type: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      record: {},
+      sortedInfo: null,
+      loading: false,
+      selectRow: {},
+      showUpdateDialog: false,
+    };
+  },
+  methods: {
+    openDetailDialog(record) {
+      this.record = record;
+      this.showDetailDialog = true;
+    },
+    closeDetailDialog() {
+      this.showDetailDialog = false;
+    },
+    handleChange() {
+      this.sortedInfo = arguments[2];
+    },
+    deleteConfig(record) {
+      this.loading = true;
+      const params = {type: this.type};
+      params.types = [];
+      params.names = [];
+      if (this.type == "user") {
+        params.types.push("user");
+        if (record.user) {
+          params.names.push(record.user.trim());
+        } else {
+          params.names.push("");
+        }
+      } else if (this.type == "client-id") {
+        params.types.push("client-id");
+        if (record.client) {
+          params.names.push(record.client.trim());
+        } else {
+          params.names.push("");
+        }
+      }
+      if (this.type == "ip") {
+        params.types.push("ip");
+        if (record.ip) {
+          params.names.push(record.ip.trim());
+        } else {
+          params.names.push("");
+        }
+      }
+      if (this.type == "user&client-id") {
+        params.types.push("user");
+        params.types.push("client-id");
+        if (record.user) {
+          params.names.push(record.user.trim());
+        } else {
+          params.names.push("");
+        }
+        if (record.client) {
+          params.names.push(record.client.trim());
+        } else {
+          params.names.push("");
+        }
+      }
+      request({
+        url: KafkaClientQuotaApi.deleteClientQuotaConfigs.url,
+        method: KafkaClientQuotaApi.deleteClientQuotaConfigs.method,
+        data: params,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.$message.success(res.msg);
+          this.$emit("refreshQuotaList");
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+    openUpdateDialog(record) {
+      this.selectRow = record;
+      this.showUpdateDialog = true;
+    },
+    closeUpdateQuotaDialog(event) {
+      this.selectRow = {};
+      this.showUpdateDialog = false;
+      if (event.refresh) {
+        this.$emit("refreshQuotaList");
+      }
+    },
+  },
+  created() {
+    this.columns.push({
+      title: "操作",
+      key: "operation",
+      scopedSlots: {customRender: "operation"},
+    });
+  },
+};
+</script>
+
+<style scoped>
+.operation-btn {
+  margin-right: 3%;
+}
+</style>

ui/src/views/quota/UpdateQuotaConfig.vue

@@ -0,0 +1,252 @@
+<script src="../../store/index.js"></script>
+<template>
+  <a-modal
+      title="修改配置"
+      :visible="show"
+      :width="800"
+      :mask="false"
+      :destroyOnClose="true"
+      :footer="null"
+      :maskClosable="false"
+      @cancel="handleCancel"
+  >
+    <div>
+      <a-spin :spinning="loading">
+        <a-form
+            :form="form"
+            :label-col="{ span: 5 }"
+            :wrapper-col="{ span: 12 }"
+            @submit="handleSubmit"
+        >
+          <a-form-item label="用户" v-show="showUser">
+            <a-input
+                :disabled="true"
+                v-decorator="[
+                'user', { initialValue: record.user }
+              ]"
+                placeholder="输入用户主体标识，比如：用户名，未指定表示用户默认设置"
+            />
+          </a-form-item>
+          <a-form-item label="客户端ID" v-show="showClientId">
+            <a-input
+                :disabled="true"
+                v-decorator="[
+                'client', { initialValue: record.client }
+              ]"
+                placeholder="输入用户客户端ID，未指定表示默认客户端设置"
+            />
+          </a-form-item>
+          <a-form-item label="IP" v-show="showIP">
+            <a-input
+                :disabled="true"
+                v-decorator="[
+                'ip', { initialValue: record.ip }
+              ]"
+                placeholder="输入客户端IP"
+            />
+          </a-form-item>
+          <a-form-item label="生产速率">
+            <a-input-number
+                :min="1"
+                :max="102400000"
+                v-decorator="[
+                'producerRate', { initialValue: record.producerRate }
+              ]"
+            />
+            <a-select default-value="MB" v-model="producerRateUnit" style="width: 100px">
+              <a-select-option value="MB"> MB/s</a-select-option>
+              <a-select-option value="KB"> KB/s</a-select-option>
+              <a-select-option value="Byte"> Byte/s</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="消费速率">
+            <a-input-number
+                :min="1"
+                :max="102400000"
+                v-decorator="[
+                'consumerRate', { initialValue: record.consumerRate }
+              ]"
+            />
+            <a-select default-value="MB" v-model="consumerRateUnit" style="width: 100px">
+              <a-select-option value="MB"> MB/s</a-select-option>
+              <a-select-option value="KB"> KB/s</a-select-option>
+              <a-select-option value="Byte"> Byte/s</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="吞吐量">
+            <a-input-number
+                :min="1"
+                :max="102400000"
+                v-decorator="[
+                'requestPercentage', { initialValue: record.requestPercentage }
+              ]"
+            />
+          </a-form-item>
+          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+            <a-button type="primary" html-type="submit"> 提交</a-button>
+          </a-form-item>
+        </a-form>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import {KafkaClientQuotaApi} from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+
+export default {
+  name: "UpdateQuotaConfig",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: "",
+    },
+    record: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      show: this.visible,
+      data: [],
+      loading: false,
+      form: this.$form.createForm(this, {name: "coordinated"}),
+      producerRateUnit: "MB",
+      consumerRateUnit: "MB",
+      showUser: false,
+      showIP: false,
+      showClientId: false,
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.init();
+      }
+    },
+  },
+  methods: {
+    handleSubmit() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          const params = {type: this.type, deleteConfigs: []};
+          const unitMap = {MB: 1024 * 1024, KB: 1024, Byte: 1};
+          if (values.consumerRate) {
+            const num = typeof (values.consumerRate) == "string" && values.consumerRate.indexOf(" ") > 0 ? values.consumerRate.split(" ")[0] : values.consumerRate;
+            params.consumerRate = num * unitMap[this.consumerRateUnit];
+          } else {
+            params.deleteConfigs.push("consumerRate");
+          }
+          if (values.producerRate) {
+            const num = typeof (values.producerRate) == "string" && values.producerRate.indexOf(" ") > 0 ? values.producerRate.split(" ")[0] : values.producerRate;
+            params.producerRate = num * unitMap[this.producerRateUnit];
+          } else {
+            params.deleteConfigs.push("producerRate");
+          }
+          if (values.requestPercentage) {
+            params.requestPercentage = values.requestPercentage;
+          } else {
+            params.deleteConfigs.push("requestPercentage");
+          }
+          params.types = [];
+          params.names = [];
+          if (this.showUser) {
+            params.types.push("user");
+            if (values.user) {
+              params.names.push(values.user.trim());
+            } else {
+              params.names.push("");
+            }
+          }
+          if (this.showClientId) {
+            params.types.push("client-id");
+            if (values.client) {
+              params.names.push(values.client.trim());
+            } else {
+              params.names.push("");
+            }
+          }
+          if (this.showIP) {
+            params.types.push("ip");
+            if (values.ip) {
+              params.names.push(values.ip.trim());
+            } else {
+              params.names.push("");
+            }
+          }
+          if (this.showUser && this.showClientId) {
+            params.types.push("user");
+            params.types.push("client-id");
+            if (values.user) {
+              params.names.push(values.user.trim());
+            } else {
+              params.names.push("");
+            }
+            if (values.client) {
+              params.names.push(values.client.trim());
+            } else {
+              params.names.push("");
+            }
+          }
+          this.loading = true;
+          request({
+            url: KafkaClientQuotaApi.alterClientQuotaConfigs.url,
+            method: KafkaClientQuotaApi.alterClientQuotaConfigs.method,
+            data: params,
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.$message.success(res.msg);
+              this.$emit("closeUpdateQuotaDialog", {refresh: true});
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    handleCancel() {
+      this.data = [];
+      this.$emit("closeUpdateQuotaDialog", {refresh: false});
+    },
+    init() {
+      this.producerRateUnit = "MB";
+      if (this.record.producerRate) {
+        this.producerRateUnit = this.record.producerRate.split(" ")[1];
+      }
+      this.consumerRateUnit = "MB";
+      if (this.record.consumerRate) {
+        this.consumerRateUnit = this.record.consumerRate.split(" ")[1];
+      }
+      if (this.type == "user") {
+        this.showUser = true;
+      } else if (this.type == "client-id") {
+        this.showClientId = true;
+      } else if (this.type == "ip") {
+        this.showIP = true;
+      } else if (this.type == "user&client-id") {
+        this.showUser = true;
+        this.showClientId = true;
+      }
+    },
+  },
+  created() {
+
+  },
+};
+</script>
+
+<style scoped></style>

ui/src/views/quota/UserAndClientIDQuota.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="tab-content">
+    <a-spin :spinning="loading">
+      <div id="search-offset-form-advanced-search">
+        <a-form
+            class="ant-advanced-search-form"
+            :form="form"
+            @submit="handleSearch"
+        >
+          <a-row :gutter="24">
+            <a-col :span="10">
+              <a-form-item label="用户标识">
+                <a-input
+                    v-decorator="[
+                    'user',
+                  ]"
+                    placeholder="请输入用户标识，如：用户名!"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="10">
+              <a-form-item label="客户端ID">
+                <a-input
+                    v-decorator="[
+                    'client',
+                  ]"
+                    placeholder="请输入客户端ID!"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="2" :style="{ textAlign: 'right' }">
+              <a-form-item>
+                <a-button type="primary" html-type="submit"> 搜索</a-button>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <div class="operation-row-button">
+        <a-button type="primary" @click="openAddQuotaDialog"
+        >新增配置
+        </a-button>
+      </div>
+      <QuotaList type="user&client-id" :columns="columns" :data="data" @refreshQuotaList="refresh"></QuotaList>
+      <AddQuotaConfig type="user&client-id" :visible="showAddQuotaDialog" :showUser="true" :showClientId="true"
+                      @closeAddQuotaDialog="closeAddQuotaDialog"></AddQuotaConfig>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+import {KafkaClientQuotaApi} from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
+import QuotaList from "@/views/quota/QuotaList.vue";
+import AddQuotaConfig from "@/views/quota/AddQuotaConfig.vue";
+
+export default {
+  name: "UserAndClientIDQuota",
+  components: {QuotaList, AddQuotaConfig},
+  props: {
+    topicList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      form: this.$form.createForm(this, {name: "user_client_id_quota"}),
+      data: [],
+      showAlterQuotaDialog: false,
+      showAddQuotaDialog: false,
+      columns: [
+        {
+          title: "用户标识",
+          dataIndex: "user",
+          key: "user",
+          slots: {title: "user"},
+          scopedSlots: {customRender: "user"},
+        },
+        {
+          title: "客户端ID",
+          dataIndex: "client",
+          key: "client",
+          slots: {title: "client"},
+          scopedSlots: {customRender: "client"},
+        },
+        {
+          title: "生产速率(带宽/秒)",
+          dataIndex: "producerRate",
+          key: "producerRate",
+        },
+        {
+          title: "消费速率(带宽/秒)",
+          dataIndex: "consumerRate",
+          key: "consumerRate",
+        },
+        {
+          title: "吞吐量(请求占比*100)",
+          dataIndex: "requestPercentage",
+          key: "requestPercentage",
+        },
+      ],
+    };
+  },
+  methods: {
+    handleSearch() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.loading = true;
+          const params = {types: ["user", "client-id"], names: []};
+          if (values.user) {
+            params.names.push(values.user.trim());
+          }
+          if (values.client) {
+            if (params.names.length == 0) {
+              params.names.push("");
+            }
+            params.names.push(values.client.trim());
+          }
+          request({
+            url: KafkaClientQuotaApi.getClientQuotaConfigs.url,
+            method: KafkaClientQuotaApi.getClientQuotaConfigs.method,
+            data: params,
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.data = res.data;
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    openAddQuotaDialog() {
+      this.showAddQuotaDialog = true;
+    },
+    closeAddQuotaDialog(p) {
+      if (p.refresh) {
+        this.handleSearch();
+      }
+      this.showAddQuotaDialog = false;
+    },
+    refresh() {
+      this.handleSearch();
+    },
+  },
+  created() {
+    this.handleSearch();
+  },
+};
+</script>
+
+<style scoped>
+.tab-content {
+  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 input {
+  width: 400px;
+}
+
+.ant-advanced-search-form .ant-form-item-control-wrapper {
+  flex: 1;
+}
+
+#components-form-topic-advanced-search .ant-form {
+  max-width: none;
+  margin-bottom: 1%;
+}
+
+#search-offset-form-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;
+}
+
+.operation-row-button {
+  height: 4%;
+  text-align: left;
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+</style>

ui/src/views/quota/UserQuota.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="tab-content">
+    <a-spin :spinning="loading">
+      <div id="search-offset-form-advanced-search">
+        <a-form
+            class="ant-advanced-search-form"
+            :form="form"
+            @submit="handleSearch"
+        >
+          <a-row :gutter="24">
+            <a-col :span="16">
+              <a-form-item label="用户标识">
+                <a-input
+                    v-decorator="[
+                    'user',
+                  ]"
+                    placeholder="请输入用户标识，如：用户名!"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="2" :style="{ textAlign: 'right' }">
+              <a-form-item>
+                <a-button type="primary" html-type="submit"> 搜索</a-button>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <div class="operation-row-button">
+        <a-button type="primary" @click="openAddQuotaDialog"
+        >新增配置
+        </a-button>
+      </div>
+      <QuotaList type="user" :columns="columns" :data="data" @refreshQuotaList="refresh"></QuotaList>
+      <AddQuotaConfig type="user" :visible="showAddQuotaDialog" :showUser="true" @closeAddQuotaDialog="closeAddQuotaDialog"></AddQuotaConfig>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+import {KafkaClientQuotaApi} from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
+import QuotaList from "@/views/quota/QuotaList.vue";
+import AddQuotaConfig from "@/views/quota/AddQuotaConfig.vue";
+
+export default {
+  name: "UserQuota",
+  components: {QuotaList, AddQuotaConfig},
+  props: {
+    topicList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      form: this.$form.createForm(this, {name: "user_quota"}),
+      data: [],
+      showAlterQuotaDialog: false,
+      showAddQuotaDialog: false,
+      columns: [
+        {
+          title: "用户标识",
+          dataIndex: "user",
+          key: "user",
+          width: 300,
+          slots: {title: "user"},
+          scopedSlots: {customRender: "user"},
+        },
+        {
+          title: "生产速率(带宽/秒)",
+          dataIndex: "producerRate",
+          key: "producerRate",
+        },
+        {
+          title: "消费速率(带宽/秒)",
+          dataIndex: "consumerRate",
+          key: "consumerRate",
+        },
+        {
+          title: "吞吐量(请求占比*100)",
+          dataIndex: "requestPercentage",
+          key: "requestPercentage",
+        },
+      ],
+    };
+  },
+  methods: {
+    handleSearch() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.loading = true;
+          const params = {types: ["user"]};
+          if (values.user) {
+            params.names = [values.user.trim()];
+          }
+          request({
+            url: KafkaClientQuotaApi.getClientQuotaConfigs.url,
+            method: KafkaClientQuotaApi.getClientQuotaConfigs.method,
+            data: params,
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.data = res.data;
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    openAddQuotaDialog() {
+      this.showAddQuotaDialog = true;
+    },
+    closeAddQuotaDialog(p) {
+      if (p.refresh) {
+        this.handleSearch();
+      }
+      this.showAddQuotaDialog = false;
+    },
+    refresh() {
+      this.handleSearch();
+    },
+  },
+  created() {
+    this.handleSearch();
+  },
+};
+</script>
+
+<style scoped>
+.tab-content {
+  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 input {
+  width: 400px;
+}
+
+.ant-advanced-search-form .ant-form-item-control-wrapper {
+  flex: 1;
+}
+
+#components-form-topic-advanced-search .ant-form {
+  max-width: none;
+  margin-bottom: 1%;
+}
+
+#search-offset-form-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;
+}
+
+.operation-row-button {
+  height: 4%;
+  text-align: left;
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+</style>

ui/src/views/topic/ConsumedDetail.vue

@@ -161,6 +161,7 @@ const columns = [
     dataIndex: "clientId",
     key: "clientId",
     scopedSlots: { customRender: "clientId" },
+    width: 400,
   },
   {
     title: "日志位点",

ui/src/views/topic/Topic.vue

@@ -49,10 +49,34 @@
           <a-button type="primary" @click="openCreateTopicDialog"
             >新增</a-button
           >
+          <a-popconfirm
+            title="删除这些Topic?"
+            ok-text="确认"
+            cancel-text="取消"
+            @confirm="deleteTopics(selectedRowKeys)"
+          >
+            <a-button
+              type="danger"
+              class="btn-left"
+              :disabled="!hasSelected"
+              :loading="loading"
+            >
+              批量删除
+            </a-button>
+          </a-popconfirm>
+          <span style="margin-left: 8px">
+            <template v-if="hasSelected">
+              {{ `已选择 ${selectedRowKeys.length} 个Topic` }}
+            </template>
+          </span>
         </div>
         <a-table
           :columns="columns"
           :data-source="filteredData"
+          :row-selection="{
+            selectedRowKeys: selectedRowKeys,
+            onChange: onSelectChange,
+          }"
           bordered
           row-key="name"
         >
@@ -225,8 +249,14 @@ export default {
       filterTopic: "",
       filteredData: [],
       type: "normal",
+      selectedRowKeys: [], // Check here to configure the default column
     };
   },
+  computed: {
+    hasSelected() {
+      return this.selectedRowKeys.length > 0;
+    },
+  },
   methods: {
     handleSearch(e) {
       e.preventDefault();
@@ -256,14 +286,16 @@ export default {
         }
       });
     },
-    deleteTopic(topic) {
+    deleteTopics(topics) {
       request({
-        url: KafkaTopicApi.deleteTopic.url + "?topic=" + topic,
+        url: KafkaTopicApi.deleteTopic.url,
         method: KafkaTopicApi.deleteTopic.method,
+        data: topics,
       }).then((res) => {
         if (res.code == 0) {
           this.$message.success(res.msg);
           this.getTopicList();
+          this.selectedRowKeys = [];
         } else {
           notification.error({
             message: "error",
@@ -272,6 +304,9 @@ export default {
         }
       });
     },
+    deleteTopic(topic) {
+      this.deleteTopics([topic]);
+    },
     onTopicUpdate(input) {
       this.filterTopic = input.target.value;
       this.filter();
@@ -342,9 +377,13 @@ export default {
     closeThrottleDialog() {
       this.showThrottleDialog = false;
     },
+    onSelectChange(selectedRowKeys) {
+      this.selectedRowKeys = selectedRowKeys;
+    },
   },
   created() {
     this.getTopicList();
+    this.selectedRowKeys = [];
   },
 };
 
@@ -431,4 +470,8 @@ const columns = [
 .type-select {
   width: 200px !important;
 }
+
+.btn-left {
+  margin-left: 1%;
+}
 </style>