集群列表、新增集群

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

@@ -0,0 +1,38 @@
+package com.xuxd.kafka.console.beans.dto;
+
+import com.xuxd.kafka.console.beans.dos.ClusterInfoDO;
+import com.xuxd.kafka.console.utils.ConvertUtil;
+import lombok.Data;
+import org.apache.commons.lang3.StringUtils;
+
+/**
+ * kafka-console-ui.
+ *
+ * @author xuxd
+ * @date 2022-01-04 20:19:03
+ **/
+@Data
+public class ClusterInfoDTO {
+    private Long id;
+
+    private String clusterName;
+
+    private String address;
+
+    private String properties;
+
+    private String updateTime;
+
+    public ClusterInfoDO to() {
+        ClusterInfoDO infoDO = new ClusterInfoDO();
+        infoDO.setId(id);
+        infoDO.setClusterName(clusterName);
+        infoDO.setAddress(address);
+
+        if (StringUtils.isNotBlank(properties)) {
+            infoDO.setProperties(ConvertUtil.propertiesStr2JsonStr(properties));
+        }
+
+        return infoDO;
+    }
+}

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

@@ -0,0 +1,40 @@
+package com.xuxd.kafka.console.beans.vo;
+
+import com.xuxd.kafka.console.beans.dos.ClusterInfoDO;
+import com.xuxd.kafka.console.utils.ConvertUtil;
+import java.util.List;
+import lombok.Data;
+import org.apache.commons.lang3.StringUtils;
+
+/**
+ * kafka-console-ui.
+ *
+ * @author xuxd
+ * @date 2022-01-04 19:16:11
+ **/
+@Data
+public class ClusterInfoVO {
+
+    private Long id;
+
+    private String clusterName;
+
+    private String address;
+
+    private List<String> properties;
+
+    private String updateTime;
+
+    public static ClusterInfoVO from(ClusterInfoDO infoDO) {
+        ClusterInfoVO vo = new ClusterInfoVO();
+        vo.setId(infoDO.getId());
+        vo.setClusterName(infoDO.getClusterName());
+        vo.setAddress(infoDO.getAddress());
+        vo.setUpdateTime(infoDO.getUpdateTime());
+        if (StringUtils.isNotBlank(infoDO.getProperties())) {
+            vo.setProperties(ConvertUtil.jsonStr2List(infoDO.getProperties()));
+        }
+        return vo;
+
+    }
+}

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

@@ -57,6 +57,7 @@ public class Bootstrap implements SmartInitializingSingleton {
         infoDO.setAddress(config.getBootstrapServer().trim());
         infoDO.setProperties(ConvertUtil.toJsonString(config.getProperties()));
         clusterInfoMapper.insert(infoDO);
+        log.info("Insert default config: {}", infoDO);
     }
 
     @Override public void afterSingletonsInstantiated() {

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

@@ -1,8 +1,11 @@
 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.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
@@ -23,4 +26,14 @@ public class ClusterController {
     public Object getClusterInfo() {
         return clusterService.getClusterInfo();
     }
+
+    @GetMapping("/list")
+    public Object getClusterInfoList() {
+        return clusterService.getClusterInfoList();
+    }
+
+    @PostMapping
+    public Object addClusterInfo(@RequestBody ClusterInfoDTO dto) {
+        return clusterService.addClusterInfo(dto.to());
+    }
 }

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

@@ -1,6 +1,7 @@
 package com.xuxd.kafka.console.service;
 
 import com.xuxd.kafka.console.beans.ResponseData;
+import com.xuxd.kafka.console.beans.dos.ClusterInfoDO;
 
 /**
  * kafka-console-ui.
@@ -10,4 +11,8 @@ import com.xuxd.kafka.console.beans.ResponseData;
  **/
 public interface ClusterService {
     ResponseData getClusterInfo();
+
+    ResponseData getClusterInfoList();
+
+    ResponseData addClusterInfo(ClusterInfoDO infoDO);
 }

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

@@ -1,7 +1,11 @@
 package com.xuxd.kafka.console.service.impl;
 
 import com.xuxd.kafka.console.beans.ResponseData;
+import com.xuxd.kafka.console.beans.dos.ClusterInfoDO;
+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.stream.Collectors;
 import kafka.console.ClusterConsole;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
@@ -18,7 +22,21 @@ public class ClusterServiceImpl implements ClusterService {
     @Autowired
     private ClusterConsole clusterConsole;
 
+    @Autowired
+    private ClusterInfoMapper clusterInfoMapper;
+
     @Override public ResponseData getClusterInfo() {
         return ResponseData.create().data(clusterConsole.clusterInfo()).success();
     }
+
+    @Override public ResponseData getClusterInfoList() {
+        return ResponseData.create().data(clusterInfoMapper.selectList(null)
+            .stream().map(ClusterInfoVO::from).collect(Collectors.toList())).success();
+    }
+
+    @Override public ResponseData addClusterInfo(ClusterInfoDO infoDO) {
+        clusterInfoMapper.insert(infoDO);
+        return ResponseData.create().success();
+    }
+
 }

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

@@ -1,9 +1,13 @@
 package com.xuxd.kafka.console.utils;
 
 import com.google.common.base.Preconditions;
+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;
@@ -53,4 +57,36 @@ public class ConvertUtil {
     public static Properties toProperties(String jsonStr) {
         return GsonUtil.INSTANCE.get().fromJson(jsonStr, Properties.class);
     }
+
+    public static String jsonStr2PropertiesStr(String jsonStr) {
+        StringBuilder sb = new StringBuilder();
+        Map<String, Object> map = GsonUtil.INSTANCE.get().fromJson(jsonStr, Map.class);
+        map.keySet().forEach(k -> {
+            sb.append(k).append("=").append(map.get(k).toString()).append(System.lineSeparator());
+        });
+
+        return sb.toString();
+    }
+
+    public static List<String> jsonStr2List(String jsonStr) {
+        List<String> res = new LinkedList<>();
+        Map<String, Object> map = GsonUtil.INSTANCE.get().fromJson(jsonStr, Map.class);
+        map.forEach((k, v) -> {
+            res.add(k + "=" + v);
+        });
+
+        return res;
+    }
+
+    public static String propertiesStr2JsonStr(String propertiesStr) {
+        String res = "{}";
+        try (ByteArrayInputStream baos = new ByteArrayInputStream(propertiesStr.getBytes())) {
+            Properties properties = new Properties();
+            properties.load(baos);
+            res = toJsonString(properties);
+        } catch (IOException e) {
+            log.error("propertiesStr2JsonStr error.", e);
+        }
+        return res;
+    }
 }

ui/src/utils/api.js

@@ -183,6 +183,14 @@ export const KafkaClusterApi = {
     url: "/cluster",
     method: "get",
   },
+  getClusterInfoList: {
+    url: "/cluster/list",
+    method: "get",
+  },
+  addClusterInfo: {
+    url: "/cluster",
+    method: "post",
+  },
 };
 
 export const KafkaOpApi = {

ui/src/views/op/AddClusterInfo.vue

@@ -0,0 +1,117 @@
+<template>
+  <a-modal
+    title="增加集群配置"
+    :visible="show"
+    :width="1000"
+    :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="[
+                'clusterName',
+                { rules: [{ required: true, message: '输入集群名称!' }] },
+              ]"
+              placeholder="输入集群名称"
+            />
+          </a-form-item>
+          <a-form-item label="集群地址">
+            <a-input
+              v-decorator="[
+                'address',
+                { rules: [{ required: true, message: '输入集群地址!' }] },
+              ]"
+              placeholder="输入集群地址"
+            />
+          </a-form-item>
+          <a-form-item label="属性">
+            <a-textarea
+              rows="5"
+              placeholder='可选参数，集群其它属性配置：
+request.timeout.ms=10000
+security-protocol=SASL_PLAINTEXT
+sasl-mechanism=SCRAM-SHA-256
+sasl-jaas-config=org.apache.kafka.common.security.scram.ScramLoginModule required username="name" password="password";
+'
+              v-decorator="['properties']"
+            />
+          </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 { KafkaClusterApi } from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+export default {
+  name: "AddClusterInfo",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: this.visible,
+      data: [],
+      loading: false,
+      form: this.$form.createForm(this, { name: "AddClusterInfoForm" }),
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+    },
+  },
+  methods: {
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.loading = true;
+          request({
+            url: KafkaClusterApi.addClusterInfo.url,
+            method: KafkaClusterApi.addClusterInfo.method,
+            data: values,
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.$message.success(res.msg);
+              this.$emit("closeAddClusterInfoDialog", { refresh: true });
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    handleCancel() {
+      this.data = [];
+      this.$emit("closeAddClusterInfoDialog", { refresh: false });
+    },
+  },
+};
+</script>
+
+<style scoped></style>

ui/src/views/op/ClusterInfo.vue

@@ -0,0 +1,161 @@
+<template>
+  <a-modal
+    title="集群信息"
+    :visible="show"
+    :width="1200"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      <a-spin :spinning="loading">
+        <div>
+          <a-button
+            type="primary"
+            href="javascript:;"
+            class="operation-btn"
+            @click="openAddClusterInfoDialog"
+            >新增集群
+          </a-button>
+          <br /><br />
+        </div>
+
+        <a-table
+          :columns="columns"
+          :data-source="data"
+          bordered
+          :rowKey="(record) => record.id"
+        >
+          <div slot="properties" slot-scope="record">
+            <div v-for="p in record" :key="p">{{ p }}</div>
+          </div>
+          <div slot="operation" slot-scope="record">
+            <a-button
+              type="primary"
+              size="small"
+              href="javascript:;"
+              class="operation-btn"
+              >切换
+            </a-button>
+            <a-button size="small" href="javascript:;" class="operation-btn"
+              >编辑
+            </a-button>
+            <a-popconfirm
+              :title="'删除: ' + record.clusterName + '？'"
+              ok-text="确认"
+              cancel-text="取消"
+              @confirm="deleteClusterInfo(record)"
+            >
+              <a-button
+                size="small"
+                href="javascript:;"
+                class="operation-btn"
+                type="danger"
+                >删除
+              </a-button>
+            </a-popconfirm>
+          </div>
+        </a-table>
+        <AddClusterInfo
+          :visible="showAddClusterInfoDialog"
+          @closeAddClusterInfoDialog="closeAddClusterInfoDialog"
+        >
+        </AddClusterInfo>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaClusterApi } from "@/utils/api";
+import AddClusterInfo from "@/views/op/AddClusterInfo";
+
+export default {
+  name: "Cluster",
+  components: { AddClusterInfo },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      columns: columns,
+      show: this.visible,
+      data: [],
+      loading: false,
+      showAddClusterInfoDialog: false,
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.getClusterInfoList();
+      }
+    },
+  },
+  methods: {
+    getClusterInfoList() {
+      this.loading = true;
+      request({
+        url: KafkaClusterApi.getClusterInfoList.url,
+        method: KafkaClusterApi.getClusterInfoList.method,
+      }).then((res) => {
+        this.loading = false;
+        this.data = res.data;
+      });
+    },
+    deleteClusterInfo() {},
+    handleCancel() {
+      this.data = [];
+      this.$emit("closeClusterInfoDialog", {});
+    },
+    openAddClusterInfoDialog() {
+      this.showAddClusterInfoDialog = true;
+    },
+    closeAddClusterInfoDialog(res) {
+      this.showAddClusterInfoDialog = false;
+      if (res.refresh) {
+        this.getClusterInfoList();
+      }
+    },
+  },
+};
+
+const columns = [
+  {
+    title: "集群名称",
+    dataIndex: "clusterName",
+    key: "clusterName",
+  },
+  {
+    title: "地址",
+    dataIndex: "address",
+    key: "address",
+    width: 400,
+  },
+  {
+    title: "属性",
+    dataIndex: "properties",
+    key: "properties",
+    scopedSlots: { customRender: "properties" },
+  },
+  {
+    title: "操作",
+    key: "operation",
+    scopedSlots: { customRender: "operation" },
+    width: 200,
+  },
+];
+</script>
+
+<style scoped>
+.operation-btn {
+  margin-right: 3%;
+}
+</style>

ui/src/views/op/Operation.vue

@@ -3,7 +3,9 @@
     <div class="content-module">
       <a-card title="集群管理" style="width: 100%; text-align: left">
         <p>
-          <a-button type="primary"> 集群切换 </a-button>
+          <a-button type="primary" @click="openClusterInfoDialog">
+            集群切换
+          </a-button>
           <label>说明：</label>
           <span>多集群管理：增加、删除集群配置，切换集群</span>
         </p>
@@ -117,6 +119,10 @@
       :visible="replicationManager.showCurrentReassignmentsDialog"
       @closeCurrentReassignmentsDialog="closeCurrentReassignmentsDialog"
     ></CurrentReassignments>
+    <ClusterInfo
+      :visible="clusterManager.showClusterInfoDialog"
+      @closeClusterInfoDialog="closeClusterInfoDialog"
+    ></ClusterInfo>
   </div>
 </template>
 
@@ -129,6 +135,7 @@ import DataSyncScheme from "@/views/op/DataSyncScheme";
 import ConfigThrottle from "@/views/op/ConfigThrottle";
 import RemoveThrottle from "@/views/op/RemoveThrottle";
 import CurrentReassignments from "@/views/op/CurrentReassignments";
+import ClusterInfo from "@/views/op/ClusterInfo";
 export default {
   name: "Operation",
   components: {
@@ -140,6 +147,7 @@ export default {
     ConfigThrottle,
     RemoveThrottle,
     CurrentReassignments,
+    ClusterInfo,
   },
   data() {
     return {
@@ -157,6 +165,9 @@ export default {
         showConfigThrottleDialog: false,
         showRemoveThrottleDialog: false,
       },
+      clusterManager: {
+        showClusterInfoDialog: false,
+      },
     };
   },
   methods: {
@@ -208,6 +219,12 @@ export default {
     closeCurrentReassignmentsDialog() {
       this.replicationManager.showCurrentReassignmentsDialog = false;
     },
+    openClusterInfoDialog() {
+      this.clusterManager.showClusterInfoDialog = true;
+    },
+    closeClusterInfoDialog() {
+      this.clusterManager.showClusterInfoDialog = false;
+    },
   },
 };
 </script>