From bcd62e84c16300a0b62a04dd3fe10c7ff7be026b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=99=93=E4=B8=9C?= <763795151@qq.com>
Date: Tue, 16 Nov 2021 17:06:14 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=80=89=E5=89=AF=E6=9C=AC=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=BAleader?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/topic/PartitionInfo.vue | 44 +++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/ui/src/views/topic/PartitionInfo.vue b/ui/src/views/topic/PartitionInfo.vue
index d63a48f..c28f8c4 100644
--- a/ui/src/views/topic/PartitionInfo.vue
+++ b/ui/src/views/topic/PartitionInfo.vue
@@ -34,6 +34,24 @@
               }}
             </ol>
           </ul>
+          <div slot="operation" slot-scope="record" v-show="!record.internal">
+            <a-popconfirm
+              :title="
+                'topic: ' +
+                topic +
+                '，分区:' +
+                record.partition +
+                '，确认选择第一个副本作为leader？'
+              "
+              ok-text="确认"
+              cancel-text="取消"
+              @confirm="electPreferredLeader(record)"
+            >
+              <a-button size="small" href="javascript:;" class="operation-btn"
+                >首选副本作为leader
+              </a-button>
+            </a-popconfirm>
+          </div>
         </a-table>
       </a-spin>
     </div>
@@ -42,7 +60,7 @@
 
 <script>
 import request from "@/utils/request";
-import { KafkaTopicApi } from "@/utils/api";
+import { KafkaOpApi, KafkaTopicApi } from "@/utils/api";
 import notification from "ant-design-vue/es/notification";
 export default {
   name: "PartitionInfo",
@@ -94,6 +112,25 @@ export default {
       this.data = [];
       this.$emit("closePartitionInfoDialog", {});
     },
+    electPreferredLeader(record) {
+      this.loading = true;
+      request({
+        url: KafkaOpApi.electPreferredLeader.url,
+        method: KafkaOpApi.electPreferredLeader.method,
+        data: { topic: this.topic, partition: record.partition },
+      }).then((res) => {
+        this.loading = false;
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.$message.success(res.msg);
+          this.getPartitionInfo();
+        }
+      });
+    },
   },
 };
 
@@ -135,6 +172,11 @@ const columns = [
     dataIndex: "diff",
     key: "diff",
   },
+  {
+    title: "操作",
+    key: "operation",
+    scopedSlots: { customRender: "operation" },
+  },
 ];
 </script>