Skip to content

Commit f3eca3b

Browse files
GraceWalkGraceWalk
committed
fix: ConsumerGroup 列表 & 详情页重构
1 parent 62f7d3f commit f3eca3b

File tree

11 files changed

+2099
-93
lines changed

11 files changed

+2099
-93
lines changed

‎km-console/packages/layout-clusters-fe/src/pages/ConsumerGroup/Detail.tsx‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { useParams, useHistory } from 'react-router-dom';
3+
import { Drawer, ProTable, Utils } from 'knowdesign';
4+
import { IconFont } from '@knowdesign/icons';
5+
import API from '@src/api/index';
6+
import { defaultPagination, hashDataParse } from '@src/constants/common';
7+
import { getGtoupTopicColumns } from './config';
8+
import { ExpandedRow } from './ExpandedRow';
9+
import ResetOffsetDrawer from './ResetOffsetDrawer';
10+
const { request } = Utils;
11+
12+
export interface MetricLine {
13+
createTime?: number;
14+
metricPoints: Array<{
15+
aggType: string;
16+
createTime: number;
17+
timeStamp: number;
18+
unit: string;
19+
updateTime: number;
20+
value: number;
21+
}>;
22+
name: string;
23+
updateTime?: number;
24+
}
25+
26+
export interface MetricData {
27+
metricLines?: Array<MetricLine>;
28+
metricLine?: MetricLine;
29+
metricName: string;
30+
}
31+
32+
export interface HashData {
33+
groupName: string;
34+
topicName: string;
35+
}
36+
37+
const metricConsts = ['LogEndOffset', 'OffsetConsumed', 'Lag'];
38+
const metricWithType = [
39+
{ metricName: 'LogEndOffset', metricType: 104 },
40+
{ metricName: 'OffsetConsumed', metricType: 102 },
41+
{ metricName: 'Lag', metricType: 102 },
42+
];
43+
44+
const GroupDetail = (props: any) => {
45+
const { scene } = props;
46+
const urlParams = useParams<{
47+
clusterId: string;
48+
}>();
49+
const now = Date.now();
50+
const history = useHistory();
51+
const [hashData, setHashData] = useState<HashData>({ groupName: '', topicName: '' });
52+
const [visible, setVisible] = useState(false);
53+
54+
const [topicData, setTopicData] = useState([]);
55+
const [loading, setLoading] = useState(true);
56+
const [pagination, setPagination] = useState<any>(defaultPagination);
57+
const [expandedData, setExpandedData] = useState([]);
58+
const [chartData, setChartData] = useState<Array<MetricData>>([]);
59+
const [loadingObj, setLoadingObj] = useState<any>({});
60+
const [timeRange, setTimeRange] = useState([now - 24 * 60 * 60 * 1000, now]);
61+
const [curPartition, setCurPartition] = useState<string>('');
62+
const [groupMetricsData, setGroupMetricsData] = useState<Array<MetricData>>([]);
63+
const [openKeys, setOpenKeys] = useState();
64+
const [resetOffsetVisible, setResetOffsetVisible] = useState(false);
65+
const [resetOffsetArg, setResetOffsetArg] = useState({});
66+
67+
const genData = async ({ pageNo, pageSize, groupName }: any) => {
68+
if (urlParams?.clusterId === undefined) return;
69+
70+
setLoading(true);
71+
const params = {
72+
// searchKeywords: '',
73+
pageNo,
74+
pageSize,
75+
};
76+
77+
request(API.getGroupTopicList(+urlParams?.clusterId, groupName), { params })
78+
.then((res: any) => {
79+
setVisible(true);
80+
setPagination({
81+
current: res.pagination?.pageNo,
82+
pageSize: res.pagination?.pageSize,
83+
total: res.pagination?.total,
84+
});
85+
const newTopicListData = res?.bizData.map((item: any) => {
86+
return {
87+
...item,
88+
key: item.topicName,
89+
};
90+
});
91+
setTopicData(newTopicListData || []);
92+
setLoading(false);
93+
})
94+
.catch((err) => {
95+
setLoading(false);
96+
});
97+
};
98+
99+
const onClose = () => {
100+
setVisible(false);
101+
// clean hash'
102+
scene === 'topicDetail' && history.goBack();
103+
scene !== 'topicDetail' && window.history.pushState('', '', location.pathname);
104+
};
105+
106+
const resetOffset = (record: any) => {
107+
setResetOffsetVisible(true);
108+
setResetOffsetArg({
109+
topicName: record?.topicName,
110+
groupName: record?.groupName,
111+
});
112+
};
113+
114+
const onTableChange = (pagination: any, filters: any, sorter: any) => {
115+
genData({ pageNo: pagination.current, pageSize: pagination.pageSize, filters, sorter, groupName: hashData.groupName });
116+
};
117+
118+
const onClickExpand = (expanded: any, record: any) => {
119+
const key = record?.key;
120+
// 之前展开过
121+
if (expandedData[key]?.length) return;
122+
// 第一次展开
123+
setOpenKeys(key);
124+
// const loading = { ...loadingObj };
125+
// loading[key] = true;
126+
// setLoadingObj(loading);
127+
// expanded && queryExpandedData(record, key);
128+
};
129+
130+
useEffect(() => {
131+
const hashData = hashDataParse(location.hash);
132+
if (!hashData.groupName) {
133+
setVisible(false);
134+
}
135+
setHashData(hashData);
136+
// 获取分区列表 为图表模式做准备
137+
hashData.groupName && genData({ pageNo: 1, pageSize: pagination.pageSize, groupName: hashData.groupName });
138+
// getConsumersMetadata(hashData).then((res: any) => {
139+
// if (res.exist) {
140+
// setVisible(false);
141+
// history.push(`/cluster/${params?.clusterId}/consumers`);
142+
// return;
143+
// }
144+
// setVisible(true);
145+
// getTopicGroupPartitionsHistory(hashData)
146+
// .then((data: any) => {
147+
// if (data.length > 0) {
148+
// setCurPartition(data[0].partition);
149+
// }
150+
// setPartitionList(data);
151+
// return data;
152+
// })
153+
// .then((data) => {
154+
// getTopicGroupMetricHistory(data, hashData);
155+
// })
156+
// .catch((e) => {
157+
// history.push(`/cluster/${params?.clusterId}/consumers`);
158+
// setVisible(false);
159+
// });
160+
// // 获取Consumer列表 表格模式
161+
// getTopicGroupMetric(hashData);
162+
// });
163+
}, [hashDataParse(location.hash).groupName]);
164+
165+
return (
166+
<Drawer
167+
push={false}
168+
title="Consumer Group详情"
169+
width={1080}
170+
placement="right"
171+
onClose={onClose}
172+
visible={visible}
173+
className="consumer-group-detail-drawer"
174+
maskClosable={false}
175+
destroyOnClose
176+
// extra={
177+
// <Space>
178+
// {global.hasPermission &&
179+
// global.hasPermission(
180+
// scene === 'topicDetail' ? ClustersPermissionMap.TOPIC_RESET_OFFSET : ClustersPermissionMap.CONSUMERS_RESET_OFFSET
181+
// ) && <ResetOffsetDrawer record={hashData}></ResetOffsetDrawer>}
182+
// <Divider type="vertical" />
183+
// </Space>
184+
// }
185+
>
186+
<ProTable
187+
showQueryForm={false}
188+
tableProps={{
189+
showHeader: false,
190+
rowKey: 'key',
191+
loading: loading,
192+
columns: getGtoupTopicColumns({ resetOffset }),
193+
dataSource: topicData,
194+
paginationProps: { ...pagination },
195+
// noPagination: true,
196+
attrs: {
197+
className: 'consumer-group-detail-drawer-table',
198+
bordered: false,
199+
onChange: onTableChange,
200+
tableLayout: 'auto',
201+
scroll: { x: 'max-content' },
202+
expandable: {
203+
expandedRowRender: (record: any, index: number, indent: any, expanded: boolean) => (
204+
<ExpandedRow
205+
record={record}
206+
openKeys={openKeys}
207+
expanded={expanded}
208+
tableData={expandedData}
209+
chartData={chartData}
210+
groupName={hashDataParse(location.hash).groupName}
211+
loading={loadingObj}
212+
/>
213+
),
214+
// expandedRowRender,
215+
onExpand: onClickExpand,
216+
columnWidth: '20px',
217+
fixed: 'left',
218+
expandIcon: ({ expanded, onExpand, record }: any) => {
219+
return expanded ? (
220+
<IconFont
221+
style={{ fontSize: '16px' }}
222+
type="icon-xia"
223+
onClick={(e: any) => {
224+
onExpand(record, e);
225+
}}
226+
/>
227+
) : (
228+
<IconFont
229+
style={{ fontSize: '16px' }}
230+
type="icon-jiantou_1"
231+
onClick={(e: any) => {
232+
onExpand(record, e);
233+
}}
234+
/>
235+
);
236+
},
237+
},
238+
style: {
239+
width: '1032px',
240+
},
241+
},
242+
}}
243+
/>
244+
<ResetOffsetDrawer visible={resetOffsetVisible} setVisible={setResetOffsetVisible} record={resetOffsetArg}></ResetOffsetDrawer>
245+
</Drawer>
246+
);
247+
};
248+
249+
export default GroupDetail;

0 commit comments

Comments
 (0)