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
98c66ae1
Commit
98c66ae1
authored
Mar 20, 2019
by
Jose Vargas
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Change environments dropdown to use gitlab-ui
parent
b282fe8d
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
30 additions
and
33 deletions
+30
-33
app/assets/javascripts/monitoring/components/dashboard.vue
app/assets/javascripts/monitoring/components/dashboard.vue
+17
-22
spec/javascripts/monitoring/dashboard_spec.js
spec/javascripts/monitoring/dashboard_spec.js
+13
-11
No files found.
app/assets/javascripts/monitoring/components/dashboard.vue
View file @
98c66ae1
<
script
>
<
script
>
// ee-only
// ee-only
import
DashboardMixin
from
'
ee/monitoring/components/dashboard_mixin
'
;
import
DashboardMixin
from
'
ee/monitoring/components/dashboard_mixin
'
;
import
{
GlDropdown
,
GlDropdownItem
}
from
'
@gitlab/ui
'
;
import
{
s__
}
from
'
~/locale
'
;
import
{
s__
}
from
'
~/locale
'
;
import
Icon
from
'
~/vue_shared/components/icon.vue
'
;
import
Icon
from
'
~/vue_shared/components/icon.vue
'
;
import
Flash
from
'
../../flash
'
;
import
Flash
from
'
../../flash
'
;
...
@@ -20,6 +20,8 @@ export default {
...
@@ -20,6 +20,8 @@ export default {
GraphGroup
,
GraphGroup
,
EmptyState
,
EmptyState
,
Icon
,
Icon
,
GlDropdown
,
GlDropdownItem
,
},
},
// ee-only
// ee-only
...
@@ -179,28 +181,21 @@ export default {
...
@@ -179,28 +181,21 @@ export default {
<
template
>
<
template
>
<div
v-if=
"!showEmptyState"
class=
"prometheus-graphs prepend-top-default"
>
<div
v-if=
"!showEmptyState"
class=
"prometheus-graphs prepend-top-default"
>
<div
v-if=
"showEnvironmentDropdown"
class=
"environments d-flex align-items-center"
>
<div
v-if=
"showEnvironmentDropdown"
class=
"environments d-flex align-items-center"
>
{{
s__
(
'
Metrics|Environment
'
)
}}
<strong>
{{
s__
(
'
Metrics|Environment
'
)
}}
</strong>
<div
class=
"dropdown prepend-left-10"
>
<gl-dropdown
<button
class=
"dropdown-menu-toggle"
data-toggle=
"dropdown"
type=
"button"
>
class=
"prepend-left-10 js-environments-dropdown"
<span>
{{
currentEnvironmentName
}}
</span>
toggle-class=
"dropdown-menu-toggle"
<icon
name=
"chevron-down"
/>
:text=
"currentEnvironmentName"
</button>
:disabled=
"store.environmentsData.length === 0"
<div
v-if=
"store.environmentsData.length > 0"
class=
"dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"
>
>
<ul>
<gl-dropdown-item
<li
v-for=
"environment in store.environmentsData"
:key=
"environment.id"
>
v-for=
"environment in store.environmentsData"
<a
:key=
"environment.id"
:href=
"environment.metrics_path"
:active=
"environment.name === currentEnvironmentName"
:class=
"
{ 'is-active': environment.name == currentEnvironmentName }"
active-class=
"is-active"
class="dropdown-item"
>
{{
environment
.
name
}}
</gl-dropdown-item
>
{{
environment
.
name
}}
</a
>
>
</li>
</gl-dropdown>
</ul>
</div>
</div>
</div>
</div>
<graph-group
<graph-group
v-for=
"(groupData, index) in store.groups"
v-for=
"(groupData, index) in store.groups"
...
...
spec/javascripts/monitoring/dashboard_spec.js
View file @
98c66ae1
...
@@ -98,7 +98,7 @@ describe('Dashboard', () => {
...
@@ -98,7 +98,7 @@ describe('Dashboard', () => {
});
});
});
});
it
(
'
renders the dropdown with a number of environments
'
,
done
=>
{
it
(
'
renders the
environments
dropdown with a number of environments
'
,
done
=>
{
const
component
=
new
DashboardComponent
({
const
component
=
new
DashboardComponent
({
el
:
document
.
querySelector
(
'
.prometheus-graphs
'
),
el
:
document
.
querySelector
(
'
.prometheus-graphs
'
),
propsData
:
{
...
propsData
,
hasMetrics
:
true
,
showPanels
:
false
},
propsData
:
{
...
propsData
,
hasMetrics
:
true
,
showPanels
:
false
},
...
@@ -107,14 +107,16 @@ describe('Dashboard', () => {
...
@@ -107,14 +107,16 @@ describe('Dashboard', () => {
component
.
store
.
storeEnvironmentsData
(
environmentData
);
component
.
store
.
storeEnvironmentsData
(
environmentData
);
setTimeout
(()
=>
{
setTimeout
(()
=>
{
const
dropdownMenuEnvironments
=
component
.
$el
.
querySelectorAll
(
'
.dropdown-menu ul li a
'
);
const
dropdownMenuEnvironments
=
component
.
$el
.
querySelectorAll
(
'
.js-environments-dropdown .dropdown-item
'
,
);
expect
(
dropdownMenuEnvironments
.
length
).
toEqual
(
component
.
store
.
environmentsData
.
length
);
expect
(
dropdownMenuEnvironments
.
length
).
toEqual
(
component
.
store
.
environmentsData
.
length
);
done
();
done
();
});
});
});
});
it
(
'
hides the dropdown list when there is no environments
'
,
done
=>
{
it
(
'
hides the
environments
dropdown list when there is no environments
'
,
done
=>
{
const
component
=
new
DashboardComponent
({
const
component
=
new
DashboardComponent
({
el
:
document
.
querySelector
(
'
.prometheus-graphs
'
),
el
:
document
.
querySelector
(
'
.prometheus-graphs
'
),
propsData
:
{
...
propsData
,
hasMetrics
:
true
,
showPanels
:
false
},
propsData
:
{
...
propsData
,
hasMetrics
:
true
,
showPanels
:
false
},
...
@@ -123,14 +125,16 @@ describe('Dashboard', () => {
...
@@ -123,14 +125,16 @@ describe('Dashboard', () => {
component
.
store
.
storeEnvironmentsData
([]);
component
.
store
.
storeEnvironmentsData
([]);
setTimeout
(()
=>
{
setTimeout
(()
=>
{
const
dropdownMenuEnvironments
=
component
.
$el
.
querySelectorAll
(
'
.dropdown-menu ul
'
);
const
dropdownMenuEnvironments
=
component
.
$el
.
querySelectorAll
(
'
.js-environments-dropdown .dropdown-item
'
,
);
expect
(
dropdownMenuEnvironments
.
length
).
toEqual
(
0
);
expect
(
dropdownMenuEnvironments
.
length
).
toEqual
(
0
);
done
();
done
();
});
});
});
});
it
(
'
renders the dropdown with a single is-active element
'
,
done
=>
{
it
(
'
renders the
environments
dropdown with a single is-active element
'
,
done
=>
{
const
component
=
new
DashboardComponent
({
const
component
=
new
DashboardComponent
({
el
:
document
.
querySelector
(
'
.prometheus-graphs
'
),
el
:
document
.
querySelector
(
'
.prometheus-graphs
'
),
propsData
:
{
...
propsData
,
hasMetrics
:
true
,
showPanels
:
false
},
propsData
:
{
...
propsData
,
hasMetrics
:
true
,
showPanels
:
false
},
...
@@ -139,14 +143,12 @@ describe('Dashboard', () => {
...
@@ -139,14 +143,12 @@ describe('Dashboard', () => {
component
.
store
.
storeEnvironmentsData
(
environmentData
);
component
.
store
.
storeEnvironmentsData
(
environmentData
);
setTimeout
(()
=>
{
setTimeout
(()
=>
{
const
dropdownI
sActiveElement
=
component
.
$el
.
querySelectorAll
(
const
dropdownI
tems
=
component
.
$el
.
querySelectorAll
(
'
.
dropdown-menu ul li a.is-active
'
,
'
.
js-environments-dropdown .dropdown-item[active="true"]
'
,
);
);
expect
(
dropdownIsActiveElement
.
length
).
toEqual
(
1
);
expect
(
dropdownItems
.
length
).
toEqual
(
1
);
expect
(
dropdownIsActiveElement
[
0
].
textContent
.
trim
()).
toEqual
(
expect
(
dropdownItems
[
0
].
textContent
.
trim
()).
toEqual
(
component
.
currentEnvironmentName
);
component
.
currentEnvironmentName
,
);
done
();
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