集群列表、新增集群

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>