Add templating variables in dashboard test

This change introduces a new test case where
template variables can be accessed and used to
filter dashboards more granularly.

Documentation can be found in Docs under
templating-variables-for-metrics-dashboards

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

@@ -37,7 +37,11 @@ export default {
 };
 </script>
 <template>
-  <div ref="variablesSection" class="d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 variables-section">
+  <div
+    ref="variablesSection"
+    class="d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 variables-section"
+    data-qa-selector="variables_content"
+  >
     <div v-for="variable in variables" :key="variable.name" class="mb-1 pr-2 d-flex d-sm-block">
       <component
         :is="variableField(variable.type)"
@@ -46,6 +50,7 @@ export default {
         :value="variable.value"
         :name="variable.name"
         :options="variable.options"
+        data-qa-selector="variable_item"
         @input="refreshDashboard(variable, $event)"
       />
     </div>

qa/qa/fixtures/metrics_dashboards/templating.yml

+dashboard: 'Pod metrics'
+priority: 10
+templating:
+  variables:
+    pod_name:
+      label: 'CPU POD'
+      type: custom
+      options:
+        values:
+          - value: 'runner-gitlab-runner-.*'
+            text: 'GitLab Runner'
+          - value: 'Option1'
+            text: 'Option'
+          - value: 'Option2'
+            text: 'Option'
+          - value: 'Option3'
+            text: 'Option'
+    pod_name2:
+      label: 'Memory POD'
+      type: custom
+      options:
+        values:
+          - value: 'production-postgresql-.*'
+            text: 'Postgresql'
+panel_groups:
+  - group: CPU metrics
+    panels:
+      - title: "CPU usage GitLab Runner"
+        type: "line-chart"
+        y_label: "Cores per pod"
+        metrics:
+          - id: pod_cpu_usage_seconds_total
+            query_range: 'rate(container_cpu_usage_seconds_total{pod_name=~"{{pod_name}}"}[5m])'
+            unit: "cores"
+            label: pod_name
+      - title: "Memory usage Postgresql"
+        type: "line-chart"
+        y_label: "Working set memory (MiB)"
+        metrics:
+          - id: pod_memory_working_set1
+            query_range: 'container_memory_working_set_bytes{pod_name=~"{{pod_name2}}"}/1024/1024'
+            unit: "MiB"
+            label: pod_name

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

@@ -41,6 +41,11 @@ module QA
               element :quick_range_item
             end
 
+            view 'app/assets/javascripts/monitoring/components/variables_section.vue' do
+              element :variables_content
+              element :variable_item
+            end
+
             def wait_for_metrics
               wait_for_data
               return if has_metrics?
@@ -73,6 +78,14 @@ module QA
               within('.modal-content') { click_button(class: 'btn-success') }
             end
 
+            def select_dashboard(dashboard_name)
+              click_element :dashboards_filter_dropdown
+
+              within_element :dashboards_filter_dropdown do
+                click_on dashboard_name
+              end
+            end
+
             def filter_environment(environment = 'production')
               click_element :environments_dropdown
 
@@ -97,6 +110,18 @@ module QA
               end
             end
 
+            def has_templating_variable?(variable)
+              within_element :variables_content do
+                has_element?(:variable_item, text: variable)
+              end
+            end
+
+            def has_template_metric?(metric)
+              within_element :prometheus_graphs do
+                has_text?(metric)
+              end
+            end
+
             private
 
             def wait_for_data

qa/qa/specs/features/browser_ui/8_monitor/all_monitor_core_features_spec.rb

@@ -78,6 +78,31 @@ module QA
         end
       end
 
+      it 'uses templating variables for metrics dashboards' do
+        templating_dashboard_yml = Pathname
+                                       .new(__dir__)
+                                       .join('../../../../fixtures/metrics_dashboards/templating.yml')
+
+        Resource::Repository::ProjectPush.fabricate! do |push|
+          push.project = @project
+          push.file_name = '.gitlab/dashboards/templating.yml'
+          push.file_content = File.read(templating_dashboard_yml)
+          push.commit_message = 'Add templating in dashboard file'
+          push.new_branch = false
+        end
+
+        Page::Project::Menu.perform(&:go_to_operations_metrics)
+
+        Page::Project::Operations::Metrics::Show.perform do |dashboard|
+          dashboard.select_dashboard('templating.yml')
+
+          expect(dashboard).to have_template_metric('CPU usage GitLab Runner')
+          expect(dashboard).to have_template_metric('Memory usage Postgresql')
+          expect(dashboard).to have_templating_variable('GitLab Runner')
+          expect(dashboard).to have_templating_variable('Postgresql')
+        end
+      end
+
       private
 
       def deploy_project_with_prometheus