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

Improved Environments Metrics UX

Closes #29227

See merge request !9946

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

+/* 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;
+}

app/assets/stylesheets/pages/environments.scss

@@ -159,6 +159,16 @@
   text {
     fill: $stat-graph-axis-fill;
   }
+
+  .label-axis-text,
+  .text-metric-usage {
+    fill: $black;
+    font-weight: 500;
+  }
+
+  .legend-axis-text {
+    fill: $black;
+  }
 }
 
 .x-axis path,

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

 - 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
     = icon('external-link')
+    View deployment

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

@@ -4,3 +4,4 @@
 
 = link_to environment_metrics_path(environment), title: 'See metrics', class: 'btn metrics-button' do
   = icon('area-chart')
+  Monitoring

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

@@ -11,7 +11,7 @@
       .col-sm-6
         %h3.page-title
           Environment:
-          = @environment.name
+          = link_to @environment.name, environment_path(@environment)
 
       .col-sm-6
         .nav-controls

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

@@ -4,9 +4,9 @@
 
 %div{ class: container_class }
   .top-area.adjust
-    .col-md-9
+    .col-md-7
       %h3.page-title= @environment.name
-    .col-md-3
+    .col-md-5
       .nav-controls
         = render 'projects/environments/metrics_button', environment: @environment
         = render 'projects/environments/terminal_button', environment: @environment

changelogs/unreleased/environment-performance-improvements.yml

+---
+title: Improved UX for the environments metrics view
+merge_request: 9946
+author:

spec/javascripts/lib/utils/number_utility_spec.js

+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);
+    });
+  });
+});

spec/javascripts/monitoring/prometheus_graph_spec.js

@@ -37,9 +37,11 @@ describe('PrometheusGraph', () => {
 
   it('transforms the data', () => {
     this.prometheusGraph.init(prometheusMockData.metrics);
-    expect(this.prometheusGraph.data).toBeDefined();
-    expect(this.prometheusGraph.data.cpu_values.length).toBe(121);
-    expect(this.prometheusGraph.data.memory_values.length).toBe(121);
+    Object.keys(this.prometheusGraph.graphSpecificProperties, (key) => {
+      const graphProps = this.prometheusGraph.graphSpecificProperties[key];
+      expect(graphProps.data).toBeDefined();
+      expect(graphProps.data.length).toBe(121);
+    });
   });
 
   it('creates two graphs', () => {
@@ -68,7 +70,7 @@ describe('PrometheusGraph', () => {
       expect($prometheusGraphContents.find('.label-y-axis-line')).toBeDefined();
       expect($prometheusGraphContents.find('.label-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);
     });
   });