Merge branch '34110-memory-usage-notice-doesn-t-link-anywhere' into 'master'

Resolve "Memory usage notice doesn't link anywhere"

Closes #34110

See merge request !12919

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js

@@ -108,7 +108,8 @@ export default {
         </div>
         <mr-widget-memory-usage
           v-if="deployment.metrics_url"
-          :metricsUrl="deployment.metrics_url"
+          :metrics-url="deployment.metrics_url"
+          :metrics-monitoring-url="deployment.metrics_monitoring_url"
         />
       </div>
     </div>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js

@@ -7,7 +7,14 @@ import MRWidgetService from '../services/mr_widget_service';
 export default {
   name: 'MemoryUsage',
   props: {
-    metricsUrl: { type: String, required: true },
+    metricsUrl: {
+      type: String,
+      required: true,
+    },
+    metricsMonitoringUrl: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -124,7 +131,7 @@ export default {
       <p
         v-if="shouldShowMemoryGraph"
         class="usage-info js-usage-info">
-        Memory usage <b>{{memoryChangeType}}</b> from {{memoryFrom}}MB to {{memoryTo}}MB
+        <a :href="metricsMonitoringUrl">Memory</a> usage <b>{{memoryChangeType}}</b> from {{memoryFrom}}MB to {{memoryTo}}MB
       </p>
       <p
         v-if="shouldShowLoadFailure"

app/controllers/projects/merge_requests_controller.rb

@@ -224,11 +224,17 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
               metrics_project_environment_deployment_path(environment.project, environment, deployment)
             end
           
+          metrics_monitoring_url = 
+            if can?(current_user, :read_environment, environment)
+              environment_metrics_path(environment)
+            end
+
           {
             id: environment.id,
             name: environment.name,
             url: project_environment_path(project, environment),
             metrics_url: metrics_url,
+            metrics_monitoring_url: metrics_monitoring_url,
             stop_url: stop_url,
             external_url: environment.external_url,
             external_url_formatted: environment.formatted_external_url,

changelogs/unreleased/34110-memory-usage-notice-doesn-t-link-anywhere.yml

+---
+title: Added link to the MR widget that directs to the monitoring dashboard
+merge_request:
+author:

spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js

@@ -10,6 +10,7 @@ const deploymentMockData = [
     url: '/root/acets-review-apps/environments/15',
     stop_url: '/root/acets-review-apps/environments/15/stop',
     metrics_url: '/root/acets-review-apps/environments/15/deployments/1/metrics',
+    metrics_monitoring_url: '/root/acets-review-apps/environments/15/metrics',
     external_url: 'http://diplo.',
     external_url_formatted: 'diplo.',
     deployed_at: '2017-03-22T22:44:42.258Z',

spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js

@@ -3,6 +3,7 @@ import memoryUsageComponent from '~/vue_merge_request_widget/components/mr_widge
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 
 const url = '/root/acets-review-apps/environments/15/deployments/1/metrics';
+const monitoringUrl = '/root/acets-review-apps/environments/15/metrics';
 
 const metricsMockData = {
   success: true,
@@ -39,6 +40,7 @@ const createComponent = () => {
     el: document.createElement('div'),
     propsData: {
       metricsUrl: url,
+      metricsMonitoringUrl: monitoringUrl,
       memoryMetrics: [],
       deploymentTime: 0,
       hasMetrics: false,