Added a formatRelevantDigits text utility

app/assets/javascripts/lib/utils/text_utility.js

@@ -188,5 +188,29 @@ require('vendor/latinise');
     gl.text.slugify = function(str) {
       return str.trim().toLowerCase().latinise();
     };
+    gl.text.formatRelevantDigits = function(number) {
+      var digitsLeft = '';
+      var relevantDigits = 0;
+      if (isNaN(Number(number))) {
+        return 0;
+      } else {
+        digitsLeft = number.split('.')[0];
+        switch (digitsLeft.length) {
+          case 1:
+            relevantDigits = 3;
+            break;
+          case 2:
+            relevantDigits = 2;
+            break;
+          case 3:
+            relevantDigits = 1;
+            break;
+          default:
+            relevantDigits = 4;
+            break;
+        }
+        return Number(number).toFixed(relevantDigits);
+      }
+    };
   })(window);
 }).call(window);

app/assets/javascripts/monitoring/prometheus_graph.js

@@ -25,7 +25,6 @@ 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();
   }
@@ -271,12 +270,11 @@ class PrometheusGraph {
       .attr('y', maxMetricValue + 15)
       .text(dayFormat(currentData.time));
-      let currentMetricValue = currentData.value;
+      let currentMetricValue = gl.text.formatRelevantDigits(currentData.value);
       if (key === 'cpu_values') {
-        currentMetricValue = Number(currentMetricValue).toFixed(this.cpuNumberFormatInput.val());
         currentMetricValue = `${currentMetricValue}%`;
       } else {
-        currentMetricValue = currentMetricValue.substring(0, 8);
+        currentMetricValue = `${currentMetricValue} MB`;
       }
       d3.select(`${currentPrometheusGraphContainer} .text-metric-usage`)
       .text(currentMetricValue);

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

@@ -19,16 +19,8 @@
           = render 'projects/deployments/actions', deployment: @environment.last_deployment
   .row
     .col-sm-12
-      .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' }
+      %h4
+        CPU utilization
       %svg.prometheus-graph{ 'graph-type' => 'cpu_values' }
   .row
     .col-sm-12

spec/javascripts/lib/utils/text_utility_spec.js

@@ -105,6 +105,32 @@ require('~/lib/utils/text_utility');
           expect(textArea.value).toEqual(`${initialValue}* `);
         });
       });
+
+      describe('gl.text.formatRelevantDigits', () => {
+        it('returns 0 when the number is NaN', () => {
+          expect(gl.text.formatRelevantDigits('fail')).toBe(0);
+        });
+
+        it('returns 4 decimals when there is 4 plus digits to the left', () => {
+          const formattedNumber = gl.text.formatRelevantDigits('1000.1234567').split('.')[1];
+          expect(formattedNumber.length).toBe(4);
+        });
+
+        it('returns 3 decimals when there is 1 digit to the left', () => {
+          const formattedNumber = gl.text.formatRelevantDigits('0.1234567').split('.')[1];
+          expect(formattedNumber.length).toBe(3);
+        });
+
+        it('returns 2 decimals when there is 2 digits to the left', () => {
+          const formattedNumber = gl.text.formatRelevantDigits('10.1234567').split('.')[1];
+          expect(formattedNumber.length).toBe(2);
+        });
+
+        it('returns 1 decimal when there is 3 digits to the left', () => {
+          const formattedNumber = gl.text.formatRelevantDigits('100.1234567').split('.')[1];
+          expect(formattedNumber.length).toBe(1);
+        });
+      });
     });
   });
 })();