add topic console

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

@@ -3,10 +3,8 @@ package com.xuxd.kafka.console.service.impl;
 import com.xuxd.kafka.console.beans.ResponseData;
 import com.xuxd.kafka.console.beans.vo.TopicDescriptionVO;
 import com.xuxd.kafka.console.service.TopicService;
-import java.util.Arrays;
 import java.util.Comparator;
 import java.util.List;
-import java.util.Set;
 import kafka.console.TopicConsole;
 import lombok.extern.slf4j.Slf4j;
 import org.apache.kafka.clients.admin.TopicDescription;
@@ -31,7 +29,7 @@ public class TopicServiceImpl implements TopicService {
     }
 
     @Override public ResponseData getTopicList() {
-        List<TopicDescription>  topicDescriptions = topicConsole.getTopicList(topicConsole.getTopicNameList());
+        List<TopicDescription> topicDescriptions = topicConsole.getTopicList(topicConsole.getTopicNameList());
         topicDescriptions.sort(Comparator.comparing(TopicDescription::name));
 
         return ResponseData.create().data(topicDescriptions.stream().map(d -> TopicDescriptionVO.from(d))).success();

src/main/resources/application.yml

@@ -8,10 +8,10 @@ kafka:
   config:
     # kafka broker地址，多个以逗号分隔
 #    bootstrap-server: 'localhost:9092'
-    bootstrap-server: '10.100.64.48:9092,10.100.77.250:9092,10.100.73.154:9092'
     request-timeout-ms: 60000
     # 服务端是否启用acl，如果不启用，下面的几项都忽略即可
     enable-acl: true
+    # 只支持2种安全协议SASL_PLAINTEXT和PLAINTEXT，启用acl则设置为SASL_PLAINTEXT，不启用acl不需关心这个配置
     security-protocol: SASL_PLAINTEXT
     sasl-mechanism: SCRAM-SHA-256
     # 超级管理员用户名，在broker上已经配置为超级管理员

ui/src/App.vue

@@ -16,7 +16,7 @@
   </div>
 </template>
 <script>
-import { KafkaAclApi } from "@/utils/api";
+import { KafkaConfigApi } from "@/utils/api";
 import request from "@/utils/request";
 
 export default {
@@ -27,8 +27,8 @@ export default {
   },
   created() {
     request({
-      url: KafkaAclApi.getConfig.url,
+      url: KafkaConfigApi.getConfig.url,
-      method: KafkaAclApi.getConfig.method,
+      method: KafkaConfigApi.getConfig.method,
     }).then((res) => {
       this.config = res.data;
     });

ui/src/router/index.js

@@ -25,6 +25,18 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "topic" */ "../views/topic/Topic.vue"),
   },
+  {
+    path: "/group",
+    name: "Group",
+    component: () =>
+      import(/* webpackChunkName: "group" */ "../views/group/Group.vue"),
+  },
+  {
+    path: "/op",
+    name: "Operation",
+    component: () =>
+      import(/* webpackChunkName: "op" */ "../views/op/Operation.vue"),
+  },
 ];
 
 const router = new VueRouter({

ui/src/utils/api.js

@@ -47,8 +47,18 @@ export const KafkaAclApi = {
     url: "/acl",
     method: "delete",
   },
+};
+
+export const KafkaConfigApi = {
   getConfig: {
     url: "/config",
     method: "get",
   },
 };
+
+export const KafkaTopicApi = {
+  getTopicList: {
+    url: "/topic/list",
+    method: "get",
+  },
+};

ui/src/views/acl/Acl.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <div class="acl">
-      <div id="components-form-demo-advanced-search">
+      <div id="components-form-acl-advanced-search">
         <a-form
           class="ant-advanced-search-form"
           :form="form"
@@ -391,12 +391,12 @@ const columns = [
   flex: 1;
 }
 
-#components-form-demo-advanced-search .ant-form {
+#components-form-acl-advanced-search .ant-form {
   max-width: none;
   margin-bottom: 1%;
 }
 
-#components-form-demo-advanced-search .search-result-list {
+#components-form-acl-advanced-search .search-result-list {
   margin-top: 16px;
   border: 1px dashed #e9e9e9;
   border-radius: 6px;

ui/src/views/group/Group.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <HelloWorld msg="This is group console."></HelloWorld>
+  </div>
+</template>
+
+<script>
+import HelloWorld from "@/components/HelloWorld.vue";
+export default {
+  name: "Group",
+  components: {
+    HelloWorld,
+  },
+};
+</script>
+
+<style scoped></style>

ui/src/views/op/Operation.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <HelloWorld msg="This is operation console."></HelloWorld>
+  </div>
+</template>
+
+<script>
+import HelloWorld from "@/components/HelloWorld.vue";
+export default {
+  name: "Operation",
+  components: {
+    HelloWorld,
+  },
+};
+</script>
+
+<style scoped></style>

ui/src/views/topic/Topic.vue

@@ -1,18 +1,202 @@
 <template>
-  <div>
+  <div class="content">
-    <HelloWorld msg="This is topic console."></HelloWorld>
+    <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']"
+                />
+              </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="handleReset">新增/更新</a-button>
+      </div>
+      <a-table :columns="columns" :data-source="data" bordered>
+        <div slot="partitions" slot-scope="text">
+          <a href="#">{{ text }} </a>
+        </div>
+
+        <div slot="internal" slot-scope="text">
+          <span v-if="text">是</span><span v-else>否</span>
+        </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="handleReset(record)"
+          >
+            <a-button size="small" href="javascript:;" class="operation-btn"
+              >删除</a-button
+            >
+          </a-popconfirm>
+        </div>
+      </a-table>
+    </div>
   </div>
 </template>
 
 <script>
-import HelloWorld from "@/components/HelloWorld.vue";
+import request from "@/utils/request";
-
+import { KafkaTopicApi } from "@/utils/api";
 export default {
   name: "Topic",
-  components: {
+  components: {},
-    HelloWorld,
+  data() {
+    return {
+      queryParam: {},
+      data: [],
+      columns,
+      selectRow: {},
+      form: this.$form.createForm(this, { name: "advanced_search" }),
+      showUpdateUser: false,
+      deleteUserConfirm: false,
+      selectDetail: {
+        resourceName: "",
+        resourceType: "",
+        username: "",
+      },
+    };
+  },
+  methods: {
+    handleSearch(e) {
+      e.preventDefault();
+      this.form.validateFields((error, values) => {
+        let queryParam = {};
+        if (values.username) {
+          queryParam.username = values.username;
+        }
+        if (values.topic) {
+          queryParam.resourceType = "TOPIC";
+          queryParam.resourceName = values.topic;
+        } else if (values.groupId) {
+          queryParam.resourceType = "GROUP";
+          queryParam.resourceName = values.groupId;
+        }
+        Object.assign(this.queryParam, queryParam);
+      });
+    },
+
+    handleReset() {
+      this.form.resetFields();
+    },
+
+    getTopicList() {
+      request({
+        url: KafkaTopicApi.getTopicList.url,
+        method: KafkaTopicApi.getTopicList.method,
+      }).then((res) => {
+        this.data = res.data;
+      });
+    },
+  },
+  created() {
+    this.getTopicList();
   },
 };
+
+const columns = [
+  {
+    title: "topic",
+    dataIndex: "name",
+    key: "name",
+    width: 300,
+  },
+  {
+    title: "分区数",
+    dataIndex: "partitions",
+    key: "partitions",
+    slots: { title: "partitions" },
+    scopedSlots: { customRender: "partitions" },
+  },
+  {
+    title: "内部topic",
+    dataIndex: "internal",
+    key: "internal",
+    slots: { title: "internal" },
+    scopedSlots: { customRender: "internal" },
+  },
+  {
+    title: "操作",
+    key: "operation",
+    scopedSlots: { customRender: "operation" },
+    width: 500,
+  },
+];
 </script>
 
-<style scoped></style>
+<style scoped>
+.topic {
+  width: 100%;
+  height: 100%;
+}
+
+.ant-advanced-search-form {
+  padding: 24px;
+  background: #fbfbfb;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+}
+
+.ant-advanced-search-form .ant-form-item {
+  display: flex;
+}
+
+.ant-advanced-search-form .ant-form-item-control-wrapper {
+  flex: 1;
+}
+
+#components-form-topic-advanced-search .ant-form {
+  max-width: none;
+  margin-bottom: 1%;
+}
+
+#components-form-topic-advanced-search .search-result-list {
+  margin-top: 16px;
+  border: 1px dashed #e9e9e9;
+  border-radius: 6px;
+  background-color: #fafafa;
+  min-height: 200px;
+  text-align: center;
+  padding-top: 80px;
+}
+
+.input-w {
+  width: 400px;
+}
+
+.operation-row-button {
+  height: 4%;
+  text-align: left;
+}
+
+.operation-btn {
+  margin-right: 3%;
+}
+</style>