取消正在进行的副本重分配，消费组->消费详情增加刷新按钮
This commit is contained in:
许晓东
@@ -214,4 +214,12 @@ export const KafkaOpApi = {
|
||||
url: "/op/broker/throttle",
|
||||
method: "delete",
|
||||
},
|
||||
currentReassignments: {
|
||||
url: "/op/replication/reassignments",
|
||||
method: "get",
|
||||
},
|
||||
cancelReassignment: {
|
||||
url: "/op/replication/reassignments",
|
||||
method: "delete",
|
||||
},
|
||||
};
|
||||
|
||||
@@ -47,6 +47,15 @@
|
||||
@click="openResetOffsetByTimeDialog(k)"
|
||||
>时间戳
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
icon="reload"
|
||||
size="small"
|
||||
style="float: right"
|
||||
@click="getConsumerDetail"
|
||||
>
|
||||
刷新
|
||||
</a-button>
|
||||
<hr />
|
||||
<a-table
|
||||
:columns="columns"
|
||||
|
||||
166
ui/src/views/op/CurrentReassignments.vue
Normal file
166
ui/src/views/op/CurrentReassignments.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<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"
|
||||
bordered
|
||||
:rowKey="(record) => record.topic + record.partition"
|
||||
>
|
||||
<div slot="replicas" slot-scope="text">
|
||||
<span v-for="i in text" :key="i">
|
||||
{{ i }}
|
||||
</span>
|
||||
</div>
|
||||
<div slot="addingReplicas" slot-scope="text">
|
||||
<span v-for="i in text" :key="i">
|
||||
{{ i }}
|
||||
</span>
|
||||
</div>
|
||||
<div slot="removingReplicas" slot-scope="text">
|
||||
<span v-for="i in text" :key="i">
|
||||
{{ i }}
|
||||
</span>
|
||||
</div>
|
||||
<div slot="operation" slot-scope="record">
|
||||
<a-popconfirm
|
||||
title="取消正在进行的副本重分配任务?"
|
||||
ok-text="确认"
|
||||
cancel-text="取消"
|
||||
@confirm="cancelReassignment(record)"
|
||||
>
|
||||
<a-button size="small" href="javascript:;" class="operation-btn"
|
||||
>取消
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from "@/utils/request";
|
||||
import { KafkaOpApi } from "@/utils/api";
|
||||
import notification from "ant-design-vue/es/notification";
|
||||
|
||||
export default {
|
||||
name: "CurrentReassignments",
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns: columns,
|
||||
show: this.visible,
|
||||
data: [],
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
visible(v) {
|
||||
this.show = v;
|
||||
if (this.show) {
|
||||
this.currentReassignments();
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
currentReassignments() {
|
||||
this.loading = true;
|
||||
const api = KafkaOpApi.currentReassignments;
|
||||
request({
|
||||
url: api.url,
|
||||
method: api.method,
|
||||
}).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.code != 0) {
|
||||
notification.error({
|
||||
message: "error",
|
||||
description: res.msg,
|
||||
});
|
||||
} else {
|
||||
this.data = res.data;
|
||||
this.yesterday = this.data.yesterday;
|
||||
this.today = this.data.today;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleCancel() {
|
||||
this.$emit("closeCurrentReassignmentsDialog", {});
|
||||
},
|
||||
cancelReassignment(record) {
|
||||
const param = { topic: record.topic, partition: record.partition };
|
||||
this.loading = true;
|
||||
const api = KafkaOpApi.cancelReassignment;
|
||||
request({
|
||||
url: api.url,
|
||||
method: api.method,
|
||||
data: param,
|
||||
}).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.code != 0) {
|
||||
notification.error({
|
||||
message: "error",
|
||||
description: res.msg,
|
||||
});
|
||||
} else {
|
||||
this.currentReassignments();
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Topic",
|
||||
dataIndex: "topic",
|
||||
key: "topic",
|
||||
},
|
||||
{
|
||||
title: "分区",
|
||||
dataIndex: "partition",
|
||||
key: "partition",
|
||||
},
|
||||
{
|
||||
title: "副本",
|
||||
dataIndex: "replicas",
|
||||
key: "replicas",
|
||||
scopedSlots: { customRender: "replicas" },
|
||||
},
|
||||
{
|
||||
title: "正在增加的副本",
|
||||
dataIndex: "addingReplicas",
|
||||
key: "addingReplicas",
|
||||
scopedSlots: { customRender: "addingReplicas" },
|
||||
},
|
||||
{
|
||||
title: "正在移除的副本",
|
||||
dataIndex: "removingReplicas",
|
||||
key: "removingReplicas",
|
||||
scopedSlots: { customRender: "removingReplicas" },
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "operation",
|
||||
scopedSlots: { customRender: "operation" },
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -30,7 +30,7 @@
|
||||
<span>将集群中所有分区leader副本设置为首选副本</span>
|
||||
</p>
|
||||
<p>
|
||||
<a-button type="primary" @click="openReplicaReassignmentDetailDialog">
|
||||
<a-button type="primary" @click="openCurrentReassignmentsDialog">
|
||||
副本变更详情
|
||||
</a-button>
|
||||
<label>说明：</label>
|
||||
@@ -103,6 +103,10 @@
|
||||
@closeRemoveThrottleDialog="closeRemoveThrottleDialog"
|
||||
>
|
||||
</RemoveThrottle>
|
||||
<CurrentReassignments
|
||||
:visible="replicationManager.showCurrentReassignmentsDialog"
|
||||
@closeCurrentReassignmentsDialog="closeCurrentReassignmentsDialog"
|
||||
></CurrentReassignments>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -114,6 +118,7 @@ import ElectPreferredLeader from "@/views/op/ElectPreferredLeader";
|
||||
import DataSyncScheme from "@/views/op/DataSyncScheme";
|
||||
import ConfigThrottle from "@/views/op/ConfigThrottle";
|
||||
import RemoveThrottle from "@/views/op/RemoveThrottle";
|
||||
import CurrentReassignments from "@/views/op/CurrentReassignments";
|
||||
export default {
|
||||
name: "Operation",
|
||||
components: {
|
||||
@@ -124,6 +129,7 @@ export default {
|
||||
DataSyncScheme,
|
||||
ConfigThrottle,
|
||||
RemoveThrottle,
|
||||
CurrentReassignments,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -135,6 +141,7 @@ export default {
|
||||
},
|
||||
replicationManager: {
|
||||
showElectPreferredLeaderDialog: false,
|
||||
showCurrentReassignmentsDialog: false,
|
||||
},
|
||||
brokerManager: {
|
||||
showConfigThrottleDialog: false,
|
||||
@@ -185,8 +192,11 @@ export default {
|
||||
closeRemoveThrottleDialog() {
|
||||
this.brokerManager.showRemoveThrottleDialog = false;
|
||||
},
|
||||
openReplicaReassignmentDetailDialog() {
|
||||
this.$message.info("此功能尚不支持，下个版本支持");
|
||||
openCurrentReassignmentsDialog() {
|
||||
this.replicationManager.showCurrentReassignmentsDialog = true;
|
||||
},
|
||||
closeCurrentReassignmentsDialog() {
|
||||
this.replicationManager.showCurrentReassignmentsDialog = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user