Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
kafka-manager
提交
47887a20
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 搜索 >>
提交
47887a20
编写于
8月 24, 2022
作者:
Z
zengqiao
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
前端优化
上级
9465c6f1
变更
19
隐藏空白更改
内联
并排
Showing
19 changed file
with
115 addition
and
97 deletion
+115
-97
km-console/packages/config-manager-fe/src/components/TagsWithHide/index.less
.../config-manager-fe/src/components/TagsWithHide/index.less
+2
-1
km-console/packages/config-manager-fe/src/pages/CommonConfig.tsx
...ole/packages/config-manager-fe/src/pages/CommonConfig.tsx
+6
-8
km-console/packages/config-manager-fe/src/pages/OperationLog/index.tsx
...ckages/config-manager-fe/src/pages/OperationLog/index.tsx
+8
-1
km-console/packages/layout-clusters-fe/src/api/index.ts
km-console/packages/layout-clusters-fe/src/api/index.ts
+1
-0
km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/config.tsx
...-clusters-fe/src/components/DashboardDragChart/config.tsx
+5
-3
km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.less
...-clusters-fe/src/components/DashboardDragChart/index.less
+3
-0
km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.tsx
...t-clusters-fe/src/components/DashboardDragChart/index.tsx
+8
-8
km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/index.tsx
...ut-clusters-fe/src/components/SingleChartHeader/index.tsx
+2
-2
km-console/packages/layout-clusters-fe/src/components/SmallChart/index.tsx
...es/layout-clusters-fe/src/components/SmallChart/index.tsx
+1
-0
km-console/packages/layout-clusters-fe/src/constants/axiosConfig.ts
.../packages/layout-clusters-fe/src/constants/axiosConfig.ts
+4
-7
km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts
.../packages/layout-clusters-fe/src/constants/chartConfig.ts
+14
-15
km-console/packages/layout-clusters-fe/src/pages/Consumers/ConsumerGroupDetail.tsx
...t-clusters-fe/src/pages/Consumers/ConsumerGroupDetail.tsx
+1
-0
km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/CustomCheckGroup.tsx
...usters-fe/src/pages/MutliClusterPage/CustomCheckGroup.tsx
+29
-25
km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/HomePage.tsx
...ayout-clusters-fe/src/pages/MutliClusterPage/HomePage.tsx
+21
-13
km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/index.less
.../layout-clusters-fe/src/pages/MutliClusterPage/index.less
+2
-1
km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/config.tsx
...s-fe/src/pages/SingleClusterDetail/DetailChart/config.tsx
+1
-0
km-console/packages/layout-clusters-fe/src/pages/TopicList/ExpandPartition.tsx
...ayout-clusters-fe/src/pages/TopicList/ExpandPartition.tsx
+2
-13
km-console/packages/layout-clusters-fe/src/pages/TopicList/config.tsx
...ackages/layout-clusters-fe/src/pages/TopicList/config.tsx
+1
-0
km-console/packages/layout-clusters-fe/src/style-addition.less
...nsole/packages/layout-clusters-fe/src/style-addition.less
+4
-0
未找到文件。
km-console/packages/config-manager-fe/src/components/TagsWithHide/index.less
浏览文件 @
47887a20
...
...
@@ -46,7 +46,7 @@
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0 6px 12px 12px rgba(0, 0, 0, 0.04), 0 6px 10px 0 rgba(0, 0, 0, 0.08);
border-radius: 8px;
&-content {
padding:
10px 8px 4px 8px
;
padding:
0
;
}
}
.dcloud-popover-arrow-content {
...
...
@@ -56,6 +56,7 @@
display: flex;
flex-flow: row wrap;
max-width: 560px;
padding: 10px 8px 4px 8px;
.container-item {
flex-shrink: 0;
height: 20px;
...
...
km-console/packages/config-manager-fe/src/pages/CommonConfig.tsx
浏览文件 @
47887a20
...
...
@@ -31,10 +31,10 @@ export interface PermissionNode {
}
const
CommonConfig
=
():
JSX
.
Element
=>
{
const
[
global
,
setGlobal
]
=
AppContainer
.
useGlobalValue
();
const
[,
setGlobal
]
=
AppContainer
.
useGlobalValue
();
// 获取权限树
const
getPermissionTree
=
(
userId
:
number
)
=>
{
const
getPermissionTree
=
(
userI
nfo
,
userI
d
:
number
)
=>
{
const
getUserInfo
=
Utils
.
request
(
`/logi-security/api/v1/user/
${
userId
}
`
);
const
getPermissionTree
=
Utils
.
request
(
'
/logi-security/api/v1/permission/tree
'
);
...
...
@@ -55,18 +55,16 @@ const CommonConfig = (): JSX.Element => {
useLayoutEffect
(()
=>
{
// 如果未登录,直接跳转到登录页
const
userInfo
=
localStorage
.
getItem
(
'
userInfo
'
);
let
userId
:
number
;
const
userInfoStorage
=
localStorage
.
getItem
(
'
userInfo
'
);
try
{
userId
=
JSON
.
parse
(
userInfo
).
id
;
const
userInfo
=
JSON
.
parse
(
userInfoStorage
);
const
userId
=
userInfo
.
id
;
if
(
!
userId
)
throw
'
err
'
;
getPermissionTree
(
userInfo
,
userId
);
}
catch
(
_
)
{
goLogin
();
return
;
}
getPermissionTree
(
userId
);
},
[]);
return
<></>;
...
...
km-console/packages/config-manager-fe/src/pages/OperationLog/index.tsx
浏览文件 @
47887a20
import
React
,
{
useEffect
,
useState
}
from
'
react
'
;
import
{
Button
,
Form
,
Input
,
Select
,
ProTable
,
DatePicker
,
Utils
}
from
'
knowdesign
'
;
import
{
Button
,
Form
,
Input
,
Select
,
ProTable
,
DatePicker
,
Utils
,
Tooltip
}
from
'
knowdesign
'
;
import
api
from
'
api
'
;
import
{
defaultPagination
}
from
'
constants/common
'
;
import
TypicalListCard
from
'
../../components/TypicalListCard
'
;
...
...
@@ -39,6 +39,13 @@ export default () => {
dataIndex
:
'
detail
'
,
width
:
350
,
lineClampOne
:
true
,
render
(
content
)
{
return
(
<
Tooltip
placement
=
"bottomLeft"
title
=
{
content
}
>
{
content
}
</
Tooltip
>
);
},
},
{
title
:
'
操作时间
'
,
...
...
km-console/packages/layout-clusters-fe/src/api/index.ts
浏览文件 @
47887a20
...
...
@@ -66,6 +66,7 @@ const api = {
getPhyClusterBasic
:
(
clusterPhyId
:
number
)
=>
getApi
(
`/physical-clusters/
${
clusterPhyId
}
/basic`
),
getPhyClusterMetrics
:
(
clusterPhyId
:
number
)
=>
getApi
(
`/physical-clusters/
${
clusterPhyId
}
/latest-metrics`
),
getClusterBasicExit
:
(
clusterPhyName
:
string
)
=>
getApi
(
`/physical-clusters/
${
clusterPhyName
}
/basic-combine-exist`
),
getClustersVersion
:
getApi
(
'
/physical-clusters/exist-version
'
),
kafkaValidator
:
getApi
(
`/utils/kafka-validator`
),
...
...
km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/config.tsx
浏览文件 @
47887a20
...
...
@@ -144,9 +144,10 @@ const seriesCallback = (lines: { name: string; data: [number, string | number][]
},
symbol
:
'
emptyCircle
'
,
symbolSize
:
4
,
// emphasis: {
// focus: 'self',
// },
smooth
:
0.25
,
areaStyle
:
{
opacity
:
0.02
,
},
};
});
};
...
...
@@ -181,6 +182,7 @@ export const getDetailChartConfig = (title: string, sliderPos: readonly [number,
legend
:
{
show
:
false
,
},
color
:
CHART_COLOR_LIST
,
dataZoom
:
[
{
type
:
'
inside
'
,
...
...
km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.less
浏览文件 @
47887a20
...
...
@@ -7,6 +7,9 @@
&-container {
height: calc(100% - 40px);
overflow: auto;
.no-group-con {
overflow: hidden;
}
.drag-sort-item:last-child {
margin-bottom: 10px;
}
...
...
km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.tsx
浏览文件 @
47887a20
...
...
@@ -38,7 +38,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
const
[
selectedMetricNames
,
setSelectedMetricNames
]
=
useState
<
(
string
|
number
)[]
>
([]);
// 默认选中的指标的列表
const
[
curHeaderOptions
,
setCurHeaderOptions
]
=
useState
<
ChartFilterOptions
>
();
const
[
metricChartData
,
setMetricChartData
]
=
useState
<
MetricChartDataType
[]
>
([]);
// 指标图表数据列表
const
[
gridNum
,
setGridNum
]
=
useState
<
number
>
(
8
);
// 图表列布局
const
[
gridNum
,
setGridNum
]
=
useState
<
number
>
(
12
);
// 图表列布局
const
chartDetailRef
=
useRef
(
null
);
const
chartDragOrder
=
useRef
([]);
const
curFetchingTimestamp
=
useRef
(
0
);
...
...
@@ -49,13 +49,13 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
const
list
=
res
.
map
((
item
:
any
)
=>
{
return
dashboardType
===
MetricType
.
Broker
?
{
label
:
item
.
host
,
value
:
item
.
brokerId
,
}
label
:
item
.
host
,
value
:
item
.
brokerId
,
}
:
{
label
:
item
.
topicName
,
value
:
item
.
topicName
,
};
label
:
item
.
topicName
,
value
:
item
.
topicName
,
};
});
setScopeList
(
list
);
};
...
...
@@ -145,7 +145,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
const
ksHeaderChange
=
(
ksOptions
:
KsHeaderOptions
)
=>
{
// 重新渲染图表
if
(
gridNum
!==
ksOptions
.
gridNum
)
{
setGridNum
(
ksOptions
.
gridNum
||
8
);
setGridNum
(
ksOptions
.
gridNum
||
12
);
busInstance
.
emit
(
'
chartResize
'
);
}
else
{
// 如果为相对时间,则当前时间减去 1 分钟,避免最近一分钟的数据还没采集到时前端多补一个点
...
...
km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/index.tsx
浏览文件 @
47887a20
...
...
@@ -85,10 +85,10 @@ const SingleChartHeader = ({
hideGridSelect
=
false
,
onChange
:
onChangeCallback
,
}:
PropsType
):
JSX
.
Element
=>
{
const
[
gridNum
,
setGridNum
]
=
useState
<
number
>
(
GRID_SIZE_OPTIONS
[
0
].
value
);
const
[
gridNum
,
setGridNum
]
=
useState
<
number
>
(
GRID_SIZE_OPTIONS
[
1
].
value
);
const
[
rangeTime
,
setRangeTime
]
=
useState
<
[
number
,
number
]
>
(()
=>
{
const
curTimeStamp
=
moment
().
valueOf
();
return
[
curTimeStamp
-
15
*
60
*
1000
,
curTimeStamp
];
return
[
curTimeStamp
-
60
*
60
*
1000
,
curTimeStamp
];
});
const
[
isRelativeRangeTime
,
setIsRelativeRangeTime
]
=
useState
(
true
);
const
[
isAutoReload
,
setIsAutoReload
]
=
useState
(
false
);
...
...
km-console/packages/layout-clusters-fe/src/components/SmallChart/index.tsx
浏览文件 @
47887a20
...
...
@@ -37,6 +37,7 @@ const LINE_CONFIG = {
lineStyle
:
{
color
:
'
#556EE6
'
,
width
:
1
,
smooth
:
0.25
,
},
areaStyle
:
{
color
:
{
...
...
km-console/packages/layout-clusters-fe/src/constants/axiosConfig.ts
浏览文件 @
47887a20
/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-nocheck
import
{
notification
,
Utils
}
from
'
knowdesign
'
;
const
{
EventBus
}
=
Utils
;
export
const
licenseEventBus
=
new
EventBus
();
...
...
@@ -14,7 +11,7 @@ export const goLogin = () => {
const
serviceInstance
=
Utils
.
service
;
// 清除 axios 实例默认的响应拦截
serviceInstance
.
interceptors
.
response
.
handlers
=
[];
(
serviceInstance
.
interceptors
.
response
as
any
)
.
handlers
=
[];
// 请求拦截
serviceInstance
.
interceptors
.
request
.
use
(
...
...
@@ -26,8 +23,8 @@ serviceInstance.interceptors.request.use(
}
else
{
config
.
headers
[
'
X-SSO-USER
'
]
=
user
;
// 请求携带token
config
.
headers
[
'
X-SSO-USER-ID
'
]
=
id
;
return
config
;
}
return
config
;
},
(
err
:
any
)
=>
{
return
err
;
...
...
@@ -54,8 +51,8 @@ serviceInstance.interceptors.response.use(
return
res
;
},
(
err
:
any
)
=>
{
const
config
=
err
.
config
;
if
(
!
config
||
!
config
.
retryTimes
)
return
dealResponse
(
err
,
config
.
customNotification
);
const
config
=
err
?
.
config
;
if
(
!
config
||
!
config
.
retryTimes
)
return
dealResponse
(
err
);
const
{
__retryCount
=
0
,
retryDelay
=
300
,
retryTimes
}
=
config
;
config
.
__retryCount
=
__retryCount
;
if
(
__retryCount
>=
retryTimes
)
{
...
...
km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts
浏览文件 @
47887a20
...
...
@@ -3,25 +3,24 @@ import moment from 'moment';
export
const
CHART_COLOR_LIST
=
[
'
#657DFC
'
,
'
#A7B1EB
'
,
'
#85C80D
'
,
'
#C9E795
'
,
'
#FFC300
'
,
'
#F9D77B
'
,
'
#8BA3C4
'
,
'
#C2D0E3
'
,
'
#FF7066
'
,
'
#F5B6B3
'
,
'
#2AC8E4
'
,
'
#9DDEEB
'
,
'
#3991FF
'
,
'
#94BEF2
'
,
'
#C2D0E3
'
,
'
#F5B6B3
'
,
'
#85C80D
'
,
'
#C9E795
'
,
'
#A76CEC
'
,
'
#CCABF1
'
,
'
#FF9C1B
'
,
'
#F5C993
'
,
'
#
3991FF
'
,
'
#
94BEF2
'
,
'
#
FFC300
'
,
'
#
F9D77B
'
,
'
#12CA7A
'
,
'
#8BA3C4
'
,
'
#FF7066
'
,
'
#A7E6C7
'
,
'
#FF5AB2
'
,
'
#F19FC9
'
,
'
#AEAEAE
'
,
'
#D1D1D1
'
,
...
...
@@ -132,11 +131,10 @@ export const getBasicChartConfig = (props: any = {}) => {
itemWidth
:
8
,
itemGap
:
8
,
textStyle
:
{
width
:
85
,
overflow
:
'
truncate
'
,
ellipsis
:
'
...
'
,
//
width: 85,
//
overflow: 'truncate',
//
ellipsis: '...',
fontSize
:
11
,
lineHeight
:
12
,
color
:
'
#74788D
'
,
},
pageIcons
:
{
...
...
@@ -148,6 +146,7 @@ export const getBasicChartConfig = (props: any = {}) => {
pageIconColor
:
'
#495057
'
,
pageIconInactiveColor
:
'
#ADB5BC
'
,
pageIconSize
:
6
,
tooltip
:
false
,
...
legend
,
},
// 横坐标配置
...
...
km-console/packages/layout-clusters-fe/src/pages/Consumers/ConsumerGroupDetail.tsx
浏览文件 @
47887a20
...
...
@@ -478,6 +478,7 @@ export default (props: any) => {
lineStyle
:
{
width
:
1.5
,
},
smooth
:
0.25
,
symbol
:
'
emptyCircle
'
,
symbolSize
:
4
,
emphasis
:
{
...
...
km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/CustomCheckGroup.tsx
浏览文件 @
47887a20
...
...
@@ -7,18 +7,18 @@ const CheckboxGroup = Checkbox.Group;
interface
IVersion
{
firstLine
:
string
[];
leftVersion
:
string
[];
leftVersion
s
:
string
[];
}
const
CustomCheckGroup
=
(
props
:
{
kafkaVersion
:
string
[];
onChangeCheckGroup
:
any
})
=>
{
const
{
kafkaVersion
,
onChangeCheckGroup
}
=
props
;
const
CustomCheckGroup
=
(
props
:
{
kafkaVersion
s
:
string
[];
onChangeCheckGroup
:
any
})
=>
{
const
{
kafkaVersion
s
,
onChangeCheckGroup
}
=
props
;
const
[
checkedKafkaVersion
,
setCheckedKafkaVersion
]
=
React
.
useState
<
IVersion
>
({
firstLine
:
[],
leftVersion
:
[],
leftVersion
s
:
[],
});
const
[
allVersion
,
setAllVersion
]
=
React
.
useState
<
IVersion
>
({
firstLine
:
[],
leftVersion
:
[],
leftVersion
s
:
[],
});
const
[
indeterminate
,
setIndeterminate
]
=
React
.
useState
(
false
);
...
...
@@ -30,27 +30,27 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
document
.
addEventListener
(
'
click
'
,
handleDocumentClick
);
return
()
=>
{
document
.
removeEventListener
(
'
click
'
,
handleDocumentClick
);
}
}
;
},
[]);
const
handleDocumentClick
=
(
e
:
Event
)
=>
{
setShowMore
(
false
);
}
}
;
const
setCheckAllStauts
=
(
list
:
string
[],
otherList
:
string
[])
=>
{
onChangeCheckGroup
([...
list
,
...
otherList
]);
setIndeterminate
(
!!
list
.
length
&&
list
.
length
+
otherList
.
length
<
kafkaVersion
.
length
);
setCheckAll
(
list
.
length
+
otherList
.
length
===
kafkaVersion
.
length
);
setIndeterminate
(
!!
list
.
length
&&
list
.
length
+
otherList
.
length
<
kafkaVersion
s
.
length
);
setCheckAll
(
list
.
length
+
otherList
.
length
===
kafkaVersion
s
.
length
);
};
const
getTwoPanelVersion
=
()
=>
{
const
width
=
(
document
.
getElementsByClassName
(
'
custom-check-group
'
)[
0
]
as
any
)?.
offsetWidth
;
const
checkgroupWidth
=
width
-
100
-
86
;
const
num
=
(
checkgroupWidth
/
108
)
|
0
;
const
firstLine
=
Array
.
from
(
kafkaVersion
).
splice
(
0
,
num
);
const
firstLine
=
Array
.
from
(
kafkaVersion
s
).
splice
(
0
,
num
);
setMoreGroupWidth
(
num
*
108
+
88
+
66
);
const
leftVersion
=
Array
.
from
(
kafkaVersion
).
splice
(
num
);
return
{
firstLine
,
leftVersion
};
const
leftVersion
s
=
Array
.
from
(
kafkaVersions
).
splice
(
num
);
return
{
firstLine
,
leftVersion
s
};
};
const
onFirstVersionChange
=
(
list
:
[])
=>
{
...
...
@@ -59,13 +59,13 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
firstLine
:
list
,
});
setCheckAllStauts
(
list
,
checkedKafkaVersion
.
leftVersion
);
setCheckAllStauts
(
list
,
checkedKafkaVersion
.
leftVersion
s
);
};
const
onLeftVersionChange
=
(
list
:
[])
=>
{
setCheckedKafkaVersion
({
...
checkedKafkaVersion
,
leftVersion
:
list
,
leftVersion
s
:
list
,
});
setCheckAllStauts
(
list
,
checkedKafkaVersion
.
firstLine
);
};
...
...
@@ -77,11 +77,11 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
e
.
target
.
checked
?
versions
:
{
firstLine
:
[],
leftVersion
:
[],
}
firstLine
:
[],
leftVersions
:
[],
}
);
onChangeCheckGroup
(
e
.
target
.
checked
?
[...
versions
.
firstLine
,
...
versions
.
leftVersion
]
:
[]);
onChangeCheckGroup
(
e
.
target
.
checked
?
[...
versions
.
firstLine
,
...
versions
.
leftVersion
s
]
:
[]);
setIndeterminate
(
false
);
setCheckAll
(
e
.
target
.
checked
);
...
...
@@ -112,16 +112,20 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
<
CheckboxGroup
style
=
{
{
width
:
moreGroupWidth
}
}
className
=
"more-check-group"
options
=
{
allVersion
.
leftVersion
}
value
=
{
checkedKafkaVersion
.
leftVersion
}
options
=
{
allVersion
.
leftVersion
s
}
value
=
{
checkedKafkaVersion
.
leftVersion
s
}
onChange
=
{
onLeftVersionChange
}
/>
)
:
null
}
<
div
className
=
"more-btn"
onClick
=
{
()
=>
setShowMore
(
!
showMore
)
}
>
<
a
>
{
!
showMore
?
'
展开更多
'
:
'
收起更多
'
}
<
DoubleRightOutlined
style
=
{
{
transform
:
`rotate(
${
showMore
?
'
270
'
:
'
90
'
}
deg)`
}
}
/>
</
a
>
</
div
>
{
allVersion
.
leftVersions
.
length
?
(
<
div
className
=
"more-btn"
onClick
=
{
()
=>
setShowMore
(
!
showMore
)
}
>
<
a
>
{
!
showMore
?
'
展开更多
'
:
'
收起更多
'
}
<
DoubleRightOutlined
style
=
{
{
transform
:
`rotate(
${
showMore
?
'
270
'
:
'
90
'
}
deg)`
}
}
/>
</
a
>
</
div
>
)
:
(
<></>
)
}
</
div
>
</>
);
...
...
km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/HomePage.tsx
浏览文件 @
47887a20
...
...
@@ -17,11 +17,12 @@ const MultiClusterPage = () => {
const
[
run
,
setRun
]
=
useState
<
boolean
>
(
false
);
const
[
global
]
=
AppContainer
.
useGlobalValue
();
const
[
statusList
,
setStatusList
]
=
React
.
useState
([
1
,
0
]);
const
[
kafkaVersion
,
setKafkaVersion
]
=
React
.
useState
({});
const
[
kafkaVersions
,
setKafkaVersions
]
=
React
.
useState
<
string
[]
>
([]);
const
[
existKafkaVersion
,
setExistKafkaVersion
]
=
React
.
useState
<
string
[]
>
([]);
const
[
visible
,
setVisible
]
=
React
.
useState
(
false
);
const
[
list
,
setList
]
=
useState
<
[]
>
([]);
const
[
healthScoreRange
,
setHealthScoreRange
]
=
React
.
useState
([
0
,
100
]);
const
[
checkedKafkaVersion
,
setCheckedKafkaVersion
]
=
React
.
useState
({}
);
const
[
checkedKafkaVersion
s
,
setCheckedKafkaVersions
]
=
React
.
useState
<
string
[]
>
([]
);
const
[
sortInfo
,
setSortInfo
]
=
React
.
useState
({
sortField
:
'
HealthScore
'
,
sortType
:
'
asc
'
,
...
...
@@ -59,7 +60,7 @@ const MultiClusterPage = () => {
preciseFilterDTOList
:
[
{
fieldName
:
'
kafkaVersion
'
,
fieldValueList
:
checkedKafkaVersion
,
fieldValueList
:
checkedKafkaVersion
s
as
(
string
|
number
)[]
,
},
],
rangeFilterDTOList
:
[
...
...
@@ -83,12 +84,18 @@ const MultiClusterPage = () => {
};
const
getSupportKafkaVersion
=
()
=>
{
Utils
.
request
(
API
.
supportKafkaVersion
).
then
((
res
)
=>
{
setKafkaVersions
(
Object
.
keys
(
res
||
{}));
});
};
const
getExistKafkaVersion
=
()
=>
{
setVersionLoading
(
true
);
Utils
.
request
(
API
.
supportKafka
Version
)
.
then
((
res
)
=>
{
set
KafkaVersion
(
res
||
{}
);
Utils
.
request
(
API
.
getClusters
Version
)
.
then
((
versions
:
string
[]
)
=>
{
set
ExistKafkaVersion
(
versions
||
[]
);
setVersionLoading
(
false
);
setCheckedKafkaVersion
(
res
?
Object
.
keys
(
res
)
:
[]);
setCheckedKafkaVersion
s
(
versions
||
[]);
})
.
catch
((
err
)
=>
{
setVersionLoading
(
false
);
...
...
@@ -108,6 +115,7 @@ const MultiClusterPage = () => {
useEffect
(()
=>
{
getPhyClusterState
();
getSupportKafkaVersion
();
getExistKafkaVersion
();
},
[]);
useEffect
(()
=>
{
...
...
@@ -128,7 +136,7 @@ const MultiClusterPage = () => {
.
finally
(()
=>
{
setClusterLoading
(
false
);
});
},
[
sortInfo
,
checkedKafkaVersion
,
healthScoreRange
,
statusList
,
searchKeywords
,
isReload
]);
},
[
sortInfo
,
checkedKafkaVersion
s
,
healthScoreRange
,
statusList
,
searchKeywords
,
isReload
]);
const
onSilderChange
=
(
value
:
number
[])
=>
{
setHealthScoreRange
(
value
);
...
...
@@ -151,7 +159,7 @@ const MultiClusterPage = () => {
};
const
onChangeCheckGroup
=
(
list
:
[])
=>
{
setCheckedKafkaVersion
(
list
);
setCheckedKafkaVersion
s
(
list
);
};
const
afterSubmitSuccessAccessClusters
=
()
=>
{
...
...
@@ -247,10 +255,10 @@ const MultiClusterPage = () => {
<
div
className
=
"header-filter-bottom"
>
<
div
className
=
"header-filter-bottom-item header-filter-bottom-item-checkbox"
>
<
h3
className
=
"header-filter-bottom-item-title"
>
版本
选择
</
h3
>
<
h3
className
=
"header-filter-bottom-item-title"
>
版本
分布
</
h3
>
<
div
className
=
"header-filter-bottom-item-content flex"
>
{
Object
.
keys
(
kafkaVersion
)
.
length
?
(
<
CustomCheckGroup
kafkaVersion
=
{
Object
.
keys
(
kafkaVersion
)
}
onChangeCheckGroup
=
{
onChangeCheckGroup
}
/>
{
existKafkaVersion
.
length
?
(
<
CustomCheckGroup
kafkaVersion
s
=
{
existKafkaVersion
}
onChangeCheckGroup
=
{
onChangeCheckGroup
}
/>
)
:
null
}
</
div
>
</
div
>
...
...
@@ -307,7 +315,7 @@ const MultiClusterPage = () => {
<
AccessClusters
visible
=
{
visible
}
setVisible
=
{
setVisible
}
kafkaVersion
=
{
Object
.
keys
(
kafkaVersion
)
}
kafkaVersion
=
{
kafkaVersions
}
afterSubmitSuccess
=
{
afterSubmitSuccessAccessClusters
}
/>
</>
...
...
km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/index.less
浏览文件 @
47887a20
...
...
@@ -295,6 +295,7 @@
.more-btn {
height: 30px;
line-height: 23px;
}
}
}
...
...
@@ -652,7 +653,7 @@
display: -webkit-inline-box;
margin-right: 16px;
&.adjust-height-style{
&.adjust-height-style
{
.dcloud-form-item-label {
padding: 0;
label {
...
...
km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/config.tsx
浏览文件 @
47887a20
...
...
@@ -84,6 +84,7 @@ export const getChartConfig = (props: any) => {
lineStyle: {
width: 1,
},
smooth: 0.25,
symbol: 'emptyCircle',
symbolSize: 4,
// 面积图样式
...
...
km-console/packages/layout-clusters-fe/src/pages/TopicList/ExpandPartition.tsx
浏览文件 @
47887a20
import
React
,
{
useEffect
,
useState
}
from
'
react
'
;
import
{
useParams
}
from
'
react-router-dom
'
;
import
{
AppContainer
,
Button
,
Divider
,
Drawer
,
Form
,
InputNumber
,
notification
,
SingleChart
,
Space
,
Spin
,
Utils
,
}
from
'
knowdesign
'
;
import
{
AppContainer
,
Button
,
Divider
,
Drawer
,
Form
,
InputNumber
,
notification
,
SingleChart
,
Space
,
Spin
,
Utils
}
from
'
knowdesign
'
;
import
Api
,
{
MetricType
}
from
'
@src/api/index
'
;
import
{
getBasicChartConfig
,
getUnit
}
from
'
@src/constants/chartConfig
'
;
import
{
formatChartData
,
MetricDefaultChartDataType
}
from
'
@src/components/DashboardDragChart/config
'
;
...
...
@@ -193,6 +181,7 @@ const ExpandPartition = (props: { record: any; onConfirm: () => void }) => {
lineStyle
:
{
width
:
1
,
},
smooth
:
0.25
,
symbol
:
'
emptyCircle
'
,
symbolSize
:
4
,
emphasis
:
{
...
...
km-console/packages/layout-clusters-fe/src/pages/TopicList/config.tsx
浏览文件 @
47887a20
...
...
@@ -13,6 +13,7 @@ export const getChartConfig = (title: string) => {
lineStyle
:
{
width
:
1
,
},
smooth
:
0.25
,
symbol
:
'
emptyCircle
'
,
symbolSize
:
4
,
emphasis
:
{
...
...
km-console/packages/layout-clusters-fe/src/style-addition.less
浏览文件 @
47887a20
@import '~knowdesign/es/style/index.less';
@height-base: 36px;
@height-lg: 42px;
@height-sm: 27px;
// 全局变量替换
@body-background: #ebebf3;
@input-color: #495057;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录