diff options
| -rw-r--r-- | app/assets/javascripts/lib/utils/text_utility.js | 24 | ||||
| -rw-r--r-- | app/assets/javascripts/monitoring/prometheus_graph.js | 6 | ||||
| -rw-r--r-- | app/views/projects/environments/metrics.html.haml | 12 | ||||
| -rw-r--r-- | spec/javascripts/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); + }); + }); }); }); })(); |