show topic partition info

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

@@ -0,0 +1,34 @@
+package com.xuxd.kafka.console.beans.vo;
+
+import java.util.List;
+import java.util.stream.Collectors;
+import lombok.Data;
+import org.apache.kafka.common.Node;
+import org.apache.kafka.common.TopicPartitionInfo;
+
+/**
+ * kafka-console-ui.
+ *
+ * @author xuxd
+ * @date 2021-09-23 15:15:29
+ **/
+@Data
+public class TopicPartitionVO {
+
+    private int partition;
+
+    private String leader;
+
+    private List<String> replicas;
+
+    private List<String> isr;
+
+    public static TopicPartitionVO from(TopicPartitionInfo partitionInfo) {
+        TopicPartitionVO partitionVO = new TopicPartitionVO();
+        partitionVO.setPartition(partitionInfo.partition());
+        partitionVO.setLeader(partitionInfo.leader().toString());
+        partitionVO.setReplicas(partitionInfo.replicas().stream().map(Node::toString).collect(Collectors.toList()));
+        partitionVO.setIsr(partitionInfo.isr().stream().map(Node::toString).collect(Collectors.toList()));
+        return partitionVO;
+    }
+}

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

@@ -31,4 +31,9 @@ public class TopicController {
     public Object deleteTopic(@RequestParam String topic) {
         return topicService.deleteTopic(topic);
     }
+
+    @GetMapping("/partition")
+    public Object getTopicPartitionInfo(@RequestParam String topic) {
+        return topicService.getTopicPartitionInfo(topic);
+    }
 }

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

@@ -16,4 +16,6 @@ public interface TopicService {
     ResponseData getTopicList(String topic, TopicType type);
 
     ResponseData deleteTopic(String topic);
+
+    ResponseData getTopicPartitionInfo(String topic);
 }

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

@@ -3,6 +3,7 @@ package com.xuxd.kafka.console.service.impl;
 import com.xuxd.kafka.console.beans.ResponseData;
 import com.xuxd.kafka.console.beans.enums.TopicType;
 import com.xuxd.kafka.console.beans.vo.TopicDescriptionVO;
+import com.xuxd.kafka.console.beans.vo.TopicPartitionVO;
 import com.xuxd.kafka.console.service.TopicService;
 import java.util.Collections;
 import java.util.Comparator;
@@ -70,4 +71,14 @@ public class TopicServiceImpl implements TopicService {
         Tuple2<Object, String> tuple2 = topicConsole.deleteTopic(topic);
         return (Boolean) tuple2._1 ? ResponseData.create().success() : ResponseData.create().failed(tuple2._2);
     }
+
+    @Override public ResponseData getTopicPartitionInfo(String topic) {
+        List<TopicDescription> list = topicConsole.getTopicList(Collections.singleton(topic));
+        if (list.isEmpty()) {
+            return ResponseData.create().success();
+        }
+        TopicDescription topicDescription = list.get(0);
+
+        return ResponseData.create().data(topicDescription.partitions().stream().map(p -> TopicPartitionVO.from(p))).success();
+    }
 }

src/main/resources/application.yml

@@ -19,9 +19,9 @@ kafka:
     # 超级管理员密码
     admin-password: admin
     # 启动自动创建配置的超级管理员用户
-    admin-create: true
+    admin-create: false
     # broker连接的zk地址
-    zookeeper-addr: localhost:2181
+    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}";
 
 spring:

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

@@ -56,6 +56,12 @@ class TopicConsole(config: KafkaConfig) extends KafkaConsole(config: KafkaConfig
         }
     }
 
+    /**
+     * delete topic by topic name.
+     *
+     * @param topic topic name.
+     * @return result or : fail message.
+     */
     def deleteTopic(topic: String): (Boolean, String) = {
         withAdminClientAndCatchError(admin => {
             admin.deleteTopics(Collections.singleton(topic), new DeleteTopicsOptions().retryOnQuotaViolation(false)).all().get(timeoutMs, TimeUnit.MILLISECONDS)

ui/src/utils/api.js

@@ -65,6 +65,10 @@ export const KafkaTopicApi = {
     url: "/topic",
     method: "delete",
   },
+  getPartitionInfo: {
+    url: "/topic/partition",
+    method: "get",
+  },
 };
 
 export const KafkaConsumerApi = {

ui/src/views/topic/PartitionInfo.vue

@@ -0,0 +1,120 @@
+<template>
+  <a-modal
+    title="分区详情"
+    :visible="show"
+    :width="1800"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      <a-table
+        :columns="columns"
+        :data-source="data"
+        :rowKey="
+          (record, index) => {
+            return index;
+          }
+        "
+      >
+        <ul slot="replicas" slot-scope="text">
+          <ol v-for="i in text" :key="i">
+            {{
+              i
+            }}
+          </ol>
+        </ul>
+        <ul slot="isr" slot-scope="text">
+          <ol v-for="i in text" :key="i">
+            {{
+              i
+            }}
+          </ol>
+        </ul>
+      </a-table>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaTopicApi } from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+export default {
+  name: "PartitionInfo",
+  props: {
+    topic: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      columns: columns,
+      show: this.visible,
+      data: [],
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.getPartitionInfo();
+      }
+    },
+  },
+  methods: {
+    getPartitionInfo() {
+      request({
+        url: KafkaTopicApi.getPartitionInfo.url + "?topic=" + this.topic,
+        method: KafkaTopicApi.getPartitionInfo.method,
+      }).then((res) => {
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.data = res.data;
+        }
+      });
+    },
+    handleCancel() {
+      this.$emit("closePartitionInfoDialog", {});
+    },
+  },
+};
+
+const columns = [
+  {
+    title: "分区",
+    dataIndex: "partition",
+    key: "partition",
+  },
+  {
+    title: "leader",
+    dataIndex: "leader",
+    key: "leader",
+  },
+  {
+    title: "副本",
+    dataIndex: "replicas",
+    key: "replicas",
+    scopedSlots: { customRender: "replicas" },
+  },
+  {
+    title: "isr",
+    dataIndex: "isr",
+    key: "isr",
+    scopedSlots: { customRender: "isr" },
+  },
+];
+</script>
+
+<style scoped></style>

ui/src/views/topic/Topic.vue

@@ -46,8 +46,10 @@
         <a-button type="primary" @click="handleReset">新增/更新</a-button>
       </div>
       <a-table :columns="columns" :data-source="data" bordered row-key="name">
-        <div slot="partitions" slot-scope="text">
-          <a href="#">{{ text }} </a>
+        <div slot="partitions" slot-scope="text, record">
+          <a href="#" @click="openPartitionInfoDialog(record.name)"
+            >{{ text }}
+          </a>
         </div>
 
         <div slot="internal" slot-scope="text">
@@ -67,6 +69,11 @@
           </a-popconfirm>
         </div>
       </a-table>
+      <PartitionInfo
+        :topic="selectDetail.resourceName"
+        :visible="showPartitionInfo"
+        @closePartitionInfoDialog="closePartitionInfoDialog"
+      ></PartitionInfo>
     </div>
   </div>
 </template>
@@ -75,9 +82,10 @@
 import request from "@/utils/request";
 import { KafkaTopicApi } from "@/utils/api";
 import notification from "ant-design-vue/es/notification";
+import PartitionInfo from "@/views/topic/PartitionInfo";
 export default {
   name: "Topic",
-  components: {},
+  components: { PartitionInfo },
   data() {
     return {
       queryParam: { type: "all" },
@@ -92,6 +100,7 @@ export default {
         resourceType: "",
         username: "",
       },
+      showPartitionInfo: false,
     };
   },
   methods: {
@@ -130,6 +139,13 @@ export default {
         }
       });
     },
+    openPartitionInfoDialog(topic) {
+      this.selectDetail.resourceName = topic;
+      this.showPartitionInfo = true;
+    },
+    closePartitionInfoDialog() {
+      this.showPartitionInfo = false;
+    },
   },
   created() {
     this.getTopicList();