Merge branch '393929-metrics-delete-ui-for-monitor-metrics-view' into 'master'

Remove links to Metrics in Environments

See merge request gitlab-org/gitlab!121043



Merged-by: Ezekiel Kigbo <3397881-ekigbo@users.noreply.gitlab.com>
Approved-by: Sharmad Nachnolkar <snachnolkar@gitlab.com>
Approved-by: Ezekiel Kigbo <3397881-ekigbo@users.noreply.gitlab.com>
Reviewed-by: Sharmad Nachnolkar <snachnolkar@gitlab.com>
Reviewed-by: Paulina Sedlak-Jakubowska <psedlak-jakubowska@gitlab.com>
Co-authored-by: psjakubowska <psedlak-jakubowska@gitlab.com>

app/assets/javascripts/environments/components/environment_item.vue

@@ -16,12 +16,10 @@ import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import CommitComponent from '~/vue_shared/components/commit.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import eventHub from '../event_hub';
 import ActionsComponent from './environment_actions.vue';
 import DeleteComponent from './environment_delete.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
-import MonitoringButtonComponent from './environment_monitoring.vue';
 import PinComponent from './environment_pin.vue';
 import RollbackComponent from './environment_rollback.vue';
 import StopComponent from './environment_stop.vue';
@@ -43,7 +41,6 @@ export default {
     GlIcon,
     GlLink,
     GlSprintf,
-    MonitoringButtonComponent,
     PinComponent,
     DeleteComponent,
     RollbackComponent,
@@ -57,7 +54,7 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [timeagoMixin, glFeatureFlagsMixin()],
+  mixins: [timeagoMixin],
 
   props: {
     model: {
@@ -529,14 +526,6 @@ export default {
       return this.model.environment_path || '';
     },
 
-    monitoringUrl() {
-      return this.model.metrics_path || '';
-    },
-
-    canShowMetricsLink() {
-      return Boolean(!this.glFeatures.removeMonitorMetrics && this.monitoringUrl);
-    },
-
     terminalPath() {
       return this.model?.terminal_path ?? '';
     },
@@ -549,7 +538,6 @@ export default {
       return (
         this.actions.length > 0 ||
         this.externalURL ||
-        this.canShowMetricsLink ||
         this.canStopEnvironment ||
         this.canDeleteEnvironment ||
         this.canRetry
@@ -571,11 +559,7 @@ export default {
     },
     hasExtraActions() {
       return Boolean(
-        this.canRetry ||
-          this.canShowAutoStopDate ||
-          this.canShowMetricsLink ||
-          this.terminalPath ||
-          this.canDeleteEnvironment,
+        this.canRetry || this.canShowAutoStopDate || this.terminalPath || this.canDeleteEnvironment,
       );
     },
   },
@@ -860,14 +844,6 @@ export default {
             data-track-label="environment_pin"
           />
 
-          <monitoring-button-component
-            v-if="canShowMetricsLink"
-            :monitoring-url="monitoringUrl"
-            data-track-action="click_button"
-            data-track-label="environment_monitoring"
-            data-testid="environment-monitoring"
-          />
-
           <terminal-button-component
             v-if="terminalPath"
             :terminal-path="terminalPath"

app/assets/javascripts/environments/components/environment_monitoring.vue

-<script>
-import { GlDropdownItem } from '@gitlab/ui';
-import { __ } from '~/locale';
-/**
- * Renders the Monitoring (Metrics) link in environments table.
- */
-export default {
-  components: {
-    GlDropdownItem,
-  },
-  props: {
-    monitoringUrl: {
-      type: String,
-      required: true,
-    },
-  },
-  title: __('Monitoring'),
-};
-</script>
-<template>
-  <gl-dropdown-item :href="monitoringUrl" rel="noopener noreferrer nofollow" target="_blank">
-    {{ $options.title }}
-  </gl-dropdown-item>
-</template>

app/assets/javascripts/environments/components/environments_detail_header.vue

@@ -4,7 +4,6 @@ import csrf from '~/lib/utils/csrf';
 import { __, s__ } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import DeleteEnvironmentModal from './delete_environment_modal.vue';
 import StopEnvironmentModal from './stop_environment_modal.vue';
 import DeployFreezeAlert from './deploy_freeze_alert.vue';
@@ -24,7 +23,7 @@ export default {
     GlModalDirective,
     GlTooltip,
   },
-  mixins: [timeagoMixin, glFeatureFlagsMixin()],
+  mixins: [timeagoMixin],
   props: {
     environment: {
       type: Object,
@@ -51,11 +50,6 @@ export default {
       required: false,
       default: '',
     },
-    metricsPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
     updatePath: {
       type: String,
       required: false,
@@ -69,8 +63,6 @@ export default {
   },
   i18n: {
     autoStopAtText: s__('Environments|Auto stops %{autoStopAt}'),
-    metricsButtonTitle: __('See metrics'),
-    metricsButtonText: __('Monitoring'),
     editButtonText: __('Edit'),
     stopButtonText: s__('Environments|Stop'),
     deleteButtonText: s__('Environments|Delete'),
@@ -91,9 +83,6 @@ export default {
     shouldShowTerminalButton() {
       return this.canAdminEnvironment && this.environment.hasTerminals;
     },
-    shouldShowMetricsButton() {
-      return Boolean(!this.glFeatures.removeMonitorMetrics && this.shouldShowExternalUrlButton);
-    },
   },
 };
 </script>
@@ -146,17 +135,6 @@ export default {
           target="_blank"
           >{{ $options.i18n.externalButtonText }}</gl-button
         >
-        <gl-button
-          v-if="shouldShowMetricsButton"
-          v-gl-tooltip.hover
-          data-testid="metrics-button"
-          :href="metricsPath"
-          :title="$options.i18n.metricsButtonTitle"
-          icon="chart"
-          class="gl-mr-2"
-        >
-          {{ $options.i18n.metricsButtonText }}
-        </gl-button>
         <gl-button v-if="canUpdateEnvironment" data-testid="edit-button" :href="updatePath">
           {{ $options.i18n.editButtonText }}
         </gl-button>

app/assets/javascripts/environments/components/new_environment_item.vue

@@ -18,7 +18,6 @@ import Actions from './environment_actions.vue';
 import StopComponent from './environment_stop.vue';
 import Rollback from './environment_rollback.vue';
 import Pin from './environment_pin.vue';
-import Monitoring from './environment_monitoring.vue';
 import Terminal from './environment_terminal_button.vue';
 import Delete from './environment_delete.vue';
 import Deployment from './deployment.vue';
@@ -39,7 +38,6 @@ export default {
     ExternalUrl,
     StopComponent,
     Rollback,
-    Monitoring,
     Pin,
     Terminal,
     TimeAgoTooltip,
@@ -133,7 +131,6 @@ export default {
       return Boolean(
         this.retryPath ||
           this.canShowAutoStopDate ||
-          this.canShowMetricsLink ||
           this.terminalPath ||
           this.canDeleteEnvironment,
       );
@@ -154,12 +151,6 @@ export default {
     autoStopPath() {
       return this.environment?.cancelAutoStopPath ?? '';
     },
-    metricsPath() {
-      return this.environment?.metricsPath ?? '';
-    },
-    canShowMetricsLink() {
-      return Boolean(!this.glFeatures.removeMonitorMetrics && this.metricsPath);
-    },
     terminalPath() {
       return this.environment?.terminalPath ?? '';
     },
@@ -309,14 +300,6 @@ export default {
               data-track-label="environment_pin"
             />
 
-            <monitoring
-              v-if="canShowMetricsLink"
-              :monitoring-url="metricsPath"
-              data-track-action="click_button"
-              data-track-label="environment_monitoring"
-              data-testid="environment-monitoring"
-            />
-
             <terminal
               v-if="terminalPath"
               :terminal-path="terminalPath"

app/assets/javascripts/environments/environment_details/components/deployment_actions.vue

@@ -110,6 +110,7 @@ export default {
       data-testid="rollback-button"
       :title="rollbackButtonTitle"
       :icon="rollbackIcon"
+      :aria-label="rollbackButtonTitle"
       @click="onRollbackClick"
     />
     <environment-approval

app/assets/javascripts/environments/mount_show.js

@@ -51,7 +51,6 @@ export const initHeader = () => {
           canAdminEnvironment: dataset.canAdminEnvironment,
           cancelAutoStopPath: dataset.environmentCancelAutoStopPath,
           terminalPath: dataset.environmentTerminalPath,
-          metricsPath: dataset.environmentMetricsPath,
           updatePath: dataset.environmentEditPath,
         },
       });

locale/gitlab.pot

@@ -29137,9 +29137,6 @@ msgstr ""
 msgid "Monitor your errors directly in GitLab."
 msgstr ""
-msgid "Monitoring"
-msgstr ""
-
 msgid "Month"
 msgstr ""
@@ -41386,9 +41383,6 @@ msgstr ""
 msgid "See example DevOps Score page in our documentation."
 msgstr ""
-msgid "See metrics"
-msgstr ""
-
 msgid "See our website for help"
 msgstr ""

spec/features/projects/environments/environment_metrics_spec.rb

-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe 'Environment > Metrics', feature_category: :projects do
-  include PrometheusHelpers
-
-  let(:user) { create(:user) }
-  let_it_be(:project) { create(:project, :with_prometheus_integration, :repository) }
-  let(:pipeline) { create(:ci_pipeline, project: project) }
-  let(:build) { create(:ci_build, pipeline: pipeline) }
-  let(:environment) { create(:environment, project: project) }
-  let(:current_time) { Time.now.utc }
-  let!(:staging) { create(:environment, name: 'staging', project: project) }
-
-  before do
-    stub_feature_flags(remove_monitor_metrics: false)
-
-    project.add_developer(user)
-    stub_any_prometheus_request
-
-    sign_in(user)
-    stub_feature_flags(remove_monitor_metrics: false)
-  end
-
-  around do |example|
-    travel_to(current_time) { example.run }
-  end
-
-  shared_examples 'has environment selector' do
-    it 'has a working environment selector', :js do
-      visit_environment(environment)
-      click_link 'Monitoring'
-
-      expect(page).to have_current_path(project_metrics_dashboard_path(project, environment: environment.id))
-      expect(page).to have_css('[data-testid="environments-dropdown"]')
-
-      within('[data-testid="environments-dropdown"]') do
-        # Click on the dropdown
-        click_on(environment.name)
-
-        # Select the staging environment
-        click_on(staging.name)
-      end
-
-      expect(page).to have_current_path(project_metrics_dashboard_path(project, environment: staging.id))
-
-      wait_for_requests
-    end
-  end
-
-  context 'without deployments' do
-    it_behaves_like 'has environment selector'
-  end
-
-  context 'with deployments and related deployable present' do
-    before do
-      create(:deployment, environment: environment, deployable: build)
-    end
-
-    it 'shows metrics', :js do
-      visit_environment(environment)
-      click_link 'Monitoring'
-
-      expect(page).to have_css('[data-testid="prometheus-graphs"]')
-    end
-
-    it_behaves_like 'has environment selector'
-  end
-
-  context 'when metrics dashboard feature is unavailable' do
-    before do
-      stub_feature_flags(remove_monitor_metrics: true)
-    end
-
-    it 'does not provide a link to the monitoring dashboard' do
-      visit_environment(environment)
-
-      expect(page).not_to have_link('Monitoring')
-    end
-  end
-
-  def visit_environment(environment)
-    visit project_environment_path(environment.project, environment)
-  end
-end

spec/frontend/environments/environment_item_spec.js

@@ -51,7 +51,6 @@ describe('Environment item', () => {
   const findUpcomingDeploymentAvatarLink = () =>
     findUpcomingDeployment().findComponent(GlAvatarLink);
   const findUpcomingDeploymentAvatar = () => findUpcomingDeployment().findComponent(GlAvatar);
-  const findMonitoringLink = () => wrapper.find('[data-testid="environment-monitoring"]');
 
   describe('when item is not folder', () => {
     it('should render environment name', () => {
@@ -435,25 +434,4 @@ describe('Environment item', () => {
       });
     });
   });
-
-  describe.each([true, false])(
-    'when `remove_monitor_metrics` flag  is %p',
-    (removeMonitorMetrics) => {
-      beforeEach(() => {
-        factory({
-          propsData: {
-            model: {
-              metrics_path: 'http://0.0.0.0:3000/flightjs/Flight/-/metrics?environment=6',
-            },
-            tableData,
-          },
-          provide: { glFeatures: { removeMonitorMetrics } },
-        });
-      });
-
-      it(`${removeMonitorMetrics ? 'does not render' : 'renders'} link to metrics`, () => {
-        expect(findMonitoringLink().exists()).toBe(!removeMonitorMetrics);
-      });
-    },
-  );
 });

spec/frontend/environments/environment_monitoring_spec.js

-import { mountExtended } from 'helpers/vue_test_utils_helper';
-import MonitoringComponent from '~/environments/components/environment_monitoring.vue';
-import { __ } from '~/locale';
-
-describe('Monitoring Component', () => {
-  let wrapper;
-
-  const monitoringUrl = 'https://gitlab.com';
-
-  const createWrapper = () => {
-    wrapper = mountExtended(MonitoringComponent, {
-      propsData: {
-        monitoringUrl,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    createWrapper();
-  });
-
-  it('should render a link to environment monitoring page', () => {
-    const link = wrapper.findByRole('menuitem', { name: __('Monitoring') });
-    expect(link.attributes('href')).toEqual(monitoringUrl);
-  });
-});

spec/frontend/environments/environments_detail_header_spec.js

 import { GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { createMockDirective } from 'helpers/vue_mock_directive';
 import DeleteEnvironmentModal from '~/environments/components/delete_environment_modal.vue';
 import EnvironmentsDetailHeader from '~/environments/components/environments_detail_header.vue';
 import StopEnvironmentModal from '~/environments/components/stop_environment_modal.vue';
@@ -11,7 +11,6 @@ import { createEnvironment } from './mock_data';
 describe('Environments detail header component', () => {
   const cancelAutoStopPath = '/my-environment/cancel/path';
   const terminalPath = '/my-environment/terminal/path';
-  const metricsPath = '/my-environment/metrics/path';
   const updatePath = '/my-environment/edit/path';
 
   let wrapper;
@@ -22,7 +21,6 @@ describe('Environments detail header component', () => {
   const findCancelAutoStopAtForm = () => wrapper.findByTestId('cancel-auto-stop-form');
   const findTerminalButton = () => wrapper.findByTestId('terminal-button');
   const findExternalUrlButton = () => wrapper.findComponentByTestId('external-url-button');
-  const findMetricsButton = () => wrapper.findByTestId('metrics-button');
   const findEditButton = () => wrapper.findByTestId('edit-button');
   const findStopButton = () => wrapper.findByTestId('stop-button');
   const findDestroyButton = () => wrapper.findByTestId('destroy-button');
@@ -34,7 +32,6 @@ describe('Environments detail header component', () => {
     ['Cancel Auto Stop At', findCancelAutoStopAtButton],
     ['Terminal', findTerminalButton],
     ['External Url', findExternalUrlButton],
-    ['Metrics', findMetricsButton],
     ['Edit', findEditButton],
     ['Stop', findStopButton],
     ['Destroy', findDestroyButton],
@@ -178,48 +175,6 @@ describe('Environments detail header component', () => {
     });
   });
 
-  describe('when metrics are enabled', () => {
-    beforeEach(() => {
-      createWrapper({
-        props: {
-          environment: createEnvironment({ metricsUrl: 'my metrics url' }),
-          metricsPath,
-        },
-      });
-    });
-
-    it('displays the metrics button with correct path', () => {
-      expect(findMetricsButton().attributes('href')).toBe(metricsPath);
-    });
-
-    it('uses a gl tooltip for the title', () => {
-      const button = findMetricsButton();
-      const tooltip = getBinding(button.element, 'gl-tooltip');
-
-      expect(tooltip).toBeDefined();
-      expect(button.attributes('title')).toBe('See metrics');
-    });
-
-    describe.each([true, false])(
-      'and `remove_monitor_metrics` flag is %p',
-      (removeMonitorMetrics) => {
-        beforeEach(() => {
-          createWrapper({
-            props: {
-              environment: createEnvironment({ metricsUrl: 'my metrics url' }),
-              metricsPath,
-            },
-            glFeatures: { removeMonitorMetrics },
-          });
-        });
-
-        it(`${removeMonitorMetrics ? 'does not render' : 'renders'} Metrics button`, () => {
-          expect(findMetricsButton().exists()).toBe(!removeMonitorMetrics);
-        });
-      },
-    );
-  });
-
   describe('when has all admin rights', () => {
     beforeEach(() => {
       createWrapper({

spec/frontend/environments/new_environment_item_spec.js

@@ -40,7 +40,6 @@ describe('~/environments/components/new_environment_item.vue', () => {
   const findDeployment = () => wrapper.findComponent(Deployment);
   const findActions = () => wrapper.findComponent(EnvironmentActions);
   const findKubernetesOverview = () => wrapper.findComponent(KubernetesOverview);
-  const findMonitoringLink = () => wrapper.find('[data-testid="environment-monitoring"]');
 
   const expandCollapsedSection = async () => {
     const button = wrapper.findByRole('button', { name: __('Expand') });
@@ -296,44 +295,6 @@ describe('~/environments/components/new_environment_item.vue', () => {
     });
   });
 
-  describe('monitoring', () => {
-    it('shows the link to monitoring if metrics are set up', () => {
-      wrapper = createWrapper({
-        propsData: { environment: { ...resolvedEnvironment, metricsPath: '/metrics' } },
-        apolloProvider: createApolloProvider(),
-      });
-
-      const rollback = wrapper.findByRole('menuitem', { name: __('Monitoring') });
-
-      expect(rollback.exists()).toBe(true);
-    });
-
-    it('does not show the link to monitoring if metrics are not set up', () => {
-      wrapper = createWrapper({ apolloProvider: createApolloProvider() });
-
-      const rollback = wrapper.findByRole('menuitem', { name: __('Monitoring') });
-
-      expect(rollback.exists()).toBe(false);
-    });
-
-    describe.each([true, false])(
-      'when `remove_monitor_metrics` flag  is %p',
-      (removeMonitorMetrics) => {
-        beforeEach(() => {
-          wrapper = createWrapper({
-            propsData: { environment: { ...resolvedEnvironment, metricsPath: '/metrics' } },
-            apolloProvider: createApolloProvider(),
-            provideData: { glFeatures: { removeMonitorMetrics } },
-          });
-        });
-
-        it(`${removeMonitorMetrics ? 'does not render' : 'renders'} link to metrics`, () => {
-          expect(findMonitoringLink().exists()).toBe(!removeMonitorMetrics);
-        });
-      },
-    );
-  });
-
   describe('terminal', () => {
     it('shows the link to the terminal if set up', () => {
       wrapper = createWrapper({