Skip to content

Commit 39015b5

Browse files
GraceWalkGraceWalk
committed
feat: 多集群管理列表页增加手动刷新功能
1 parent 0d635ad commit 39015b5

File tree

14 files changed

+243
-223
lines changed

14 files changed

+243
-223
lines changed

‎km-console/packages/layout-clusters-fe/src/constants/common.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -261,3 +261,6 @@ export const timeFormater = function formatDuring(mss: number) {
261261
.map((o: any) => `${o.v}${o.unit}`)
262262
.join();
263263
};
264+
265+
// 列表页Header布局前缀
266+
export const tableHeaderPrefix = 'table-header-layout';

‎km-console/packages/layout-clusters-fe/src/index.less‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,3 +280,38 @@ li {
280280
line-height: 20px;
281281
}
282282
}
283+
284+
285+
// Table Header 布局样式
286+
.table-header-layout {
287+
display: flex;
288+
justify-content: space-between;
289+
margin-bottom: 12px;
290+
&-left,
291+
&-right {
292+
display: flex;
293+
align-items: center;
294+
}
295+
&-left {
296+
&-refresh{
297+
font-size: 20px;
298+
color: #74788d;
299+
cursor: pointer;
300+
}
301+
}
302+
303+
&-right{
304+
&>*{
305+
margin-left: 8px;
306+
}
307+
308+
.search-input {
309+
width: 248px;
310+
}
311+
}
312+
313+
&-divider{
314+
height: 20px;
315+
top: 0
316+
}
317+
}

‎km-console/packages/layout-clusters-fe/src/pages/BrokerControllerChangeLog/index.tsx‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React, { useState, useEffect } from 'react';
22
import { useParams, useHistory, useLocation } from 'react-router-dom';
3-
import { ProTable, Utils, AppContainer } from 'knowdesign';
3+
import { ProTable, Utils, AppContainer, SearchInput, IconFont } from 'knowdesign';
44
import API from '../../api';
55
import { getControllerChangeLogListColumns, defaultPagination } from './config';
66
import BrokerDetail from '../BrokerDetail';
77
import BrokerHealthCheck from '@src/components/CardBar/BrokerHealthCheck';
88
import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
99
import './index.less';
10+
import { tableHeaderPrefix } from '@src/constants/common';
1011

1112
const { request } = Utils;
1213
const ControllerChangeLogList: React.FC = (props: any) => {
@@ -89,26 +90,35 @@ const ControllerChangeLogList: React.FC = (props: any) => {
8990
<BrokerHealthCheck />
9091
</div>
9192
<div className="clustom-table-content">
93+
<div className={tableHeaderPrefix}>
94+
<div className={`${tableHeaderPrefix}-left`}>
95+
<div
96+
className={`${tableHeaderPrefix}-left-refresh`}
97+
onClick={() => genData({ pageNo: pagination.current, pageSize: pagination.pageSize })}
98+
>
99+
<IconFont className={`${tableHeaderPrefix}-left-refresh-icon`} type="icon-shuaxin1" />
100+
</div>
101+
</div>
102+
<div className={`${tableHeaderPrefix}-right`}>
103+
<SearchInput
104+
onSearch={setSearchKeywords}
105+
attrs={{
106+
placeholder: '请输入Broker Host',
107+
style: { width: '248px', borderRiadus: '8px' },
108+
maxLength: 128,
109+
}}
110+
/>
111+
</div>
112+
</div>
92113
<ProTable
93114
showQueryForm={false}
94115
tableProps={{
95-
showHeader: true,
116+
showHeader: false,
96117
rowKey: 'path',
97118
loading: loading,
98119
columns: getControllerChangeLogListColumns(),
99120
dataSource: data,
100121
paginationProps: { ...pagination },
101-
tableHeaderSearchInput: {
102-
// 搜索配置
103-
submit: getSearchKeywords,
104-
searchInputType: 'search',
105-
searchAttr: {
106-
placeholder: '请输入Broker Host',
107-
style: {
108-
width: '248px',
109-
},
110-
},
111-
},
112122
attrs: {
113123
onChange: onTableChange,
114124
bordered: false,

‎km-console/packages/layout-clusters-fe/src/pages/BrokerList/index.tsx‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { useState, useEffect, memo } from 'react';
22
import { useParams, useHistory, useLocation } from 'react-router-dom';
3-
import { ProTable, Drawer, Utils, AppContainer } from 'knowdesign';
3+
import { ProTable, Drawer, Utils, AppContainer, SearchInput, IconFont } from 'knowdesign';
44
import API from '../../api';
55
import { getBrokerListColumns, defaultPagination } from './config';
6-
import { dealTableRequestParams } from '../../constants/common';
6+
import { tableHeaderPrefix } from '@src/constants/common';
77
import BrokerDetail from '../BrokerDetail';
88
import CardBar from '@src/components/CardBar';
99
import BrokerHealthCheck from '@src/components/CardBar/BrokerHealthCheck';
@@ -33,7 +33,6 @@ const BrokerList: React.FC = (props: any) => {
3333
if (urlParams?.clusterId === undefined) return;
3434
// filters = filters || filteredInfo;
3535
setLoading(true);
36-
// const params = dealTableRequestParams({ searchKeywords, pageNo, pageSize });
3736
const params = {
3837
searchKeywords: searchKeywords.slice(0, 128),
3938
pageNo,
@@ -99,29 +98,36 @@ const BrokerList: React.FC = (props: any) => {
9998
<BrokerHealthCheck />
10099
</div>
101100
<div className="clustom-table-content">
101+
<div className={tableHeaderPrefix}>
102+
<div className={`${tableHeaderPrefix}-left`}>
103+
<div
104+
className={`${tableHeaderPrefix}-left-refresh`}
105+
onClick={() => genData({ pageNo: pagination.current, pageSize: pagination.pageSize })}
106+
>
107+
<IconFont className={`${tableHeaderPrefix}-left-refresh-icon`} type="icon-shuaxin1" />
108+
</div>
109+
</div>
110+
<div className={`${tableHeaderPrefix}-right`}>
111+
<SearchInput
112+
onSearch={setSearchKeywords}
113+
attrs={{
114+
placeholder: '请输入Broker Host',
115+
style: { width: '248px', borderRiadus: '8px' },
116+
maxLength: 128,
117+
}}
118+
/>
119+
</div>
120+
</div>
102121
<ProTable
103122
key="brokerTable"
104123
showQueryForm={false}
105124
tableProps={{
106-
showHeader: true,
125+
showHeader: false,
107126
rowKey: 'broker_list',
108127
loading: loading,
109128
columns: getBrokerListColumns(),
110129
dataSource: data,
111130
paginationProps: { ...pagination },
112-
tableHeaderSearchInput: {
113-
// 搜索配置
114-
submit: getSearchKeywords,
115-
searchInputType: 'search',
116-
searchAttr: {
117-
placeholder: '请输入Broker Host',
118-
maxLength: 128,
119-
style: {
120-
width: '248px',
121-
borderRiadus: '8px',
122-
},
123-
},
124-
},
125131
attrs: {
126132
onChange: onTableChange,
127133
scroll: { x: 'max-content', y: 'calc(100vh - 400px)' },

‎km-console/packages/layout-clusters-fe/src/pages/Consumers/index.less‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
.operating-state {
2-
.operation-bar {
3-
.left {
4-
.dcloud-form-item {
5-
margin-bottom: 0;
6-
}
7-
.dcloud-form-item:first-of-type {
8-
margin-right: 12px;
9-
}
2+
.consumers-search{
3+
display: contents;
4+
.search-input-short{
5+
margin-right: 8px;
106
}
117
}
128
.pro-table-wrap {

‎km-console/packages/layout-clusters-fe/src/pages/Consumers/index.tsx‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/* eslint-disable react/display-name */
22
import React, { useState, useEffect } from 'react';
3-
import { AppContainer, Form, Input, ProTable, Select, Utils } from 'knowdesign';
3+
import { AppContainer, Divider, Form, IconFont, Input, ProTable, Select, Utils } from 'knowdesign';
44
import './index.less';
55
import Api from '@src/api/index';
66
import { getOperatingStateListParams } from './interface';
77
import { useParams } from 'react-router-dom';
88
import ConsumerGroupDetail from './ConsumerGroupDetail';
99
import ConsumerGroupHealthCheck from '@src/components/CardBar/ConsumerGroupHealthCheck';
1010
import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
11-
import { hashDataParse } from '@src/constants/common';
11+
import { hashDataParse, tableHeaderPrefix } from '@src/constants/common';
1212

1313
const { Option } = Select;
1414

@@ -181,17 +181,13 @@ const AutoPage = (props: any) => {
181181
<div className={`operating-state ${scene !== 'topicDetail' && 'clustom-table-content'}`}>
182182
{/* <CardBar cardColumns={data}></CardBar> */}
183183
{scene !== 'topicDetail' && (
184-
<div className="operation-bar">
185-
<div className="left">
186-
{/* <Radio.Group
187-
options={showModes}
188-
optionType="button"
189-
onChange={(e) => {
190-
setShowMode(e.target.value);
191-
}}
192-
value={showMode}
193-
/> */}
194-
<Form.Item label="">
184+
<div className={tableHeaderPrefix}>
185+
<div className={`${tableHeaderPrefix}-left`}>
186+
<div className={`${tableHeaderPrefix}-left-refresh`} onClick={() => searchFn()}>
187+
<IconFont className={`${tableHeaderPrefix}-left-refresh-icon`} type="icon-shuaxin1" />
188+
</div>
189+
<Divider type="vertical" className={`${tableHeaderPrefix}-divider`} />
190+
<div className="consumers-search">
195191
<Input
196192
className="search-input-short"
197193
placeholder="请输入Consumer Group"
@@ -201,8 +197,6 @@ const AutoPage = (props: any) => {
201197
}}
202198
onPressEnter={searchFn}
203199
/>
204-
</Form.Item>
205-
<Form.Item label="">
206200
<Input
207201
className="search-input-short"
208202
placeholder="请输入Topic name"
@@ -212,12 +206,12 @@ const AutoPage = (props: any) => {
212206
}}
213207
onPressEnter={searchFn}
214208
/>
215-
</Form.Item>
209+
</div>
216210
{/* <Button type="primary" className="add-btn" onClick={searchFn}>
217211
查询
218212
</Button> */}
219213
</div>
220-
<div className="right"></div>
214+
{/* <div className="right"></div> */}
221215
</div>
222216
)}
223217
{/* <Table columns={columns} dataSource={consumerGroupList} scroll={{ x: 1500 }} />

‎km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx‎

Lines changed: 38 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect, memo } from 'react';
22
import { useParams, useHistory, useLocation } from 'react-router-dom';
3-
import { ProTable, Drawer, Utils, AppContainer, Form, Select, Input, Button, message, Modal } from 'knowdesign';
3+
import { ProTable, Drawer, Utils, AppContainer, Form, Select, Input, Button, message, Modal, IconFont, Divider } from 'knowdesign';
44
import API from '../../api';
55
import { getJobsListColumns, defaultPagination, runningStatus, jobType } from './config';
66
import JobsCheck from '@src/components/CardBar/JobsCheck';
@@ -10,6 +10,7 @@ import './index.less';
1010
import ReplicaChange from '@src/components/TopicJob/ReplicaChange';
1111
import ReplicaMove from '@src/components/TopicJob/ReplicaMove';
1212
import BalanceDrawer from '../LoadRebalance/BalanceDrawer';
13+
import { tableHeaderPrefix } from '@src/constants/common';
1314
const { request } = Utils;
1415

1516
const JobsList: React.FC = (props: any) => {
@@ -171,35 +172,44 @@ const JobsList: React.FC = (props: any) => {
171172
</div>
172173
{/* <Form form={form} layout="inline" onFinish={onFinish}> */}
173174
<div className="clustom-table-content">
174-
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '12px' }}>
175-
<Form form={form} layout="inline" onFinish={onFinish}>
176-
<Form.Item name="type">
177-
<Select options={jobType} style={{ width: '190px' }} className={'detail-table-select'} placeholder="选择任务类型" />
178-
</Form.Item>
179-
<Form.Item name="jobTarget">
180-
<Input allowClear style={{ width: '190px' }} placeholder="请输入执行任务对象" />
181-
</Form.Item>
182-
<Form.Item name="status">
183-
<Select
184-
mode="multiple"
185-
maxTagCount={'responsive'}
186-
options={runningStatus}
187-
style={{ width: '190px' }}
188-
className={'detail-table-select'}
189-
placeholder="选择运行状态"
190-
showArrow
191-
allowClear
192-
/>
193-
</Form.Item>
194-
</Form>
195-
<div>
196-
<Form style={{ justifyContent: 'flex-end' }} form={form} layout="inline" onFinish={onFinish}>
197-
<Form.Item style={{ marginRight: 0 }}>
198-
<Button type="primary" ghost htmlType="submit">
199-
查询
200-
</Button>
175+
<div className={tableHeaderPrefix}>
176+
<div className={`${tableHeaderPrefix}-left`}>
177+
<div
178+
className={`${tableHeaderPrefix}-left-refresh`}
179+
onClick={() => genData({ pageNo: pagination.current, pageSize: pagination.pageSize })}
180+
>
181+
<IconFont className={`${tableHeaderPrefix}-left-refresh-icon`} type="icon-shuaxin1" />
182+
</div>
183+
<Divider type="vertical" className={`${tableHeaderPrefix}-divider`} />
184+
<Form form={form} layout="inline" onFinish={onFinish}>
185+
<Form.Item name="type">
186+
<Select options={jobType} style={{ width: '190px' }} className={'detail-table-select'} placeholder="选择任务类型" />
187+
</Form.Item>
188+
<Form.Item name="jobTarget">
189+
<Input allowClear style={{ width: '190px' }} placeholder="请输入执行任务对象" />
190+
</Form.Item>
191+
<Form.Item name="status">
192+
<Select
193+
mode="multiple"
194+
maxTagCount={'responsive'}
195+
options={runningStatus}
196+
style={{ width: '190px' }}
197+
className={'detail-table-select'}
198+
placeholder="选择运行状态"
199+
showArrow
200+
allowClear
201+
/>
201202
</Form.Item>
202203
</Form>
204+
<div>
205+
<Form style={{ justifyContent: 'flex-end' }} form={form} layout="inline" onFinish={onFinish}>
206+
<Form.Item style={{ marginRight: 0 }}>
207+
<Button type="primary" ghost htmlType="submit">
208+
查询
209+
</Button>
210+
</Form.Item>
211+
</Form>
212+
</div>
203213
</div>
204214
</div>
205215
{/* </Form> */}

‎km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/index.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect, useRef } from 'react';
2-
import { Select, Form, Utils, AppContainer, Input, Button, ProTable, Badge, Tag, SearchInput } from 'knowdesign';
2+
import { Select, Form, Utils, AppContainer, Input, Button, ProTable, Badge, Tag, SearchInput, IconFont, Divider } from 'knowdesign';
33
import BalanceDrawer from './BalanceDrawer';
44
import HistoryDrawer from './HistoryDrawer';
55
import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
@@ -9,6 +9,7 @@ import './index.less';
99
import LoadRebalanceCardBar from '@src/components/CardBar/LoadRebalanceCardBar';
1010
import { BalanceFilter } from './BalanceFilter';
1111
import { ClustersPermissionMap } from '../CommonConfig';
12+
import { tableHeaderPrefix } from '@src/constants/common';
1213

1314
const Balance_Status_OPTIONS = [
1415
{
@@ -339,7 +340,17 @@ const LoadBalance: React.FC = (props: any) => {
339340
</div>
340341
<div className="load-rebalance-container">
341342
<div className="balance-main clustom-table-content">
342-
<div className="header-con">
343+
<div className={tableHeaderPrefix}>
344+
<div className={`${tableHeaderPrefix}-left`}>
345+
<div
346+
className={`${tableHeaderPrefix}-left-refresh`}
347+
onClick={() => getList({ searchKeywords: searchValue, stateParam: balanceList })}
348+
>
349+
<IconFont className={`${tableHeaderPrefix}-left-refresh-icon`} type="icon-shuaxin1" />
350+
</div>
351+
<Divider type="vertical" className={`${tableHeaderPrefix}-divider`} />
352+
<BalanceFilter title="负载均衡列表筛选" data={[]} getNorms={getNorms} filterList={filterList} />
353+
</div>
343354
{/* <Form form={form} layout="inline" onFinish={resetList}>
344355
<Form.Item name="status">
345356
<Select className="grid-select" placeholder="请选择状态" style={{ width: '180px' }} options={Balance_Status_OPTIONS} />
@@ -354,8 +365,7 @@ const LoadBalance: React.FC = (props: any) => {
354365
</Button>
355366
</Form.Item>
356367
</Form> */}
357-
<BalanceFilter title="负载均衡列表筛选" data={[]} getNorms={getNorms} filterList={filterList} />
358-
<div className="float-r">
368+
<div className={`${tableHeaderPrefix}-right`}>
359369
<SearchInput
360370
onSearch={hostSearch}
361371
attrs={{

0 commit comments

Comments
 (0)