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
4d2e9a1f
Commit
4d2e9a1f
authored
6 years ago
by
Simon Knox
Committed by
Mike Greiling
6 years ago
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
multiseries
parent
c9116b6d
Changes
7
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
86 additions
and
18 deletions
+86
-18
app/assets/javascripts/monitoring/components/graph.vue
app/assets/javascripts/monitoring/components/graph.vue
+37
-6
app/assets/javascripts/monitoring/components/graph/flag.vue
app/assets/javascripts/monitoring/components/graph/flag.vue
+3
-3
app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
...assets/javascripts/monitoring/mixins/monitoring_mixins.js
+10
-5
app/assets/javascripts/monitoring/utils/multiple_time_series.js
...sets/javascripts/monitoring/utils/multiple_time_series.js
+27
-3
changelogs/unreleased/ee-6381-multiseries.yml
changelogs/unreleased/ee-6381-multiseries.yml
+5
-0
spec/javascripts/monitoring/graph/flag_spec.js
spec/javascripts/monitoring/graph/flag_spec.js
+1
-1
spec/javascripts/monitoring/graph_spec.js
spec/javascripts/monitoring/graph_spec.js
+3
-0
No files found.
app/assets/javascripts/monitoring/components/graph.vue
View file @
4d2e9a1f
...
...
@@ -82,11 +82,12 @@ export default {
value
:
0
,
},
currentXCoordinate
:
0
,
currentCoordinates
:
[]
,
currentCoordinates
:
{}
,
showFlag
:
false
,
showFlagContent
:
false
,
timeSeries
:
[],
realPixelRatio
:
1
,
seriesUnderMouse
:
[],
};
},
computed
:
{
...
...
@@ -126,6 +127,9 @@ export default {
this
.
draw
();
},
methods
:
{
showDot
(
path
)
{
return
this
.
showFlagContent
&&
this
.
seriesUnderMouse
.
includes
(
path
);
},
draw
()
{
const
breakpointSize
=
bp
.
getBreakpointSize
();
const
query
=
this
.
graphData
.
queries
[
0
];
...
...
@@ -155,7 +159,24 @@ export default {
point
.
y
=
e
.
clientY
;
point
=
point
.
matrixTransform
(
this
.
$refs
.
graphData
.
getScreenCTM
().
inverse
());
point
.
x
+=
7
;
const
firstTimeSeries
=
this
.
timeSeries
[
0
];
this
.
seriesUnderMouse
=
this
.
timeSeries
.
filter
((
series
)
=>
{
const
mouseX
=
series
.
timeSeriesScaleX
.
invert
(
point
.
x
);
let
minDistance
=
Infinity
;
const
closestTickMark
=
Object
.
keys
(
this
.
allXAxisValues
).
reduce
((
closest
,
x
)
=>
{
const
distance
=
Math
.
abs
(
Number
(
new
Date
(
x
))
-
Number
(
mouseX
));
if
(
distance
<
minDistance
)
{
minDistance
=
distance
;
return
x
;
}
return
closest
;
});
return
series
.
values
.
find
(
v
=>
v
.
time
.
toString
()
===
closestTickMark
);
});
const
firstTimeSeries
=
this
.
seriesUnderMouse
[
0
];
const
timeValueOverlay
=
firstTimeSeries
.
timeSeriesScaleX
.
invert
(
point
.
x
);
const
overlayIndex
=
bisectDate
(
firstTimeSeries
.
values
,
timeValueOverlay
,
1
);
const
d0
=
firstTimeSeries
.
values
[
overlayIndex
-
1
];
...
...
@@ -190,6 +211,17 @@ export default {
axisXScale
.
domain
(
d3
.
extent
(
allValues
,
d
=>
d
.
time
));
axisYScale
.
domain
([
0
,
d3
.
max
(
allValues
.
map
(
d
=>
d
.
value
))]);
this
.
allXAxisValues
=
this
.
timeSeries
.
reduce
((
obj
,
series
)
=>
{
const
seriesKeys
=
{};
series
.
values
.
forEach
(
v
=>
{
seriesKeys
[
v
.
time
]
=
true
;
});
return
{
...
obj
,
...
seriesKeys
,
};
},
{});
const
xAxis
=
d3
.
axisBottom
()
.
scale
(
axisXScale
)
...
...
@@ -277,9 +309,8 @@ 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"
:current-coordinates=
"currentCoordinates[path.metricTag]"
:show-dot=
"showDot(path)"
/>
<graph-deployment
:deployment-data=
"reducedDeploymentData"
...
...
@@ -303,7 +334,7 @@ export default {
:graph-height=
"graphHeight"
:graph-height-offset=
"graphHeightOffset"
:show-flag-content=
"showFlagContent"
:time-series=
"
timeSeries
"
:time-series=
"
seriesUnderMouse
"
:unit-of-display=
"unitOfDisplay"
:legend-title=
"legendTitle"
:deployment-flag-data=
"deploymentFlagData"
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/monitoring/components/graph/flag.vue
View file @
4d2e9a1f
...
...
@@ -52,7 +52,7 @@ export default {
required
:
true
,
},
currentCoordinates
:
{
type
:
Array
,
type
:
Object
,
required
:
true
,
},
},
...
...
@@ -91,8 +91,8 @@ export default {
},
methods
:
{
seriesMetricValue
(
seriesIndex
,
series
)
{
const
indexFromCoordinates
=
this
.
currentCoordinates
[
series
Index
]
?
this
.
currentCoordinates
[
series
Index
].
currentDataIndex
:
0
;
const
indexFromCoordinates
=
this
.
currentCoordinates
[
series
.
metricTag
]
?
this
.
currentCoordinates
[
series
.
metricTag
].
currentDataIndex
:
0
;
const
index
=
this
.
deploymentFlagData
?
this
.
deploymentFlagData
.
seriesIndex
:
indexFromCoordinates
;
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
View file @
4d2e9a1f
...
...
@@ -50,19 +50,24 @@ const mixins = {
},
positionFlag
()
{
const
timeSeries
=
this
.
timeSeries
[
0
];
const
hoveredDataIndex
=
bisectDate
(
timeSeries
.
values
,
this
.
hoverData
.
hoveredDate
,
1
);
const
timeSeries
=
this
.
seriesUnderMouse
[
0
];
if
(
!
timeSeries
)
{
return
;
}
const
hoveredDataIndex
=
bisectDate
(
timeSeries
.
values
,
this
.
hoverData
.
hoveredDate
);
this
.
currentData
=
timeSeries
.
values
[
hoveredDataIndex
];
this
.
currentXCoordinate
=
Math
.
floor
(
timeSeries
.
timeSeriesScaleX
(
this
.
currentData
.
time
));
this
.
currentCoordinates
=
this
.
timeSeries
.
map
((
series
)
=>
{
const
currentDataIndex
=
bisectDate
(
series
.
values
,
this
.
hoverData
.
hoveredDate
,
1
);
this
.
currentCoordinates
=
{};
this
.
seriesUnderMouse
.
forEach
((
series
)
=>
{
const
currentDataIndex
=
bisectDate
(
series
.
values
,
this
.
hoverData
.
hoveredDate
);
const
currentData
=
series
.
values
[
currentDataIndex
];
const
currentX
=
Math
.
floor
(
series
.
timeSeriesScaleX
(
currentData
.
time
));
const
currentY
=
Math
.
floor
(
series
.
timeSeriesScaleY
(
currentData
.
value
));
return
{
this
.
currentCoordinates
[
series
.
metricTag
]
=
{
currentX
,
currentY
,
currentDataIndex
,
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/monitoring/utils/multiple_time_series.js
View file @
4d2e9a1f
...
...
@@ -2,7 +2,7 @@ import _ from 'underscore';
import
{
scaleLinear
,
scaleTime
}
from
'
d3-scale
'
;
import
{
line
,
area
,
curveLinear
}
from
'
d3-shape
'
;
import
{
extent
,
max
,
sum
}
from
'
d3-array
'
;
import
{
timeMinute
}
from
'
d3-time
'
;
import
{
timeMinute
,
timeSecond
}
from
'
d3-time
'
;
import
{
capitalizeFirstCharacter
}
from
'
~/lib/utils/text_utility
'
;
const
d3
=
{
...
...
@@ -14,6 +14,7 @@ const d3 = {
extent
,
max
,
timeMinute
,
timeSecond
,
sum
,
};
...
...
@@ -51,6 +52,24 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
return
defaultColorPalette
[
pick
];
}
function
findByDate
(
series
,
time
)
{
const
val
=
series
.
find
(
v
=>
Math
.
abs
(
d3
.
timeSecond
.
count
(
time
,
v
.
time
))
<
60
);
if
(
val
)
{
return
val
.
value
;
}
return
NaN
;
}
// The timeseries data may have gaps in it
// 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
offset
=
d3
.
timeMinute
(
minX
)
-
Number
(
minX
);
const
datesWithoutGaps
=
d3
.
timeSecond
.
every
(
60
)
.
range
(
d3
.
timeMinute
.
offset
(
minX
,
-
1
),
maxX
)
.
map
(
d
=>
d
-
offset
);
query
.
result
.
forEach
((
timeSeries
,
timeSeriesNumber
)
=>
{
let
metricTag
=
''
;
let
lineColor
=
''
;
...
...
@@ -119,9 +138,14 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
});
}
const
values
=
datesWithoutGaps
.
map
(
time
=>
({
time
,
value
:
findByDate
(
timeSeries
.
values
,
time
),
}));
timeSeriesParsed
.
push
({
linePath
:
lineFunction
(
timeSeries
.
values
),
areaPath
:
areaFunction
(
timeSeries
.
values
),
linePath
:
lineFunction
(
values
),
areaPath
:
areaFunction
(
values
),
timeSeriesScaleX
,
timeSeriesScaleY
,
values
:
timeSeries
.
values
,
...
...
This diff is collapsed.
Click to expand it.
changelogs/unreleased/ee-6381-multiseries.yml
0 → 100644
View file @
4d2e9a1f
---
title
:
Allow gaps in multiseries metrics charts
merge_request
:
21427
author
:
type
:
fixed
This diff is collapsed.
Click to expand it.
spec/javascripts/monitoring/graph/flag_spec.js
View file @
4d2e9a1f
...
...
@@ -35,7 +35,7 @@ const defaultValuesComponent = {
unitOfDisplay
:
'
ms
'
,
currentDataIndex
:
0
,
legendTitle
:
'
Average
'
,
currentCoordinates
:
[]
,
currentCoordinates
:
{}
,
};
const
deploymentFlagData
=
{
...
...
This diff is collapsed.
Click to expand it.
spec/javascripts/monitoring/graph_spec.js
View file @
4d2e9a1f
...
...
@@ -113,6 +113,9 @@ describe('Graph', () => {
projectPath
,
});
// simulate moving mouse over data series
component
.
seriesUnderMouse
=
component
.
timeSeries
;
component
.
positionFlag
();
expect
(
component
.
currentData
).
toBe
(
component
.
timeSeries
[
0
].
values
[
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