Merge branch '34655-label-field-for-setting-a-chart-s-legend-text-is-not-working' into 'master'

Resolve "`label` field for setting a chart's legend text is not working"

Closes #34655

See merge request !12628

4 files changed, 16 insertions, 10 deletions

diff --git a/app/assets/javascripts/monitoring/components/monitoring_column.vue b/app/assets/javascripts/monitoring/components/monitoring_column.vue
index 0cd62053d14..c376baea79c 100644
--- a/app/assets/javascripts/monitoring/components/monitoring_column.vue
+++ b/app/assets/javascripts/monitoring/components/monitoring_column.vue
@@ -105,9 +105,9 @@
           this.measurements = measurements.small;
         }
         this.data = query.result[0].values;
-        this.unitOfDisplay = query.unit || 'N/A';
+        this.unitOfDisplay = query.unit || '';
         this.yAxisLabel = this.columnData.y_label || 'Values';
-        this.legendTitle = query.legend || 'Average';
+        this.legendTitle = query.label || 'Average';
         this.graphWidth = this.$refs.baseSvg.clientWidth -
                      this.margin.left - this.margin.right;
         this.graphHeight = this.graphHeight - this.margin.top - this.margin.bottom;
@@ -219,16 +219,16 @@
   };
 </script>
 <template>
-  <div 
+  <div
     :class="classType">
-    <h5 
+    <h5
       class="text-center graph-title">
         {{columnData.title}}
     </h5>
     <div
       class="prometheus-svg-container"
       :style="paddingBottomRootSvg">
-      <svg 
+      <svg
         :viewBox="outterViewBox"
         ref="baseSvg">
         <g
@@ -239,7 +239,7 @@
           class="y-axis"
           transform="translate(70, 20)">
         </g>
-        <monitoring-legends 
+        <monitoring-legends
           :graph-width="graphWidth"
           :graph-height="graphHeight"
           :margin="margin"
@@ -249,7 +249,7 @@
           :y-axis-label="yAxisLabel"
           :metric-usage="metricUsage"
         />
-        <svg 
+        <svg
           class="graph-data"
           :viewBox="innerViewBox"
           ref="graphData">
@@ -267,7 +267,7 @@
               stroke-width="2"
               transform="translate(-5, 20)">
             </path>
-            <rect 
+            <rect
               class="prometheus-graph-overlay"
               :width="(graphWidth - 70)"
               :height="(graphHeight - 100)"
@@ -281,7 +281,7 @@
               :graph-height="graphHeight"
               :graph-height-offset="graphHeightOffset"
             />
-            <monitoring-flag 
+            <monitoring-flag
               v-if="showFlag"
               :current-x-coordinate="currentXCoordinate"
               :current-y-coordinate="currentYCoordinate"
diff --git a/changelogs/unreleased/34655-label-field-for-setting-a-chart-s-legend-text-is-not-working.yml b/changelogs/unreleased/34655-label-field-for-setting-a-chart-s-legend-text-is-not-working.yml
new file mode 100644
index 00000000000..c7a68935e8c
--- /dev/null
+++ b/changelogs/unreleased/34655-label-field-for-setting-a-chart-s-legend-text-is-not-working.yml
@@ -0,0 +1,4 @@
+---
+title: Fixed the chart legend not being set correctly
+merge_request: 12628
+author:
diff --git a/spec/javascripts/monitoring/mock_data.js b/spec/javascripts/monitoring/mock_data.js
index 56d938e1fbe..b69f4eddffc 100644
--- a/spec/javascripts/monitoring/mock_data.js
+++ b/spec/javascripts/monitoring/mock_data.js
@@ -2481,6 +2481,7 @@ export const singleRowMetrics = [
     'queries': [
       {
         'query_range': 'avg(rate(container_cpu_usage_seconds_total{%{environment_filter}}[2m])) * 100',
+        'label': 'Container CPU',
         'result': [
           {
             'metric': {
diff --git a/spec/javascripts/monitoring/monitoring_column_spec.js b/spec/javascripts/monitoring/monitoring_column_spec.js
index b3bc97adc9f..c423024dce0 100644
--- a/spec/javascripts/monitoring/monitoring_column_spec.js
+++ b/spec/javascripts/monitoring/monitoring_column_spec.js
@@ -95,7 +95,7 @@ describe('MonitoringColumn', () => {
     });
   });
 
-  it('has a title for the y-axis that comes from the backend', () => {
+  it('has a title for the y-axis and the chart legend that comes from the backend', () => {
     const component = createComponent({
       columnData: singleRowMetrics[0],
       classType: 'col-md-6',
@@ -104,5 +104,6 @@ describe('MonitoringColumn', () => {
     });
 
     expect(component.yAxisLabel).toEqual(component.columnData.y_label);
+    expect(component.legendTitle).toEqual(component.columnData.queries[0].label);
   });
 });