Fixed the y_label not setting correctly for each graph on the monitoring dashboardmonitoring-dashboard-fix-y-label

4 files changed, 18 insertions, 3 deletions

diff --git a/app/assets/javascripts/monitoring/components/monitoring_column.vue b/app/assets/javascripts/monitoring/components/monitoring_column.vue
index 4f4792877ee..e933634643b 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_column.vue
+++ b/app/assets/javascripts/monitoring/components/monitoring_column.vue
@@ -104,7 +104,7 @@
         }
         this.data = query.result[0].values;
         this.unitOfDisplay = query.unit || 'N/A';
-        this.yAxisLabel = this.columnData.y_axis || 'Values';
+        this.yAxisLabel = this.columnData.y_label || 'Values';
         this.legendTitle = query.legend || 'Average';
         this.graphWidth = this.$refs.baseSvg.clientWidth -
                      this.margin.left - this.margin.right;
diff --git a/changelogs/unreleased/monitoring-dashboard-fix-y-label.yml b/changelogs/unreleased/monitoring-dashboard-fix-y-label.yml
new file mode 100644
index 00000000000..8a0e9ca855c
--- /dev/null
+++ b/changelogs/unreleased/monitoring-dashboard-fix-y-label.yml
@@ -0,0 +1,4 @@
+---
+title: Fixed the y_label not setting correctly for each graph on the monitoring dashboard
+merge_request:
+author:
diff --git a/spec/javascripts/monitoring/mock_data.js b/spec/javascripts/monitoring/mock_data.js
index 6f4cb989847..56d938e1fbe 100644
--- a/spec/javascripts/monitoring/mock_data.js
+++ b/spec/javascripts/monitoring/mock_data.js
@@ -13,7 +13,7 @@ const metricsGroupsAPIResponse = {
             'queries': [
                 {
                   'query_range': 'avg(container_memory_usage_bytes{%{environment_filter}}) / 2^20',
-                  'label': 'Container memory',
+                  'y_label': 'Memory',
                   'unit': 'MiB',
                   'result': [
                     {
@@ -2477,7 +2477,7 @@ export const singleRowMetrics = [
   {
     'title': 'CPU usage',
     'weight': 1,
-    'y_label': 'Values',
+    'y_label': 'Memory',
     'queries': [
       {
         'query_range': 'avg(rate(container_cpu_usage_seconds_total{%{environment_filter}}[2m])) * 100',
diff --git a/spec/javascripts/monitoring/monitoring_column_spec.js b/spec/javascripts/monitoring/monitoring_column_spec.js
index c8787f9708c..b3bc97adc9f 100644
--- a/spec/javascripts/monitoring/monitoring_column_spec.js
+++ b/spec/javascripts/monitoring/monitoring_column_spec.js
@@ -94,4 +94,15 @@ describe('MonitoringColumn', () => {
       done();
     });
   });
+
+  it('has a title for the y-axis that comes from the backend', () => {
+    const component = createComponent({
+      columnData: singleRowMetrics[0],
+      classType: 'col-md-6',
+      updateAspectRatio: false,
+      deploymentData,
+    });
+
+    expect(component.yAxisLabel).toEqual(component.columnData.y_label);
+  });
 });