[TSVB] Handle correctly {{key}} placeholder on series name (#81748)

* [TSVB] Handle correctly key placeholder in series name * Add unit test Co-authored-by: Kibana Machine <[email protected]>
elastic · Nov 2, 2020 · 2653b90 · 2653b90
1 parent dbf60af
commit 2653b90
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 2 deletions.
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_with_splits.js b/src/plugins/vis_type_timeseries/public/application/components/vis_with_splits.js
@@ -46,11 +46,13 @@ export function visWithSplits(WrappedComponent) {
         };
       }
 
+      const labelHasKeyPlaceholder = /{{\s*key\s*}}/.test(seriesModel.label);
+
       acc[splitId].series.push({
         ...series,
         id: seriesId,
         color: series.color || seriesModel.color,
-        label: seriesModel.label || label,
+        label: seriesModel.label && !labelHasKeyPlaceholder ? seriesModel.label : label,
       });
       return acc;
     }, {});

diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_splits.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_splits.js
@@ -42,7 +42,7 @@ export function getSplits(resp, panel, series, meta) {
       return buckets.map((bucket) => {
         bucket.id = `${series.id}:${bucket.key}`;
         bucket.label = formatKey(bucket.key, series);
-        bucket.labelFormatted = bucket.key_as_string || '';
+        bucket.labelFormatted = bucket.key_as_string ? formatKey(bucket.key_as_string, series) : '';
         bucket.color = panel.type === 'top_n' ? color.string() : colors.shift();
         bucket.meta = meta;
         return bucket;

diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_splits.test.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_splits.test.js
@@ -108,6 +108,124 @@ describe('getSplits(resp, panel, series)', () => {
     ]);
   });
 
+  test('should return a splits for terms group with label formatted by {{key}} placeholder', () => {
+    const resp = {
+      aggregations: {
+        SERIES: {
+          buckets: [
+            {
+              key: 'example-01',
+              timeseries: { buckets: [] },
+              SIBAGG: { value: 1 },
+            },
+            {
+              key: 'example-02',
+              timeseries: { buckets: [] },
+              SIBAGG: { value: 2 },
+            },
+          ],
+          meta: { bucketSize: 10 },
+        },
+      },
+    };
+    const series = {
+      id: 'SERIES',
+      label: '--{{key}}--',
+      color: '#F00',
+      split_mode: 'terms',
+      terms_field: 'beat.hostname',
+      terms_size: 10,
+      metrics: [
+        { id: 'AVG', type: 'avg', field: 'cpu' },
+        { id: 'SIBAGG', type: 'avg_bucket', field: 'AVG' },
+      ],
+    };
+    const panel = { type: 'top_n' };
+    expect(getSplits(resp, panel, series)).toEqual([
+      {
+        id: 'SERIES:example-01',
+        key: 'example-01',
+        label: '--example-01--',
+        labelFormatted: '',
+        meta: { bucketSize: 10 },
+        color: 'rgb(255, 0, 0)',
+        timeseries: { buckets: [] },
+        SIBAGG: { value: 1 },
+      },
+      {
+        id: 'SERIES:example-02',
+        key: 'example-02',
+        label: '--example-02--',
+        labelFormatted: '',
+        meta: { bucketSize: 10 },
+        color: 'rgb(255, 0, 0)',
+        timeseries: { buckets: [] },
+        SIBAGG: { value: 2 },
+      },
+    ]);
+  });
+
+  test('should return a splits for terms group with labelFormatted if {{key}} placeholder is applied and key_as_string exists', () => {
+    const resp = {
+      aggregations: {
+        SERIES: {
+          buckets: [
+            {
+              key: 'example-01',
+              key_as_string: 'false',
+              timeseries: { buckets: [] },
+              SIBAGG: { value: 1 },
+            },
+            {
+              key: 'example-02',
+              key_as_string: 'true',
+              timeseries: { buckets: [] },
+              SIBAGG: { value: 2 },
+            },
+          ],
+          meta: { bucketSize: 10 },
+        },
+      },
+    };
+    const series = {
+      id: 'SERIES',
+      label: '--{{key}}--',
+      color: '#F00',
+      split_mode: 'terms',
+      terms_field: 'beat.hostname',
+      terms_size: 10,
+      metrics: [
+        { id: 'AVG', type: 'avg', field: 'cpu' },
+        { id: 'SIBAGG', type: 'avg_bucket', field: 'AVG' },
+      ],
+    };
+    const panel = { type: 'top_n' };
+    expect(getSplits(resp, panel, series)).toEqual([
+      {
+        id: 'SERIES:example-01',
+        key: 'example-01',
+        key_as_string: 'false',
+        label: '--example-01--',
+        labelFormatted: '--false--',
+        meta: { bucketSize: 10 },
+        color: 'rgb(255, 0, 0)',
+        timeseries: { buckets: [] },
+        SIBAGG: { value: 1 },
+      },
+      {
+        id: 'SERIES:example-02',
+        key: 'example-02',
+        key_as_string: 'true',
+        label: '--example-02--',
+        labelFormatted: '--true--',
+        meta: { bucketSize: 10 },
+        color: 'rgb(255, 0, 0)',
+        timeseries: { buckets: [] },
+        SIBAGG: { value: 2 },
+      },
+    ]);
+  });
+
   describe('terms group bys', () => {
     const resp = {
       aggregations: {