[6.x] Translations for Visual Builder (part 1) (#23988)

.i18nrc.json

@@ -11,6 +11,8 @@
     "tableVis": "src/core_plugins/table_vis",
     "regionMap": "src/core_plugins/region_map",
     "statusPage": "src/core_plugins/status_page",
+    "tagCloud": "src/core_plugins/tagcloud",
+    "tagCloud": "src/core_plugins/tagcloud",
     "tileMap": "src/core_plugins/tile_map",
     "timelion": "src/core_plugins/timelion",
     "tsvb": "src/core_plugins/metrics",

src/core_plugins/metrics/common/agg_lookup.js

@@ -18,37 +18,39 @@
  */
 
 import _ from 'lodash';
+import { i18n } from '@kbn/i18n';
+
 const lookup = {
-  count: 'Count',
-  calculation: 'Calculation',
-  std_deviation: 'Std. Deviation',
-  variance: 'Variance',
-  sum_of_squares: 'Sum of Sq.',
-  avg: 'Average',
-  max: 'Max',
-  min: 'Min',
-  sum: 'Sum',
-  percentile: 'Percentile',
-  percentile_rank: 'Percentile Rank',
-  cardinality: 'Cardinality',
-  value_count: 'Value Count',
-  derivative: 'Derivative',
-  cumulative_sum: 'Cumulative Sum',
-  moving_average: 'Moving Average',
-  avg_bucket: 'Overall Average',
-  min_bucket: 'Overall Min',
-  max_bucket: 'Overall Max',
-  sum_bucket: 'Overall Sum',
-  variance_bucket: 'Overall Variance',
-  sum_of_squares_bucket: 'Overall Sum of Sq.',
-  std_deviation_bucket: 'Overall Std. Deviation',
-  series_agg: 'Series Agg',
-  math: 'Math',
-  serial_diff: 'Serial Difference',
-  filter_ratio: 'Filter Ratio',
-  positive_only: 'Positive Only',
-  static: 'Static Value',
-  top_hit: 'Top Hit',
+  count: i18n.translate('tsvb.aggLookup.countLabel', { defaultMessage: 'Count' }),
+  calculation: i18n.translate('tsvb.aggLookup.calculationLabel', { defaultMessage: 'Calculation' }),
+  std_deviation: i18n.translate('tsvb.aggLookup.deviationLabel', { defaultMessage: 'Std. Deviation' }),
+  variance: i18n.translate('tsvb.aggLookup.varianceLabel', { defaultMessage: 'Variance' }),
+  sum_of_squares: i18n.translate('tsvb.aggLookup.sumOfSqLabel', { defaultMessage: 'Sum of Sq.' }),
+  avg: i18n.translate('tsvb.aggLookup.averageLabel', { defaultMessage: 'Average' }),
+  max: i18n.translate('tsvb.aggLookup.maxLabel', { defaultMessage: 'Max' }),
+  min: i18n.translate('tsvb.aggLookup.minLabel', { defaultMessage: 'Min' }),
+  sum: i18n.translate('tsvb.aggLookup.sumLabel', { defaultMessage: 'Sum' }),
+  percentile: i18n.translate('tsvb.aggLookup.percentileLabel', { defaultMessage: 'Percentile' }),
+  percentile_rank: i18n.translate('tsvb.aggLookup.percentileRankLabel', { defaultMessage: 'Percentile Rank' }),
+  cardinality: i18n.translate('tsvb.aggLookup.cardinalityLabel', { defaultMessage: 'Cardinality' }),
+  value_count: i18n.translate('tsvb.aggLookup.valueCountLabel', { defaultMessage: 'Value Count' }),
+  derivative: i18n.translate('tsvb.aggLookup.derivativeLabel', { defaultMessage: 'Derivative' }),
+  cumulative_sum: i18n.translate('tsvb.aggLookup.cumulativeSumLabel', { defaultMessage: 'Cumulative Sum' }),
+  moving_average: i18n.translate('tsvb.aggLookup.movingAverageLabel', { defaultMessage: 'Moving Average' }),
+  avg_bucket: i18n.translate('tsvb.aggLookup.overallAverageLabel', { defaultMessage: 'Overall Average' }),
+  min_bucket: i18n.translate('tsvb.aggLookup.overallMinLabel', { defaultMessage: 'Overall Min' }),
+  max_bucket: i18n.translate('tsvb.aggLookup.overallMaxLabel', { defaultMessage: 'Overall Max' }),
+  sum_bucket: i18n.translate('tsvb.aggLookup.overallSumLabel', { defaultMessage: 'Overall Sum' }),
+  variance_bucket: i18n.translate('tsvb.aggLookup.overallVarianceLabel', { defaultMessage: 'Overall Variance' }),
+  sum_of_squares_bucket: i18n.translate('tsvb.aggLookup.overallSumOfSqLabel', { defaultMessage: 'Overall Sum of Sq.' }),
+  std_deviation_bucket: i18n.translate('tsvb.aggLookup.overallStdDeviationLabel', { defaultMessage: 'Overall Std. Deviation' }),
+  series_agg: i18n.translate('tsvb.aggLookup.seriesAggLabel', { defaultMessage: 'Series Agg' }),
+  math: i18n.translate('tsvb.aggLookup.mathLabel', { defaultMessage: 'Math' }),
+  serial_diff: i18n.translate('tsvb.aggLookup.serialDifferenceLabel', { defaultMessage: 'Serial Difference' }),
+  filter_ratio: i18n.translate('tsvb.aggLookup.filterRatioLabel', { defaultMessage: 'Filter Ratio' }),
+  positive_only: i18n.translate('tsvb.aggLookup.positiveOnlyLabel', { defaultMessage: 'Positive Only' }),
+  static: i18n.translate('tsvb.aggLookup.staticValueLabel', { defaultMessage: 'Static Value' }),
+  top_hit: i18n.translate('tsvb.aggLookup.topHitLabel', { defaultMessage: 'Top Hit' }),
 };
 
 const pipeline = [
@@ -98,7 +100,10 @@ export function createOptions(type = '_all', siblings = []) {
       const disabled = _.includes(pipeline, value) ? !enablePipelines : false;
       return {
         label: disabled
-          ? `${label} (use the "+" button to add this pipeline agg)`
+          ? i18n.translate('tsvb.aggLookup.addPipelineAggDescription', {
+            defaultMessage: '{label} (use the "+" button to add this pipeline agg)',
+            values: { label }
+          })
           : label,
         value,
         disabled,

src/core_plugins/metrics/common/calculate_label.js

@@ -19,6 +19,8 @@
 
 import { includes, startsWith } from 'lodash';
 import lookup from './agg_lookup';
+import { i18n } from '@kbn/i18n';
+
 const paths = [
   'cumulative_sum',
   'derivative',
@@ -34,22 +36,34 @@ const paths = [
   'positive_only',
 ];
 export default function calculateLabel(metric, metrics) {
-  if (!metric) return 'Unknown';
+  if (!metric) return i18n.translate('tsvb.calculateLabel.unknownLabel', { defaultMessage: 'Unknown' });
   if (metric.alias) return metric.alias;
 
-  if (metric.type === 'count') return 'Count';
-  if (metric.type === 'calculation') return 'Bucket Script';
-  if (metric.type === 'math') return 'Math';
-  if (metric.type === 'series_agg') return `Series Agg (${metric.function})`;
-  if (metric.type === 'filter_ratio') return 'Filter Ratio';
-  if (metric.type === 'static') return `Static Value of ${metric.value}`;
+  if (metric.type === 'count') return i18n.translate('tsvb.calculateLabel.countLabel', { defaultMessage: 'Count' });
+  if (metric.type === 'calculation') {
+    return i18n.translate('tsvb.calculateLabel.bucketScriptsLabel', { defaultMessage: 'Bucket Script' });
+  }
+  if (metric.type === 'math') return i18n.translate('tsvb.calculateLabel.mathLabel', { defaultMessage: 'Math' });
+  if (metric.type === 'series_agg') {
+    return i18n.translate('tsvb.calculateLabel.seriesAggLabel',
+      { defaultMessage: 'Series Agg ({metricFunction})', values: { metricFunction: metric.function } }
+    );
+  }
+  if (metric.type === 'filter_ratio') return i18n.translate('tsvb.calculateLabel.filterRatioLabel', { defaultMessage: 'Filter Ratio' });
+  if (metric.type === 'static') {
+    return i18n.translate('tsvb.calculateLabel.staticValueLabel',
+      { defaultMessage: 'Static Value of {metricValue}', values: { metricValue: metric.value } }
+    );
+  }
 
   if (metric.type === 'percentile_rank') {
-    return `${lookup[metric.type]} (${metric.value}) of ${metric.field}`;
+    return i18n.translate('tsvb.calculateLabel.percentileRankLabel', {
+      defaultMessage: '{lookupMetricType} ({metricValue}) of {metricField}',
+      values: { lookupMetricType: lookup[metric.type], metricValue: metric.value, metricField: metric.field }
+    });
   }
 
   if (includes(paths, metric.type)) {
-    let additionalLabel = '';
     const targetMetric = metrics.find(m => startsWith(metric.field, m.id));
     const targetLabel = calculateLabel(targetMetric, metrics);
     // For percentiles we need to parse the field id to extract the percentile
@@ -59,11 +73,20 @@ export default function calculateLabel(metric, metrics) {
       const percentileValueMatch = /\[([0-9\.]+)\]$/;
       const matches = metric.field.match(percentileValueMatch);
       if (matches) {
-        additionalLabel += ` (${matches[1]})`;
+        return i18n.translate('tsvb.calculateLabel.lookupMetricTypeOfTargetWithAdditionalLabel', {
+          defaultMessage: '{lookupMetricType} of {targetLabel} ({additionalLabel})',
+          values: { lookupMetricType: lookup[metric.type], targetLabel, additionalLabel: matches[1] }
+        });
       }
     }
-    return `${lookup[metric.type]} of ${targetLabel}${additionalLabel}`;
+    return i18n.translate('tsvb.calculateLabel.lookupMetricTypeOfTargetLabel', {
+      defaultMessage: '{lookupMetricType} of {targetLabel}',
+      values: { lookupMetricType: lookup[metric.type], targetLabel }
+    });
   }
 
-  return `${lookup[metric.type]} of ${metric.field}`;
+  return i18n.translate('tsvb.calculateLabel.lookupMetricTypeOfMetricFieldRankLabel', {
+    defaultMessage: '{lookupMetricType} of {metricField}',
+    values: { lookupMetricType: lookup[metric.type], metricField: metric.field }
+  });
 }

src/core_plugins/metrics/public/components/aggs/agg_row.js

@@ -22,11 +22,14 @@ import React from 'react';
 import _ from 'lodash';
 import AddDeleteButtons from '../add_delete_buttons';
 import { EuiToolTip, EuiButtonIcon, EuiIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
-function AggRow(props) {
+function AggRowUi(props) {
   let iconType = 'eyeClosed';
   let iconColor = 'subdued';
   const last = _.last(props.siblings);
+  const { intl } = props;
+
   if (last.id === props.model.id) {
     iconType = 'eye';
     iconColor = 'text';
@@ -36,8 +39,17 @@ function AggRow(props) {
   if (!props.disableDelete) {
     dragHandle = (
       <EuiFlexItem grow={false}>
-        <EuiToolTip content="Drag to sort">
-          <EuiButtonIcon className="tvbAggRow__sortHandle" aria-label="Drag to sort" iconType="grab" />
+        <EuiToolTip
+          content={(<FormattedMessage
+            id="tsvb.aggRow.dragToSortTooltip"
+            defaultMessage="Drag to sort"
+          />)}
+        >
+          <EuiButtonIcon
+            className="tvbAggRow__sortHandle"
+            aria-label={intl.formatMessage({ id: 'tsvb.aggRow.dragToSortAriaLabel', defaultMessage: 'Drag to sort' })}
+            iconType="grab"
+          />
         </EuiToolTip>
       </EuiFlexItem>
     );
@@ -56,8 +68,8 @@ function AggRow(props) {
         <EuiFlexItem grow={false}>
           <AddDeleteButtons
             testSubj="addMetric"
-            addTooltip="Add metric"
-            deleteTooltip="Delete metric"
+            addTooltip={intl.formatMessage({ id: 'tsvb.aggRow.addMetricButtonTooltip', defaultMessage: 'Add Metric' })}
+            deleteTooltip={intl.formatMessage({ id: 'tsvb.aggRow.deleteMetricButtonTooltip', defaultMessage: 'Delete Metric' })}
             onAdd={props.onAdd}
             onDelete={props.onDelete}
             disableDelete={props.disableDelete}
@@ -68,12 +80,13 @@ function AggRow(props) {
   );
 }
 
-AggRow.propTypes = {
+AggRowUi.propTypes = {
   disableDelete: PropTypes.bool,
   model: PropTypes.object,
   onAdd: PropTypes.func,
   onDelete: PropTypes.func,
   siblings: PropTypes.array,
 };
 
+const AggRow = injectI18n(AggRowUi);
 export default AggRow;