Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
kafka-manager
提交
62f7d3f7
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 搜索 >>
提交
62f7d3f7
编写于
10月 21, 2022
作者:
G
GraceWalk
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: 图表逻辑 & 展示优化
上级
26e60d8a
变更
20
隐藏空白更改
内联
并排
Showing
20 changed file
with
329 addition
and
261 deletion
+329
-261
km-console/packages/layout-clusters-fe/src/api/index.ts
km-console/packages/layout-clusters-fe/src/api/index.ts
+4
-0
km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/MetricSelect.tsx
...usters-fe/src/components/ChartOperateBar/MetricSelect.tsx
+48
-41
km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/NodeScope.tsx
...-clusters-fe/src/components/ChartOperateBar/NodeScope.tsx
+47
-44
km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/image/empty.png
...lusters-fe/src/components/ChartOperateBar/image/empty.png
+0
-0
km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/index.tsx
...yout-clusters-fe/src/components/ChartOperateBar/index.tsx
+50
-53
km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/style/index.less
...usters-fe/src/components/ChartOperateBar/style/index.less
+0
-0
km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/style/indicator-drawer.less
...rc/components/ChartOperateBar/style/indicator-drawer.less
+4
-9
km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/style/node-scope.less
...s-fe/src/components/ChartOperateBar/style/node-scope.less
+8
-1
km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/style/query-module.less
...fe/src/components/ChartOperateBar/style/query-module.less
+0
-0
km-console/packages/layout-clusters-fe/src/components/DraggableCharts/Detail.tsx
...out-clusters-fe/src/components/DraggableCharts/Detail.tsx
+9
-20
km-console/packages/layout-clusters-fe/src/components/DraggableCharts/config.tsx
...out-clusters-fe/src/components/DraggableCharts/config.tsx
+15
-8
km-console/packages/layout-clusters-fe/src/components/DraggableCharts/index.less
...out-clusters-fe/src/components/DraggableCharts/index.less
+1
-1
km-console/packages/layout-clusters-fe/src/components/DraggableCharts/index.tsx
...yout-clusters-fe/src/components/DraggableCharts/index.tsx
+41
-33
km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts
.../packages/layout-clusters-fe/src/constants/chartConfig.ts
+74
-25
km-console/packages/layout-clusters-fe/src/pages/BrokerDashboard/index.tsx
...es/layout-clusters-fe/src/pages/BrokerDashboard/index.tsx
+2
-2
km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/List.tsx
...es/layout-clusters-fe/src/pages/MutliClusterPage/List.tsx
+5
-4
km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/config.tsx
...s-fe/src/pages/SingleClusterDetail/DetailChart/config.tsx
+3
-3
km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/index.tsx
...rs-fe/src/pages/SingleClusterDetail/DetailChart/index.tsx
+12
-12
km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/HealthySetting.tsx
...sters-fe/src/pages/SingleClusterDetail/HealthySetting.tsx
+4
-3
km-console/packages/layout-clusters-fe/src/pages/TopicDashboard/index.tsx
...ges/layout-clusters-fe/src/pages/TopicDashboard/index.tsx
+2
-2
未找到文件。
km-console/packages/layout-clusters-fe/src/api/index.ts
浏览文件 @
62f7d3f7
...
...
@@ -14,6 +14,7 @@ export enum MetricType {
Broker
=
103
,
Partition
=
104
,
Replication
=
105
,
Zookeeper
=
110
,
Controls
=
901
,
}
...
...
@@ -61,6 +62,8 @@ const api = {
phyClusterState
:
getApi
(
`/physical-clusters/state`
),
getOperatingStateList
:
(
clusterPhyId
:
number
)
=>
getApi
(
`/clusters/
${
clusterPhyId
}
/groups-overview`
),
getGroupTopicList
:
(
clusterPhyId
:
number
,
groupName
:
string
)
=>
getApi
(
`/clusters/
${
clusterPhyId
}
/groups/
${
groupName
}
/topics-overview`
),
// 物理集群接口
phyCluster
:
getApi
(
`/physical-clusters`
),
getPhyClusterBasic
:
(
clusterPhyId
:
number
)
=>
getApi
(
`/physical-clusters/
${
clusterPhyId
}
/basic`
),
...
...
@@ -127,6 +130,7 @@ const api = {
getApi
(
`/clusters/
${
clusterPhyId
}
/topics/
${
topicName
}
/brokers-partitions-summary`
),
getTopicPartitionsDetail
:
(
clusterPhyId
:
string
,
topicName
:
string
)
=>
getApi
(
`/clusters/
${
clusterPhyId
}
/topics/
${
topicName
}
/partitions`
),
getTopicMessagesList
:
(
topicName
:
string
,
clusterPhyId
:
number
)
=>
getApi
(
`/clusters/
${
clusterPhyId
}
/topics/
${
topicName
}
/records`
),
// Messages列表
getTopicGroupList
:
(
topicName
:
string
,
clusterPhyId
:
number
)
=>
getApi
(
`/clusters/
${
clusterPhyId
}
/topics/
${
topicName
}
/groups-overview`
),
// Consumers列表
getTopicMessagesMetadata
:
(
topicName
:
string
,
clusterPhyId
:
number
)
=>
getApi
(
`/clusters//
${
clusterPhyId
}
/topics/
${
topicName
}
/metadata`
),
// Messages列表
getTopicACLsList
:
(
topicName
:
string
,
clusterPhyId
:
number
)
=>
getApi
(
`/clusters/
${
clusterPhyId
}
/topics/
${
topicName
}
/acl-Bindings`
),
// ACLs列表
getTopicConfigs
:
(
topicName
:
string
,
clusterPhyId
:
number
)
=>
getApi
(
`/clusters/
${
clusterPhyId
}
/config-topics/
${
topicName
}
/configs`
),
// Configuration列表
...
...
km-console/packages/layout-clusters-fe/src/components/
SingleChartHeader/IndicatorDrawer
.tsx
→
km-console/packages/layout-clusters-fe/src/components/
ChartOperateBar/MetricSelect
.tsx
浏览文件 @
62f7d3f7
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
Drawer
,
Button
,
Space
,
Divider
,
AppContainer
,
ProTable
}
from
'
knowdesign
'
;
import
React
,
{
useState
,
useEffect
,
forwardRef
,
useImperativeHandle
}
from
'
react
'
;
import
{
Drawer
,
Button
,
Space
,
Divider
,
AppContainer
,
ProTable
,
Utils
}
from
'
knowdesign
'
;
import
{
IconFont
}
from
'
@knowdesign/icons
'
;
import
{
IindicatorSelectModule
}
from
'
./index
'
;
import
{
MetricSelect
}
from
'
./index
'
;
import
'
./style/indicator-drawer.less
'
;
import
{
useLocation
}
from
'
react-router-dom
'
;
interface
PropsType
extends
React
.
HTMLAttributes
<
HTMLDivElement
>
{
onClose
:
()
=>
void
;
visible
:
boolean
;
isGroup
?:
boolean
;
// 是否分组
indicatorSelectModule
:
IindicatorSelectModule
;
metricSelect
:
MetricSelect
;
}
interface
MetricInfo
{
...
...
@@ -27,25 +24,25 @@ type CategoryData = {
metrics
:
MetricInfo
[];
};
const
ExpandedRow
=
({
metrics
,
category
,
selectedMetrics
,
selectedMetricChange
}:
any
)
=>
{
const
innerColumns
=
[
{
title
:
'
指标名称
'
,
dataIndex
:
'
name
'
,
key
:
'
name
'
,
},
{
title
:
'
单位
'
,
dataIndex
:
'
unit
'
,
key
:
'
unit
'
,
},
{
title
:
'
描述
'
,
dataIndex
:
'
desc
'
,
key
:
'
desc
'
,
},
];
const
expandedRowColumns
=
[
{
title
:
'
指标名称
'
,
dataIndex
:
'
name
'
,
key
:
'
name
'
,
},
{
title
:
'
单位
'
,
dataIndex
:
'
unit
'
,
key
:
'
unit
'
,
},
{
title
:
'
描述
'
,
dataIndex
:
'
desc
'
,
key
:
'
desc
'
,
},
];
const
ExpandedRow
=
({
metrics
,
category
,
selectedMetrics
,
selectedMetricChange
}:
any
)
=>
{
return
(
<
div
style
=
{
{
...
...
@@ -62,7 +59,7 @@ const ExpandedRow = ({ metrics, category, selectedMetrics, selectedMetricChange
showHeader
:
false
,
noPagination
:
true
,
rowKey
:
'
name
'
,
columns
:
inner
Columns
,
columns
:
expandedRow
Columns
,
dataSource
:
metrics
,
attrs
:
{
rowSelection
:
{
...
...
@@ -79,13 +76,14 @@ const ExpandedRow = ({ metrics, category, selectedMetrics, selectedMetricChange
);
};
const
IndicatorDrawer
=
({
onClose
,
visible
,
indicatorSelectModule
}:
PropsType
)
=>
{
const
MetricSelect
=
forwardRef
(({
metricSelect
}:
PropsType
,
ref
)
=>
{
const
[
global
]
=
AppContainer
.
useGlobalValue
();
const
{
pathname
}
=
useLocation
();
const
[
confirmLoading
,
setConfirmLoading
]
=
useState
<
boolean
>
(
false
);
const
[
categoryData
,
setCategoryData
]
=
useState
<
CategoryData
[]
>
([]);
const
[
selectedCategories
,
setSelectedCategories
]
=
useState
<
string
[]
>
([]);
const
[
childrenSelectedRowKeys
,
setChildrenSelectedRowKeys
]
=
useState
<
SelectedMetrics
>
({});
const
[
visible
,
setVisible
]
=
useState
<
boolean
>
(
false
);
const
columns
=
[
{
...
...
@@ -96,13 +94,13 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
];
const
formateTableData
=
()
=>
{
const
tableData
=
indicatorSelectModule
.
tableData
;
const
tableData
=
metricSelect
.
tableData
;
const
categoryData
:
{
[
category
:
string
]:
MetricInfo
[];
}
=
{};
tableData
.
forEach
(({
name
,
desc
})
=>
{
const
metricDefine
=
global
.
getMetricDefine
(
indicatorSelectModule
?.
metricType
,
name
);
const
metricDefine
=
global
.
getMetricDefine
(
metricSelect
?.
metricType
,
name
);
const
returnData
=
{
name
,
desc
,
...
...
@@ -125,12 +123,12 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
};
const
formateSelectedKeys
=
()
=>
{
const
newKeys
=
indicatorSelectModule
.
selectedRows
;
const
newKeys
=
metricSelect
.
selectedRows
;
const
result
:
SelectedMetrics
=
{};
const
selectedCategories
:
string
[]
=
[];
newKeys
.
forEach
((
name
:
string
)
=>
{
const
metricDefine
=
global
.
getMetricDefine
(
indicatorSelectModule
?.
metricType
,
name
);
const
metricDefine
=
global
.
getMetricDefine
(
metricSelect
?.
metricType
,
name
);
if
(
metricDefine
)
{
if
(
!
result
[
metricDefine
.
category
])
{
result
[
metricDefine
.
category
]
=
[
name
];
...
...
@@ -217,10 +215,10 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
const
allRowKeys
:
string
[]
=
[];
Object
.
entries
(
childrenSelectedRowKeys
).
forEach
(([,
arr
])
=>
allRowKeys
.
push
(...
arr
));
indicatorSelectModule
.
submitCallback
(
allRowKeys
).
then
(
metricSelect
.
submitCallback
(
allRowKeys
).
then
(
()
=>
{
setConfirmLoading
(
false
);
onClose
(
);
setVisible
(
false
);
},
()
=>
{
setConfirmLoading
(
false
);
...
...
@@ -231,7 +229,7 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
const
rowSelection
=
{
selectedRowKeys
:
selectedCategories
,
onChange
:
rowChange
,
// getCheckboxProps: (record: any) =>
indicatorSelectModule.checkboxProps && indicatorSelectModule
.checkboxProps(record),
// getCheckboxProps: (record: any) =>
metricSelect.checkboxProps && metricSelect
.checkboxProps(record),
getCheckboxProps
:
(
record
:
CategoryData
)
=>
{
const
isAllSelected
=
record
.
metrics
.
length
===
childrenSelectedRowKeys
[
record
.
category
]?.
length
;
const
isNotCheck
=
!
childrenSelectedRowKeys
[
record
.
category
]
||
childrenSelectedRowKeys
[
record
.
category
]?.
length
===
0
;
...
...
@@ -241,25 +239,33 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
},
};
useEffect
(
formateTableData
,
[
indicatorSelectModule
.
tableData
]);
useEffect
(
formateTableData
,
[
metricSelect
.
tableData
]);
useEffect
(()
=>
{
visible
&&
formateSelectedKeys
();
},
[
visible
,
indicatorSelectModule
.
selectedRows
]);
},
[
visible
,
metricSelect
.
selectedRows
]);
useImperativeHandle
(
ref
,
()
=>
({
open
:
()
=>
setVisible
(
true
),
}),
[]
);
return
(
<>
<
Drawer
className
=
"indicator-drawer"
title
=
{
indicatorSelectModule
.
drawerTitle
||
'
指标筛选
'
}
title
=
{
metricSelect
.
drawerTitle
||
'
指标筛选
'
}
width
=
"868px"
forceRender
=
{
true
}
onClose
=
{
onClose
}
onClose
=
{
()
=>
setVisible
(
false
)
}
visible
=
{
visible
}
maskClosable
=
{
false
}
extra
=
{
<
Space
>
<
Button
size
=
"small"
onClick
=
{
onClose
}
>
<
Button
size
=
"small"
onClick
=
{
()
=>
setVisible
(
false
)
}
>
取消
</
Button
>
<
Button
...
...
@@ -281,6 +287,7 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
rowKey
:
'
category
'
,
columns
:
columns
,
dataSource
:
categoryData
,
noPagination
:
true
,
attrs
:
{
rowSelection
:
rowSelection
,
expandable
:
{
...
...
@@ -319,6 +326,6 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
</
Drawer
>
</>
);
};
}
)
;
export
default
IndicatorDrawer
;
export
default
MetricSelect
;
km-console/packages/layout-clusters-fe/src/components/
SingleChartHeade
r/NodeScope.tsx
→
km-console/packages/layout-clusters-fe/src/components/
ChartOperateBa
r/NodeScope.tsx
浏览文件 @
62f7d3f7
...
...
@@ -26,6 +26,7 @@ const OptionsDefault = [
const
NodeScope
=
({
nodeScopeModule
,
change
}:
propsType
)
=>
{
const
{
hasCustomScope
,
customScopeList
:
customList
,
scopeName
=
''
,
scopeLabel
=
'
自定义范围
'
,
...
...
@@ -128,51 +129,53 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => {
</
Space
>
</
Radio
.
Group
>
</
div
>
<
div
className
=
"flx_r"
>
<
h6
className
=
"time_title"
>
{
scopeLabel
}
</
h6
>
<
div
className
=
"custom-scope"
>
<
div
className
=
"check-row"
>
<
Checkbox
className
=
"check-all"
indeterminate
=
{
indeterminate
}
onChange
=
{
onCheckAllChange
}
checked
=
{
checkAll
}
>
全选
</
Checkbox
>
<
Input
className
=
"search-input"
suffix
=
{
<
IconFont
type
=
"icon-fangdajing"
style
=
{
{
fontSize
:
'
16px
'
}
}
/>
}
size
=
"small"
placeholder
=
{
searchPlaceholder
}
onChange
=
{
(
e
)
=>
setScopeSearchValue
(
e
.
target
.
value
)
}
/>
</
div
>
<
div
className
=
"fixed-height"
>
<
Checkbox
.
Group
style
=
{
{
width
:
'
100%
'
}
}
onChange
=
{
checkChange
}
value
=
{
checkedListTemp
}
>
<
Row
gutter
=
{
[
10
,
12
]
}
>
{
customList
.
filter
((
item
)
=>
item
.
label
.
includes
(
scopeSearchValue
))
.
map
((
item
)
=>
(
<
Col
span
=
{
12
}
key
=
{
item
.
value
}
>
<
Checkbox
value
=
{
item
.
value
}
>
{
item
.
label
}
</
Checkbox
>
</
Col
>
))
}
</
Row
>
</
Checkbox
.
Group
>
</
div
>
<
div
className
=
"btn-con"
>
<
Button
type
=
"primary"
size
=
"small"
className
=
"btn-sure"
onClick
=
{
customSure
}
disabled
=
{
checkedListTemp
?.
length
>
0
?
false
:
true
}
>
确定
</
Button
>
<
Button
size
=
"small"
onClick
=
{
customCancel
}
>
取消
</
Button
>
{
hasCustomScope
&&
(
<
div
className
=
"flx_r"
>
<
h6
className
=
"time_title"
>
{
scopeLabel
}
</
h6
>
<
div
className
=
"custom-scope"
>
<
div
className
=
"check-row"
>
<
Checkbox
className
=
"check-all"
indeterminate
=
{
indeterminate
}
onChange
=
{
onCheckAllChange
}
checked
=
{
checkAll
}
>
全选
</
Checkbox
>
<
Input
className
=
"search-input"
suffix
=
{
<
IconFont
type
=
"icon-fangdajing"
style
=
{
{
fontSize
:
'
16px
'
}
}
/>
}
size
=
"small"
placeholder
=
{
searchPlaceholder
}
onChange
=
{
(
e
)
=>
setScopeSearchValue
(
e
.
target
.
value
)
}
/>
</
div
>
<
div
className
=
"fixed-height"
>
<
Checkbox
.
Group
style
=
{
{
width
:
'
100%
'
}
}
onChange
=
{
checkChange
}
value
=
{
checkedListTemp
}
>
<
Row
gutter
=
{
[
10
,
12
]
}
>
{
customList
.
filter
((
item
)
=>
item
.
label
.
includes
(
scopeSearchValue
))
.
map
((
item
)
=>
(
<
Col
span
=
{
12
}
key
=
{
item
.
value
}
>
<
Checkbox
value
=
{
item
.
value
}
>
{
item
.
label
}
</
Checkbox
>
</
Col
>
))
}
</
Row
>
</
Checkbox
.
Group
>
</
div
>
<
div
className
=
"btn-con"
>
<
Button
type
=
"primary"
size
=
"small"
className
=
"btn-sure"
onClick
=
{
customSure
}
disabled
=
{
checkedListTemp
?.
length
>
0
?
false
:
true
}
>
确定
</
Button
>
<
Button
size
=
"small"
onClick
=
{
customCancel
}
>
取消
</
Button
>
</
div
>
</
div
>
</
div
>
</
div
>
)
}
</
div
>
</
div
>
);
...
...
@@ -185,7 +188,7 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => {
visible
=
{
popVisible
}
content
=
{
clickContent
}
placement
=
"bottomRight"
overlayClassName
=
"d-node-scope-popover"
overlayClassName
=
{
`d-node-scope-popover
${
hasCustomScope
?
'
large-size
'
:
''
}
`
}
onVisibleChange
=
{
visibleChange
}
>
<
span
className
=
"input-span"
>
...
...
km-console/packages/layout-clusters-fe/src/components/
SingleChartHeade
r/image/empty.png
→
km-console/packages/layout-clusters-fe/src/components/
ChartOperateBa
r/image/empty.png
浏览文件 @
62f7d3f7
文件已移动
km-console/packages/layout-clusters-fe/src/components/
SingleChartHeade
r/index.tsx
→
km-console/packages/layout-clusters-fe/src/components/
ChartOperateBa
r/index.tsx
浏览文件 @
62f7d3f7
import
React
,
{
useEffect
,
useState
}
from
'
react
'
;
import
{
Tooltip
,
Select
,
Utils
,
Divider
,
Button
}
from
'
knowdesign
'
;
import
React
,
{
useEffect
,
use
Ref
,
use
State
}
from
'
react
'
;
import
{
Select
,
Divider
,
Button
}
from
'
knowdesign
'
;
import
{
IconFont
}
from
'
@knowdesign/icons
'
;
import
moment
from
'
moment
'
;
import
{
DRangeTime
}
from
'
knowdesign
'
;
import
IndicatorDrawer
from
'
./IndicatorDrawer
'
;
import
MetricSelect
from
'
./MetricSelect
'
;
import
NodeScope
from
'
./NodeScope
'
;
import
'
./style/index.less
'
;
...
...
@@ -24,8 +24,8 @@ export interface KsHeaderOptions {
data
:
number
|
number
[];
};
}
export
interface
IindicatorSelectModule
{
metricType
?
:
MetricType
;
export
interface
MetricSelect
{
metricType
:
MetricType
;
hide
?:
boolean
;
drawerTitle
?:
string
;
selectedRows
:
(
string
|
number
)[];
...
...
@@ -47,20 +47,27 @@ export interface IcustomScope {
}
export
interface
InodeScopeModule
{
hasCustomScope
:
boolean
;
customScopeList
:
IcustomScope
[];
scopeName
?:
string
;
scopeLabel
?:
string
;
searchPlaceholder
?:
string
;
change
?:
()
=>
void
;
}
interface
PropsType
{
indicatorSelectModule
?:
IindicatorSelectModule
;
metricSelect
?:
MetricSelect
;
hideNodeScope
?:
boolean
;
hideGridSelect
?:
boolean
;
nodeScopeModule
?:
InodeScopeModule
;
onChange
:
(
options
:
KsHeaderOptions
)
=>
void
;
}
interface
ScopeData
{
isTop
:
boolean
;
data
:
any
;
}
// 列布局选项
const
GRID_SIZE_OPTIONS
=
[
{
...
...
@@ -77,15 +84,17 @@ const GRID_SIZE_OPTIONS = [
},
];
const
SingleChartHeade
r
=
({
indicatorSelectModule
,
const
MetricOperateBa
r
=
({
metricSelect
,
nodeScopeModule
=
{
hasCustomScope
:
false
,
customScopeList
:
[],
},
hideNodeScope
=
false
,
hideGridSelect
=
false
,
onChange
:
onChangeCallback
,
}:
PropsType
):
JSX
.
Element
=>
{
const
metricSelectRef
=
useRef
(
null
);
const
[
gridNum
,
setGridNum
]
=
useState
<
number
>
(
GRID_SIZE_OPTIONS
[
1
].
value
);
const
[
rangeTime
,
setRangeTime
]
=
useState
<
[
number
,
number
]
>
(()
=>
{
const
curTimeStamp
=
moment
().
valueOf
();
...
...
@@ -93,16 +102,35 @@ const SingleChartHeader = ({
});
const
[
isRelativeRangeTime
,
setIsRelativeRangeTime
]
=
useState
(
true
);
const
[
isAutoReload
,
setIsAutoReload
]
=
useState
(
false
);
const
[
indicatorDrawerVisible
,
setIndicatorDrawerVisible
]
=
useState
(
false
);
const
[
scopeData
,
setScopeData
]
=
useState
<
{
isTop
:
boolean
;
data
:
any
;
}
>
({
const
[
scopeData
,
setScopeData
]
=
useState
<
ScopeData
>
({
isTop
:
true
,
data
:
5
,
});
const
sizeChange
=
(
value
:
number
)
=>
setGridNum
(
value
);
const
timeChange
=
(
curRangeTime
:
[
number
,
number
],
isRelative
:
boolean
)
=>
{
setRangeTime
([...
curRangeTime
]);
setIsRelativeRangeTime
(
isRelative
);
};
const
reloadRangeTime
=
()
=>
{
if
(
isRelativeRangeTime
)
{
const
timeLen
=
rangeTime
[
1
]
-
rangeTime
[
0
]
||
0
;
const
curTimeStamp
=
moment
().
valueOf
();
setRangeTime
([
curTimeStamp
-
timeLen
,
curTimeStamp
]);
}
else
{
setRangeTime
([...
rangeTime
]);
}
};
const
nodeScopeChange
=
(
data
:
any
,
isTop
?:
any
)
=>
{
setScopeData
({
isTop
,
data
,
});
};
useEffect
(()
=>
{
onChangeCallback
({
rangeTime
,
...
...
@@ -129,68 +157,37 @@ const SingleChartHeader = ({
};
},
[
isRelativeRangeTime
,
rangeTime
]);
const
sizeChange
=
(
value
:
number
)
=>
{
setGridNum
(
value
);
};
const
timeChange
=
(
curRangeTime
:
[
number
,
number
],
isRelative
:
boolean
)
=>
{
setRangeTime
([...
curRangeTime
]);
setIsRelativeRangeTime
(
isRelative
);
};
const
reloadRangeTime
=
()
=>
{
if
(
isRelativeRangeTime
)
{
const
timeLen
=
rangeTime
[
1
]
-
rangeTime
[
0
]
||
0
;
const
curTimeStamp
=
moment
().
valueOf
();
setRangeTime
([
curTimeStamp
-
timeLen
,
curTimeStamp
]);
}
else
{
setRangeTime
([...
rangeTime
]);
}
};
const
openIndicatorDrawer
=
()
=>
{
setIndicatorDrawerVisible
(
true
);
};
const
closeIndicatorDrawer
=
()
=>
{
setIndicatorDrawerVisible
(
false
);
};
const
nodeScopeChange
=
(
data
:
any
,
isTop
?:
any
)
=>
{
setScopeData
({
isTop
,
data
,
});
};
return
(
<>
<
div
className
=
"ks-chart-container"
>
<
div
className
=
"ks-chart-container-header"
>
<
div
className
=
"header-left"
>
{
/* 刷新 */
}
<
div
className
=
"icon-box"
onClick
=
{
reloadRangeTime
}
>
<
IconFont
className
=
"icon"
type
=
"icon-shuaxin1"
/>
</
div
>
<
Divider
type
=
"vertical"
style
=
{
{
height
:
20
,
top
:
0
}
}
/>
{
/* 时间选择 */
}
<
DRangeTime
timeChange
=
{
timeChange
}
rangeTimeArr
=
{
rangeTime
}
/>
</
div
>
<
div
className
=
"header-right"
>
{
/* 节点范围 */
}
{
!
hideNodeScope
&&
<
NodeScope
nodeScopeModule
=
{
nodeScopeModule
}
change
=
{
nodeScopeChange
}
/>
}
{
/* 分栏 */
}
{
!
hideGridSelect
&&
(
<
Select
className
=
"grid-select"
style
=
{
{
width
:
70
}
}
value
=
{
gridNum
}
options
=
{
GRID_SIZE_OPTIONS
}
onChange
=
{
sizeChange
}
/>
)
}
{
(
!
hideNodeScope
||
!
hideGridSelect
)
&&
<
Divider
type
=
"vertical"
style
=
{
{
height
:
20
,
top
:
0
}
}
/>
}
<
Button
type
=
"primary"
onClick
=
{
openIndicatorDrawer
}
>
<
Button
type
=
"primary"
onClick
=
{
()
=>
metricSelectRef
.
current
.
open
()
}
>
指标筛选
</
Button
>
</
div
>
</
div
>
</
div
>
{
!
indicatorSelectModule
?.
hide
&&
(
<
IndicatorDrawer
visible
=
{
indicatorDrawerVisible
}
onClose
=
{
closeIndicatorDrawer
}
indicatorSelectModule
=
{
indicatorSelectModule
}
/>
)
}
{
/* 指标筛选 */
}
{
!
metricSelect
?.
hide
&&
<
MetricSelect
ref
=
{
metricSelectRef
}
metricSelect
=
{
metricSelect
}
/>
}
</>
);
};
export
default
SingleChartHeade
r
;
export
default
MetricOperateBa
r
;
km-console/packages/layout-clusters-fe/src/components/
SingleChartHeade
r/style/index.less
→
km-console/packages/layout-clusters-fe/src/components/
ChartOperateBa
r/style/index.less
浏览文件 @
62f7d3f7
文件已移动
km-console/packages/layout-clusters-fe/src/components/
SingleChartHeade
r/style/indicator-drawer.less
→
km-console/packages/layout-clusters-fe/src/components/
ChartOperateBa
r/style/indicator-drawer.less
浏览文件 @
62f7d3f7
@root-entry-name: 'default';
@import '~knowdesign/es/basic/style/themes/index';
@import '~knowdesign/es/basic/style/mixins/index';
.indicator-drawer{
.dcloud-drawer-body{
padding-top: 2px !important;
}
.indicator-drawer {
.dcloud-drawer-body {
padding-top: 2px !important;
}
}
// .dd-indicator-drawer {
// @drawerItemH: 27px;
// @primary-color: #556ee6;
...
...
km-console/packages/layout-clusters-fe/src/components/
SingleChartHeade
r/style/node-scope.less
→
km-console/packages/layout-clusters-fe/src/components/
ChartOperateBa
r/style/node-scope.less
浏览文件 @
62f7d3f7
...
...
@@ -63,9 +63,16 @@
}
.@{ant-prefix}-popover-inner-content {
padding: 16px 24px;
width:
479
px;
width:
200
px;
box-sizing: border-box;
}
&.large-size {
.@{ant-prefix}-popover-inner-content {
padding: 16px 24px;
width: 479px;
box-sizing: border-box;
}
}
&.@{ant-prefix}-popover-placement-bottomRight {
// padding-top: 0;
}
...
...
km-console/packages/layout-clusters-fe/src/components/
SingleChartHeade
r/style/query-module.less
→
km-console/packages/layout-clusters-fe/src/components/
ChartOperateBa
r/style/query-module.less
浏览文件 @
62f7d3f7
文件已移动
km-console/packages/layout-clusters-fe/src/components/D
ashboardDragChart/Chart
Detail.tsx
→
km-console/packages/layout-clusters-fe/src/components/D
raggableCharts/
Detail.tsx
浏览文件 @
62f7d3f7
...
...
@@ -2,11 +2,10 @@ import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, use
import
{
AppContainer
,
Drawer
,
Spin
,
Table
,
SingleChart
,
Utils
,
Tooltip
}
from
'
knowdesign
'
;
import
moment
from
'
moment
'
;
import
api
,
{
MetricType
}
from
'
@src/api
'
;
import
{
MetricDefaultChartDataType
,
MetricChartDataType
,
formatChartData
}
from
'
@src/constants/chartConfig
'
;
import
{
OriginMetricData
,
FormattedMetricData
,
formatChartData
}
from
'
@src/constants/chartConfig
'
;
import
{
useParams
}
from
'
react-router-dom
'
;
import
{
debounce
}
from
'
lodash
'
;
import
{
getDetailChartConfig
}
from
'
./config
'
;
import
{
UNIT_MAP
}
from
'
@src/constants/chartConfig
'
;
import
RenderEmpty
from
'
../RenderEmpty
'
;
interface
ChartDetailProps
{
...
...
@@ -35,7 +34,7 @@ interface ChartInfo {
curTimeRange
?:
readonly
[
number
,
number
];
sliderPos
?:
readonly
[
number
,
number
];
transformUnit
?:
[
string
,
number
];
fullMetricData
?:
MetricChartDataType
;
fullMetricData
?:
FormattedMetricData
;
oldDataZoomOption
?:
any
;
}
...
...
@@ -79,7 +78,7 @@ const ChartDetail = (props: ChartDetailProps) => {
isLoadingAdditionData
:
false
,
isLoadedFullData
:
false
,
fullTimeRange
:
curTimeRange
,
fullMetricData
:
{}
as
MetricChartDataType
,
fullMetricData
:
{}
as
FormattedMetricData
,
curTimeRange
,
oldDataZoomOption
:
{},
sliderPos
:
[
0
,
0
],
...
...
@@ -90,7 +89,7 @@ const ChartDetail = (props: ChartDetailProps) => {
const
[
loading
,
setLoading
]
=
useState
(
false
);
// 当前展示的图表数据
const
[
curMetricData
,
setCurMetricData
]
=
useState
<
MetricChartDataType
>
();
const
[
curMetricData
,
setCurMetricData
]
=
useState
<
FormattedMetricData
>
();
// 图表数据的各项计算指标
const
[
tableInfo
,
setTableInfo
]
=
useState
<
MetricTableInfo
[]
>
([]);
const
[
linesStatus
,
setLinesStatus
]
=
useState
<
{
...
...
@@ -329,7 +328,7 @@ const ChartDetail = (props: ChartDetailProps) => {
if
(
i
===
DEFAULT_REQUEST_COUNT
-
1
)
{
Promise
.
all
(
requestArr
).
then
((
resList
)
=>
{
// 填充增量的图表数据
resList
.
forEach
((
res
:
MetricDefaultChartDataType
[],
i
)
=>
{
resList
.
forEach
((
res
:
OriginMetricData
[],
i
)
=>
{
// 最后一个请求返回数据为空时,认为已获取到全部图表数据
if
(
!
res
?.
length
)
{
// 标记数据已经全部加载完毕
...
...
@@ -368,7 +367,7 @@ const ChartDetail = (props: ChartDetailProps) => {
};
// 处理增量图表数据
const
resolveAdditionChartData
=
(
res
:
MetricDefaultChartDataType
[],
timeRange
:
[
number
,
number
])
=>
{
const
resolveAdditionChartData
=
(
res
:
OriginMetricData
[],
timeRange
:
[
number
,
number
])
=>
{
// 格式化图表需要的数据
const
formattedMetricData
=
formatChartData
(
res
,
...
...
@@ -376,7 +375,7 @@ const ChartDetail = (props: ChartDetailProps) => {
metricType
,
timeRange
,
chartInfo
.
current
.
transformUnit
)
as
MetricChartDataType
[];
)
as
FormattedMetricData
[];
// 增量填充图表数据
const
additionMetricPoints
=
formattedMetricData
[
0
].
metricLines
;
Object
.
values
(
additionMetricPoints
).
forEach
((
additionLine
)
=>
{
...
...
@@ -536,9 +535,7 @@ const ChartDetail = (props: ChartDetailProps) => {
// 如果图表返回数据
if
(
res
?.
length
)
{
// 格式化图表需要的数据
const
formattedMetricData
=
(
formatChartData
(
res
,
global
.
getMetricDefine
||
{},
metricType
,
curTimeRange
)
as
MetricChartDataType
[]
)[
0
];
const
formattedMetricData
=
formatChartData
(
res
,
global
.
getMetricDefine
||
{},
metricType
,
curTimeRange
)[
0
];
// 填充图表数据
let
initFullTimeRange
=
curTimeRange
;
const
pointsOfFirstLine
=
formattedMetricData
.
metricLines
.
find
((
line
)
=>
line
.
data
.
length
).
data
;
...
...
@@ -549,14 +546,6 @@ const ChartDetail = (props: ChartDetailProps) => {
]
as
const
;
}
// 获取单位保存起来
let
transformUnit
=
undefined
;
Object
.
entries
(
UNIT_MAP
).
forEach
((
unit
)
=>
{
if
(
formattedMetricData
.
metricUnit
.
includes
(
unit
[
0
]))
{
transformUnit
=
unit
;
}
});
updateChartInfo
({
fullMetricData
:
formattedMetricData
,
fullTimeRange
:
[...
initFullTimeRange
],
...
...
@@ -565,7 +554,7 @@ const ChartDetail = (props: ChartDetailProps) => {
initFullTimeRange
[
1
]
-
(
initFullTimeRange
[
1
]
-
initFullTimeRange
[
0
])
*
DATA_ZOOM_DEFAULT_SCALE
,
initFullTimeRange
[
1
],
],
transformUnit
,
transformUnit
:
formattedMetricData
.
targetUnit
,
});
setCurMetricData
(
formattedMetricData
);
const
newLinesStatus
:
{
[
lineName
:
string
]:
boolean
}
=
{};
...
...
km-console/packages/layout-clusters-fe/src/components/D
ashboardDragChart
/config.tsx
→
km-console/packages/layout-clusters-fe/src/components/D
raggableCharts
/config.tsx
浏览文件 @
62f7d3f7
import
api
,
{
MetricType
}
from
'
@src/api
'
;
import
{
getBasicChartConfig
,
CHART_COLOR_LIST
}
from
'
@src/constants/chartConfig
'
;
const
METRIC_DASHBOARD_REQ_MAP
=
{
[
MetricType
.
Broker
]:
(
clusterId
:
string
)
=>
api
.
getDashboardMetricChartData
(
clusterId
,
MetricType
.
Broker
),
[
MetricType
.
Topic
]:
(
clusterId
:
string
)
=>
api
.
getDashboardMetricChartData
(
clusterId
,
MetricType
.
Topic
),
[
MetricType
.
Zookeeper
]:
(
clusterId
:
string
)
=>
''
,
};
export
const
getMetricDashboardReq
=
(
clusterId
:
string
,
type
:
MetricType
.
Broker
|
MetricType
.
Topic
|
MetricType
.
Zookeeper
)
=>
METRIC_DASHBOARD_REQ_MAP
[
type
](
clusterId
);
const
seriesCallback
=
(
lines
:
{
name
:
string
;
data
:
[
number
,
string
|
number
][]
}[])
=>
{
const
len
=
CHART_COLOR_LIST
.
length
;
// series 配置
return
lines
.
map
((
line
,
i
)
=>
{
return
{
...
line
,
z
:
len
-
i
,
lineStyle
:
{
width
:
1.5
,
},
...
...
@@ -13,6 +24,7 @@ const seriesCallback = (lines: { name: string; data: [number, string | number][]
symbol
:
'
emptyCircle
'
,
symbolSize
:
4
,
smooth
:
0.25
,
color
:
CHART_COLOR_LIST
[
i
%
len
],
areaStyle
:
{
color
:
{
type
:
'
linear
'
,
...
...
@@ -38,17 +50,13 @@ const seriesCallback = (lines: { name: string; data: [number, string | number][]
};
// 返回图表配置
export
const
getChartConfig
=
(
title
:
string
,
metricLength
:
number
)
=>
{
export
const
getChartConfig
=
(
title
:
string
,
metricLength
:
number
,
showLegend
=
true
)
=>
{
return
{
option
:
getBasicChartConfig
({
title
:
{
show
:
false
},
grid
:
{
top
:
24
},
grid
:
{
top
:
24
,
bottom
:
showLegend
?
40
:
20
},
tooltip
:
{
enterable
:
metricLength
>
9
,
legendContextMaxHeight
:
192
},
color
:
CHART_COLOR_LIST
,
// xAxis: {
// type: 'time',
// boundaryGap: ['5%', '5%'],
// },
legend
:
{
show
:
showLegend
},
}),
seriesCallback
,
};
...
...
@@ -67,7 +75,6 @@ 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/D
ashboardDragChart
/index.less
→
km-console/packages/layout-clusters-fe/src/components/D
raggableCharts
/index.less
浏览文件 @
62f7d3f7
.topic-dashboard {
height: calc(100% - 16
0
px);
height: calc(100% - 16
2
px);
padding-bottom: 10px;
.ks-chart-container-header {
margin-top: 12px;
...
...
km-console/packages/layout-clusters-fe/src/components/D
ashboardDragChart
/index.tsx
→
km-console/packages/layout-clusters-fe/src/components/D
raggableCharts
/index.tsx
浏览文件 @
62f7d3f7
...
...
@@ -4,17 +4,11 @@ import { Utils, Empty, Spin, AppContainer, SingleChart, Tooltip } from 'knowdesi
import
{
IconFont
}
from
'
@knowdesign/icons
'
;
import
{
useParams
}
from
'
react-router-dom
'
;
import
api
,
{
MetricType
}
from
'
@src/api
'
;
import
{
MetricInfo
,
MetricDefaultChartDataType
,
MetricChartDataType
,
formatChartData
,
resolveMetricsRank
,
}
from
'
@src/constants/chartConfig
'
;
import
SingleChartHeader
,
{
KsHeaderOptions
}
from
'
../SingleChartHeader
'
;
import
{
MetricInfo
,
OriginMetricData
,
FormattedMetricData
,
formatChartData
,
resolveMetricsRank
}
from
'
@src/constants/chartConfig
'
;
import
ChartOperateBar
,
{
KsHeaderOptions
}
from
'
../ChartOperateBar
'
;
import
DragGroup
from
'
../DragGroup
'
;
import
ChartDetail
from
'
./
Chart
Detail
'
;
import
{
getChartConfig
}
from
'
./config
'
;
import
ChartDetail
from
'
./Detail
'
;
import
{
getChartConfig
,
getMetricDashboardReq
}
from
'
./config
'
;
import
'
./index.less
'
;
interface
IcustomScope
{
...
...
@@ -33,7 +27,7 @@ const busInstance = new EventBus();
const
DRAG_GROUP_GUTTER_NUM
:
[
number
,
number
]
=
[
16
,
16
];
const
D
ashboardDragChart
=
(
props
:
PropsType
):
JSX
.
Element
=>
{
const
D
raggableCharts
=
(
props
:
PropsType
):
JSX
.
Element
=>
{
const
[
global
]
=
AppContainer
.
useGlobalValue
();
const
{
type
:
dashboardType
}
=
props
;
const
{
clusterId
}
=
useParams
<
{
...
...
@@ -44,7 +38,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
const
[
metricsList
,
setMetricsList
]
=
useState
<
MetricInfo
[]
>
([]);
// 指标列表
const
[
selectedMetricNames
,
setSelectedMetricNames
]
=
useState
<
(
string
|
number
)[]
>
([]);
// 默认选中的指标的列表
const
[
curHeaderOptions
,
setCurHeaderOptions
]
=
useState
<
ChartFilterOptions
>
();
const
[
metricChartData
,
setMetricChartData
]
=
useState
<
MetricChartDataType
[]
>
([]);
// 指标图表数据列表
const
[
metricChartData
,
setMetricChartData
]
=
useState
<
FormattedMetricData
[]
>
([]);
// 指标图表数据列表
const
[
gridNum
,
setGridNum
]
=
useState
<
number
>
(
12
);
// 图表列布局
const
metricRankList
=
useRef
<
string
[]
>
([]);
const
chartDetailRef
=
useRef
(
null
);
...
...
@@ -85,6 +79,9 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
updateRank
([...
supportMetrics
]);
setMetricsList
(
supportMetrics
);
setSelectedMetricNames
(
selectedMetrics
);
if
(
!
selectedMetrics
.
length
)
{
setLoading
(
false
);
}
});
};
...
...
@@ -106,16 +103,24 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
const
curTimestamp
=
Date
.
now
();
curFetchingTimestamp
.
current
=
curTimestamp
;
Utils
.
post
(
api
.
getDashboardMetricChartData
(
clusterId
,
dashboardType
),
{
startTime
,
endTime
,
metricsNames
:
selectedMetricNames
,
topNu
:
curHeaderOptions
?.
scopeData
?.
isTop
?
curHeaderOptions
.
scopeData
.
data
:
null
,
[
dashboardType
===
MetricType
.
Broker
?
'
brokerIds
'
:
'
topics
'
]:
curHeaderOptions
?.
scopeData
?.
isTop
?
null
:
curHeaderOptions
.
scopeData
.
data
,
}).
then
(
(
res
:
MetricDefaultChartDataType
[]
|
null
)
=>
{
const
reqBody
=
Object
.
assign
(
{
startTime
,
endTime
,
metricsNames
:
selectedMetricNames
,
topNu
:
curHeaderOptions
?.
scopeData
?.
isTop
?
curHeaderOptions
.
scopeData
.
data
:
null
,
},
dashboardType
===
MetricType
.
Broker
||
dashboardType
===
MetricType
.
Topic
?
{
[
dashboardType
===
MetricType
.
Broker
?
'
brokerIds
'
:
'
topics
'
]:
curHeaderOptions
?.
scopeData
?.
isTop
?
null
:
curHeaderOptions
.
scopeData
.
data
,
}
:
{}
);
Utils
.
post
(
getMetricDashboardReq
(
clusterId
,
dashboardType
as
any
),
reqBody
).
then
(
(
res
:
OriginMetricData
[]
|
null
)
=>
{
// 如果当前请求不是最新请求,则不做任何操作
if
(
curFetchingTimestamp
.
current
!==
curTimestamp
)
{
return
;
...
...
@@ -131,7 +136,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
global
.
getMetricDefine
||
{},
dashboardType
,
curHeaderOptions
.
rangeTime
)
as
MetricChartDataType
[];
)
as
FormattedMetricData
[];
// 指标排序
formattedMetricData
.
sort
((
a
,
b
)
=>
metricRankList
.
current
.
indexOf
(
a
.
metricName
)
-
metricRankList
.
current
.
indexOf
(
b
.
metricName
));
...
...
@@ -164,7 +169,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
};
// 指标选中项更新回调
const
indicatorChange
Callback
=
(
newMetricNames
:
(
string
|
number
)[])
=>
{
const
metricSelect
Callback
=
(
newMetricNames
:
(
string
|
number
)[])
=>
{
const
updateMetrics
:
{
metric
:
string
;
set
:
boolean
;
rank
:
number
}[]
=
[];
// 需要选中的指标
newMetricNames
.
forEach
(
...
...
@@ -218,7 +223,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
useEffect
(()
=>
{
// 初始化页面,获取 scope 和 metric 信息
getScopeList
();
(
dashboardType
===
MetricType
.
Broker
||
dashboardType
===
MetricType
.
Topic
)
&&
getScopeList
();
getMetricList
();
setTimeout
(()
=>
observeDashboardWidthChange
());
...
...
@@ -226,19 +231,22 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
return
(
<
div
id
=
"dashboard-drag-chart"
className
=
"topic-dashboard"
>
<
SingleChartHeade
r
<
ChartOperateBa
r
onChange
=
{
ksHeaderChange
}
nodeScopeModule
=
{
{
hasCustomScope
:
!
(
dashboardType
===
MetricType
.
Zookeeper
),
customScopeList
:
scopeList
,
scopeName
:
dashboardType
===
MetricType
.
Broker
?
'
Broker
'
:
'
Topic
'
,
scopeLabel
:
`自定义
${
dashboardType
===
MetricType
.
Broker
?
'
Broker
'
:
'
Topic
'
}
范围`
,
scopeName
:
dashboardType
===
MetricType
.
Broker
?
'
Broker
'
:
dashboardType
===
MetricType
.
Topic
?
'
Topic
'
:
'
Zookeeper
'
,
scopeLabel
:
`自定义
${
dashboardType
===
MetricType
.
Broker
?
'
Broker
'
:
dashboardType
===
MetricType
.
Topic
?
'
Topic
'
:
'
Zookeeper
'
}
范围`
,
}
}
indicatorSelectModule
=
{
{
metricSelect
=
{
{
hide
:
false
,
metricType
:
dashboardType
,
tableData
:
metricsList
,
selectedRows
:
selectedMetricNames
,
submitCallback
:
indicatorChange
Callback
,
submitCallback
:
metricSelect
Callback
,
}
}
/>
<
div
className
=
"topic-dashboard-container"
>
...
...
@@ -258,7 +266,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
}
}
>
{
metricChartData
.
map
((
data
)
=>
{
const
{
metricName
,
metricUnit
,
metricLines
}
=
data
;
const
{
metricName
,
metricUnit
,
metricLines
,
showLegend
}
=
data
;
return
(
<
div
key
=
{
metricName
}
className
=
"dashboard-drag-item-box"
>
...
...
@@ -301,7 +309,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
eventBus
=
{
busInstance
}
propChartData
=
{
metricLines
}
optionMergeProps
=
{
{
replaceMerge
:
curHeaderOptions
.
isAutoReload
?
[
'
xAxis
'
]
:
[
'
series
'
]
}
}
{
...
getChartConfig
(
`
${
metricName
}
{unit|(
${
metricUnit
}
)}`
,
metricLines
.
length
)
}
{
...
getChartConfig
(
`
${
metricName
}
{unit|(
${
metricUnit
}
)}`
,
metricLines
.
length
,
showLegend
)
}
/>
</
div
>
);
...
...
@@ -321,4 +329,4 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
);
};
export
default
D
ashboardDragChart
;
export
default
D
raggableCharts
;
km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts
浏览文件 @
62f7d3f7
...
...
@@ -12,30 +12,38 @@ export interface MetricInfo {
}
// 接口返回图表原始数据类型
export
interface
MetricDefaultChartDataType
{
export
interface
OriginMetricData
{
metricName
:
string
;
metricLines
:
{
metricLines
?
:
{
name
:
string
;
createTime
:
number
;
updateTime
:
number
;
metricPoints
:
{
aggType
:
string
;
timeStamp
:
number
;
value
:
number
;
value
:
string
;
createTime
:
number
;
updateTime
:
number
;
}[];
}[];
metricPoints
?:
{
aggType
:
string
;
name
:
string
;
timeStamp
:
number
;
value
:
string
;
}[];
}
// 格式化后图表数据类型
export
interface
MetricChartDataType
{
export
interface
FormattedMetricData
{
metricName
:
string
;
metricUnit
:
string
;
metricLines
:
{
name
:
string
;
data
:
(
string
|
number
)[][];
}[];
showLegend
:
boolean
;
targetUnit
:
[
string
,
number
]
|
undefined
;
}
// 图表颜色库
...
...
@@ -55,22 +63,38 @@ export const CHART_COLOR_LIST = [
'
#C9E795
'
,
];
// 图表存储单位
换算
export
const
UNIT
_MAP
=
{
// 图表存储单位
export
const
MEMORY
_MAP
=
{
TB
:
Math
.
pow
(
1024
,
4
),
GB
:
Math
.
pow
(
1024
,
3
),
MB
:
Math
.
pow
(
1024
,
2
),
KB
:
1024
,
};
export
const
getUnit
=
(
value
:
number
)
=>
Object
.
entries
(
UNIT_MAP
).
find
(([,
size
])
=>
value
/
size
>=
1
)
||
[
'
Byte
'
,
1
];
// 图表数字单位换算
export
const
DATA_NUMBER_MAP
=
{
// 图表时间单位
export
const
TIME_MAP
=
{
h
:
1000
*
60
*
60
,
min
:
1000
*
60
,
s
:
1000
,
};
// 图表数字单位
export
const
NUM_MAP
=
{
十亿
:
Math
.
pow
(
1000
,
3
),
百万
:
Math
.
pow
(
1000
,
2
),
千
:
1000
,
};
export
const
getDataNumberUnit
=
(
value
:
number
)
=>
Object
.
entries
(
DATA_NUMBER_MAP
).
find
(([,
size
])
=>
value
/
size
>=
1
)
||
[
''
,
1
];
const
calculateUnit
=
(
map
:
{
[
unit
:
string
]:
number
},
targetValue
:
number
)
=>
{
return
Object
.
entries
(
map
).
find
(([,
size
])
=>
targetValue
/
size
>=
1
);
};
const
getMemoryUnit
=
(
value
:
number
)
=>
calculateUnit
(
MEMORY_MAP
,
value
)
||
[
'
Byte
'
,
1
];
const
getTimeUnit
=
(
value
:
number
)
=>
calculateUnit
(
TIME_MAP
,
value
)
||
[
'
ms
'
,
1
];
const
getNumUnit
=
(
value
:
number
)
=>
calculateUnit
(
NUM_MAP
,
value
)
||
[
''
,
1
];
export
const
getDataUnit
=
{
Memory
:
getMemoryUnit
,
Time
:
getTimeUnit
,
Num
:
getNumUnit
,
};
export
type
DataUnitType
=
keyof
typeof
getDataUnit
;
// 图表补点间隔计算
export
const
SUPPLEMENTARY_INTERVAL_MAP
=
{
...
...
@@ -112,9 +136,9 @@ export const resolveMetricsRank = (metricList: MetricInfo[]) => {
};
};
// 补点
//
图表
补点
export
const
supplementaryPoints
=
(
lines
:
MetricChartDataType
[
'
metricLines
'
],
lines
:
FormattedMetricData
[
'
metricLines
'
],
timeRange
:
readonly
[
number
,
number
],
extraCallback
?:
(
point
:
[
number
,
0
])
=>
any
[]
):
void
=>
{
...
...
@@ -165,19 +189,39 @@ export const supplementaryPoints = (
// 格式化图表数据
export
const
formatChartData
=
(
// 图表源数据
metric
Data
:
MetricDefaultChartDataType
[],
metric
sData
:
OriginMetricData
[],
// 获取指标单位
getMetricDefine
:
(
type
:
MetricType
,
metric
:
string
)
=>
MetricsDefine
[
keyof
MetricsDefine
],
// 指标类型
metricType
:
MetricType
,
// 图表时间范围,用于补点
timeRange
:
readonly
[
number
,
number
],
transformUnit
:
[
string
,
number
]
=
undefined
):
MetricChartDataType
[]
=>
{
return
metricData
.
map
(({
metricName
,
metricLines
})
=>
{
targetUnit
:
[
string
,
number
]
=
undefined
):
FormattedMetricData
[]
=>
{
return
metricsData
.
map
((
originData
)
=>
{
const
{
metricName
}
=
originData
;
const
curMetricInfo
=
(
getMetricDefine
&&
getMetricDefine
(
metricType
,
metricName
))
||
null
;
const
isByteUnit
=
curMetricInfo
?.
unit
?.
toLowerCase
().
includes
(
'
byte
'
);
let
showLegend
=
true
;
let
metricLines
=
[];
let
maxValue
=
-
1
;
let
unitType
:
DataUnitType
;
if
(
originData
?.
metricLines
&&
originData
?.
metricLines
!==
null
)
{
metricLines
=
originData
.
metricLines
;
}
else
{
showLegend
=
false
;
metricLines
=
[
{
name
:
metricName
,
metricPoints
:
originData
.
metricPoints
,
},
];
}
{
const
originUnit
=
curMetricInfo
?.
unit
?.
toLowerCase
();
unitType
=
originUnit
.
includes
(
'
byte
'
)
?
'
Memory
'
:
originUnit
.
includes
(
'
ms
'
)
?
'
Time
'
:
'
Num
'
;
}
const
PointsMapMethod
=
({
timeStamp
,
value
}:
{
timeStamp
:
number
;
value
:
string
|
number
})
=>
{
let
parsedValue
:
string
|
number
=
Number
(
value
);
...
...
@@ -194,7 +238,7 @@ export const formatChartData = (
};
// 初始化返回结构
const
chartData
=
{
const
chartData
:
FormattedMetricData
=
{
metricName
,
metricUnit
:
curMetricInfo
?.
unit
||
''
,
metricLines
:
metricLines
...
...
@@ -203,17 +247,21 @@ export const formatChartData = (
name
,
data
:
metricPoints
.
map
(
PointsMapMethod
),
})),
showLegend
,
targetUnit
:
undefined
,
};
// 按时间先后进行对图表点排序
chartData
.
metricLines
.
forEach
(({
data
})
=>
data
.
sort
((
a
,
b
)
=>
(
a
[
0
]
as
number
)
-
(
b
[
0
]
as
number
)));
// 图表值单位转换
if
(
maxValue
>
0
)
{
const
[
unitName
,
unitSize
]:
[
string
,
number
]
=
transformUnit
||
isByteUnit
?
getUnit
(
maxValue
)
:
getDataNumberUnit
(
maxValue
);
chartData
.
metricUnit
=
isByteUnit
?
chartData
.
metricUnit
.
toLowerCase
().
replace
(
'
byte
'
,
unitName
)
:
`
${
unitName
}${
chartData
.
metricUnit
}
`
;
chartData
.
metricLines
.
forEach
(({
data
})
=>
data
.
forEach
((
point
:
any
)
=>
(
point
[
1
]
/=
unitSize
)));
const
[
unitName
,
unitSize
]:
[
string
,
number
]
=
targetUnit
||
getDataUnit
[
unitType
](
maxValue
);
chartData
.
targetUnit
=
[
unitName
,
unitSize
];
chartData
.
metricUnit
=
unitType
!==
'
Num
'
?
chartData
.
metricUnit
.
toLowerCase
().
replace
(
unitType
===
'
Memory
'
?
'
byte
'
:
'
ms
'
,
unitName
)
:
`
${
unitName
}${
chartData
.
metricUnit
}
`
;
chartData
.
metricLines
.
forEach
(({
data
})
=>
data
.
forEach
((
point
:
any
)
=>
parseFloat
((
point
[
1
]
/=
unitSize
).
toFixed
(
3
))));
}
// 补点
...
...
@@ -231,7 +279,7 @@ const tooltipFormatter = (date: any, arr: any, tooltip: any) => {
<div style="display:flex;align-items:center;">
<div style="margin-right:4px;width:8px;height:2px;background-color:
${
item
.
color
}
;"></div>
<div style="flex:1;display:flex;justify-content:space-between;align-items:center;overflow: hidden;">
<span style="font-size:12px;color:#74788D;pointer-events:auto;margin-left:2px;line-height: 18px;font-family: HelveticaNeue;overflow: hidden; text-overflow: ellipsis; white-space: no
-
wrap;">
<span style="font-size:12px;color:#74788D;pointer-events:auto;margin-left:2px;line-height: 18px;font-family: HelveticaNeue;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
${
item
.
seriesName
}
</span>
<span style="font-size:12px;color:#212529;line-height:18px;font-family:HelveticaNeue-Medium; padding-left: 6px;">
...
...
@@ -324,6 +372,7 @@ export const getBasicChartConfig = (props: any = {}) => {
tooltip
:
false
,
...
legend
,
},
color
:
CHART_COLOR_LIST
,
// 横坐标配置
xAxis
:
{
type
:
'
category
'
,
...
...
km-console/packages/layout-clusters-fe/src/pages/BrokerDashboard/index.tsx
浏览文件 @
62f7d3f7
import
React
from
'
react
'
;
import
{
MetricType
}
from
'
@src/api
'
;
import
BrokerHealthCheck
from
'
@src/components/CardBar/BrokerHealthCheck
'
;
import
D
ashboardDragChart
from
'
@src/components/DashboardDragChart
'
;
import
D
raggableCharts
from
'
@src/components/DraggableCharts
'
;
import
DBreadcrumb
from
'
knowdesign/es/extend/d-breadcrumb
'
;
import
{
AppContainer
}
from
'
knowdesign
'
;
...
...
@@ -19,7 +19,7 @@ const BrokerDashboard = (): JSX.Element => {
/>
</
div
>
<
BrokerHealthCheck
/>
<
D
ashboardDragChart
type
=
{
MetricType
.
Broker
}
/>
<
D
raggableCharts
type
=
{
MetricType
.
Broker
}
/>
</>
);
};
...
...
km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/List.tsx
浏览文件 @
62f7d3f7
import
{
AppContainer
,
Divider
,
Form
,
Input
,
List
,
message
,
Modal
,
Progress
,
Spin
,
Tooltip
,
Utils
}
from
'
knowdesign
'
;
import
{
AppContainer
,
Divider
,
Form
,
Input
,
List
,
Modal
,
Progress
,
Spin
,
Tooltip
,
Utils
}
from
'
knowdesign
'
;
import
message
from
'
@src/components/Message
'
;
import
{
IconFont
}
from
'
@knowdesign/icons
'
;
import
moment
from
'
moment
'
;
import
API
from
'
@src/api
'
;
...
...
@@ -11,7 +12,7 @@ import { useIntl } from 'react-intl';
import
api
,
{
MetricType
}
from
'
@src/api
'
;
import
{
getHealthClassName
,
getHealthProcessColor
,
getHealthText
}
from
'
../SingleClusterDetail/config
'
;
import
{
ClustersPermissionMap
}
from
'
../CommonConfig
'
;
import
{
get
Unit
,
getDataNumber
Unit
}
from
'
@src/constants/chartConfig
'
;
import
{
get
Data
Unit
}
from
'
@src/constants/chartConfig
'
;
import
SmallChart
from
'
@src/components/SmallChart
'
;
import
{
SearchParams
}
from
'
./HomePage
'
;
...
...
@@ -235,14 +236,14 @@ const ClusterList = (props: { searchParams: SearchParams; showAccessCluster: any
// 如果单位是 字节 ,进行单位换算
if
(
line
.
unit
.
toLowerCase
().
includes
(
'
byte
'
))
{
const
[
unit
,
size
]
=
get
Unit
(
line
.
value
);
const
[
unit
,
size
]
=
get
DataUnit
[
'
Memory
'
]
(
line
.
value
);
line
.
value
=
Number
((
line
.
value
/
size
).
toFixed
(
2
));
line
.
unit
=
line
.
unit
.
toLowerCase
().
replace
(
'
byte
'
,
unit
);
}
// Messages 指标值特殊处理
if
(
line
.
metricName
===
'
LeaderMessages
'
)
{
const
[
unit
,
size
]
=
getData
NumberUnit
(
line
.
value
);
const
[
unit
,
size
]
=
getData
Unit
[
'
Num
'
]
(
line
.
value
);
line
.
value
=
Number
((
line
.
value
/
size
).
toFixed
(
2
));
line
.
unit
=
unit
+
line
.
unit
;
}
...
...
km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/config.tsx
浏览文件 @
62f7d3f7
...
...
@@ -14,7 +14,7 @@ const messagesInTooltipFormatter = (date: any, arr: any) => {
<div style="display:flex;align-items:center;">
<div style="margin-right:4px;width:8px;height:2px;background-color:
${
params
.
color
}
;"></div>
<div style="flex:1;display:flex;justify-content:space-between;align-items:center;overflow: hidden;">
<span style="flex: 1;font-size:12px;color:#74788D;pointer-events:auto;margin-left:2px;line-height: 18px;font-family: HelveticaNeue;overflow: hidden; text-overflow: ellipsis; white-space: no
-
wrap;">
<span style="flex: 1;font-size:12px;color:#74788D;pointer-events:auto;margin-left:2px;line-height: 18px;font-family: HelveticaNeue;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
${
params
.
seriesName
}
</span>
<span style="font-size:12px;color:#212529;line-height:18px;font-family:HelveticaNeue-Medium;margin-left: 10px;">
...
...
@@ -55,7 +55,7 @@ const messagesInTooltipFormatter = (date: any, arr: any) => {
};
export const getChartConfig = (props: any) => {
const {
metricName,
lineColor, isDefaultMetric = false } = props;
const { lineColor, isDefaultMetric = false } = props;
return {
option: getBasicChartConfig({
// TODO: time 轴图表联动有问题,先切换为 category
...
...
@@ -63,7 +63,6 @@ export const getChartConfig = (props: any) => {
title: { show: false },
legend: { show: false },
grid: { top: 24, bottom: 12 },
lineColor: [lineColor],
tooltip: isDefaultMetric
? {
formatter: function (params: any) {
...
...
@@ -87,6 +86,7 @@ export const getChartConfig = (props: any) => {
smooth: 0.25,
symbol: 'emptyCircle',
symbolSize: 4,
color: '#556ee6',
// 面积图样式
areaStyle: {
color: lineColor,
...
...
km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/index.tsx
浏览文件 @
62f7d3f7
...
...
@@ -5,16 +5,16 @@ import { arrayMoveImmutable } from 'array-move';
import
api
from
'
@src/api
'
;
import
{
useParams
}
from
'
react-router-dom
'
;
import
{
MetricDefaultChartDataType
,
MetricChartDataType
,
OriginMetricData
,
FormattedMetricData
,
formatChartData
,
supplementaryPoints
,
resolveMetricsRank
,
MetricInfo
,
}
from
'
@src/constants/chartConfig
'
;
import
{
MetricType
}
from
'
@src/api
'
;
import
{
getData
NumberUnit
,
get
Unit
}
from
'
@src/constants/chartConfig
'
;
import
SingleChartHeader
,
{
KsHeaderOptions
}
from
'
@src/components/SingleChartHeade
r
'
;
import
{
getDataUnit
}
from
'
@src/constants/chartConfig
'
;
import
ChartOperateBar
,
{
KsHeaderOptions
}
from
'
@src/components/ChartOperateBa
r
'
;
import
RenderEmpty
from
'
@src/components/RenderEmpty
'
;
import
DragGroup
from
'
@src/components/DragGroup
'
;
import
{
getChartConfig
}
from
'
./config
'
;
...
...
@@ -162,13 +162,13 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
metricsNames
:
selectedMetricNames
.
filter
((
name
)
=>
name
!==
DEFAULT_METRIC
),
},
}).
then
(
(
res
:
MetricDefaultChartDataType
[])
=>
{
(
res
:
OriginMetricData
[])
=>
{
// 如果当前请求不是最新请求,则不做任何操作
if
(
curFetchingTimestamp
.
current
.
messagesIn
!==
curTimestamp
)
{
return
;
}
const
formattedMetricData
:
MetricChartDataType
[]
=
formatChartData
(
const
formattedMetricData
:
FormattedMetricData
[]
=
formatChartData
(
res
,
global
.
getMetricDefine
||
{},
MetricType
.
Cluster
,
...
...
@@ -224,7 +224,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
let
valueWithUnit
=
Number
(
value
);
let
unit
=
((
global
.
getMetricDefine
&&
global
.
getMetricDefine
(
MetricType
.
Cluster
,
key
)?.
unit
)
||
''
)
as
string
;
if
(
unit
.
toLowerCase
().
includes
(
'
byte
'
))
{
const
[
unitName
,
unitSize
]:
[
string
,
number
]
=
get
Unit
(
Number
(
value
));
const
[
unitName
,
unitSize
]:
[
string
,
number
]
=
get
DataUnit
[
'
Memory
'
]
(
Number
(
value
));
unit
=
unit
.
toLowerCase
().
replace
(
'
byte
'
,
unitName
);
valueWithUnit
/=
unitSize
;
}
...
...
@@ -235,7 +235,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
};
return
returnValue
;
});
return
[
timeStamp
,
values
.
MessagesIn
||
'
0
'
,
valuesWithUnit
]
as
[
number
,
number
|
string
,
typeof
valuesWithUnit
];
return
[
timeStamp
,
parsedValue
||
'
0
'
,
valuesWithUnit
]
as
[
number
,
number
|
string
,
typeof
valuesWithUnit
];
});
result
.
sort
((
a
,
b
)
=>
(
a
[
0
]
as
number
)
-
(
b
[
0
]
as
number
));
const
line
=
{
...
...
@@ -244,9 +244,9 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
data
:
result
as
any
,
};
if
(
maxValue
>
0
)
{
const
[
unitName
,
unitSize
]:
[
string
,
number
]
=
getData
NumberUnit
(
maxValue
);
const
[
unitName
,
unitSize
]:
[
string
,
number
]
=
getData
Unit
[
'
Num
'
]
(
maxValue
);
line
.
unit
=
`
${
unitName
}${
line
.
unit
}
`
;
result
.
forEach
((
point
)
=>
((
point
[
1
]
as
number
)
/=
unitSize
));
result
.
forEach
((
point
)
=>
parseFloat
(((
point
[
1
]
as
number
)
/=
unitSize
).
toFixed
(
3
)
));
}
if
(
result
.
length
)
{
...
...
@@ -308,11 +308,11 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
return
(
<
div
className
=
"chart-panel cluster-detail-container"
>
<
SingleChartHeade
r
<
ChartOperateBa
r
onChange
=
{
ksHeaderChange
}
hideNodeScope
=
{
true
}
hideGridSelect
=
{
true
}
indicatorSelectModule
=
{
{
metricSelect
=
{
{
hide
:
false
,
metricType
:
MetricType
.
Cluster
,
tableData
:
metricList
,
...
...
km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/HealthySetting.tsx
浏览文件 @
62f7d3f7
/* eslint-disable react/display-name */
import
{
Button
,
Divider
,
Drawer
,
Form
,
message
,
ProTable
,
Table
,
Utils
}
from
'
knowdesign
'
;
import
{
Button
,
Divider
,
Drawer
,
Form
,
ProTable
,
Table
,
Utils
}
from
'
knowdesign
'
;
import
message
from
'
@src/components/Message
'
;
import
React
,
{
useState
}
from
'
react
'
;
import
{
useIntl
}
from
'
react-intl
'
;
import
{
getHealthySettingColumn
}
from
'
./config
'
;
...
...
@@ -34,8 +35,8 @@ const HealthySetting = React.forwardRef((props: any, ref): JSX.Element => {
item
.
configItem
.
indexOf
(
'
Group Re-Balance
'
)
>
-
1
?
'
ReBalance
'
:
item
.
configItem
.
includes
(
'
副本未同步
'
)
?
'
UNDER_REPLICA
'
:
item
.
configItem
;
?
'
UNDER_REPLICA
'
:
item
.
configItem
;
values
[
`weight_
${
item
.
configItemName
}
`
]
=
itemValue
?.
weight
;
values
[
`value_
${
item
.
configItemName
}
`
]
=
itemValue
?.
value
;
...
...
km-console/packages/layout-clusters-fe/src/pages/TopicDashboard/index.tsx
浏览文件 @
62f7d3f7
import
React
from
'
react
'
;
import
{
MetricType
}
from
'
@src/api
'
;
import
TopicHealthCheck
from
'
@src/components/CardBar/TopicHealthCheck
'
;
import
D
ashboardDragChart
from
'
@src/components/DashboardDragChart
'
;
import
D
raggableCharts
from
'
@src/components/DraggableCharts
'
;
import
{
AppContainer
}
from
'
knowdesign
'
;
import
DBreadcrumb
from
'
knowdesign/es/extend/d-breadcrumb
'
;
...
...
@@ -19,7 +19,7 @@ const TopicDashboard = () => {
/>
</
div
>
<
TopicHealthCheck
/>
<
D
ashboardDragChart
type
=
{
MetricType
.
Topic
}
/>
<
D
raggableCharts
type
=
{
MetricType
.
Topic
}
/>
</>
);
};
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录