Commit 98c66ae1 authored by Jose Vargas's avatar Jose Vargas

Change environments dropdown to use gitlab-ui

parent b282fe8d
<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"
......
...@@ -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 dropdownIsActiveElement = component.$el.querySelectorAll( const dropdownItems = 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();
}); });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment