Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
李少辉-开发者
gitlab-foss
提交
d377aa54
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,发现更多精彩内容 >>
提交
d377aa54
编写于
12月 04, 2017
作者:
J
Jose Ivan Vargas
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Changed the deploy markers on the prometheus dashboard to be more verbose
上级
1c02af27
变更
12
隐藏空白更改
内联
并排
Showing
12 changed file
with
191 addition
and
38 deletion
+191
-38
app/assets/javascripts/monitoring/components/dashboard.vue
app/assets/javascripts/monitoring/components/dashboard.vue
+4
-0
app/assets/javascripts/monitoring/components/graph.vue
app/assets/javascripts/monitoring/components/graph.vue
+16
-8
app/assets/javascripts/monitoring/components/graph/deployment.vue
...ts/javascripts/monitoring/components/graph/deployment.vue
+69
-24
app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
...assets/javascripts/monitoring/mixins/monitoring_mixins.js
+2
-0
app/assets/javascripts/monitoring/utils/date_time_formatters.js
...sets/javascripts/monitoring/utils/date_time_formatters.js
+1
-0
app/assets/javascripts/vue_shared/components/icon.vue
app/assets/javascripts/vue_shared/components/icon.vue
+29
-1
app/assets/stylesheets/pages/environments.scss
app/assets/stylesheets/pages/environments.scss
+17
-2
app/views/projects/environments/metrics.html.haml
app/views/projects/environments/metrics.html.haml
+2
-0
changelogs/unreleased/38032-deploy-markers-should-be-more-verbose.yml
...nreleased/38032-deploy-markers-should-be-more-verbose.yml
+5
-0
spec/javascripts/monitoring/graph/deployment_spec.js
spec/javascripts/monitoring/graph/deployment_spec.js
+26
-3
spec/javascripts/monitoring/graph_spec.js
spec/javascripts/monitoring/graph_spec.js
+14
-0
spec/javascripts/monitoring/mock_data.js
spec/javascripts/monitoring/mock_data.js
+6
-0
未找到文件。
app/assets/javascripts/monitoring/components/dashboard.vue
浏览文件 @
d377aa54
...
...
@@ -21,6 +21,8 @@
hasMetrics
:
convertPermissionToBoolean
(
metricsData
.
hasMetrics
),
documentationPath
:
metricsData
.
documentationPath
,
settingsPath
:
metricsData
.
settingsPath
,
tagsPath
:
metricsData
.
tagsPath
,
projectPath
:
metricsData
.
projectPath
,
metricsEndpoint
:
metricsData
.
additionalMetrics
,
deploymentEndpoint
:
metricsData
.
deploymentEndpoint
,
emptyGettingStartedSvgPath
:
metricsData
.
emptyGettingStartedSvgPath
,
...
...
@@ -112,6 +114,8 @@
:hover-data=
"hoverData"
:update-aspect-ratio=
"updateAspectRatio"
:deployment-data=
"store.deploymentData"
:project-path=
"projectPath"
:tags-path=
"tagsPath"
/>
</graph-group>
</div>
...
...
app/assets/javascripts/monitoring/components/graph.vue
浏览文件 @
d377aa54
...
...
@@ -30,6 +30,14 @@
required
:
false
,
default
:
()
=>
({}),
},
projectPath
:
{
type
:
String
,
required
:
true
,
},
tagsPath
:
{
type
:
String
,
required
:
true
,
},
},
mixins
:
[
MonitoringMixin
],
...
...
@@ -251,6 +259,14 @@
:line-color=
"path.lineColor"
:area-color=
"path.areaColor"
/>
<rect
class=
"prometheus-graph-overlay"
:width=
"(graphWidth - 70)"
:height=
"(graphHeight - 100)"
transform=
"translate(-5, 20)"
ref=
"graphOverlay"
@
mousemove=
"handleMouseOverGraph($event)"
>
</rect>
<graph-deployment
:show-deploy-info=
"showDeployInfo"
:deployment-data=
"reducedDeploymentData"
...
...
@@ -267,14 +283,6 @@
:graph-height-offset=
"graphHeightOffset"
:show-flag-content=
"showFlagContent"
/>
<rect
class=
"prometheus-graph-overlay"
:width=
"(graphWidth - 70)"
:height=
"(graphHeight - 100)"
transform=
"translate(-5, 20)"
ref=
"graphOverlay"
@
mousemove=
"handleMouseOverGraph($event)"
>
</rect>
</svg>
</svg>
</div>
...
...
app/assets/javascripts/monitoring/components/graph/deployment.vue
浏览文件 @
d377aa54
<
script
>
import
{
dateFormat
,
timeFormat
}
from
'
../../utils/date_time_formatters
'
;
import
{
dateFormatWithName
,
timeFormat
}
from
'
../../utils/date_time_formatters
'
;
import
Icon
from
'
../../../vue_shared/components/icon.vue
'
;
export
default
{
props
:
{
...
...
@@ -25,6 +26,10 @@
},
},
components
:
{
Icon
,
},
computed
:
{
calculatedHeight
()
{
return
this
.
graphHeight
-
this
.
graphHeightOffset
;
...
...
@@ -33,7 +38,7 @@
methods
:
{
refText
(
d
)
{
return
d
.
tag
?
d
.
ref
:
d
.
sha
.
slice
(
0
,
6
);
return
d
.
tag
?
d
.
ref
:
d
.
sha
.
slice
(
0
,
8
);
},
formatTime
(
deploymentTime
)
{
...
...
@@ -41,7 +46,7 @@
},
formatDate
(
deploymentTime
)
{
return
dateFormat
(
deploymentTime
);
return
dateFormat
WithName
(
deploymentTime
);
},
nameDeploymentClass
(
deployment
)
{
...
...
@@ -54,8 +59,8 @@
positionFlag
(
deployment
)
{
let
xPosition
=
3
;
if
(
deployment
.
xPos
>
(
this
.
graphWidth
-
2
00
))
{
xPosition
=
-
97
;
if
(
deployment
.
xPos
>
(
this
.
graphWidth
-
2
25
))
{
xPosition
=
-
142
;
}
return
xPosition
;
},
...
...
@@ -91,35 +96,75 @@
class=
"js-deploy-info-box"
:x=
"positionFlag(deployment)"
y=
"0"
width=
"
92
"
height=
"
6
0"
>
width=
"
134
"
height=
"
8
0"
>
<rect
class=
"rect-text-metric deploy-info-rect rect-metric"
x=
"1"
y=
"1"
rx=
"2"
width=
"
90
"
height=
"
5
8"
>
width=
"
132
"
height=
"
7
8"
>
</rect>
<g
transform=
"translate(5, 2)"
>
<text
class=
"deploy-info-text text-metric-bold"
>
{{
refText
(
deployment
)
}}
</text>
</g>
<text
class=
"deploy-info-text"
y=
"18"
transform=
"translate(5, 2)"
>
{{
formatDate
(
deployment
.
time
)
}}
</text>
<text
class=
"deploy-info-text text-metric-bold"
y=
"38"
transform=
"translate(5, 2)"
>
{{
formatTime
(
deployment
.
time
)
}}
Deployed
</text>
<!--The date info-->
<g
transform=
"translate(5, 20)"
>
<text
class=
"deploy-info-text"
>
{{
formatDate
(
deployment
.
time
)
}}
</text>
<text
class=
"deploy-info-text text-metric-bold"
x=
"62"
>
{{
formatTime
(
deployment
.
time
)
}}
</text>
</g>
<line
class=
"divider-line"
x1=
"0"
y1=
"38"
x2=
"132"
:y2=
"38"
stroke=
"#000"
>
</line>
<!--Commit information-->
<g
transform=
"translate(5, 40)"
>
<icon
name=
"commit"
:width=
"12"
:height=
"12"
:y=
"5"
>
</icon>
<a
:xlink:href=
"deployment.commitUrl"
>
<text
class=
"deploy-info-text deploy-info-text-link"
transform=
"translate(20, 2)"
>
{{
refText
(
deployment
)
}}
</text>
</a>
</g>
<!--Tag information-->
<g
transform=
"translate(5, 55)"
v-if=
"deployment.tag"
>
<icon
name=
"label"
:width=
"12"
:height=
"12"
:y=
"5"
>
</icon>
<a
:xlink:href=
"deployment.tagUrl"
>
<text
class=
"deploy-info-text deploy-info-text-link"
transform=
"translate(20, 2)"
y=
"2"
>
{{
deployment
.
tag
}}
</text>
</a>
</g>
</svg>
</g>
<svg
...
...
app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
浏览文件 @
d377aa54
...
...
@@ -33,7 +33,9 @@ const mixins = {
id
:
deployment
.
id
,
time
,
sha
:
deployment
.
sha
,
commitUrl
:
`
${
this
.
projectPath
}
/commit/
${
deployment
.
sha
}
`
,
tag
:
deployment
.
tag
,
tagUrl
:
`
${
this
.
tagsPath
}
/
${
deployment
.
tag
}
`
,
ref
:
deployment
.
ref
.
name
,
xPos
,
showDeploymentFlag
:
false
,
...
...
app/assets/javascripts/monitoring/utils/date_time_formatters.js
浏览文件 @
d377aa54
import
d3
from
'
d3
'
;
export
const
dateFormat
=
d3
.
time
.
format
(
'
%b %-d, %Y
'
);
export
const
dateFormatWithName
=
d3
.
time
.
format
(
'
%a, %b %-d
'
);
export
const
timeFormat
=
d3
.
time
.
format
(
'
%-I:%M%p
'
);
export
const
bisectDate
=
d3
.
bisector
(
d
=>
d
.
time
).
left
;
...
...
app/assets/javascripts/vue_shared/components/icon.vue
浏览文件 @
d377aa54
...
...
@@ -36,6 +36,30 @@
required
:
false
,
default
:
''
,
},
width
:
{
type
:
Number
,
required
:
false
,
default
:
null
,
},
height
:
{
type
:
Number
,
required
:
false
,
default
:
null
,
},
y
:
{
type
:
Number
,
required
:
false
,
default
:
null
,
},
x
:
{
type
:
Number
,
required
:
false
,
default
:
null
,
},
},
computed
:
{
...
...
@@ -51,7 +75,11 @@
<
template
>
<svg
:class=
"[iconSizeClass, cssClasses]"
>
:class=
"[iconSizeClass, cssClasses]"
:width=
"width"
:height=
"height"
:x=
"x"
:y=
"y"
>
<use
v-bind=
"
{'xlink:href':spriteHref}"/>
</svg>
...
...
app/assets/stylesheets/pages/environments.scss
浏览文件 @
d377aa54
...
...
@@ -201,8 +201,9 @@
stroke-width
:
1
;
}
.deploy-info-text
{
dominant-baseline
:
text-before-edge
;
.divider-line
{
stroke-width
:
1
;
stroke
:
$gray-darkest
;
}
.prometheus-state
{
...
...
@@ -312,6 +313,20 @@
stroke
:
$gray-darker
;
}
.deploy-info-text
{
dominant-baseline
:
text-before-edge
;
font-size
:
12px
;
}
.deploy-info-text-link
{
font-family
:
$monospace_font
;
fill
:
$gl-link-color
;
&
:hover
{
fill
:
$gl-link-hover-color
;
}
}
@media
(
max-width
:
$screen-sm-max
)
{
.label-axis-text
,
.text-metric-usage
,
...
...
app/views/projects/environments/metrics.html.haml
浏览文件 @
d377aa54
...
...
@@ -19,4 +19,6 @@
"empty-loading-svg-path"
:
image_path
(
'illustrations/monitoring/loading'
),
"empty-unable-to-connect-svg-path"
:
image_path
(
'illustrations/monitoring/unable_to_connect'
),
"additional-metrics"
:
additional_metrics_project_environment_path
(
@project
,
@environment
,
format: :json
),
"project-path"
:
project_path
(
@project
),
"tags-path"
:
project_tags_path
(
@project
),
"has-metrics"
:
"#{@environment.has_metrics?}"
,
deployment_endpoint:
project_environment_deployments_path
(
@project
,
@environment
,
format: :json
)
}
}
changelogs/unreleased/38032-deploy-markers-should-be-more-verbose.yml
0 → 100644
浏览文件 @
d377aa54
---
title
:
Changed the deploy markers on the prometheus dashboard to be more verbose
merge_request
:
38032
author
:
type
:
changed
spec/javascripts/monitoring/graph/deployment_spec.js
浏览文件 @
d377aa54
...
...
@@ -118,7 +118,7 @@ describe('MonitoringDeployment', () => {
).
not
.
toEqual
(
'
display: none;
'
);
});
it
(
'
shows the refText inside a text element with the deploy-info-text class
'
,
()
=>
{
it
(
'
contains date, refs and the "deployed" text
'
,
()
=>
{
reducedDeploymentData
[
0
].
showDeploymentFlag
=
true
;
const
component
=
createComponent
({
showDeployInfo
:
true
,
...
...
@@ -129,8 +129,31 @@ describe('MonitoringDeployment', () => {
});
expect
(
component
.
$el
.
querySelector
(
'
.deploy-info-text
'
).
firstChild
.
nodeValue
.
trim
(),
).
toEqual
(
component
.
refText
(
reducedDeploymentData
[
0
]));
component
.
$el
.
querySelectorAll
(
'
.deploy-info-text
'
),
).
toContainText
(
'
Deployed
'
);
expect
(
component
.
$el
.
querySelectorAll
(
'
.deploy-info-text
'
),
).
toContainText
(
'
Wed, May 31
'
);
expect
(
component
.
$el
.
querySelectorAll
(
'
.deploy-info-text
'
),
).
toContainText
(
component
.
refText
(
reducedDeploymentData
[
0
]));
});
it
(
'
contains a link to the commit contents
'
,
()
=>
{
reducedDeploymentData
[
0
].
showDeploymentFlag
=
true
;
const
component
=
createComponent
({
showDeployInfo
:
true
,
deploymentData
:
reducedDeploymentData
,
graphHeight
:
300
,
graphWidth
:
440
,
graphHeightOffset
:
120
,
});
expect
(
component
.
$el
.
querySelectorAll
(
'
.deploy-info-text-link
'
)[
0
].
parentElement
.
getAttribute
(
'
xlink:href
'
),
).
not
.
toEqual
(
''
);
});
it
(
'
should contain a hidden gradient
'
,
()
=>
{
...
...
spec/javascripts/monitoring/graph_spec.js
浏览文件 @
d377aa54
...
...
@@ -4,6 +4,8 @@ import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
import
eventHub
from
'
~/monitoring/event_hub
'
;
import
{
deploymentData
,
convertDatesMultipleSeries
,
singleRowMetricsMultipleSeries
}
from
'
./mock_data
'
;
const
tagsPath
=
'
http://test.host/frontend-fixtures/environments-project/tags
'
;
const
projectPath
=
'
http://test.host/frontend-fixtures/environments-project
'
;
const
createComponent
=
(
propsData
)
=>
{
const
Component
=
Vue
.
extend
(
Graph
);
...
...
@@ -25,6 +27,8 @@ describe('Graph', () => {
classType
:
'
col-md-6
'
,
updateAspectRatio
:
false
,
deploymentData
,
tagsPath
,
projectPath
,
});
expect
(
component
.
$el
.
querySelector
(
'
.text-center
'
).
innerText
.
trim
()).
toBe
(
component
.
graphData
.
title
);
...
...
@@ -37,6 +41,8 @@ describe('Graph', () => {
classType
:
'
col-md-6
'
,
updateAspectRatio
:
false
,
deploymentData
,
tagsPath
,
projectPath
,
});
const
transformedHeight
=
`
${
component
.
graphHeight
-
100
}
`
;
...
...
@@ -50,6 +56,8 @@ describe('Graph', () => {
classType
:
'
col-md-6
'
,
updateAspectRatio
:
false
,
deploymentData
,
tagsPath
,
projectPath
,
});
const
viewBoxArray
=
component
.
outerViewBox
.
split
(
'
'
);
...
...
@@ -65,6 +73,8 @@ describe('Graph', () => {
classType
:
'
col-md-6
'
,
updateAspectRatio
:
false
,
deploymentData
,
tagsPath
,
projectPath
,
});
spyOn
(
eventHub
,
'
$emit
'
);
...
...
@@ -81,6 +91,8 @@ describe('Graph', () => {
classType
:
'
col-md-6
'
,
updateAspectRatio
:
false
,
deploymentData
,
tagsPath
,
projectPath
,
});
expect
(
component
.
yAxisLabel
).
toEqual
(
component
.
graphData
.
y_label
);
...
...
@@ -98,6 +110,8 @@ describe('Graph', () => {
hoveredDate
:
new
Date
(
'
Sun Aug 27 2017 06:11:51 GMT-0500 (CDT)
'
),
currentDeployXPos
:
null
,
},
tagsPath
,
projectPath
,
});
component
.
positionFlag
();
...
...
spec/javascripts/monitoring/mock_data.js
浏览文件 @
d377aa54
...
...
@@ -2430,33 +2430,39 @@ export const deploymentData = [
id
:
111
,
iid
:
3
,
sha
:
'
f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187
'
,
commitUrl
:
'
http://test.host/frontend-fixtures/environments-project/commit/f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187
'
,
ref
:
{
name
:
'
master
'
},
created_at
:
'
2017-05-31T21:23:37.881Z
'
,
tag
:
false
,
tagUrl
:
'
http://test.host/frontend-fixtures/environments-project/tags/false
'
,
'
last?
'
:
true
},
{
id
:
110
,
iid
:
2
,
sha
:
'
f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187
'
,
commitUrl
:
'
http://test.host/frontend-fixtures/environments-project/commit/f5bcd1d9dac6fa4137e2510b9ccd134ef2e84187
'
,
ref
:
{
name
:
'
master
'
},
created_at
:
'
2017-05-30T20:08:04.629Z
'
,
tag
:
false
,
tagUrl
:
'
http://test.host/frontend-fixtures/environments-project/tags/false
'
,
'
last?
'
:
false
},
{
id
:
109
,
iid
:
1
,
sha
:
'
6511e58faafaa7ad2228990ec57f19d66f7db7c2
'
,
commitUrl
:
'
http://test.host/frontend-fixtures/environments-project/commit/6511e58faafaa7ad2228990ec57f19d66f7db7c2
'
,
ref
:
{
name
:
'
update2-readme
'
},
created_at
:
'
2017-05-30T17:42:38.409Z
'
,
tag
:
false
,
tagUrl
:
'
http://test.host/frontend-fixtures/environments-project/tags/false
'
,
'
last?
'
:
false
}
];
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录