Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
kafka-manager
提交
1f87bd63
K
kafka-manager
项目概览
DiDi
/
kafka-manager
10 个月 前同步成功
通知
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 搜索 >>
未验证
提交
1f87bd63
编写于
1月 13, 2022
作者:
L
lucasun
提交者:
GitHub
1月 13, 2022
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #416 from potaaaaaato/master
update echarts from v4 to v5
上级
a8d7eb27
ec28eba7
变更
12
显示空白变更内容
内联
并排
Showing
12 changed file
with
138 addition
and
71 deletion
+138
-71
kafka-manager-console/package.json
kafka-manager-console/package.json
+7
-6
kafka-manager-console/src/component/chart/bar-chart.tsx
kafka-manager-console/src/component/chart/bar-chart.tsx
+22
-7
kafka-manager-console/src/component/chart/date-picker-chart.tsx
...manager-console/src/component/chart/date-picker-chart.tsx
+31
-12
kafka-manager-console/src/component/chart/doughnut-chart.tsx
kafka-manager-console/src/component/chart/doughnut-chart.tsx
+20
-6
kafka-manager-console/src/component/chart/line-chart.tsx
kafka-manager-console/src/component/chart/line-chart.tsx
+33
-13
kafka-manager-console/src/container/admin/data-curve/config.ts
...-manager-console/src/container/admin/data-curve/config.ts
+1
-2
kafka-manager-console/src/container/admin/data-curve/parser.ts
...-manager-console/src/container/admin/data-curve/parser.ts
+5
-5
kafka-manager-console/src/container/alarm/alarm-detail/history-detail.tsx
...nsole/src/container/alarm/alarm-detail/history-detail.tsx
+3
-3
kafka-manager-console/src/container/common-curve/config.ts
kafka-manager-console/src/container/common-curve/config.ts
+5
-6
kafka-manager-console/src/container/common-curve/index.tsx
kafka-manager-console/src/container/common-curve/index.tsx
+5
-5
kafka-manager-console/src/store/curve-info.ts
kafka-manager-console/src/store/curve-info.ts
+4
-4
kafka-manager-console/webpack.config.js
kafka-manager-console/webpack.config.js
+2
-2
未找到文件。
kafka-manager-console/package.json
浏览文件 @
1f87bd63
...
@@ -3,7 +3,8 @@
...
@@ -3,7 +3,8 @@
"version"
:
"2.5.0"
,
"version"
:
"2.5.0"
,
"description"
:
""
,
"description"
:
""
,
"scripts"
:
{
"scripts"
:
{
"start"
:
"webpack-dev-server"
,
"prestart"
:
"npm install --save-dev webpack-dev-server"
,
"start"
:
"webpack serve"
,
"daily-build"
:
"cross-env NODE_ENV=production webpack"
,
"daily-build"
:
"cross-env NODE_ENV=production webpack"
,
"pre-build"
:
"cross-env NODE_ENV=production webpack"
,
"pre-build"
:
"cross-env NODE_ENV=production webpack"
,
"prod-build"
:
"cross-env NODE_ENV=production webpack"
,
"prod-build"
:
"cross-env NODE_ENV=production webpack"
,
...
@@ -13,18 +14,19 @@
...
@@ -13,18 +14,19 @@
"license"
:
"ISC"
,
"license"
:
"ISC"
,
"devDependencies"
:
{
"devDependencies"
:
{
"@hot-loader/react-dom"
:
"^16.8.6"
,
"@hot-loader/react-dom"
:
"^16.8.6"
,
"@types/e
charts"
:
"^4.4.1
"
,
"@types/e
vents"
:
"^3.0.0
"
,
"@types/lodash.debounce"
:
"^4.0.6"
,
"@types/lodash.debounce"
:
"^4.0.6"
,
"@types/react"
:
"^16.8.8"
,
"@types/react"
:
"^16.8.8"
,
"@types/react-dom"
:
"^16.8.2"
,
"@types/react-dom"
:
"^16.8.2"
,
"@types/react-router-dom"
:
"^4.3.1"
,
"@types/react-router-dom"
:
"^4.3.1"
,
"@types/spark-md5"
:
"^3.0.2"
,
"@types/spark-md5"
:
"^3.0.2"
,
"@webpack-cli/serve"
:
"^1.6.0"
,
"antd"
:
"^3.26.15"
,
"antd"
:
"^3.26.15"
,
"clean-webpack-plugin"
:
"^3.0.0"
,
"clean-webpack-plugin"
:
"^3.0.0"
,
"clipboard"
:
"^2.0.8"
,
"clipboard"
:
"^2.0.8"
,
"cross-env"
:
"^7.0.2"
,
"cross-env"
:
"^7.0.2"
,
"css-loader"
:
"^2.1.0"
,
"css-loader"
:
"^2.1.0"
,
"echarts"
:
"^
4.5.0
"
,
"echarts"
:
"^
5.2.1
"
,
"file-loader"
:
"^5.0.2"
,
"file-loader"
:
"^5.0.2"
,
"html-webpack-plugin"
:
"^3.2.0"
,
"html-webpack-plugin"
:
"^3.2.0"
,
"increase-memory-limit"
:
"^1.0.7"
,
"increase-memory-limit"
:
"^1.0.7"
,
...
@@ -50,8 +52,7 @@
...
@@ -50,8 +52,7 @@
"typescript"
:
"^3.3.3333"
,
"typescript"
:
"^3.3.3333"
,
"url-loader"
:
"^4.1.1"
,
"url-loader"
:
"^4.1.1"
,
"webpack"
:
"^4.29.6"
,
"webpack"
:
"^4.29.6"
,
"webpack-cli"
:
"^3.2.3"
,
"webpack-cli"
:
"^4.9.1"
,
"webpack-dev-server"
:
"^3.2.1"
,
"xlsx"
:
"^0.16.1"
"xlsx"
:
"^0.16.1"
},
},
"dependencies"
:
{
"dependencies"
:
{
...
...
kafka-manager-console/src/component/chart/bar-chart.tsx
浏览文件 @
1f87bd63
import
*
as
React
from
'
react
'
;
import
*
as
React
from
'
react
'
;
import
{
Spin
,
notification
}
from
'
component/antd
'
;
import
{
Spin
,
notification
}
from
'
component/antd
'
;
import
echarts
,
{
EChartOption
}
from
'
echarts/lib/echarts
'
;
import
*
as
echarts
from
'
echarts/core
'
;
// 引入柱状图
// 引入柱状图
import
'
echarts/lib/chart/bar
'
;
import
{
BarChart
}
from
'
echarts/charts
'
;
// 引入提示框和标题组件
// 引入提示框和标题组件
import
'
echarts/lib/component/tooltip
'
;
import
{
import
'
echarts/lib/component/title
'
;
TitleComponent
,
import
'
echarts/lib/component/legend
'
;
TooltipComponent
,
LegendComponent
,
GridComponent
,
}
from
'
echarts/components
'
;
import
{
CanvasRenderer
}
from
'
echarts/renderers
'
;
import
{
EChartsOption
}
from
'
echarts
'
;
// 注册必须的组件
echarts
.
use
([
TitleComponent
,
LegendComponent
,
TooltipComponent
,
BarChart
,
GridComponent
,
CanvasRenderer
,
]);
interface
IChartProps
{
interface
IChartProps
{
getChartData
:
any
;
getChartData
:
any
;
...
@@ -38,7 +53,7 @@ export class BarChartComponet extends React.Component<IChartProps> {
...
@@ -38,7 +53,7 @@ export class BarChartComponet extends React.Component<IChartProps> {
this
.
chart
.
resize
();
this
.
chart
.
resize
();
}
}
public
isHasData
=
(
data
:
EChartOption
)
=>
{
public
isHasData
=
(
data
:
any
)
=>
{
const
noData
=
!
(
data
.
series
&&
data
.
series
.
length
);
const
noData
=
!
(
data
.
series
&&
data
.
series
.
length
);
this
.
setState
({
noData
});
this
.
setState
({
noData
});
return
!
noData
;
return
!
noData
;
...
@@ -54,7 +69,7 @@ export class BarChartComponet extends React.Component<IChartProps> {
...
@@ -54,7 +69,7 @@ export class BarChartComponet extends React.Component<IChartProps> {
const
chartOptions
=
getChartData
();
const
chartOptions
=
getChartData
();
if
((
typeof
chartOptions
.
then
)
===
'
function
'
)
{
if
((
typeof
chartOptions
.
then
)
===
'
function
'
)
{
return
chartOptions
.
then
((
data
:
EChartOption
)
=>
{
return
chartOptions
.
then
((
data
:
EChart
s
Option
)
=>
{
this
.
setState
({
loading
:
false
});
this
.
setState
({
loading
:
false
});
if
(
this
.
isHasData
(
data
))
{
if
(
this
.
isHasData
(
data
))
{
...
...
kafka-manager-console/src/component/chart/date-picker-chart.tsx
浏览文件 @
1f87bd63
...
@@ -3,16 +3,34 @@ import { DatePicker, notification, Spin } from 'component/antd';
...
@@ -3,16 +3,34 @@ import { DatePicker, notification, Spin } from 'component/antd';
import
moment
,
{
Moment
}
from
'
moment
'
;
import
moment
,
{
Moment
}
from
'
moment
'
;
import
{
timeStampStr
}
from
'
constants/strategy
'
;
import
{
timeStampStr
}
from
'
constants/strategy
'
;
import
{
disabledDate
}
from
'
lib/utils
'
;
import
{
disabledDate
}
from
'
lib/utils
'
;
import
echarts
from
'
echarts
'
;
import
*
as
echarts
from
'
echarts/core
'
;
// 引入柱状图和折线图
// 引入柱状图
import
'
echarts/lib/chart/bar
'
;
import
{
BarChart
,
LineChart
}
from
'
echarts/charts
'
;
import
'
echarts/lib/chart/line
'
;
// 引入提示框和标题组件
// 引入提示框和标题组件
import
'
echarts/lib/component/tooltip
'
;
import
{
import
'
echarts/lib/component/title
'
;
TitleComponent
,
import
'
echarts/lib/component/legend
'
;
TooltipComponent
,
LegendComponent
,
GridComponent
,
MarkLineComponent
,
DatasetComponent
,
}
from
'
echarts/components
'
;
import
{
CanvasRenderer
}
from
'
echarts/renderers
'
;
// 注册必须的组件
echarts
.
use
([
TitleComponent
,
LegendComponent
,
TooltipComponent
,
GridComponent
,
BarChart
,
LineChart
,
CanvasRenderer
,
DatasetComponent
,
MarkLineComponent
,
]);
import
'
./index.less
'
;
import
'
./index.less
'
;
const
{
RangePicker
}
=
DatePicker
;
const
{
RangePicker
}
=
DatePicker
;
...
@@ -61,11 +79,12 @@ export class ChartWithDatePicker extends React.Component<IChartProps> {
...
@@ -61,11 +79,12 @@ export class ChartWithDatePicker extends React.Component<IChartProps> {
const
noData
=
options
.
series
.
length
?
false
:
true
;
const
noData
=
options
.
series
.
length
?
false
:
true
;
this
.
setState
({
noData
});
this
.
setState
({
noData
});
options
.
tooltip
.
formatter
=
(
params
:
any
)
=>
{
options
.
tooltip
.
formatter
=
(
params
:
any
)
=>
{
var
res
=
let
res
=
"
<div style='margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;border-radius:3px;'><p>
"
+
'
<div style=
\'
margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;border-radius:3px;
\'
><p>
'
+
params
[
0
].
data
.
time
+
params
[
0
].
data
.
time
+
"
</p></div>
"
;
'
</p></div>
'
;
for
(
var
i
=
0
;
i
<
params
.
length
;
i
++
)
{
// tslint:disable-next-line:prefer-for-of
for
(
let
i
=
0
;
i
<
params
.
length
;
i
++
)
{
res
+=
`<div key=
${
params
[
i
].
seriesName
}
style="color: #fff;padding:0 12px;line-height: 24px">
res
+=
`<div key=
${
params
[
i
].
seriesName
}
style="color: #fff;padding:0 12px;line-height: 24px">
<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:
${[
<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:
${[
params
[
i
].
color
,
params
[
i
].
color
,
...
@@ -75,7 +94,7 @@ export class ChartWithDatePicker extends React.Component<IChartProps> {
...
@@ -75,7 +94,7 @@ export class ChartWithDatePicker extends React.Component<IChartProps> {
</div>`
;
</div>`
;
}
}
return
res
;
return
res
;
}
}
;
this
.
chart
.
setOption
(
options
,
true
);
this
.
chart
.
setOption
(
options
,
true
);
}
}
...
...
kafka-manager-console/src/component/chart/doughnut-chart.tsx
浏览文件 @
1f87bd63
import
*
as
React
from
'
react
'
;
import
*
as
React
from
'
react
'
;
import
{
Spin
}
from
'
component/antd
'
;
import
{
Spin
}
from
'
component/antd
'
;
import
echarts
from
'
echarts/lib/echarts
'
;
import
*
as
echarts
from
'
echarts/core
'
;
// 引入饼状图
// 引入饼图
import
'
echarts/lib/chart/pie
'
;
import
{
PieChart
}
from
'
echarts/charts
'
;
// 引入提示框和标题组件
// 引入提示框和标题组件
import
'
echarts/lib/component/tooltip
'
;
import
{
import
'
echarts/lib/component/title
'
;
TitleComponent
,
import
'
echarts/lib/component/legend
'
;
TooltipComponent
,
LegendComponent
,
GridComponent
,
}
from
'
echarts/components
'
;
import
{
CanvasRenderer
}
from
'
echarts/renderers
'
;
// 注册必须的组件
echarts
.
use
([
PieChart
,
TitleComponent
,
LegendComponent
,
TooltipComponent
,
GridComponent
,
CanvasRenderer
,
]);
interface
IPieProps
{
interface
IPieProps
{
getChartData
:
any
;
getChartData
:
any
;
}
}
...
...
kafka-manager-console/src/component/chart/line-chart.tsx
浏览文件 @
1f87bd63
import
React
from
'
react
'
;
import
React
from
'
react
'
;
import
echarts
,
{
EChartOption
}
from
'
echarts/lib/echarts
'
;
import
*
as
echarts
from
'
echarts/core
'
;
import
'
echarts/lib/chart/pie
'
;
import
'
echarts/lib/chart/line
'
;
import
'
echarts/lib/component/legend
'
;
import
'
echarts/lib/component/tooltip
'
;
import
'
echarts/lib/component/title
'
;
import
'
echarts/lib/component/axis
'
;
import
'
./index.less
'
;
import
'
./index.less
'
;
// 引入柱状图
import
{
PieChart
,
LineChart
}
from
'
echarts/charts
'
;
// 引入提示框和标题组件
import
{
TitleComponent
,
TooltipComponent
,
LegendComponent
,
GridComponent
,
ToolboxComponent
,
DatasetComponent
,
}
from
'
echarts/components
'
;
import
{
CanvasRenderer
}
from
'
echarts/renderers
'
;
// 注册必须的组件
echarts
.
use
([
PieChart
,
LineChart
,
ToolboxComponent
,
TitleComponent
,
LegendComponent
,
TooltipComponent
,
GridComponent
,
DatasetComponent
,
CanvasRenderer
,
]);
export
interface
IEchartsProps
{
export
interface
IEchartsProps
{
width
?:
number
;
width
?:
number
;
height
?:
number
;
height
?:
number
;
options
?:
EChartOption
;
options
?:
any
;
}
}
export
const
hasData
=
(
options
:
EChartOption
)
=>
{
export
const
hasData
=
(
options
:
any
)
=>
{
if
(
options
&&
options
.
series
&&
options
.
series
.
length
)
return
true
;
if
(
options
&&
options
.
series
&&
options
.
series
.
length
)
return
true
;
return
false
;
return
false
;
};
};
export
default
class
LineChart
extends
React
.
Component
<
IEchartsProps
>
{
export
default
class
LineChart
s
extends
React
.
Component
<
IEchartsProps
>
{
public
id
=
null
as
HTMLDivElement
;
public
id
=
null
as
HTMLDivElement
;
public
myChart
=
null
as
echarts
.
ECharts
;
public
myChart
=
null
as
echarts
.
ECharts
;
...
@@ -27,7 +47,7 @@ export default class LineChart extends React.Component<IEchartsProps> {
...
@@ -27,7 +47,7 @@ export default class LineChart extends React.Component<IEchartsProps> {
public
componentDidMount
()
{
public
componentDidMount
()
{
const
{
options
}
=
this
.
props
;
const
{
options
}
=
this
.
props
;
this
.
myChart
=
echarts
.
init
(
this
.
id
);
this
.
myChart
=
echarts
.
init
(
this
.
id
);
this
.
myChart
.
setOption
(
options
);
this
.
myChart
.
setOption
(
options
,
true
);
window
.
addEventListener
(
'
resize
'
,
this
.
resize
);
window
.
addEventListener
(
'
resize
'
,
this
.
resize
);
}
}
...
@@ -41,7 +61,7 @@ export default class LineChart extends React.Component<IEchartsProps> {
...
@@ -41,7 +61,7 @@ export default class LineChart extends React.Component<IEchartsProps> {
public
refresh
=
()
=>
{
public
refresh
=
()
=>
{
const
{
options
}
=
this
.
props
;
const
{
options
}
=
this
.
props
;
this
.
myChart
.
setOption
(
options
);
this
.
myChart
.
setOption
(
options
,
true
);
}
}
public
resize
=
()
=>
{
public
resize
=
()
=>
{
...
@@ -50,6 +70,6 @@ export default class LineChart extends React.Component<IEchartsProps> {
...
@@ -50,6 +70,6 @@ export default class LineChart extends React.Component<IEchartsProps> {
public
render
()
{
public
render
()
{
const
{
height
,
width
}
=
this
.
props
;
const
{
height
,
width
}
=
this
.
props
;
return
<
div
ref
=
{
id
=>
this
.
id
=
id
}
style
=
{
{
width
:
`
${
width
}
px`
,
height
:
`
${
height
}
px`
}
}
/>;
return
<
div
ref
=
{
id
=>
this
.
id
=
id
}
style
=
{
{
width
:
`
${
width
}
px`
,
height
:
`
${
height
}
px`
}
}
/>;
}
}
}
}
kafka-manager-console/src/container/admin/data-curve/config.ts
浏览文件 @
1f87bd63
import
{
EChartOption
}
from
'
echarts/lib/echarts
'
;
import
moment
from
'
moment
'
;
import
moment
from
'
moment
'
;
import
{
ICurve
}
from
'
container/common-curve/config
'
;
import
{
ICurve
}
from
'
container/common-curve/config
'
;
import
{
adminMonitor
}
from
'
store/admin-monitor
'
;
import
{
adminMonitor
}
from
'
store/admin-monitor
'
;
...
@@ -124,7 +123,7 @@ export interface ICurveType {
...
@@ -124,7 +123,7 @@ export interface ICurveType {
type
:
curveType
;
type
:
curveType
;
title
:
string
;
title
:
string
;
curves
:
ICurve
[];
curves
:
ICurve
[];
parser
:
(
option
:
ICurve
,
data
:
any
[])
=>
EChartOption
;
parser
:
(
option
:
ICurve
,
data
:
any
[])
=>
any
;
}
}
export
const
byteTypeCurves
:
ICurveType
[]
=
[
export
const
byteTypeCurves
:
ICurveType
[]
=
[
...
...
kafka-manager-console/src/container/admin/data-curve/parser.ts
浏览文件 @
1f87bd63
import
moment
from
'
moment
'
;
import
moment
from
'
moment
'
;
import
{
EChartOption
}
from
'
echarts
'
;
import
{
EChart
s
Option
}
from
'
echarts
'
;
import
{
ICurve
,
ILineData
,
baseLineLegend
,
baseLineGrid
,
baseAxisStyle
,
noAxis
,
UNIT_HEIGHT
}
from
'
container/common-curve/config
'
;
import
{
ICurve
,
ILineData
,
baseLineLegend
,
baseLineGrid
,
baseAxisStyle
,
noAxis
,
UNIT_HEIGHT
}
from
'
container/common-curve/config
'
;
import
{
IClusterMetrics
,
ISeriesOption
}
from
'
types/base-type
'
;
import
{
IClusterMetrics
,
ISeriesOption
}
from
'
types/base-type
'
;
import
{
timeFormat
}
from
'
constants/strategy
'
;
import
{
timeFormat
}
from
'
constants/strategy
'
;
...
@@ -48,20 +48,20 @@ export const getBaseOptions = (option: ICurve, data: ILineData[]) => {
...
@@ -48,20 +48,20 @@ export const getBaseOptions = (option: ICurve, data: ILineData[]) => {
return
Number
(
i
.
value
);
return
Number
(
i
.
value
);
}),
}),
}],
}],
}
as
EChartOption
;
}
as
EChart
s
Option
;
};
};
export
const
parseLine
=
(
option
:
ICurve
,
data
:
ILineData
[]):
EChartOption
=>
{
export
const
parseLine
=
(
option
:
ICurve
,
data
:
ILineData
[]):
EChart
s
Option
=>
{
return
Object
.
assign
({},
getBaseOptions
(
option
,
data
),
{
return
Object
.
assign
({},
getBaseOptions
(
option
,
data
),
{
legend
:
{
legend
:
{
...
baseLineLegend
,
...
baseLineLegend
,
bottom
:
'
0
'
,
bottom
:
'
0
'
,
align
:
'
auto
'
,
align
:
'
auto
'
,
},
},
})
as
EChartOption
;
})
as
EChart
s
Option
;
};
};
export
const
parseBrokerMetricOption
=
(
option
:
ICurve
,
data
:
IClusterMetrics
[]):
EChartOption
=>
{
export
const
parseBrokerMetricOption
=
(
option
:
ICurve
,
data
:
IClusterMetrics
[]):
EChart
s
Option
=>
{
let
name
;
let
name
;
let
series
:
ISeriesOption
[];
let
series
:
ISeriesOption
[];
data
=
data
||
[];
data
=
data
||
[];
...
...
kafka-manager-console/src/container/alarm/alarm-detail/history-detail.tsx
浏览文件 @
1f87bd63
...
@@ -6,7 +6,7 @@ import { alarm } from 'store/alarm';
...
@@ -6,7 +6,7 @@ import { alarm } from 'store/alarm';
import
{
observer
}
from
'
mobx-react
'
;
import
{
observer
}
from
'
mobx-react
'
;
import
{
handlePageBack
}
from
'
lib/utils
'
;
import
{
handlePageBack
}
from
'
lib/utils
'
;
import
LineChart
,
{
hasData
}
from
'
component/chart/line-chart
'
;
import
LineChart
,
{
hasData
}
from
'
component/chart/line-chart
'
;
import
{
EChartOption
}
from
'
echarts
'
;
import
{
EChart
s
Option
}
from
'
echarts
'
;
import
{
timeFormat
}
from
'
constants/strategy
'
;
import
{
timeFormat
}
from
'
constants/strategy
'
;
import
Url
from
'
lib/url-parser
'
;
import
Url
from
'
lib/url-parser
'
;
import
moment
=
require
(
'
moment
'
);
import
moment
=
require
(
'
moment
'
);
...
@@ -40,7 +40,7 @@ export class HistoryDetail extends React.Component {
...
@@ -40,7 +40,7 @@ export class HistoryDetail extends React.Component {
return
<
div
className
=
"no-data-info"
style
=
{
{
...
style
}
}
key
=
"loading"
><
Spin
/></
div
>;
return
<
div
className
=
"no-data-info"
style
=
{
{
...
style
}
}
key
=
"loading"
><
Spin
/></
div
>;
}
}
public
renderEchart
=
(
options
:
EChartOption
,
loading
=
false
)
=>
{
public
renderEchart
=
(
options
:
EChart
s
Option
,
loading
=
false
)
=>
{
const
data
=
hasData
(
options
);
const
data
=
hasData
(
options
);
if
(
loading
)
return
this
.
renderLoading
(
400
);
if
(
loading
)
return
this
.
renderLoading
(
400
);
if
(
!
data
)
return
this
.
renderNoData
(
400
);
if
(
!
data
)
return
this
.
renderNoData
(
400
);
...
@@ -51,7 +51,7 @@ export class HistoryDetail extends React.Component {
...
@@ -51,7 +51,7 @@ export class HistoryDetail extends React.Component {
}
}
public
renderHistoricalTraffic
(
metric
:
IMonitorMetric
)
{
public
renderHistoricalTraffic
(
metric
:
IMonitorMetric
)
{
const
option
=
this
.
getChartOption
()
as
EChartOption
;
const
option
=
this
.
getChartOption
()
as
EChart
s
Option
;
return
(
return
(
<>
<>
...
...
kafka-manager-console/src/container/common-curve/config.ts
浏览文件 @
1f87bd63
import
{
EChartOption
}
from
'
echarts/lib/echarts
'
;
import
{
EChartsOption
}
from
'
echarts
'
;
import
moment
from
'
moment
'
;
export
interface
ILineData
{
export
interface
ILineData
{
value
:
number
;
value
:
number
;
...
@@ -9,7 +8,7 @@ export interface ICurve {
...
@@ -9,7 +8,7 @@ export interface ICurve {
title
?:
string
;
title
?:
string
;
path
:
string
;
path
:
string
;
colors
:
string
[];
colors
:
string
[];
parser
?:
(
option
:
ICurve
,
data
:
ILineData
)
=>
EChartOption
;
parser
?:
(
option
:
ICurve
,
data
:
ILineData
)
=>
EChart
s
Option
;
message
?:
string
;
message
?:
string
;
unit
?:
string
;
unit
?:
string
;
api
?:
any
;
api
?:
any
;
...
@@ -69,13 +68,13 @@ export const noAxis = {
...
@@ -69,13 +68,13 @@ export const noAxis = {
},
},
};
};
export
const
getHight
=
(
options
:
EChartOption
)
=>
{
export
const
getHight
=
(
options
:
any
)
=>
{
let
grid
=
options
?
options
.
grid
as
EChartOption
.
Grid
:
null
;
let
grid
=
options
?
options
.
grid
:
null
;
if
(
!
options
||
!
grid
)
grid
=
baseLineGrid
;
if
(
!
options
||
!
grid
)
grid
=
baseLineGrid
;
return
Number
(
grid
.
height
)
+
getLegendHight
(
options
)
+
Number
(
grid
.
top
)
+
LEGEND_PADDING
+
UNIT_HEIGHT
;
return
Number
(
grid
.
height
)
+
getLegendHight
(
options
)
+
Number
(
grid
.
top
)
+
LEGEND_PADDING
+
UNIT_HEIGHT
;
};
};
export
const
getLegendHight
=
(
options
:
EChartOption
)
=>
{
export
const
getLegendHight
=
(
options
:
any
)
=>
{
if
(
!
options
)
return
0
;
if
(
!
options
)
return
0
;
if
(
options
.
legend
.
show
===
false
)
return
0
;
if
(
options
.
legend
.
show
===
false
)
return
0
;
const
legendHight
=
options
.
legend
.
textStyle
.
lineHeight
+
defaultLegendPadding
;
const
legendHight
=
options
.
legend
.
textStyle
.
lineHeight
+
defaultLegendPadding
;
...
...
kafka-manager-console/src/container/common-curve/index.tsx
浏览文件 @
1f87bd63
import
{
EChartOption
}
from
'
echarts
'
;
import
{
EChart
s
Option
}
from
'
echarts
'
;
import
{
observer
}
from
'
mobx-react
'
;
import
{
observer
}
from
'
mobx-react
'
;
import
React
from
'
react
'
;
import
React
from
'
react
'
;
import
{
curveInfo
}
from
'
store/curve-info
'
;
import
{
curveInfo
}
from
'
store/curve-info
'
;
...
@@ -10,7 +10,7 @@ import LineChart, { hasData } from 'component/chart/line-chart';
...
@@ -10,7 +10,7 @@ import LineChart, { hasData } from 'component/chart/line-chart';
export
interface
ICommonCurveProps
{
export
interface
ICommonCurveProps
{
options
:
ICurve
;
options
:
ICurve
;
parser
?:
(
option
:
ICurve
,
data
:
any
[])
=>
EChartOption
;
parser
?:
(
option
:
ICurve
,
data
:
any
[])
=>
any
;
}
}
@
observer
@
observer
...
@@ -41,7 +41,7 @@ export class CommonCurve extends React.Component<ICommonCurveProps> {
...
@@ -41,7 +41,7 @@ export class CommonCurve extends React.Component<ICommonCurveProps> {
fullScreen
.
show
(
this
.
renderCurve
(
options
,
loading
,
true
));
fullScreen
.
show
(
this
.
renderCurve
(
options
,
loading
,
true
));
}
}
public
renderOpBtns
=
(
options
:
EChartOption
,
expand
=
false
)
=>
{
public
renderOpBtns
=
(
options
:
EChart
s
Option
,
expand
=
false
)
=>
{
const
data
=
hasData
(
options
);
const
data
=
hasData
(
options
);
return
(
return
(
<
div
className
=
"charts-op"
key
=
"op"
>
<
div
className
=
"charts-op"
key
=
"op"
>
...
@@ -85,7 +85,7 @@ export class CommonCurve extends React.Component<ICommonCurveProps> {
...
@@ -85,7 +85,7 @@ export class CommonCurve extends React.Component<ICommonCurveProps> {
return
<
div
className
=
"no-data-info"
style
=
{
{
...
style
}
}
key
=
"loading"
><
Spin
/></
div
>;
return
<
div
className
=
"no-data-info"
style
=
{
{
...
style
}
}
key
=
"loading"
><
Spin
/></
div
>;
}
}
public
renderEchart
=
(
options
:
EChartOption
,
loading
=
false
)
=>
{
public
renderEchart
=
(
options
:
EChart
s
Option
,
loading
=
false
)
=>
{
const
height
=
getHight
(
options
);
const
height
=
getHight
(
options
);
const
data
=
hasData
(
options
);
const
data
=
hasData
(
options
);
...
@@ -94,7 +94,7 @@ export class CommonCurve extends React.Component<ICommonCurveProps> {
...
@@ -94,7 +94,7 @@ export class CommonCurve extends React.Component<ICommonCurveProps> {
return
<
LineChart
height
=
{
height
}
options
=
{
options
}
key
=
"chart"
/>;
return
<
LineChart
height
=
{
height
}
options
=
{
options
}
key
=
"chart"
/>;
}
}
public
renderCurve
=
(
options
:
EChartOption
,
loading
:
boolean
,
expand
=
false
)
=>
{
public
renderCurve
=
(
options
:
any
,
loading
:
boolean
,
expand
=
false
)
=>
{
const
data
=
hasData
(
options
);
const
data
=
hasData
(
options
);
return
(
return
(
<
div
className
=
"common-chart-wrapper"
>
<
div
className
=
"common-chart-wrapper"
>
...
...
kafka-manager-console/src/store/curve-info.ts
浏览文件 @
1f87bd63
import
{
observable
,
action
}
from
'
mobx
'
;
import
{
observable
,
action
}
from
'
mobx
'
;
import
moment
=
require
(
'
moment
'
);
import
moment
=
require
(
'
moment
'
);
import
{
EChart
Option
}
from
'
echarts/lib/
echarts
'
;
import
{
EChart
sOption
}
from
'
echarts
'
;
import
{
ICurve
}
from
'
container/common-curve/config
'
;
import
{
ICurve
}
from
'
container/common-curve/config
'
;
import
{
curveKeys
,
PERIOD_RADIO_MAP
}
from
'
container/admin/data-curve/config
'
;
import
{
curveKeys
,
PERIOD_RADIO_MAP
}
from
'
container/admin/data-curve/config
'
;
import
{
timeFormat
}
from
'
constants/strategy
'
;
import
{
timeFormat
}
from
'
constants/strategy
'
;
...
@@ -13,7 +13,7 @@ class CurveInfo {
...
@@ -13,7 +13,7 @@ class CurveInfo {
public
timeRange
:
[
moment
.
Moment
,
moment
.
Moment
]
=
PERIOD_RADIO_MAP
.
get
(
this
.
periodKey
).
dateRange
;
public
timeRange
:
[
moment
.
Moment
,
moment
.
Moment
]
=
PERIOD_RADIO_MAP
.
get
(
this
.
periodKey
).
dateRange
;
@
observable
@
observable
public
curveData
:
{
[
key
:
string
]:
EChartOption
}
=
{};
public
curveData
:
{
[
key
:
string
]:
EChart
s
Option
}
=
{};
@
observable
@
observable
public
curveLoading
:
{
[
key
:
string
]:
boolean
}
=
{};
public
curveLoading
:
{
[
key
:
string
]:
boolean
}
=
{};
...
@@ -25,7 +25,7 @@ class CurveInfo {
...
@@ -25,7 +25,7 @@ class CurveInfo {
public
currentOperator
:
string
;
public
currentOperator
:
string
;
@
action
.
bound
@
action
.
bound
public
setCurveData
(
key
:
curveKeys
|
string
,
data
:
EChartOption
)
{
public
setCurveData
(
key
:
curveKeys
|
string
,
data
:
EChart
s
Option
)
{
this
.
curveData
[
key
]
=
data
;
this
.
curveData
[
key
]
=
data
;
}
}
...
@@ -59,7 +59,7 @@ class CurveInfo {
...
@@ -59,7 +59,7 @@ class CurveInfo {
public
getCommonCurveData
=
(
public
getCommonCurveData
=
(
options
:
ICurve
,
options
:
ICurve
,
parser
:
(
option
:
ICurve
,
data
:
any
[])
=>
EChartOption
,
parser
:
(
option
:
ICurve
,
data
:
any
[])
=>
EChart
s
Option
,
reload
?:
boolean
)
=>
{
reload
?:
boolean
)
=>
{
const
{
path
}
=
options
;
const
{
path
}
=
options
;
this
.
setCurveData
(
path
,
null
);
this
.
setCurveData
(
path
,
null
);
...
...
kafka-manager-console/webpack.config.js
浏览文件 @
1f87bd63
...
@@ -122,11 +122,11 @@ module.exports = {
...
@@ -122,11 +122,11 @@ module.exports = {
},
},
},
},
devServer
:
{
devServer
:
{
contentBase
:
outPath
,
//
contentBase: outPath,
host
:
'
127.0.0.1
'
,
host
:
'
127.0.0.1
'
,
port
:
1025
,
port
:
1025
,
hot
:
true
,
hot
:
true
,
disableHostCheck
:
true
,
//
disableHostCheck: true,
historyApiFallback
:
true
,
historyApiFallback
:
true
,
proxy
:
{
proxy
:
{
'
/api/v1/
'
:
{
'
/api/v1/
'
:
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录