Merge branch 'tr-deprecate-metric-dashboard-alert-ui' into 'master'

Move metrics dashboard alerts behind feature flag

See merge request gitlab-org/gitlab!62974

app/assets/javascripts/alert_management/components/alert_management_table.vue

@@ -26,6 +26,7 @@ import {
 } from '~/vue_shared/components/paginated_table_with_search_and_tabs/constants';
 import PaginatedTableWithSearchAndTabs from '~/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { ALERTS_STATUS_TABS, SEVERITY_LEVELS, trackAlertListViewsOptions } from '../constants';
 import getAlertsCountByStatus from '../graphql/queries/get_count_by_status.query.graphql';
 
@@ -114,6 +115,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: ['projectPath', 'textQuery', 'assigneeUsernameQuery', 'populatingAlertsHelpUrl'],
   apollo: {
     alerts: {
@@ -275,7 +277,7 @@ export default {
       </gl-sprintf>
     </gl-alert>
 
-    <alerts-deprecation-warning />
+    <alerts-deprecation-warning v-if="!glFeatures.managedAlertsDeprecation" />
 
     <paginated-table-with-search-and-tabs
       :show-error-msg="showErrorMsg"

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

@@ -11,6 +11,7 @@ import { s__ } from '~/locale';
 import AlertsDeprecationWarning from '~/vue_shared/components/alerts_deprecation_warning.vue';
 import { defaultTimeRange } from '~/vue_shared/constants';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { metricStates, keyboardShortcutKeys } from '../constants';
 import {
   timeRangeFromUrl,
@@ -46,6 +47,7 @@ export default {
     GlTooltip: GlTooltipDirective,
     TrackEvent: TrackEventDirective,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     hasMetrics: {
       type: Boolean,
@@ -397,7 +399,7 @@ export default {
 
 <template>
   <div class="prometheus-graphs" data-qa-selector="prometheus_graphs">
-    <alerts-deprecation-warning />
+    <alerts-deprecation-warning v-if="!glFeatures.managedAlertsDeprecation" />
 
     <dashboard-header
       v-if="showHeader"

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

@@ -21,6 +21,7 @@ import invalidUrl from '~/lib/utils/invalid_url';
 import { relativePathToAbsolute, getBaseURL, visitUrl, isSafeURL } from '~/lib/utils/url_utility';
 import { __, n__ } from '~/locale';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { panelTypes } from '../constants';
 
 import { graphDataToCsv } from '../csv_export';
@@ -61,6 +62,7 @@ export default {
     GlTooltip: GlTooltipDirective,
     TrackEvent: TrackEventDirective,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     clipboardText: {
       type: String,
@@ -258,7 +260,8 @@ export default {
         this.prometheusAlertsAvailable &&
         this.alertsEndpoint &&
         this.graphData &&
-        this.hasMetricsInDb
+        this.hasMetricsInDb &&
+        !this.glFeatures.managedAlertsDeprecation
       );
     },
     alertModalId() {

app/assets/javascripts/vue_shared/components/alerts_deprecation_warning.vue

@@ -22,7 +22,12 @@ export default {
 </script>
 
 <template>
-  <gl-alert v-if="hasManagedPrometheus" variant="warning" class="my-2">
+  <gl-alert
+    v-if="hasManagedPrometheus"
+    variant="warning"
+    class="my-2"
+    data-testid="alerts-deprecation-warning"
+  >
     <gl-sprintf :message="$options.i18n.alertsDeprecationText">
       <template #link="{ content }">
         <gl-link

app/controllers/projects/metrics_dashboard_controller.rb

@@ -12,6 +12,7 @@ module Projects
     before_action do
       push_frontend_feature_flag(:prometheus_computed_alerts)
       push_frontend_feature_flag(:disable_metric_dashboard_refresh_rate)
+      push_frontend_feature_flag(:managed_alerts_deprecation, @project)
     end
 
     feature_category :metrics

spec/frontend/alert_management/components/alert_management_table_spec.js

@@ -7,7 +7,6 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import mockAlerts from 'jest/vue_shared/alert_details/mocks/alerts.json';
 import AlertManagementTable from '~/alert_management/components/alert_management_table.vue';
 import { visitUrl } from '~/lib/utils/url_utility';
-import AlertDeprecationWarning from '~/vue_shared/components/alerts_deprecation_warning.vue';
 import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import defaultProvideValues from '../mocks/alerts_provide_config.json';
@@ -41,8 +40,7 @@ describe('AlertManagementTable', () => {
     resolved: 11,
     all: 26,
   };
-  const findDeprecationNotice = () =>
-    wrapper.findComponent(AlertDeprecationWarning).findComponent(GlAlert);
+  const findDeprecationNotice = () => wrapper.findByTestId('alerts-deprecation-warning');
 
   function mountComponent({ provide = {}, data = {}, loading = false, stubs = {} } = {}) {
     wrapper = extendedWrapper(
@@ -239,19 +237,21 @@ describe('AlertManagementTable', () => {
       expect(visitUrl).toHaveBeenCalledWith('/1527542/details', true);
     });
 
-    describe('deprecation notice', () => {
-      it('shows the deprecation notice when available', () => {
-        mountComponent({ provide: { hasManagedPrometheus: true } });
-
-        expect(findDeprecationNotice().exists()).toBe(true);
-      });
-
-      it('hides the deprecation notice when not available', () => {
-        mountComponent();
-
-        expect(findDeprecationNotice().exists()).toBe(false);
-      });
-    });
+    it.each`
+      managedAlertsDeprecation | hasManagedPrometheus | isVisible
+      ${false}                 | ${false}             | ${false}
+      ${false}                 | ${true}              | ${true}
+      ${true}                  | ${false}             | ${false}
+      ${true}                  | ${true}              | ${false}
+    `(
+      'when the deprecation feature flag is $managedAlertsDeprecation and has managed prometheus is $hasManagedPrometheus',
+      ({ hasManagedPrometheus, managedAlertsDeprecation, isVisible }) => {
+        mountComponent({
+          provide: { hasManagedPrometheus, glFeatures: { managedAlertsDeprecation } },
+        });
+        expect(findDeprecationNotice().exists()).toBe(isVisible);
+      },
+    );
 
     describe('alert issue links', () => {
       beforeEach(() => {

spec/frontend/monitoring/components/dashboard_panel_spec.js

@@ -778,5 +778,31 @@ describe('Dashboard Panel', () => {
         expect(findRunbookLinks().at(0).attributes('href')).toBe(invalidUrl);
       });
     });
+
+    describe('managed alert deprecation feature flag', () => {
+      beforeEach(() => {
+        setMetricsSavedToDb([metricId]);
+      });
+
+      it('shows alerts when alerts are not deprecated', () => {
+        createWrapper(
+          { alertsEndpoint: '/endpoint', prometheusAlertsAvailable: true },
+          { provide: { glFeatures: { managedAlertsDeprecation: false } } },
+        );
+
+        expect(findAlertsWidget().exists()).toBe(true);
+        expect(findMenuItemByText('Alerts').exists()).toBe(true);
+      });
+
+      it('hides alerts when alerts are deprecated', () => {
+        createWrapper(
+          { alertsEndpoint: '/endpoint', prometheusAlertsAvailable: true },
+          { provide: { glFeatures: { managedAlertsDeprecation: true } } },
+        );
+
+        expect(findAlertsWidget().exists()).toBe(false);
+        expect(findMenuItemByText('Alerts').exists()).toBe(false);
+      });
+    });
   });
 });

spec/frontend/monitoring/components/dashboard_spec.js

-import { GlAlert } from '@gitlab/ui';
-import { shallowMount, mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import VueDraggable from 'vuedraggable';
 import { TEST_HOST } from 'helpers/test_constants';
+import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { ESC_KEY } from '~/lib/utils/keys';
@@ -17,7 +16,6 @@ import LinksSection from '~/monitoring/components/links_section.vue';
 import { dashboardEmptyStates, metricStates } from '~/monitoring/constants';
 import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
-import AlertDeprecationWarning from '~/vue_shared/components/alerts_deprecation_warning.vue';
 import {
   metricsDashboardViewModel,
   metricsDashboardPanelCount,
@@ -41,7 +39,7 @@ describe('Dashboard', () => {
   let mock;
 
   const createShallowWrapper = (props = {}, options = {}) => {
-    wrapper = shallowMount(Dashboard, {
+    wrapper = shallowMountExtended(Dashboard, {
       propsData: { ...dashboardProps, ...props },
       store,
       stubs: {
@@ -53,7 +51,7 @@ describe('Dashboard', () => {
   };
 
   const createMountedWrapper = (props = {}, options = {}) => {
-    wrapper = mount(Dashboard, {
+    wrapper = mountExtended(Dashboard, {
       propsData: { ...dashboardProps, ...props },
       store,
       stubs: {
@@ -818,24 +816,28 @@ describe('Dashboard', () => {
     });
   });
 
-  describe('deprecation notice', () => {
+  describe('alerts deprecation', () => {
     beforeEach(() => {
       setupStoreWithData(store);
     });
 
-    const findDeprecationNotice = () =>
-      wrapper.find(AlertDeprecationWarning).findComponent(GlAlert);
-
-    it('shows the deprecation notice when available', () => {
-      createMountedWrapper({}, { provide: { hasManagedPrometheus: true } });
-
-      expect(findDeprecationNotice().exists()).toBe(true);
-    });
-
-    it('hides the deprecation notice when not available', () => {
-      createMountedWrapper();
-
-      expect(findDeprecationNotice().exists()).toBe(false);
-    });
+    const findDeprecationNotice = () => wrapper.findByTestId('alerts-deprecation-warning');
+
+    it.each`
+      managedAlertsDeprecation | hasManagedPrometheus | isVisible
+      ${false}                 | ${false}             | ${false}
+      ${false}                 | ${true}              | ${true}
+      ${true}                  | ${false}             | ${false}
+      ${true}                  | ${true}              | ${false}
+    `(
+      'when the deprecation feature flag is $managedAlertsDeprecation and has managed prometheus is $hasManagedPrometheus',
+      ({ hasManagedPrometheus, managedAlertsDeprecation, isVisible }) => {
+        createMountedWrapper(
+          {},
+          { provide: { hasManagedPrometheus, glFeatures: { managedAlertsDeprecation } } },
+        );
+        expect(findDeprecationNotice().exists()).toBe(isVisible);
+      },
+    );
   });
 });