/* eslint-disable react/display-name */
import React, { useState, useEffect } from 'react';
import { AppContainer, Form, Input, ProTable, Select, Utils } from 'knowdesign';
import './index.less';
import Api from '@src/api/index';
import { getOperatingStateListParams } from './interface';
import { useParams } from 'react-router-dom';
import ConsumerGroupDetail from './ConsumerGroupDetail';
import ConsumerGroupHealthCheck from '@src/components/CardBar/ConsumerGroupHealthCheck';
import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
import { hashDataParse } from '@src/constants/common';
const { Option } = Select;
const AutoPage = (props: any) => {
const { scene, detailParams = { searchKeywords: '' } } = props;
const routeParams = useParams<{
clusterId: string;
}>();
const [global] = AppContainer.useGlobalValue();
const [consumerGroupList, setConsumerGroupList] = useState([]);
const [showMode, setShowMode] = useState('list');
const [searchGroupName, setSearchGroupName] = useState(detailParams.searchKeywords || '');
const [searchTopicName, setSearchTopicName] = useState('');
const [pageIndex, setPageIndex] = useState(1);
const [pageTotal, setPageTotal] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [consumersListLoading, setConsumersListLoading] = useState(false);
const clusterPhyId = Number(routeParams.clusterId);
const searchFn = () => {
const params: getOperatingStateListParams = {
pageNo: pageIndex,
pageSize,
fuzzySearchDTOList: [],
};
if (searchGroupName) {
// params.groupName = searchGroupName;
params.fuzzySearchDTOList.push({ fieldName: 'groupName', fieldValue: searchGroupName });
}
if (searchTopicName) {
params.fuzzySearchDTOList.push({ fieldName: 'topicName', fieldValue: searchTopicName });
}
const topicName = hashDataParse(location.hash)?.topicName;
if (topicName) {
params.topicName = topicName;
}
getOperatingStateList(params);
};
useEffect(() => {
searchFn();
}, []);
useEffect(() => {
setSearchGroupName(detailParams.searchKeywords);
}, [detailParams.searchKeywords]);
const getOperatingStateList = (params: getOperatingStateListParams) => {
setConsumersListLoading(true);
Utils.post(Api.getOperatingStateList(clusterPhyId), params).then((data: any) => {
setConsumersListLoading(false);
const newData = data?.bizData.map((item: any, key: number) => {
return { ...item, unique: key * pageIndex * pageSize + item?.groupName };
});
setConsumerGroupList(newData || []);
setPageIndex(data.pagination.pageNo);
setPageTotal(data.pagination.total);
setPageSize(data.pagination.pageSize);
});
};
const columns = () => {
const baseColumns: any = [
{
title: 'ConsumerGroup',
dataIndex: 'groupName',
key: 'groupName',
render: (v: any, r: any) => {
return (
{
window.location.hash = `groupName=${v || ''}&topicName=${r.topicName}`;
}}
>
{v}
);
},
},
{
title: '消费的Topic',
dataIndex: 'topicName',
key: 'topicName',
},
// {
// title: 'Principle',
// dataIndex: 'kafkaUser',
// key: 'kafkaUser',
// },
{
title: 'Status',
dataIndex: 'state',
key: 'state',
},
{
title: 'Max Lag',
dataIndex: 'maxLag',
key: 'maxLag',
},
{
title: 'Member数',
dataIndex: 'memberCount',
key: 'memberCount',
},
];
// if (
// global.hasPermission &&
// global.hasPermission(
// scene === 'topicDetail' ? ClustersPermissionMap.TOPIC_RESET_OFFSET : ClustersPermissionMap.CONSUMERS_RESET_OFFSET
// )
// ) {
// baseColumns.push({
// title: '操作',
// dataIndex: 'desc',
// key: 'desc',
// render: (txt: any, record: any) => {
// return