Use EE panel type when needed to show alert menu

- Import EE panel types component using ee_else_ce
- Move required props to CE dashboard component to prevent errors

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

@@ -14,9 +14,9 @@ import { __, s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
+import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import MonitorAreaChart from './charts/area.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
-import PanelType from './panel_type.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
 import { sidebarAnimationDuration, timeWindows } from '../constants';
@@ -141,6 +141,16 @@ export default {
       required: false,
       default: false,
     },
+    alertsEndpoint: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    prometheusAlertsAvailable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -449,6 +459,8 @@ export default {
             :clipboard-text="generateLink(groupData.group, graphData.title, graphData.y_label)"
             :graph-data="graphData"
             :dashboard-width="elWidth"
+            :alerts-endpoint="alertsEndpoint"
+            :prometheus-alerts-available="prometheusAlertsAvailable"
             :index="`${index}-${graphIndex}`"
           />
         </template>

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

@@ -9,18 +9,6 @@ export default {
     CustomMetricsFormFields,
   },
   extends: CeDashboard,
-  props: {
-    alertsEndpoint: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    prometheusAlertsAvailable: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
   data() {
     return {
       allAlerts: {},

ee/changelogs/unreleased/12918-metrics-dashboard-alerting-menu-unavailable-when-additional-pane.yml

+---
+title: Fix bug to display alert menu correctly in dashboards
+merge_request: 15261
+author:
+type: fixed

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

@@ -5,7 +5,7 @@ import Dashboard from 'ee/monitoring/components/dashboard.vue';
 import { createStore } from '~/monitoring/stores';
 import axios from '~/lib/utils/axios_utils';
 import { metricsGroupsAPIResponse, mockApiEndpoint } from 'spec/monitoring/mock_data';
-import propsData from 'spec/monitoring/dashboard_spec';
+import propsData from 'spec/monitoring/components/dashboard_spec';
 import AlertWidget from 'ee/monitoring/components/alert_widget.vue';
 import CustomMetricsFormFields from 'ee/custom_metrics/components/custom_metrics_form_fields.vue';
 

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

@@ -13,7 +13,7 @@ import MonitoringMock, {
   environmentData,
   singleGroupResponse,
   dashboardGitResponse,
-} from './mock_data';
+} from '../mock_data';
 
 const localVue = createLocalVue();
 const propsData = {