Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
nightingale
提交
fc023fd8
N
nightingale
项目概览
DiDi
/
nightingale
12 个月 前同步成功
通知
46
Star
7053
Fork
1161
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nightingale
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
fc023fd8
编写于
6月 17, 2020
作者:
J
jsers
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: Graph typescript error
上级
b45a968a
变更
10
隐藏空白更改
内联
并排
Showing
10 changed file
with
30 addition
and
42 deletion
+30
-42
web/src/components/Graph/Graph/Title.tsx
web/src/components/Graph/Graph/Title.tsx
+1
-1
web/src/components/Graph/Graph/index.tsx
web/src/components/Graph/Graph/index.tsx
+4
-11
web/src/components/Graph/GraphConfig/GraphConfigForm.tsx
web/src/components/Graph/GraphConfig/GraphConfigForm.tsx
+6
-6
web/src/components/Graph/GraphConfig/GraphConfigInner.tsx
web/src/components/Graph/GraphConfig/GraphConfigInner.tsx
+7
-5
web/src/components/Graph/util/getTooltipsContent.tsx
web/src/components/Graph/util/getTooltipsContent.tsx
+5
-5
web/src/components/Graph/util/hasDtag.tsx
web/src/components/Graph/util/hasDtag.tsx
+1
-1
web/src/components/Layout/utils.tsx
web/src/components/Layout/utils.tsx
+1
-1
web/src/pages/Monitor/Dashboard/Graphs.tsx
web/src/pages/Monitor/Dashboard/Graphs.tsx
+0
-4
web/src/pages/Monitor/Dashboard/MetricSelect.tsx
web/src/pages/Monitor/Dashboard/MetricSelect.tsx
+1
-1
web/src/pages/Monitor/Dashboard/index.tsx
web/src/pages/Monitor/Dashboard/index.tsx
+4
-7
未找到文件。
web/src/components/Graph/Graph/Title.tsx
浏览文件 @
fc023fd8
...
...
@@ -14,7 +14,7 @@ export default class Title extends Component<Props> {
render
()
{
const
{
title
,
selectedMetric
}
=
this
.
props
;
const
styleObj
=
{
const
styleObj
:
React
.
CSSProperties
=
{
width
:
'
100%
'
,
overflow
:
'
hidden
'
,
whiteSpace
:
'
nowrap
'
,
...
...
web/src/components/Graph/Graph/index.tsx
浏览文件 @
fc023fd8
...
...
@@ -15,11 +15,11 @@ import GraphConfigInner from '../GraphConfig/GraphConfigInner';
import
{
GraphDataInterface
,
SerieInterface
,
GraphDataChangeFunc
,
CounterInterface
,
ChartOptionsInterface
}
from
'
../interface
'
;
interface
Props
{
useDragHandle
:
boolean
,
useDragHandle
?
:
boolean
,
data
:
GraphDataInterface
,
// 图表数据配置
height
:
number
,
// 图表高度
graphConfigInnerVisible
:
boolean
,
// 内置图表配置栏是否显示
extraRender
:
()
=>
void
,
// 图表右侧工具栏扩展
extraRender
:
(
graph
:
any
)
=>
void
,
// 图表右侧工具栏扩展
extraMoreList
:
React
.
ReactNode
,
// 图表右侧工具栏更多选项扩展
metricMap
:
any
,
// 指标信息表,用于设置图表名称
onChange
:
GraphDataChangeFunc
,
// 图表配置修改回调
...
...
@@ -116,10 +116,6 @@ export default class Graph extends Component<Props, State> {
if
(
this
.
chart
)
this
.
chart
.
destroy
();
}
static
setOptions
=
(
options
:
any
)
=>
{
window
.
OdinGraphOptions
=
options
;
};
getGraphConfig
(
graphConfig
:
GraphDataInterface
)
{
return
{
...
config
.
graphDefaultConfig
,
...
...
@@ -328,7 +324,7 @@ export default class Graph extends Component<Props, State> {
}
render
()
{
const
{
spinning
,
errorText
,
isOrigin
}
=
this
.
state
;
const
{
spinning
,
errorText
}
=
this
.
state
;
const
{
height
,
onChange
,
extraRender
,
data
}
=
this
.
props
;
const
graphConfig
=
this
.
getGraphConfig
(
data
);
...
...
@@ -360,15 +356,12 @@ export default class Graph extends Component<Props, State> {
</
div
>
<
Title
title
=
{
data
.
title
}
selectedNs
=
{
_
.
reduce
(
graphConfig
.
metrics
,
(
result
,
metricObj
)
=>
_
.
concat
(
result
,
metricObj
.
selectedNs
),
[])
}
selectedMetric
=
{
_
.
reduce
(
graphConfig
.
metrics
,
(
result
,
metricObj
)
=>
_
.
concat
(
result
,
metricObj
.
selectedMetric
),
[])
}
metricMap
=
{
this
.
props
.
metricMap
}
selectedMetric
=
{
_
.
get
(
graphConfig
.
metrics
,
'
[0].selectedMetric
'
)
}
/>
</
div
>
{
this
.
props
.
graphConfigInnerVisible
?
<
GraphConfigInner
isOrigin
=
{
isOrigin
}
data
=
{
graphConfig
}
onChange
=
{
onChange
}
/>
:
null
...
...
web/src/components/Graph/GraphConfig/GraphConfigForm.tsx
浏览文件 @
fc023fd8
...
...
@@ -160,7 +160,7 @@ export default class GraphConfigForm extends Component<Props, State> {
async
fetchEndpoints
(
metricObj
:
MetricInterface
)
{
try
{
const
endpoints
=
await
services
.
fetchEndPoints
(
metricObj
.
selectedNid
,
this
.
context
.
habitsId
);
const
endpoints
=
await
services
.
fetchEndPoints
(
metricObj
.
selectedNid
as
any
);
let
selectedEndpoint
=
metricObj
.
selectedEndpoint
||
[
'
=all
'
];
if
(
!
hasDtag
(
selectedEndpoint
))
{
selectedEndpoint
=
_
.
intersection
(
endpoints
,
metricObj
.
selectedEndpoint
);
...
...
@@ -214,8 +214,8 @@ export default class GraphConfigForm extends Component<Props, State> {
}
}
handleCommonFieldChange
=
(
changedObj
)
=>
{
const
newChangedObj
=
{};
handleCommonFieldChange
=
(
changedObj
:
any
)
=>
{
const
newChangedObj
:
any
=
{};
_
.
each
(
changedObj
,
(
val
,
key
)
=>
{
newChangedObj
[
key
]
=
{
$set
:
val
,
...
...
@@ -359,7 +359,7 @@ export default class GraphConfigForm extends Component<Props, State> {
}
}
handleTagkvChange
=
async
(
currentMetric
:
string
,
tagk
:
string
,
tagv
:
string
)
=>
{
handleTagkvChange
=
async
(
currentMetric
:
string
,
tagk
:
string
,
tagv
:
string
[]
)
=>
{
const
{
metrics
}
=
this
.
state
.
graphConfig
;
const
currentMetricObj
=
_
.
cloneDeep
(
_
.
find
(
metrics
,
{
selectedMetric
:
currentMetric
}));
const
currentMetricObjIndex
=
_
.
findIndex
(
metrics
,
{
selectedMetric
:
currentMetric
});
...
...
@@ -504,7 +504,7 @@ export default class GraphConfigForm extends Component<Props, State> {
}));
}
handleDateChange
=
(
key
:
string
,
d
:
moment
.
Moment
)
=>
{
handleDateChange
=
(
key
:
string
,
d
:
moment
.
Moment
|
null
)
=>
{
const
val
=
moment
.
isMoment
(
d
)
?
d
.
format
(
'
x
'
)
:
null
;
this
.
setState
(
update
(
this
.
state
,
{
graphConfig
:
{
...
...
@@ -860,7 +860,7 @@ export default class GraphConfigForm extends Component<Props, State> {
relativeTimeComparison
=
{
graphConfig
.
relativeTimeComparison
}
comparisonOptions
=
{
graphConfig
.
comparisonOptions
}
graphConfig
=
{
graphConfig
}
onChange
=
{
(
values
)
=>
{
onChange
=
{
(
values
:
any
)
=>
{
this
.
handleCommonFieldChange
({
start
:
values
.
start
,
end
:
values
.
end
,
...
...
web/src/components/Graph/GraphConfig/GraphConfigInner.tsx
浏览文件 @
fc023fd8
import
React
,
{
Component
}
from
'
react
'
;
import
{
FormattedMessage
}
from
'
react-intl
'
;
import
{
injectIntl
,
WrappedComponentProps
,
FormattedMessage
}
from
'
react-intl
'
;
import
update
from
'
react-addons-update
'
;
import
_
from
'
lodash
'
;
import
moment
from
'
moment
'
;
...
...
@@ -17,7 +17,7 @@ interface Props {
const
{
Option
}
=
Select
;
export
default
class
GraphConfigInner
extends
Component
<
Props
>
{
class
GraphConfigInner
extends
Component
<
Props
&
WrappedComponent
Props
>
{
refresh
=
()
=>
{
// TODO 如果用户选择的是 "自定义" 时间,然后再点击 "刷新" 按钮,这时候 end 就会被强制更新到 now 了,这块有待考虑下怎么处理
const
{
data
,
onChange
}
=
this
.
props
;
...
...
@@ -48,7 +48,7 @@ export default class GraphConfigInner extends Component<Props> {
});
}
dateChange
(
key
:
string
,
d
:
moment
.
Moment
)
{
dateChange
(
key
:
string
,
d
:
moment
.
Moment
|
null
)
{
const
{
data
,
onChange
}
=
this
.
props
;
let
{
start
,
end
}
=
data
;
...
...
@@ -209,12 +209,12 @@ export default class GraphConfigInner extends Component<Props> {
<
Select
size
=
"small"
style
=
{
{
width
:
70
}
}
value
=
{
<
FormattedMessage
id
=
{
timeLabel
}
/>
}
value
=
{
this
.
props
.
intl
.
formatMessage
({
id
:
timeLabel
})
}
onChange
=
{
this
.
timeOptionChange
}
>
{
_
.
map
(
config
.
time
,
(
o
)
=>
{
return
<
Option
key
=
{
o
.
value
}
value
=
{
o
.
value
}
>
<
FormattedMessage
id
=
{
o
.
label
}
/>
</
Option
>;
return
<
Option
key
=
{
o
.
value
}
value
=
{
o
.
value
}
>
{
this
.
props
.
intl
.
formatMessage
({
id
:
o
.
label
})
}
</
Option
>;
})
}
</
Select
>
...
...
@@ -329,3 +329,5 @@ export default class GraphConfigInner extends Component<Props> {
);
}
}
export
default
injectIntl
(
GraphConfigInner
);
web/src/components/Graph/util/getTooltipsContent.tsx
浏览文件 @
fc023fd8
...
...
@@ -8,11 +8,11 @@ interface ActiveTooltipData {
chartWidth
:
number
,
isComparison
:
boolean
,
points
:
PointInterface
[],
originalPoints
:
PointInterface
[],
sharedSortDirection
:
'
desc
'
|
'
asc
'
,
originalPoints
?
:
PointInterface
[],
sharedSortDirection
?
:
'
desc
'
|
'
asc
'
,
comparison
:
string
[],
relativeTimeComparison
:
boolean
,
timezoneOffset
:
string
|
number
,
relativeTimeComparison
?
:
boolean
,
timezoneOffset
?
:
string
|
number
,
}
const
fmt
=
'
YYYY-MM-DD HH:mm:ss
'
;
...
...
@@ -38,7 +38,7 @@ export default function getTooltipsContent(activeTooltipData: ActiveTooltipData)
return
`<div style="table-layout: fixed;max-width:
${
chartWidth
}
px;word-wrap: break-word;white-space: normal;">
${
tooltipContent
}
</div>`
;
}
function
singlePoint
(
pointData
=
{},
activeTooltipData
)
{
function
singlePoint
(
pointData
:
any
=
{},
activeTooltipData
:
any
)
{
const
{
color
,
filledNull
,
serieOptions
=
{},
timestamp
}
=
pointData
;
const
{
comparison
:
comparisons
,
isComparison
}
=
activeTooltipData
;
const
{
tags
}
=
serieOptions
;
...
...
web/src/components/Graph/util/hasDtag.tsx
浏览文件 @
fc023fd8
...
...
@@ -6,7 +6,7 @@ const DtagKws = ['=all', '=+', '=-'];
/**
* 是否包含动态tag
*/
export
default
function
hasDtag
(
data
:
TagkvInterface
[]
=
[])
{
export
default
function
hasDtag
(
data
:
(
TagkvInterface
|
string
)
[]
=
[])
{
return
_
.
some
(
data
,
(
item
)
=>
{
if
(
_
.
isObject
(
item
)
&&
_
.
isArray
(
item
.
tagv
))
{
return
_
.
some
(
item
.
tagv
,
(
subItem
)
=>
{
...
...
web/src/components/Layout/utils.tsx
浏览文件 @
fc023fd8
...
...
@@ -107,7 +107,7 @@ export function normalizeTreeData(data: TreeNode[]) {
return
treeData
;
}
export
function
renderTreeNodes
(
nodes
:
TreeNode
[])
{
export
function
renderTreeNodes
(
nodes
?
:
TreeNode
[])
{
return
_
.
map
(
nodes
,
(
node
)
=>
{
if
(
_
.
isArray
(
node
.
children
))
{
return
(
...
...
web/src/pages/Monitor/Dashboard/Graphs.tsx
浏览文件 @
fc023fd8
...
...
@@ -16,10 +16,6 @@ interface Props {
onGraphConfigSubmit
:
(
type
:
UpdateType
,
data
:
GraphData
,
id
:
GraphId
)
=>
void
,
}
Graph
.
setOptions
({
apiPrefix
:
''
,
});
export
default
class
Graphs
extends
Component
<
Props
>
{
graphConfigForm
:
any
;
static
defaultProps
=
{
...
...
web/src/pages/Monitor/Dashboard/MetricSelect.tsx
浏览文件 @
fc023fd8
...
...
@@ -9,7 +9,7 @@ import { prefixCls, metricMap, metricsMeta } from './config';
import
{
filterMetrics
,
matchMetrics
}
from
'
./utils
'
;
interface
Props
{
nid
:
number
,
nid
?
:
number
,
hosts
:
Hosts
,
selectedHosts
:
Hosts
,
metrics
:
string
[],
...
...
web/src/pages/Monitor/Dashboard/index.tsx
浏览文件 @
fc023fd8
...
...
@@ -120,7 +120,7 @@ class MonitorDashboard extends Component<Props & WrappedComponentProps, State> {
const
res
=
await
request
(
`
${
api
.
endpoint
}
?limit=1000`
);
hosts
=
_
.
map
(
res
.
list
,
'
ident
'
);
}
else
{
hosts
=
await
services
.
fetchEndPoints
(
nid
,
this
.
context
.
habitsId
);
hosts
=
await
services
.
fetchEndPoints
(
nid
);
}
this
.
setState
({
hostsLoading
:
false
});
}
catch
(
e
)
{
...
...
@@ -178,7 +178,7 @@ class MonitorDashboard extends Component<Props & WrappedComponentProps, State> {
}
}
handleGraphConfigSubmit
=
(
type
:
UpdateType
,
data
:
GraphData
,
id
:
GraphId
)
=>
{
handleGraphConfigSubmit
=
(
type
:
UpdateType
,
data
:
GraphData
,
id
?
:
GraphId
)
=>
{
const
{
graphs
}
=
this
.
state
;
const
graphsClone
=
_
.
cloneDeep
(
graphs
);
const
ldata
=
_
.
cloneDeep
(
data
)
||
{};
...
...
@@ -204,7 +204,7 @@ class MonitorDashboard extends Component<Props & WrappedComponentProps, State> {
}],
}),
});
}
else
if
(
type
===
'
update
'
)
{
}
else
if
(
type
===
'
update
'
&&
id
)
{
this
.
handleUpdateGraph
(
'
update
'
,
id
,
{
...
ldata
,
});
...
...
@@ -330,14 +330,12 @@ class MonitorDashboard extends Component<Props & WrappedComponentProps, State> {
</
Col
>
<
Col
span
=
{
12
}
>
<
MetricSelect
ref
=
{
(
ref
)
=>
{
this
.
metricSelect
=
ref
;
}
}
nid
=
{
_
.
get
(
selectedTreeNode
,
'
id
'
)
}
loading
=
{
metricsLoading
}
hosts
=
{
hosts
}
selectedHosts
=
{
selectedHosts
}
metrics
=
{
metrics
}
graphs
=
{
graphs
}
globalOptions
=
{
globalOptions
}
onSelect
=
{
(
data
)
=>
{
this
.
handleGraphConfigSubmit
(
'
unshift
'
,
data
);
}
}
...
...
@@ -351,10 +349,9 @@ class MonitorDashboard extends Component<Props & WrappedComponentProps, State> {
onChange
=
{
(
obj
)
=>
{
this
.
setState
({
globalOptions
:
{
// eslint-disable-next-line react/no-access-state-in-setstate
...
this
.
state
.
globalOptions
,
...
obj
,
},
}
as
any
,
},
()
=>
{
this
.
handleBatchUpdateGraphs
(
obj
);
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录