From b4795830026fc1fd361e2dace64a70abeb0cd7ae Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas <jvargas@gitlab.com>
Date: Tue, 28 Mar 2017 13:00:00 -0600
Subject: [PATCH] Added a formatRelevantDigits text utility
---
.../javascripts/lib/utils/text_utility.js | 24 +++++++++++++++++
.../monitoring/prometheus_graph.js | 6 ++---
.../projects/environments/metrics.html.haml | 12 ++-------
.../lib/utils/text_utility_spec.js | 26 +++++++++++++++++++
4 files changed, 54 insertions(+), 14 deletions(-)
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index 2e5f8a09fc1..2b135b4f96f 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/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);
diff --git a/app/assets/javascripts/monitoring/prometheus_graph.js b/app/assets/javascripts/monitoring/prometheus_graph.js
index 17b704e192a..eb9e93dba09 100644
--- a/app/assets/javascripts/monitoring/prometheus_graph.js
+++ b/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);
diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml
index cfff0428fbd..5627192c36c 100644
--- a/app/views/projects/environments/metrics.html.haml
+++ b/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
diff --git a/spec/javascripts/lib/utils/text_utility_spec.js b/spec/javascripts/lib/utils/text_utility_spec.js
index 4200e943121..3d0e92ed240 100644
--- a/spec/javascripts/lib/utils/text_utility_spec.js
+++ b/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);
+ });
+ });
});
});
})();
--
2.30.9