集群信息

ui/src/App.vue

@@ -12,7 +12,8 @@
       ><router-link to="/acl-page" class="pad-l-r" v-show="config.enableAcl"
         >Acl</router-link
       >
-      <span>|</span><router-link to="/op-page" class="pad-l-r">运维</router-link>
+      <span>|</span
+      ><router-link to="/op-page" class="pad-l-r">运维</router-link>
     </div>
     <router-view class="content" />
   </div>

ui/src/router/index.js

@@ -37,6 +37,12 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "op" */ "../views/op/Operation.vue"),
   },
+  {
+    path: "/cluster-page",
+    name: "Cluster",
+    component: () =>
+      import(/* webpackChunkName: "cluster" */ "../views/cluster/Cluster.vue"),
+  },
 ];
 
 const router = new VueRouter({

ui/src/utils/api.js

@@ -85,3 +85,10 @@ export const KafkaConsumerApi = {
     method: "get",
   },
 };
+
+export const KafkaClusterApi = {
+  getClusterInfo: {
+    url: "/cluster",
+    method: "get",
+  },
+};

ui/src/views/cluster/Cluster.vue

@@ -0,0 +1,92 @@
+<template>
+  <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="name">
+          <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>
+        </a-table>
+      </div>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaClusterApi } from "@/utils/api";
+
+export default {
+  name: "Topic",
+  data() {
+    return {
+      data: [],
+      columns,
+      loading: false,
+      clusterId: "",
+    };
+  },
+  methods: {
+    getClusterInfo() {
+      this.loading = true;
+      request({
+        url: KafkaClusterApi.getClusterInfo.url,
+        method: KafkaClusterApi.getClusterInfo.method,
+      }).then((res) => {
+        this.loading = false;
+        this.data = res.data.nodes;
+        this.clusterId = res.data.clusterId;
+      });
+    },
+  },
+  created() {
+    this.getClusterInfo();
+  },
+};
+
+const columns = [
+  {
+    title: "id",
+    dataIndex: "id",
+    key: "id",
+  },
+  {
+    title: "地址",
+    key: "addr",
+    scopedSlots: { customRender: "addr" },
+  },
+  {
+    title: "控制器",
+    key: "controller",
+    dataIndex: "controller",
+    scopedSlots: { customRender: "controller" },
+  },
+];
+</script>
+
+<style scoped>
+.body-c {
+  width: 100%;
+  height: 100%;
+}
+
+.cluster-id {
+  text-align: left;
+}
+
+.operation-row-button {
+  height: 4%;
+  text-align: left;
+}
+
+.operation-btn {
+  margin-right: 3%;
+}
+</style>