basic user auth

Feature/dongyinuo/add/contact

README.md

@@ -7,7 +7,8 @@
 如果github能查看图片的话，可以点击[查看菜单页面](./document/overview/概览.md)，查看每个页面的样子
 ## 集群迁移支持说明
 当前主分支及日后版本不再提供消息同步、集群迁移的解决方案，如有需要，查看：[集群迁移说明](./document/datasync/集群迁移.md)
-
+## ACL说明
+acl配置说明，如果kafka集群启用了ACL，但是控制台没看到Acl菜单，可以查看：[Acl配置启用说明](./document/acl/Acl.md)
 ## 功能支持
 * 多集群支持
 * 集群信息
@@ -21,7 +22,7 @@
 ![功能特性](./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.4版本)：[kafka-console-ui.zip](https://github.com/xxd763795151/kafka-console-ui/releases/download/v1.0.4/kafka-console-ui.zip)
 
 ## 快速使用
 ### Windows
@@ -69,3 +70,11 @@ sh bin/shutdown.sh
 
 ## 本地开发
 如果需要本地开发，开发环境配置查看：[本地开发](./document/develop/开发配置.md)
+
+## 联系方式
++ 微信群
+<img src="https://github.com/dongyinuo/kafka-console-ui/blob/feature/dongyinuo/add/contact/document/contact/weixin_contact.jpeg" width="40%"/>
+
++ 若联系方式失效, 请联系加一下微信, 说明意图
+    - xxd763795151
+    - wxid_7jy2ezljvebt12

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。
+
+注意：**现在不再支持这种方式了**
+## 新版本说明
+因为现在支持多集群配置，关于多集群配置，可以看主页说明的 配置集群 介绍。
+所以这里把这些额外的配置项都去掉了。
+
+如果启用了ACL，在页面上新增集群的时候，在属性里配置集群的ACL相关信息，如下：![新增集群](./新增集群.png)
+如果控制台检测到属性里有ACL相关属性配置，切换到这个集群后，ACL菜单会自动出现的。
+
+注意：只支持SASL。

pom.xml

@@ -10,7 +10,7 @@
     </parent>
     <groupId>com.xuxd</groupId>
     <artifactId>kafka-console-ui</artifactId>
-    <version>1.0.3</version>
+    <version>1.0.4</version>
     <name>kafka-console-ui</name>
     <description>Kafka console manage ui</description>
     <properties>
@@ -25,8 +25,14 @@
         <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>
+        <jwt.version>0.9.0</jwt.version>
     </properties>
     <dependencies>
+        <dependency>
+            <groupId>io.jsonwebtoken</groupId>
+            <artifactId>jjwt</artifactId>
+            <version>${jwt.version}</version>
+        </dependency>
         <dependency>
             <groupId>org.scala-lang</groupId>
             <artifactId>scala-library</artifactId>

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/KafkaConsoleException.java

@@ -0,0 +1,7 @@
+package com.xuxd.kafka.console.beans;
+
+public class KafkaConsoleException extends RuntimeException{
+    public KafkaConsoleException(String msg){
+        super(msg);
+    }
+}

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

@@ -11,7 +11,7 @@ import lombok.Setter;
  **/
 public class ResponseData<T> {
 
-    public static final int SUCCESS_CODE = 0, FAILED_CODE = -9999;
+    public static final int SUCCESS_CODE = 0, TOKEN_ILLEGAL = -5000, FAILED_CODE = -9999;
 
     public static final String SUCCESS_MSG = "success", FAILED_MSG = "failed";
 
@@ -58,6 +58,12 @@ public class ResponseData<T> {
         return this;
     }
 
+    public ResponseData<T> failed(int code) {
+        this.code = code;
+        this.msg = FAILED_MSG;
+        return this;
+    }
+
     public ResponseData<T> failed(String msg) {
         this.code = FAILED_CODE;
         this.msg = msg;

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/annotation/RequiredAuthorize.java

@@ -0,0 +1,9 @@
+package com.xuxd.kafka.console.beans.annotation;
+
+import java.lang.annotation.*;
+
+@Target({ElementType.TYPE, ElementType.METHOD})
+@Retention(RetentionPolicy.RUNTIME)
+@Documented
+public @interface RequiredAuthorize {
+}

src/main/java/com/xuxd/kafka/console/beans/dos/DevOpsUserDO.java

@@ -0,0 +1,29 @@
+package com.xuxd.kafka.console.beans.dos;
+
+import com.baomidou.mybatisplus.annotation.IdType;
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.TableName;
+import com.xuxd.kafka.console.beans.enums.Role;
+import lombok.Data;
+
+import java.util.Date;
+
+@Data
+@TableName("t_devops_user")
+public class DevOpsUserDO {
+
+    @TableId(type = IdType.AUTO)
+    private Long id;
+
+    private String username;
+
+    private String password;
+
+    private Role role;
+
+    private boolean delete;
+
+    private Date createTime;
+
+    private Date updateTime;
+}

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/user/AddUserDTO.java

@@ -0,0 +1,11 @@
+package com.xuxd.kafka.console.beans.dto.user;
+
+import com.xuxd.kafka.console.beans.enums.Role;
+import lombok.Data;
+
+@Data
+public class AddUserDTO {
+    private String username;
+    private String password;
+    private Role role;
+}

src/main/java/com/xuxd/kafka/console/beans/dto/user/ListUserDTO.java

@@ -0,0 +1,9 @@
+package com.xuxd.kafka.console.beans.dto.user;
+
+import lombok.Data;
+
+@Data
+public class ListUserDTO {
+    private Long id;
+    private String username;
+}

src/main/java/com/xuxd/kafka/console/beans/dto/user/LoginDTO.java

@@ -0,0 +1,9 @@
+package com.xuxd.kafka.console.beans.dto.user;
+
+import lombok.Data;
+
+@Data
+public class LoginDTO {
+    private String username;
+    private String password;
+}

src/main/java/com/xuxd/kafka/console/beans/dto/user/PasswordDTO.java

@@ -0,0 +1,9 @@
+package com.xuxd.kafka.console.beans.dto.user;
+
+import lombok.Data;
+
+@Data
+public class PasswordDTO {
+    private Long userId;
+    private String password;
+}

src/main/java/com/xuxd/kafka/console/beans/dto/user/UpdateUserDTO.java

@@ -0,0 +1,11 @@
+package com.xuxd.kafka.console.beans.dto.user;
+
+import com.xuxd.kafka.console.beans.enums.Role;
+import lombok.Data;
+
+@Data
+public class UpdateUserDTO {
+    private String username;
+    private String password;
+    private Role role;
+}

src/main/java/com/xuxd/kafka/console/beans/enums/Role.java

@@ -0,0 +1,6 @@
+package com.xuxd.kafka.console.beans.enums;
+
+public enum Role {
+    developer,
+    manager
+}

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/DevOpsUserVO.java

@@ -0,0 +1,16 @@
+package com.xuxd.kafka.console.beans.vo;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import com.xuxd.kafka.console.beans.enums.Role;
+import lombok.Data;
+
+import java.util.Date;
+
+@Data
+public class DevOpsUserVO {
+    private Long id;
+    private String username;
+    private Role role;
+    @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8")
+    private Date createTime;
+}

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

@@ -0,0 +1,16 @@
+package com.xuxd.kafka.console.beans.vo;
+
+import com.xuxd.kafka.console.beans.enums.Role;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@Builder
+@AllArgsConstructor
+@NoArgsConstructor
+public class LoginVO {
+    private String token;
+    private Role role;
+}

src/main/java/com/xuxd/kafka/console/boot/Bootstrap.java

@@ -2,15 +2,20 @@ package com.xuxd.kafka.console.boot;
 
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.xuxd.kafka.console.beans.dos.ClusterInfoDO;
+import com.xuxd.kafka.console.beans.dos.DevOpsUserDO;
 import com.xuxd.kafka.console.config.KafkaConfig;
 import com.xuxd.kafka.console.dao.ClusterInfoMapper;
+import com.xuxd.kafka.console.dao.DevOpsUserMapper;
 import com.xuxd.kafka.console.utils.ConvertUtil;
 import java.util.List;
+
+import com.xuxd.kafka.console.utils.Md5Utils;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.ObjectProvider;
 import org.springframework.beans.factory.SmartInitializingSingleton;
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Component;
 
 /**

src/main/java/com/xuxd/kafka/console/boot/InitSuperDevOpsUser.java

@@ -0,0 +1,42 @@
+package com.xuxd.kafka.console.boot;
+
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.xuxd.kafka.console.beans.dos.DevOpsUserDO;
+import com.xuxd.kafka.console.beans.enums.Role;
+import com.xuxd.kafka.console.dao.DevOpsUserMapper;
+import com.xuxd.kafka.console.utils.Md5Utils;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.SmartInitializingSingleton;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Component;
+
+@Component
+@Slf4j
+@RequiredArgsConstructor
+public class InitSuperDevOpsUser implements SmartInitializingSingleton {
+
+    private final DevOpsUserMapper devOpsUserMapper;
+    public final static String SUPER_USERNAME = "admin";
+
+    @Value("${devops.password:kafka-console-ui521}")
+    private String password;
+
+    @Override
+    public void afterSingletonsInstantiated() {
+        QueryWrapper<DevOpsUserDO> userDOQueryWrapper = new QueryWrapper<>();
+        userDOQueryWrapper.eq("username", SUPER_USERNAME);
+        DevOpsUserDO userDO = devOpsUserMapper.selectOne(userDOQueryWrapper);
+        if (userDO == null){
+            DevOpsUserDO devOpsUserDO = new DevOpsUserDO();
+            devOpsUserDO.setUsername(SUPER_USERNAME);
+            devOpsUserDO.setPassword(Md5Utils.MD5(password));
+            devOpsUserDO.setRole(Role.manager);
+            devOpsUserMapper.insert(devOpsUserDO);
+        } else {
+            userDO.setPassword(Md5Utils.MD5(password));
+            devOpsUserMapper.updateById(userDO);
+        }
+        log.info("init super devops user done, username = {}", SUPER_USERNAME);
+    }
+}

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

@@ -1,6 +1,7 @@
 package com.xuxd.kafka.console.controller;
 
 import com.xuxd.kafka.console.beans.AclUser;
+import com.xuxd.kafka.console.beans.annotation.RequiredAuthorize;
 import com.xuxd.kafka.console.service.AclService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.DeleteMapping;
@@ -30,17 +31,20 @@ public class AclUserController {
     }
 
     @PostMapping
+    @RequiredAuthorize
     public Object addOrUpdateUser(@RequestBody AclUser user) {
         return aclService.addOrUpdateUser(user.getUsername(), user.getPassword());
     }
 
     @DeleteMapping
+    @RequiredAuthorize
     public Object deleteUser(@RequestBody AclUser user) {
         return aclService.deleteUser(user.getUsername());
     }
 
 
     @DeleteMapping("/auth")
+    @RequiredAuthorize
     public Object deleteUserAndAuth(@RequestBody AclUser user) {
         return aclService.deleteUserAndAuth(user.getUsername());
     }

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

@@ -3,13 +3,7 @@ package com.xuxd.kafka.console.controller;
 import com.xuxd.kafka.console.beans.dto.ClusterInfoDTO;
 import com.xuxd.kafka.console.service.ClusterService;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.web.bind.annotation.DeleteMapping;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.PutMapping;
-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.*;
 
 /**
  * kafka-console-ui.
@@ -53,4 +47,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/ConfigController.java

@@ -1,6 +1,7 @@
 package com.xuxd.kafka.console.controller;
 
 import com.xuxd.kafka.console.beans.ResponseData;
+import com.xuxd.kafka.console.beans.annotation.RequiredAuthorize;
 import com.xuxd.kafka.console.beans.dto.AlterConfigDTO;
 import com.xuxd.kafka.console.beans.enums.AlterType;
 import com.xuxd.kafka.console.config.KafkaConfig;
@@ -47,11 +48,13 @@ public class ConfigController {
     }
 
     @PostMapping("/topic")
+    @RequiredAuthorize
     public Object setTopicConfig(@RequestBody AlterConfigDTO dto) {
         return configService.alterTopicConfig(dto.getEntity(), dto.to(), AlterType.SET);
     }
 
     @DeleteMapping("/topic")
+    @RequiredAuthorize
     public Object deleteTopicConfig(@RequestBody AlterConfigDTO dto) {
         return configService.alterTopicConfig(dto.getEntity(), dto.to(), AlterType.DELETE);
     }
@@ -62,11 +65,13 @@ public class ConfigController {
     }
 
     @PostMapping("/broker")
+    @RequiredAuthorize
     public Object setBrokerConfig(@RequestBody AlterConfigDTO dto) {
         return configService.alterBrokerConfig(dto.getEntity(), dto.to(), AlterType.SET);
     }
 
     @DeleteMapping("/broker")
+    @RequiredAuthorize
     public Object deleteBrokerConfig(@RequestBody AlterConfigDTO dto) {
         return configService.alterBrokerConfig(dto.getEntity(), dto.to(), AlterType.DELETE);
     }
@@ -77,11 +82,13 @@ public class ConfigController {
     }
 
     @PostMapping("/broker/logger")
+    @RequiredAuthorize
     public Object setBrokerLoggerConfig(@RequestBody AlterConfigDTO dto) {
         return configService.alterBrokerLoggerConfig(dto.getEntity(), dto.to(), AlterType.SET);
     }
 
     @DeleteMapping("/broker/logger")
+    @RequiredAuthorize
     public Object deleteBrokerLoggerConfig(@RequestBody AlterConfigDTO dto) {
         return configService.alterBrokerLoggerConfig(dto.getEntity(), dto.to(), AlterType.DELETE);
     }

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

@@ -1,6 +1,7 @@
 package com.xuxd.kafka.console.controller;
 
 import com.xuxd.kafka.console.beans.ResponseData;
+import com.xuxd.kafka.console.beans.annotation.RequiredAuthorize;
 import com.xuxd.kafka.console.beans.dto.AddSubscriptionDTO;
 import com.xuxd.kafka.console.beans.dto.QueryConsumerGroupDTO;
 import com.xuxd.kafka.console.beans.dto.ResetOffsetDTO;
@@ -67,11 +68,13 @@ public class ConsumerController {
     }
 
     @PostMapping("/subscription")
+    @RequiredAuthorize
     public Object addSubscription(@RequestBody AddSubscriptionDTO subscriptionDTO) {
         return consumerService.addSubscription(subscriptionDTO.getGroupId(), subscriptionDTO.getTopic());
     }
 
     @PostMapping("/reset/offset")
+    @RequiredAuthorize
     public Object restOffset(@RequestBody ResetOffsetDTO offsetDTO) {
         ResponseData res = ResponseData.create().failed("unknown");
         switch (offsetDTO.getLevel()) {

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

@@ -0,0 +1,53 @@
+package com.xuxd.kafka.console.controller;
+
+import com.xuxd.kafka.console.beans.ResponseData;
+import com.xuxd.kafka.console.beans.annotation.RequiredAuthorize;
+import com.xuxd.kafka.console.beans.dto.user.*;
+import com.xuxd.kafka.console.beans.vo.DevOpsUserVO;
+import com.xuxd.kafka.console.beans.vo.LoginVO;
+import com.xuxd.kafka.console.service.DevOpsUserService;
+import lombok.RequiredArgsConstructor;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+/**
+ * 用户管理
+ * @author dongyinuo
+ */
+@RestController
+@RequiredArgsConstructor
+@RequestMapping("/devops/user")
+public class DevOpsUserController {
+
+    private final DevOpsUserService devOpsUserService;
+
+    @PostMapping("add")
+    @RequiredAuthorize
+    public ResponseData<Boolean> add(@RequestBody AddUserDTO addUserDTO){
+        return devOpsUserService.add(addUserDTO);
+    }
+
+    @PostMapping("update")
+    @RequiredAuthorize
+    public ResponseData<Boolean> update(@RequestBody UpdateUserDTO updateUserDTO){
+        return devOpsUserService.update(updateUserDTO);
+    }
+
+    @DeleteMapping
+    @RequiredAuthorize
+    public ResponseData<Boolean> delete(@RequestParam Long id){
+        return devOpsUserService.delete(id);
+    }
+
+    @GetMapping("list")
+    @RequiredAuthorize
+    public ResponseData<List<DevOpsUserVO>> list(@ModelAttribute ListUserDTO listUserDTO){
+        return devOpsUserService.list(listUserDTO);
+    }
+
+    @PostMapping("login")
+    public ResponseData<LoginVO> login(@RequestBody LoginDTO loginDTO){
+        return devOpsUserService.login(loginDTO.getUsername(), loginDTO.getPassword());
+    }
+}

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

@@ -1,7 +1,9 @@
 package com.xuxd.kafka.console.controller;
 
 import com.xuxd.kafka.console.beans.TopicPartition;
+import com.xuxd.kafka.console.beans.annotation.RequiredAuthorize;
 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;
@@ -29,12 +31,14 @@ public class OperationController {
     private OperationService operationService;
 
     @PostMapping("/sync/consumer/offset")
+    @RequiredAuthorize
     public Object syncConsumerOffset(@RequestBody SyncDataDTO dto) {
         dto.getProperties().put(AdminClientConfig.BOOTSTRAP_SERVERS_CONFIG, dto.getAddress());
         return operationService.syncConsumerOffset(dto.getGroupId(), dto.getTopic(), dto.getProperties());
     }
 
     @PostMapping("/sync/min/offset/alignment")
+    @RequiredAuthorize
     public Object minOffsetAlignment(@RequestBody SyncDataDTO dto) {
         dto.getProperties().put(AdminClientConfig.BOOTSTRAP_SERVERS_CONFIG, dto.getAddress());
         return operationService.minOffsetAlignment(dto.getGroupId(), dto.getTopic(), dto.getProperties());
@@ -46,6 +50,7 @@ public class OperationController {
     }
 
     @DeleteMapping("/sync/alignment")
+    @RequiredAuthorize
     public Object deleteAlignment(@RequestParam Long id) {
         return operationService.deleteAlignmentById(id);
     }
@@ -56,6 +61,7 @@ public class OperationController {
     }
 
     @PostMapping("/broker/throttle")
+    @RequiredAuthorize
     public Object configThrottle(@RequestBody BrokerThrottleDTO dto) {
         return operationService.configThrottle(dto.getBrokerList(), dto.getUnit().toKb(dto.getThrottle()));
     }
@@ -74,4 +80,10 @@ 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")
+    @RequiredAuthorize
+    public Object proposedAssignments(@RequestBody ProposedAssignmentDTO dto) {
+        return operationService.proposedAssignments(dto.getTopic(), dto.getBrokers());
+    }
 }

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

@@ -1,6 +1,7 @@
 package com.xuxd.kafka.console.controller;
 
 import com.xuxd.kafka.console.beans.ReplicaAssignment;
+import com.xuxd.kafka.console.beans.annotation.RequiredAuthorize;
 import com.xuxd.kafka.console.beans.dto.AddPartitionDTO;
 import com.xuxd.kafka.console.beans.dto.NewTopicDTO;
 import com.xuxd.kafka.console.beans.dto.TopicThrottleDTO;
@@ -43,6 +44,7 @@ public class TopicController {
     }
 
     @DeleteMapping
+    @RequiredAuthorize
     public Object deleteTopic(@RequestParam String topic) {
         return topicService.deleteTopic(topic);
     }
@@ -53,11 +55,13 @@ public class TopicController {
     }
 
     @PostMapping("/new")
+    @RequiredAuthorize
     public Object createNewTopic(@RequestBody NewTopicDTO topicDTO) {
         return topicService.createTopic(topicDTO.toNewTopic());
     }
 
     @PostMapping("/partition/new")
+    @RequiredAuthorize
     public Object addPartition(@RequestBody AddPartitionDTO partitionDTO) {
         String topic = partitionDTO.getTopic().trim();
         int addNum = partitionDTO.getAddNum();
@@ -80,11 +84,13 @@ public class TopicController {
     }
 
     @PostMapping("/replica/assignment")
+    @RequiredAuthorize
     public Object updateReplicaAssignment(@RequestBody ReplicaAssignment assignment) {
         return topicService.updateReplicaAssignment(assignment);
     }
 
     @PostMapping("/replica/throttle")
+    @RequiredAuthorize
     public Object configThrottle(@RequestBody TopicThrottleDTO dto) {
         return topicService.configThrottle(dto.getTopic(), dto.getPartitions(), dto.getOperation());
     }

src/main/java/com/xuxd/kafka/console/dao/DevOpsUserMapper.java

@@ -0,0 +1,7 @@
+package com.xuxd.kafka.console.dao;
+
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.xuxd.kafka.console.beans.dos.DevOpsUserDO;
+
+public interface DevOpsUserMapper extends BaseMapper<DevOpsUserDO> {
+}

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

@@ -1,7 +1,6 @@
 package com.xuxd.kafka.console.interceptor;
 
-import com.xuxd.kafka.console.beans.ResponseData;
-import javax.servlet.http.HttpServletRequest;
+import com.xuxd.kafka.console.utils.ResponseUtil;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.web.bind.annotation.ControllerAdvice;
 import org.springframework.web.bind.annotation.ExceptionHandler;
@@ -14,14 +13,13 @@ import org.springframework.web.bind.annotation.ResponseBody;
  * @date 2021-10-19 14:32:18
  **/
 @Slf4j
-@ControllerAdvice(basePackages = "com.xuxd.kafka.console.controller")
+@ControllerAdvice(basePackages = "com.xuxd.kafka.console")
 public class GlobalExceptionHandler {
 
     @ExceptionHandler(value = Exception.class)
     @ResponseBody
-    public Object exceptionHandler(HttpServletRequest req, Exception ex) throws Exception {
-
+    public Object exceptionHandler(Exception ex) {
         log.error("exception handle: ", ex);
-        return ResponseData.create().failed(ex.getMessage());
+        return ResponseUtil.error(ex.getMessage());
     }
 }

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

@@ -0,0 +1,84 @@
+package com.xuxd.kafka.console.interceptor;
+
+import com.xuxd.kafka.console.beans.ResponseData;
+import com.xuxd.kafka.console.beans.annotation.RequiredAuthorize;
+import com.xuxd.kafka.console.beans.enums.Role;
+import com.xuxd.kafka.console.beans.vo.DevOpsUserVO;
+import com.xuxd.kafka.console.service.DevOpsUserService;
+import com.xuxd.kafka.console.utils.ContextUtil;
+import com.xuxd.kafka.console.utils.ConvertUtil;
+import com.xuxd.kafka.console.utils.JwtUtils;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.stereotype.Component;
+import org.springframework.web.method.HandlerMethod;
+import org.springframework.web.servlet.AsyncHandlerInterceptor;
+
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.io.PrintWriter;
+
+import static com.xuxd.kafka.console.beans.ResponseData.TOKEN_ILLEGAL;
+
+@Component
+@Slf4j
+@RequiredArgsConstructor
+public class TokenInterceptor implements AsyncHandlerInterceptor {
+
+    private final static String TOKEN = "token";
+    private final DevOpsUserService devOpsUserService;
+
+    @Override
+    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
+        if (handler instanceof HandlerMethod){
+            String token = request.getHeader(TOKEN);
+            if (StringUtils.isBlank(token)){
+                log.info("token not exist");
+                write(response);
+                return false;
+            }
+
+            String username = JwtUtils.parse(token);
+            if (StringUtils.isBlank(username)){
+                log.info("{} is wrongful", token);
+                write(response);
+                return false;
+            }
+
+            ResponseData<DevOpsUserVO> userVORsp = devOpsUserService.detail(username);
+            if (userVORsp == null || userVORsp.getData() == null){
+                log.info("{} not exist", username);
+                write(response);
+                return false;
+            }
+
+            ContextUtil.set(ContextUtil.USERNAME, username);
+            HandlerMethod method = (HandlerMethod)handler;
+            RequiredAuthorize annotation = method.getMethodAnnotation(RequiredAuthorize.class);
+            if (annotation != null){
+                DevOpsUserVO userVO = userVORsp.getData();
+                if (!userVO.getRole().equals(Role.manager)){
+                    log.info("{},{} no permission", username, request.getRequestURI());
+                    write(response);
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+
+    private void write(HttpServletResponse response){
+        PrintWriter writer = null;
+        try {
+            writer = response.getWriter();
+            writer.write(ConvertUtil.toJsonString(ResponseData.create().failed(TOKEN_ILLEGAL)));
+        } catch (Exception ignored){
+        } finally {
+            if (writer != null){
+                writer.flush();
+                writer.close();
+            }
+        }
+    }
+}

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

@@ -0,0 +1,20 @@
+package com.xuxd.kafka.console.interceptor;
+
+import lombok.RequiredArgsConstructor;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+@Configuration
+@RequiredArgsConstructor
+public class WebMvcConfig implements WebMvcConfigurer {
+
+    private final TokenInterceptor tokenInterceptor;
+
+    @Override
+    public void addInterceptors(InterceptorRegistry registry) {
+        registry.addInterceptor(tokenInterceptor)
+                .addPathPatterns("/**")
+                .excludePathPatterns("/devops/user/login");
+    }
+}

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/DevOpsUserService.java

@@ -0,0 +1,26 @@
+package com.xuxd.kafka.console.service;
+
+import com.xuxd.kafka.console.beans.ResponseData;
+import com.xuxd.kafka.console.beans.dto.user.AddUserDTO;
+import com.xuxd.kafka.console.beans.dto.user.ListUserDTO;
+import com.xuxd.kafka.console.beans.dto.user.UpdateUserDTO;
+import com.xuxd.kafka.console.beans.vo.DevOpsUserVO;
+import com.xuxd.kafka.console.beans.vo.LoginVO;
+
+import java.util.List;
+
+public interface DevOpsUserService {
+
+    ResponseData<Boolean> add(AddUserDTO addUserDTO);
+
+    ResponseData<Boolean> update(UpdateUserDTO updateUserDTO);
+
+    ResponseData<Boolean> delete(Long id);
+
+    ResponseData<List<DevOpsUserVO>> list(ListUserDTO listUserDTO);
+
+    ResponseData<DevOpsUserVO> detail(String username);
+
+    ResponseData<LoginVO> login(String username, String password);
+
+}

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/impl/ClusterServiceImpl.java

@@ -1,15 +1,26 @@
 package com.xuxd.kafka.console.service.impl;
 
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+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.ArrayList;
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.Comparator;
+import java.util.HashMap;
 import java.util.List;
+import java.util.TreeSet;
 import java.util.stream.Collectors;
 import kafka.console.ClusterConsole;
 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;
 
@@ -33,7 +44,9 @@ public class ClusterServiceImpl implements ClusterService {
     }
 
     @Override public ResponseData getClusterInfo() {
-        return ResponseData.create().data(clusterConsole.clusterInfo()).success();
+        ClusterInfo clusterInfo = clusterConsole.clusterInfo();
+        clusterInfo.setNodes(new TreeSet<>(clusterInfo.getNodes()));
+        return ResponseData.create().data(clusterInfo).success();
     }
 
     @Override public ResponseData getClusterInfoList() {
@@ -69,4 +82,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/DevOpsServiceImpl.java

@@ -0,0 +1,99 @@
+package com.xuxd.kafka.console.service.impl;
+
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
+import com.xuxd.kafka.console.beans.KafkaConsoleException;
+import com.xuxd.kafka.console.beans.ResponseData;
+import com.xuxd.kafka.console.beans.dos.DevOpsUserDO;
+import com.xuxd.kafka.console.beans.dto.user.AddUserDTO;
+import com.xuxd.kafka.console.beans.dto.user.ListUserDTO;
+import com.xuxd.kafka.console.beans.dto.user.UpdateUserDTO;
+import com.xuxd.kafka.console.beans.vo.DevOpsUserVO;
+import com.xuxd.kafka.console.beans.vo.LoginVO;
+import com.xuxd.kafka.console.boot.InitSuperDevOpsUser;
+import com.xuxd.kafka.console.dao.DevOpsUserMapper;
+import com.xuxd.kafka.console.service.DevOpsUserService;
+import com.xuxd.kafka.console.utils.ConvertUtil;
+import com.xuxd.kafka.console.utils.JwtUtils;
+import com.xuxd.kafka.console.utils.Md5Utils;
+import com.xuxd.kafka.console.utils.ResponseUtil;
+import lombok.RequiredArgsConstructor;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+@RequiredArgsConstructor
+public class DevOpsServiceImpl implements DevOpsUserService {
+
+    private final DevOpsUserMapper devOpsUserMapper;
+
+    @Override
+    public ResponseData<Boolean> add(AddUserDTO addUserDTO) {
+        QueryWrapper<DevOpsUserDO> queryWrapper = new QueryWrapper<DevOpsUserDO>();
+        queryWrapper.eq("username", addUserDTO.getUsername());
+        if (devOpsUserMapper.selectOne(queryWrapper) != null){
+            throw new KafkaConsoleException("账号已存在");
+        }
+
+        addUserDTO.setPassword(Md5Utils.MD5(addUserDTO.getPassword()));
+        int ret = devOpsUserMapper.insert(ConvertUtil.copy(addUserDTO, DevOpsUserDO.class));
+        return ResponseUtil.success(ret > 0);
+    }
+
+    @Override
+    public ResponseData<Boolean> update(UpdateUserDTO updateUserDTO) {
+        UpdateWrapper<DevOpsUserDO> updateWrapper = new UpdateWrapper<>();
+        if (updateUserDTO.getRole() != null){
+            updateWrapper.set("role", updateUserDTO.getRole());
+        }
+        if (StringUtils.isNotBlank(updateUserDTO.getPassword())){
+            updateWrapper.set("password", Md5Utils.MD5(updateUserDTO.getPassword()));
+        }
+        updateWrapper.eq("username", updateUserDTO.getUsername());
+        int ret = devOpsUserMapper.update(null, updateWrapper);
+        return ResponseUtil.success(ret > 0);
+    }
+
+    @Override
+    public ResponseData<Boolean> delete(Long id) {
+        int ret = devOpsUserMapper.deleteById(id);
+        return ResponseUtil.success(ret > 0);
+    }
+
+    @Override
+    public ResponseData<List<DevOpsUserVO>> list(ListUserDTO listUserDTO) {
+        QueryWrapper<DevOpsUserDO> queryWrapper = new QueryWrapper<DevOpsUserDO>();
+        if (listUserDTO.getId() != null){
+            queryWrapper.eq("id", listUserDTO.getId());
+        }
+        if (StringUtils.isNotBlank(listUserDTO.getUsername())){
+            queryWrapper.eq("username", listUserDTO.getUsername());
+        }
+        queryWrapper.ne("username", InitSuperDevOpsUser.SUPER_USERNAME);
+        List<DevOpsUserDO> userDOS = devOpsUserMapper.selectList(queryWrapper);
+        return ResponseUtil.success(ConvertUtil.copyList(userDOS, DevOpsUserVO.class));
+    }
+
+    @Override
+    public ResponseData<DevOpsUserVO> detail(String username) {
+        QueryWrapper<DevOpsUserDO> queryWrapper = new QueryWrapper<DevOpsUserDO>();
+        queryWrapper.eq("username", username);
+        DevOpsUserDO userDO = devOpsUserMapper.selectOne(queryWrapper);
+        return ResponseUtil.success(ConvertUtil.copy(userDO, DevOpsUserVO.class));
+    }
+
+    @Override
+    public ResponseData<LoginVO> login(String username, String password) {
+        QueryWrapper<DevOpsUserDO> queryWrapper = new QueryWrapper<DevOpsUserDO>();
+        queryWrapper.eq("username", username);
+        queryWrapper.eq("password", Md5Utils.MD5(password));
+        DevOpsUserDO userDO = devOpsUserMapper.selectOne(queryWrapper);
+        if (userDO == null){
+            throw new KafkaConsoleException("用户名或密码错误");
+        }
+        LoginVO loginVO = LoginVO.builder().role(userDO.getRole()).token(JwtUtils.sign(username)).build();
+        return ResponseUtil.success(loginVO);
+    }
+}

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/utils/ContextUtil.java

@@ -0,0 +1,23 @@
+package com.xuxd.kafka.console.utils;
+
+import java.util.HashMap;
+import java.util.Map;
+
+public class ContextUtil {
+
+    public static final String USERNAME = "username" ;
+
+    private static ThreadLocal<Map<String, Object>> context = ThreadLocal.withInitial(() -> new HashMap<>());
+
+    public static void set(String key, Object value){
+        context.get().put(key, value);
+    }
+
+    public static String get(String key){
+        return (String) context.get().get(key);
+    }
+
+    public static void clear(){
+        context.remove();
+    }
+}

src/main/java/com/xuxd/kafka/console/utils/ConvertUtil.java

@@ -1,17 +1,15 @@
 package com.xuxd.kafka.console.utils;
 
 import com.google.common.base.Preconditions;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.cglib.beans.BeanCopier;
+import org.springframework.objenesis.ObjenesisStd;
+import org.springframework.util.ClassUtils;
+
 import java.io.ByteArrayInputStream;
 import java.io.IOException;
-import java.util.Arrays;
-import java.util.HashMap;
-import java.util.Iterator;
-import java.util.LinkedList;
-import java.util.List;
-import java.util.Map;
-import java.util.Properties;
-import lombok.extern.slf4j.Slf4j;
-import org.springframework.util.ClassUtils;
+import java.util.*;
+import java.util.concurrent.ConcurrentHashMap;
 
 /**
  * kafka-console-ui.
@@ -22,6 +20,47 @@ import org.springframework.util.ClassUtils;
 @Slf4j
 public class ConvertUtil {
 
+    private static ThreadLocal<ObjenesisStd> objenesisStdThreadLocal = ThreadLocal.withInitial(ObjenesisStd::new);
+    private static ConcurrentHashMap<Class<?>, ConcurrentHashMap<Class<?>, BeanCopier>> cache = new ConcurrentHashMap<>();
+
+    public static <T> T copy(Object source, Class<T> target) {
+        return copy(source, objenesisStdThreadLocal.get().newInstance(target));
+    }
+
+    public static <T> T copy(Object source, T target) {
+        if (null == source) {
+            return null;
+        }
+        BeanCopier beanCopier = getCacheBeanCopier(source.getClass(), target.getClass());
+        beanCopier.copy(source, target, null);
+        return target;
+    }
+
+    public static <T> List<T> copyList(List<?> sources, Class<T> target) {
+        if (sources.isEmpty()) {
+            return Collections.emptyList();
+        }
+
+        ArrayList<T> list = new ArrayList<>(sources.size());
+        ObjenesisStd objenesisStd = objenesisStdThreadLocal.get();
+        for (Object source : sources) {
+            if (source == null) {
+                break;
+            }
+            T newInstance = objenesisStd.newInstance(target);
+            BeanCopier beanCopier = getCacheBeanCopier(source.getClass(), target);
+            beanCopier.copy(source, newInstance, null);
+            list.add(newInstance);
+        }
+        return list;
+    }
+
+    private static <S, T> BeanCopier getCacheBeanCopier(Class<S> source, Class<T> target) {
+        ConcurrentHashMap<Class<?>, BeanCopier> copierConcurrentHashMap =
+                cache.computeIfAbsent(source, aClass -> new ConcurrentHashMap<>(16));
+        return copierConcurrentHashMap.computeIfAbsent(target, aClass -> BeanCopier.create(source, target, false));
+    }
+
     public static Map<String, Object> toMap(Object src) {
         Preconditions.checkNotNull(src);
         Map<String, Object> res = new HashMap<>();

src/main/java/com/xuxd/kafka/console/utils/JwtUtils.java

@@ -0,0 +1,43 @@
+package com.xuxd.kafka.console.utils;
+
+import io.jsonwebtoken.Claims;
+import io.jsonwebtoken.Jwts;
+import io.jsonwebtoken.SignatureAlgorithm;
+
+import java.util.Date;
+import java.util.HashMap;
+import java.util.Map;
+
+public class JwtUtils {
+
+    private static final String ISSUER = "kafka-console-ui";
+    private static final long EXPIRE_TIME = 5 * 24 * 60 * 60 * 1000;
+    private static final String PRIVATE_KEY = "~hello!kafka=console^ui";
+
+    public static String sign(String username){
+        Map<String,Object> header = new HashMap<>();
+        header.put("typ","JWT");
+        header.put("alg","HS256");
+        Map<String,Object> claims = new HashMap<>();
+        claims.put("username", username);
+        return Jwts.builder()
+                .setIssuer(ISSUER)
+                .setHeader(header)
+                .setClaims(claims)
+                .setIssuedAt(new Date())
+                .setExpiration(new Date(System.currentTimeMillis() + EXPIRE_TIME))
+                .signWith(SignatureAlgorithm.HS256, PRIVATE_KEY)
+                .compact();
+    }
+
+    public static String parse(String token){
+        try{
+            Claims claims = Jwts.parser()
+                    .setSigningKey(PRIVATE_KEY)
+                    .parseClaimsJws(token).getBody();
+            return (String) claims.get("username");
+        }catch (Exception e){
+            return null;
+        }
+    }
+}

src/main/java/com/xuxd/kafka/console/utils/Md5Utils.java

@@ -0,0 +1,12 @@
+package com.xuxd.kafka.console.utils;
+
+import org.springframework.util.DigestUtils;
+
+import java.nio.charset.StandardCharsets;
+
+public class Md5Utils {
+
+    public static String MD5(String s) {
+        return DigestUtils.md5DigestAsHex(s.getBytes(StandardCharsets.UTF_8));
+    }
+}

src/main/java/com/xuxd/kafka/console/utils/ResponseUtil.java

@@ -0,0 +1,15 @@
+package com.xuxd.kafka.console.utils;
+
+import com.xuxd.kafka.console.beans.ResponseData;
+
+public class ResponseUtil {
+
+    public static <T> ResponseData<T> success(T data) {
+        return ResponseData.create().data(data);
+    }
+
+    public static ResponseData<String> error(String msg) {
+        return ResponseData.create().failed(msg);
+    }
+
+}

src/main/resources/db/schema-h2.sql

@@ -34,4 +34,18 @@ CREATE TABLE IF NOT EXISTS T_CLUSTER_INFO
     UPDATE_TIME  TIMESTAMP    NOT NULL DEFAULT NOW() COMMENT '更新时间',
     PRIMARY KEY (ID),
     UNIQUE (CLUSTER_NAME)
+);
+
+-- 用户表
+CREATE TABLE IF NOT EXISTS T_DEVOPS_USER
+(
+    ID              IDENTITY    NOT NULL COMMENT '主键ID',
+    USERNAME        VARCHAR(50) NOT NULL DEFAULT '' COMMENT '用户名',
+    PASSWORD        VARCHAR(50) NOT NULL DEFAULT '' COMMENT '密码',
+    `ROLE`          VARCHAR(16) NOT NULL DEFAULT 'developer' COMMENT '角色',
+    `DELETE`        TINYINT(1)  NOT NULL DEFAULT '' COMMENT '删除标记',
+    CREATE_TIME     TIMESTAMP   NOT NULL DEFAULT NOW() COMMENT '创建时间',
+    UPDATE_TIME     TIMESTAMP   NOT NULL DEFAULT NOW() COMMENT '更新时间',
+    PRIMARY KEY (ID),
+    UNIQUE (USERNAME)
 );

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

@@ -0,0 +1,330 @@
+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 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 extends Logging {
+
+    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) => logger.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) {
+                logger.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/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/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]]]
 }

ui/package.json

@@ -17,11 +17,6 @@
     "vuex": "^3.4.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",

ui/src/App.vue

@@ -1,127 +1,5 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <h2 class="logo">Kafka 控制台</h2>
-      <router-link to="/" class="pad-l-r">主页</router-link>
-      <span>|</span
-      ><router-link to="/cluster-page" class="pad-l-r">集群</router-link>
-      <span>|</span
-      ><router-link to="/topic-page" class="pad-l-r">Topic</router-link>
-      <span>|</span
-      ><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="/op-page" class="pad-l-r">运维</router-link>
-      <span class="right">集群：{{ clusterName }}</span>
-    </div>
-    <router-view class="content" />
+    <router-view />
   </div>
-</template>
-<script>
-import { KafkaClusterApi } from "@/utils/api";
-import request from "@/utils/request";
-import { mapMutations, mapState } from "vuex";
-import { getClusterInfo } from "@/utils/local-cache";
-import notification from "ant-design-vue/lib/notification";
-import { CLUSTER } from "@/store/mutation-types";
-
-export default {
-  data() {
-    return {
-      config: {},
-    };
-  },
-  created() {
-    const clusterInfo = getClusterInfo();
-    if (!clusterInfo) {
-      request({
-        url: KafkaClusterApi.peekClusterInfo.url,
-        method: KafkaClusterApi.peekClusterInfo.method,
-      }).then((res) => {
-        if (res.code == 0) {
-          this.switchCluster(res.data);
-        } else {
-          notification.error({
-            message: "error",
-            description: res.msg,
-          });
-        }
-      });
-    } else {
-      this.switchCluster(clusterInfo);
-    }
-  },
-  computed: {
-    ...mapState({
-      clusterName: (state) => state.clusterInfo.clusterName,
-      enableSasl: (state) => state.clusterInfo.enableSasl,
-    }),
-  },
-  methods: {
-    ...mapMutations({
-      switchCluster: CLUSTER.SWITCH,
-    }),
-  },
-};
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
-
-#app {
-  width: 100%;
-  height: 100%;
-}
-
-#nav {
-  background-color: #9fe0e0;
-  font-size: large;
-  padding-top: 1%;
-  padding-bottom: 1%;
-  margin-bottom: 1%;
-  text-align: center;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #61c126;
-}
-
-.pad-l-r {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.content {
-  padding-left: 2%;
-  padding-right: 2%;
-  height: 90%;
-  width: 100%;
-}
-.logo {
-  float: left;
-  left: 1%;
-  top: 1%;
-  position: absolute;
-}
-.right {
-  float: right;
-  right: 1%;
-  top: 2%;
-  position: absolute;
-}
-</style>
+</template>

ui/src/components/Header.vue

@@ -0,0 +1,162 @@
+<template>
+  <div id="main">
+    <div id="nav">
+      <h2 class="logo">Kafka 控制台</h2>
+      <span v-show="manager">
+        <router-link to="/home" class="pad-l-r">主页</router-link>
+        <span>|</span>
+      </span>
+      <span>
+        <router-link to="/cluster-page" class="pad-l-r">集群</router-link>
+      </span>
+      <span>
+        <span>|</span>
+        <router-link to="/topic-page" class="pad-l-r">Topic</router-link>
+      </span>
+      <span>
+        <span>|</span>
+        <router-link to="/group-page" class="pad-l-r">消费组</router-link>
+      </span>
+      <span>
+        <span>|</span>
+        <router-link to="/message-page" class="pad-l-r">消息</router-link>
+      </span>
+      <span v-show="manager && enableSasl">
+        <span>|</span>
+        <router-link to="/acl-page" class="pad-l-r">Acl</router-link>
+      </span>
+      <span>
+        <span>|</span>
+        <router-link to="/op-page" class="pad-l-r">运维</router-link>
+      </span>
+      <span v-show="manager">
+        <span>|</span>
+        <router-link to="/devops/user" class="pad-l-r">用户</router-link>
+      </span>
+
+      <span class="right">
+        <span>集群：{{ clusterName }}</span>
+        <span> | </span>
+        <span @click="logout" style="cursor: pointer">登出</span>
+      </span>
+    </div>
+    <router-view class="content" />
+  </div>
+</template>
+<script>
+import { KafkaClusterApi } from "@/utils/api";
+import request from "@/utils/request";
+import { mapMutations, mapState } from "vuex";
+import { getClusterInfo } from "@/utils/local-cache";
+import notification from "ant-design-vue/lib/notification";
+import { CLUSTER } from "@/store/mutation-types";
+import {isManager} from "../utils/role";
+import router from "../router";
+
+export default {
+  name: "Header",
+  data() {
+    return {
+      manager: isManager(),
+      config: {},
+    };
+  },
+  created() {
+    const clusterInfo = getClusterInfo();
+    if (!clusterInfo) {
+      request({
+        url: KafkaClusterApi.peekClusterInfo.url,
+        method: KafkaClusterApi.peekClusterInfo.method,
+      }).then((res) => {
+        if (res.code == 0) {
+          this.switchCluster(res.data);
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    } else {
+      this.switchCluster(clusterInfo);
+    }
+  },
+  computed: {
+    ...mapState({
+      clusterName: (state) => state.clusterInfo.clusterName,
+      enableSasl: (state) => state.clusterInfo.enableSasl,
+    }),
+  },
+  methods: {
+    ...mapMutations({
+      switchCluster: CLUSTER.SWITCH,
+    }),
+    logout: function (){
+      localStorage.clear();
+      router.push("/")
+    }
+  },
+};
+</script>
+
+<style>
+#main {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
+
+#main {
+  width: 100%;
+  height: 100%;
+}
+
+#nav {
+  background-color: #9fe0e0;
+  font-size: large;
+  padding-top: 1%;
+  padding-bottom: 1%;
+  margin-bottom: 1%;
+  text-align: center;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #61c126;
+}
+
+.pad-l-r {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.content {
+  padding-left: 2%;
+  padding-right: 2%;
+  height: 90%;
+  width: 100%;
+}
+.logo {
+  float: left;
+  left: 1%;
+  top: 1%;
+  position: absolute;
+}
+.cluster {
+  float: right;
+  right: 8%;
+  top: 2%;
+  position: absolute;
+}
+.right {
+  float: right;
+  right: 2%;
+  top: 2%;
+  position: absolute;
+}
+</style>

ui/src/components/HelloWorld.vue

@@ -1,32 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HelloWorld",
-  props: {
-    msg: String,
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

ui/src/router/index.js

@@ -1,12 +1,30 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Home from "../views/Home.vue";
+import Home from "../views/home/Home.vue";
+import Login from "@/views/login/index";
 
 Vue.use(VueRouter);
 
 const routes = [
   {
     path: "/",
+    name: "Login",
+    component: Login,
+  },
+  {
+    path: "/main",
+    name: "Main",
+    component: () =>
+        import( "../components/Header"),
+  },
+  {
+    path: "/devops/user",
+    name: "DevOpsUser",
+    component: () =>
+        import( "../views/user/index"),
+  },
+  {
+    path: "/home",
     name: "Home",
     component: Home,
   },

ui/src/utils/api.js

@@ -92,6 +92,29 @@ export const KafkaConfigApi = {
   },
 };
 
+export const DevOpsUserAPi = {
+  createUser: {
+    url: "/devops/user/add",
+    method: "post",
+  },
+  userList: {
+    url: "/devops/user/list",
+    method: "get",
+  },
+  deleteUser: {
+    url: "/devops/user/",
+    method: "delete",
+  },
+  updateUser: {
+    url: "/devops/user/update",
+    method: "post",
+  },
+  login: {
+    url: "/devops/user/login",
+    method: "post",
+  },
+}
+
 export const KafkaTopicApi = {
   getTopicNameList: {
     url: "/topic",
@@ -203,6 +226,10 @@ export const KafkaClusterApi = {
     url: "/cluster/info/peek",
     method: "get",
   },
+  getBrokerApiVersionInfo: {
+    url: "/cluster/info/api/version",
+    method: "get",
+  },
 };
 
 export const KafkaOpApi = {
@@ -242,6 +269,10 @@ export const KafkaOpApi = {
     url: "/op/replication/reassignments",
     method: "delete",
   },
+  proposedAssignment: {
+    url: "/op/replication/reassignments/proposed",
+    method: "post",
+  },
 };
 export const KafkaMessageApi = {
   searchByTime: {

ui/src/utils/request.js

@@ -1,4 +1,5 @@
 import axios from "axios";
+import router from "../router";
 import notification from "ant-design-vue/es/notification";
 import { VueAxios } from "./axios";
 import { getClusterInfo } from "@/utils/local-cache";
@@ -25,15 +26,20 @@ const errorHandler = (error) => {
 // request interceptor
 request.interceptors.request.use((config) => {
   const clusterInfo = getClusterInfo();
+  config.headers["token"] = localStorage.getItem('token');
   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);
 
 // response interceptor
 request.interceptors.response.use((response) => {
+  if (response.data.code === -5000){
+    router.push({ path:'/'})
+    return
+  }
   return response.data;
 }, errorHandler);
 

ui/src/utils/role.js

@@ -0,0 +1,3 @@
+export function isManager() {
+    return 'manager' === localStorage.getItem("role");
+}

ui/src/utils/validate.js

@@ -0,0 +1,87 @@
+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername(str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
+}
+
+/**
+ * @param {string} url
+ * @returns {Boolean}
+ */
+export function validURL(url) {
+  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return reg.test(url)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validLowerCase(str) {
+  const reg = /^[a-z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUpperCase(str) {
+  const reg = /^[A-Z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validAlphabets(str) {
+  const reg = /^[A-Za-z]+$/
+  return reg.test(str)
+}
+
+/**
+ * @param {string} email
+ * @returns {Boolean}
+ */
+export function validEmail(email) {
+  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  return reg.test(email)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function isString(str) {
+  if (typeof str === 'string' || str instanceof String) {
+    return true
+  }
+  return false
+}
+
+/**
+ * @param {Array} arg
+ * @returns {Boolean}
+ */
+export function isArray(arg) {
+  if (typeof Array.isArray === 'undefined') {
+    return Object.prototype.toString.call(arg) === '[object Array]'
+  }
+  return Array.isArray(arg)
+}

ui/src/views/Home.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="home">
-    <a-card title="kafka console 配置" style="width: 100%">
-      <!--      <a slot="extra" href="#">more</a>-->
-      <p v-for="(v, k) in config" :key="k">{{ k }}={{ v }}</p>
-    </a-card>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import request from "@/utils/request";
-import { KafkaConfigApi } from "@/utils/api";
-import notification from "ant-design-vue/lib/notification";
-export default {
-  name: "Home",
-  components: {},
-  data() {
-    return {
-      config: {},
-    };
-  },
-
-  created() {
-    request({
-      url: KafkaConfigApi.getConfig.url,
-      method: KafkaConfigApi.getConfig.method,
-    }).then((res) => {
-      if (res.code == 0) {
-        this.config = res.data;
-      } else {
-        notification.error({
-          message: "error",
-          description: res.msg,
-        });
-      }
-    });
-  },
-};
-</script>

ui/src/views/acl/Acl.vue

@@ -1,157 +1,160 @@
 <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>
+  <div>
+    <Header/>
+    <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">
+                <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
+                size="small"
+                shape="round"
+                type="dashed"
+                style="float: right"
+                @click="onUserDetail(username)"
+            >详情</a-button
             >
-          </div>
+            </div>
 
-          <div slot="topicList" slot-scope="topicList, record">
-            <a
-              href="#"
-              v-for="t in topicList"
-              :key="t"
-              @click="onTopicDetail(t, record.username)"
+            <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>
+              </a>
+            </div>
 
-          <div slot="groupList" slot-scope="groupList, record">
-            <a
-              href="#"
-              v-for="t in groupList"
-              :key="t"
-              @click="onGroupDetail(t, record.username)"
+            <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>
+              </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)"
+            <div
+                slot="operation"
+                slot-scope="record"
+                v-show="!record.user || record.user.role != 'admin'"
             >
-              <a-button size="small" href="javascript:;" class="operation-btn"
-                >删除</a-button
+              <a-popconfirm
+                  :title="'删除用户: ' + record.username + '及相关权限？'"
+                  ok-text="确认"
+                  cancel-text="取消"
+                  @confirm="onDeleteUser(record)"
               >
-            </a-popconfirm>
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="onManageProducerAuth(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>
 
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="onManageConsumerAuth(record)"
+              <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-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-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>
+    </div>
   </div>
 </template>
 
@@ -165,7 +168,7 @@ 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 Header from "@/components/Header"
 export default {
   name: "Acl",
   components: {
@@ -175,6 +178,7 @@ export default {
     AddAuth,
     AclDetail,
     UserDetail,
+    Header
   },
   data() {
     return {

ui/src/views/cluster/Cluster.vue

@@ -1,43 +1,47 @@
 <template>
-  <div class="content">
-    <a-spin :spinning="loading">
-      <div class="body-c">
-        <div class="cluster-id">
-          <h3>集群ID：{{ clusterId }}</h3>
-        </div>
+  <div>
+    <Header/>
+    <div class="content">
+      <a-spin :spinning="loading">
+        <div class="body-c">
+          <div class="cluster-id">
+            <h3>集群ID：{{ clusterId }}</h3>
+          </div>
 
-        <a-table :columns="columns" :data-source="data" bordered row-key="id">
-          <div slot="addr" slot-scope="text, record">
-            {{ record.host }}:{{ record.port }}
-          </div>
-          <div slot="controller" slot-scope="text">
-            <span v-if="text" style="color: red">是</span><span v-else>否</span>
-          </div>
-          <div slot="operation" slot-scope="record" v-show="!record.internal">
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="openBrokerConfigDialog(record, false)"
+          <a-table :columns="columns" :data-source="data" bordered row-key="id">
+            <div slot="addr" slot-scope="text, record">
+              {{ record.host }}:{{ record.port }}
+            </div>
+            <div slot="controller" slot-scope="text">
+              <span v-if="text" style="color: red">是</span><span v-else>否</span>
+            </div>
+            <div slot="operation" slot-scope="record" v-show="!record.internal">
+              <a-button
+                  v-show="manager"
+                  size="small"
+                  href="javascript:;"
+                  class="operation-btn"
+                  @click="openBrokerConfigDialog(record, false)"
               >属性配置
-            </a-button>
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="openBrokerConfigDialog(record, true)"
+              </a-button>
+              <a-button
+                  size="small"
+                  href="javascript:;"
+                  class="operation-btn"
+                  @click="openBrokerConfigDialog(record, true)"
               >日志配置
-            </a-button>
-          </div>
-        </a-table>
-      </div>
-      <BrokerConfig
-        :visible="showBrokerConfigDialog"
-        :id="this.select.idString"
-        :is-logger-config="isLoggerConfig"
-        @closeBrokerConfigDialog="closeBrokerConfigDialog"
-      ></BrokerConfig>
-    </a-spin>
+              </a-button>
+            </div>
+          </a-table>
+        </div>
+        <BrokerConfig
+            :visible="showBrokerConfigDialog"
+            :id="this.select.idString"
+            :is-logger-config="isLoggerConfig"
+            @closeBrokerConfigDialog="closeBrokerConfigDialog"
+        ></BrokerConfig>
+      </a-spin>
+    </div>
   </div>
 </template>
 
@@ -46,12 +50,14 @@ import request from "@/utils/request";
 import { KafkaClusterApi } from "@/utils/api";
 import BrokerConfig from "@/views/cluster/BrokerConfig";
 import notification from "ant-design-vue/lib/notification";
-
+import Header from "@/components/Header"
+import {isManager} from "../../utils/role";
 export default {
   name: "Topic",
-  components: { BrokerConfig },
+  components: { BrokerConfig, Header },
   data() {
     return {
+      manager: isManager(),
       data: [],
       columns,
       loading: false,

ui/src/views/group/Group.vue

@@ -1,144 +1,148 @@
 <template>
-  <div class="content">
-    <a-spin :spinning="loading">
-      <div class="topic">
-        <div id="form-consumer-group-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="groupId"
-                    class="input-w"
-                    v-decorator="['groupId']"
-                  />
-                </a-form-item>
-              </a-col>
-              <a-col :span="12">
-                <a-form-item :label="`状态`">
-                  <a-checkbox-group
-                    v-decorator="['states']"
-                    style="width: 100%"
-                  >
-                    <a-row>
-                      <a-col :span="8">
-                        <a-checkbox value="Empty"> Empty</a-checkbox>
-                      </a-col>
-                      <a-col :span="8">
-                        <a-checkbox value="PreparingRebalance">
-                          PreparingRebalance
-                        </a-checkbox>
-                      </a-col>
-                      <a-col :span="8">
-                        <a-checkbox value="CompletingRebalance">
-                          CompletingRebalance
-                        </a-checkbox>
-                      </a-col>
-                      <a-col :span="8">
-                        <a-checkbox value="Stable"> Stable</a-checkbox>
-                      </a-col>
-                      <a-col :span="8">
-                        <a-checkbox value="Dead"> Dead</a-checkbox>
-                      </a-col>
-                    </a-row>
-                  </a-checkbox-group>
-                </a-form-item>
-              </a-col>
-
-              <a-col :span="4" :style="{ textAlign: 'right' }">
-                <a-form-item>
-                  <a-button type="primary" html-type="submit"> 搜索</a-button>
-                  <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
-                    重置
-                  </a-button>
-                </a-form-item>
-              </a-col>
-            </a-row>
-          </a-form>
-        </div>
-        <div class="operation-row-button">
-          <a-button type="primary" @click="openAddSubscriptionDialog"
-            >新增订阅</a-button
-          >
-        </div>
-        <a-table
-          :columns="columns"
-          :data-source="data"
-          bordered
-          row-key="groupId"
-        >
-          <div slot="members" slot-scope="text, record">
-            <a href="#" @click="openConsumerMemberDialog(record.groupId)"
-              >{{ text }}
-            </a>
-          </div>
-
-          <div slot="state" slot-scope="text">
-            {{ text }}
-            <!--          <span v-if="text" style="color: red">是</span><span v-else>否</span>-->
-          </div>
-
-          <div slot="operation" slot-scope="record" v-show="!record.internal">
-            <a-popconfirm
-              :title="'删除消费组: ' + record.groupId + '？'"
-              ok-text="确认"
-              cancel-text="取消"
-              @confirm="deleteGroup(record.groupId)"
+  <div>
+    <Header/>
+    <div class="content">
+      <a-spin :spinning="loading">
+        <div class="topic">
+          <div id="form-consumer-group-advanced-search">
+            <a-form
+                class="ant-advanced-search-form"
+                :form="form"
+                @submit="handleSearch"
             >
-              <a-button size="small" href="javascript:;" class="operation-btn"
-                >删除
-              </a-button>
-            </a-popconfirm>
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="openConsumerMemberDialog(record.groupId)"
-              >消费端
-            </a-button>
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="openConsumerDetailDialog(record.groupId)"
-              >消费详情
-            </a-button>
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="openOffsetPartitionDialog(record.groupId)"
-              >位移分区
-            </a-button>
+              <a-row :gutter="24">
+                <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="12">
+                  <a-form-item :label="`状态`">
+                    <a-checkbox-group
+                        v-decorator="['states']"
+                        style="width: 100%"
+                    >
+                      <a-row>
+                        <a-col :span="8">
+                          <a-checkbox value="Empty"> Empty</a-checkbox>
+                        </a-col>
+                        <a-col :span="8">
+                          <a-checkbox value="PreparingRebalance">
+                            PreparingRebalance
+                          </a-checkbox>
+                        </a-col>
+                        <a-col :span="8">
+                          <a-checkbox value="CompletingRebalance">
+                            CompletingRebalance
+                          </a-checkbox>
+                        </a-col>
+                        <a-col :span="8">
+                          <a-checkbox value="Stable"> Stable</a-checkbox>
+                        </a-col>
+                        <a-col :span="8">
+                          <a-checkbox value="Dead"> Dead</a-checkbox>
+                        </a-col>
+                      </a-row>
+                    </a-checkbox-group>
+                  </a-form-item>
+                </a-col>
+
+                <a-col :span="4" :style="{ textAlign: 'right' }">
+                  <a-form-item>
+                    <a-button type="primary" html-type="submit"> 搜索</a-button>
+                    <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
+                      重置
+                    </a-button>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+            </a-form>
           </div>
-        </a-table>
-        <Member
-          :visible="showConsumerGroupDialog"
-          :group="selectDetail.resourceName"
-          @closeConsumerMemberDialog="closeConsumerDialog"
-        ></Member>
-        <ConsumerDetail
-          :visible="showConsumerDetailDialog"
-          :group="selectDetail.resourceName"
-          @closeConsumerDetailDialog="closeConsumerDetailDialog"
-        >
-        </ConsumerDetail>
-        <AddSupscription
-          :visible="showAddSubscriptionDialog"
-          @closeAddSubscriptionDialog="closeAddSubscriptionDialog"
-        >
-        </AddSupscription>
-        <OffsetTopicPartition
-          :visible="showOffsetPartitionDialog"
-          :group="selectDetail.resourceName"
-          @closeOffsetPartitionDialog="closeOffsetPartitionDialog"
-        ></OffsetTopicPartition>
-      </div>
-    </a-spin>
+          <div v-show="manager" class="operation-row-button">
+            <a-button type="primary" @click="openAddSubscriptionDialog"
+            >新增订阅</a-button
+            >
+          </div>
+          <a-table
+              :columns="columns"
+              :data-source="data"
+              bordered
+              row-key="groupId"
+          >
+            <div slot="members" slot-scope="text, record">
+              <a href="#" @click="openConsumerMemberDialog(record.groupId)"
+              >{{ text }}
+              </a>
+            </div>
+
+            <div slot="state" slot-scope="text">
+              {{ text }}
+              <!--          <span v-if="text" style="color: red">是</span><span v-else>否</span>-->
+            </div>
+
+            <div slot="operation" slot-scope="record" v-show="!record.internal">
+              <a-popconfirm
+                  :title="'删除消费组: ' + record.groupId + '？'"
+                  ok-text="确认"
+                  cancel-text="取消"
+                  @confirm="deleteGroup(record.groupId)"
+              >
+                <a-button v-show="manager" size="small" href="javascript:;" class="operation-btn"
+                >删除
+                </a-button>
+              </a-popconfirm>
+              <a-button
+                  size="small"
+                  href="javascript:;"
+                  class="operation-btn"
+                  @click="openConsumerMemberDialog(record.groupId)"
+              >消费端
+              </a-button>
+              <a-button
+                  v-show="manager"
+                  size="small"
+                  href="javascript:;"
+                  class="operation-btn"
+                  @click="openConsumerDetailDialog(record.groupId)"
+              >消费详情
+              </a-button>
+              <a-button
+                  size="small"
+                  href="javascript:;"
+                  class="operation-btn"
+                  @click="openOffsetPartitionDialog(record.groupId)"
+              >位移分区
+              </a-button>
+            </div>
+          </a-table>
+          <Member
+              :visible="showConsumerGroupDialog"
+              :group="selectDetail.resourceName"
+              @closeConsumerMemberDialog="closeConsumerDialog"
+          ></Member>
+          <ConsumerDetail
+              :visible="showConsumerDetailDialog"
+              :group="selectDetail.resourceName"
+              @closeConsumerDetailDialog="closeConsumerDetailDialog"
+          >
+          </ConsumerDetail>
+          <AddSupscription
+              :visible="showAddSubscriptionDialog"
+              @closeAddSubscriptionDialog="closeAddSubscriptionDialog"
+          >
+          </AddSupscription>
+          <OffsetTopicPartition
+              :visible="showOffsetPartitionDialog"
+              :group="selectDetail.resourceName"
+              @closeOffsetPartitionDialog="closeOffsetPartitionDialog"
+          ></OffsetTopicPartition>
+        </div>
+      </a-spin>
+    </div>
   </div>
 </template>
 
@@ -150,12 +154,14 @@ import Member from "@/views/group/Member";
 import ConsumerDetail from "@/views/group/ConsumerDetail";
 import AddSupscription from "@/views/group/AddSupscription";
 import OffsetTopicPartition from "@/views/group/OffsetTopicPartition";
-
+import Header from "@/components/Header"
+import {isManager} from "../../utils/role";
 export default {
   name: "ConsumerGroup",
-  components: { Member, ConsumerDetail, AddSupscription, OffsetTopicPartition },
+  components: { Member, ConsumerDetail, AddSupscription, OffsetTopicPartition, Header },
   data() {
     return {
+      manager: isManager(),
       queryParam: {},
       data: [],
       columns,

ui/src/views/home/Home.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <Header/>
+    <div class="content">
+      <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>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import request from "@/utils/request";
+import { KafkaConfigApi, KafkaClusterApi } from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
+import VersionInfo from "@/views/home/VersionInfo";
+import Header from "@/components/Header"
+export default {
+  name: "Home",
+  components: { VersionInfo, Header },
+  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({
+      url: KafkaConfigApi.getConfig.url,
+      method: KafkaConfigApi.getConfig.method,
+    }).then((res) => {
+      if (res.code == 0) {
+        this.config = res.data;
+      } else {
+        notification.error({
+          message: "error",
+          description: res.msg,
+        });
+      }
+    });
+    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/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/login/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="login">
+    <div class="kafka-console-ui">
+      <span style="font-size: xxx-large; font-weight: bold">kafka-console-ui</span>
+    </div>
+    <div>
+        <a-form
+            :form="form"
+            :label-col="{ span: 10 }"
+            :wrapper-col="{ span: 4 }"
+            @submit="handleSubmit"
+        >
+          <a-form-item label="账号">
+            <a-input
+                v-decorator="[
+                'username',
+                { rules: [{ required: true, message: '请输入账号' }] },
+              ]"
+                placeholder="请输入账号"
+            />
+          </a-form-item>
+          <a-form-item label="密码">
+            <a-input
+                v-decorator="[
+                'password',
+                { rules: [{ required: true, message: '请输入密码' }] },
+              ]"
+                placeholder="请输入密码"
+            />
+          </a-form-item>
+          <a-form-item :wrapper-col="{ span: 10, offset: 10 }">
+            <a-button type="primary" html-type="submit"> 提交 </a-button>
+          </a-form-item>
+        </a-form>
+    </div>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+import notification from "ant-design-vue/lib/notification";
+import request from "@/utils/request";
+import { DevOpsUserAPi } from "@/utils/api";
+
+export default {
+  name: 'login',
+  data(){
+    return{
+      form: this.$form.createForm(this, { name: "coordinated" }),
+    }
+  },methods:{
+    handleSubmit(e){
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          if (values.configs) {
+            const config = {};
+            values.configs.split("\n").forEach((e) => {
+              const c = e.split("=");
+              if (c.length > 1) {
+                let k = c[0].trim(),
+                    v = c[1].trim();
+                if (k && v) {
+                  config[k] = v;
+                }
+              }
+            });
+            values.configs = config;
+          }
+          request({
+            url: DevOpsUserAPi.login.url,
+            method: DevOpsUserAPi.login.method,
+            data: values,
+          }).then((res) => {
+            if (res.code == 0) {
+              localStorage.setItem('token', res.data.token)
+              localStorage.setItem('role', res.data.role)
+              this.$router.push({ path:'/main'})
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    }
+  }
+}
+</script>
+<style>
+.kafka-console-ui{
+  text-align: center;
+  height: 100px;
+  margin-top: 50px;
+  margin-bottom: 20px;
+}
+</style>

ui/src/views/message/Message.vue

@@ -1,18 +1,21 @@
 <template>
-  <div class="content">
-    <a-spin :spinning="loading">
-      <a-tabs default-active-key="1" size="large" tabPosition="top">
-        <a-tab-pane key="1" tab="根据时间查询消息">
-          <SearchByTime :topic-list="topicList"></SearchByTime>
-        </a-tab-pane>
-        <a-tab-pane key="2" tab="根据偏移查询消息">
-          <SearchByOffset :topic-list="topicList"></SearchByOffset>
-        </a-tab-pane>
-        <a-tab-pane key="3" tab="在线发送">
-          <SendMessage :topic-list="topicList"></SendMessage>
-        </a-tab-pane>
-      </a-tabs>
-    </a-spin>
+  <div>
+    <Header/>
+    <div class="content">
+      <a-spin :spinning="loading">
+        <a-tabs default-active-key="1" size="large" tabPosition="top">
+          <a-tab-pane key="1" tab="根据时间查询消息">
+            <SearchByTime :topic-list="topicList"></SearchByTime>
+          </a-tab-pane>
+          <a-tab-pane key="2" tab="根据偏移查询消息">
+            <SearchByOffset :topic-list="topicList"></SearchByOffset>
+          </a-tab-pane>
+          <a-tab-pane key="3" tab="在线发送">
+            <SendMessage :topic-list="topicList"></SendMessage>
+          </a-tab-pane>
+        </a-tabs>
+      </a-spin>
+    </div>
   </div>
 </template>
 
@@ -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 Header from "@/components/Header"
 export default {
   name: "Message",
-  components: { SearchByTime, SearchByOffset, SendMessage },
+  components: { SearchByTime, SearchByOffset, SendMessage, Header },
   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

@@ -1,130 +1,147 @@
 <template>
-  <div class="content">
-    <div class="content-module">
-      <a-card title="集群管理" style="width: 100%; text-align: left">
-        <p>
-          <a-button type="primary" @click="openClusterInfoDialog">
-            集群切换
-          </a-button>
-          <label>说明：</label>
-          <span
+  <div>
+    <Header/>
+    <div class="content">
+      <div class="content-module">
+        <a-card title="集群管理" style="width: 100%; text-align: left">
+          <p>
+            <a-button type="primary" @click="openClusterInfoDialog">
+              集群切换
+            </a-button>
+            <label>说明：</label>
+            <span
             >多集群管理：增加、删除集群配置，切换选中集群为当前操作集群。</span
-          >
-        </p>
-      </a-card>
-    </div>
-    <div class="content-module">
-      <a-card title="Broker管理" style="width: 100%; text-align: left">
-        <p>
-          <a-button type="primary" @click="openConfigThrottleDialog">
-            配置限流
-          </a-button>
-          <label>说明：</label>
-          <span
+            >
+          </p>
+        </a-card>
+      </div>
+      <div class="content-module" v-show="manager">
+        <a-card title="Broker管理" style="width: 100%; text-align: left">
+          <p>
+            <a-button type="primary" @click="openConfigThrottleDialog">
+              配置限流
+            </a-button>
+            <label>说明：</label>
+            <span
             >设置指定broker上的topic的副本之间数据同步占用的带宽，这个设置是broker级别的，但是设置后还要去对应的topic上进行限流配置，指定对这个topic的相关副本进行限制</span
-          >
-        </p>
-        <p>
-          <a-button type="primary" @click="openRemoveThrottleDialog">
-            解除限流
-          </a-button>
-          <label>说明：</label>
-          <span>解除指定broker上的topic副本之间数据同步占用的带宽限制</span>
-        </p>
-      </a-card>
-    </div>
-    <div class="content-module">
-      <a-card title="副本管理" style="width: 100%; text-align: left">
-        <p>
-          <a-button type="primary" @click="openElectPreferredLeaderDialog">
-            首选副本作为leader
-          </a-button>
-          <label>说明：</label>
-          <span>将集群中所有分区leader副本设置为首选副本</span>
-        </p>
-        <p>
-          <a-button type="primary" @click="openCurrentReassignmentsDialog">
-            副本变更详情
-          </a-button>
-          <label>说明：</label>
-          <span>查看正在进行副本变更/重分配的任务，或者将其取消</span>
-        </p>
-      </a-card>
-    </div>
-    <!--    隐藏数据同步相关-->
-    <div class="content-module" v-show="false">
-      <a-card title="数据同步" style="width: 100%; text-align: left">
-        <p v-show="true">
-          <a-button type="primary" @click="openDataSyncSchemeDialog">
-            数据同步方案
-          </a-button>
-          <label>说明：</label>
-          <span>新老集群迁移、数据同步解决方案</span>
-        </p>
-        <p>
-          <a-button type="primary" @click="openMinOffsetAlignmentDialog">
-            最小位移对齐
-          </a-button>
-          <label>说明：</label>
-          <span
+            >
+          </p>
+          <p>
+            <a-button type="primary" @click="openRemoveThrottleDialog">
+              解除限流
+            </a-button>
+            <label>说明：</label>
+            <span>解除指定broker上的topic副本之间数据同步占用的带宽限制</span>
+          </p>
+        </a-card>
+      </div>
+      <div class="content-module" v-show="manager">
+        <a-card title="副本管理" style="width: 100%; text-align: left">
+          <p>
+            <a-button type="primary" @click="openElectPreferredLeaderDialog">
+              首选副本作为leader
+            </a-button>
+            <label>说明：</label>
+            <span>将集群中所有分区leader副本设置为首选副本</span>
+          </p>
+          <p>
+            <a-button type="primary" @click="openCurrentReassignmentsDialog">
+              副本变更详情
+            </a-button>
+            <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>
+      <!--    隐藏数据同步相关-->
+      <div class="content-module" v-show="false">
+        <a-card title="数据同步" style="width: 100%; text-align: left">
+          <p v-show="true">
+            <a-button type="primary" @click="openDataSyncSchemeDialog">
+              数据同步方案
+            </a-button>
+            <label>说明：</label>
+            <span>新老集群迁移、数据同步解决方案</span>
+          </p>
+          <p>
+            <a-button type="primary" @click="openMinOffsetAlignmentDialog">
+              最小位移对齐
+            </a-button>
+            <label>说明：</label>
+            <span
             >同步消费位点时需要获取两端集群中订阅分区的最小位移进行消费位点计算，如需后面同步消费位点，在进行数据同步前，先进行最小位移对齐，
             点击右侧查看：</span
-          ><a href="javascript:;" @click="openOffsetAlignmentInfoDialog"
-            >对齐信息</a
+            ><a href="javascript:;" @click="openOffsetAlignmentInfoDialog"
+          >对齐信息</a
           >
-        </p>
-        <p>
-          <a-button type="primary" @click="openSyncConsumerOffsetDialog">
-            同步消费位点
-          </a-button>
-          <label>说明：</label>
-          <span
+          </p>
+          <p>
+            <a-button type="primary" @click="openSyncConsumerOffsetDialog">
+              同步消费位点
+            </a-button>
+            <label>说明：</label>
+            <span
             >同步其它集群中指定消费组与订阅的topic的消费位点到当前集群上，该消费组在当前集群已存在，且双方订阅的topic分区信息一致</span
-          >
-        </p>
-      </a-card>
+            >
+          </p>
+        </a-card>
+      </div>
+      <SyncConsumerOffset
+          :visible="syncData.showSyncConsumerOffsetDialog"
+          @closeSyncConsumerOffsetDialog="closeSyncConsumerOffsetDialog"
+      >
+      </SyncConsumerOffset>
+      <MinOffsetAlignment
+          :visible="syncData.showMinOffsetAlignmentDialog"
+          @closeMinOffsetAlignmentDialog="closeMinOffsetAlignmentDialog"
+      >
+      </MinOffsetAlignment>
+      <OffsetAlignmentTable
+          :visible="syncData.showOffsetAlignmentInfoDialog"
+          @closeOffsetAlignmentInfoDialog="closeOffsetAlignmentInfoDialog"
+      ></OffsetAlignmentTable>
+      <ElectPreferredLeader
+          :visible="replicationManager.showElectPreferredLeaderDialog"
+          @closeElectPreferredLeaderDialog="closeElectPreferredLeaderDialog"
+      ></ElectPreferredLeader>
+      <DataSyncScheme
+          :visible="syncData.showDataSyncSchemeDialog"
+          @closeDataSyncSchemeDialog="closeDataSyncSchemeDialog"
+      >
+      </DataSyncScheme>
+      <ConfigThrottle
+          :visible="brokerManager.showConfigThrottleDialog"
+          @closeConfigThrottleDialog="closeConfigThrottleDialog"
+      >
+      </ConfigThrottle>
+      <RemoveThrottle
+          :visible="brokerManager.showRemoveThrottleDialog"
+          @closeRemoveThrottleDialog="closeRemoveThrottleDialog"
+      >
+      </RemoveThrottle>
+      <CurrentReassignments
+          :visible="replicationManager.showCurrentReassignmentsDialog"
+          @closeCurrentReassignmentsDialog="closeCurrentReassignmentsDialog"
+      ></CurrentReassignments>
+      <ClusterInfo
+          :visible="clusterManager.showClusterInfoDialog"
+          @closeClusterInfoDialog="closeClusterInfoDialog"
+      ></ClusterInfo>
+      <ReplicaReassign
+          :visible="replicationManager.showReplicaReassignDialog"
+          @closeReplicaReassignDialog="closeReplicaReassignDialog"
+      >
+      </ReplicaReassign>
     </div>
-    <SyncConsumerOffset
-      :visible="syncData.showSyncConsumerOffsetDialog"
-      @closeSyncConsumerOffsetDialog="closeSyncConsumerOffsetDialog"
-    >
-    </SyncConsumerOffset>
-    <MinOffsetAlignment
-      :visible="syncData.showMinOffsetAlignmentDialog"
-      @closeMinOffsetAlignmentDialog="closeMinOffsetAlignmentDialog"
-    >
-    </MinOffsetAlignment>
-    <OffsetAlignmentTable
-      :visible="syncData.showOffsetAlignmentInfoDialog"
-      @closeOffsetAlignmentInfoDialog="closeOffsetAlignmentInfoDialog"
-    ></OffsetAlignmentTable>
-    <ElectPreferredLeader
-      :visible="replicationManager.showElectPreferredLeaderDialog"
-      @closeElectPreferredLeaderDialog="closeElectPreferredLeaderDialog"
-    ></ElectPreferredLeader>
-    <DataSyncScheme
-      :visible="syncData.showDataSyncSchemeDialog"
-      @closeDataSyncSchemeDialog="closeDataSyncSchemeDialog"
-    >
-    </DataSyncScheme>
-    <ConfigThrottle
-      :visible="brokerManager.showConfigThrottleDialog"
-      @closeConfigThrottleDialog="closeConfigThrottleDialog"
-    >
-    </ConfigThrottle>
-    <RemoveThrottle
-      :visible="brokerManager.showRemoveThrottleDialog"
-      @closeRemoveThrottleDialog="closeRemoveThrottleDialog"
-    >
-    </RemoveThrottle>
-    <CurrentReassignments
-      :visible="replicationManager.showCurrentReassignmentsDialog"
-      @closeCurrentReassignmentsDialog="closeCurrentReassignmentsDialog"
-    ></CurrentReassignments>
-    <ClusterInfo
-      :visible="clusterManager.showClusterInfoDialog"
-      @closeClusterInfoDialog="closeClusterInfoDialog"
-    ></ClusterInfo>
   </div>
 </template>
 
@@ -138,6 +155,9 @@ 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";
+import Header from "@/components/Header"
+import {isManager} from "../../utils/role";
 export default {
   name: "Operation",
   components: {
@@ -150,9 +170,12 @@ export default {
     RemoveThrottle,
     CurrentReassignments,
     ClusterInfo,
+    ReplicaReassign,
+    Header
   },
   data() {
     return {
+      manager: isManager(),
       syncData: {
         showSyncConsumerOffsetDialog: false,
         showMinOffsetAlignmentDialog: false,
@@ -162,6 +185,7 @@ export default {
       replicationManager: {
         showElectPreferredLeaderDialog: false,
         showCurrentReassignmentsDialog: false,
+        showReplicaReassignDialog: false,
       },
       brokerManager: {
         showConfigThrottleDialog: false,
@@ -227,6 +251,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/topic/PartitionInfo.vue

@@ -31,7 +31,7 @@
               {{ i }}
             </span>
           </div>
-          <div slot="operation" slot-scope="record" v-show="!record.internal">
+          <div slot="operation" slot-scope="record" v-show="!record.internal && manager">
             <a-popconfirm
               :title="
                 'topic: ' +
@@ -68,6 +68,7 @@ import request from "@/utils/request";
 import { KafkaOpApi, KafkaTopicApi } from "@/utils/api";
 import notification from "ant-design-vue/es/notification";
 import moment from "moment";
+import {isManager} from "../../utils/role";
 export default {
   name: "PartitionInfo",
   props: {
@@ -82,6 +83,7 @@ export default {
   },
   data() {
     return {
+      manager: isManager(),
       columns: columns,
       show: this.visible,
       data: [],

ui/src/views/topic/Topic.vue

@@ -1,176 +1,185 @@
 <template>
-  <div class="content">
-    <a-spin :spinning="loading">
-      <div class="topic">
-        <div id="components-form-topic-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="`topic`">
-                  <a-input
-                    placeholder="topic"
-                    class="input-w"
-                    v-decorator="['topic']"
-                    @change="onTopicUpdate"
-                  />
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-form-item :label="`类型`">
-                  <a-select
-                    class="type-select"
-                    v-model="type"
-                    placeholder="选择类型"
-                    @change="getTopicList"
-                  >
-                    <a-select-option value="all"> 所有</a-select-option>
-                    <a-select-option value="normal"> 普通</a-select-option>
-                    <a-select-option value="system"> 系统</a-select-option>
-                  </a-select>
-                </a-form-item>
-              </a-col>
-
-              <a-col :span="8" :style="{ textAlign: 'right' }">
-                <a-form-item>
-                  <a-button type="primary" html-type="submit"> 刷新</a-button>
-                  <!--                  <a-button :style="{ marginLeft: '8px' }" @click="handleReset">-->
-                  <!--                    重置-->
-                  <!--                  </a-button>-->
-                </a-form-item>
-              </a-col>
-            </a-row>
-          </a-form>
-        </div>
-        <div class="operation-row-button">
-          <a-button type="primary" @click="openCreateTopicDialog"
-            >新增</a-button
-          >
-        </div>
-        <a-table
-          :columns="columns"
-          :data-source="filteredData"
-          bordered
-          row-key="name"
-        >
-          <div slot="partitions" slot-scope="text, record">
-            <a href="#" @click="openPartitionInfoDialog(record.name)"
-              >{{ text }}
-            </a>
-          </div>
-
-          <div slot="internal" slot-scope="text">
-            <span v-if="text" style="color: red">是</span><span v-else>否</span>
-          </div>
-
-          <div slot="operation" slot-scope="record" v-show="!record.internal">
-            <a-popconfirm
-              :title="'删除topic: ' + record.name + '？'"
-              ok-text="确认"
-              cancel-text="取消"
-              @confirm="deleteTopic(record.name)"
+  <div>
+    <Header/>
+    <div class="content">
+      <a-spin :spinning="loading">
+        <div class="topic">
+          <div id="components-form-topic-advanced-search">
+            <a-form
+                class="ant-advanced-search-form"
+                :form="form"
+                @submit="handleSearch"
             >
-              <a-button size="small" href="javascript:;" class="operation-btn"
-                >删除
-              </a-button>
-            </a-popconfirm>
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="openPartitionInfoDialog(record.name)"
-              >分区详情
-            </a-button>
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="openAddPartitionDialog(record.name)"
-              >增加分区
-            </a-button>
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="openConsumedDetailDialog(record.name)"
-              >消费详情
-            </a-button>
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="openTopicConfigDialog(record.name)"
-              >属性配置
-            </a-button>
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="openUpdateReplicaDialog(record.name)"
-              >变更副本
-            </a-button>
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="openMessageStatsDialog(record.name)"
-              >发送统计
-            </a-button>
-            <a-button
-              size="small"
-              href="javascript:;"
-              class="operation-btn"
-              @click="openThrottleDialog(record.name)"
-              >限流
-            </a-button>
+              <a-row :gutter="24">
+                <a-col :span="8">
+                  <a-form-item :label="`topic`">
+                    <a-input
+                        placeholder="topic"
+                        class="input-w"
+                        v-decorator="['topic']"
+                        @change="onTopicUpdate"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-item :label="`类型`">
+                    <a-select
+                        class="type-select"
+                        v-model="type"
+                        placeholder="选择类型"
+                        @change="getTopicList"
+                    >
+                      <a-select-option value="all"> 所有</a-select-option>
+                      <a-select-option value="normal"> 普通</a-select-option>
+                      <a-select-option value="system"> 系统</a-select-option>
+                    </a-select>
+                  </a-form-item>
+                </a-col>
+
+                <a-col :span="8" :style="{ textAlign: 'right' }">
+                  <a-form-item>
+                    <a-button type="primary" html-type="submit"> 刷新</a-button>
+                    <!--                  <a-button :style="{ marginLeft: '8px' }" @click="handleReset">-->
+                    <!--                    重置-->
+                    <!--                  </a-button>-->
+                  </a-form-item>
+                </a-col>
+              </a-row>
+            </a-form>
           </div>
-        </a-table>
-        <PartitionInfo
-          :topic="selectDetail.resourceName"
-          :visible="showPartitionInfo"
-          @closePartitionInfoDialog="closePartitionInfoDialog"
-        ></PartitionInfo>
-        <CreateTopic
-          :visible="showCreateTopic"
-          @closeCreateTopicDialog="closeCreateTopicDialog"
-        >
-        </CreateTopic>
-        <AddPartition
-          :visible="showAddPartition"
-          :topic="selectDetail.resourceName"
-          @closeAddPartitionDialog="closeAddPartitionDialog"
-        ></AddPartition>
-        <ConsumedDetail
-          :visible="showConsumedDetailDialog"
-          :topic="selectDetail.resourceName"
-          @closeConsumedDetailDialog="closeConsumedDetailDialog"
-        >
-        </ConsumedDetail>
-        <TopicConfig
-          :visible="showTopicConfigDialog"
-          :topic="selectDetail.resourceName"
-          @closeTopicConfigDialog="closeTopicConfigDialog"
-        ></TopicConfig>
-        <UpdateReplica
-          :visible="showUpdateReplicaDialog"
-          :topic="selectDetail.resourceName"
-          @closeUpdateReplicaDialog="closeUpdateReplicaDialog"
-        ></UpdateReplica>
-        <ConfigTopicThrottle
-          :visible="showThrottleDialog"
-          :topic="selectDetail.resourceName"
-          @closeThrottleDialog="closeThrottleDialog"
-        ></ConfigTopicThrottle>
-        <SendStats
-          :visible="showSendStatsDialog"
-          :topic="selectDetail.resourceName"
-          @closeMessageStatsDialog="closeMessageStatsDialog"
-        ></SendStats>
-      </div>
-    </a-spin>
+          <div v-show="manager" class="operation-row-button">
+            <a-button type="primary" @click="openCreateTopicDialog"
+            >新增</a-button
+            >
+          </div>
+          <a-table
+              :columns="columns"
+              :data-source="filteredData"
+              bordered
+              row-key="name"
+          >
+            <div slot="partitions" slot-scope="text, record">
+              <a href="#" @click="openPartitionInfoDialog(record.name)"
+              >{{ text }}
+              </a>
+            </div>
+
+            <div slot="internal" slot-scope="text">
+              <span v-if="text" style="color: red">是</span><span v-else>否</span>
+            </div>
+
+            <div slot="operation" slot-scope="record" v-show="!record.internal">
+              <a-popconfirm
+                  v-show="manager"
+                  :title="'删除topic: ' + record.name + '？'"
+                  ok-text="确认"
+                  cancel-text="取消"
+                  @confirm="deleteTopic(record.name)"
+              >
+                <a-button size="small" href="javascript:;" class="operation-btn"
+                >删除
+                </a-button>
+              </a-popconfirm>
+              <a-button
+                  v-show="manager"
+                  size="small"
+                  href="javascript:;"
+                  class="operation-btn"
+                  @click="openPartitionInfoDialog(record.name)"
+              >分区详情
+              </a-button>
+              <a-button
+                  v-show="manager"
+                  size="small"
+                  href="javascript:;"
+                  class="operation-btn"
+                  @click="openAddPartitionDialog(record.name)"
+              >增加分区
+              </a-button>
+              <a-button
+                  size="small"
+                  href="javascript:;"
+                  class="operation-btn"
+                  @click="openConsumedDetailDialog(record.name)"
+              >消费详情
+              </a-button>
+              <a-button
+                  v-show="manager"
+                  size="small"
+                  href="javascript:;"
+                  class="operation-btn"
+                  @click="openTopicConfigDialog(record.name)"
+              >属性配置
+              </a-button>
+              <a-button
+                  v-show="manager"
+                  size="small"
+                  href="javascript:;"
+                  class="operation-btn"
+                  @click="openUpdateReplicaDialog(record.name)"
+              >变更副本
+              </a-button>
+              <a-button
+                  size="small"
+                  href="javascript:;"
+                  class="operation-btn"
+                  @click="openMessageStatsDialog(record.name)"
+              >发送统计
+              </a-button>
+              <a-button
+                  v-show="manager"
+                  size="small"
+                  href="javascript:;"
+                  class="operation-btn"
+                  @click="openThrottleDialog(record.name)"
+              >限流
+              </a-button>
+            </div>
+          </a-table>
+          <PartitionInfo
+              :topic="selectDetail.resourceName"
+              :visible="showPartitionInfo"
+              @closePartitionInfoDialog="closePartitionInfoDialog"
+          ></PartitionInfo>
+          <CreateTopic
+              :visible="showCreateTopic"
+              @closeCreateTopicDialog="closeCreateTopicDialog"
+          >
+          </CreateTopic>
+          <AddPartition
+              :visible="showAddPartition"
+              :topic="selectDetail.resourceName"
+              @closeAddPartitionDialog="closeAddPartitionDialog"
+          ></AddPartition>
+          <ConsumedDetail
+              :visible="showConsumedDetailDialog"
+              :topic="selectDetail.resourceName"
+              @closeConsumedDetailDialog="closeConsumedDetailDialog"
+          >
+          </ConsumedDetail>
+          <TopicConfig
+              :visible="showTopicConfigDialog"
+              :topic="selectDetail.resourceName"
+              @closeTopicConfigDialog="closeTopicConfigDialog"
+          ></TopicConfig>
+          <UpdateReplica
+              :visible="showUpdateReplicaDialog"
+              :topic="selectDetail.resourceName"
+              @closeUpdateReplicaDialog="closeUpdateReplicaDialog"
+          ></UpdateReplica>
+          <ConfigTopicThrottle
+              :visible="showThrottleDialog"
+              :topic="selectDetail.resourceName"
+              @closeThrottleDialog="closeThrottleDialog"
+          ></ConfigTopicThrottle>
+          <SendStats
+              :visible="showSendStatsDialog"
+              :topic="selectDetail.resourceName"
+              @closeMessageStatsDialog="closeMessageStatsDialog"
+          ></SendStats>
+        </div>
+      </a-spin>
+    </div>
   </div>
 </template>
 
@@ -186,7 +195,8 @@ import TopicConfig from "@/views/topic/TopicConfig";
 import UpdateReplica from "@/views/topic/UpdateReplica";
 import ConfigTopicThrottle from "@/views/topic/ConfigTopicThrottle";
 import SendStats from "@/views/topic/SendStats";
-
+import Header from "@/components/Header"
+import {isManager} from "../../utils/role";
 export default {
   name: "Topic",
   components: {
@@ -198,9 +208,11 @@ export default {
     UpdateReplica,
     ConfigTopicThrottle,
     SendStats,
+    Header
   },
   data() {
     return {
+      manager: isManager(),
       queryParam: { type: "normal" },
       data: [],
       columns,

ui/src/views/user/CreateUser.vue

@@ -0,0 +1,135 @@
+<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="账号">
+            <a-input
+              v-decorator="[
+                'username',
+                { rules: [{ required: true, message: '请输入用户名!' }] },
+              ]"
+              placeholder="请输入用户名"
+            />
+          </a-form-item>
+          <a-form-item label="密码">
+            <a-input
+                v-decorator="[
+                'password',
+                { rules: [{ required: true, message: '请输入密码!' }] },
+              ]"
+                placeholder="请输入密码"
+            />
+          </a-form-item>
+          <a-form-item label="角色">
+            <a-select
+                option-filter-prop="role"
+                v-decorator="[
+                'role',
+                { rules: [{ required: true, message: '请选择一个角色!' }] },
+              ]"
+                placeholder="请选择一个角色"
+            >
+              <a-select-option v-for="v in roleList" :key="v" :value="v">
+                {{ v }}
+              </a-select-option>
+            </a-select>
+          </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 notification from "ant-design-vue/es/notification";
+import {DevOpsUserAPi} from "../../utils/api";
+export default {
+  name: "CreateUser",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: this.visible,
+      data: [],
+      roleList: roleList,
+      loading: false,
+      form: this.$form.createForm(this, { name: "coordinated" }),
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+    },
+  },
+  methods: {
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          if (values.configs) {
+            const config = {};
+            values.configs.split("\n").forEach((e) => {
+              const c = e.split("=");
+              if (c.length > 1) {
+                let k = c[0].trim(),
+                  v = c[1].trim();
+                if (k && v) {
+                  config[k] = v;
+                }
+              }
+            });
+            values.configs = config;
+          }
+          this.loading = true;
+          request({
+            url: DevOpsUserAPi.createUser.url,
+            method: DevOpsUserAPi.createUser.method,
+            data: values,
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.$message.success(res.msg);
+              this.$emit("closeCreateUserDialog", { refresh: true });
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    handleCancel() {
+      this.data = [];
+      this.$emit("closeCreateUserDialog", { refresh: false });
+    },
+  },
+};
+const roleList = ["developer", "manager"]
+</script>
+
+<style scoped></style>

ui/src/views/user/ResetPassword.vue

@@ -0,0 +1,123 @@
+<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="账号">
+            <a-input
+              :disabled="true"
+              v-decorator="['username', { initialValue: username }]"
+              placeholder="username"
+            />
+          </a-form-item>
+          <a-form-item label="密码">
+            <a-input
+                v-decorator="[
+                'password',
+                { rules: [{ required: true, message: '请输入密码!' }] },
+              ]"
+                placeholder="请输入密码"
+            />
+          </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 { DevOpsUserAPi } from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+export default {
+  name: "UpdatePassword",
+  props: {
+    username: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: this.visible,
+      data: [],
+      loading: false,
+      form: this.$form.createForm(this, { name: "coordinated" }),
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+    },
+  },
+  methods: {
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          if (values.assignment) {
+            const assignment = {};
+            values.assignment.split("\n").forEach((e) => {
+              const c = e.split("=");
+              if (c.length > 1) {
+                let k = c[0];
+                let v = c[1];
+                let arr = v.split(",");
+                if (arr.length > 0) {
+                  assignment[k] = arr;
+                }
+              }
+            });
+            values.assignment = assignment;
+          }
+          this.loading = true;
+          request({
+            url: DevOpsUserAPi.updateUser.url,
+            method: DevOpsUserAPi.updateUser.method,
+            data: values,
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.$message.success(res.msg);
+              this.$emit("closeResetPasswordDialog", { refresh: true });
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    handleCancel() {
+      this.data = [];
+      this.$emit("closeResetPasswordDialog", { refresh: false });
+    },
+  },
+};
+</script>
+
+<style scoped></style>

ui/src/views/user/index.vue

@@ -0,0 +1,227 @@
+<template>
+  <div>
+    <Header/>
+    <div class="content">
+      <a-spin :spinning="loading">
+        <div class="user">
+          <div class="operation-row-button">
+            <a-button type="primary" @click="openCreateUserDialog"
+            >新增</a-button
+            >
+          </div>
+          <a-table
+              :columns="columns"
+              :data-source="data"
+              bordered
+              row-key="name"
+          >
+            <div slot="role" slot-scope="text, record">
+              <a-select
+                  @change="handleRoleChange(record.username, text)"
+                  v-model="text"
+                  option-filter-prop="role"
+                  v-decorator="['role']"
+                  style="width: 200px"
+              >
+                <a-select-option v-for="v in roleList" :key="v" :value="v">
+                  {{ v }}
+                </a-select-option>
+              </a-select>
+            </div>
+            <div slot="operation" slot-scope="record">
+              <a-popconfirm
+                  :title="'删除用户: ' + record.username + ' ？'"
+                  ok-text="确认"
+                  cancel-text="取消"
+                  @confirm="deleteUser(record.id)"
+              >
+                <a-button size="small" href="javascript:;" class="operation-btn"
+                >删除
+                </a-button>
+              </a-popconfirm>
+              <a-button
+                  size="small"
+                  href="javascript:;"
+                  class="operation-btn"
+                  @click="resetPassword(record.username)"
+              >重置密码
+              </a-button>
+            </div>
+          </a-table>
+          <CreateUser
+              :visible="showCreateUser"
+              @closeCreateUserDialog="closeCreateUserDialog"
+          >
+          </CreateUser>
+          <ResetPassword
+              :visible="showResetPassword"
+              :username="selectDetail.resourceName"
+              @closeResetPasswordDialog="closeResetPasswordDialog"
+          ></ResetPassword>
+        </div>
+      </a-spin>
+    </div>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+import notification from "ant-design-vue/es/notification";
+import CreateUser from "@/views/user/CreateUser";
+import ResetPassword from "@/views/user/ResetPassword"
+import Header from "@/components/Header"
+import {DevOpsUserAPi} from "../../utils/api";
+export default {
+  name: "DevOpsUser",
+  components: {
+    CreateUser,
+    ResetPassword,
+    Header
+  },
+  data() {
+    return {
+      queryParam: { type: "normal" },
+      roleList: ["developer", "manager"],
+      columns,
+      showUpdateUser: false,
+      deleteUserConfirm: false,
+      selectDetail: {
+        resourceName: "",
+        resourceType: "",
+        username: "",
+      },
+      loading: false,
+      showCreateUser: false,
+      showResetPassword: false,
+      type: "normal",
+    };
+  },
+  methods: {
+    handleRoleChange(username, role) {
+      this.loading = true;
+      request({
+        url: DevOpsUserAPi.updateUser.url,
+        method: DevOpsUserAPi.updateUser.method,
+        data: {
+          "username": username,
+          "role": role
+        }
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.$message.success(res.msg);
+          this.getDevOpsUserList();
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+    getDevOpsUserList() {
+      Object.assign(this.queryParam, { type: this.type });
+      this.loading = true;
+      request({
+        url: DevOpsUserAPi.userList.url,
+        method: DevOpsUserAPi.userList.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.data = res.data;
+          //this.filter();
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+    deleteUser(id) {
+      request({
+        url: DevOpsUserAPi.deleteUser.url + "?id=" + id,
+        method: DevOpsUserAPi.deleteUser.method,
+      }).then((res) => {
+        if (res.code == 0) {
+          this.$message.success(res.msg);
+          this.getDevOpsUserList();
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+    openCreateUserDialog() {
+      this.showCreateUser = true;
+    },
+    closeCreateUserDialog(res) {
+      this.showCreateUser = false;
+      if (res.refresh) {
+        this.getDevOpsUserList();
+      }
+    },
+    resetPassword(username) {
+      this.selectDetail.resourceName = username;
+      this.showResetPassword = true;
+    },
+    closeResetPasswordDialog(res) {
+      this.showResetPassword = false;
+      if (res.refresh) {
+        this.getDevOpsUserList();
+      }
+    },
+  },
+  created() {
+    this.getDevOpsUserList();
+  },
+};
+
+const columns = [
+  {
+    title: "账号",
+    dataIndex: "username",
+    key: "username",
+  },
+  {
+    title: "角色",
+    dataIndex: "role",
+    key: "role",
+    slots: { title: "role" },
+    scopedSlots: { customRender: "role" },
+    width: 300
+  },
+  {
+    title: "创建时间",
+    dataIndex: "createTime",
+    key: "createTime",
+    slots: { title: "createTime" },
+    width: 300
+  },
+  {
+    title: "操作",
+    key: "operation",
+    scopedSlots: { customRender: "operation" },
+  },
+];
+</script>
+
+<style scoped>
+.user {
+  width: 100%;
+  height: 100%;
+}
+
+.operation-row-button {
+  height: 4%;
+  text-align: left;
+  margin-bottom: 8px;
+}
+
+.operation-btn {
+  margin-right: 3%;
+}
+
+</style>