Merge branch '213473-move-custom-metric-alerts' into 'master'

Move monitoring dashboard vue files to Core

See merge request gitlab-org/gitlab!29789

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

@@ -14,7 +14,7 @@ import {
   GlModalDirective,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
+import PanelType from './panel_type_with_alerts.vue';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';

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

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

app/assets/javascripts/monitoring/constants.js

@@ -143,3 +143,9 @@ export const annotationsSymbolIcon = 'path://m5 229 5 8h-10z';
  * https://gitlab.com/gitlab-org/gitlab/-/issues/214671
  */
 export const DEFAULT_DASHBOARD_PATH = 'config/prometheus/common_metrics.yml';
+
+export const OPERATORS = {
+  greaterThan: '>',
+  equalTo: '==',
+  lessThan: '<',
+};

app/assets/javascripts/monitoring/monitoring_bundle.js

 import Vue from 'vue';
 import { GlToast } from '@gitlab/ui';
-import Dashboard from 'ee_else_ce/monitoring/components/dashboard.vue';
+import Dashboard from '~/monitoring/components/dashboard_with_alerts.vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { getParameterValues } from '~/lib/utils/url_utility';
 import store from './stores';

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

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

app/helpers/environments_helper.rb

@@ -46,7 +46,9 @@ module EnvironmentsHelper
       "environment-state" => "#{environment.state}",
       "custom-metrics-path" => project_prometheus_metrics_path(project),
       "validate-query-path" => validate_query_project_prometheus_metrics_path(project),
-      "custom-metrics-available" => "#{custom_metrics_available?(project)}"
+      "custom-metrics-available" => "#{custom_metrics_available?(project)}",
+      "alerts-endpoint" => project_prometheus_alerts_path(project, environment_id: environment.id, format: :json),
+      "prometheus-alerts-available" => "#{can?(current_user, :read_prometheus_alerts, project)}"
     }
   end
 

changelogs/unreleased/213473-move-custom-metric-alerts.yml

+---
+title: Make setting alerts on the monitoring dashboard available to GitLab Core users
+merge_request: 29789
+author:
+type: changed

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

-// eslint-disable-next-line import/prefer-default-export
-export const OPERATORS = {
-  greaterThan: '>',
-  equalTo: '==',
-  lessThan: '<',
-};

ee/app/helpers/ee/environments_helper.rb

@@ -27,10 +27,7 @@ module EE
     end
 
     def metrics_data(project, environment)
-      ee_metrics_data = {
-        "alerts-endpoint" => project_prometheus_alerts_path(project, environment_id: environment.id, format: :json),
-        "prometheus-alerts-available" => "#{can?(current_user, :read_prometheus_alerts, project)}"
-      }
+      ee_metrics_data = {}
       ee_metrics_data["logs_path"] = project_logs_path(project, environment_name: environment.name) if can?(current_user, :read_pod_logs, project)
 
       super.merge(ee_metrics_data)

ee/spec/helpers/ee/environments_helper_spec.rb

@@ -26,8 +26,6 @@ describe EnvironmentsHelper do
 
       it 'returns additional configuration' do
         expect(subject).to include(
-          'alerts-endpoint' => project_prometheus_alerts_path(project, environment_id: environment.id, format: :json),
-          'prometheus-alerts-available' => 'true',
           'logs_path' => project_logs_path(project, environment_name: environment.name)
         )
       end

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

@@ -12,7 +12,7 @@ module QA
 
               def self.prepended(page)
                 page.module_eval do
-                  view 'ee/app/assets/javascripts/monitoring/components/alert_widget_form.vue' do
+                  view 'app/assets/javascripts/monitoring/components/alert_widget_form.vue' do
                     element :alert_query_dropdown
                     element :alert_query_option
                     element :alert_threshold_field

ee/spec/frontend/monitoring/alert_widget_spec.js → spec/frontend/monitoring/alert_widget_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlLoadingIcon, GlTooltip, GlSprintf, GlBadge } from '@gitlab/ui';
-import AlertWidget from 'ee/monitoring/components/alert_widget.vue';
+import AlertWidget from '~/monitoring/components/alert_widget.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 
@@ -11,7 +11,7 @@ const mockDeleteAlert = jest.fn();
 
 jest.mock('~/flash');
 jest.mock(
-  'ee/monitoring/services/alerts_service',
+  '~/monitoring/services/alerts_service',
   () =>
     function AlertsServiceMock() {
       return {

ee/spec/frontend/monitoring/components/alert_widget_form_spec.js → spec/frontend/monitoring/components/alert_widget_form_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlLink } from '@gitlab/ui';
-import AlertWidgetForm from 'ee/monitoring/components/alert_widget_form.vue';
+import AlertWidgetForm from '~/monitoring/components/alert_widget_form.vue';
 import ModalStub from '../stubs/modal_stub';
 
 describe('AlertWidgetForm', () => {

spec/frontend/monitoring/components/dashboard_spec.js

@@ -6,13 +6,13 @@ import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import statusCodes from '~/lib/utils/http_status';
 import { metricStates } from '~/monitoring/constants';
-import Dashboard from '~/monitoring/components/dashboard.vue';
+import Dashboard from '~/monitoring/components/dashboard_with_alerts.vue';
 
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 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 'ee_else_ce/monitoring/components/panel_type.vue';
+import PanelType from '~/monitoring/components/panel_type_with_alerts.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 PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
+import PanelType from '~/monitoring/components/panel_type_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';

ee/spec/frontend/monitoring/components/panel_type_spec.js → spec/frontend/monitoring/components/panel_type_with_alerts_spec.js

@@ -2,8 +2,8 @@ import Vuex from 'vuex';
 import { shallowMount } from '@vue/test-utils';
 import { GlDropdownItem } from '@gitlab/ui';
 import { monitoringDashboard } from '~/monitoring/stores';
-import PanelType from 'ee/monitoring/components/panel_type.vue';
-import AlertWidget from 'ee/monitoring/components/alert_widget.vue';
+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();

ee/spec/frontend/monitoring/validators_spec.js → spec/frontend/monitoring/validators_spec.js

-import { alertsValidator, queriesValidator } from 'ee/monitoring/validators';
+import { alertsValidator, queriesValidator } from '~/monitoring/validators';
 
 describe('alertsValidator', () => {
   const validAlert = {

spec/helpers/environments_helper_spec.rb

@@ -37,10 +37,26 @@ describe EnvironmentsHelper do
         'environment-state' => environment.state,
         'custom-metrics-path' => project_prometheus_metrics_path(project),
         'validate-query-path' => validate_query_project_prometheus_metrics_path(project),
-        'custom-metrics-available' => 'true'
+        'custom-metrics-available' => 'true',
+        'alerts-endpoint' => project_prometheus_alerts_path(project, environment_id: environment.id, format: :json),
+        'prometheus-alerts-available' => 'true'
       )
     end
 
+    context 'without read_prometheus_alerts permission' do
+      before do
+        allow(helper).to receive(:can?)
+          .with(user, :read_prometheus_alerts, project)
+          .and_return(false)
+      end
+
+      it 'returns false' do
+        expect(metrics_data).to include(
+          'prometheus-alerts-available' => 'false'
+        )
+      end
+    end
+
     context 'with metrics_setting' do
       before do
         create(:project_metrics_setting, project: project, external_dashboard_url: 'http://gitlab.com')