Added a number input to provide a way to format the number of

app/assets/javascripts/dispatcher.js

@@ -43,7 +43,6 @@ import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
 import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
 import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
-import PrometheusGraph from './monitoring/prometheus_graph';
 import UserCallout from './user_callout';
 
 const ShortcutsBlob = require('./shortcuts_blob');

app/assets/javascripts/monitoring/prometheus_graph.js

@@ -25,6 +25,7 @@ class PrometheusGraph {
     this.width = parentContainerWidth - this.margin.left - this.margin.right;
     this.height = this.originalHeight - this.margin.top - this.margin.bottom;
     this.backOffRequestCounter = 0;
+    this.cpuNumberFormatInput = $('input[graph-type="cpu_values"]');
     this.configureGraph();
     this.init();
   }
@@ -270,8 +271,15 @@ class PrometheusGraph {
       .attr('y', maxMetricValue + 15)
       .text(dayFormat(currentData.time));
 
+      let currentMetricValue = currentData.value;
+      if (key === 'cpu_values') {
+        currentMetricValue = Number(currentMetricValue).toFixed(this.cpuNumberFormatInput.val());
+        currentMetricValue = `${currentMetricValue}%`;
+      } else {
+        currentMetricValue = currentMetricValue.substring(0, 8);
+      }
       d3.select(`${currentPrometheusGraphContainer} .text-metric-usage`)
-      .text(currentData.value.substring(0, 8));
+      .text(currentMetricValue);
     });
   }
 
@@ -344,10 +352,12 @@ class PrometheusGraph {
     Object.keys(metricsResponse.metrics).forEach((key) => {
       if (key === 'cpu_values' || key === 'memory_values') {
         const metricValues = (metricsResponse.metrics[key])[0];
-        this.graphSpecificProperties[key].data = metricValues.values.map(metric => ({
-          time: new Date(metric[0] * 1000),
-          value: metric[1],
-        }));
+        if (typeof metricValues !== 'undefined') {
+          this.graphSpecificProperties[key].data = metricValues.values.map(metric => ({
+            time: new Date(metric[0] * 1000),
+            value: metric[1],
+          }));
+        }
       }
     });
   }

app/views/projects/environments/metrics.html.haml

@@ -19,8 +19,16 @@
           = render 'projects/deployments/actions', deployment: @environment.last_deployment
   .row
     .col-sm-12
-      %h4
-        CPU utilization
+      .row
+        .col-sm-10
+          %h4
+            CPU utilization
+        .col-sm-2.form-horizontal
+          .form-group
+            %label{ for: 'decimal_format', class:'control-label col-sm-6' }
+              Format
+            .col-sm-6
+              %input.form-control{ name: 'decimal_format', type: 'number', value: '4', 'graph-type': 'cpu_values', min: '1' }
       %svg.prometheus-graph{ 'graph-type' => 'cpu_values' }
   .row
     .col-sm-12