import React, { useState, useEffect } from 'react';
import { Button, DatePicker, Drawer, Form, notification, Radio, Utils, Space, Divider, message } from 'knowdesign';
import { useParams } from 'react-router-dom';
import EditTable from '../TestingProduce/component/EditTable';
import Api from '@src/api/index';
import moment from 'moment';
const CustomSelectResetTime = (props: { value?: string; onChange?: (val: Number | String) => void }) => {
const { value, onChange } = props;
const [timeSetMode, setTimeSetMode] = useState('newest');
useEffect(() => {
onChange('newest');
}, []);
return (
<>
{
setTimeSetMode(e.target.value);
if (e.target.value === 'newest' || e.target.value === 'oldest') {
onChange(e.target.value);
}
}}
value={timeSetMode}
>
最新Offset
最旧Offset
自定义
{timeSetMode === 'custom' && (
{
onChange(v.valueOf());
}}
>
)}
>
);
};
export default (props: any) => {
const { record, visible, setVisible } = props;
const routeParams = useParams<{
clusterId: string;
}>();
const [form] = Form.useForm();
const defaultResetType = 'assignedTime';
const [resetType, setResetType] = useState(defaultResetType);
const customFormRef: any = React.createRef();
const clusterPhyId = Number(routeParams.clusterId);
const [partitionIdList, setPartitionIdList] = useState([]);
useEffect(() => {
form.setFieldsValue({
resetType: defaultResetType,
});
}, []);
useEffect(() => {
visible &&
Utils.request(Api.getTopicsMetaData(record?.topicName, +routeParams.clusterId))
.then((res: any) => {
const partitionLists = (res?.partitionIdList || []).map((item: any) => {
return {
label: item,
value: item,
};
});
setPartitionIdList(partitionLists);
})
.catch((err) => {
message.error(err);
});
}, [visible]);
const confirm = () => {
let tableData;
if (customFormRef.current) {
tableData = customFormRef.current.getTableData();
}
const formData = form.getFieldsValue();
let resetParams: any = {
clusterId: clusterPhyId,
createIfNotExist: false,
groupName: record.groupName,
topicName: record.topicName,
};
if (formData.resetType === 'assignedTime') {
resetParams.resetType = formData.timestamp === 'newest' ? 0 : formData.timestamp === 'oldest' ? 1 : 2;
if (resetParams.resetType === 2) {
resetParams.timestamp = formData.timestamp;
}
}
if (formData.resetType === 'partition') {
resetParams.resetType = 3;
resetParams.offsetList = tableData
? tableData.map((item: { key: string; value: string }) => ({ partitionId: item.key, offset: item.value }))
: [];
}
Utils.put(Api.resetGroupOffset(), resetParams).then((data) => {
if (data === null) {
notification.success({
message: '重置offset成功',
});
setVisible(false);
} else {
notification.error({
message: '重置offset失败',
});
setVisible(false);
}
});
};
return (
<>
}
className="cluster-detail-consumer-resetoffset"
onClose={(_) => {
setVisible(false);
}}
>
{
setResetType(e.target.value);
}}
>
重置到指定时间
重置分区
{resetType === 'assignedTime' && (
)}
{resetType === 'partition' && (
)}
>
);
};