Discover translations (#24079)

* translate discover plugin * update discover translation PR * Update fetch_error.js * Update unit tests * Fix eslint * use separate span tag for label * use separate tags for translated labels * resolve review comments * Update snapshot * fix issue with bucket aria-label * fix quotes * Update snapshot * fix quotes * update snapshots
elastic · Nov 20, 2018 · 973640c · 973640c
1 parent 40960f9
commit 973640c
Show file tree

Hide file tree

Showing 20 changed files with 481 additions and 142 deletions.
diff --git a/src/core_plugins/kibana/public/discover/components/fetch_error/fetch_error.js b/src/core_plugins/kibana/public/discover/components/fetch_error/fetch_error.js
@@ -21,6 +21,7 @@ import 'ngreact';
 import React, { Fragment } from 'react';
 import { uiModules } from 'ui/modules';
 import chrome from 'ui/chrome';
+import { FormattedMessage, injectI18nProvider } from '@kbn/i18n/react';
 
 import {
   EuiFlexGroup,
@@ -43,9 +44,26 @@ const DiscoverFetchError = ({ fetchError }) => {
 
     body = (
       <p>
-         You can address this error by editing the &lsquo;{fetchError.script}&rsquo; field
-         in <a href={url}>Management &gt; Index Patterns</a>,
-         under the &ldquo;Scripted fields&rdquo; tab.
+        <FormattedMessage
+          id="kbn.discover.fetchError.howToAddressErrorDescription"
+          defaultMessage="You can address this error by editing the {fetchErrorScript} field
+            in {managementLink}, under the {scriptedFields} tab."
+          values={{
+            fetchErrorScript: '&lsquo;' + fetchError.script + '&rsquo;',
+            scriptedFields: <FormattedMessage
+              id="kbn.discover.fetchError.scriptedFieldsText"
+              defaultMessage="&ldquo;Scripted fields&rdquo;"
+            />,
+            managementLink: (
+              <a href={url}>
+                <FormattedMessage
+                  id="kbn.discover.fetchError.managmentLinkText"
+                  defaultMessage="Management &gt; Index Patterns"
+                />
+              </a>
+            )
+          }}
+        />
       </p>
     );
   }
@@ -77,4 +95,4 @@ const DiscoverFetchError = ({ fetchError }) => {
 
 const app = uiModules.get('apps/discover', ['react']);
 
-app.directive('discoverFetchError', reactDirective => reactDirective(DiscoverFetchError));
+app.directive('discoverFetchError', reactDirective => reactDirective(injectI18nProvider(DiscoverFetchError)));
diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.html b/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.html
@@ -17,7 +17,7 @@
       ng-if="field.name !== '_source'"
       ng-click="toggleDisplay(field)"
       ng-class="::field.display ? 'kuiButton--danger' : 'kuiButton--primary'"
-      ng-bind="::field.display ? 'remove' : 'add'"
+      ng-bind="::addRemoveButtonLabel"
       class="dscSidebarItem__action kuiButton kuiButton--small"
       data-test-subj="fieldToggle-{{::field.name}}"
     ></button>

diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.js b/src/core_plugins/kibana/public/discover/components/field_chooser/discover_field.js
@@ -26,7 +26,7 @@ import detailsHtml from './lib/detail_views/string.html';
 import { uiModules } from 'ui/modules';
 const app = uiModules.get('apps/discover');
 
-app.directive('discoverField', function ($compile) {
+app.directive('discoverField', function ($compile, i18n) {
   return {
     restrict: 'E',
     template: html,
@@ -42,11 +42,18 @@ app.directive('discoverField', function ($compile) {
       let detailsElem;
       let detailScope;
 
-
       const init = function () {
         if ($scope.field.details) {
           $scope.toggleDetails($scope.field, true);
         }
+
+        $scope.addRemoveButtonLabel = $scope.field.display
+          ? i18n('kbn.discover.fieldChooser.discoverField.removeButtonLabel', {
+            defaultMessage: 'remove',
+          })
+          : i18n('kbn.discover.fieldChooser.discoverField.addButtonLabel', {
+            defaultMessage: 'add',
+          });
       };
 
       const getWarnings = function (field) {
@@ -92,6 +99,18 @@ app.directive('discoverField', function ($compile) {
           $scope.onShowDetails(field, recompute);
           detailScope = $scope.$new();
           detailScope.warnings = getWarnings(field);
+          detailScope.getBucketAriaLabel = (bucket) => {
+            return i18n('kbn.discover.fieldChooser.discoverField.bucketAriaLabel', {
+              defaultMessage: 'Value: {value}',
+              values: {
+                value: bucket.display === ''
+                  ? i18n('kbn.discover.fieldChooser.discoverField.emptyStringText', {
+                    defaultMessage: 'Empty string',
+                  })
+                  : bucket.display,
+              },
+            });
+          };
 
           detailsElem = $(detailsHtml);
           $compile(detailsElem)(detailScope);

diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html b/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
@@ -1,4 +1,4 @@
-<section class="sidebar-list" aria-label="Index and fields">
+<section class="sidebar-list" aria-label="{{::'kbn.discover.fieldChooser.filter.indexAndFieldsSectionAriaLabel' | i18n: {defaultMessage: 'Index and fields'} }}">
   <div ng-show="indexPatternList.length > 1">
     <ui-select
       class="index-pattern-selection"
@@ -32,9 +32,13 @@
   </div>
 
   <div class="dscSidebar__listHeader sidebar-list-header" ng-if="fields.length">
-    <h3 class="sidebar-list-header-label" id="selected_fields" tabindex="0">
-      Selected fields
-    </h3>
+    <h3
+      class="sidebar-list-header-label"
+      id="selected_fields"
+      tabindex="0"
+      i18n-id="kbn.discover.fieldChooser.filter.selectedFieldsTitle"
+      i18n-default-message="Selected fields"
+    ></h3>
   </div>
   <ul class="list-unstyled dscFieldList--selected" >
     <discover-field
@@ -49,9 +53,13 @@ <h3 class="sidebar-list-header-label" id="selected_fields" tabindex="0">
   </ul>
 
   <div class="sidebar-list-header sidebar-item euiFlexGroup euiFlexGroup--gutterMedium" ng-if="fields.length">
-    <h3 class="euiFlexItem sidebar-list-header-label" id="available_fields" tabindex="0">
-      Available fields
-    </h3>
+    <h3
+      class="euiFlexItem sidebar-list-header-label"
+      id="available_fields"
+      tabindex="0"
+      i18n-id="kbn.discover.fieldChooser.filter.availableFieldsTitle"
+      i18n-default-message="Available fields"
+    ></h3>
 
     <div class="euiFlexItem euiFlexItem--flexGrowZero">
       <button
@@ -72,7 +80,7 @@ <h3 class="euiFlexItem sidebar-list-header-label" id="available_fields" tabindex
         ng-class="{ 'kuiButton--basic': !filter.active, 'kuiButton--primary': filter.active, 'hidden-xs': !$parent.showFields, 'hidden-sm': !$parent.showFields }"
         class="kuiButton kuiButton--small pull-right discover-field-filter-toggle"
         ng-click="$parent.showFilter = !$parent.showFilter"
-        aria-label="{{$parent.showFilter ? 'Hide' : 'Show'}} field settings"
+        aria-label="{{toggleFieldFilterButtonAriaLabel}}"
         aria-expanded="{{!!$parent.showFilter}}"
         aria-controls="discoverFieldFilter"
         data-test-subj="toggleFieldFilterButton"
@@ -85,9 +93,11 @@ <h3 class="euiFlexItem sidebar-list-header-label" id="available_fields" tabindex
   <div class="sidebar-item dscFieldDetails" ng-show="showFilter" id="discoverFieldFilter" data-test-subj="discoverFieldFilter">
     <form role="form">
       <div class="form-group">
-        <label for="discoverFieldChooserFilterAggregatable">
-          Aggregatable
-        </label>
+        <label
+          for="discoverFieldChooserFilterAggregatable"
+          i18n-id="kbn.discover.fieldChooser.filter.aggregatableLabel"
+          i18n-default-message="Aggregatable"
+        ></label>
         <select
           id="discoverFieldChooserFilterAggregatable"
           ng-options="opt.value as opt.label for opt in filter.boolOpts"
@@ -96,9 +106,11 @@ <h3 class="euiFlexItem sidebar-list-header-label" id="available_fields" tabindex
         </select>
       </div>
       <div class="form-group">
-        <label for="discoverFieldChooserFilterSearchable">
-          Searchable
-        </label>
+        <label
+          for="discoverFieldChooserFilterSearchable"
+          i18n-id="kbn.discover.fieldChooser.filter.searchableLabel"
+          i18n-default-message="Searchable"
+        ></label>
         <select
           id="discoverFieldChooserFilterSearchable"
           ng-options="opt.value as opt.label for opt in filter.boolOpts"
@@ -107,9 +119,11 @@ <h3 class="euiFlexItem sidebar-list-header-label" id="available_fields" tabindex
         </select>
       </div>
       <div class="form-group">
-        <label for="discoverFieldChooserFilterType">
-          Type
-        </label>
+        <label
+          for="discoverFieldChooserFilterType"
+          i18n-id="kbn.discover.fieldChooser.filter.typeLabel"
+          i18n-default-message="Type"
+        ></label>
         <select
           id="discoverFieldChooserFilterType"
           ng-options="field as field for field in fieldTypes"
@@ -118,9 +132,11 @@ <h3 class="euiFlexItem sidebar-list-header-label" id="available_fields" tabindex
         </select>
       </div>
       <div class="form-group">
-        <label for="discoverFieldChooserFilterFieldName">
-          Field name
-        </label>
+        <label
+          for="discoverFieldChooserFilterFieldName"
+          i18n-id="kbn.discover.fieldChooser.filter.fieldNameLabel"
+          i18n-default-message="Field name"
+        ></label>
         <input
           id="discoverFieldChooserFilterFieldName"
           type="text"
@@ -131,16 +147,19 @@ <h3 class="euiFlexItem sidebar-list-header-label" id="available_fields" tabindex
       <div class="form-group">
         <label for="discoverFieldChooserHideMissingFields">
           <input id="discoverFieldChooserHideMissingFields" type="checkbox" ng-model="filter.vals.missing">
-          Hide missing fields
+          <span
+            i18n-id="kbn.discover.fieldChooser.filter.hideMissingFieldsLabel"
+            i18n-default-message="Hide missing fields"
+          ></span>
         </label>
       </div>
       <button
         ng-click="filter.reset()"
         ng-disabled="!filter.active"
         class="kuiButton kuiButton--danger kuiButton--fullWidth"
-      >
-        Reset filters
-      </button>
+        i18n-id="kbn.discover.fieldChooser.filter.resetFiltersButtonLabel"
+        i18n-default-message="Reset filters"
+      ></button>
     </form>
   </div>
 
@@ -149,7 +168,10 @@ <h3 class="euiFlexItem sidebar-list-header-label" id="available_fields" tabindex
     ng-class="{ 'hidden-sm': !showFields, 'hidden-xs': !showFields }"
     class="list-unstyled sidebar-well dscFieldList--popular">
     <li class="sidebar-item sidebar-list-header">
-      <h6>Popular</h6>
+      <h6
+        i18n-id="kbn.discover.fieldChooser.filter.popularTitle"
+        i18n-default-message="Popular"
+      ></h6>
     </li>
     <discover-field
       ng-repeat="field in popularFields | filter:filter.isFieldFiltered"

diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.js b/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.js
@@ -31,7 +31,7 @@ import { uiModules } from 'ui/modules';
 import fieldChooserTemplate from './field_chooser.html';
 const app = uiModules.get('apps/discover');
 
-app.directive('discFieldChooser', function ($location, globalState, config, $route) {
+app.directive('discFieldChooser', function ($location, globalState, config, $route, i18n) {
   return {
     restrict: 'E',
     scope: {
@@ -47,6 +47,16 @@ app.directive('discFieldChooser', function ($location, globalState, config, $rou
     },
     template: fieldChooserTemplate,
     link: function ($scope) {
+      $scope.$parent.$watch('showFilter', () =>{
+        $scope.toggleFieldFilterButtonAriaLabel = $scope.$parent.showFilter
+          ? i18n('kbn.discover.fieldChooser.toggleFieldFilterButtonHideAriaLabel', {
+            defaultMessage: 'Hide field settings',
+          })
+          : i18n('kbn.discover.fieldChooser.toggleFieldFilterButtonShowAriaLabel', {
+            defaultMessage: 'Show field settings',
+          });
+      });
+
       $scope.selectedIndexPattern = $scope.indexPatternList.find(
         (pattern) => pattern.id === $scope.indexPattern.id
       );

diff --git a/...core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html b/...core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html
@@ -1,7 +1,10 @@
 <div class="dscFieldDetails">
   <div class="kuiVerticalRhythmSmall">
     <p class="euiText euiText--extraSmall euiTextColor--subdued" ng-show="!field.details.error">
-      Top 5 values in
+      <span
+        i18n-id="kbn.discover.fieldChooser.detailViews.topValuesInRecordsDescription"
+        i18n-default-message="Top 5 values in"
+      ></span>
       <span ng-if="!field.details.error">
         <a
           class="kuiLink"
@@ -14,7 +17,11 @@
           ng-show="field.indexPattern.metaFields.includes(field.name) || field.scripted">
           {{::field.details.exists}}
         </span>
-        / {{::field.details.total}} records
+        / {{::field.details.total}}
+        <span
+          i18n-id="kbn.discover.fieldChooser.detailViews.recordsText"
+          i18n-default-message="records"
+        ></span>
       </span>
     </p>
 
@@ -30,9 +37,14 @@
             css-truncate
             css-truncate-expandable="true"
             class="dscFieldDetails__value"
-            aria-label="Value: {{:: bucket.display === '' ? 'Empty string' : bucket.display }}"
+            aria-label="{{::getBucketAriaLabel(bucket)}}"
           >
-            {{::bucket.display}} <em ng-show="bucket.display === ''">Empty string</em>
+            {{::bucket.display}}
+            <em
+              ng-show="bucket.display === ''"
+              i18n-id="kbn.discover.fieldChooser.detailViews.emptyStringText"
+              i18n-default-message="Empty string"
+            ></em>
           </div>
 
           <!-- Add/remove filter buttons -->
@@ -43,7 +55,7 @@
             <button
               class="dscFieldDetailsItem__button"
               ng-click="onAddFilter(field, bucket.value, '+')"
-              aria-label="Filter for this value"
+              aria-label="{{::'kbn.discover.fieldChooser.detailViews.filterValueButtonAriaLabel' | i18n: {defaultMessage: 'Filter for this value'} }}"
               data-test-subj="plus-{{::field.name}}-{{::bucket.display}}"
             >
               <span
@@ -55,7 +67,7 @@
             <button
               class="dscFieldDetailsItem__button"
               ng-click="onAddFilter(field, bucket.value, '-')"
-              aria-label="Filter out this value"
+              aria-label="{{::'kbn.discover.fieldChooser.detailViews.filterOutValueButtonAriaLabel' | i18n: {defaultMessage: 'Filter out this value'} }}"
               data-test-subj="minus-{{::field.name}}-{{::bucket.display}}"
             >
               <span
@@ -84,9 +96,16 @@
     class="kuiButton kuiButton--secondary kuiButton--small kuiButton--fullWidth kuiVerticalRhythmSmall"
     data-test-subj="fieldVisualize-{{::field.name}}"
   >
-    Visualize
+    <span
+      i18n-id="kbn.discover.fieldChooser.detailViews.visualizeLinkText"
+      i18n-default-message="Visualize"
+    ></span>
     <span class="discover-field-vis-warning" ng-show="warnings.length" tooltip="{{warnings.join(' ')}}">
-    ( {{::warnings.length}} <ng-pluralize count="warnings.length" when="{'1':'warning', 'other':'warnings'}"></ng-pluralize> <i aria-hidden="true" class="fa fa-warning"></i> )
+    ( <span
+      i18n-id="kbn.discover.fieldChooser.detailViews.warningsText"
+      i18n-default-message="{warningsLength, plural, one {# warning} other {# warnings}}"
+      i18n-values="{ warningsLength: warnings.length }"
+    ></span> <i aria-hidden="true" class="fa fa-warning"></i> )
     </span>
   </a>
 </div>
diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/lib/field_calculator.js b/src/core_plugins/kibana/public/discover/components/field_chooser/lib/field_calculator.js
@@ -18,6 +18,7 @@
  */
 
 import _ from 'lodash';
+import { i18n } from '@kbn/i18n';
 
 function getFieldValues(hits, field) {
   const name = field.name;
@@ -38,7 +39,9 @@ function getFieldValueCounts(params) {
     || params.field.type === 'geo_shape'
     || params.field.type === 'attachment'
   ) {
-    return { error: 'Analysis is not available for geo fields.' };
+    return { error: i18n.translate('kbn.discover.fieldChooser.fieldCalculator.analysisIsNotAvailableForGeoFieldsErrorMessage', {
+      defaultMessage: 'Analysis is not available for geo fields.',
+    }) };
   }
 
   const allValues = getFieldValues(params.hits, params.field);
@@ -59,9 +62,13 @@ function getFieldValueCounts(params) {
 
     if (params.hits.length - missing === 0) {
       return {
-        error: 'This field is present in your Elasticsearch mapping' +
-          ' but not in the ' + params.hits.length + ' documents shown in the doc table.' +
-          ' You may still be able to visualize or search on it.'
+        error: i18n.translate('kbn.discover.fieldChooser.fieldCalculator.fieldIsNotPresentInDocumentsErrorMessage', {
+          // eslint-disable-next-line max-len
+          defaultMessage: 'This field is present in your Elasticsearch mapping but not in the {hitsLength} documents shown in the doc table. You may still be able to visualize or search on it.',
+          values: {
+            hitsLength: params.hits.length,
+          },
+        })
       };
     }
 
@@ -89,7 +96,9 @@ function _groupValues(allValues, params) {
 
   allValues.forEach(function (value) {
     if (_.isObject(value) && !Array.isArray(value)) {
-      throw new Error('Analysis is not available for object fields');
+      throw new Error(i18n.translate('kbn.discover.fieldChooser.fieldCalculator.analysisIsNotAvailableForObjectFieldsErrorMessage', {
+        defaultMessage: 'Analysis is not available for object fields.',
+      }));
     }
 
     if (Array.isArray(value) && !params.grouped) {