Don't show Alert widget for non-licensed users

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -182,7 +182,8 @@ export default {
       {{ 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" />
+          <span>{{ currentEnvironmentName }}</span>
+          <icon name="chevron-down" />
         </button>
         <div
           v-if="store.environmentsData.length > 0"
@@ -194,9 +195,8 @@ export default {
                 :href="environment.metrics_path"
                 :class="{ 'is-active': environment.name == currentEnvironmentName }"
                 class="dropdown-item"
+                >{{ environment.name }}</a
               >
-                {{ environment.name }}
-              </a>
             </li>
           </ul>
         </div>
@@ -219,7 +219,7 @@ export default {
       >
         <!-- EE content -->
         <alert-widget
-          v-if="alertsEndpoint && graphData.id"
+          v-if="prometheusAlertsAvailable && alertsEndpoint && graphData.id"
           :alerts-endpoint="alertsEndpoint"
           :label="getGraphLabel(graphData)"
           :current-alerts="getQueryAlerts(graphData)"

app/assets/javascripts/pages/projects/environments/metrics/index.js

-import monitoringBundle from '~/monitoring/monitoring_bundle';
+import monitoringBundle from 'ee_else_ce/monitoring/monitoring_bundle';
 
 document.addEventListener('DOMContentLoaded', monitoringBundle);

ee/app/assets/javascripts/monitoring/components/dashboard_mixin.js

@@ -10,6 +10,11 @@ export default {
       required: false,
       default: null,
     },
+    prometheusAlertsAvailable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {

ee/app/assets/javascripts/monitoring/monitoring_bundle.js

+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import Dashboard from '~/monitoring/components/dashboard.vue';
+
+export default () => {
+  const el = document.getElementById('prometheus-graphs');
+
+  if (el && el.dataset) {
+    // eslint-disable-next-line no-new
+    new Vue({
+      el,
+      render(createElement) {
+        return createElement(Dashboard, {
+          props: {
+            ...el.dataset,
+            hasMetrics: parseBoolean(el.dataset.hasMetrics),
+            prometheusAlertsAvailable: parseBoolean(el.dataset.prometheusAlertsAvailable),
+          },
+        });
+      },
+    });
+  }
+};

ee/changelogs/unreleased/8346-hide-unlicensed-alerts.yml

+---
+title: Don't show Alert widget for non-licensed users
+merge_request: 9224
+author:
+type: fixed

ee/spec/javascripts/monitoring/components/dashboard_spec.js

+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import Dashboard from '~/monitoring/components/dashboard.vue';
+import axios from '~/lib/utils/axios_utils';
+import { metricsGroupsAPIResponse, mockApiEndpoint } from 'spec/monitoring/mock_data';
+import propsData from 'spec/monitoring/dashboard_spec';
+import AlertWidget from 'ee/monitoring/components/alert_widget.vue';
+
+describe('Dashboard', () => {
+  let Component;
+  let mock;
+  let vm;
+  const localVue = createLocalVue();
+
+  beforeEach(() => {
+    setFixtures(`
+      <div class="prometheus-graphs"></div>
+      <div class="layout-page"></div>
+    `);
+    mock = new MockAdapter(axios);
+    Component = localVue.extend(Dashboard);
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  describe('metrics with alert', () => {
+    describe('with license', () => {
+      beforeEach(() => {
+        mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
+        vm = shallowMount(Component, {
+          propsData: {
+            ...propsData,
+            hasMetrics: true,
+            prometheusAlertsAvailable: true,
+            alertsEndpoint: '/endpoint',
+          },
+        });
+      });
+
+      it('shows alert widget', done => {
+        setTimeout(() => {
+          expect(vm.find(AlertWidget).exists()).toBe(true);
+          done();
+        });
+      });
+    });
+
+    describe('without license', () => {
+      beforeEach(() => {
+        mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
+        vm = shallowMount(Component, {
+          propsData: {
+            ...propsData,
+            hasMetrics: true,
+            prometheusAlertsAvailable: false,
+            alertsEndpoint: '/endpoint',
+          },
+        });
+      });
+
+      it('does not show alert widget', done => {
+        setTimeout(() => {
+          expect(vm.find(AlertWidget).exists()).toBe(false);
+          done();
+        });
+      });
+    });
+  });
+});

spec/javascripts/monitoring/dashboard_spec.js

@@ -25,15 +25,22 @@ export default propsData;
 
 describe('Dashboard', () => {
   let DashboardComponent;
+  let mock;
 
   beforeEach(() => {
     setFixtures(`
       <div class="prometheus-graphs"></div>
       <div class="layout-page"></div>
     `);
+
+    mock = new MockAdapter(axios);
     DashboardComponent = Vue.extend(Dashboard);
   });
 
+  afterEach(() => {
+    mock.restore();
+  });
+
   describe('no metrics are available yet', () => {
     it('shows a getting started empty state when no metrics are present', () => {
       const component = new DashboardComponent({
@@ -47,16 +54,10 @@ describe('Dashboard', () => {
   });
 
   describe('requests information to the server', () => {
-    let mock;
     beforeEach(() => {
-      mock = new MockAdapter(axios);
       mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
     });
 
-    afterEach(() => {
-      mock.restore();
-    });
-
     it('shows up a loading state', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
@@ -171,15 +172,12 @@ describe('Dashboard', () => {
   });
 
   describe('when the window resizes', () => {
-    let mock;
     beforeEach(() => {
-      mock = new MockAdapter(axios);
       mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
       jasmine.clock().install();
     });
 
     afterEach(() => {
-      mock.restore();
       jasmine.clock().uninstall();
     });