Refactor monitor core tests

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

@@ -494,7 +494,7 @@ export default {
         <date-time-picker
           ref="dateTimePicker"
           class="flex-grow-1 show-last-dropdown"
-          data-qa-selector="show_last_dropdown"
+          data-qa-selector="range_picker_dropdown"
           :value="selectedTimeRange"
           :options="timeRanges"
           @input="onDateTimePickerInput"

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

@@ -209,6 +209,7 @@ export default {
           <gl-dropdown-item
             v-for="(option, index) in options"
             :key="index"
+            data-qa-selector="quick_range_item"
             :active="isOptionActive(option)"
             active-class="active"
             @click="setQuickRange(option)"

app/views/projects/services/prometheus/_custom_metrics.html.haml

@@ -6,14 +6,14 @@
     = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus', anchor: 'adding-custom-metrics'), target: '_blank', rel: "noopener noreferrer"
 
 .col-lg-9
-  .card.custom-monitored-metrics.js-panel-custom-monitored-metrics{ data: { active_custom_metrics: project_prometheus_metrics_path(project), environments_data: environments_list_data, service_active: "#{@service.active}" } }
+  .card.custom-monitored-metrics.js-panel-custom-monitored-metrics{ data: { qa_selector: 'custom_metrics_container', active_custom_metrics: project_prometheus_metrics_path(project), environments_data: environments_list_data, service_active: "#{@service.active}" } }
     .card-header
       %strong
         = s_('PrometheusService|Custom metrics')
       -# haml-lint:disable NoPlainNodes
       %span.badge.badge-pill.js-custom-monitored-count 0
       -# haml-lint:enable NoPlainNodes
-      = link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(project), class: 'btn btn-success js-new-metric-button hidden'
+      = link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(project), class: 'btn btn-success js-new-metric-button hidden', data: { qa_selector: 'new_metric_button' }
     .card-body
       .flash-container.hidden
         .flash-warning

qa/qa.rb

@@ -265,6 +265,11 @@ module QA
         autoload :VisibilityFeaturesPermissions, 'qa/page/project/settings/visibility_features_permissions'
         autoload :Operations, 'qa/page/project/settings/operations'
         autoload :Incidents, 'qa/page/project/settings/incidents'
+        autoload :Integrations, 'qa/page/project/settings/integrations'
+
+        module Services
+          autoload :Prometheus, 'qa/page/project/settings/services/prometheus'
+        end
       end
 
       module SubMenus
@@ -412,6 +417,7 @@ module QA
       autoload :UsersSelect, 'qa/page/component/users_select'
       autoload :Note, 'qa/page/component/note'
       autoload :ConfirmModal, 'qa/page/component/confirm_modal'
+      autoload :CustomMetric, 'qa/page/component/custom_metric'
 
       module Issuable
         autoload :Common, 'qa/page/component/issuable/common'

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

@@ -8,7 +8,6 @@ module QA
           module Metrics
             module Show
               EXPECTED_LABEL = 'Total (GB)'
-              EXPECTED_TITLE_CUSTOM_METRIC = 'HTTP Requests (Total)'
 
               def self.prepended(page)
                 page.module_eval do
@@ -17,18 +16,6 @@ module QA
                     element :alert_query_option
                     element :alert_threshold_field
                   end
-
-                  view 'app/assets/javascripts/monitoring/components/dashboard.vue' do
-                    element :add_metric_button
-                  end
-
-                  view 'app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue' do
-                    element :custom_metric_prometheus_title_field
-                    element :custom_metric_prometheus_query_field
-                    element :custom_metric_prometheus_y_label_field
-                    element :custom_metric_prometheus_unit_label_field
-                    element :custom_metric_prometheus_legend_label_field
-                  end
                 end
               end
 
@@ -64,34 +51,6 @@ module QA
                 click_element :alert_query_dropdown unless has_element?(:alert_query_option, wait: 3)
                 all_elements(:alert_query_option, minimum: 1).first.click
               end
-
-              def add_custom_metric
-                open_add_metric_modal
-
-                fill_element :custom_metric_prometheus_title_field, EXPECTED_TITLE_CUSTOM_METRIC
-                fill_element :custom_metric_prometheus_query_field, 'rate(http_requests_total[5m])'
-                fill_element :custom_metric_prometheus_y_label_field, 'Requests/second'
-                fill_element :custom_metric_prometheus_unit_label_field, 'req/sec'
-                fill_element :custom_metric_prometheus_legend_label_field, 'HTTP requests'
-
-                save_changes
-              end
-
-              def has_custom_metric?
-                within_element :prometheus_graphs do
-                  has_text?(EXPECTED_TITLE_CUSTOM_METRIC)
-                end
-              end
-
-              private
-
-              def open_add_metric_modal
-                click_element :add_metric_button
-              end
-
-              def save_changes
-                within('.modal-content') { click_button(class: 'btn-success') }
-              end
             end
           end
         end

qa/qa/page/component/custom_metric.rb

+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Component
+      module CustomMetric
+        def self.included(base)
+          base.view 'app/assets/javascripts/custom_metrics/components/custom_metrics_form_fields.vue' do
+            element :custom_metric_prometheus_title_field
+            element :custom_metric_prometheus_query_field
+            element :custom_metric_prometheus_y_label_field
+            element :custom_metric_prometheus_unit_label_field
+            element :custom_metric_prometheus_legend_label_field
+          end
+        end
+
+        def add_custom_metric
+          fill_element :custom_metric_prometheus_title_field, 'HTTP Requests Total'
+          fill_element :custom_metric_prometheus_query_field, 'rate(http_requests_total[5m])'
+          fill_element :custom_metric_prometheus_y_label_field, 'Requests/second'
+          fill_element :custom_metric_prometheus_unit_label_field, 'req/sec'
+          fill_element :custom_metric_prometheus_legend_label_field, 'HTTP requests'
+
+          save_changes
+        end
+
+        def save_changes
+          click_button(class: 'btn-success')
+        end
+
+        def delete_custom_metric
+          click_button(class: 'btn-danger')
+          within('.modal-content') { click_button(class: 'btn-danger') }
+        end
+
+        def edit_custom_metric
+          fill_element :custom_metric_prometheus_title_field, ''
+          fill_element :custom_metric_prometheus_title_field, 'Throughput'
+
+          save_changes
+        end
+      end
+    end
+  end
+end

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

@@ -14,7 +14,7 @@ module QA
               element :dashboards_filter_dropdown
               element :environments_dropdown
               element :edit_dashboard_button
-              element :show_last_dropdown
+              element :range_picker_dropdown
             end
 
             view 'app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue' do
@@ -28,6 +28,10 @@ module QA
               element :generate_chart_link_menu_item
             end
 
+            view 'app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue' do
+              element :quick_range_item
+            end
+
             def wait_for_metrics
               wait_for_data
               return if has_metrics?
@@ -67,10 +71,8 @@ module QA
             end
 
             def show_last(range = '8 hours')
-              click_element :show_last_dropdown
-              within_element :show_last_dropdown do
-                click_on range
-              end
+              all_elements(:range_picker_dropdown, minimum: 1).first.click
+              click_element :quick_range_item, text: range
             end
 
             def copy_link_to_first_chart
@@ -78,6 +80,12 @@ module QA
               find_element(:generate_chart_link_menu_item)['data-clipboard-text']
             end
 
+            def has_custom_metric?(metric)
+              within_element :prometheus_graphs do
+                has_text?(metric)
+              end
+            end
+
             private
 
             def wait_for_data

qa/qa/page/project/settings/integrations.rb

+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Project
+      module Settings
+        class Integrations < QA::Page::Base
+          view 'app/views/shared/integrations/_index.html.haml' do
+            element :prometheus_link, '{ data: { qa_selector: "#{integration.to_param' # rubocop:disable QA/ElementWithPattern
+          end
+
+          def click_on_prometheus_integration
+            click_element :prometheus_link
+          end
+        end
+      end
+    end
+  end
+end

qa/qa/page/project/settings/services/prometheus.rb

+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Project
+      module Settings
+        module Services
+          class Prometheus < Page::Base
+            include Page::Component::CustomMetric
+
+            view 'app/views/projects/services/prometheus/_custom_metrics.html.haml' do
+              element :custom_metrics_container
+              element :new_metric_button
+            end
+
+            def click_on_custom_metric(custom_metric)
+              within_element :custom_metrics_container do
+                click_on custom_metric
+              end
+            end
+
+            def click_on_new_metric
+              click_element :new_metric_button
+            end
+
+            def has_custom_metric?(custom_metric)
+              within_element :custom_metrics_container do
+                has_text? custom_metric
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

qa/qa/specs/features/browser_ui/8_monitor/apm/dashboards_spec.rb → qa/qa/specs/features/browser_ui/8_monitor/all_monitor_core_features_spec.rb

@@ -2,12 +2,10 @@
 
 module QA
   context 'Monitor' do
-    describe 'Dashboards', :orchestrated, :kubernetes, quarantine: { issue: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/29262', type: :waiting_on } do
-      before(:all) do
-        @cluster = Service::KubernetesCluster.new.create!
+    describe 'with Prometheus Gitlab-managed cluster', :orchestrated, :kubernetes, :docker, :runner do
+      before :all do
         Flow::Login.sign_in
-        create_project_to_monitor
-        wait_for_deployment
+        @project, @runner = deploy_project_with_prometheus
       end
 
       before do
@@ -15,8 +13,15 @@ module QA
         @project.visit!
       end
 
-      after(:all) do
-        @cluster&.remove!
+      after :all do
+        @runner.remove_via_api!
+        @cluster.remove!
+      end
+
+      it 'configures custom metrics' do
+        verify_add_custom_metric
+        verify_edit_custom_metric
+        verify_delete_custom_metric
       end
 
       it 'duplicates to create dashboard to custom' do
@@ -57,20 +62,21 @@ module QA
 
       private
 
-      def wait_for_deployment
-        Page::Project::Menu.perform(&:click_ci_cd_pipelines)
-        Page::Project::Pipeline::Index.perform(&:wait_for_latest_pipeline_success_or_retry)
-        Page::Project::Menu.perform(&:go_to_operations_metrics)
-      end
-
-      def create_project_to_monitor
-        @project = Resource::Project.fabricate_via_api! do |project|
+      def deploy_project_with_prometheus
+        project = Resource::Project.fabricate_via_api! do |project|
           project.name = 'cluster-with-prometheus'
           project.description = 'Cluster with Prometheus'
         end
 
-        @cluster_props = Resource::KubernetesCluster::ProjectCluster.fabricate_via_browser_ui! do |cluster_settings|
-          cluster_settings.project = @project
+        runner = Resource::Runner.fabricate_via_api! do |runner|
+          runner.project = project
+          runner.name = project.name
+        end
+
+        @cluster = Service::KubernetesCluster.new.create!
+
+        cluster_props = Resource::KubernetesCluster::ProjectCluster.fabricate! do |cluster_settings|
+          cluster_settings.project = project
           cluster_settings.cluster = @cluster
           cluster_settings.install_helm_tiller = true
           cluster_settings.install_ingress = true
@@ -78,19 +84,71 @@ module QA
         end
 
         Resource::CiVariable.fabricate_via_api! do |ci_variable|
-          ci_variable.project = @project
+          ci_variable.project = project
           ci_variable.key = 'AUTO_DEVOPS_DOMAIN'
-          ci_variable.value = @cluster_props.ingress_ip
+          ci_variable.value = cluster_props.ingress_ip
           ci_variable.masked = false
         end
 
         Resource::Repository::ProjectPush.fabricate! do |push|
-          push.project = @project
+          push.project = project
           push.directory = Pathname
                                .new(__dir__)
-                               .join('../../../../../fixtures/monitored_auto_devops')
+                               .join('../../../../fixtures/monitored_auto_devops')
           push.commit_message = 'Create AutoDevOps compatible Project for Monitoring'
         end
+
+        Page::Project::Menu.perform(&:click_ci_cd_pipelines)
+        Page::Project::Pipeline::Index.perform(&:wait_for_latest_pipeline_success_or_retry)
+
+        [project, runner]
+      end
+
+      def verify_add_custom_metric
+        Page::Project::Menu.perform(&:go_to_integrations_settings)
+        Page::Project::Settings::Integrations.perform(&:click_on_prometheus_integration)
+
+        Page::Project::Settings::Services::Prometheus.perform do |metrics_panel|
+          metrics_panel.click_on_new_metric
+          metrics_panel.add_custom_metric
+        end
+
+        Page::Project::Menu.perform(&:go_to_operations_metrics)
+
+        Page::Project::Operations::Metrics::Show.perform do |dashboard|
+          expect(dashboard).to have_custom_metric('HTTP Requests Total')
+        end
+      end
+
+      def verify_edit_custom_metric
+        Page::Project::Menu.perform(&:go_to_integrations_settings)
+        Page::Project::Settings::Integrations.perform(&:click_on_prometheus_integration)
+        Page::Project::Settings::Services::Prometheus.perform do |metrics_panel|
+          metrics_panel.click_on_custom_metric('Business / HTTP Requests Total (req/sec)')
+          metrics_panel.edit_custom_metric
+        end
+
+        Page::Project::Menu.perform(&:go_to_operations_metrics)
+
+        Page::Project::Operations::Metrics::Show.perform do |dashboard|
+          expect(dashboard).to have_custom_metric('Throughput')
+        end
+      end
+
+      def verify_delete_custom_metric
+        Page::Project::Menu.perform(&:go_to_integrations_settings)
+        Page::Project::Settings::Integrations.perform(&:click_on_prometheus_integration)
+
+        Page::Project::Settings::Services::Prometheus.perform do |metrics_panel|
+          metrics_panel.click_on_custom_metric('Business / Throughput (req/sec)')
+          metrics_panel.delete_custom_metric
+        end
+
+        Page::Project::Menu.perform(&:go_to_operations_metrics)
+
+        Page::Project::Operations::Metrics::Show.perform do |dashboard|
+          expect(dashboard).not_to have_custom_metric('Throughput')
+        end
       end
     end
   end

qa/qa/specs/features/ee/browser_ui/8_monitor/all_monitor_features_spec.rb

 # frozen_string_literal: true
 
 module QA
-  context 'Monitor', quarantine: { issue: 'https://gitlab.com/gitlab-org/gitlab/-/issues/217247', type: :flaky } do
-    describe 'with Prometheus Gitlab-managed cluster', :orchestrated, :kubernetes, :docker do
+  context 'Monitor' do
+    describe 'with Prometheus Gitlab-managed cluster', :orchestrated, :kubernetes, :docker, :runner do
       before :all do
         @cluster = Service::KubernetesCluster.new.create!
         Flow::Login.sign_in
@@ -19,20 +19,6 @@ module QA
         @project.visit!
       end
 
-      it 'configures custom metrics' do
-        Page::Project::Menu.perform(&:go_to_operations_metrics)
-
-        Page::Project::Operations::Metrics::Show.perform do |metrics|
-          metrics.add_custom_metric
-        end
-
-        Page::Project::Menu.perform(&:go_to_operations_metrics)
-
-        Page::Project::Operations::Metrics::Show.perform do |metrics|
-          expect(metrics).to have_custom_metric
-        end
-      end
-
       it 'allows configuration of alerts' do
         Page::Project::Menu.perform(&:go_to_operations_metrics)
 

spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap

@@ -71,7 +71,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
       <date-time-picker-stub
         class="flex-grow-1 show-last-dropdown"
         customenabled="true"
-        data-qa-selector="show_last_dropdown"
+        data-qa-selector="range_picker_dropdown"
         options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
         value="[object Object]"
       />