Merge branch 'extend-dashboard-fixture' into 'master'

Expand the dashboard fixture to include metrics data

See merge request gitlab-org/gitlab!35323

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"

app/assets/javascripts/monitoring/monitoring_app.js

 import Vue from 'vue';
 import { GlToast } from '@gitlab/ui';
-import { parseBoolean } from '~/lib/utils/common_utils';
 import { getParameterValues } from '~/lib/utils/url_utility';
 import { createStore } from './stores';
 import createRouter from './router';
+import { stateAndPropsFromDataset } from './utils';
 
 Vue.use(GlToast);
 
@@ -12,37 +12,10 @@ export default (props = {}) => {
 
   if (el && el.dataset) {
     const [currentDashboard] = getParameterValues('dashboard');
+    const { metricsDashboardBasePath, ...dataset } = el.dataset;
 
-    const {
-      deploymentsEndpoint,
-      dashboardEndpoint,
-      dashboardsEndpoint,
-      projectPath,
-      logsPath,
-      currentEnvironmentName,
-      dashboardTimezone,
-      metricsDashboardBasePath,
-      customDashboardBasePath,
-      ...dataProps
-    } = el.dataset;
-
-    const store = createStore({
-      currentDashboard,
-      deploymentsEndpoint,
-      dashboardEndpoint,
-      dashboardsEndpoint,
-      dashboardTimezone,
-      projectPath,
-      logsPath,
-      currentEnvironmentName,
-      customDashboardBasePath,
-    });
-
-    // HTML attributes are always strings, parse other types.
-    dataProps.hasMetrics = parseBoolean(dataProps.hasMetrics);
-    dataProps.customMetricsAvailable = parseBoolean(dataProps.customMetricsAvailable);
-    dataProps.prometheusAlertsAvailable = parseBoolean(dataProps.prometheusAlertsAvailable);
-
+    const { initState, dataProps } = stateAndPropsFromDataset({ currentDashboard, ...dataset });
+    const store = createStore(initState);
     const router = createRouter(metricsDashboardBasePath);
 
     // eslint-disable-next-line no-new

app/assets/javascripts/monitoring/utils.js

@@ -5,6 +5,7 @@ import {
   removeParams,
   updateHistory,
 } from '~/lib/utils/url_utility';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import {
   timeRangeParamNames,
   timeRangeFromParams,
@@ -12,6 +13,46 @@ import {
 } from '~/lib/utils/datetime_range';
 import { VARIABLE_PREFIX } from './constants';
 
+/**
+ * Extracts the initial state and props from HTML dataset
+ * and places them in separate objects to setup bundle.
+ * @param {*} dataset
+ */
+export const stateAndPropsFromDataset = (dataset = {}) => {
+  const {
+    currentDashboard,
+    deploymentsEndpoint,
+    dashboardEndpoint,
+    dashboardsEndpoint,
+    dashboardTimezone,
+    projectPath,
+    logsPath,
+    currentEnvironmentName,
+    customDashboardBasePath,
+    ...dataProps
+  } = dataset;
+
+  // HTML attributes are always strings, parse other types.
+  dataProps.hasMetrics = parseBoolean(dataProps.hasMetrics);
+  dataProps.customMetricsAvailable = parseBoolean(dataProps.customMetricsAvailable);
+  dataProps.prometheusAlertsAvailable = parseBoolean(dataProps.prometheusAlertsAvailable);
+
+  return {
+    initState: {
+      currentDashboard,
+      deploymentsEndpoint,
+      dashboardEndpoint,
+      dashboardsEndpoint,
+      dashboardTimezone,
+      projectPath,
+      logsPath,
+      currentEnvironmentName,
+      customDashboardBasePath,
+    },
+    dataProps,
+  };
+};
+
 /**
  * List of non time range url parameters
  * This will be removed once we add support for free text variables

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

@@ -4,6 +4,10 @@ exports[`Dashboard template matches the default snapshot 1`] = `
 <div
   class="prometheus-graphs"
   data-qa-selector="prometheus_graphs"
+  environmentstate="available"
+  metricsdashboardbasepath="/monitoring/monitor-project/-/environments/1/metrics"
+  metricsendpoint="/monitoring/monitor-project/-/environments/1/additional_metrics.json"
+  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 +139,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,
@@ -316,7 +315,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);
       });
     });
   });
@@ -433,7 +432,7 @@ describe('Dashboard Panel', () => {
       wrapper = shallowMount(DashboardPanel, {
         propsData: {
           clipboardText: exampleText,
-          settingsPath: propsData.settingsPath,
+          settingsPath: dashboardProps.settingsPath,
           graphData: {
             y_label: 'metric',
             ...graphData,
@@ -483,7 +482,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

@@ -29,8 +29,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');
@@ -50,7 +54,7 @@ describe('Dashboard', () => {
 
   const createShallowWrapper = (props = {}, options = {}) => {
     wrapper = shallowMount(Dashboard, {
-      propsData: { ...propsData, ...props },
+      propsData: { ...dashboardProps, ...props },
       store,
       stubs: {
         DashboardHeader,
@@ -61,7 +65,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 { stateAndPropsFromDataset } from '~/monitoring/utils';
 import { mapToDashboardViewModel } from '~/monitoring/stores/utils';
 import { metricStates } from '~/monitoring/constants';
+import { convertObjectProps } from '~/lib/utils/common_utils';
+import { convertToCamelCase } from '~/lib/utils/text_utility';
 
 import { metricsResult } from './mock_data';
 
@@ -8,6 +11,19 @@ export const metricsDashboardResponse = getJSONFixture(
   'metrics_dashboard/environment_metrics_dashboard.json',
 );
 export const metricsDashboardPayload = metricsDashboardResponse.dashboard;
+
+const datasetState = stateAndPropsFromDataset(
+  // It's preferable to have props in snake_case, this will be addressed at:
+  // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/33574
+  convertObjectProps(
+    // Some props use kebab-case, convert to snake_case first
+    key => convertToCamelCase(key.replace(/-/g, '_')),
+    metricsDashboardResponse.metrics_data,
+  ),
+);
+
+export const dashboardProps = datasetState.dataProps;
+
 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,