Merge panel and panel with alerts

Refactor the following monitoring dashboard js files.
These files were moved into CE from EE.

- dashboard_panel_with_alerts.vue
- dashboard_panel_with_alerts_spec.js

The above files can be merged into the following respective files:

- dashboard_panel.vue
- dashboard_panel_spec.js

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

@@ -14,7 +14,7 @@ import {
   GlModalDirective,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import DashboardPanel from './dashboard_panel_with_alerts.vue';
+import DashboardPanel from './dashboard_panel.vue';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';

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

@@ -26,6 +26,7 @@ import MonitorBarChart from './charts/bar.vue';
 import MonitorStackedColumnChart from './charts/stacked_column.vue';
 
 import TrackEventDirective from '~/vue_shared/directives/track_event';
+import AlertWidget from './alert_widget.vue';
 import { timeRangeToUrl, downloadCSVOptions, generateLinkToChartOptions } from '../utils';
 
 const events = {
@@ -40,6 +41,7 @@ export default {
     MonitorColumnChart,
     MonitorBarChart,
     MonitorStackedColumnChart,
+    AlertWidget,
     GlIcon,
     GlLoadingIcon,
     GlTooltip,
@@ -78,11 +80,22 @@ export default {
       required: false,
       default: 'monitoringDashboard',
     },
+    alertsEndpoint: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    prometheusAlertsAvailable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
       showTitleTooltip: false,
       zoomedTimeRange: null,
+      allAlerts: {},
     };
   },
   computed: {
@@ -104,14 +117,13 @@ export default {
       timeRange(state) {
         return state[this.namespace].timeRange;
       },
+      metricsSavedToDb(state, getters) {
+        return getters[`${this.namespace}/metricsSavedToDb`];
+      },
     }),
     title() {
       return this.graphData.title || '';
     },
-    alertWidgetAvailable() {
-      // This method is extended by ee functionality
-      return false;
-    },
     graphDataHasResult() {
       return (
         this.graphData.metrics &&
@@ -165,6 +177,18 @@ export default {
     editCustomMetricLinkText() {
       return n__('Metrics|Edit metric', 'Metrics|Edit metrics', this.graphData.metrics.length);
     },
+    hasMetricsInDb() {
+      const { metrics = [] } = this.graphData;
+      return metrics.some(({ metricId }) => this.metricsSavedToDb.includes(metricId));
+    },
+    alertWidgetAvailable() {
+      return (
+        this.prometheusAlertsAvailable &&
+        this.alertsEndpoint &&
+        this.graphData &&
+        this.hasMetricsInDb
+      );
+    },
   },
   mounted() {
     this.refreshTitleTooltip();
@@ -200,6 +224,13 @@ export default {
       this.zoomedTimeRange = { start, end };
       this.$emit(events.timeRangeZoom, { start, end });
     },
+    setAlerts(alertPath, alertAttributes) {
+      if (alertAttributes) {
+        this.$set(this.allAlerts, alertPath, alertAttributes);
+      } else {
+        this.$delete(this.allAlerts, alertPath);
+      }
+    },
   },
   panelTypes,
 };

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

-<script>
-import { mapGetters } from 'vuex';
-import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
-import CePanelType from '~/monitoring/components/dashboard_panel.vue';
-import AlertWidget from './alert_widget.vue';
-
-export default {
-  components: {
-    AlertWidget,
-    CustomMetricsFormFields,
-  },
-  extends: CePanelType,
-  props: {
-    alertsEndpoint: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    prometheusAlertsAvailable: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      allAlerts: {},
-    };
-  },
-  computed: {
-    ...mapGetters('monitoringDashboard', ['metricsSavedToDb']),
-    hasMetricsInDb() {
-      const { metrics = [] } = this.graphData;
-      return metrics.some(({ metricId }) => this.metricsSavedToDb.includes(metricId));
-    },
-    alertWidgetAvailable() {
-      return (
-        this.prometheusAlertsAvailable &&
-        this.alertsEndpoint &&
-        this.graphData &&
-        this.hasMetricsInDb
-      );
-    },
-  },
-  methods: {
-    setAlerts(alertPath, alertAttributes) {
-      if (alertAttributes) {
-        this.$set(this.allAlerts, alertPath, alertAttributes);
-      } else {
-        this.$delete(this.allAlerts, alertPath);
-      }
-    },
-  },
-};
-</script>

app/assets/javascripts/monitoring/components/embeds/metric_embed.vue

 <script>
 import { mapState, mapActions } from 'vuex';
-import DashboardPanel from '~/monitoring/components/dashboard_panel_with_alerts.vue';
+import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
 import { defaultTimeRange } from '~/vue_shared/constants';
 import { timeRangeFromUrl, removeTimeRangeParams } from '../../utils';

spec/frontend/monitoring/components/dashboard_panel_spec.js

+import Vuex from 'vuex';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import { setTestTimeout } from 'helpers/timeout';
 import invalidUrl from '~/lib/utils/invalid_url';
 import axios from '~/lib/utils/axios_utils';
+import { GlDropdownItem } from '@gitlab/ui';
+import AlertWidget from '~/monitoring/components/alert_widget.vue';
 
 import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
 import {
@@ -432,4 +435,52 @@ describe('Dashboard Panel', () => {
       expect(wrapper.find(MonitorTimeSeriesChart).exists()).toBe(true);
     });
   });
+
+  describe('panel alerts', () => {
+    const setMetricsSavedToDb = val =>
+      monitoringDashboard.getters.metricsSavedToDb.mockReturnValue(val);
+    const findAlertsWidget = () => wrapper.find(AlertWidget);
+    const findMenuItemAlert = () =>
+      wrapper.findAll(GlDropdownItem).filter(i => i.text() === 'Alerts');
+
+    beforeEach(() => {
+      jest.spyOn(monitoringDashboard.getters, 'metricsSavedToDb').mockReturnValue([]);
+
+      store = new Vuex.Store({
+        modules: {
+          monitoringDashboard,
+        },
+      });
+
+      createWrapper();
+    });
+
+    describe.each`
+      desc                                              | metricsSavedToDb                   | propsData                               | isShown
+      ${'with permission and no metrics in db'}         | ${[]}                              | ${{}}                                   | ${false}
+      ${'with permission and related metrics in db'}    | ${[graphData.metrics[0].metricId]} | ${{}}                                   | ${true}
+      ${'without permission and related metrics in db'} | ${[graphData.metrics[0].metricId]} | ${{ prometheusAlertsAvailable: false }} | ${false}
+      ${'with permission and unrelated metrics in db'}  | ${['another_metric_id']}           | ${{}}                                   | ${false}
+    `('$desc', ({ metricsSavedToDb, isShown, propsData }) => {
+      const showsDesc = isShown ? 'shows' : 'does not show';
+
+      beforeEach(() => {
+        setMetricsSavedToDb(metricsSavedToDb);
+        createWrapper({
+          alertsEndpoint: '/endpoint',
+          prometheusAlertsAvailable: true,
+          ...propsData,
+        });
+        return wrapper.vm.$nextTick();
+      });
+
+      it(`${showsDesc} alert widget`, () => {
+        expect(findAlertsWidget().exists()).toBe(isShown);
+      });
+
+      it(`${showsDesc} alert configuration`, () => {
+        expect(findMenuItemAlert().exists()).toBe(isShown);
+      });
+    });
+  });
 });

spec/frontend/monitoring/components/dashboard_panel_with_alerts_spec.js

-import Vuex from 'vuex';
-import { shallowMount } from '@vue/test-utils';
-import { GlDropdownItem } from '@gitlab/ui';
-import { monitoringDashboard } from '~/monitoring/stores';
-import DashboardPanel from '~/monitoring/components/dashboard_panel_with_alerts.vue';
-import AlertWidget from '~/monitoring/components/alert_widget.vue';
-import { graphData } from 'jest/monitoring/fixture_data';
-
-global.URL.createObjectURL = jest.fn();
-
-describe('Dashboard Panel', () => {
-  let store;
-  let wrapper;
-
-  const setMetricsSavedToDb = val =>
-    monitoringDashboard.getters.metricsSavedToDb.mockReturnValue(val);
-  const findAlertsWidget = () => wrapper.find(AlertWidget);
-  const findMenuItemAlert = () =>
-    wrapper.findAll(GlDropdownItem).filter(i => i.text() === 'Alerts');
-
-  const mockPropsData = {
-    graphData,
-    clipboardText: 'example_text',
-    alertsEndpoint: '/endpoint',
-    prometheusAlertsAvailable: true,
-  };
-
-  const createWrapper = propsData => {
-    wrapper = shallowMount(DashboardPanel, {
-      propsData: {
-        ...mockPropsData,
-        ...propsData,
-      },
-      store,
-    });
-  };
-
-  beforeEach(() => {
-    jest.spyOn(monitoringDashboard.getters, 'metricsSavedToDb').mockReturnValue([]);
-
-    store = new Vuex.Store({
-      modules: {
-        monitoringDashboard,
-      },
-    });
-  });
-
-  describe('panel alerts', () => {
-    describe.each`
-      desc                                           | metricsSavedToDb                   | propsData                               | isShown
-      ${'with license and no metrics in db'}         | ${[]}                              | ${{}}                                   | ${false}
-      ${'with license and related metrics in db'}    | ${[graphData.metrics[0].metricId]} | ${{}}                                   | ${true}
-      ${'without license and related metrics in db'} | ${[graphData.metrics[0].metricId]} | ${{ prometheusAlertsAvailable: false }} | ${false}
-      ${'with license and unrelated metrics in db'}  | ${['another_metric_id']}           | ${{}}                                   | ${false}
-    `('$desc', ({ metricsSavedToDb, isShown, propsData }) => {
-      const showsDesc = isShown ? 'shows' : 'does not show';
-
-      beforeEach(() => {
-        setMetricsSavedToDb(metricsSavedToDb);
-        createWrapper(propsData);
-        return wrapper.vm.$nextTick();
-      });
-
-      it(`${showsDesc} alert widget`, () => {
-        expect(findAlertsWidget().exists()).toBe(isShown);
-      });
-
-      it(`${showsDesc} alert configuration`, () => {
-        expect(findMenuItemAlert().exists()).toBe(isShown);
-      });
-    });
-  });
-});

spec/frontend/monitoring/components/dashboard_spec.js

@@ -12,7 +12,7 @@ import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_p
 import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
 import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
 import GroupEmptyState from '~/monitoring/components/group_empty_state.vue';
-import DashboardPanel from '~/monitoring/components/dashboard_panel_with_alerts.vue';
+import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
 import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
 import { setupStoreWithDashboard, setMetricResult, setupStoreWithData } from '../store_utils';

spec/frontend/monitoring/components/embeds/metric_embed_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
-import DashboardPanel from '~/monitoring/components/dashboard_panel_with_alerts.vue';
+import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue';
 import { groups, initialState, metricsData, metricsWithData } from './mock_data';