Commit a46cca2e authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'environment-performance-improvements' into 'master'

Improved Environments Metrics UX

Closes #29227

See merge request !9946
parents 10c76853 3069a2c9
/* eslint-disable import/prefer-default-export */
/**
* Function that allows a number with an X amount of decimals
* to be formatted in the following fashion:
* * For 1 digit to the left of the decimal point and X digits to the right of it
* * * Show 3 digits to the right
* * For 2 digits to the left of the decimal point and X digits to the right of it
* * * Show 2 digits to the right
*/
export function formatRelevantDigits(number) {
let digitsLeft = '';
let relevantDigits = 0;
let formattedNumber = '';
if (!isNaN(Number(number))) {
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;
}
formattedNumber = Number(number).toFixed(relevantDigits);
}
return formattedNumber;
}
...@@ -159,6 +159,16 @@ ...@@ -159,6 +159,16 @@
text { text {
fill: $stat-graph-axis-fill; fill: $stat-graph-axis-fill;
} }
.label-axis-text,
.text-metric-usage {
fill: $black;
font-weight: 500;
}
.legend-axis-text {
fill: $black;
}
} }
.x-axis path, .x-axis path,
......
- if environment.external_url && can?(current_user, :read_environment, environment) - if environment.external_url && can?(current_user, :read_environment, environment)
= link_to environment.external_url, target: '_blank', rel: 'noopener noreferrer', class: 'btn external-url' do = link_to environment.external_url, target: '_blank', rel: 'noopener noreferrer', class: 'btn external-url' do
= icon('external-link') = icon('external-link')
View deployment
...@@ -4,3 +4,4 @@ ...@@ -4,3 +4,4 @@
= link_to environment_metrics_path(environment), title: 'See metrics', class: 'btn metrics-button' do = link_to environment_metrics_path(environment), title: 'See metrics', class: 'btn metrics-button' do
= icon('area-chart') = icon('area-chart')
Monitoring
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
.col-sm-6 .col-sm-6
%h3.page-title %h3.page-title
Environment: Environment:
= @environment.name = link_to @environment.name, environment_path(@environment)
.col-sm-6 .col-sm-6
.nav-controls .nav-controls
......
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
%div{ class: container_class } %div{ class: container_class }
.top-area.adjust .top-area.adjust
.col-md-9 .col-md-7
%h3.page-title= @environment.name %h3.page-title= @environment.name
.col-md-3 .col-md-5
.nav-controls .nav-controls
= render 'projects/environments/metrics_button', environment: @environment = render 'projects/environments/metrics_button', environment: @environment
= render 'projects/environments/terminal_button', environment: @environment = render 'projects/environments/terminal_button', environment: @environment
......
---
title: Improved UX for the environments metrics view
merge_request: 9946
author:
import { formatRelevantDigits } from '~/lib/utils/number_utils';
describe('Number Utils', () => {
describe('formatRelevantDigits', () => {
it('returns an empty string when the number is NaN', () => {
expect(formatRelevantDigits('fail')).toBe('');
});
it('returns 4 decimals when there is 4 plus digits to the left', () => {
const formattedNumber = formatRelevantDigits('1000.1234567');
const rightFromDecimal = formattedNumber.split('.')[1];
const leftFromDecimal = formattedNumber.split('.')[0];
expect(rightFromDecimal.length).toBe(4);
expect(leftFromDecimal.length).toBe(4);
});
it('returns 3 decimals when there is 1 digit to the left', () => {
const formattedNumber = formatRelevantDigits('0.1234567');
const rightFromDecimal = formattedNumber.split('.')[1];
const leftFromDecimal = formattedNumber.split('.')[0];
expect(rightFromDecimal.length).toBe(3);
expect(leftFromDecimal.length).toBe(1);
});
it('returns 2 decimals when there is 2 digits to the left', () => {
const formattedNumber = formatRelevantDigits('10.1234567');
const rightFromDecimal = formattedNumber.split('.')[1];
const leftFromDecimal = formattedNumber.split('.')[0];
expect(rightFromDecimal.length).toBe(2);
expect(leftFromDecimal.length).toBe(2);
});
it('returns 1 decimal when there is 3 digits to the left', () => {
const formattedNumber = formatRelevantDigits('100.1234567');
const rightFromDecimal = formattedNumber.split('.')[1];
const leftFromDecimal = formattedNumber.split('.')[0];
expect(rightFromDecimal.length).toBe(1);
expect(leftFromDecimal.length).toBe(3);
});
});
});
...@@ -37,9 +37,11 @@ describe('PrometheusGraph', () => { ...@@ -37,9 +37,11 @@ describe('PrometheusGraph', () => {
it('transforms the data', () => { it('transforms the data', () => {
this.prometheusGraph.init(prometheusMockData.metrics); this.prometheusGraph.init(prometheusMockData.metrics);
expect(this.prometheusGraph.data).toBeDefined(); Object.keys(this.prometheusGraph.graphSpecificProperties, (key) => {
expect(this.prometheusGraph.data.cpu_values.length).toBe(121); const graphProps = this.prometheusGraph.graphSpecificProperties[key];
expect(this.prometheusGraph.data.memory_values.length).toBe(121); expect(graphProps.data).toBeDefined();
expect(graphProps.data.length).toBe(121);
});
}); });
it('creates two graphs', () => { it('creates two graphs', () => {
...@@ -68,7 +70,7 @@ describe('PrometheusGraph', () => { ...@@ -68,7 +70,7 @@ describe('PrometheusGraph', () => {
expect($prometheusGraphContents.find('.label-y-axis-line')).toBeDefined(); expect($prometheusGraphContents.find('.label-y-axis-line')).toBeDefined();
expect($prometheusGraphContents.find('.label-axis-text')).toBeDefined(); expect($prometheusGraphContents.find('.label-axis-text')).toBeDefined();
expect($prometheusGraphContents.find('.rect-axis-text')).toBeDefined(); expect($prometheusGraphContents.find('.rect-axis-text')).toBeDefined();
expect($axisLabelContainer.find('rect').length).toBe(2); expect($axisLabelContainer.find('rect').length).toBe(3);
expect($axisLabelContainer.find('text').length).toBe(4); expect($axisLabelContainer.find('text').length).toBe(4);
}); });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment