[TSVB/Markdown] Introduce formatted date field label (#75555)

* Introduce formatted date field label * Apply changes * Use default format if can't parse, add comments Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Sep 8, 2020 · caa4e0c · caa4e0c
1 parent 0286c7f
commit caa4e0c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 0 deletions.
diff --git a/src/plugins/vis_type_timeseries/public/application/components/lib/convert_series_to_vars.js b/src/plugins/vis_type_timeseries/public/application/components/lib/convert_series_to_vars.js
@@ -54,6 +54,26 @@ export const convertSeriesToVars = (series, model, dateFormat = 'lll', getConfig
         };
         set(variables, varName, data);
         set(variables, `${_.snakeCase(row.label)}.label`, row.label);
+
+        /**
+         * Handle the case when a field has "key_as_string" value.
+         * Common case is the value is a date string (e.x. "2020-08-21T20:36:58.000Z") or a boolean stringified value ("true"/"false").
+         * Try to convert the value into a moment object and format it with "dateFormat" from UI settings,
+         * if the "key_as_string" value is recognized by a known format in Moments.js https://momentjs.com/docs/#/parsing/string/ .
+         * If not, return a formatted value from elasticsearch
+         */
+        if (row.labelFormatted) {
+          const momemntObj = moment(row.labelFormatted);
+          let val;
+
+          if (momemntObj.isValid()) {
+            val = momemntObj.format(dateFormat);
+          } else {
+            val = row.labelFormatted;
+          }
+
+          set(variables, `${_.snakeCase(row.label)}.formatted`, val);
+        }
       });
   });
   return variables;

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,6 +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.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
@@ -89,6 +89,7 @@ describe('getSplits(resp, panel, series)', () => {
         id: 'SERIES:example-01',
         key: 'example-01',
         label: 'example-01',
+        labelFormatted: '',
         meta: { bucketSize: 10 },
         color: 'rgb(255, 0, 0)',
         timeseries: { buckets: [] },
@@ -98,6 +99,7 @@ describe('getSplits(resp, panel, series)', () => {
         id: 'SERIES:example-02',
         key: 'example-02',
         label: 'example-02',
+        labelFormatted: '',
         meta: { bucketSize: 10 },
         color: 'rgb(255, 0, 0)',
         timeseries: { buckets: [] },
@@ -145,6 +147,7 @@ describe('getSplits(resp, panel, series)', () => {
           id: 'SERIES:example-01',
           key: 'example-01',
           label: 'example-01',
+          labelFormatted: '',
           meta: { bucketSize: 10 },
           color: undefined,
           timeseries: { buckets: [] },
@@ -154,6 +157,7 @@ describe('getSplits(resp, panel, series)', () => {
           id: 'SERIES:example-02',
           key: 'example-02',
           label: 'example-02',
+          labelFormatted: '',
           meta: { bucketSize: 10 },
           color: undefined,
           timeseries: { buckets: [] },

diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_metric.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/response_processors/series/std_metric.js
@@ -40,6 +40,7 @@ export function stdMetric(resp, panel, series, meta) {
       results.push({
         id: `${split.id}`,
         label: split.label,
+        labelFormatted: split.labelFormatted,
         color: split.color,
         data,
         ...decoration,