变更副本信息查询

ui/src/utils/api.js

@@ -117,6 +117,10 @@ export const KafkaTopicApi = {
     url: "/topic/partition/new",
     method: "post",
   },
+  getCurrentReplicaAssignment: {
+    url: "/topic/replica/assignment",
+    method: "get",
+  },
 };
 
 export const KafkaConsumerApi = {

ui/src/views/topic/Topic.vue

@@ -98,6 +98,27 @@
               @click="openTopicConfigDialog(record.name)"
               >属性配置
             </a-button>
+            <a-button
+              size="small"
+              href="javascript:;"
+              class="operation-btn"
+              @click="openUpdateReplicaDialog(record.name)"
+              >变更副本
+            </a-button>
+            <a-button
+              size="small"
+              href="javascript:;"
+              class="operation-btn"
+              @click="openMessageStatsDialog"
+              >发送统计
+            </a-button>
+            <a-button
+              size="small"
+              href="javascript:;"
+              class="operation-btn"
+              @click="openThrottleDialog"
+              >限流
+            </a-button>
           </div>
         </a-table>
         <PartitionInfo
@@ -126,6 +147,11 @@
           :topic="selectDetail.resourceName"
           @closeTopicConfigDialog="closeTopicConfigDialog"
         ></TopicConfig>
+        <UpdateReplica
+          :visible="showUpdateReplicaDialog"
+          :topic="selectDetail.resourceName"
+          @closeUpdateReplicaDialog="closeUpdateReplicaDialog"
+        ></UpdateReplica>
       </div>
     </a-spin>
   </div>
@@ -140,6 +166,7 @@ import CreateTopic from "@/views/topic/CreateTopic";
 import AddPartition from "@/views/topic/AddPartition";
 import ConsumedDetail from "@/views/topic/ConsumedDetail";
 import TopicConfig from "@/views/topic/TopicConfig";
+import UpdateReplica from "@/views/topic/UpdateReplica";
 
 export default {
   name: "Topic",
@@ -149,6 +176,7 @@ export default {
     AddPartition,
     ConsumedDetail,
     TopicConfig,
+    UpdateReplica,
   },
   data() {
     return {
@@ -170,6 +198,7 @@ export default {
       showAddPartition: false,
       showConsumedDetailDialog: false,
       showTopicConfigDialog: false,
+      showUpdateReplicaDialog: false,
     };
   },
   methods: {
@@ -250,6 +279,19 @@ export default {
     closeTopicConfigDialog() {
       this.showTopicConfigDialog = false;
     },
+    openUpdateReplicaDialog(topic) {
+      this.showUpdateReplicaDialog = true;
+      this.selectDetail.resourceName = topic;
+    },
+    closeUpdateReplicaDialog() {
+      this.showUpdateReplicaDialog = false;
+    },
+    openMessageStatsDialog() {
+      this.$message.info("此功能尚不支持");
+    },
+    openThrottleDialog() {
+      this.$message.info("此功能尚不支持");
+    },
   },
   created() {
     this.getTopicList();
@@ -281,7 +323,7 @@ const columns = [
     title: "操作",
     key: "operation",
     scopedSlots: { customRender: "operation" },
-    width: 500,
+    width: 800,
   },
 ];
 </script>

ui/src/views/topic/UpdateReplica.vue

@@ -0,0 +1,121 @@
+<template>
+  <a-modal
+    title="变更副本"
+    :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.partitions"
+            bordered
+            :rowKey="
+            (record, index) => {
+              return index;
+            }
+          "
+        >
+          <div slot="replicas" slot-scope="text">
+            <span v-for="i in text" :key="i">
+              {{
+                i
+              }}
+            </span>
+          </div>
+        </a-table>
+
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaTopicApi } from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
+
+export default {
+  name: "UpdateReplica",
+  props: {
+    topic: {
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      columns: columns,
+      show: this.visible,
+      data: {},
+      loading: false,
+      form: this.$form.createForm(this, { name: "coordinated" }),
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.getCurrentReplicaAssignment();
+      }
+    },
+  },
+  methods: {
+    getCurrentReplicaAssignment() {
+      this.loading = true;
+      request({
+        url:
+          KafkaTopicApi.getCurrentReplicaAssignment.url +
+          "?topic=" +
+          this.topic,
+        method: KafkaTopicApi.getCurrentReplicaAssignment.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.data = res.data;
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+    handleCancel() {
+      this.data = [];
+      this.$emit("closeUpdateReplicaDialog", { refresh: false });
+    },
+  },
+};
+
+
+const columns = [
+  {
+    title: "Topic",
+    dataIndex: "topic",
+    key: "topic",
+  },
+  {
+    title: "分区",
+    dataIndex: "partition",
+    key: "partition",
+  },
+  {
+    title: "副本",
+    dataIndex: "replicas",
+    key: "replicas",
+    scopedSlots: { customRender: "replicas" },
+  },
+];
+</script>
+
+<style scoped></style>