Expand the dashbord fixture to include metrics data

Prior to this change, the dashboard fixture
was only generating the dashboard json
to feed to the integration specs.

This change allows to make the tests
more dynamic by introducing the metrics data
too and avoid a hardcoded fixture to mantain.

Apply diff and update snapshot

Rename to dashboardProps

Fix CI issues

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

@@ -353,7 +353,10 @@ export default {
         </gl-deprecated-button>
       </div>
 
-      <div v-if="externalDashboardUrl.length" class="mb-2 mr-2 d-flex d-sm-block">
+      <div
+        v-if="externalDashboardUrl && externalDashboardUrl.length"
+        class="mb-2 mr-2 d-flex d-sm-block"
+      >
         <gl-deprecated-button
           class="flex-grow-1 js-external-dashboard-link"
           variant="primary"

spec/frontend/fixtures/metrics_dashboard.rb

@@ -6,10 +6,11 @@ RSpec.describe MetricsDashboard, '(JavaScript fixtures)', type: :controller do
   include JavaScriptFixturesHelpers
   include MetricsDashboardHelpers
 
-  let(:user) { create(:user) }
-  let(:project) { project_with_dashboard('.gitlab/dashboards/test.yml') }
-  let(:environment) { create(:environment, project: project) }
-  let(:params) { { environment: environment } }
+  let_it_be(:user) { create(:user) }
+  let_it_be(:namespace) { create(:namespace, name: 'monitoring' )}
+  let_it_be(:project) { project_with_dashboard_namespace('.gitlab/dashboards/test.yml', namespace: namespace) }
+  let_it_be(:environment) { create(:environment, id: 1, project: project) }
+  let_it_be(:params) { { environment: environment } }
 
   before(:all) do
     clean_frontend_fixtures('metrics_dashboard/')
@@ -24,6 +25,7 @@ RSpec.describe MetricsDashboard, '(JavaScript fixtures)', type: :controller do
     project.add_maintainer(user)
 
     allow(controller).to receive(:project).and_return(project)
+    allow(controller).to receive(:environment).and_return(environment)
     allow(controller)
         .to receive(:metrics_dashboard_params)
                 .and_return(params)
@@ -35,7 +37,9 @@ RSpec.describe MetricsDashboard, '(JavaScript fixtures)', type: :controller do
 
   it 'metrics_dashboard/environment_metrics_dashboard.json' do
     routes.draw { get "metrics_dashboard" => "anonymous#metrics_dashboard" }
+
     response = get :metrics_dashboard, format: :json
+
     expect(response).to be_successful
   end
 end

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

@@ -3,7 +3,19 @@
 exports[`Dashboard template matches the default snapshot 1`] = `
 <div
   class="prometheus-graphs"
+  currentenvironmentname="environment1"
+  customdashboardbasepath=".gitlab/dashboards"
+  dashboardendpoint="/monitoring/monitor-project/-/environments/1/metrics_dashboard.json"
+  dashboardsendpoint="/monitoring/monitor-project/-/performance_monitoring/dashboards.json"
+  dashboardtimezone="LOCAL"
   data-qa-selector="prometheus_graphs"
+  deploymentsendpoint="/monitoring/monitor-project/-/environments/1/deployments.json"
+  environmentstate="available"
+  logspath="/monitoring/monitor-project/-/logs?environment_name=environment1"
+  metricsdashboardbasepath="/monitoring/monitor-project/-/environments/1/metrics"
+  metricsendpoint="/monitoring/monitor-project/-/environments/1/additional_metrics.json"
+  projectpath="/monitoring/monitor-project"
+  prometheusstatus=""
 >
   <div
     class="prometheus-graphs-header d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 border-bottom bg-gray-light"
@@ -135,15 +147,15 @@ exports[`Dashboard template matches the default snapshot 1`] = `
   <!---->
    
   <empty-state-stub
-    clusterspath="/path/to/clusters"
-    documentationpath="/path/to/docs"
-    emptygettingstartedsvgpath="/path/to/getting-started.svg"
-    emptyloadingsvgpath="/path/to/loading.svg"
-    emptynodatasmallsvgpath="/path/to/no-data-small.svg"
-    emptynodatasvgpath="/path/to/no-data.svg"
-    emptyunabletoconnectsvgpath="/path/to/unable-to-connect.svg"
+    clusterspath="/monitoring/monitor-project/-/clusters"
+    documentationpath="/help/administration/monitoring/prometheus/index.md"
+    emptygettingstartedsvgpath="/images/illustrations/monitoring/getting_started.svg"
+    emptyloadingsvgpath="/images/illustrations/monitoring/loading.svg"
+    emptynodatasmallsvgpath="/images/illustrations/chart-empty-state-small.svg"
+    emptynodatasvgpath="/images/illustrations/monitoring/no_data.svg"
+    emptyunabletoconnectsvgpath="/images/illustrations/monitoring/unable_to_connect.svg"
     selectedstate="gettingStarted"
-    settingspath="/path/to/settings"
+    settingspath="/monitoring/monitor-project/-/services/prometheus/edit"
   />
 </div>
 `;

spec/frontend/monitoring/components/dashboard_panel_spec.js

@@ -18,8 +18,8 @@ import {
   singleStatMetricsResult,
   graphDataPrometheusQueryRangeMultiTrack,
   barMockData,
-  propsData,
 } from '../mock_data';
+import { dashboardProps, graphData, graphDataEmpty } from '../fixture_data';
 
 import { panelTypes } from '~/monitoring/constants';
 
@@ -32,7 +32,6 @@ import MonitorColumnChart from '~/monitoring/components/charts/column.vue';
 import MonitorBarChart from '~/monitoring/components/charts/bar.vue';
 import MonitorStackedColumnChart from '~/monitoring/components/charts/stacked_column.vue';
 
-import { graphData, graphDataEmpty } from '../fixture_data';
 import { createStore, monitoringDashboard } from '~/monitoring/stores';
 import { createStore as createEmbedGroupStore } from '~/monitoring/stores/embed_group';
 
@@ -63,7 +62,7 @@ describe('Dashboard Panel', () => {
     wrapper = shallowMount(DashboardPanel, {
       propsData: {
         graphData,
-        settingsPath: propsData.settingsPath,
+        settingsPath: dashboardProps.settingsPath,
         ...props,
       },
       store,
@@ -307,7 +306,7 @@ describe('Dashboard Panel', () => {
 
       return wrapper.vm.$nextTick(() => {
         expect(findEditCustomMetricLink().text()).toBe('Edit metrics');
-        expect(findEditCustomMetricLink().attributes('href')).toBe(propsData.settingsPath);
+        expect(findEditCustomMetricLink().attributes('href')).toBe(dashboardProps.settingsPath);
       });
     });
   });
@@ -424,7 +423,7 @@ describe('Dashboard Panel', () => {
       wrapper = shallowMount(DashboardPanel, {
         propsData: {
           clipboardText: exampleText,
-          settingsPath: propsData.settingsPath,
+          settingsPath: dashboardProps.settingsPath,
           graphData: {
             y_label: 'metric',
             ...graphData,
@@ -474,7 +473,7 @@ describe('Dashboard Panel', () => {
       wrapper = shallowMount(DashboardPanel, {
         propsData: {
           graphData,
-          settingsPath: propsData.settingsPath,
+          settingsPath: dashboardProps.settingsPath,
           namespace: mockNamespace,
         },
         store,

spec/frontend/monitoring/components/dashboard_spec.js

@@ -27,8 +27,12 @@ import {
   setupStoreWithVariable,
   setupStoreWithLinks,
 } from '../store_utils';
-import { environmentData, dashboardGitResponse, propsData } from '../mock_data';
-import { metricsDashboardViewModel, metricsDashboardPanelCount } from '../fixture_data';
+import { environmentData, dashboardGitResponse } from '../mock_data';
+import {
+  metricsDashboardViewModel,
+  metricsDashboardPanelCount,
+  dashboardProps,
+} from '../fixture_data';
 import createFlash from '~/flash';
 
 jest.mock('~/flash');
@@ -48,7 +52,7 @@ describe('Dashboard', () => {
 
   const createShallowWrapper = (props = {}, options = {}) => {
     wrapper = shallowMount(Dashboard, {
-      propsData: { ...propsData, ...props },
+      propsData: { ...dashboardProps, ...props },
       store,
       stubs: {
         DashboardHeader,
@@ -59,7 +63,7 @@ describe('Dashboard', () => {
 
   const createMountedWrapper = (props = {}, options = {}) => {
     wrapper = mount(Dashboard, {
-      propsData: { ...propsData, ...props },
+      propsData: { ...dashboardProps, ...props },
       store,
       stubs: {
         'graph-group': true,

spec/frontend/monitoring/components/dashboard_template_spec.js

@@ -5,7 +5,7 @@ import Dashboard from '~/monitoring/components/dashboard.vue';
 import DashboardHeader from '~/monitoring/components/dashboard_header.vue';
 import { createStore } from '~/monitoring/stores';
 import { setupAllDashboards } from '../store_utils';
-import { propsData } from '../mock_data';
+import { dashboardProps } from '../fixture_data';
 
 jest.mock('~/lib/utils/url_utility');
 
@@ -29,7 +29,7 @@ describe('Dashboard template', () => {
 
   it('matches the default snapshot', () => {
     wrapper = shallowMount(Dashboard, {
-      propsData: { ...propsData },
+      propsData: { ...dashboardProps },
       store,
       stubs: {
         DashboardHeader,

spec/frontend/monitoring/components/dashboard_url_time_spec.js

@@ -9,7 +9,8 @@ import {
   updateHistory,
 } from '~/lib/utils/url_utility';
 import axios from '~/lib/utils/axios_utils';
-import { mockProjectDir, propsData } from '../mock_data';
+import { mockProjectDir } from '../mock_data';
+import { dashboardProps } from '../fixture_data';
 
 import Dashboard from '~/monitoring/components/dashboard.vue';
 import DashboardHeader from '~/monitoring/components/dashboard_header.vue';
@@ -26,7 +27,7 @@ describe('dashboard invalid url parameters', () => {
 
   const createMountedWrapper = (props = { hasMetrics: true }, options = {}) => {
     wrapper = mount(Dashboard, {
-      propsData: { ...propsData, ...props },
+      propsData: { ...dashboardProps, ...props },
       store,
       stubs: { 'graph-group': true, 'dashboard-panel': true, 'dashboard-header': DashboardHeader },
       ...options,

spec/frontend/monitoring/fixture_data.js

 import { mapToDashboardViewModel } from '~/monitoring/stores/utils';
 import { metricStates } from '~/monitoring/constants';
+import { parseBoolean, convertObjectProps } from '~/lib/utils/common_utils';
+import { convertToCamelCase } from '~/lib/utils/text_utility';
 
 import { metricsResult } from './mock_data';
 
@@ -8,6 +10,20 @@ export const metricsDashboardResponse = getJSONFixture(
   'metrics_dashboard/environment_metrics_dashboard.json',
 );
 export const metricsDashboardPayload = metricsDashboardResponse.dashboard;
+
+const metricsData = convertObjectProps(
+  // Some props use kebab-case, convert to snake_case first
+  key => convertToCamelCase(key.replace(/-/g, '_')),
+  metricsDashboardResponse.metrics_data,
+);
+
+export const dashboardProps = {
+  ...metricsData,
+  hasMetrics: parseBoolean(metricsData.hasMetrics),
+  customMetricsAvailable: parseBoolean(metricsData.customMetricsAvailable),
+  prometheusAlertsAvailable: parseBoolean(metricsData.prometheusAlertsAvailable),
+};
+
 export const metricsDashboardViewModel = mapToDashboardViewModel(metricsDashboardPayload);
 
 export const metricsDashboardPanelCount = 22;

spec/javascripts/monitoring/components/dashboard_resize_browser_spec.js

@@ -11,8 +11,8 @@ import MockAdapter from 'axios-mock-adapter';
 import Dashboard from '~/monitoring/components/dashboard.vue';
 import { createStore } from '~/monitoring/stores';
 import axios from '~/lib/utils/axios_utils';
-import { mockApiEndpoint, propsData } from '../mock_data';
-import { metricsDashboardPayload } from '../fixture_data';
+import { mockApiEndpoint } from '../mock_data';
+import { metricsDashboardPayload, dashboardProps } from '../fixture_data';
 import { setupStoreWithData } from '../store_utils';
 
 const localVue = createLocalVue();
@@ -56,7 +56,7 @@ describe('Dashboard', () => {
       component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: {
-          ...propsData,
+          ...dashboardProps,
           hasMetrics: true,
           showPanels: true,
         },

spec/support/helpers/metrics_dashboard_helpers.rb

@@ -7,6 +7,12 @@ module MetricsDashboardHelpers
     create(:project, :custom_repo, files: { dashboard_path => dashboard_yml })
   end
 
+  def project_with_dashboard_namespace(dashboard_path, dashboard_yml = nil)
+    dashboard_yml ||= fixture_file('lib/gitlab/metrics/dashboard/sample_dashboard.yml')
+
+    create(:project, :custom_repo, namespace: namespace, path: 'monitor-project', files: { dashboard_path => dashboard_yml })
+  end
+
   def delete_project_dashboard(project, user, dashboard_path)
     project.repository.delete_file(
       user,