Amended code review proposed changes

Code review fixes for: separation of modal component,
variable naming convention, spec naming and qa selector.
Follow up issues on gitlab-ui selectors, integration of k3s and
strong memoization created.

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

@@ -394,6 +394,7 @@ export default {
         >
           <dashboards-dropdown
             id="monitor-dashboards-dropdown"
+            data-qa-selector="dashboards_filter_dropdown"
             class="mb-0 d-flex"
             toggle-class="dropdown-menu-toggle"
             :default-branch="defaultBranch"
@@ -458,6 +459,7 @@ export default {
           label-size="sm"
           label-for="monitor-time-window-dropdown"
           class="col-sm-auto col-md-auto col-lg-auto"
+          data-qa-selector="show_last_dropdown"
         >
           <date-time-picker
             ref="dateTimePicker"
@@ -533,6 +535,7 @@ export default {
               v-if="selectedDashboard.can_edit"
               class="mt-1 js-edit-link"
               :href="selectedDashboard.project_blob_path"
+              data-qa-selector="edit_dashboard_button"
               >{{ __('Edit dashboard') }}</gl-button
             >
 

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

@@ -92,8 +92,7 @@ export default {
     <p class="text-muted">
       {{
         s__(`Metrics|You can save a copy of this dashboard to your repository
-      so it can be customized. Select a file name and branch to 
-      save it.`)
+      so it can be customized. Select a file name and branch to save it.`)
       }}
     </p>
     <gl-form-group
@@ -104,7 +103,13 @@ export default {
       label-size="sm"
       label-for="fileName"
     >
-      <gl-form-input id="fileName" ref="fileName" v-model="form.fileName" :required="true" />
+      <gl-form-input
+        id="fileName"
+        ref="fileName"
+        v-model="form.fileName"
+        data-qa-selector="duplicate_dashboard_filename_field"
+        :required="true"
+      />
     </gl-form-group>
     <gl-form-group :label="__('Branch')" label-size="sm" label-for="branch">
       <gl-form-radio-group

qa/qa/fixtures/monitored_auto_devops/.gitlab-ci.yml

@@ -22,7 +22,7 @@ variables:
 stages:
   - production
 
-# This job continuously deploys to production on every push to `master`.
+# This job continuously deploys to staging/production on every push to `master`.
 
 production:
   stage: production

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

@@ -11,6 +11,14 @@ module QA
 
             view 'app/assets/javascripts/monitoring/components/dashboard.vue' do
               element :prometheus_graphs
+              element :dashboards_filter_dropdown
+              element :environments_dropdown
+              element :edit_dashboard_button
+              element :show_last_dropdown
+            end
+
+            view 'app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue' do
+              element :duplicate_dashboard_filename_field
             end
 
             view 'app/assets/javascripts/monitoring/components/panel_type.vue' do
@@ -35,6 +43,35 @@ module QA
               end
             end
 
+            def has_edit_dashboard_enabled?
+              within_element :prometheus_graphs do
+                has_element? :edit_dashboard_button
+              end
+            end
+
+            def duplicate_dashboard(save_as = 'test_duplication.yml', commit_option = 'Commit to master branch')
+              click_element :dashboards_filter_dropdown
+              click_on 'Duplicate dashboard'
+              fill_element :duplicate_dashboard_filename_field, save_as
+              choose commit_option
+              within('.modal-content') { click_button(class: 'btn-success') }
+            end
+
+            def filter_environment(environment = 'production')
+              click_element :environments_dropdown
+
+              within_element :environments_dropdown do
+                click_link_with_text environment
+              end
+            end
+
+            def show_last(range = '8 hours')
+              click_element :show_last_dropdown
+              within_element :show_last_dropdown do
+                click_on range
+              end
+            end
+
             private
 
             def wait_for_data

qa/qa/page/project/pipeline/index.rb

@@ -25,7 +25,7 @@ module QA::Page
       end
 
       def wait_for_latest_pipeline_status
-        wait_until(reload: false, max_duration: 300) do
+        wait_until(reload: false, max_duration: 360) do
           within_element_by_index(:pipeline_commit_status, 0) { yield }
         end
       end

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

+# frozen_string_literal: true
+
+module QA
+  context 'Monitor' do
+    describe 'Dashboards', :orchestrated, :kubernetes, quarantine: { type: :new } do
+      before(:all) do
+        @cluster = Service::KubernetesCluster.new.create!
+        Flow::Login.sign_in
+        create_project_to_monitor
+        wait_for_deployment
+      end
+
+      before do
+        Flow::Login.sign_in_unless_signed_in
+        @project.visit!
+      end
+
+      after(:all) do
+        @cluster&.remove!
+      end
+
+      it 'duplicates to create dashboard to custom' do
+        Page::Project::Menu.perform(&:go_to_operations_metrics)
+
+        Page::Project::Operations::Metrics::Show.perform do |dashboard|
+          dashboard.duplicate_dashboard
+
+          expect(dashboard).to have_metrics
+          expect(dashboard).to have_edit_dashboard_enabled
+        end
+      end
+
+      it 'verifies data on filtered deployed environment' do
+        Page::Project::Menu.perform(&:go_to_operations_metrics)
+
+        Page::Project::Operations::Metrics::Show.perform do |dashboard|
+          dashboard.filter_environment
+
+          expect(dashboard).to have_metrics
+        end
+      end
+
+      it 'filters using the quick range' do
+        Page::Project::Menu.perform(&:go_to_operations_metrics)
+
+        Page::Project::Operations::Metrics::Show.perform do |dashboard|
+          dashboard.show_last('30 minutes')
+          expect(dashboard).to have_metrics
+
+          dashboard.show_last('3 hours')
+          expect(dashboard).to have_metrics
+
+          dashboard.show_last('1 day')
+          expect(dashboard).to have_metrics
+        end
+      end
+
+      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|
+          project.name = 'cluster-with-prometheus'
+          project.description = 'Cluster with Prometheus'
+        end
+
+        @cluster_props = Resource::KubernetesCluster.fabricate_via_browser_ui! do |cluster_settings|
+          cluster_settings.project = @project
+          cluster_settings.cluster = @cluster
+          cluster_settings.install_helm_tiller = true
+          cluster_settings.install_ingress = true
+          cluster_settings.install_prometheus = true
+        end
+
+        Resource::CiVariable.fabricate_via_api! do |ci_variable|
+          ci_variable.project = @project
+          ci_variable.key = 'AUTO_DEVOPS_DOMAIN'
+          ci_variable.value = @cluster_props.ingress_ip
+          ci_variable.masked = false
+        end
+
+        Resource::Repository::ProjectPush.fabricate! do |push|
+          push.project = @project
+          push.directory = Pathname
+                               .new(__dir__)
+                               .join('../../../../../fixtures/monitored_auto_devops')
+          push.commit_message = 'Create AutoDevOps compatible Project for Monitoring'
+        end
+      end
+    end
+  end
+end

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

@@ -19,6 +19,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
       >
         <dashboards-dropdown-stub
           class="mb-0 d-flex"
+          data-qa-selector="dashboards_filter_dropdown"
           defaultbranch="master"
           id="monitor-dashboards-dropdown"
           selecteddashboard="[object Object]"
@@ -74,6 +75,7 @@ exports[`Dashboard template matches the default snapshot 1`] = `
        
       <gl-form-group-stub
         class="col-sm-auto col-md-auto col-lg-auto"
+        data-qa-selector="show_last_dropdown"
         label="Show last"
         label-for="monitor-time-window-dropdown"
         label-size="sm"