Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
c93cd377
Commit
c93cd377
authored
6 years ago
by
Jose Ivan Vargas
Committed by
Mike Greiling
6 years ago
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Resolve "Monitoring graphs - Popover value improvements"
parent
94099f2d
No related merge requests found
Changes
12
Hide whitespace changes
Inline
Side-by-side
Showing
12 changed files
with
111 additions
and
49 deletions
+111
-49
app/assets/javascripts/monitoring/components/graph.vue
app/assets/javascripts/monitoring/components/graph.vue
+5
-3
app/assets/javascripts/monitoring/components/graph/flag.vue
app/assets/javascripts/monitoring/components/graph/flag.vue
+13
-9
app/assets/javascripts/monitoring/components/graph/path.vue
app/assets/javascripts/monitoring/components/graph/path.vue
+19
-3
app/assets/javascripts/monitoring/components/graph/track_line.vue
...ts/javascripts/monitoring/components/graph/track_line.vue
+5
-5
app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
...assets/javascripts/monitoring/mixins/monitoring_mixins.js
+14
-6
app/assets/javascripts/monitoring/utils/date_time_formatters.js
...sets/javascripts/monitoring/utils/date_time_formatters.js
+1
-1
app/assets/javascripts/monitoring/utils/multiple_time_series.js
...sets/javascripts/monitoring/utils/multiple_time_series.js
+1
-0
app/assets/stylesheets/pages/environments.scss
app/assets/stylesheets/pages/environments.scss
+34
-3
spec/javascripts/monitoring/graph/flag_spec.js
spec/javascripts/monitoring/graph/flag_spec.js
+12
-7
spec/javascripts/monitoring/graph/track_line_spec.js
spec/javascripts/monitoring/graph/track_line_spec.js
+5
-5
spec/javascripts/monitoring/graph_path_spec.js
spec/javascripts/monitoring/graph_path_spec.js
+2
-0
spec/javascripts/monitoring/graph_spec.js
spec/javascripts/monitoring/graph_spec.js
+0
-7
No files found.
app/assets/javascripts/monitoring/components/graph.vue
View file @
c93cd377
...
...
@@ -81,9 +81,8 @@ export default {
time
:
new
Date
(),
value
:
0
,
},
currentDataIndex
:
0
,
currentXCoordinate
:
0
,
current
FlagPosition
:
0
,
current
Coordinates
:
[]
,
showFlag
:
false
,
showFlagContent
:
false
,
timeSeries
:
[],
...
...
@@ -273,6 +272,9 @@ export default {
:line-style=
"path.lineStyle"
:line-color=
"path.lineColor"
:area-color=
"path.areaColor"
:current-coordinates=
"currentCoordinates[index]"
:current-time-series-index=
"index"
:show-dot=
"showFlagContent"
/>
<graph-deployment
:deployment-data=
"reducedDeploymentData"
...
...
@@ -298,9 +300,9 @@ export default {
:show-flag-content=
"showFlagContent"
:time-series=
"timeSeries"
:unit-of-display=
"unitOfDisplay"
:current-data-index=
"currentDataIndex"
:legend-title=
"legendTitle"
:deployment-flag-data=
"deploymentFlagData"
:current-coordinates=
"currentCoordinates"
/>
</div>
<graph-legend
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/monitoring/components/graph/flag.vue
View file @
c93cd377
...
...
@@ -47,14 +47,14 @@ export default {
type
:
String
,
required
:
true
,
},
currentDataIndex
:
{
type
:
Number
,
required
:
true
,
},
legendTitle
:
{
type
:
String
,
required
:
true
,
},
currentCoordinates
:
{
type
:
Array
,
required
:
true
,
},
},
computed
:
{
formatTime
()
{
...
...
@@ -90,10 +90,12 @@ export default {
},
},
methods
:
{
seriesMetricValue
(
series
)
{
seriesMetricValue
(
seriesIndex
,
series
)
{
const
indexFromCoordinates
=
this
.
currentCoordinates
[
seriesIndex
]
?
this
.
currentCoordinates
[
seriesIndex
].
currentDataIndex
:
0
;
const
index
=
this
.
deploymentFlagData
?
this
.
deploymentFlagData
.
seriesIndex
:
this
.
currentDataIndex
;
:
indexFromCoordinates
;
const
value
=
series
.
values
[
index
]
&&
series
.
values
[
index
].
value
;
if
(
isNaN
(
value
))
{
return
'
-
'
;
...
...
@@ -128,7 +130,7 @@ export default {
<h5
v-if=
"deploymentFlagData"
>
Deployed
</h5>
{{
formatDate
}}
at
{{
formatDate
}}
<strong>
{{
formatTime
}}
</strong>
</div>
<div
...
...
@@ -163,9 +165,11 @@ export default {
:key=
"index"
>
<track-line
:track=
"series"
/>
<td>
{{
series
.
track
}}
{{
seriesMetricLabel
(
index
,
series
)
}}
</td>
<td>
<strong>
{{
seriesMetricValue
(
series
)
}}
</strong>
{{
series
.
track
}}
{{
seriesMetricLabel
(
index
,
series
)
}}
</td>
<td>
<strong>
{{
seriesMetricValue
(
index
,
series
)
}}
</strong>
</td>
</tr>
</table>
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/monitoring/components/graph/path.vue
View file @
c93cd377
...
...
@@ -22,6 +22,15 @@ export default {
type
:
String
,
required
:
true
,
},
currentCoordinates
:
{
type
:
Object
,
required
:
false
,
default
:
()
=>
({
currentX
:
0
,
currentY
:
0
}),
},
showDot
:
{
type
:
Boolean
,
required
:
true
,
},
},
computed
:
{
strokeDashArray
()
{
...
...
@@ -33,12 +42,20 @@ export default {
};
</
script
>
<
template
>
<g>
<g
transform=
"translate(-5, 20)"
>
<circle
class=
"circle-path"
:cx=
"currentCoordinates.currentX"
:cy=
"currentCoordinates.currentY"
:fill=
"lineColor"
:stroke=
"lineColor"
r=
"3"
v-if=
"showDot"
/>
<path
class=
"metric-area"
:d=
"generatedAreaPath"
:fill=
"areaColor"
transform=
"translate(-5, 20)"
/>
<path
class=
"metric-line"
...
...
@@ -47,7 +64,6 @@ export default {
fill=
"none"
stroke-width=
"1"
:stroke-dasharray=
"strokeDashArray"
transform=
"translate(-5, 20)"
/>
</g>
</
template
>
This diff is collapsed.
Click to expand it.
app/assets/javascripts/monitoring/components/graph/track_line.vue
View file @
c93cd377
...
...
@@ -19,16 +19,16 @@ export default {
<
template
>
<td>
<svg
width=
"1
5
"
height=
"
6
"
>
width=
"1
6
"
height=
"
8
"
>
<line
:stroke-dasharray=
"stylizedLine"
:stroke=
"track.lineColor"
stroke-width=
"4"
:x1=
"0"
:x2=
"1
5
"
:y1=
"
2
"
:y2=
"
2
"
:x2=
"1
6
"
:y1=
"
4
"
:y2=
"
4
"
/>
</svg>
</td>
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
View file @
c93cd377
...
...
@@ -52,14 +52,22 @@ const mixins = {
positionFlag
()
{
const
timeSeries
=
this
.
timeSeries
[
0
];
const
hoveredDataIndex
=
bisectDate
(
timeSeries
.
values
,
this
.
hoverData
.
hoveredDate
,
1
);
this
.
currentData
=
timeSeries
.
values
[
hoveredDataIndex
];
this
.
currentDataIndex
=
hoveredDataIndex
;
this
.
currentXCoordinate
=
Math
.
floor
(
timeSeries
.
timeSeriesScaleX
(
this
.
currentData
.
time
));
if
(
this
.
currentXCoordinate
>
(
this
.
graphWidth
-
200
))
{
this
.
currentFlagPosition
=
this
.
currentXCoordinate
-
103
;
}
else
{
this
.
currentFlagPosition
=
this
.
currentXCoordinate
;
}
this
.
currentCoordinates
=
this
.
timeSeries
.
map
((
series
)
=>
{
const
currentDataIndex
=
bisectDate
(
series
.
values
,
this
.
hoverData
.
hoveredDate
,
1
);
const
currentData
=
series
.
values
[
currentDataIndex
];
const
currentX
=
Math
.
floor
(
series
.
timeSeriesScaleX
(
currentData
.
time
));
const
currentY
=
Math
.
floor
(
series
.
timeSeriesScaleY
(
currentData
.
value
));
return
{
currentX
,
currentY
,
currentDataIndex
,
};
});
if
(
this
.
hoverData
.
currentDeployXPos
)
{
this
.
showFlag
=
false
;
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/monitoring/utils/date_time_formatters.js
View file @
c93cd377
...
...
@@ -14,7 +14,7 @@ const d3 = {
timeYear
,
};
export
const
dateFormat
=
d3
.
time
(
'
%
a, %b %-d
'
);
export
const
dateFormat
=
d3
.
time
(
'
%
d %b %Y,
'
);
export
const
timeFormat
=
d3
.
time
(
'
%-I:%M%p
'
);
export
const
dateFormatWithName
=
d3
.
time
(
'
%a, %b %-d
'
);
export
const
bisectDate
=
d3
.
bisector
(
d
=>
d
.
time
).
left
;
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/monitoring/utils/multiple_time_series.js
View file @
c93cd377
...
...
@@ -123,6 +123,7 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
linePath
:
lineFunction
(
timeSeries
.
values
),
areaPath
:
areaFunction
(
timeSeries
.
values
),
timeSeriesScaleX
,
timeSeriesScaleY
,
values
:
timeSeries
.
values
,
max
:
maximumValue
,
average
:
accum
/
timeSeries
.
values
.
length
,
...
...
This diff is collapsed.
Click to expand it.
app/assets/stylesheets/pages/environments.scss
View file @
c93cd377
...
...
@@ -283,28 +283,59 @@
}
&
.popover
{
padding
:
0
;
border
:
1px
solid
$border-color
;
&
.left
{
left
:
auto
;
right
:
0
;
margin-right
:
10px
;
>
.arrow
{
right
:
-16px
;
border-left-color
:
$border-color
;
}
> .
arrow
:
:
after
{
border-left-color
:
$theme-gray-50
;
}
}
&
.right
{
left
:
0
;
right
:
auto
;
margin-left
:
10px
;
>
.arrow
{
left
:
-16px
;
border-right-color
:
$border-color
;
}
> .
arrow
:
:
after
{
border-right-color
:
$theme-gray-50
;
}
}
>
.arrow
{
top
:
40px
;
top
:
16px
;
margin-top
:
-8px
;
border-width
:
8px
;
}
>
.popover-title
,
>
.popover-content
{
padding
:
5px
8px
;
padding
:
8px
;
font-size
:
12px
;
white-space
:
nowrap
;
}
>
.popover-title
{
background-color
:
$theme-gray-50
;
}
}
strong
{
font-weight
:
600
;
}
}
...
...
@@ -317,7 +348,7 @@
vertical-align
:
middle
;
+
td
{
padding-left
:
5
px
;
padding-left
:
8
px
;
vertical-align
:
top
;
}
}
...
...
This diff is collapsed.
Click to expand it.
spec/javascripts/monitoring/graph/flag_spec.js
View file @
c93cd377
...
...
@@ -22,15 +22,20 @@ const defaultValuesComponent = {
graphHeightOffset
:
120
,
showFlagContent
:
true
,
realPixelRatio
:
1
,
timeSeries
:
[{
values
:
[{
time
:
new
Date
(
'
2017-06-04T18:17:33.501Z
'
),
value
:
'
1.49609375
'
,
}],
}],
timeSeries
:
[
{
values
:
[
{
time
:
new
Date
(
'
2017-06-04T18:17:33.501Z
'
),
value
:
'
1.49609375
'
,
},
],
},
],
unitOfDisplay
:
'
ms
'
,
currentDataIndex
:
0
,
legendTitle
:
'
Average
'
,
currentCoordinates
:
[],
};
const
deploymentFlagData
=
{
...
...
@@ -113,7 +118,7 @@ describe('GraphFlag', () => {
});
it
(
'
formatDate
'
,
()
=>
{
expect
(
component
.
formatDate
).
toEqual
(
'
Sun, Jun 4
'
);
expect
(
component
.
formatDate
).
toEqual
(
'
04 Jun 2017,
'
);
});
it
(
'
cursorStyle
'
,
()
=>
{
...
...
This diff is collapsed.
Click to expand it.
spec/javascripts/monitoring/graph/track_line_spec.js
View file @
c93cd377
...
...
@@ -39,14 +39,14 @@ describe('TrackLine component', () => {
const
svgEl
=
vm
.
$el
.
querySelector
(
'
svg
'
);
const
lineEl
=
vm
.
$el
.
querySelector
(
'
svg line
'
);
expect
(
svgEl
.
getAttribute
(
'
width
'
)).
toEqual
(
'
1
5
'
);
expect
(
svgEl
.
getAttribute
(
'
height
'
)).
toEqual
(
'
6
'
);
expect
(
svgEl
.
getAttribute
(
'
width
'
)).
toEqual
(
'
1
6
'
);
expect
(
svgEl
.
getAttribute
(
'
height
'
)).
toEqual
(
'
8
'
);
expect
(
lineEl
.
getAttribute
(
'
stroke-width
'
)).
toEqual
(
'
4
'
);
expect
(
lineEl
.
getAttribute
(
'
x1
'
)).
toEqual
(
'
0
'
);
expect
(
lineEl
.
getAttribute
(
'
x2
'
)).
toEqual
(
'
1
5
'
);
expect
(
lineEl
.
getAttribute
(
'
y1
'
)).
toEqual
(
'
2
'
);
expect
(
lineEl
.
getAttribute
(
'
y2
'
)).
toEqual
(
'
2
'
);
expect
(
lineEl
.
getAttribute
(
'
x2
'
)).
toEqual
(
'
1
6
'
);
expect
(
lineEl
.
getAttribute
(
'
y1
'
)).
toEqual
(
'
4
'
);
expect
(
lineEl
.
getAttribute
(
'
y2
'
)).
toEqual
(
'
4
'
);
});
});
});
This diff is collapsed.
Click to expand it.
spec/javascripts/monitoring/graph_path_spec.js
View file @
c93cd377
...
...
@@ -23,6 +23,7 @@ describe('Monitoring Paths', () => {
generatedAreaPath
:
firstTimeSeries
.
areaPath
,
lineColor
:
firstTimeSeries
.
lineColor
,
areaColor
:
firstTimeSeries
.
areaColor
,
showDot
:
false
,
});
const
metricArea
=
component
.
$el
.
querySelector
(
'
.metric-area
'
);
const
metricLine
=
component
.
$el
.
querySelector
(
'
.metric-line
'
);
...
...
@@ -40,6 +41,7 @@ describe('Monitoring Paths', () => {
generatedAreaPath
:
firstTimeSeries
.
areaPath
,
lineColor
:
firstTimeSeries
.
lineColor
,
areaColor
:
firstTimeSeries
.
areaColor
,
showDot
:
false
,
});
component
.
lineStyle
=
'
dashed
'
;
...
...
This diff is collapsed.
Click to expand it.
spec/javascripts/monitoring/graph_spec.js
View file @
c93cd377
...
...
@@ -30,7 +30,6 @@ describe('Graph', () => {
it
(
'
has a title
'
,
()
=>
{
const
component
=
createComponent
({
graphData
:
convertedMetrics
[
1
],
classType
:
'
col-md-6
'
,
updateAspectRatio
:
false
,
deploymentData
,
tagsPath
,
...
...
@@ -46,7 +45,6 @@ describe('Graph', () => {
it
(
'
axisTransform translates an element Y position depending of its height
'
,
()
=>
{
const
component
=
createComponent
({
graphData
:
convertedMetrics
[
1
],
classType
:
'
col-md-6
'
,
updateAspectRatio
:
false
,
deploymentData
,
tagsPath
,
...
...
@@ -62,7 +60,6 @@ describe('Graph', () => {
it
(
'
outerViewBox gets a width and height property based on the DOM size of the element
'
,
()
=>
{
const
component
=
createComponent
({
graphData
:
convertedMetrics
[
1
],
classType
:
'
col-md-6
'
,
updateAspectRatio
:
false
,
deploymentData
,
tagsPath
,
...
...
@@ -79,7 +76,6 @@ describe('Graph', () => {
it
(
'
sends an event to the eventhub when it has finished resizing
'
,
done
=>
{
const
component
=
createComponent
({
graphData
:
convertedMetrics
[
1
],
classType
:
'
col-md-6
'
,
updateAspectRatio
:
false
,
deploymentData
,
tagsPath
,
...
...
@@ -97,7 +93,6 @@ describe('Graph', () => {
it
(
'
has a title for the y-axis and the chart legend that comes from the backend
'
,
()
=>
{
const
component
=
createComponent
({
graphData
:
convertedMetrics
[
1
],
classType
:
'
col-md-6
'
,
updateAspectRatio
:
false
,
deploymentData
,
tagsPath
,
...
...
@@ -111,7 +106,6 @@ describe('Graph', () => {
it
(
'
sets the currentData object based on the hovered data index
'
,
()
=>
{
const
component
=
createComponent
({
graphData
:
convertedMetrics
[
1
],
classType
:
'
col-md-6
'
,
updateAspectRatio
:
false
,
deploymentData
,
graphIdentifier
:
0
,
...
...
@@ -125,6 +119,5 @@ describe('Graph', () => {
component
.
positionFlag
();
expect
(
component
.
currentData
).
toBe
(
component
.
timeSeries
[
0
].
values
[
10
]);
expect
(
component
.
currentDataIndex
).
toEqual
(
10
);
});
});
This diff is collapsed.
Click to expand it.
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