1 files changed, 6 insertions, 20 deletions
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue
index 7f70433776d..06c7f10223a 100644
--- a/app/assets/javascripts/environments/components/environment_monitoring.vue
+++ b/app/assets/javascripts/environments/components/environment_monitoring.vue
@@ -1,15 +1,12 @@
 <script>
-import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 import { __ } from '~/locale';
 /**
  * Renders the Monitoring (Metrics) link in environments table.
  */
 export default {
   components: {
-    GlButton,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
+    GlDropdownItem,
   },
   props: {
     monitoringUrl: {
@@ -17,22 +14,11 @@ export default {
       required: true,
     },
   },
-  computed: {
-    title() {
-      return __('Monitoring');
-    },
-  },
+  title: __('Monitoring'),
 };
 </script>
 <template>
-  <gl-button
-    v-gl-tooltip
-    :href="monitoringUrl"
-    :title="title"
-    :aria-label="title"
-    class="monitoring-url gl-display-none gl-sm-display-none gl-md-display-block"
-    icon="chart"
-    rel="noopener noreferrer nofollow"
-    variant="default"
-  />
+  <gl-dropdown-item :href="monitoringUrl" rel="noopener noreferrer nofollow" target="_blank">
+    {{ $options.title }}
+  </gl-dropdown-item>
 </template>