Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
kafka-manager
提交
39015b51
K
kafka-manager
项目概览
DiDi
/
kafka-manager
9 个月 前同步成功
通知
58
Star
6372
Fork
1229
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
K
kafka-manager
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
39015b51
编写于
9月 22, 2022
作者:
G
GraceWalk
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 多集群管理列表页增加手动刷新功能
上级
0d635ad4
变更
14
隐藏空白更改
内联
并排
Showing
14 changed file
with
243 addition
and
223 deletion
+243
-223
km-console/packages/layout-clusters-fe/src/constants/common.ts
...nsole/packages/layout-clusters-fe/src/constants/common.ts
+3
-0
km-console/packages/layout-clusters-fe/src/index.less
km-console/packages/layout-clusters-fe/src/index.less
+35
-0
km-console/packages/layout-clusters-fe/src/pages/BrokerControllerChangeLog/index.tsx
...clusters-fe/src/pages/BrokerControllerChangeLog/index.tsx
+23
-13
km-console/packages/layout-clusters-fe/src/pages/BrokerList/index.tsx
...ackages/layout-clusters-fe/src/pages/BrokerList/index.tsx
+23
-17
km-console/packages/layout-clusters-fe/src/pages/Consumers/index.less
...ackages/layout-clusters-fe/src/pages/Consumers/index.less
+4
-8
km-console/packages/layout-clusters-fe/src/pages/Consumers/index.tsx
...packages/layout-clusters-fe/src/pages/Consumers/index.tsx
+11
-17
km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx
...sole/packages/layout-clusters-fe/src/pages/Jobs/index.tsx
+38
-28
km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/index.tsx
...ages/layout-clusters-fe/src/pages/LoadRebalance/index.tsx
+14
-4
km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/index.less
...ages/layout-clusters-fe/src/pages/SecurityACLs/index.less
+0
-5
km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/index.tsx
...kages/layout-clusters-fe/src/pages/SecurityACLs/index.tsx
+41
-32
km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.less
...ges/layout-clusters-fe/src/pages/SecurityUsers/index.less
+0
-9
km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx
...ages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx
+36
-28
km-console/packages/layout-clusters-fe/src/pages/TopicList/index.less
...ackages/layout-clusters-fe/src/pages/TopicList/index.less
+4
-43
km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
...packages/layout-clusters-fe/src/pages/TopicList/index.tsx
+11
-19
未找到文件。
km-console/packages/layout-clusters-fe/src/constants/common.ts
浏览文件 @
39015b51
...
...
@@ -261,3 +261,6 @@ export const timeFormater = function formatDuring(mss: number) {
.
map
((
o
:
any
)
=>
`
${
o
.
v
}${
o
.
unit
}
`
)
.
join
();
};
// 列表页Header布局前缀
export
const
tableHeaderPrefix
=
'
table-header-layout
'
;
km-console/packages/layout-clusters-fe/src/index.less
浏览文件 @
39015b51
...
...
@@ -280,3 +280,38 @@ li {
line-height: 20px;
}
}
// Table Header 布局样式
.table-header-layout {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
&-left,
&-right {
display: flex;
align-items: center;
}
&-left {
&-refresh{
font-size: 20px;
color: #74788d;
cursor: pointer;
}
}
&-right{
&>*{
margin-left: 8px;
}
.search-input {
width: 248px;
}
}
&-divider{
height: 20px;
top: 0
}
}
km-console/packages/layout-clusters-fe/src/pages/BrokerControllerChangeLog/index.tsx
浏览文件 @
39015b51
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
useParams
,
useHistory
,
useLocation
}
from
'
react-router-dom
'
;
import
{
ProTable
,
Utils
,
AppContainer
}
from
'
knowdesign
'
;
import
{
ProTable
,
Utils
,
AppContainer
,
SearchInput
,
IconFont
}
from
'
knowdesign
'
;
import
API
from
'
../../api
'
;
import
{
getControllerChangeLogListColumns
,
defaultPagination
}
from
'
./config
'
;
import
BrokerDetail
from
'
../BrokerDetail
'
;
import
BrokerHealthCheck
from
'
@src/components/CardBar/BrokerHealthCheck
'
;
import
DBreadcrumb
from
'
knowdesign/es/extend/d-breadcrumb
'
;
import
'
./index.less
'
;
import
{
tableHeaderPrefix
}
from
'
@src/constants/common
'
;
const
{
request
}
=
Utils
;
const
ControllerChangeLogList
:
React
.
FC
=
(
props
:
any
)
=>
{
...
...
@@ -89,26 +90,35 @@ const ControllerChangeLogList: React.FC = (props: any) => {
<
BrokerHealthCheck
/>
</
div
>
<
div
className
=
"clustom-table-content"
>
<
div
className
=
{
tableHeaderPrefix
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left`
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh`
}
onClick
=
{
()
=>
genData
({
pageNo
:
pagination
.
current
,
pageSize
:
pagination
.
pageSize
})
}
>
<
IconFont
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh-icon`
}
type
=
"icon-shuaxin1"
/>
</
div
>
</
div
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-right`
}
>
<
SearchInput
onSearch
=
{
setSearchKeywords
}
attrs
=
{
{
placeholder
:
'
请输入Broker Host
'
,
style
:
{
width
:
'
248px
'
,
borderRiadus
:
'
8px
'
},
maxLength
:
128
,
}
}
/>
</
div
>
</
div
>
<
ProTable
showQueryForm
=
{
false
}
tableProps
=
{
{
showHeader
:
tru
e
,
showHeader
:
fals
e
,
rowKey
:
'
path
'
,
loading
:
loading
,
columns
:
getControllerChangeLogListColumns
(),
dataSource
:
data
,
paginationProps
:
{
...
pagination
},
tableHeaderSearchInput
:
{
// 搜索配置
submit
:
getSearchKeywords
,
searchInputType
:
'
search
'
,
searchAttr
:
{
placeholder
:
'
请输入Broker Host
'
,
style
:
{
width
:
'
248px
'
,
},
},
},
attrs
:
{
onChange
:
onTableChange
,
bordered
:
false
,
...
...
km-console/packages/layout-clusters-fe/src/pages/BrokerList/index.tsx
浏览文件 @
39015b51
import
React
,
{
useState
,
useEffect
,
memo
}
from
'
react
'
;
import
{
useParams
,
useHistory
,
useLocation
}
from
'
react-router-dom
'
;
import
{
ProTable
,
Drawer
,
Utils
,
AppContainer
}
from
'
knowdesign
'
;
import
{
ProTable
,
Drawer
,
Utils
,
AppContainer
,
SearchInput
,
IconFont
}
from
'
knowdesign
'
;
import
API
from
'
../../api
'
;
import
{
getBrokerListColumns
,
defaultPagination
}
from
'
./config
'
;
import
{
dealTableRequestParams
}
from
'
../..
/constants/common
'
;
import
{
tableHeaderPrefix
}
from
'
@src
/constants/common
'
;
import
BrokerDetail
from
'
../BrokerDetail
'
;
import
CardBar
from
'
@src/components/CardBar
'
;
import
BrokerHealthCheck
from
'
@src/components/CardBar/BrokerHealthCheck
'
;
...
...
@@ -33,7 +33,6 @@ const BrokerList: React.FC = (props: any) => {
if
(
urlParams
?.
clusterId
===
undefined
)
return
;
// filters = filters || filteredInfo;
setLoading
(
true
);
// const params = dealTableRequestParams({ searchKeywords, pageNo, pageSize });
const
params
=
{
searchKeywords
:
searchKeywords
.
slice
(
0
,
128
),
pageNo
,
...
...
@@ -99,29 +98,36 @@ const BrokerList: React.FC = (props: any) => {
<
BrokerHealthCheck
/>
</
div
>
<
div
className
=
"clustom-table-content"
>
<
div
className
=
{
tableHeaderPrefix
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left`
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh`
}
onClick
=
{
()
=>
genData
({
pageNo
:
pagination
.
current
,
pageSize
:
pagination
.
pageSize
})
}
>
<
IconFont
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh-icon`
}
type
=
"icon-shuaxin1"
/>
</
div
>
</
div
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-right`
}
>
<
SearchInput
onSearch
=
{
setSearchKeywords
}
attrs
=
{
{
placeholder
:
'
请输入Broker Host
'
,
style
:
{
width
:
'
248px
'
,
borderRiadus
:
'
8px
'
},
maxLength
:
128
,
}
}
/>
</
div
>
</
div
>
<
ProTable
key
=
"brokerTable"
showQueryForm
=
{
false
}
tableProps
=
{
{
showHeader
:
tru
e
,
showHeader
:
fals
e
,
rowKey
:
'
broker_list
'
,
loading
:
loading
,
columns
:
getBrokerListColumns
(),
dataSource
:
data
,
paginationProps
:
{
...
pagination
},
tableHeaderSearchInput
:
{
// 搜索配置
submit
:
getSearchKeywords
,
searchInputType
:
'
search
'
,
searchAttr
:
{
placeholder
:
'
请输入Broker Host
'
,
maxLength
:
128
,
style
:
{
width
:
'
248px
'
,
borderRiadus
:
'
8px
'
,
},
},
},
attrs
:
{
onChange
:
onTableChange
,
scroll
:
{
x
:
'
max-content
'
,
y
:
'
calc(100vh - 400px)
'
},
...
...
km-console/packages/layout-clusters-fe/src/pages/Consumers/index.less
浏览文件 @
39015b51
.operating-state {
.operation-bar {
.left {
.dcloud-form-item {
margin-bottom: 0;
}
.dcloud-form-item:first-of-type {
margin-right: 12px;
}
.consumers-search{
display: contents;
.search-input-short{
margin-right: 8px;
}
}
.pro-table-wrap {
...
...
km-console/packages/layout-clusters-fe/src/pages/Consumers/index.tsx
浏览文件 @
39015b51
/* eslint-disable react/display-name */
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
AppContainer
,
Form
,
Input
,
ProTable
,
Select
,
Utils
}
from
'
knowdesign
'
;
import
{
AppContainer
,
Divider
,
Form
,
IconFont
,
Input
,
ProTable
,
Select
,
Utils
}
from
'
knowdesign
'
;
import
'
./index.less
'
;
import
Api
from
'
@src/api/index
'
;
import
{
getOperatingStateListParams
}
from
'
./interface
'
;
...
...
@@ -8,7 +8,7 @@ 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
'
;
import
{
hashDataParse
,
tableHeaderPrefix
}
from
'
@src/constants/common
'
;
const
{
Option
}
=
Select
;
...
...
@@ -181,17 +181,13 @@ const AutoPage = (props: any) => {
<
div
className
=
{
`operating-state
${
scene
!==
'
topicDetail
'
&&
'
clustom-table-content
'
}
`
}
>
{
/* <CardBar cardColumns={data}></CardBar> */
}
{
scene
!==
'
topicDetail
'
&&
(
<
div
className
=
"operation-bar"
>
<
div
className
=
"left"
>
{
/* <Radio.Group
options={showModes}
optionType="button"
onChange={(e) => {
setShowMode(e.target.value);
}}
value={showMode}
/> */
}
<
Form
.
Item
label
=
""
>
<
div
className
=
{
tableHeaderPrefix
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left`
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh`
}
onClick
=
{
()
=>
searchFn
()
}
>
<
IconFont
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh-icon`
}
type
=
"icon-shuaxin1"
/>
</
div
>
<
Divider
type
=
"vertical"
className
=
{
`
${
tableHeaderPrefix
}
-divider`
}
/>
<
div
className
=
"consumers-search"
>
<
Input
className
=
"search-input-short"
placeholder
=
"请输入Consumer Group"
...
...
@@ -201,8 +197,6 @@ const AutoPage = (props: any) => {
}
}
onPressEnter
=
{
searchFn
}
/>
</
Form
.
Item
>
<
Form
.
Item
label
=
""
>
<
Input
className
=
"search-input-short"
placeholder
=
"请输入Topic name"
...
...
@@ -212,12 +206,12 @@ const AutoPage = (props: any) => {
}
}
onPressEnter
=
{
searchFn
}
/>
</
Form
.
Item
>
</
div
>
{
/* <Button type="primary" className="add-btn" onClick={searchFn}>
查询
</Button> */
}
</
div
>
<
div
className
=
"right"
></
div
>
{
/* <div className="right"></div> */
}
</
div
>
)
}
{
/* <Table columns={columns} dataSource={consumerGroupList} scroll={{ x: 1500 }} />
...
...
km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx
浏览文件 @
39015b51
import
React
,
{
useState
,
useEffect
,
memo
}
from
'
react
'
;
import
{
useParams
,
useHistory
,
useLocation
}
from
'
react-router-dom
'
;
import
{
ProTable
,
Drawer
,
Utils
,
AppContainer
,
Form
,
Select
,
Input
,
Button
,
message
,
Modal
}
from
'
knowdesign
'
;
import
{
ProTable
,
Drawer
,
Utils
,
AppContainer
,
Form
,
Select
,
Input
,
Button
,
message
,
Modal
,
IconFont
,
Divider
}
from
'
knowdesign
'
;
import
API
from
'
../../api
'
;
import
{
getJobsListColumns
,
defaultPagination
,
runningStatus
,
jobType
}
from
'
./config
'
;
import
JobsCheck
from
'
@src/components/CardBar/JobsCheck
'
;
...
...
@@ -10,6 +10,7 @@ import './index.less';
import
ReplicaChange
from
'
@src/components/TopicJob/ReplicaChange
'
;
import
ReplicaMove
from
'
@src/components/TopicJob/ReplicaMove
'
;
import
BalanceDrawer
from
'
../LoadRebalance/BalanceDrawer
'
;
import
{
tableHeaderPrefix
}
from
'
@src/constants/common
'
;
const
{
request
}
=
Utils
;
const
JobsList
:
React
.
FC
=
(
props
:
any
)
=>
{
...
...
@@ -171,35 +172,44 @@ const JobsList: React.FC = (props: any) => {
</
div
>
{
/* <Form form={form} layout="inline" onFinish={onFinish}> */
}
<
div
className
=
"clustom-table-content"
>
<
div
style
=
{
{
display
:
'
flex
'
,
alignItems
:
'
center
'
,
marginBottom
:
'
12px
'
}
}
>
<
Form
form
=
{
form
}
layout
=
"inline"
onFinish
=
{
onFinish
}
>
<
Form
.
Item
name
=
"type"
>
<
Select
options
=
{
jobType
}
style
=
{
{
width
:
'
190px
'
}
}
className
=
{
'
detail-table-select
'
}
placeholder
=
"选择任务类型"
/>
</
Form
.
Item
>
<
Form
.
Item
name
=
"jobTarget"
>
<
I
nput
allowClear
style
=
{
{
width
:
'
190px
'
}
}
placeholder
=
"请输入执行任务对象
"
/>
</
Form
.
Item
>
<
Form
.
Item
name
=
"status"
>
<
Select
mode
=
"multiple"
maxTagCount
=
{
'
responsive
'
}
options
=
{
runningStatus
}
style
=
{
{
width
:
'
190px
'
}
}
className
=
{
'
detail-table-select
'
}
placeholder
=
"选择运行状态"
showArrow
allowClear
/>
</
Form
.
Item
>
</
Form
>
<
div
>
<
Form
style
=
{
{
justifyContent
:
'
flex-end
'
}
}
form
=
{
form
}
layout
=
"inline"
onFinish
=
{
onFinish
}
>
<
Form
.
Item
style
=
{
{
marginRight
:
0
}
}
>
<
Button
type
=
"primary"
ghost
htmlType
=
"submit"
>
查询
</
Button
>
<
div
className
=
{
tableHeaderPrefix
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left`
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh`
}
onClick
=
{
()
=>
genData
({
pageNo
:
pagination
.
current
,
pageSize
:
pagination
.
pageSize
})
}
>
<
I
conFont
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh-icon`
}
type
=
"icon-shuaxin1
"
/>
</
div
>
<
Divider
type
=
"vertical"
className
=
{
`
${
tableHeaderPrefix
}
-divider`
}
/
>
<
Form
form
=
{
form
}
layout
=
"inline"
onFinish
=
{
onFinish
}
>
<
Form
.
Item
name
=
"type"
>
<
Select
options
=
{
jobType
}
style
=
{
{
width
:
'
190px
'
}
}
className
=
{
'
detail-table-select
'
}
placeholder
=
"选择任务类型"
/>
</
Form
.
Item
>
<
Form
.
Item
name
=
"jobTarget"
>
<
Input
allowClear
style
=
{
{
width
:
'
190px
'
}
}
placeholder
=
"请输入执行任务对象"
/>
</
Form
.
Item
>
<
Form
.
Item
name
=
"status"
>
<
Select
mode
=
"multiple"
maxTagCount
=
{
'
responsive
'
}
options
=
{
runningStatus
}
style
=
{
{
width
:
'
190px
'
}
}
className
=
{
'
detail-table-select
'
}
placeholder
=
"选择运行状态"
showArrow
allowClear
/
>
</
Form
.
Item
>
</
Form
>
<
div
>
<
Form
style
=
{
{
justifyContent
:
'
flex-end
'
}
}
form
=
{
form
}
layout
=
"inline"
onFinish
=
{
onFinish
}
>
<
Form
.
Item
style
=
{
{
marginRight
:
0
}
}
>
<
Button
type
=
"primary"
ghost
htmlType
=
"submit"
>
查询
</
Button
>
</
Form
.
Item
>
</
Form
>
</
div
>
</
div
>
</
div
>
{
/* </Form> */
}
...
...
km-console/packages/layout-clusters-fe/src/pages/LoadRebalance/index.tsx
浏览文件 @
39015b51
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
{
Select
,
Form
,
Utils
,
AppContainer
,
Input
,
Button
,
ProTable
,
Badge
,
Tag
,
SearchInput
}
from
'
knowdesign
'
;
import
{
Select
,
Form
,
Utils
,
AppContainer
,
Input
,
Button
,
ProTable
,
Badge
,
Tag
,
SearchInput
,
IconFont
,
Divider
}
from
'
knowdesign
'
;
import
BalanceDrawer
from
'
./BalanceDrawer
'
;
import
HistoryDrawer
from
'
./HistoryDrawer
'
;
import
DBreadcrumb
from
'
knowdesign/es/extend/d-breadcrumb
'
;
...
...
@@ -9,6 +9,7 @@ import './index.less';
import
LoadRebalanceCardBar
from
'
@src/components/CardBar/LoadRebalanceCardBar
'
;
import
{
BalanceFilter
}
from
'
./BalanceFilter
'
;
import
{
ClustersPermissionMap
}
from
'
../CommonConfig
'
;
import
{
tableHeaderPrefix
}
from
'
@src/constants/common
'
;
const
Balance_Status_OPTIONS
=
[
{
...
...
@@ -339,7 +340,17 @@ const LoadBalance: React.FC = (props: any) => {
</
div
>
<
div
className
=
"load-rebalance-container"
>
<
div
className
=
"balance-main clustom-table-content"
>
<
div
className
=
"header-con"
>
<
div
className
=
{
tableHeaderPrefix
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left`
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh`
}
onClick
=
{
()
=>
getList
({
searchKeywords
:
searchValue
,
stateParam
:
balanceList
})
}
>
<
IconFont
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh-icon`
}
type
=
"icon-shuaxin1"
/>
</
div
>
<
Divider
type
=
"vertical"
className
=
{
`
${
tableHeaderPrefix
}
-divider`
}
/>
<
BalanceFilter
title
=
"负载均衡列表筛选"
data
=
{
[]
}
getNorms
=
{
getNorms
}
filterList
=
{
filterList
}
/>
</
div
>
{
/* <Form form={form} layout="inline" onFinish={resetList}>
<Form.Item name="status">
<Select className="grid-select" placeholder="请选择状态" style={{ width: '180px' }} options={Balance_Status_OPTIONS} />
...
...
@@ -354,8 +365,7 @@ const LoadBalance: React.FC = (props: any) => {
</Button>
</Form.Item>
</Form> */
}
<
BalanceFilter
title
=
"负载均衡列表筛选"
data
=
{
[]
}
getNorms
=
{
getNorms
}
filterList
=
{
filterList
}
/>
<
div
className
=
"float-r"
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-right`
}
>
<
SearchInput
onSearch
=
{
hostSearch
}
attrs
=
{
{
...
...
km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/index.less
浏览文件 @
39015b51
...
...
@@ -10,11 +10,6 @@
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03);
// border-radius: 12px;
}
.operate-bar {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
}
}
.acls-edit-drawer {
...
...
km-console/packages/layout-clusters-fe/src/pages/SecurityACLs/index.tsx
浏览文件 @
39015b51
import
React
,
{
useEffect
,
useRef
,
useState
}
from
'
react
'
;
import
{
Button
,
Form
,
Input
,
Select
,
Modal
,
message
,
ProTable
,
AppContainer
,
DKSBreadcrumb
,
Utils
}
from
'
knowdesign
'
;
import
{
Button
,
Form
,
Input
,
Select
,
Modal
,
message
,
ProTable
,
AppContainer
,
DKSBreadcrumb
,
Utils
,
IconFont
,
Divider
}
from
'
knowdesign
'
;
import
ACLsCardBar
from
'
@src/components/CardBar/ACLsCardBar
'
;
import
api
from
'
@src/api
'
;
import
{
tableHeaderPrefix
}
from
'
@src/constants/common
'
;
import
{
useParams
}
from
'
react-router-dom
'
;
import
AddACLDrawer
,
{
ACL_OPERATION
,
...
...
@@ -205,37 +206,45 @@ const SecurityACLs = (): JSX.Element => {
<
ACLsCardBar
/>
</
div
>
<
div
className
=
"security-acls-page-list clustom-table-content"
>
<
div
className
=
"operate-bar"
>
<
Form
form
=
{
form
}
layout
=
"inline"
onFinish
=
{
()
=>
getACLs
({
page
:
1
})
}
>
<
Form
.
Item
name
=
"kafkaUser"
>
<
Input
placeholder
=
"请输入 Principal"
/>
</
Form
.
Item
>
<
Form
.
Item
name
=
"resourceType"
>
<
Select
placeholder
=
"选择 ResourceType"
options
=
{
Object
.
keys
(
RESOURCE_TO_OPERATIONS_MAP
).
map
((
key
)
=>
({
label
:
key
,
value
:
key
}))
}
mode
=
"multiple"
maxTagCount
=
"responsive"
allowClear
style
=
{
{
width
:
200
}
}
/>
</
Form
.
Item
>
<
Form
.
Item
name
=
"resourceName"
>
<
Input
placeholder
=
"请输入 Resource"
/>
</
Form
.
Item
>
<
Form
.
Item
>
<
Button
type
=
"primary"
ghost
htmlType
=
"submit"
>
查询
</
Button
>
</
Form
.
Item
>
</
Form
>
<
Button
type
=
"primary"
// icon={<PlusOutlined />}
onClick
=
{
()
=>
editDrawerRef
.
current
.
onOpen
(
true
,
getACLs
)
}
>
新增ACL
</
Button
>
<
div
className
=
{
tableHeaderPrefix
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left`
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh`
}
onClick
=
{
()
=>
getACLs
()
}
>
<
IconFont
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh-icon`
}
type
=
"icon-shuaxin1"
/>
</
div
>
<
Divider
type
=
"vertical"
className
=
{
`
${
tableHeaderPrefix
}
-divider`
}
/>
<
Form
form
=
{
form
}
layout
=
"inline"
onFinish
=
{
()
=>
getACLs
({
page
:
1
})
}
>
<
Form
.
Item
name
=
"kafkaUser"
>
<
Input
placeholder
=
"请输入 Principal"
/>
</
Form
.
Item
>
<
Form
.
Item
name
=
"resourceType"
>
<
Select
placeholder
=
"选择 ResourceType"
options
=
{
Object
.
keys
(
RESOURCE_TO_OPERATIONS_MAP
).
map
((
key
)
=>
({
label
:
key
,
value
:
key
}))
}
mode
=
"multiple"
maxTagCount
=
"responsive"
allowClear
style
=
{
{
width
:
200
}
}
/>
</
Form
.
Item
>
<
Form
.
Item
name
=
"resourceName"
>
<
Input
placeholder
=
"请输入 Resource"
/>
</
Form
.
Item
>
<
Form
.
Item
>
<
Button
type
=
"primary"
ghost
htmlType
=
"submit"
>
查询
</
Button
>
</
Form
.
Item
>
</
Form
>
</
div
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-right`
}
>
<
Button
type
=
"primary"
// icon={<PlusOutlined />}
onClick
=
{
()
=>
editDrawerRef
.
current
.
onOpen
(
true
,
getACLs
)
}
>
新增ACL
</
Button
>
</
div
>
</
div
>
<
ProTable
tableProps
=
{
{
...
...
km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.less
浏览文件 @
39015b51
...
...
@@ -8,15 +8,6 @@
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
.operate-bar {
display: flex;
justify-content: right;
margin-bottom: 12px;
.search-input {
width: 248px;
margin-right: 8px;
}
}
}
}
...
...
km-console/packages/layout-clusters-fe/src/pages/SecurityUsers/index.tsx
浏览文件 @
39015b51
...
...
@@ -22,6 +22,7 @@ import './index.less';
import
api
from
'
@src/api
'
;
import
{
useParams
}
from
'
react-router-dom
'
;
import
{
regKafkaPassword
}
from
'
@src/constants/reg
'
;
import
{
tableHeaderPrefix
}
from
'
@src/constants/common
'
;
export
const
randomString
=
(
len
=
32
,
chars
=
'
abcdefghijklmnopqrstuvwxyz1234567890
'
):
string
=>
{
const
maxPos
=
chars
.
length
;
...
...
@@ -426,34 +427,41 @@ const SecurityUsers = (): JSX.Element => {
]
}
/>
<
div
className
=
"security-users-page-list"
>
<
div
className
=
"operate-bar"
>
<
Input
className
=
"search-input"
suffix
=
{
<
IconFont
type
=
"icon-fangdajing"
onClick
=
{
(
_
)
=>
{
setSearchKeywords
(
searchKeywordsInput
);
}
}
style
=
{
{
fontSize
:
'
16px
'
}
}
/>
}
placeholder
=
"请输入 Kafka User"
value
=
{
searchKeywordsInput
}
onPressEnter
=
{
(
_
)
=>
{
setSearchKeywords
(
searchKeywordsInput
);
}
}
onChange
=
{
(
e
)
=>
{
setSearchKeywordsInput
(
e
.
target
.
value
);
}
}
/>
<
Button
type
=
"primary"
// icon={<PlusOutlined />}
onClick
=
{
()
=>
editDrawerRef
.
current
.
onOpen
(
true
,
UsersOperate
.
Add
,
getKafkaUserList
)
}
>
新增KafkaUser
</
Button
>
<
div
className
=
{
tableHeaderPrefix
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left`
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh`
}
onClick
=
{
()
=>
getKafkaUserList
()
}
>
<
IconFont
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh-icon`
}
type
=
"icon-shuaxin1"
/>
</
div
>
</
div
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-right`
}
>
<
Input
className
=
"search-input"
suffix
=
{
<
IconFont
type
=
"icon-fangdajing"
onClick
=
{
(
_
)
=>
{
setSearchKeywords
(
searchKeywordsInput
);
}
}
style
=
{
{
fontSize
:
'
16px
'
}
}
/>
}
placeholder
=
"请输入 Kafka User"
value
=
{
searchKeywordsInput
}
onPressEnter
=
{
(
_
)
=>
{
setSearchKeywords
(
searchKeywordsInput
);
}
}
onChange
=
{
(
e
)
=>
{
setSearchKeywordsInput
(
e
.
target
.
value
);
}
}
/>
<
Button
type
=
"primary"
// icon={<PlusOutlined />}
onClick
=
{
()
=>
editDrawerRef
.
current
.
onOpen
(
true
,
UsersOperate
.
Add
,
getKafkaUserList
)
}
>
新增KafkaUser
</
Button
>
</
div
>
</
div
>
<
ProTable
...
...
km-console/packages/layout-clusters-fe/src/pages/TopicList/index.less
浏览文件 @
39015b51
.operation-bar {
// height: 60px;
.internal-switch {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
.left {
display: flex;
align-items: center;
.divider {
margin-left: 8px;
margin-right: 8px;
width: 1px;
height: 20px;
background-color: #ced4da;
}
.internal-switch {
display: flex;
align-items: center;
> span {
margin-left: 4px;
color: #74788d;
}
}
}
.right {
display: flex;
align-items: center;
.dcloud-form-item {
margin-bottom: 0;
}
.search-input {
width: 248px;
margin-right: 8px;
}
.search-input-short {
width: 120px;
margin-right: 8px;
}
.batch-btn {
margin-right: 8px;
}
.add-btn {
width: 117px;
}
> span {
margin-left: 4px;
color: #74788d;
}
}
.operation-list {
...
...
km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
浏览文件 @
39015b51
/* eslint-disable react/display-name */
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
useHistory
,
useParams
}
from
'
react-router-dom
'
;
import
{
AppContainer
,
IconFont
,
Input
,
ProTable
,
Select
,
Switch
,
Tooltip
,
Utils
,
Dropdown
,
Menu
,
Button
}
from
'
knowdesign
'
;
import
{
AppContainer
,
IconFont
,
Input
,
ProTable
,
Select
,
Switch
,
Tooltip
,
Utils
,
Dropdown
,
Menu
,
Button
,
Divider
}
from
'
knowdesign
'
;
import
Create
from
'
./Create
'
;
import
'
./index.less
'
;
import
Api
from
'
@src/api/index
'
;
...
...
@@ -16,6 +16,7 @@ import SmallChart from '@src/components/SmallChart';
import
ReplicaMove
from
'
@src/components/TopicJob/ReplicaMove
'
;
import
{
formatAssignSize
}
from
'
../Jobs/config
'
;
import
{
DownOutlined
}
from
'
@ant-design/icons
'
;
import
{
tableHeaderPrefix
}
from
'
@src/constants/common
'
;
const
{
Option
}
=
Select
;
...
...
@@ -66,6 +67,7 @@ const AutoPage = (props: any) => {
// params.sortField = sortObj.sortField;
// params.sortType = sortObj.sortType || 'desc';
// }
setTopicListLoading
(
true
);
Utils
.
post
(
Api
.
getTopicsList
(
Number
(
routeParams
.
clusterId
)),
params
)
.
then
((
data
:
any
)
=>
{
setTopicListLoading
(
false
);
...
...
@@ -79,7 +81,6 @@ const AutoPage = (props: any) => {
});
};
useEffect
(()
=>
{
setTopicListLoading
(
true
);
getTopicsList
();
},
[
sortObj
,
showInternalTopics
,
searchKeywords
,
pageIndex
,
pageSize
]);
...
...
@@ -285,26 +286,17 @@ const AutoPage = (props: any) => {
<
TopicHealthCheck
></
TopicHealthCheck
>
</
div
>
<
div
className
=
"clustom-table-content"
>
<
div
className
=
"operation-bar"
>
<
div
className
=
"left"
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
`
}
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left`
}
>
{
/* 批量扩缩副本 */
}
<
ReplicaChange
drawerVisible
=
{
changeVisible
}
jobId
=
{
''
}
topics
=
{
selectedRowKeys
}
onClose
=
{
onclose
}
></
ReplicaChange
>
{
/* 批量迁移 */
}
<
ReplicaMove
drawerVisible
=
{
moveVisible
}
jobId
=
{
''
}
topics
=
{
selectedRowKeys
}
onClose
=
{
onclose
}
></
ReplicaMove
>
{
/* <Select style={{ width: 140 }} placeholder="批量操作" value={selectValue} disabled={selectedRowKeys.length <= 0}>
<Option value="expandAndReduce">
<div onClick={() => setChangeVisible(true)}>批量扩缩副本</div>
</Option>
<Option value="transfer">
<div onClick={() => setMoveVisible(true)}>批量迁移</div>
</Option>
</Select> */
}
{
/* <Dropdown overlay={menu} disabled={selectedRowKeys.length <= 0} trigger={['click']}>
<Button icon={<DownOutlined />} type="primary" ghost disabled={selectedRowKeys.length <= 0}>
批量操作
</Button>
</Dropdown> */
}
{
/* <div className="divider"></div> */
}
<
div
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh`
}
onClick
=
{
()
=>
getTopicsList
()
}
>
<
IconFont
className
=
{
`
${
tableHeaderPrefix
}
-left-refresh-icon`
}
type
=
"icon-shuaxin1"
/>
</
div
>
<
Divider
type
=
"vertical"
className
=
{
`
${
tableHeaderPrefix
}
-divider`
}
/>
<
div
className
=
"internal-switch"
>
<
Switch
size
=
"small"
...
...
@@ -316,7 +308,7 @@ const AutoPage = (props: any) => {
<
span
>
展示系统Topic
</
span
>
</
div
>
</
div
>
<
div
className
=
"right"
>
<
div
className
=
{
`
${
tableHeaderPrefix
}
-right`
}
>
<
Input
className
=
"search-input"
suffix
=
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录