[TSVB] Markdown variables not working for empty labels (elastic#91838) (

elastic#92387) * Fix markdown for empty values * Fix ci * Fix eslint Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
banderror · Feb 24, 2021 · adf9374 · adf9374
1 parent 88cea0a
commit adf9374
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 38 deletions.
diff --git a/src/plugins/vis_type_timeseries/common/empty_label.ts b/src/plugins/vis_type_timeseries/common/empty_label.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const emptyLabel = i18n.translate('visTypeTimeseries.emptyTextValue', {
+  defaultMessage: '(empty)',
+});
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
@@ -9,6 +9,7 @@
 import { set } from '@elastic/safer-lodash-set';
 import _ from 'lodash';
 import { getLastValue } from '../../../../common/get_last_value';
+import { emptyLabel } from '../../../../common/empty_label';
 import { createTickFormatter } from './tick_formatter';
 import { labelDateFormatter } from './label_date_formatter';
 import moment from 'moment';
@@ -19,9 +20,8 @@ export const convertSeriesToVars = (series, model, dateFormat = 'lll', getConfig
     series
       .filter((row) => _.startsWith(row.id, seriesModel.id))
       .forEach((row) => {
-        const varName = [_.snakeCase(row.label), _.snakeCase(seriesModel.var_name)]
-          .filter((v) => v)
-          .join('.');
+        const label = row.label ? _.snakeCase(row.label) : emptyLabel;
+        const varName = [label, _.snakeCase(seriesModel.var_name)].filter((v) => v).join('.');
 
         const formatter = createTickFormatter(
           seriesModel.formatter,
@@ -43,7 +43,7 @@ export const convertSeriesToVars = (series, model, dateFormat = 'lll', getConfig
           },
         };
         set(variables, varName, data);
-        set(variables, `${_.snakeCase(row.label)}.label`, row.label);
+        set(variables, `${label}.label`, row.label);
 
         /**
          * Handle the case when a field has "key_as_string" value.
@@ -54,7 +54,7 @@ export const convertSeriesToVars = (series, model, dateFormat = 'lll', getConfig
          */
         if (row.labelFormatted) {
           const val = labelDateFormatter(row.labelFormatted, dateFormat);
-          set(variables, `${_.snakeCase(row.label)}.formatted`, val);
+          set(variables, `${label}.formatted`, val);
         }
       });
   });

diff --git a/src/plugins/vis_type_timeseries/public/application/components/lib/replace_vars.js b/src/plugins/vis_type_timeseries/public/application/components/lib/replace_vars.js
@@ -8,11 +8,16 @@
 
 import _ from 'lodash';
 import handlebars from 'handlebars/dist/handlebars';
+import { emptyLabel } from '../../../../common/empty_label';
 import { i18n } from '@kbn/i18n';
 
 export function replaceVars(str, args = {}, vars = {}) {
   try {
-    const template = handlebars.compile(str, { strict: true, knownHelpersOnly: true });
+    // we need add '[]' for emptyLabel because this value contains special characters. (https://handlebarsjs.com/guide/expressions.html#literal-segments)
+    const template = handlebars.compile(str.replace(emptyLabel, `[${emptyLabel}]`), {
+      strict: true,
+      knownHelpersOnly: true,
+    });
 
     const string = template(_.assign({}, vars, { args }));
 

diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/table/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/table/vis.js
@@ -8,7 +8,6 @@
 
 import _, { isArray, last, get } from 'lodash';
 import React, { Component } from 'react';
-import { i18n } from '@kbn/i18n';
 import PropTypes from 'prop-types';
 import { RedirectAppLinks } from '../../../../../../kibana_react/public';
 import { createTickFormatter } from '../../lib/tick_formatter';
@@ -18,6 +17,7 @@ import { replaceVars } from '../../lib/replace_vars';
 import { fieldFormats } from '../../../../../../../plugins/data/public';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { getFieldFormats, getCoreStart } from '../../../../services';
+import { emptyLabel } from '../../../../../common/empty_label';
 
 function getColor(rules, colorKey, value) {
   let color;
@@ -89,12 +89,7 @@ class TableVis extends Component {
       });
     return (
       <tr key={row.key}>
-        <td>
-          {rowDisplay ||
-            i18n.translate('visTypeTimeseries.emptyTextValue', {
-              defaultMessage: '(empty)',
-            })}
-        </td>
+        <td>{rowDisplay || emptyLabel}</td>
         {columns}
       </tr>
     );

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
@@ -7,10 +7,10 @@
  */
 
 import React from 'react';
-import { i18n } from '@kbn/i18n';
 import { getDisplayName } from './lib/get_display_name';
 import { labelDateFormatter } from './lib/label_date_formatter';
 import { findIndex, first } from 'lodash';
+import { emptyLabel } from '../../../common/empty_label';
 
 export function visWithSplits(WrappedComponent) {
   function SplitVisComponent(props) {
@@ -81,12 +81,7 @@ export function visWithSplits(WrappedComponent) {
             model={model}
             visData={newVisData}
             onBrush={props.onBrush}
-            additionalLabel={
-              additionalLabel ||
-              i18n.translate('visTypeTimeseries.emptyTextValue', {
-                defaultMessage: '(empty)',
-              })
-            }
+            additionalLabel={additionalLabel || emptyLabel}
             backgroundColor={props.backgroundColor}
             getConfig={props.getConfig}
           />

diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
@@ -9,7 +9,6 @@
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { i18n } from '@kbn/i18n';
 import { labelDateFormatter } from '../../../components/lib/label_date_formatter';
 
 import {
@@ -31,6 +30,7 @@ import { AreaSeriesDecorator } from './decorators/area_decorator';
 import { BarSeriesDecorator } from './decorators/bar_decorator';
 import { getStackAccessors } from './utils/stack_format';
 import { getBaseTheme, getChartClasses } from './utils/theme';
+import { emptyLabel } from '../../../../../common/empty_label';
 
 const generateAnnotationData = (values, formatter) =>
   values.map(({ key, docs }) => ({
@@ -189,12 +189,7 @@ export const TimeSeries = ({
                 key={key}
                 seriesId={id}
                 seriesGroupId={groupId}
-                name={
-                  seriesName ||
-                  i18n.translate('visTypeTimeseries.emptyTextValue', {
-                    defaultMessage: '(empty)',
-                  })
-                }
+                name={seriesName || emptyLabel}
                 data={data}
                 hideInLegend={hideInLegend}
                 bars={bars}
@@ -219,12 +214,7 @@ export const TimeSeries = ({
                 key={key}
                 seriesId={id}
                 seriesGroupId={groupId}
-                name={
-                  seriesName ||
-                  i18n.translate('visTypeTimeseries.emptyTextValue', {
-                    defaultMessage: '(empty)',
-                  })
-                }
+                name={seriesName || emptyLabel}
                 data={data}
                 hideInLegend={hideInLegend}
                 lines={lines}

diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/top_n.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/top_n.js
@@ -8,9 +8,9 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { i18n } from '@kbn/i18n';
 import { getLastValue } from '../../../../common/get_last_value';
 import { labelDateFormatter } from '../../components/lib/label_date_formatter';
+import { emptyLabel } from '../../../../common/empty_label';
 import reactcss from 'reactcss';
 
 const RENDER_MODES = {
@@ -130,10 +130,7 @@ export class TopN extends Component {
       return (
         <tr key={key} onClick={this.handleClick({ lastValue, ...item })} style={styles.row}>
           <td title={item.label} className="tvbVisTopN__label" style={styles.label}>
-            {label ||
-              i18n.translate('visTypeTimeseries.emptyTextValue', {
-                defaultMessage: '(empty)',
-              })}
+            {label || emptyLabel}
           </td>
           <td width="100%" className="tvbVisTopN__bar">
             <div className="tvbVisTopN__innerBar" style={styles.innerBar}>