Allow refresh rate feature to be disabled

We should allow refresh rate feature to be disabled via feature flag.

Enabling refresh rate for all user might have impact in performance if
too many of them enable it. We want to release this feature and monitor
it's behavior.

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

@@ -10,6 +10,7 @@ import {
   GlNewDropdownDivider,
   GlTooltipDirective,
 } from '@gitlab/ui';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 const makeInterval = (length = 0, unit = 's') => {
   const shortLabel = `${length}${unit}`;
@@ -53,6 +54,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  mixins: [glFeatureFlagsMixin()],
   data() {
     return {
       refreshInterval: null,
@@ -60,6 +62,12 @@ export default {
     };
   },
   computed: {
+    disableMetricDashboardRefreshRate() {
+      // Can refresh rates impact performance?
+      // Add "negative" feature flag called `disable_metric_dashboard_refresh_rate`
+      // See more at: https://gitlab.com/gitlab-org/gitlab/-/issues/229831
+      return this.glFeatures.disableMetricDashboardRefreshRate;
+    },
     dropdownText() {
       return this.refreshInterval?.shortLabel ?? __('Off');
     },
@@ -142,7 +150,12 @@ export default {
       icon="retry"
       @click="refresh"
     />
-    <gl-new-dropdown v-gl-tooltip :title="s__('Metrics|Set refresh rate')" :text="dropdownText">
+    <gl-new-dropdown
+      v-if="!disableMetricDashboardRefreshRate"
+      v-gl-tooltip
+      :title="s__('Metrics|Set refresh rate')"
+      :text="dropdownText"
+    >
       <gl-new-dropdown-item
         :is-check-item="true"
         :is-checked="refreshInterval === null"

app/controllers/projects/environments_controller.rb

@@ -13,6 +13,7 @@ class Projects::EnvironmentsController < Projects::ApplicationController
     authorize_metrics_dashboard!
 
     push_frontend_feature_flag(:prometheus_computed_alerts)
+    push_frontend_feature_flag(:disable_metric_dashboard_refresh_rate)
   end
   before_action :authorize_read_environment!, except: [:metrics, :additional_metrics, :metrics_dashboard, :metrics_redirect]
   before_action :authorize_create_environment!, only: [:new, :create]

app/controllers/projects/metrics_dashboard_controller.rb

@@ -9,6 +9,7 @@ module Projects
     before_action :authorize_metrics_dashboard!
     before_action do
       push_frontend_feature_flag(:prometheus_computed_alerts)
+      push_frontend_feature_flag(:disable_metric_dashboard_refresh_rate)
     end
 
     def show

spec/frontend/monitoring/components/refresh_button_spec.js

@@ -10,8 +10,8 @@ describe('RefreshButton', () => {
   let dispatch;
   let documentHidden;
 
-  const createWrapper = () => {
-    wrapper = shallowMount(RefreshButton, { store });
+  const createWrapper = (options = {}) => {
+    wrapper = shallowMount(RefreshButton, { store, ...options });
   };
 
   const findRefreshBtn = () => wrapper.find(GlButton);
@@ -57,6 +57,20 @@ describe('RefreshButton', () => {
     expect(findDropdown().props('text')).toBe('Off');
   });
 
+  describe('when feature flag disable_metric_dashboard_refresh_rate is on', () => {
+    beforeEach(() => {
+      createWrapper({
+        provide: {
+          glFeatures: { disableMetricDashboardRefreshRate: true },
+        },
+      });
+    });
+
+    it('refresh rate is not available', () => {
+      expect(findDropdown().exists()).toBe(false);
+    });
+  });
+
   describe('refresh rate options', () => {
     it('presents multiple options', () => {
       expect(findOptions().length).toBeGreaterThan(1);