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
0
Merge Requests
0
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
Boxiang Sun
gitlab-ce
Commits
af871639
Commit
af871639
authored
Apr 04, 2018
by
Jose Ivan Vargas
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Componetize the legend component
parent
6ed3580b
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
139 additions
and
76 deletions
+139
-76
app/assets/javascripts/monitoring/components/graph.vue
app/assets/javascripts/monitoring/components/graph.vue
+7
-5
app/assets/javascripts/monitoring/components/graph/flag.vue
app/assets/javascripts/monitoring/components/graph/flag.vue
+5
-23
app/assets/javascripts/monitoring/components/graph/legend.vue
...assets/javascripts/monitoring/components/graph/legend.vue
+29
-43
app/assets/javascripts/monitoring/components/graph/track_info.vue
...ts/javascripts/monitoring/components/graph/track_info.vue
+29
-0
app/assets/javascripts/monitoring/components/graph/track_line.vue
...ts/javascripts/monitoring/components/graph/track_line.vue
+36
-0
app/assets/javascripts/monitoring/utils/multiple_time_series.js
...sets/javascripts/monitoring/utils/multiple_time_series.js
+33
-5
No files found.
app/assets/javascripts/monitoring/components/graph.vue
View file @
af871639
<
script
>
import
{
scaleLinear
,
scaleTime
}
from
'
d3-scale
'
;
import
{
axisLeft
,
axisBottom
}
from
'
d3-axis
'
;
import
_
from
'
underscore
'
;
import
{
max
,
extent
}
from
'
d3-array
'
;
import
{
select
}
from
'
d3-selection
'
;
import
GraphAxis
from
'
./graph/axis.vue
'
;
...
...
@@ -179,10 +180,12 @@ export default {
this
.
graphHeightOffset
,
);
const
axisXScale
=
d3
.
scaleTime
()
.
range
([
0
,
this
.
graphWidth
-
70
]);
const
axisYScale
=
d3
.
scaleLinear
()
.
range
([
this
.
graphHeight
-
this
.
graphHeightOffset
,
0
]);
if
(
_
.
findWhere
(
this
.
timeSeries
,
{
renderCanary
:
true
}))
{
this
.
timeSeries
=
this
.
timeSeries
.
map
(
series
=>
({
...
series
,
renderCanary
:
true
}));
}
const
axisXScale
=
d3
.
scaleTime
().
range
([
0
,
this
.
graphWidth
-
70
]);
const
axisYScale
=
d3
.
scaleLinear
().
range
([
this
.
graphHeight
-
this
.
graphHeightOffset
,
0
]);
const
allValues
=
this
.
timeSeries
.
reduce
((
all
,
{
values
})
=>
all
.
concat
(
values
),
[]);
axisXScale
.
domain
(
d3
.
extent
(
allValues
,
d
=>
d
.
time
));
...
...
@@ -304,7 +307,6 @@ export default {
v-if=
"showLegend"
:legend-title=
"legendTitle"
:time-series=
"timeSeries"
:current-data-index=
"currentDataIndex"
/>
</div>
</
template
>
app/assets/javascripts/monitoring/components/graph/flag.vue
View file @
af871639
<
script
>
import
{
dateFormat
,
timeFormat
}
from
'
../../utils/date_time_formatters
'
;
import
{
formatRelevantDigits
}
from
'
../../../lib/utils/number_utils
'
;
import
icon
from
'
../../../vue_shared/components/icon.vue
'
;
import
Icon
from
'
../../../vue_shared/components/icon.vue
'
;
import
TrackLine
from
'
./track_line.vue
'
;
export
default
{
components
:
{
icon
,
Icon
,
TrackLine
,
},
props
:
{
currentXCoordinate
:
{
...
...
@@ -107,11 +109,6 @@ export default {
}
return
`series
${
index
+
1
}
`
;
},
strokeDashArray
(
type
)
{
if
(
type
===
'
dashed
'
)
return
'
6, 3
'
;
if
(
type
===
'
dotted
'
)
return
'
3, 3
'
;
return
null
;
},
},
};
</
script
>
...
...
@@ -165,22 +162,7 @@ export default {
v-for=
"(series, index) in timeSeries"
:key=
"index"
>
<td>
<svg
width=
"15"
height=
"6"
>
<line
:stroke=
"series.lineColor"
:stroke-dasharray=
"strokeDashArray(series.lineStyle)"
stroke-width=
"4"
x1=
"0"
x2=
"15"
y1=
"2"
y2=
"2"
/>
</svg>
</td>
<track-line
:track=
"series"
/>
<td>
{{
series
.
track
}}
{{
seriesMetricLabel
(
index
,
series
)
}}
</td>
<td>
<strong>
{{
seriesMetricValue
(
series
)
}}
</strong>
...
...
app/assets/javascripts/monitoring/components/graph/legend.vue
View file @
af871639
<
script
>
import
{
formatRelevantDigits
}
from
'
~/lib/utils/number_utils
'
;
import
TrackLine
from
'
./track_line.vue
'
;
import
TrackInfo
from
'
./track_info.vue
'
;
export
default
{
components
:
{
TrackLine
,
TrackInfo
,
},
props
:
{
legendTitle
:
{
type
:
String
,
...
...
@@ -11,21 +16,6 @@ export default {
type
:
Array
,
required
:
true
,
},
currentDataIndex
:
{
type
:
Number
,
required
:
true
,
},
},
methods
:
{
summaryMetrics
(
series
)
{
return
`Avg:
${
formatRelevantDigits
(
series
.
average
)}
· Max:
${
formatRelevantDigits
(
series
.
max
)}
`
;
},
strokeDashArray
(
type
)
{
if
(
type
===
'
dashed
'
)
return
'
6, 3
'
;
if
(
type
===
'
dotted
'
)
return
'
3, 3
'
;
return
null
;
},
},
};
</
script
>
...
...
@@ -35,41 +25,37 @@ export default {
<tr
v-for=
"(series, index) in timeSeries"
:key=
"index"
v-if=
"series.shouldRenderLegend"
>
<td>
<strong>
{{
series
.
track
}}
</strong>
</td>
<td>
<svg
width=
"15"
height=
"6"
>
<line
:stroke-dasharray=
"strokeDashArray(series.lineStyle)"
:stroke=
"series.lineColor"
stroke-width=
"4"
:x1=
"0"
:x2=
"15"
:y1=
"2"
:y2=
"2"
/>
</svg>
<strong
v-if=
"series.renderCanary"
>
{{
series
.
trackName
}}
</strong>
</td>
<track-line
:track=
"series"
/>
<td
class=
"legend-metric-title"
v-if=
"timeSeries.length > 1"
>
<template
v-if=
"series.metricTag"
>
<strong>
{{
series
.
metricTag
}}
</strong>
{{
summaryMetrics
(
series
)
}}
<
/
template
>
<
template
v-else
>
<strong>
{{
legendTitle
}}
</strong
>
series
{{
index
+
1
}}
{{
summaryMetrics
(
series
)
}}
</
t
emplate
>
v-if=
"timeSeries.length > 1"
>
<track-info
:track=
"series"
v-if=
"series.metricTag"
/>
<
track-info
v-else
:track=
"series"
>
<strong>
{{
legendTitle
}}
</strong>
series
{{
index
+
1
}}
</t
rack-info
>
</td>
<td
v-else
>
<strong>
{{ legendTitle }}
</strong>
{{ summaryMetrics(series) }}
<track-info
:track=
"series"
>
<strong>
{{
legendTitle
}}
</strong>
</track-info>
</td>
<template
v-for=
"(track, trackIndex) in series.tracksLegend"
>
<track-line
:track=
"track"
:key=
"`track-line-$
{trackIndex}`"/>
<td
:key=
"`track-info-$
{trackIndex}`">
<track-info
:track=
"track"
/>
</td>
</
template
>
</tr>
</table>
</div>
...
...
app/assets/javascripts/monitoring/components/graph/track_info.vue
0 → 100644
View file @
af871639
<
script
>
import
{
formatRelevantDigits
}
from
'
~/lib/utils/number_utils
'
;
export
default
{
name
:
'
TrackInfo
'
,
props
:
{
track
:
{
type
:
Object
,
required
:
true
,
},
},
computed
:
{
summaryMetrics
()
{
return
`Avg:
${
formatRelevantDigits
(
this
.
track
.
average
)}
· Max:
${
formatRelevantDigits
(
this
.
track
.
max
,
)}
`
;
},
},
};
</
script
>
<
template
>
<span>
<slot>
<strong>
{{
track
.
metricTag
}}
</strong>
</slot>
{{
summaryMetrics
}}
</span>
</
template
>
app/assets/javascripts/monitoring/components/graph/track_line.vue
0 → 100644
View file @
af871639
<
script
>
export
default
{
name
:
'
TrackLine
'
,
props
:
{
track
:
{
type
:
Object
,
required
:
true
,
},
},
methods
:
{
strokeDashArray
(
type
)
{
if
(
type
===
'
dashed
'
)
return
'
6, 3
'
;
if
(
type
===
'
dotted
'
)
return
'
3, 3
'
;
return
null
;
},
},
};
</
script
>
<
template
>
<td>
<svg
width=
"15"
height=
"6"
>
<line
:stroke-dasharray=
"strokeDashArray(track.lineStyle)"
:stroke=
"track.lineColor"
stroke-width=
"4"
:x1=
"0"
:x2=
"15"
:y1=
"2"
:y2=
"2"
/>
</svg>
</td>
</
template
>
app/assets/javascripts/monitoring/utils/multiple_time_series.js
View file @
af871639
...
...
@@ -31,6 +31,8 @@ const defaultStyleOrder = ['solid', 'dashed', 'dotted'];
function
queryTimeSeries
(
query
,
graphWidth
,
graphHeight
,
graphHeightOffset
,
xDom
,
yDom
,
lineStyle
)
{
let
usedColors
=
[];
let
renderCanary
=
false
;
const
timeSeriesParsed
=
[];
function
pickColor
(
name
)
{
let
pick
;
...
...
@@ -49,14 +51,19 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
return
defaultColorPalette
[
pick
];
}
return
query
.
result
.
map
((
timeSeries
,
timeSeriesNumber
)
=>
{
query
.
result
.
forEach
((
timeSeries
,
timeSeriesNumber
)
=>
{
let
metricTag
=
''
;
let
lineColor
=
''
;
let
areaColor
=
''
;
let
shouldRenderLegend
=
true
;
const
timeSeriesValues
=
timeSeries
.
values
.
map
(
d
=>
d
.
value
);
const
maximumValue
=
d3
.
max
(
timeSeriesValues
);
const
accum
=
d3
.
sum
(
timeSeriesValues
);
const
track
=
capitalizeFirstCharacter
(
query
.
track
?
query
.
track
:
'
Stable
'
);
const
trackName
=
capitalizeFirstCharacter
(
query
.
track
?
query
.
track
:
'
Stable
'
);
if
(
trackName
===
'
Canary
'
)
{
renderCanary
=
true
;
}
const
timeSeriesScaleX
=
d3
.
scaleTime
().
range
([
0
,
graphWidth
-
70
]);
...
...
@@ -90,12 +97,29 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
if
(
seriesCustomizationData
)
{
metricTag
=
seriesCustomizationData
.
value
||
timeSeriesMetricLabel
;
[
lineColor
,
areaColor
]
=
pickColor
(
seriesCustomizationData
.
color
);
shouldRenderLegend
=
false
;
}
else
{
metricTag
=
timeSeriesMetricLabel
||
query
.
label
||
`series
${
timeSeriesNumber
+
1
}
`
;
[
lineColor
,
areaColor
]
=
pickColor
();
if
(
timeSeriesParsed
.
length
>
1
)
{
shouldRenderLegend
=
false
;
}
}
return
{
if
(
!
shouldRenderLegend
)
{
if
(
!
timeSeriesParsed
[
0
].
tracksLegend
)
{
timeSeriesParsed
[
0
].
tracksLegend
=
[];
}
timeSeriesParsed
[
0
].
tracksLegend
.
push
({
max
:
maximumValue
,
average
:
accum
/
timeSeries
.
values
.
length
,
lineStyle
,
lineColor
,
metricTag
,
});
}
timeSeriesParsed
.
push
({
linePath
:
lineFunction
(
timeSeries
.
values
),
areaPath
:
areaFunction
(
timeSeries
.
values
),
timeSeriesScaleX
,
...
...
@@ -106,9 +130,13 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
lineColor
,
areaColor
,
metricTag
,
track
,
};
trackName
,
shouldRenderLegend
,
renderCanary
,
});
});
return
timeSeriesParsed
;
}
export
default
function
createTimeSeries
(
queries
,
graphWidth
,
graphHeight
,
graphHeightOffset
)
{
...
...
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