Rename component "panel type" to "dashboard panel"

Panels are not "types", even though they have a type. This change
improves the naming to dashboard panel for clarity.

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_with_alerts.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_with_alerts.vue → 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/panel_type.vue';
+import CePanelType from '~/monitoring/components/dashboard_panel.vue';
 import AlertWidget from './alert_widget.vue';
 
 export default {

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_with_alerts.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"

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

@@ -4,7 +4,7 @@ import { setTestTimeout } from 'helpers/timeout';
 import invalidUrl from '~/lib/utils/invalid_url';
 import axios from '~/lib/utils/axios_utils';
 
-import PanelType from '~/monitoring/components/panel_type.vue';
+import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
 import {
   anomalyMockGraphData,
   mockLogsHref,
@@ -40,7 +40,7 @@ const mocks = {
   },
 };
 
-describe('Panel Type component', () => {
+describe('Dashboard Panel', () => {
   let axiosMock;
   let store;
   let state;
@@ -54,7 +54,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 +343,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 +392,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,

spec/frontend/monitoring/components/panel_type_with_alerts_spec.js → spec/frontend/monitoring/components/dashboard_panel_with_alerts_spec.js

@@ -2,13 +2,13 @@ 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 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('Panel Type', () => {
+describe('Dashboard Panel', () => {
   let store;
   let wrapper;
 
@@ -26,7 +26,7 @@ describe('Panel Type', () => {
   };
 
   const createWrapper = propsData => {
-    wrapper = shallowMount(PanelType, {
+    wrapper = shallowMount(DashboardPanel, {
       propsData: {
         ...mockPropsData,
         ...propsData,
@@ -45,7 +45,7 @@ describe('Panel Type', () => {
     });
   });
 
-  describe('panel type alerts', () => {
+  describe('panel alerts', () => {
     describe.each`
       desc                                           | metricsSavedToDb                   | propsData                               | isShown
       ${'with license and no metrics in db'}         | ${[]}                              | ${{}}                                   | ${false}

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_with_alerts.vue';
 import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
 import { setupStoreWithDashboard, setMetricResult, setupStoreWithData } from '../store_utils';
@@ -128,7 +128,7 @@ describe('Dashboard', () => {
     it('hides the group panels when showPanels is false', () => {
       createMountedWrapper(
         { hasMetrics: true, showPanels: false },
-        { stubs: ['graph-group', 'panel-type'] },
+        { stubs: ['graph-group', 'dashboard-panel'] },
       );
 
       setupStoreWithData(wrapper.vm.$store);
@@ -142,7 +142,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 }, { stubs: ['graph-group', 'dashboard-panel'] });
 
       wrapper.vm.$store.commit(
         `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
@@ -157,7 +157,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 }, { stubs: ['graph-group', 'dashboard-panel'] });
 
       setupStoreWithData(wrapper.vm.$store);
 
@@ -186,7 +186,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 }, { stubs: ['graph-group', 'dashboard-panel'] });
 
     setupStoreWithDashboard(wrapper.vm.$store);
 
@@ -196,7 +196,7 @@ describe('Dashboard', () => {
   });
 
   it('renders the datetimepicker dropdown', () => {
-    createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
+    createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'dashboard-panel'] });
 
     setupStoreWithData(wrapper.vm.$store);
 
@@ -206,7 +206,7 @@ describe('Dashboard', () => {
   });
 
   it('renders the refresh dashboard button', () => {
-    createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
+    createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'dashboard-panel'] });
 
     setupStoreWithData(wrapper.vm.$store);
 
@@ -253,7 +253,7 @@ describe('Dashboard', () => {
         { hasMetrics: true },
         {
           attachToDocument: true,
-          stubs: ['graph-group', 'panel-type'],
+          stubs: ['graph-group', 'dashboard-panel'],
         },
       );
 
@@ -465,7 +465,7 @@ describe('Dashboard', () => {
 
   describe('Dashboard dropdown', () => {
     beforeEach(() => {
-      createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
+      createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'dashboard-panel'] });
 
       wrapper.vm.$store.commit(
         `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,
@@ -491,7 +491,7 @@ describe('Dashboard', () => {
           showTimeWindowDropdown: false,
           externalDashboardUrl: '/mockUrl',
         },
-        { stubs: ['graph-group', 'panel-type'] },
+        { stubs: ['graph-group', 'dashboard-panel'] },
       );
 
       return wrapper.vm.$nextTick();
@@ -511,7 +511,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_with_alerts.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);
     });
   });
 });