Fix missing deployment rockets in monitor dashboard

Fixed inconsistencies in variable names for deployment
endpoints for monitoring dashboard which causes
deployment rocket icons to disappear

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

@@ -70,7 +70,7 @@ export default {
       type: String,
       required: true,
     },
-    deploymentEndpoint: {
+    deploymentsEndpoint: {
       type: String,
       required: false,
       default: null,
@@ -148,7 +148,7 @@ export default {
     this.setEndpoints({
       metricsEndpoint: this.metricsEndpoint,
       environmentsEndpoint: this.environmentsEndpoint,
-      deploymentsEndpoint: this.deploymentEndpoint,
+      deploymentsEndpoint: this.deploymentsEndpoint,
       dashboardEndpoint: this.dashboardEndpoint,
     });
 
@@ -280,9 +280,8 @@ export default {
           <gl-button
             v-gl-modal-directive="$options.addMetric.modalId"
             class="js-add-metric-button text-success border-success"
+            >{{ $options.addMetric.title }}</gl-button
           >
-            {{ $options.addMetric.title }}
-          </gl-button>
           <gl-modal
             ref="addMetricModal"
             :modal-id="$options.addMetric.modalId"
@@ -296,16 +295,13 @@ export default {
               />
             </form>
             <div slot="modal-footer">
-              <gl-button @click="hideAddMetricModal">
-                {{ __('Cancel') }}
-              </gl-button>
+              <gl-button @click="hideAddMetricModal">{{ __('Cancel') }}</gl-button>
               <gl-button
                 :disabled="!formIsValid"
                 variant="success"
                 @click="submitCustomMetricsForm"
+                >{{ __('Save changes') }}</gl-button
               >
-                {{ __('Save changes') }}
-              </gl-button>
             </div>
           </gl-modal>
         </div>

app/assets/javascripts/monitoring/stores/actions.js

@@ -164,10 +164,10 @@ export const fetchPrometheusMetrics = ({ state, commit, dispatch }, params) => {
 };
 
 export const fetchDeploymentsData = ({ state, dispatch }) => {
-  if (!state.deploymentEndpoint) {
+  if (!state.deploymentsEndpoint) {
     return Promise.resolve([]);
   }
-  return backOffRequest(() => axios.get(state.deploymentEndpoint))
+  return backOffRequest(() => axios.get(state.deploymentsEndpoint))
     .then(resp => resp.data)
     .then(response => {
       if (!response || !response.deployments) {

app/helpers/environments_helper.rb

@@ -27,7 +27,7 @@ module EnvironmentsHelper
       "empty-unable-to-connect-svg-path" => image_path('illustrations/monitoring/unable_to_connect.svg'),
       "metrics-endpoint" => additional_metrics_project_environment_path(project, environment, format: :json),
       "dashboard-endpoint" => metrics_dashboard_project_environment_path(project, environment, format: :json),
-      "deployment-endpoint" => project_environment_deployments_path(project, environment, format: :json),
+      "deployments-endpoint" => project_environment_deployments_path(project, environment, format: :json),
       "environments-endpoint": project_environments_path(project, format: :json),
       "project-path" => project_path(project),
       "tags-path" => project_tags_path(project),

changelogs/unreleased/dhiraj-fix-missing-deployment-rockets-in-monitoring-dashboard.yml

+---
+title: Fix missing deployment rockets in monitor dashboard
+merge_request: 29574
+author:
+type: fixed

spec/helpers/environments_helper_spec.rb

@@ -27,7 +27,7 @@ describe EnvironmentsHelper do
         '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),
-        'deployment-endpoint' => project_environment_deployments_path(project, environment, format: :json),
+        'deployments-endpoint' => project_environment_deployments_path(project, environment, format: :json),
         'environments-endpoint': project_environments_path(project, format: :json),
         'project-path' => project_path(project),
         'tags-path' => project_tags_path(project),

spec/javascripts/monitoring/dashboard_spec.js

@@ -20,7 +20,7 @@ const propsData = {
   tagsPath: '/path/to/tags',
   projectPath: '/path/to/project',
   metricsEndpoint: mockApiEndpoint,
-  deploymentEndpoint: null,
+  deploymentsEndpoint: null,
   emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
   emptyLoadingSvgPath: '/path/to/loading.svg',
   emptyNoDataSvgPath: '/path/to/no-data.svg',

spec/javascripts/monitoring/store/actions_spec.js

@@ -51,9 +51,9 @@ describe('Monitoring store actions', () => {
     it('commits RECEIVE_DEPLOYMENTS_DATA_SUCCESS on error', done => {
       const dispatch = jasmine.createSpy();
       const { state } = store;
-      state.deploymentEndpoint = '/success';
+      state.deploymentsEndpoint = '/success';
 
-      mock.onGet(state.deploymentEndpoint).reply(200, {
+      mock.onGet(state.deploymentsEndpoint).reply(200, {
         deployments: deploymentData,
       });
 
@@ -68,9 +68,9 @@ describe('Monitoring store actions', () => {
     it('commits RECEIVE_DEPLOYMENTS_DATA_FAILURE on error', done => {
       const dispatch = jasmine.createSpy();
       const { state } = store;
-      state.deploymentEndpoint = '/error';
+      state.deploymentsEndpoint = '/error';
 
-      mock.onGet(state.deploymentEndpoint).reply(500);
+      mock.onGet(state.deploymentsEndpoint).reply(500);
 
       fetchDeploymentsData({ state, dispatch })
         .then(() => {