Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
deb6b429
G
gitlab-foss
项目概览
李少辉-开发者
/
gitlab-foss
通知
15
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gitlab-foss
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
deb6b429
编写于
10月 05, 2018
作者:
S
Simon Knox
提交者:
Mike Greiling
10月 05, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Backport changes from gitlab-ee!7538
上级
aea6b468
变更
9
隐藏空白更改
内联
并排
Showing
9 changed file
with
102 addition
and
59 deletion
+102
-59
app/assets/javascripts/monitoring/components/graph.vue
app/assets/javascripts/monitoring/components/graph.vue
+7
-2
app/assets/javascripts/monitoring/utils/multiple_time_series.js
...sets/javascripts/monitoring/utils/multiple_time_series.js
+69
-34
spec/javascripts/monitoring/dashboard_spec.js
spec/javascripts/monitoring/dashboard_spec.js
+20
-18
spec/javascripts/monitoring/graph/legend_spec.js
spec/javascripts/monitoring/graph/legend_spec.js
+1
-1
spec/javascripts/monitoring/graph/track_info_spec.js
spec/javascripts/monitoring/graph/track_info_spec.js
+1
-1
spec/javascripts/monitoring/graph/track_line_spec.js
spec/javascripts/monitoring/graph/track_line_spec.js
+1
-1
spec/javascripts/monitoring/graph_path_spec.js
spec/javascripts/monitoring/graph_path_spec.js
+1
-1
spec/javascripts/monitoring/mock_data.js
spec/javascripts/monitoring/mock_data.js
+1
-0
spec/javascripts/monitoring/utils/multiple_time_series_spec.js
...javascripts/monitoring/utils/multiple_time_series_spec.js
+1
-1
未找到文件。
app/assets/javascripts/monitoring/components/graph.vue
浏览文件 @
deb6b429
...
...
@@ -82,6 +82,7 @@ export default {
showFlag
:
false
,
showFlagContent
:
false
,
timeSeries
:
[],
graphDrawData
:
{},
realPixelRatio
:
1
,
seriesUnderMouse
:
[],
};
...
...
@@ -180,12 +181,12 @@ export default {
});
},
renderAxesPaths
()
{
this
.
timeSeries
=
createTimeSeries
(
({
timeSeries
:
this
.
timeSeries
,
graphDrawData
:
this
.
graphDrawData
}
=
createTimeSeries
(
this
.
graphData
.
queries
,
this
.
graphWidth
,
this
.
graphHeight
,
this
.
graphHeightOffset
,
);
)
)
;
if
(
_
.
findWhere
(
this
.
timeSeries
,
{
renderCanary
:
true
}))
{
this
.
timeSeries
=
this
.
timeSeries
.
map
(
series
=>
({
...
series
,
renderCanary
:
true
}));
...
...
@@ -288,6 +289,10 @@ export default {
:viewBox=
"innerViewBox"
class=
"graph-data"
>
<slot
name=
"additionalSvgContent"
:graphDrawData=
"graphDrawData"
/>
<graph-path
v-for=
"(path, index) in timeSeries"
:key=
"index"
...
...
app/assets/javascripts/monitoring/utils/multiple_time_series.js
浏览文件 @
deb6b429
...
...
@@ -30,7 +30,7 @@ const defaultColorOrder = ['blue', 'orange', 'red', 'green', 'purple'];
const
defaultStyleOrder
=
[
'
solid
'
,
'
dashed
'
,
'
dotted
'
];
function
queryTimeSeries
(
query
,
graph
Width
,
graphHeight
,
graphHeightOffset
,
xDom
,
yDom
,
lineStyle
)
{
function
queryTimeSeries
(
query
,
graph
DrawData
,
lineStyle
)
{
let
usedColors
=
[];
let
renderCanary
=
false
;
const
timeSeriesParsed
=
[];
...
...
@@ -64,7 +64,7 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
// but we need a regularly-spaced set of time/value pairs
// this gives us a complete range of one minute intervals
// offset the same amount as the original data
const
[
minX
,
maxX
]
=
xDom
;
const
[
minX
,
maxX
]
=
graphDrawData
.
xDom
;
const
offset
=
d3
.
timeMinute
(
minX
)
-
Number
(
minX
);
const
datesWithoutGaps
=
d3
.
timeSecond
.
every
(
60
)
.
range
(
d3
.
timeMinute
.
offset
(
minX
,
-
1
),
maxX
)
...
...
@@ -84,31 +84,6 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
renderCanary
=
true
;
}
const
timeSeriesScaleX
=
d3
.
scaleTime
().
range
([
0
,
graphWidth
-
70
]);
const
timeSeriesScaleY
=
d3
.
scaleLinear
().
range
([
graphHeight
-
graphHeightOffset
,
0
]);
timeSeriesScaleX
.
domain
(
xDom
);
timeSeriesScaleX
.
ticks
(
d3
.
timeMinute
,
60
);
timeSeriesScaleY
.
domain
(
yDom
);
const
defined
=
d
=>
!
Number
.
isNaN
(
d
.
value
)
&&
d
.
value
!=
null
;
const
lineFunction
=
d3
.
line
()
.
defined
(
defined
)
.
curve
(
d3
.
curveLinear
)
// d3 v4 uses curbe instead of interpolate
.
x
(
d
=>
timeSeriesScaleX
(
d
.
time
))
.
y
(
d
=>
timeSeriesScaleY
(
d
.
value
));
const
areaFunction
=
d3
.
area
()
.
defined
(
defined
)
.
curve
(
d3
.
curveLinear
)
.
x
(
d
=>
timeSeriesScaleX
(
d
.
time
))
.
y0
(
graphHeight
-
graphHeightOffset
)
.
y1
(
d
=>
timeSeriesScaleY
(
d
.
value
));
const
timeSeriesMetricLabel
=
timeSeries
.
metric
[
Object
.
keys
(
timeSeries
.
metric
)[
0
]];
const
seriesCustomizationData
=
query
.
series
!=
null
&&
_
.
findWhere
(
query
.
series
[
0
].
when
,
{
value
:
timeSeriesMetricLabel
});
...
...
@@ -144,10 +119,10 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
}));
timeSeriesParsed
.
push
({
linePath
:
lineFunction
(
values
),
areaPath
:
areaFunction
(
values
),
timeSeriesScaleX
,
timeSeriesScaleY
,
linePath
:
graphDrawData
.
lineFunction
(
values
),
areaPath
:
graphDrawData
.
areaBelowLine
(
values
),
timeSeriesScaleX
:
graphDrawData
.
timeSeriesScaleX
,
timeSeriesScaleY
:
graphDrawData
.
timeSeriesScaleY
,
values
:
timeSeries
.
values
,
max
:
maximumValue
,
average
:
accum
/
timeSeries
.
values
.
length
,
...
...
@@ -164,7 +139,7 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
return
timeSeriesParsed
;
}
export
default
function
createTimeSeries
(
queries
,
graphWidth
,
graphHeight
,
graphHeightOffset
)
{
function
xyDomain
(
queries
)
{
const
allValues
=
queries
.
reduce
(
(
allQueryResults
,
query
)
=>
allQueryResults
.
concat
(
...
...
@@ -176,10 +151,70 @@ export default function createTimeSeries(queries, graphWidth, graphHeight, graph
const
xDom
=
d3
.
extent
(
allValues
,
d
=>
d
.
time
);
const
yDom
=
[
0
,
d3
.
max
(
allValues
.
map
(
d
=>
d
.
value
))];
return
queries
.
reduce
((
series
,
query
,
index
)
=>
{
return
{
xDom
,
yDom
,
};
}
export
function
generateGraphDrawData
(
queries
,
graphWidth
,
graphHeight
,
graphHeightOffset
)
{
const
{
xDom
,
yDom
}
=
xyDomain
(
queries
);
const
timeSeriesScaleX
=
d3
.
scaleTime
().
range
([
0
,
graphWidth
-
70
]);
const
timeSeriesScaleY
=
d3
.
scaleLinear
().
range
([
graphHeight
-
graphHeightOffset
,
0
]);
timeSeriesScaleX
.
domain
(
xDom
);
timeSeriesScaleX
.
ticks
(
d3
.
timeMinute
,
60
);
timeSeriesScaleY
.
domain
(
yDom
);
const
defined
=
d
=>
!
Number
.
isNaN
(
d
.
value
)
&&
d
.
value
!=
null
;
const
lineFunction
=
d3
.
line
()
.
defined
(
defined
)
.
curve
(
d3
.
curveLinear
)
// d3 v4 uses curbe instead of interpolate
.
x
(
d
=>
timeSeriesScaleX
(
d
.
time
))
.
y
(
d
=>
timeSeriesScaleY
(
d
.
value
));
const
areaBelowLine
=
d3
.
area
()
.
defined
(
defined
)
.
curve
(
d3
.
curveLinear
)
.
x
(
d
=>
timeSeriesScaleX
(
d
.
time
))
.
y0
(
graphHeight
-
graphHeightOffset
)
.
y1
(
d
=>
timeSeriesScaleY
(
d
.
value
));
const
areaAboveLine
=
d3
.
area
()
.
defined
(
defined
)
.
curve
(
d3
.
curveLinear
)
.
x
(
d
=>
timeSeriesScaleX
(
d
.
time
))
.
y0
(
0
)
.
y1
(
d
=>
timeSeriesScaleY
(
d
.
value
));
return
{
lineFunction
,
areaBelowLine
,
areaAboveLine
,
xDom
,
yDom
,
timeSeriesScaleX
,
timeSeriesScaleY
,
};
}
export
default
function
createTimeSeries
(
queries
,
graphWidth
,
graphHeight
,
graphHeightOffset
)
{
const
graphDrawData
=
generateGraphDrawData
(
queries
,
graphWidth
,
graphHeight
,
graphHeightOffset
);
const
timeSeries
=
queries
.
reduce
((
series
,
query
,
index
)
=>
{
const
lineStyle
=
defaultStyleOrder
[
index
%
defaultStyleOrder
.
length
];
return
series
.
concat
(
queryTimeSeries
(
query
,
graph
Width
,
graphHeight
,
graphHeightOffset
,
xDom
,
yDom
,
lineStyle
),
queryTimeSeries
(
query
,
graph
DrawData
,
lineStyle
),
);
},
[]);
return
{
timeSeries
,
graphDrawData
,
};
}
spec/javascripts/monitoring/dashboard_spec.js
浏览文件 @
deb6b429
...
...
@@ -4,30 +4,32 @@ import Dashboard from '~/monitoring/components/dashboard.vue';
import
axios
from
'
~/lib/utils/axios_utils
'
;
import
{
metricsGroupsAPIResponse
,
mockApiEndpoint
,
environmentData
}
from
'
./mock_data
'
;
const
propsData
=
{
hasMetrics
:
false
,
documentationPath
:
'
/path/to/docs
'
,
settingsPath
:
'
/path/to/settings
'
,
clustersPath
:
'
/path/to/clusters
'
,
tagsPath
:
'
/path/to/tags
'
,
projectPath
:
'
/path/to/project
'
,
metricsEndpoint
:
mockApiEndpoint
,
deploymentEndpoint
:
null
,
emptyGettingStartedSvgPath
:
'
/path/to/getting-started.svg
'
,
emptyLoadingSvgPath
:
'
/path/to/loading.svg
'
,
emptyNoDataSvgPath
:
'
/path/to/no-data.svg
'
,
emptyUnableToConnectSvgPath
:
'
/path/to/unable-to-connect.svg
'
,
environmentsEndpoint
:
'
/root/hello-prometheus/environments/35
'
,
currentEnvironmentName
:
'
production
'
,
};
export
default
propsData
;
describe
(
'
Dashboard
'
,
()
=>
{
let
DashboardComponent
;
const
propsData
=
{
hasMetrics
:
false
,
documentationPath
:
'
/path/to/docs
'
,
settingsPath
:
'
/path/to/settings
'
,
clustersPath
:
'
/path/to/clusters
'
,
tagsPath
:
'
/path/to/tags
'
,
projectPath
:
'
/path/to/project
'
,
metricsEndpoint
:
mockApiEndpoint
,
deploymentEndpoint
:
null
,
emptyGettingStartedSvgPath
:
'
/path/to/getting-started.svg
'
,
emptyLoadingSvgPath
:
'
/path/to/loading.svg
'
,
emptyNoDataSvgPath
:
'
/path/to/no-data.svg
'
,
emptyUnableToConnectSvgPath
:
'
/path/to/unable-to-connect.svg
'
,
environmentsEndpoint
:
'
/root/hello-prometheus/environments/35
'
,
currentEnvironmentName
:
'
production
'
,
};
beforeEach
(()
=>
{
setFixtures
(
`
<div class="prometheus-graphs"></div>
<div class="nav-sidebar"></div>
<div class="nav-sidebar"></div>
`
);
DashboardComponent
=
Vue
.
extend
(
Dashboard
);
});
...
...
spec/javascripts/monitoring/graph/legend_spec.js
浏览文件 @
deb6b429
...
...
@@ -8,7 +8,7 @@ const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeri
const
defaultValuesComponent
=
{};
const
timeSeries
=
createTimeSeries
(
convertedMetrics
[
0
].
queries
,
500
,
300
,
120
);
const
{
timeSeries
}
=
createTimeSeries
(
convertedMetrics
[
0
].
queries
,
500
,
300
,
120
);
defaultValuesComponent
.
timeSeries
=
timeSeries
;
...
...
spec/javascripts/monitoring/graph/track_info_spec.js
浏览文件 @
deb6b429
...
...
@@ -5,7 +5,7 @@ import createTimeSeries from '~/monitoring/utils/multiple_time_series';
import
{
singleRowMetricsMultipleSeries
,
convertDatesMultipleSeries
}
from
'
../mock_data
'
;
const
convertedMetrics
=
convertDatesMultipleSeries
(
singleRowMetricsMultipleSeries
);
const
timeSeries
=
createTimeSeries
(
convertedMetrics
[
0
].
queries
,
500
,
300
,
120
);
const
{
timeSeries
}
=
createTimeSeries
(
convertedMetrics
[
0
].
queries
,
500
,
300
,
120
);
describe
(
'
TrackInfo component
'
,
()
=>
{
let
vm
;
...
...
spec/javascripts/monitoring/graph/track_line_spec.js
浏览文件 @
deb6b429
...
...
@@ -5,7 +5,7 @@ import createTimeSeries from '~/monitoring/utils/multiple_time_series';
import
{
singleRowMetricsMultipleSeries
,
convertDatesMultipleSeries
}
from
'
../mock_data
'
;
const
convertedMetrics
=
convertDatesMultipleSeries
(
singleRowMetricsMultipleSeries
);
const
timeSeries
=
createTimeSeries
(
convertedMetrics
[
0
].
queries
,
500
,
300
,
120
);
const
{
timeSeries
}
=
createTimeSeries
(
convertedMetrics
[
0
].
queries
,
500
,
300
,
120
);
describe
(
'
TrackLine component
'
,
()
=>
{
let
vm
;
...
...
spec/javascripts/monitoring/graph_path_spec.js
浏览文件 @
deb6b429
...
...
@@ -13,7 +13,7 @@ const createComponent = (propsData) => {
const
convertedMetrics
=
convertDatesMultipleSeries
(
singleRowMetricsMultipleSeries
);
const
timeSeries
=
createTimeSeries
(
convertedMetrics
[
0
].
queries
,
428
,
272
,
120
);
const
{
timeSeries
}
=
createTimeSeries
(
convertedMetrics
[
0
].
queries
,
428
,
272
,
120
);
const
firstTimeSeries
=
timeSeries
[
0
];
describe
(
'
Monitoring Paths
'
,
()
=>
{
...
...
spec/javascripts/monitoring/mock_data.js
浏览文件 @
deb6b429
...
...
@@ -8,6 +8,7 @@ export const metricsGroupsAPIResponse = {
priority
:
1
,
metrics
:
[
{
id
:
5
,
title
:
'
Memory usage
'
,
weight
:
1
,
queries
:
[
...
...
spec/javascripts/monitoring/utils/multiple_time_series_spec.js
浏览文件 @
deb6b429
...
...
@@ -2,7 +2,7 @@ import createTimeSeries from '~/monitoring/utils/multiple_time_series';
import
{
convertDatesMultipleSeries
,
singleRowMetricsMultipleSeries
}
from
'
../mock_data
'
;
const
convertedMetrics
=
convertDatesMultipleSeries
(
singleRowMetricsMultipleSeries
);
const
timeSeries
=
createTimeSeries
(
convertedMetrics
[
0
].
queries
,
428
,
272
,
120
);
const
{
timeSeries
}
=
createTimeSeries
(
convertedMetrics
[
0
].
queries
,
428
,
272
,
120
);
const
firstTimeSeries
=
timeSeries
[
0
];
describe
(
'
Multiple time series
'
,
()
=>
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录