Merge branch '214458-panel-types-rename' into 'master'

Rename component `panel type` to `dashboard panel`

Closes #214458

See merge request gitlab-org/gitlab!29760

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

@@ -14,7 +14,7 @@ import {
   GlModalDirective,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import PanelType from './panel_type_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';
@@ -37,7 +37,7 @@ import { defaultTimeRange, timeRanges } from '~/vue_shared/constants';
 export default {
   components: {
     VueDraggable,
-    PanelType,
+    DashboardPanel,
     Icon,
     GlDeprecatedButton,
     GlDropdown,
@@ -558,7 +558,7 @@ export default {
         >
           <div
             v-for="(graphData, graphIndex) in groupData.panels"
-            :key="`panel-type-${graphIndex}`"
+            :key="`dashboard-panel-${graphIndex}`"
             class="col-12 col-lg-6 px-2 mb-2 draggable"
             :class="{ 'draggable-enabled': isRearrangingPanels }"
           >
@@ -573,7 +573,7 @@ export default {
                 </a>
               </div>
 
-              <panel-type
+              <dashboard-panel
                 :clipboard-text="generateLink(groupData.group, graphData.title, graphData.y_label)"
                 :graph-data="graphData"
                 :alerts-endpoint="alertsEndpoint"

app/assets/javascripts/monitoring/components/panel_type.vue → 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/embeds/metric_embed.vue

 <script>
 import { mapState, mapActions } from 'vuex';
-import PanelType from '~/monitoring/components/panel_type_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';
@@ -10,7 +10,7 @@ let sidebarMutationObserver;
 
 export default {
   components: {
-    PanelType,
+    DashboardPanel,
   },
   props: {
     containerClass: {
@@ -113,9 +113,9 @@ export default {
 </script>
 <template>
   <div class="metrics-embed p-0 d-flex flex-wrap" :class="embedClass">
-    <panel-type
+    <dashboard-panel
       v-for="(graphData, graphIndex) in charts"
-      :key="`panel-type-${graphIndex}`"
+      :key="`dashboard-panel-${graphIndex}`"
       :class="panelClass"
       :graph-data="graphData"
       :group-id="dashboardUrl"

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

-<script>
-import { mapGetters } from 'vuex';
-import CustomMetricsFormFields from '~/custom_metrics/components/custom_metrics_form_fields.vue';
-import CePanelType from '~/monitoring/components/panel_type.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>

qa/qa/page/project/operations/metrics/show.rb

@@ -21,7 +21,7 @@ module QA
               element :duplicate_dashboard_filename_field
             end
 
-            view 'app/assets/javascripts/monitoring/components/panel_type.vue' do
+            view 'app/assets/javascripts/monitoring/components/dashboard_panel.vue' do
               element :prometheus_graph_widgets
               element :prometheus_widgets_dropdown
               element :alert_widget_menu_item

spec/frontend/monitoring/components/panel_type_spec.js → 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 PanelType from '~/monitoring/components/panel_type.vue';
+import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
 import {
   anomalyMockGraphData,
   mockLogsHref,
@@ -40,7 +43,7 @@ const mocks = {
   },
 };
 
-describe('Panel Type component', () => {
+describe('Dashboard Panel', () => {
   let axiosMock;
   let store;
   let state;
@@ -54,7 +57,7 @@ describe('Panel Type component', () => {
   const findContextualMenu = () => wrapper.find({ ref: 'contextualMenu' });
 
   const createWrapper = props => {
-    wrapper = shallowMount(PanelType, {
+    wrapper = shallowMount(DashboardPanel, {
       propsData: {
         graphData,
         ...props,
@@ -343,7 +346,7 @@ describe('Panel Type component', () => {
 
   describe('when downloading metrics data as CSV', () => {
     beforeEach(() => {
-      wrapper = shallowMount(PanelType, {
+      wrapper = shallowMount(DashboardPanel, {
         propsData: {
           clipboardText: exampleText,
           graphData: {
@@ -392,7 +395,7 @@ describe('Panel Type component', () => {
       store.registerModule(mockNamespace, monitoringDashboard);
       store.state.embedGroup.modules.push(mockNamespace);
 
-      wrapper = shallowMount(PanelType, {
+      wrapper = shallowMount(DashboardPanel, {
         propsData: {
           graphData,
           namespace: mockNamespace,
@@ -432,4 +435,52 @@ describe('Panel Type component', () => {
       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_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 PanelType from '~/monitoring/components/panel_type_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';
@@ -48,6 +48,7 @@ describe('Dashboard', () => {
         fetchData: jest.fn(),
       },
       store,
+      stubs: ['graph-group', 'dashboard-panel'],
       ...options,
     });
   };
@@ -126,10 +127,7 @@ describe('Dashboard', () => {
     });
 
     it('hides the group panels when showPanels is false', () => {
-      createMountedWrapper(
-        { hasMetrics: true, showPanels: false },
-        { stubs: ['graph-group', 'panel-type'] },
-      );
+      createMountedWrapper({ hasMetrics: true, showPanels: false });
 
       setupStoreWithData(wrapper.vm.$store);
 
@@ -142,7 +140,7 @@ describe('Dashboard', () => {
     it('fetches the metrics data with proper time window', () => {
       jest.spyOn(store, 'dispatch');
 
-      createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
+      createMountedWrapper({ hasMetrics: true });
 
       wrapper.vm.$store.commit(
         `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
@@ -157,7 +155,7 @@ describe('Dashboard', () => {
 
   describe('when all requests have been commited by the store', () => {
     beforeEach(() => {
-      createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
+      createMountedWrapper({ hasMetrics: true });
 
       setupStoreWithData(wrapper.vm.$store);
 
@@ -186,7 +184,7 @@ describe('Dashboard', () => {
   });
 
   it('hides the environments dropdown list when there is no environments', () => {
-    createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
+    createMountedWrapper({ hasMetrics: true });
 
     setupStoreWithDashboard(wrapper.vm.$store);
 
@@ -196,7 +194,7 @@ describe('Dashboard', () => {
   });
 
   it('renders the datetimepicker dropdown', () => {
-    createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
+    createMountedWrapper({ hasMetrics: true });
 
     setupStoreWithData(wrapper.vm.$store);
 
@@ -206,7 +204,7 @@ describe('Dashboard', () => {
   });
 
   it('renders the refresh dashboard button', () => {
-    createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
+    createMountedWrapper({ hasMetrics: true });
 
     setupStoreWithData(wrapper.vm.$store);
 
@@ -249,13 +247,7 @@ describe('Dashboard', () => {
 
   describe('searchable environments dropdown', () => {
     beforeEach(() => {
-      createMountedWrapper(
-        { hasMetrics: true },
-        {
-          attachToDocument: true,
-          stubs: ['graph-group', 'panel-type'],
-        },
-      );
+      createMountedWrapper({ hasMetrics: true }, { attachToDocument: true });
 
       setupStoreWithData(wrapper.vm.$store);
 
@@ -465,7 +457,7 @@ describe('Dashboard', () => {
 
   describe('Dashboard dropdown', () => {
     beforeEach(() => {
-      createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
+      createMountedWrapper({ hasMetrics: true });
 
       wrapper.vm.$store.commit(
         `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,
@@ -484,15 +476,12 @@ describe('Dashboard', () => {
 
   describe('external dashboard link', () => {
     beforeEach(() => {
-      createMountedWrapper(
-        {
+      createMountedWrapper({
         hasMetrics: true,
         showPanels: false,
         showTimeWindowDropdown: false,
         externalDashboardUrl: '/mockUrl',
-        },
-        { stubs: ['graph-group', 'panel-type'] },
-      );
+      });
 
       return wrapper.vm.$nextTick();
     });
@@ -511,7 +500,7 @@ describe('Dashboard', () => {
 
     const getClipboardTextAt = i =>
       wrapper
-        .findAll(PanelType)
+        .findAll(DashboardPanel)
         .at(i)
         .props('clipboardText');
 

spec/frontend/monitoring/components/dashboard_url_time_spec.js

@@ -27,7 +27,7 @@ describe('dashboard invalid url parameters', () => {
     wrapper = mount(Dashboard, {
       propsData: { ...propsData, ...props },
       store,
-      stubs: ['graph-group', 'panel-type'],
+      stubs: ['graph-group', 'dashboard-panel'],
       ...options,
     });
   };

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

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
-import PanelType from '~/monitoring/components/panel_type_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';
@@ -62,7 +62,7 @@ describe('MetricEmbed', () => {
 
     it('shows an empty state when no metrics are present', () => {
       expect(wrapper.find('.metrics-embed').exists()).toBe(true);
-      expect(wrapper.find(PanelType).exists()).toBe(false);
+      expect(wrapper.find(DashboardPanel).exists()).toBe(false);
     });
   });
 
@@ -90,12 +90,12 @@ describe('MetricEmbed', () => {
 
     it('shows a chart when metrics are present', () => {
       expect(wrapper.find('.metrics-embed').exists()).toBe(true);
-      expect(wrapper.find(PanelType).exists()).toBe(true);
-      expect(wrapper.findAll(PanelType).length).toBe(2);
+      expect(wrapper.find(DashboardPanel).exists()).toBe(true);
+      expect(wrapper.findAll(DashboardPanel).length).toBe(2);
     });
 
     it('includes groupId with dashboardUrl', () => {
-      expect(wrapper.find(PanelType).props('groupId')).toBe(TEST_HOST);
+      expect(wrapper.find(DashboardPanel).props('groupId')).toBe(TEST_HOST);
     });
   });
 });

spec/frontend/monitoring/components/panel_type_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 PanelType from '~/monitoring/components/panel_type_with_alerts.vue';
-import AlertWidget from '~/monitoring/components/alert_widget.vue';
-import { graphData } from 'jest/monitoring/fixture_data';
-
-global.URL.createObjectURL = jest.fn();
-
-describe('Panel Type', () => {
-  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(PanelType, {
-      propsData: {
-        ...mockPropsData,
-        ...propsData,
-      },
-      store,
-    });
-  };
-
-  beforeEach(() => {
-    jest.spyOn(monitoringDashboard.getters, 'metricsSavedToDb').mockReturnValue([]);
-
-    store = new Vuex.Store({
-      modules: {
-        monitoringDashboard,
-      },
-    });
-  });
-
-  describe('panel type 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);
-      });
-    });
-  });
-});