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
70bff97c
Commit
70bff97c
authored
7 years ago
by
Mike Greiling
Committed by
Phil Hughes
7 years ago
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Use flexbox for prometheus graph row grouping instead of bootstrap classes
parent
6a831b52
Changes
8
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
35 additions
and
151 deletions
+35
-151
app/assets/javascripts/monitoring/components/dashboard.vue
app/assets/javascripts/monitoring/components/dashboard.vue
+5
-5
app/assets/javascripts/monitoring/components/graph.vue
app/assets/javascripts/monitoring/components/graph.vue
+5
-10
app/assets/javascripts/monitoring/components/graph_group.vue
app/assets/javascripts/monitoring/components/graph_group.vue
+1
-1
app/assets/javascripts/monitoring/components/graph_row.vue
app/assets/javascripts/monitoring/components/graph_row.vue
+0
-41
app/assets/javascripts/monitoring/stores/monitoring_store.js
app/assets/javascripts/monitoring/stores/monitoring_store.js
+2
-24
app/assets/stylesheets/pages/environments.scss
app/assets/stylesheets/pages/environments.scss
+20
-6
spec/javascripts/monitoring/graph_row_spec.js
spec/javascripts/monitoring/graph_row_spec.js
+0
-62
spec/javascripts/monitoring/monitoring_store_spec.js
spec/javascripts/monitoring/monitoring_store_spec.js
+2
-2
No files found.
app/assets/javascripts/monitoring/components/dashboard.vue
View file @
70bff97c
...
...
@@ -4,7 +4,7 @@
import
statusCodes
from
'
../../lib/utils/http_status
'
;
import
MonitoringService
from
'
../services/monitoring_service
'
;
import
GraphGroup
from
'
./graph_group.vue
'
;
import
Graph
Row
from
'
./graph_row
.vue
'
;
import
Graph
from
'
./graph
.vue
'
;
import
EmptyState
from
'
./empty_state.vue
'
;
import
MonitoringStore
from
'
../stores/monitoring_store
'
;
import
eventHub
from
'
../event_hub
'
;
...
...
@@ -32,8 +32,8 @@
},
components
:
{
Graph
,
GraphGroup
,
GraphRow
,
EmptyState
,
},
...
...
@@ -127,10 +127,10 @@
:key=
"index"
:name=
"groupData.group"
>
<graph
-row
v-for=
"(
row
, index) in groupData.metrics"
<graph
v-for=
"(
graphData
, index) in groupData.metrics"
:key=
"index"
:
row-data=
"row
"
:
graph-data=
"graphData
"
:update-aspect-ratio=
"updateAspectRatio"
:deployment-data=
"store.deploymentData"
/>
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/monitoring/components/graph.vue
View file @
70bff97c
...
...
@@ -19,10 +19,6 @@
type
:
Object
,
required
:
true
,
},
classType
:
{
type
:
String
,
required
:
true
,
},
updateAspectRatio
:
{
type
:
Boolean
,
required
:
true
,
...
...
@@ -207,12 +203,11 @@
},
};
</
script
>
<
template
>
<div
:class=
"classType"
>
<h5
class=
"text-center graph-title"
>
{{
graphData
.
title
}}
<div
class=
"prometheus-graph"
>
<h5
class=
"text-center graph-title"
>
{{
graphData
.
title
}}
</h5>
<div
class=
"prometheus-svg-container"
...
...
@@ -243,7 +238,7 @@
class=
"graph-data"
:viewBox=
"innerViewBox"
ref=
"graphData"
>
<monitoring-paths
<monitoring-paths
v-for=
"(path, index) in timeSeries"
:key=
"index"
:generated-line-path=
"path.linePath"
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/monitoring/components/graph_group.vue
View file @
70bff97c
...
...
@@ -14,7 +14,7 @@ export default {
<div
class=
"panel-heading"
>
<h4>
{{
name
}}
</h4>
</div>
<div
class=
"panel-body"
>
<div
class=
"panel-body
prometheus-graph-group
"
>
<slot
/>
</div>
</div>
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/monitoring/components/graph_row.vue
deleted
100644 → 0
View file @
6a831b52
<
script
>
import
Graph
from
'
./graph.vue
'
;
export
default
{
props
:
{
rowData
:
{
type
:
Array
,
required
:
true
,
},
updateAspectRatio
:
{
type
:
Boolean
,
required
:
true
,
},
deploymentData
:
{
type
:
Array
,
required
:
true
,
},
},
components
:
{
Graph
,
},
computed
:
{
bootstrapClass
()
{
return
this
.
rowData
.
length
>=
2
?
'
col-md-6
'
:
'
col-md-12
'
;
},
},
};
</
script
>
<
template
>
<div
class=
"prometheus-row row"
>
<graph
v-for=
"(graphData, index) in rowData"
:graph-data=
"graphData"
:class-type=
"bootstrapClass"
:key=
"index"
:update-aspect-ratio=
"updateAspectRatio"
:deployment-data=
"deploymentData"
/>
</div>
</
template
>
This diff is collapsed.
Click to expand it.
app/assets/javascripts/monitoring/stores/monitoring_store.js
View file @
70bff97c
...
...
@@ -20,22 +20,6 @@ function normalizeMetrics(metrics) {
}));
}
function
collate
(
array
,
rows
=
2
)
{
const
collatedArray
=
[];
let
row
=
[];
array
.
forEach
((
value
,
index
)
=>
{
row
.
push
(
value
);
if
((
index
+
1
)
%
rows
===
0
)
{
collatedArray
.
push
(
row
);
row
=
[];
}
});
if
(
row
.
length
>
0
)
{
collatedArray
.
push
(
row
);
}
return
collatedArray
;
}
export
default
class
MonitoringStore
{
constructor
()
{
this
.
groups
=
[];
...
...
@@ -45,7 +29,7 @@ export default class MonitoringStore {
storeMetrics
(
groups
=
[])
{
this
.
groups
=
groups
.
map
(
group
=>
({
...
group
,
metrics
:
collate
(
normalizeMetrics
(
sortMetrics
(
group
.
metrics
)
)),
metrics
:
normalizeMetrics
(
sortMetrics
(
group
.
metrics
)),
}));
}
...
...
@@ -54,12 +38,6 @@ export default class MonitoringStore {
}
getMetricsCount
()
{
let
metricsCount
=
0
;
this
.
groups
.
forEach
((
group
)
=>
{
group
.
metrics
.
forEach
((
metric
)
=>
{
metricsCount
=
metricsCount
+=
metric
.
length
;
});
});
return
metricsCount
;
return
this
.
groups
.
reduce
((
count
,
group
)
=>
count
+
group
.
metrics
.
length
,
0
);
}
}
This diff is collapsed.
Click to expand it.
app/assets/stylesheets/pages/environments.scss
View file @
70bff97c
...
...
@@ -227,6 +227,26 @@
margin-top
:
20px
;
}
.prometheus-graph-group
{
display
:
flex
;
flex-wrap
:
wrap
;
padding
:
$gl-padding
/
2
;
}
.prometheus-graph
{
flex
:
1
0
auto
;
min-width
:
450px
;
padding
:
$gl-padding
/
2
;
h5
{
font-size
:
16px
;
}
@media
(
max-width
:
$screen-sm-max
)
{
min-width
:
100%
;
}
}
.prometheus-svg-container
{
position
:
relative
;
height
:
0
;
...
...
@@ -297,9 +317,3 @@
}
}
}
.prometheus-row
{
h5
{
font-size
:
16px
;
}
}
This diff is collapsed.
Click to expand it.
spec/javascripts/monitoring/graph_row_spec.js
deleted
100644 → 0
View file @
6a831b52
import
Vue
from
'
vue
'
;
import
GraphRow
from
'
~/monitoring/components/graph_row.vue
'
;
import
MonitoringMixins
from
'
~/monitoring/mixins/monitoring_mixins
'
;
import
{
deploymentData
,
convertDatesMultipleSeries
,
singleRowMetricsMultipleSeries
}
from
'
./mock_data
'
;
const
createComponent
=
(
propsData
)
=>
{
const
Component
=
Vue
.
extend
(
GraphRow
);
return
new
Component
({
propsData
,
}).
$mount
();
};
const
convertedMetrics
=
convertDatesMultipleSeries
(
singleRowMetricsMultipleSeries
);
describe
(
'
GraphRow
'
,
()
=>
{
beforeEach
(()
=>
{
spyOn
(
MonitoringMixins
.
methods
,
'
formatDeployments
'
).
and
.
returnValue
({});
});
describe
(
'
Computed props
'
,
()
=>
{
it
(
'
bootstrapClass is set to col-md-6 when rowData is higher/equal to 2
'
,
()
=>
{
const
component
=
createComponent
({
rowData
:
convertedMetrics
,
updateAspectRatio
:
false
,
deploymentData
,
});
expect
(
component
.
bootstrapClass
).
toEqual
(
'
col-md-6
'
);
});
it
(
'
bootstrapClass is set to col-md-12 when rowData is lower than 2
'
,
()
=>
{
const
component
=
createComponent
({
rowData
:
[
convertedMetrics
[
0
]],
updateAspectRatio
:
false
,
deploymentData
,
});
expect
(
component
.
bootstrapClass
).
toEqual
(
'
col-md-12
'
);
});
});
it
(
'
has one column
'
,
()
=>
{
const
component
=
createComponent
({
rowData
:
convertedMetrics
,
updateAspectRatio
:
false
,
deploymentData
,
});
expect
(
component
.
$el
.
querySelectorAll
(
'
.prometheus-svg-container
'
).
length
)
.
toEqual
(
component
.
rowData
.
length
);
});
it
(
'
has two columns
'
,
()
=>
{
const
component
=
createComponent
({
rowData
:
convertedMetrics
,
updateAspectRatio
:
false
,
deploymentData
,
});
expect
(
component
.
$el
.
querySelectorAll
(
'
.col-md-6
'
).
length
)
.
toEqual
(
component
.
rowData
.
length
);
});
});
This diff is collapsed.
Click to expand it.
spec/javascripts/monitoring/monitoring_store_spec.js
View file @
70bff97c
...
...
@@ -5,10 +5,10 @@ describe('MonitoringStore', () => {
this
.
store
=
new
MonitoringStore
();
this
.
store
.
storeMetrics
(
MonitoringMock
.
data
);
it
(
'
contains one group that contains two queries sorted by priority
in one row
'
,
()
=>
{
it
(
'
contains one group that contains two queries sorted by priority
'
,
()
=>
{
expect
(
this
.
store
.
groups
).
toBeDefined
();
expect
(
this
.
store
.
groups
.
length
).
toEqual
(
1
);
expect
(
this
.
store
.
groups
[
0
].
metrics
.
length
).
toEqual
(
1
);
expect
(
this
.
store
.
groups
[
0
].
metrics
.
length
).
toEqual
(
2
);
});
it
(
'
gets the metrics count for every group
'
,
()
=>
{
...
...
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