preferred as leader.

src/main/java/com/xuxd/kafka/console/beans/dto/ReplicationDTO.java

@@ -0,0 +1,17 @@
+package com.xuxd.kafka.console.beans.dto;
+
+import lombok.Data;
+
+/**
+ * kafka-console-ui.
+ *
+ * @author xuxd
+ * @date 2021-11-10 20:09:20
+ **/
+@Data
+public class ReplicationDTO {
+
+    private String topic;
+
+    private int partition;
+}

src/main/java/com/xuxd/kafka/console/controller/OperationController.java

@@ -1,5 +1,6 @@
 package com.xuxd.kafka.console.controller;
 
+import com.xuxd.kafka.console.beans.dto.ReplicationDTO;
 import com.xuxd.kafka.console.beans.dto.SyncDataDTO;
 import com.xuxd.kafka.console.service.OperationService;
 import org.apache.kafka.clients.admin.AdminClientConfig;
@@ -46,4 +47,9 @@ public class OperationController {
     public Object deleteAlignment(@RequestParam Long id) {
         return operationService.deleteAlignmentById(id);
     }
+
+    @PostMapping("/replication/preferred")
+    public Object electPreferredLeader(@RequestBody ReplicationDTO dto) {
+        return operationService.electPreferredLeader(dto.getTopic(), dto.getPartition());
+    }
 }

src/main/java/com/xuxd/kafka/console/service/OperationService.java

@@ -18,4 +18,6 @@ public interface OperationService {
     ResponseData getAlignmentList();
 
     ResponseData deleteAlignmentById(Long id);
+
+    ResponseData electPreferredLeader(String topic, int partition);
 }

src/main/java/com/xuxd/kafka/console/service/impl/OperationServiceImpl.java

@@ -9,9 +9,11 @@ import com.xuxd.kafka.console.beans.vo.OffsetAlignmentVO;
 import com.xuxd.kafka.console.dao.MinOffsetAlignmentMapper;
 import com.xuxd.kafka.console.service.OperationService;
 import java.util.HashMap;
+import java.util.HashSet;
 import java.util.List;
 import java.util.Map;
 import java.util.Properties;
+import java.util.Set;
 import kafka.console.OperationConsole;
 import org.apache.kafka.common.TopicPartition;
 import org.springframework.beans.factory.ObjectProvider;
@@ -107,4 +109,17 @@ public class OperationServiceImpl implements OperationService {
         minOffsetAlignmentMapper.deleteById(id);
         return ResponseData.create().success();
     }
+
+    @Override public ResponseData electPreferredLeader(String topic, int partition) {
+        Set<TopicPartition> partitions = new HashSet<>();
+        if (partition != -1) {
+            partitions.add(new TopicPartition(topic, partition));
+        } else {
+
+            partitions.addAll(operationConsole.getTopicPartitions(topic));
+        }
+        Tuple2<Object, String> tuple2 = operationConsole.electPreferredLeader(partitions);
+
+        return (boolean) tuple2._1() ? ResponseData.create().success() : ResponseData.create().failed(tuple2._2());
+    }
 }

src/main/scala/kafka/console/KafkaConsole.scala

@@ -5,7 +5,7 @@ import java.util.Properties
 import com.xuxd.kafka.console.config.KafkaConfig
 import kafka.zk.{AdminZkClient, KafkaZkClient}
 import org.apache.kafka.clients.CommonClientConfigs
-import org.apache.kafka.clients.admin.{Admin, AdminClientConfig}
+import org.apache.kafka.clients.admin.{AbstractOptions, Admin, AdminClientConfig}
 import org.apache.kafka.clients.consumer.{ConsumerConfig, KafkaConsumer}
 import org.apache.kafka.common.config.SaslConfigs
 import org.apache.kafka.common.serialization.ByteArrayDeserializer
@@ -69,6 +69,10 @@ class KafkaConsole(config: KafkaConfig) {
         Admin.create(props)
     }
 
+    protected def withTimeoutMs[T <: AbstractOptions[T]](options: T) = {
+        options.timeoutMs(timeoutMs)
+    }
+
     private def createAdminClient(): Admin = {
         Admin.create(getProps())
     }

src/main/scala/kafka/console/OperationConsole.scala

@@ -4,11 +4,12 @@ import java.util.concurrent.TimeUnit
 import java.util.{Collections, Properties}
 
 import com.xuxd.kafka.console.config.KafkaConfig
+import org.apache.kafka.clients.admin.ElectLeadersOptions
 import org.apache.kafka.clients.consumer.KafkaConsumer
-import org.apache.kafka.common.TopicPartition
 import org.apache.kafka.common.serialization.ByteArrayDeserializer
+import org.apache.kafka.common.{ElectionType, TopicPartition}
 
-import scala.jdk.CollectionConverters.{CollectionHasAsScala, ListHasAsScala, MapHasAsScala, SeqHasAsJava, SetHasAsScala}
+import scala.jdk.CollectionConverters.{CollectionHasAsScala, ListHasAsScala, MapHasAsScala, SeqHasAsJava, SetHasAsJava, SetHasAsScala}
 
 /**
  * kafka-console-ui.
@@ -194,4 +195,19 @@ class OperationConsole(config: KafkaConfig, topicConsole: TopicConsole,
             thatConsumer.close()
         }
     }
+
+    def electPreferredLeader(partitions: util.Set[TopicPartition]): (Boolean, String) = {
+        withAdminClientAndCatchError(admin => {
+            admin.electLeaders(ElectionType.PREFERRED, partitions, withTimeoutMs(new ElectLeadersOptions)).all().get()
+            (true, "")
+        }, e => {
+            log.error("alter config error.", e)
+            (false, e.getMessage)
+        }).asInstanceOf[(Boolean, String)]
+    }
+
+    def getTopicPartitions(topic: String): util.Set[TopicPartition] = {
+        val topicList = topicConsole.getTopicList(Collections.singleton(topic))
+        topicList.asScala.flatMap(_.partitions().asScala.map(t => new TopicPartition(topic, t.partition()))).toSet.asJava
+    }
 }

ui/src/utils/api.js

@@ -182,4 +182,8 @@ export const KafkaOpApi = {
     url: "/op/sync/alignment",
     method: "delete",
   },
+  electPreferredLeader: {
+    url: "/op/replication/preferred",
+    method: "post",
+  },
 };

ui/src/utils/request.js

@@ -6,7 +6,7 @@ import { VueAxios } from "./axios";
 const request = axios.create({
   // API 请求的默认前缀
   baseURL: process.env.VUE_APP_API_BASE_URL,
-  timeout: 10000, // 请求超时时间
+  timeout: 30000, // 请求超时时间
 });
 
 // 异常拦截处理器

ui/src/views/op/ElectPreferredLeader.vue

@@ -0,0 +1,159 @@
+<template>
+  <a-modal
+    title="选择Preferred副本作为Leader"
+    :visible="show"
+    :width="800"
+    :mask="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+    @cancel="handleCancel"
+  >
+    <div>
+      <a-spin :spinning="loading">
+        <a-form
+          :form="form"
+          :label-col="{ span: 5 }"
+          :wrapper-col="{ span: 12 }"
+          @submit="handleSubmit"
+        >
+          <a-form-item label="Topic">
+            <a-select
+              @change="handleTopicChange"
+              show-search
+              option-filter-prop="children"
+              v-decorator="[
+                'topic',
+                { rules: [{ required: true, message: '请选择一个topic!' }] },
+              ]"
+              placeholder="请选择一个topic"
+            >
+              <a-select-option v-for="v in topicList" :key="v" :value="v">
+                {{ v }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="分区">
+            <a-select
+              show-search
+              option-filter-prop="children"
+              v-decorator="[
+                'partition',
+                { rules: [{ required: true, message: '请选择一个分区!' }] },
+              ]"
+              placeholder="请选择一个分区"
+            >
+              <a-select-option v-for="v in partitions" :key="v" :value="v">
+                <span v-if="v == -1">全部</span> <span v-else>{{ v }}</span>
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+            <a-button type="primary" html-type="submit"> 确认 </a-button>
+          </a-form-item>
+        </a-form>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import request from "@/utils/request";
+import { KafkaTopicApi, KafkaOpApi } from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
+export default {
+  name: "ElectPreferredLeader",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      show: this.visible,
+      data: [],
+      loading: false,
+      form: this.$form.createForm(this, { name: "ElectPreferredLeaderForm" }),
+      topicList: [],
+      partitions: [],
+    };
+  },
+  watch: {
+    visible(v) {
+      this.show = v;
+      if (this.show) {
+        this.getTopicNameList();
+      }
+    },
+  },
+  methods: {
+    handleSubmit(e) {
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.loading = true;
+          request({
+            url: KafkaOpApi.electPreferredLeader.url,
+            method: KafkaOpApi.electPreferredLeader.method,
+            data: values,
+          }).then((res) => {
+            this.loading = false;
+            if (res.code != 0) {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            } else {
+              this.$message.success(res.msg);
+              this.$emit("closeElectPreferredLeaderDialog", { refresh: false });
+            }
+          });
+        }
+      });
+    },
+    getTopicNameList() {
+      request({
+        url: KafkaTopicApi.getTopicNameList.url,
+        method: KafkaTopicApi.getTopicNameList.method,
+      }).then((res) => {
+        if (res.code == 0) {
+          this.topicList = res.data;
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+    getPartitionInfo(topic) {
+      this.loading = true;
+      request({
+        url: KafkaTopicApi.getPartitionInfo.url + "?topic=" + topic,
+        method: KafkaTopicApi.getPartitionInfo.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code != 0) {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        } else {
+          this.partitions = res.data.map((v) => v.partition);
+          this.partitions.splice(0, 0, -1);
+        }
+      });
+    },
+    handleTopicChange(topic) {
+      this.getPartitionInfo(topic);
+    },
+    handleCancel() {
+      this.data = [];
+      this.$emit("closeElectPreferredLeaderDialog", { refresh: false });
+    },
+  },
+};
+</script>
+
+<style scoped></style>

ui/src/views/op/OffsetAlignmentTable.vue

@@ -11,7 +11,12 @@
   >
     <div>
       <a-spin :spinning="loading">
-        <a-table :columns="columns" bordered :data-source="data" :rowKey="id">
+        <a-table
+          :columns="columns"
+          bordered
+          :data-source="data"
+          :rowKey="(record) => record.id"
+        >
           <ul slot="thisOffset" slot-scope="text">
             <ol v-for="(v, k) in text" :key="k">
               {{

ui/src/views/op/Operation.vue

@@ -3,7 +3,9 @@
     <div class="content-module">
       <a-card title="副本管理" style="width: 100%; text-align: left">
         <p>
-          <a-button type="primary"> 首选副本作为leader </a-button>
+          <a-button type="primary" @click="openElectPreferredLeaderDialog">
+            首选副本作为leader
+          </a-button>
           <label>说明：</label>
           <span>将集群中所有分区leader副本设置为首选副本</span>
         </p>
@@ -11,15 +13,11 @@
     </div>
     <div class="content-module">
       <a-card title="数据同步" style="width: 100%; text-align: left">
-        <!--        <p>-->
+        <p v-show="false">
-        <!--          <a-button type="primary" @click="openSyncConsumerOffsetDialog">-->
+          <a-button type="primary"> 数据同步方案 </a-button>
-        <!--            数据同步方案-->
+          <label>说明：</label>
-        <!--          </a-button>-->
+          <span>新老集群迁移、数据同步解决方案</span>
-        <!--          <label>说明：</label>-->
+        </p>
-        <!--          <span-->
-        <!--          >数据同步方案</span-->
-        <!--          >-->
-        <!--        </p>-->
         <p>
           <a-button type="primary" @click="openMinOffsetAlignmentDialog">
             最小位移对齐
@@ -57,6 +55,10 @@
       :visible="syncData.showOffsetAlignmentInfoDialog"
       @closeOffsetAlignmentInfoDialog="closeOffsetAlignmentInfoDialog"
     ></OffsetAlignmentTable>
+    <ElectPreferredLeader
+      :visible="replicationManager.showElectPreferredLeaderDialog"
+      @closeElectPreferredLeaderDialog="closeElectPreferredLeaderDialog"
+    ></ElectPreferredLeader>
   </div>
 </template>
 
@@ -64,9 +66,15 @@
 import SyncConsumerOffset from "@/views/op/SyncConsumerOffset";
 import MinOffsetAlignment from "@/views/op/MinOffsetAlignment";
 import OffsetAlignmentTable from "@/views/op/OffsetAlignmentTable";
+import ElectPreferredLeader from "@/views/op/ElectPreferredLeader";
 export default {
   name: "Operation",
-  components: { SyncConsumerOffset, MinOffsetAlignment, OffsetAlignmentTable },
+  components: {
+    SyncConsumerOffset,
+    MinOffsetAlignment,
+    OffsetAlignmentTable,
+    ElectPreferredLeader,
+  },
   data() {
     return {
       syncData: {
@@ -74,6 +82,9 @@ export default {
         showMinOffsetAlignmentDialog: false,
         showOffsetAlignmentInfoDialog: false,
       },
+      replicationManager: {
+        showElectPreferredLeaderDialog: false,
+      },
     };
   },
   methods: {
@@ -95,6 +106,12 @@ export default {
     closeOffsetAlignmentInfoDialog() {
       this.syncData.showOffsetAlignmentInfoDialog = false;
     },
+    openElectPreferredLeaderDialog() {
+      this.replicationManager.showElectPreferredLeaderDialog = true;
+    },
+    closeElectPreferredLeaderDialog() {
+      this.replicationManager.showElectPreferredLeaderDialog = false;
+    },
   },
 };
 </script>