Use snake_case for metrics data

Frontend usually expects data in camelCase, and our tooling mostly
considers that format. All things being equal, is best to use
snake_case for HTML data.

app/helpers/environments_helper.rb

@@ -12,8 +12,8 @@ module EnvironmentsHelper
   def environments_folder_list_view_data
     {
       "endpoint" => folder_project_environments_path(@project, @folder, format: :json),
-      "folder-name" => @folder,
-      "can-read-environment" => can?(current_user, :read_environment, @project).to_s
+      "folder_name" => @folder,
+      "can_read_environment" => can?(current_user, :read_environment, @project).to_s
     }
   end
 
@@ -33,10 +33,10 @@ module EnvironmentsHelper
 
   def environment_logs_data(project, environment)
     {
-      "environment-name": environment.name,
-      "environments-path": project_environments_path(project, format: :json),
-      "environment-id": environment.id,
-      "cluster-applications-documentation-path" => help_page_path('user/clusters/applications.md', anchor: 'elastic-stack')
+      "environment_name": environment.name,
+      "environments_path": project_environments_path(project, format: :json),
+      "environment_id": environment.id,
+      "cluster_applications_documentation_path" => help_page_path('user/clusters/applications.md', anchor: 'elastic-stack')
     }
   end
 
@@ -50,18 +50,18 @@ module EnvironmentsHelper
     return {} unless project
 
     {
-      'settings-path'               => edit_project_service_path(project, 'prometheus'),
-      'clusters-path'               => project_clusters_path(project),
-      'dashboards-endpoint'         => project_performance_monitoring_dashboards_path(project, format: :json),
-      'default-branch'              => project.default_branch,
-      'project-path'                => project_path(project),
-      'tags-path'                   => project_tags_path(project),
-      'external-dashboard-url'      => project.metrics_setting_external_dashboard_url,
-      'custom-metrics-path'         => project_prometheus_metrics_path(project),
-      'validate-query-path'         => validate_query_project_prometheus_metrics_path(project),
-      'custom-metrics-available'    => "#{custom_metrics_available?(project)}",
-      'prometheus-alerts-available' => "#{can?(current_user, :read_prometheus_alerts, project)}",
-      'dashboard-timezone'          => project.metrics_setting_dashboard_timezone.to_s.upcase
+      'settings_path'               => edit_project_service_path(project, 'prometheus'),
+      'clusters_path'               => project_clusters_path(project),
+      'dashboards_endpoint'         => project_performance_monitoring_dashboards_path(project, format: :json),
+      'default_branch'              => project.default_branch,
+      'project_path'                => project_path(project),
+      'tags_path'                   => project_tags_path(project),
+      'external_dashboard_url'      => project.metrics_setting_external_dashboard_url,
+      'custom_metrics_path'         => project_prometheus_metrics_path(project),
+      'validate_query_path'         => validate_query_project_prometheus_metrics_path(project),
+      'custom_metrics_available'    => "#{custom_metrics_available?(project)}",
+      'prometheus_alerts_available' => "#{can?(current_user, :read_prometheus_alerts, project)}",
+      'dashboard_timezone'          => project.metrics_setting_dashboard_timezone.to_s.upcase
     }
   end
 
@@ -69,11 +69,11 @@ module EnvironmentsHelper
     return {} unless environment
 
     {
-      'metrics-dashboard-base-path' => environment_metrics_path(environment),
-      'current-environment-name'    => environment.name,
-      'has-metrics'                 => "#{environment.has_metrics?}",
-      'prometheus-status'           => "#{environment.prometheus_status}",
-      'environment-state'           => "#{environment.state}"
+      'metrics_dashboard_base_path' => environment_metrics_path(environment),
+      'current_environment_name'    => environment.name,
+      'has_metrics'                 => "#{environment.has_metrics?}",
+      'prometheus_status'           => "#{environment.prometheus_status}",
+      'environment_state'           => "#{environment.state}"
     }
   end
 
@@ -81,23 +81,22 @@ module EnvironmentsHelper
     return {} unless project && environment
 
     {
-      'metrics-endpoint'     => additional_metrics_project_environment_path(project, environment, format: :json),
-      'dashboard-endpoint'   => metrics_dashboard_project_environment_path(project, environment, format: :json),
-      'deployments-endpoint' => project_environment_deployments_path(project, environment, format: :json),
-      'alerts-endpoint'      => project_prometheus_alerts_path(project, environment_id: environment.id, format: :json)
-
+      'metrics_endpoint'     => additional_metrics_project_environment_path(project, environment, format: :json),
+      'dashboard_endpoint'   => metrics_dashboard_project_environment_path(project, environment, format: :json),
+      'deployments_endpoint' => project_environment_deployments_path(project, environment, format: :json),
+      'alerts_endpoint'      => project_prometheus_alerts_path(project, environment_id: environment.id, format: :json)
     }
   end
 
   def static_metrics_data
     {
-      'documentation-path'               => help_page_path('administration/monitoring/prometheus/index.md'),
-      'empty-getting-started-svg-path'   => image_path('illustrations/monitoring/getting_started.svg'),
-      'empty-loading-svg-path'           => image_path('illustrations/monitoring/loading.svg'),
-      'empty-no-data-svg-path'           => image_path('illustrations/monitoring/no_data.svg'),
-      'empty-no-data-small-svg-path'     => image_path('illustrations/chart-empty-state-small.svg'),
-      'empty-unable-to-connect-svg-path' => image_path('illustrations/monitoring/unable_to_connect.svg'),
-      'custom-dashboard-base-path'       => Metrics::Dashboard::CustomDashboardService::DASHBOARD_ROOT
+      'documentation_path'               => help_page_path('administration/monitoring/prometheus/index.md'),
+      'empty_getting_started_svg_path'   => image_path('illustrations/monitoring/getting_started.svg'),
+      'empty_loading_svg_path'           => image_path('illustrations/monitoring/loading.svg'),
+      'empty_no_data_svg_path'           => image_path('illustrations/monitoring/no_data.svg'),
+      'empty_no_data_small_svg_path'     => image_path('illustrations/chart-empty-state-small.svg'),
+      'empty_unable_to_connect_svg_path' => image_path('illustrations/monitoring/unable_to_connect.svg'),
+      'custom_dashboard_base_path'       => Metrics::Dashboard::CustomDashboardService::DASHBOARD_ROOT
     }
   end
 end

ee/spec/helpers/ee/environments_helper_spec.rb

@@ -56,14 +56,14 @@ RSpec.describe EnvironmentsHelper do
 
     it 'returns environment parameters data' do
       expect(subject).to include(
-        "environment-name": environment.name,
-        "environments-path": project_environments_path(project, format: :json)
+        "environment_name": environment.name,
+        "environments_path": project_environments_path(project, format: :json)
       )
     end
 
     it 'returns parameters for forming the pod logs API URL' do
       expect(subject).to include(
-        "environment-id": environment.id
+        "environment_id": environment.id
       )
     end
   end

spec/frontend/monitoring/__snapshots__/utils_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`monitoring/utils stateAndPropsFromDataset initial monitoring data from fixture should match snapshot 1`] = `
+Object {
+  "dataProps": Object {
+    "alertsEndpoint": "/monitoring/monitor-project/prometheus/alerts.json?environment_id=1",
+    "clustersPath": "/monitoring/monitor-project/-/clusters",
+    "customMetricsAvailable": true,
+    "customMetricsPath": "/monitoring/monitor-project/prometheus/metrics",
+    "defaultBranch": "master",
+    "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",
+    "environmentState": "available",
+    "externalDashboardUrl": null,
+    "hasMetrics": false,
+    "metricsDashboardBasePath": "/monitoring/monitor-project/-/environments/1/metrics",
+    "metricsEndpoint": "/monitoring/monitor-project/-/environments/1/additional_metrics.json",
+    "prometheusAlertsAvailable": true,
+    "prometheusStatus": "",
+    "settingsPath": "/monitoring/monitor-project/-/services/prometheus/edit",
+    "tagsPath": "/monitoring/monitor-project/-/tags",
+    "validateQueryPath": "/monitoring/monitor-project/prometheus/metrics/validate_query",
+  },
+  "initState": Object {
+    "currentDashboard": undefined,
+    "currentEnvironmentName": "environment1",
+    "customDashboardBasePath": ".gitlab/dashboards",
+    "dashboardEndpoint": "/monitoring/monitor-project/-/environments/1/metrics_dashboard.json",
+    "dashboardTimezone": "LOCAL",
+    "dashboardsEndpoint": "/monitoring/monitor-project/-/performance_monitoring/dashboards.json",
+    "deploymentsEndpoint": "/monitoring/monitor-project/-/environments/1/deployments.json",
+    "logsPath": "/monitoring/monitor-project/-/logs?environment_name=environment1",
+    "projectPath": "/monitoring/monitor-project",
+  },
+}
+`;

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 { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 import { metricsResult } from './mock_data';
 
@@ -12,14 +11,8 @@ export const metricsDashboardResponse = getJSONFixture(
 );
 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 datasetState = stateAndPropsFromDataset(
+  convertObjectPropsToCamelCase(metricsDashboardResponse.metrics_data),
 );
 
 export const dashboardProps = datasetState.dataProps;

spec/frontend/monitoring/utils_spec.js

 import * as monitoringUtils from '~/monitoring/utils';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import * as urlUtils from '~/lib/utils/url_utility';
 import { TEST_HOST } from 'jest/helpers/test_constants';
 import {
@@ -7,7 +8,7 @@ import {
   anomalyMockGraphData,
   barMockData,
 } from './mock_data';
-import { metricsDashboardViewModel, graphData } from './fixture_data';
+import { metricsDashboardResponse, metricsDashboardViewModel, graphData } from './fixture_data';
 
 const mockPath = `${TEST_HOST}${mockProjectDir}/-/environments/29/metrics`;
 
@@ -25,6 +26,15 @@ const rollingRange = {
 };
 
 describe('monitoring/utils', () => {
+  describe('stateAndPropsFromDataset', () => {
+    it('initial monitoring data from fixture should match snapshot', () => {
+      const datasetState = monitoringUtils.stateAndPropsFromDataset(
+        convertObjectPropsToCamelCase(metricsDashboardResponse.metrics_data),
+      );
+      expect(datasetState).toMatchSnapshot();
+    });
+  });
+
   describe('trackGenerateLinkToChartEventOptions', () => {
     it('should return Cluster Monitoring options if located on Cluster Health Dashboard', () => {
       document.body.dataset.page = 'groups:clusters:show';

spec/helpers/environments_helper_spec.rb

@@ -18,30 +18,30 @@ RSpec.describe EnvironmentsHelper do
 
     it 'returns data' do
       expect(metrics_data).to include(
-        'settings-path' => edit_project_service_path(project, 'prometheus'),
-        'clusters-path' => project_clusters_path(project),
-        'metrics-dashboard-base-path' => environment_metrics_path(environment),
-        'current-environment-name' => environment.name,
-        'documentation-path' => help_page_path('administration/monitoring/prometheus/index.md'),
-        'empty-getting-started-svg-path' => match_asset_path('/assets/illustrations/monitoring/getting_started.svg'),
-        'empty-loading-svg-path' => match_asset_path('/assets/illustrations/monitoring/loading.svg'),
-        'empty-no-data-svg-path' => match_asset_path('/assets/illustrations/monitoring/no_data.svg'),
-        'empty-unable-to-connect-svg-path' => match_asset_path('/assets/illustrations/monitoring/unable_to_connect.svg'),
-        'metrics-endpoint' => additional_metrics_project_environment_path(project, environment, format: :json),
-        'deployments-endpoint' => project_environment_deployments_path(project, environment, format: :json),
-        'default-branch' => 'master',
-        'project-path' => project_path(project),
-        'tags-path' => project_tags_path(project),
-        'has-metrics' => "#{environment.has_metrics?}",
-        'prometheus-status' => "#{environment.prometheus_status}",
-        'external-dashboard-url' => nil,
-        'environment-state' => environment.state,
-        'custom-metrics-path' => project_prometheus_metrics_path(project),
-        'validate-query-path' => validate_query_project_prometheus_metrics_path(project),
-        'custom-metrics-available' => 'true',
-        'alerts-endpoint' => project_prometheus_alerts_path(project, environment_id: environment.id, format: :json),
-        'prometheus-alerts-available' => 'true',
-        'custom-dashboard-base-path' => Metrics::Dashboard::CustomDashboardService::DASHBOARD_ROOT
+        'settings_path' => edit_project_service_path(project, 'prometheus'),
+        'clusters_path' => project_clusters_path(project),
+        'metrics_dashboard_base_path' => environment_metrics_path(environment),
+        'current_environment_name' => environment.name,
+        'documentation_path' => help_page_path('administration/monitoring/prometheus/index.md'),
+        'empty_getting_started_svg_path' => match_asset_path('/assets/illustrations/monitoring/getting_started.svg'),
+        'empty_loading_svg_path' => match_asset_path('/assets/illustrations/monitoring/loading.svg'),
+        'empty_no_data_svg_path' => match_asset_path('/assets/illustrations/monitoring/no_data.svg'),
+        'empty_unable_to_connect_svg_path' => match_asset_path('/assets/illustrations/monitoring/unable_to_connect.svg'),
+        'metrics_endpoint' => additional_metrics_project_environment_path(project, environment, format: :json),
+        'deployments_endpoint' => project_environment_deployments_path(project, environment, format: :json),
+        'default_branch' => 'master',
+        'project_path' => project_path(project),
+        'tags_path' => project_tags_path(project),
+        'has_metrics' => "#{environment.has_metrics?}",
+        'prometheus_status' => "#{environment.prometheus_status}",
+        'external_dashboard_url' => nil,
+        'environment_state' => environment.state,
+        'custom_metrics_path' => project_prometheus_metrics_path(project),
+        'validate_query_path' => validate_query_project_prometheus_metrics_path(project),
+        'custom_metrics_available' => 'true',
+        'alerts_endpoint' => project_prometheus_alerts_path(project, environment_id: environment.id, format: :json),
+        'prometheus_alerts_available' => 'true',
+        'custom_dashboard_base_path' => Metrics::Dashboard::CustomDashboardService::DASHBOARD_ROOT
       )
     end
 
@@ -54,7 +54,7 @@ RSpec.describe EnvironmentsHelper do
 
       it 'returns false' do
         expect(metrics_data).to include(
-          'prometheus-alerts-available' => 'false'
+          'prometheus_alerts_available' => 'false'
         )
       end
     end
@@ -65,7 +65,7 @@ RSpec.describe EnvironmentsHelper do
       end
 
       it 'adds external_dashboard_url' do
-        expect(metrics_data['external-dashboard-url']).to eq('http://gitlab.com')
+        expect(metrics_data['external_dashboard_url']).to eq('http://gitlab.com')
       end
     end
 
@@ -76,7 +76,7 @@ RSpec.describe EnvironmentsHelper do
 
       subject { metrics_data }
 
-      it { is_expected.to include('environment-state' => 'stopped') }
+      it { is_expected.to include('environment_state' => 'stopped') }
     end
   end