Change environments dropdown to use gitlab-ui

1 files changed, 17 insertions, 21 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 895a57785bc..7883a3f9abc 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import Flash from '../../flash';
@@ -17,6 +18,8 @@ export default {
     GraphGroup,
     EmptyState,
     Icon,
+    GlDropdown,
+    GlDropdownItem,
   },
   props: {
     hasMetrics: {
@@ -157,28 +160,21 @@ export default {
 <template>
   <div v-if="!showEmptyState" class="prometheus-graphs prepend-top-default">
     <div class="environments d-flex align-items-center">
-      {{ s__('Metrics|Environment') }}
-      <div class="dropdown prepend-left-10">
-        <button class="dropdown-menu-toggle" data-toggle="dropdown" type="button">
-          <span>{{ currentEnvironmentName }}</span>
-          <icon name="chevron-down" />
-        </button>
-        <div
-          v-if="store.environmentsData.length > 0"
-          class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"
+      <strong>{{ s__('Metrics|Environment') }}</strong>
+      <gl-dropdown
+        class="prepend-left-10 js-environments-dropdown"
+        toggle-class="dropdown-menu-toggle"
+        :text="currentEnvironmentName"
+        :disabled="store.environmentsData.length === 0"
+      >
+        <gl-dropdown-item
+          v-for="environment in store.environmentsData"
+          :key="environment.id"
+          :active="environment.name === currentEnvironmentName"
+          active-class="is-active"
+          >{{ environment.name }}</gl-dropdown-item
         >
-          <ul>
-            <li v-for="environment in store.environmentsData" :key="environment.id">
-              <a
-                :href="environment.metrics_path"
-                :class="{ 'is-active': environment.name == currentEnvironmentName }"
-                class="dropdown-item"
-                >{{ environment.name }}</a
-              >
-            </li>
-          </ul>
-        </div>
-      </div>
+      </gl-dropdown>
     </div>
     <graph-group
       v-for="(groupData, index) in store.groups"