broker config

ui/src/views/cluster/BrokerConfig.vue

@@ -0,0 +1,119 @@
+<template>
+  <a-modal
+    title="Broker配置"
+    :visible="show"
+    :width="1200"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      <a-spin :spinning="loading">
+        <a-table
+          :columns="columns"
+          :data-source="data"
+          bordered
+          :rowKey="(record) => record.memberId"
+        >
+          <ul slot="partitions" slot-scope="text">
+            <ol v-for="i in text" :key="i.topic + i.partition">
+              {{
+                i.topic
+              }}:
+              {{
+                i.partition
+              }}
+            </ol>
+          </ul>
+        </a-table>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaConfigApi } from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+
+export default {
+  name: "BrokerConfig",
+  props: {
+    group: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    id: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      columns: columns,
+      show: this.visible,
+      data: [],
+      loading: false,
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.getPartitionInfo();
+      }
+    },
+  },
+  methods: {
+    getPartitionInfo() {
+      this.loading = true;
+      request({
+        url: KafkaConfigApi.getBrokerConfig.url + "?brokerId=" + this.id,
+        method: KafkaConfigApi.getBrokerConfig.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.data = res.data;
+        }
+      });
+    },
+    handleCancel() {
+      this.data = [];
+      this.$emit("closeBrokerConfigDialog", {});
+    },
+  },
+};
+
+const columns = [
+  {
+    title: "属性",
+    dataIndex: "name",
+    key: "name",
+    width: 300,
+  },
+  {
+    title: "值",
+    dataIndex: "value",
+    key: "value",
+  },
+  {
+    title: "属性源",
+    dataIndex: "source",
+    key: "source",
+    width: 200,
+  },
+];
+</script>
+
+<style scoped></style>

ui/src/views/cluster/Cluster.vue

@@ -6,15 +6,29 @@
           <h3>集群ID：{{ clusterId }}</h3>
         </div>
 
-        <a-table :columns="columns" :data-source="data" bordered row-key="name">
+        <a-table :columns="columns" :data-source="data" bordered row-key="id">
           <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>
+          <div slot="operation" slot-scope="record" v-show="!record.internal">
+            <a-button
+              size="small"
+              href="javascript:;"
+              class="operation-btn"
+              @click="openBrokerConfigDialog(record)"
+              >属性配置
+            </a-button>
+          </div>
         </a-table>
       </div>
+      <BrokerConfig
+        :visible="showBrokerConfigDialog"
+        :id="this.select.id"
+        @closeBrokerConfigDialog="closeBrokerConfigDialog"
+      ></BrokerConfig>
     </a-spin>
   </div>
 </template>
@@ -22,15 +36,19 @@
 <script>
 import request from "@/utils/request";
 import { KafkaClusterApi } from "@/utils/api";
+import BrokerConfig from "@/views/cluster/BrokerConfig";
 
 export default {
   name: "Topic",
+  components: { BrokerConfig },
   data() {
     return {
       data: [],
       columns,
       loading: false,
       clusterId: "",
+      showBrokerConfigDialog: false,
+      select: {},
     };
   },
   methods: {
@@ -45,6 +63,13 @@ export default {
         this.clusterId = res.data.clusterId;
       });
     },
+    openBrokerConfigDialog(record) {
+      this.select = record;
+      this.showBrokerConfigDialog = true;
+    },
+    closeBrokerConfigDialog() {
+      this.showBrokerConfigDialog = false;
+    },
   },
   created() {
     this.getClusterInfo();
@@ -68,6 +93,11 @@ const columns = [
     dataIndex: "controller",
     scopedSlots: { customRender: "controller" },
   },
+  {
+    title: "操作",
+    key: "operation",
+    scopedSlots: { customRender: "operation" },
+  },
 ];
 </script>