BigW Consortium Gitlab
Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
G
gitlab-ce
Project
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
Registry
Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
Forest Godfrey
gitlab-ce
Commits
8d3b2581
Commit
8d3b2581
authored
Apr 19, 2017
by
Phil Hughes
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Style improvements
Fixed an issue where the line wouldnt move when hovering over deployment
parent
5d8891fb
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
83 additions
and
36 deletions
+83
-36
deployments.js
app/assets/javascripts/monitoring/deployments.js
+47
-4
prometheus_graph.js
app/assets/javascripts/monitoring/prometheus_graph.js
+4
-4
environments.scss
app/assets/stylesheets/pages/environments.scss
+12
-4
deployments_spec.js
spec/javascripts/monitoring/deployments_spec.js
+20
-24
No files found.
app/assets/javascripts/monitoring/deployments.js
View file @
8d3b2581
...
@@ -8,6 +8,8 @@ export default class Deployments {
...
@@ -8,6 +8,8 @@ export default class Deployments {
this
.
timeFormat
=
d3
.
time
.
format
(
'%H:%M%p'
);
this
.
timeFormat
=
d3
.
time
.
format
(
'%H:%M%p'
);
this
.
endpoint
=
document
.
getElementById
(
'js-metrics'
).
dataset
.
deploymentEndpoint
;
this
.
endpoint
=
document
.
getElementById
(
'js-metrics'
).
dataset
.
deploymentEndpoint
;
Deployments
.
createGradientDef
();
}
}
init
(
chartData
)
{
init
(
chartData
)
{
...
@@ -61,6 +63,36 @@ export default class Deployments {
...
@@ -61,6 +63,36 @@ export default class Deployments {
});
});
}
}
static
createGradientDef
()
{
const
defs
=
d3
.
select
(
'body'
)
.
append
(
'svg'
)
.
attr
({
height
:
0
,
width
:
0
,
})
.
append
(
'defs'
);
defs
.
append
(
'linearGradient'
)
.
attr
({
id
:
'shadow-gradient'
,
})
.
append
(
'stop'
)
.
attr
({
offset
:
'0%'
,
'stop-color'
:
'#000'
,
'stop-opacity'
:
0.4
,
})
.
select
(
function
selectParentNode
()
{
return
this
.
parentNode
;
})
.
append
(
'stop'
)
.
attr
({
offset
:
'100%'
,
'stop-color'
:
'#000'
,
'stop-opacity'
:
0
,
});
}
createLine
(
chart
)
{
createLine
(
chart
)
{
chart
.
append
(
'g'
)
chart
.
append
(
'g'
)
.
attr
({
.
attr
({
...
@@ -74,6 +106,17 @@ export default class Deployments {
...
@@ -74,6 +106,17 @@ export default class Deployments {
class
:
d
=>
`deploy-info-
${
d
.
id
}
`
,
class
:
d
=>
`deploy-info-
${
d
.
id
}
`
,
transform
:
d
=>
`translate(
${
Math
.
floor
(
d
.
xPos
)
+
1
}
, 0)`
,
transform
:
d
=>
`translate(
${
Math
.
floor
(
d
.
xPos
)
+
1
}
, 0)`
,
})
})
.
append
(
'rect'
)
.
attr
({
x
:
1
,
y
:
0
,
height
:
this
.
height
,
width
:
3
,
fill
:
'url(#shadow-gradient)'
,
})
.
select
(
function
selectParentNode
()
{
return
this
.
parentNode
;
})
.
append
(
'line'
)
.
append
(
'line'
)
.
attr
({
.
attr
({
class
:
'deployment-line'
,
class
:
'deployment-line'
,
...
@@ -110,7 +153,7 @@ export default class Deployments {
...
@@ -110,7 +153,7 @@ export default class Deployments {
textGroup
.
append
(
'text'
)
textGroup
.
append
(
'text'
)
.
attr
({
.
attr
({
style
:
'dominant-baseline: text-before-edge;
'
,
class
:
'deploy-info-text deploy-info-text-bold
'
,
})
})
.
text
(()
=>
{
.
text
(()
=>
{
const
isTag
=
d
.
tag
;
const
isTag
=
d
.
tag
;
...
@@ -121,14 +164,14 @@ export default class Deployments {
...
@@ -121,14 +164,14 @@ export default class Deployments {
textGroup
.
append
(
'text'
)
textGroup
.
append
(
'text'
)
.
attr
({
.
attr
({
style
:
'dominant-baseline: text-before-edge;
'
,
class
:
'deploy-info-text
'
,
y
:
18
,
y
:
18
,
})
})
.
text
(()
=>
this
.
dateFormat
(
d
.
time
));
.
text
(()
=>
this
.
dateFormat
(
d
.
time
));
textGroup
.
append
(
'text'
)
textGroup
.
append
(
'text'
)
.
attr
({
.
attr
({
style
:
'dominant-baseline: text-before-edge;
'
,
class
:
'deploy-info-text
'
,
y
:
36
,
y
:
36
,
})
})
.
text
(()
=>
this
.
timeFormat
(
d
.
time
));
.
text
(()
=>
this
.
timeFormat
(
d
.
time
));
...
@@ -153,7 +196,7 @@ export default class Deployments {
...
@@ -153,7 +196,7 @@ export default class Deployments {
this
.
data
.
forEach
((
d
)
=>
{
this
.
data
.
forEach
((
d
)
=>
{
if
(
d
.
xPos
>=
mouseXPos
-
10
&&
d
.
xPos
<=
mouseXPos
+
10
&&
!
dataFound
)
{
if
(
d
.
xPos
>=
mouseXPos
-
10
&&
d
.
xPos
<=
mouseXPos
+
10
&&
!
dataFound
)
{
dataFound
=
true
;
dataFound
=
d
.
xPos
+
1
;
Deployments
.
toggleDeployTextbox
(
d
,
true
);
Deployments
.
toggleDeployTextbox
(
d
,
true
);
}
else
{
}
else
{
...
...
app/assets/javascripts/monitoring/prometheus_graph.js
View file @
8d3b2581
...
@@ -214,17 +214,17 @@ class PrometheusGraph {
...
@@ -214,17 +214,17 @@ class PrometheusGraph {
const
maxValueMetric
=
Math
.
floor
(
const
maxValueMetric
=
Math
.
floor
(
y
(
d3
.
max
(
valuesToPlot
.
map
(
metricValue
=>
metricValue
.
value
))),
y
(
d3
.
max
(
valuesToPlot
.
map
(
metricValue
=>
metricValue
.
value
))),
);
);
const
currentDeployXPos
=
this
.
deployments
.
mouseOverDeployInfo
(
mouse
);
const
currentTimeCoordinate
=
Math
.
floor
(
x
(
currentData
.
time
));
const
currentTimeCoordinate
=
Math
.
floor
(
x
(
currentData
.
time
));
const
graphSpecifics
=
this
.
graphSpecificProperties
[
key
];
const
graphSpecifics
=
this
.
graphSpecificProperties
[
key
];
const
shouldHideTextMetric
=
this
.
deployments
.
mouseOverDeployInfo
(
mouse
);
// Remove the current selectors
// Remove the current selectors
d3
.
selectAll
(
`
${
prometheusGraphContainer
}
.selected-metric-line`
).
remove
();
d3
.
selectAll
(
`
${
prometheusGraphContainer
}
.selected-metric-line`
).
remove
();
d3
.
selectAll
(
`
${
prometheusGraphContainer
}
.circle-metric`
).
remove
();
d3
.
selectAll
(
`
${
prometheusGraphContainer
}
.circle-metric`
).
remove
();
d3
.
selectAll
(
`
${
prometheusGraphContainer
}
.rect-text-metric:not(.deploy-info-rect)`
).
remove
();
d3
.
selectAll
(
`
${
prometheusGraphContainer
}
.rect-text-metric:not(.deploy-info-rect)`
).
remove
();
chart
.
append
(
'line'
)
chart
.
append
(
'line'
)
.
attr
(
'class'
,
'selected-metric-line'
)
.
attr
({
.
attr
({
class
:
`
${
currentDeployXPos
?
'hidden'
:
''
}
selected-metric-line`
,
x1
:
currentTimeCoordinate
,
x1
:
currentTimeCoordinate
,
y1
:
y
(
0
),
y1
:
y
(
0
),
x2
:
currentTimeCoordinate
,
x2
:
currentTimeCoordinate
,
...
@@ -234,11 +234,11 @@ class PrometheusGraph {
...
@@ -234,11 +234,11 @@ class PrometheusGraph {
chart
.
append
(
'circle'
)
chart
.
append
(
'circle'
)
.
attr
(
'class'
,
'circle-metric'
)
.
attr
(
'class'
,
'circle-metric'
)
.
attr
(
'fill'
,
graphSpecifics
.
line_color
)
.
attr
(
'fill'
,
graphSpecifics
.
line_color
)
.
attr
(
'cx'
,
currentTimeCoordinate
)
.
attr
(
'cx'
,
current
DeployXPos
||
current
TimeCoordinate
)
.
attr
(
'cy'
,
y
(
currentData
.
value
))
.
attr
(
'cy'
,
y
(
currentData
.
value
))
.
attr
(
'r'
,
this
.
commonGraphProperties
.
circle_radius_metric
);
.
attr
(
'r'
,
this
.
commonGraphProperties
.
circle_radius_metric
);
if
(
shouldHideTextMetric
)
return
;
if
(
currentDeployXPos
)
return
;
// The little box with text
// The little box with text
const
rectTextMetric
=
chart
.
append
(
'svg'
)
const
rectTextMetric
=
chart
.
append
(
'svg'
)
...
...
app/assets/stylesheets/pages/environments.scss
View file @
8d3b2581
...
@@ -157,7 +157,7 @@
...
@@ -157,7 +157,7 @@
.prometheus-graph
{
.prometheus-graph
{
text
{
text
{
fill
:
#525252
;
fill
:
$gl-text-color
;
stroke-width
:
0
;
stroke-width
:
0
;
}
}
}
}
...
@@ -201,7 +201,7 @@
...
@@ -201,7 +201,7 @@
.rect-text-metric
{
.rect-text-metric
{
fill
:
$white-light
;
fill
:
$white-light
;
stroke-width
:
1
;
stroke-width
:
1
;
stroke
:
#e1e1e1
;
stroke
:
$gray-darkest
;
}
}
.rect-axis-text
{
.rect-axis-text
{
...
@@ -213,11 +213,19 @@
...
@@ -213,11 +213,19 @@
}
}
.selected-metric-line
{
.selected-metric-line
{
stroke
:
#8c8c8c
;
stroke
:
$gl-gray-dark
;
stroke-width
:
1
;
stroke-width
:
1
;
}
}
.deployment-line
{
.deployment-line
{
stroke
:
#000
;
stroke
:
$black
;
stroke-width
:
2
;
stroke-width
:
2
;
}
}
.deploy-info-text
{
dominant-baseline
:
text-before-edge
;
}
.deploy-info-text-bold
{
font-weight
:
600
;
}
spec/javascripts/monitoring/deployments_spec.js
View file @
8d3b2581
...
@@ -3,33 +3,11 @@ import PrometheusGraph from '~/monitoring/prometheus_graph';
...
@@ -3,33 +3,11 @@ import PrometheusGraph from '~/monitoring/prometheus_graph';
import
Deployments
from
'~/monitoring/deployments'
;
import
Deployments
from
'~/monitoring/deployments'
;
import
{
prometheusMockData
}
from
'./prometheus_mock_data'
;
import
{
prometheusMockData
}
from
'./prometheus_mock_data'
;
f
describe
(
'Metrics deployments'
,
()
=>
{
describe
(
'Metrics deployments'
,
()
=>
{
const
fixtureName
=
'static/environments/metrics.html.raw'
;
const
fixtureName
=
'static/environments/metrics.html.raw'
;
let
deployment
;
let
deployment
;
let
prometheusGraph
;
let
prometheusGraph
;
const
createDeploymentMockData
=
(
done
)
=>
{
return
{
deployments
:
[{
id
:
1
,
created_at
:
deployment
.
chartData
[
10
].
time
,
sha
:
'testing'
,
tag
:
false
,
ref
:
{
name
:
'testing'
,
},
},
{
id
:
2
,
created_at
:
deployment
.
chartData
[
15
].
time
,
sha
:
''
,
tag
:
true
,
ref
:
{
name
:
'tag'
,
},
}],
};
};
const
graphElement
=
()
=>
document
.
querySelector
(
'.prometheus-graph'
);
const
graphElement
=
()
=>
document
.
querySelector
(
'.prometheus-graph'
);
preloadFixtures
(
fixtureName
);
preloadFixtures
(
fixtureName
);
...
@@ -48,7 +26,25 @@ fdescribe('Metrics deployments', () => {
...
@@ -48,7 +26,25 @@ fdescribe('Metrics deployments', () => {
spyOn
(
prometheusGraph
,
'init'
);
spyOn
(
prometheusGraph
,
'init'
);
spyOn
(
$
,
'ajax'
).
and
.
callFake
(()
=>
{
spyOn
(
$
,
'ajax'
).
and
.
callFake
(()
=>
{
const
d
=
$
.
Deferred
();
const
d
=
$
.
Deferred
();
d
.
resolve
(
createDeploymentMockData
());
d
.
resolve
({
deployments
:
[{
id
:
1
,
created_at
:
deployment
.
chartData
[
10
].
time
,
sha
:
'testing'
,
tag
:
false
,
ref
:
{
name
:
'testing'
,
},
},
{
id
:
2
,
created_at
:
deployment
.
chartData
[
15
].
time
,
sha
:
''
,
tag
:
true
,
ref
:
{
name
:
'tag'
,
},
}],
});
setTimeout
(
done
);
setTimeout
(
done
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment