show topic partition info

ui/src/views/topic/PartitionInfo.vue

@@ -0,0 +1,120 @@
+<template>
+  <a-modal
+    title="分区详情"
+    :visible="show"
+    :width="1800"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      <a-table
+        :columns="columns"
+        :data-source="data"
+        :rowKey="
+          (record, index) => {
+            return index;
+          }
+        "
+      >
+        <ul slot="replicas" slot-scope="text">
+          <ol v-for="i in text" :key="i">
+            {{
+              i
+            }}
+          </ol>
+        </ul>
+        <ul slot="isr" slot-scope="text">
+          <ol v-for="i in text" :key="i">
+            {{
+              i
+            }}
+          </ol>
+        </ul>
+      </a-table>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaTopicApi } from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+export default {
+  name: "PartitionInfo",
+  props: {
+    topic: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      columns: columns,
+      show: this.visible,
+      data: [],
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.getPartitionInfo();
+      }
+    },
+  },
+  methods: {
+    getPartitionInfo() {
+      request({
+        url: KafkaTopicApi.getPartitionInfo.url + "?topic=" + this.topic,
+        method: KafkaTopicApi.getPartitionInfo.method,
+      }).then((res) => {
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.data = res.data;
+        }
+      });
+    },
+    handleCancel() {
+      this.$emit("closePartitionInfoDialog", {});
+    },
+  },
+};
+
+const columns = [
+  {
+    title: "分区",
+    dataIndex: "partition",
+    key: "partition",
+  },
+  {
+    title: "leader",
+    dataIndex: "leader",
+    key: "leader",
+  },
+  {
+    title: "副本",
+    dataIndex: "replicas",
+    key: "replicas",
+    scopedSlots: { customRender: "replicas" },
+  },
+  {
+    title: "isr",
+    dataIndex: "isr",
+    key: "isr",
+    scopedSlots: { customRender: "isr" },
+  },
+];
+</script>
+
+<style scoped></style>

ui/src/views/topic/Topic.vue

@@ -46,8 +46,10 @@
         <a-button type="primary" @click="handleReset">新增/更新</a-button>
       </div>
       <a-table :columns="columns" :data-source="data" bordered row-key="name">
-        <div slot="partitions" slot-scope="text">
-          <a href="#">{{ text }} </a>
+        <div slot="partitions" slot-scope="text, record">
+          <a href="#" @click="openPartitionInfoDialog(record.name)"
+            >{{ text }}
+          </a>
         </div>
 
         <div slot="internal" slot-scope="text">
@@ -67,6 +69,11 @@
           </a-popconfirm>
         </div>
       </a-table>
+      <PartitionInfo
+        :topic="selectDetail.resourceName"
+        :visible="showPartitionInfo"
+        @closePartitionInfoDialog="closePartitionInfoDialog"
+      ></PartitionInfo>
     </div>
   </div>
 </template>
@@ -75,9 +82,10 @@
 import request from "@/utils/request";
 import { KafkaTopicApi } from "@/utils/api";
 import notification from "ant-design-vue/es/notification";
+import PartitionInfo from "@/views/topic/PartitionInfo";
 export default {
   name: "Topic",
-  components: {},
+  components: { PartitionInfo },
   data() {
     return {
       queryParam: { type: "all" },
@@ -92,6 +100,7 @@ export default {
         resourceType: "",
         username: "",
       },
+      showPartitionInfo: false,
     };
   },
   methods: {
@@ -130,6 +139,13 @@ export default {
         }
       });
     },
+    openPartitionInfoDialog(topic) {
+      this.selectDetail.resourceName = topic;
+      this.showPartitionInfo = true;
+    },
+    closePartitionInfoDialog() {
+      this.showPartitionInfo = false;
+    },
   },
   created() {
     this.getTopicList();