preferred as leader.
This commit is contained in:
许晓东
@@ -182,4 +182,8 @@ export const KafkaOpApi = {
|
||||
url: "/op/sync/alignment",
|
||||
method: "delete",
|
||||
},
|
||||
electPreferredLeader: {
|
||||
url: "/op/replication/preferred",
|
||||
method: "post",
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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, // 请求超时时间
|
||||
});
|
||||
|
||||
// 异常拦截处理器
|
||||
|
||||
159
ui/src/views/op/ElectPreferredLeader.vue
Normal file
159
ui/src/views/op/ElectPreferredLeader.vue
Normal file
@@ -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>
|
||||
@@ -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">
|
||||
{{
|
||||
|
||||
@@ -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>-->
|
||||
<!-- <a-button type="primary" @click="openSyncConsumerOffsetDialog">-->
|
||||
<!-- 数据同步方案-->
|
||||
<!-- </a-button>-->
|
||||
<!-- <label>说明：</label>-->
|
||||
<!-- <span-->
|
||||
<!-- >数据同步方案</span-->
|
||||
<!-- >-->
|
||||
<!-- </p>-->
|
||||
<p v-show="false">
|
||||
<a-button type="primary"> 数据同步方案 </a-button>
|
||||
<label>说明：</label>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user