[i18n] Translate directives (#28654)

localize directives
elastic · Jan 29, 2019 · 43c938b · 43c938b
1 parent 191fedf
commit 43c938b
Show file tree

Hide file tree

Showing 15 changed files with 93 additions and 30 deletions.
diff --git a/src/ui/public/directives/confirm_click.js b/src/ui/public/directives/confirm_click.js
@@ -20,12 +20,14 @@
 import { uiModules } from '../modules';
 uiModules
   .get('kibana')
-  .directive('confirmClick', function ($window) {
+  .directive('confirmClick', function ($window, i18n) {
     return {
       restrict: 'A',
       link: function ($scope, $elem, attrs) {
         $elem.bind('click', function () {
-          const message = attrs.confirmation || 'Are you sure?';
+          const message = attrs.confirmation || i18n('common.ui.directives.confirmClickButtonLabel', {
+            defaultMessage: 'Are you sure?'
+          });
           if ($window.confirm(message)) { // eslint-disable-line no-alert
             const action = attrs.confirmClick;
             if (action) {

diff --git a/src/ui/public/directives/field_name.js b/src/ui/public/directives/field_name.js
@@ -18,6 +18,7 @@
  */
 
 import $ from 'jquery';
+import { template } from 'lodash';
 import '../filters/short_dots';
 import booleanFieldNameIcon from './field_name_icons/boolean_field_name_icon.html';
 import conflictFieldNameIcon from './field_name_icons/conflict_field_name_icon.html';
@@ -33,7 +34,18 @@ import unknownFieldNameIcon from './field_name_icons/unknown_field_name_icon.htm
 import { uiModules } from '../modules';
 const module = uiModules.get('kibana');
 
-module.directive('fieldName', function ($compile, $rootScope, $filter) {
+const compiledBooleanFieldNameIcon = template(booleanFieldNameIcon);
+const compiledConflictFieldNameIcon = template(conflictFieldNameIcon);
+const compiledDateFieldNameIcon = template(dateFieldNameIcon);
+const compiledGeoPointFieldNameIcon = template(geoPointFieldNameIcon);
+const compiledIpFieldNameIcon = template(ipFieldNameIcon);
+const compiledMurmur3FieldNameIcon = template(murmur3FieldNameIcon);
+const compiledNumberFieldNameIcon = template(numberFieldNameIcon);
+const compiledSourceFieldNameIcon = template(sourceFieldNameIcon);
+const compiledStringFieldNameIcon = template(stringFieldNameIcon);
+const compiledUnknownFieldNameIcon = template(unknownFieldNameIcon);
+
+module.directive('fieldName', function ($compile, $rootScope, $filter, i18n) {
   return {
     restrict: 'AE',
     scope: {
@@ -43,23 +55,63 @@ module.directive('fieldName', function ($compile, $rootScope, $filter) {
     },
     link: function ($scope, $el) {
       const typeToIconMap = {
-        boolean: booleanFieldNameIcon,
-        conflict: conflictFieldNameIcon,
-        date: dateFieldNameIcon,
-        geo_point: geoPointFieldNameIcon,
-        ip: ipFieldNameIcon,
-        murmur3: murmur3FieldNameIcon,
-        number: numberFieldNameIcon,
-        source: sourceFieldNameIcon,
-        string: stringFieldNameIcon,
+        boolean: compiledBooleanFieldNameIcon({
+          booleanFieldAriaLabel: i18n('common.ui.directives.fieldNameIcons.booleanAriaLabel', {
+            defaultMessage: 'Boolean field'
+          }),
+        }),
+        conflict: compiledConflictFieldNameIcon({
+          conflictingFieldAriaLabel: i18n('common.ui.directives.fieldNameIcons.conflictFieldAriaLabel', {
+            defaultMessage: 'Conflicting field'
+          }),
+        }),
+        date: compiledDateFieldNameIcon({
+          dateFieldAriaLabel: i18n('common.ui.directives.fieldNameIcons.dateFieldAriaLabel', {
+            defaultMessage: 'Date field'
+          }),
+        }),
+        geo_point: compiledGeoPointFieldNameIcon({
+          geoPointFieldAriaLabel: i18n('common.ui.directives.fieldNameIcons.geoPointFieldAriaLabel', {
+            defaultMessage: 'Date field'
+          }),
+        }),
+        ip: compiledIpFieldNameIcon({
+          ipAddressFieldAriaLabel: i18n('common.ui.directives.fieldNameIcons.ipAddressFieldAriaLabel', {
+            defaultMessage: 'IP address field'
+          }),
+        }),
+        murmur3: compiledMurmur3FieldNameIcon({
+          murmur3FieldAriaLabel: i18n('common.ui.directives.fieldNameIcons.murmur3FieldAriaLabel', {
+            defaultMessage: 'Murmur3 field'
+          }),
+        }),
+        number: compiledNumberFieldNameIcon({
+          numberFieldAriaLabel: i18n('common.ui.directives.fieldNameIcons.numberFieldAriaLabel', {
+            defaultMessage: 'Number field'
+          }),
+        }),
+        source: compiledSourceFieldNameIcon({
+          sourceFieldAriaLabel: i18n('common.ui.directives.fieldNameIcons.sourceFieldAriaLabel', {
+            defaultMessage: 'Source field'
+          }),
+        }),
+        string: compiledStringFieldNameIcon({
+          stringFieldAriaLabel: i18n('common.ui.directives.fieldNameIcons.stringFieldAriaLabel', {
+            defaultMessage: 'String field'
+          }),
+        }),
       };
 
       function typeIcon(fieldType) {
         if (typeToIconMap.hasOwnProperty(fieldType)) {
           return typeToIconMap[fieldType];
         }
 
-        return unknownFieldNameIcon;
+        return compiledUnknownFieldNameIcon({
+          unknownFieldAriaLabel: i18n('common.ui.directives.fieldNameIcons.unknownFieldAriaLabel', {
+            defaultMessage: 'Unknown field'
+          }),
+        });
       }
 
       $rootScope.$watchMulti.call($scope, [

diff --git a/src/ui/public/directives/field_name_icons/boolean_field_name_icon.html b/src/ui/public/directives/field_name_icons/boolean_field_name_icon.html
@@ -1,4 +1,4 @@
 <span
-  aria-label="Boolean field"
+  aria-label="<%= booleanFieldAriaLabel %>"
   class="dscField__icon kuiIcon fa-adjust"
 ></span>
diff --git a/src/ui/public/directives/field_name_icons/conflict_field_name_icon.html b/src/ui/public/directives/field_name_icons/conflict_field_name_icon.html
@@ -1,4 +1,4 @@
 <span
-  aria-label="Conflicting field"
+  aria-label="<%= conflictingFieldAriaLabel %>"
   class="dscField__icon kuiIcon fa-warning"
 ></span>
diff --git a/src/ui/public/directives/field_name_icons/date_field_name_icon.html b/src/ui/public/directives/field_name_icons/date_field_name_icon.html
@@ -1,4 +1,4 @@
 <span
-  aria-label="Date field"
+  aria-label="<%= dateFieldAriaLabel %>"
   class="dscField__icon kuiIcon fa-clock-o"
 ></span>
diff --git a/src/ui/public/directives/field_name_icons/geo_point_field_name_icon.html b/src/ui/public/directives/field_name_icons/geo_point_field_name_icon.html
@@ -1,4 +1,4 @@
 <span
-  aria-label="Geo-point field"
+  aria-label="<%= geoPointFieldAriaLabel %>"
   class="dscField__icon kuiIcon fa-globe"
 ></span>
diff --git a/src/ui/public/directives/field_name_icons/ip_field_name_icon.html b/src/ui/public/directives/field_name_icons/ip_field_name_icon.html
@@ -1,4 +1,4 @@
 <span
-  aria-label="IP address field"
+  aria-label="<%= ipAddressFieldAriaLabel %>"
   class="dscField__icon kuiIcon fa-laptop"
 ></span>
diff --git a/src/ui/public/directives/field_name_icons/murmur3_field_name_icon.html b/src/ui/public/directives/field_name_icons/murmur3_field_name_icon.html
@@ -1,5 +1,5 @@
 <span
-  aria-label="Murmur3 field"
+  aria-label="<%= murmur3FieldAriaLabel %>"
   class="dscField__icon"
 >
   <strong aria-hidden="true">h</strong>

diff --git a/src/ui/public/directives/field_name_icons/number_field_name_icon.html b/src/ui/public/directives/field_name_icons/number_field_name_icon.html
@@ -1,5 +1,5 @@
 <span
-  aria-label="Number field"
+  aria-label="<%= numberFieldAriaLabel %>"
   class="dscField__icon"
 >
   <strong aria-hidden="true">#</strong>

diff --git a/src/ui/public/directives/field_name_icons/source_field_name_icon.html b/src/ui/public/directives/field_name_icons/source_field_name_icon.html
@@ -1,4 +1,4 @@
 <span
-  aria-label="Source field"
+  aria-label="<%= sourceFieldAriaLabel %>"
   class="dscField__icon kuiIcon fa-file-text-o"
 ></span>
diff --git a/src/ui/public/directives/field_name_icons/string_field_name_icon.html b/src/ui/public/directives/field_name_icons/string_field_name_icon.html
@@ -1,5 +1,5 @@
 <span
-  aria-label="String field"
+  aria-label="<%= stringFieldAriaLabel %>"
   class="dscField__icon"
 >
   <strong aria-hidden="true">t</strong>

diff --git a/src/ui/public/directives/field_name_icons/unknown_field_name_icon.html b/src/ui/public/directives/field_name_icons/unknown_field_name_icon.html
@@ -1,5 +1,5 @@
 <span
-  aria-label="Unknown field"
+  aria-label="<%= unknownFieldAriaLabel %>"
   class="dscField__icon"
 >
   <strong aria-hidden="true">?</strong>

diff --git a/src/ui/public/directives/paginate.js b/src/ui/public/directives/paginate.js
@@ -22,7 +22,7 @@ import { uiModules } from '../modules';
 import paginateControlsTemplate from '../partials/paginate_controls.html';
 
 uiModules.get('kibana')
-  .directive('paginate', function ($parse, $compile) {
+  .directive('paginate', function ($parse, $compile, i18n) {
     return {
       restrict: 'E',
       scope: true,
@@ -61,12 +61,15 @@ uiModules.get('kibana')
       controller: function ($scope, $document) {
         const self = this;
         const ALL = 0;
+        const allSizeTitle = i18n('common.ui.directives.paginate.size.allDropDownOptionLabel', {
+          defaultMessage: 'All',
+        });
 
         self.sizeOptions = [
           { title: '10', value: 10 },
           { title: '25', value: 25 },
           { title: '100', value: 100 },
-          { title: 'All', value: ALL }
+          { title: allSizeTitle, value: ALL }
         ];
 
         // setup the watchers, called in the post-link function

diff --git a/src/ui/public/directives/partials/table_cell_filter.html b/src/ui/public/directives/partials/table_cell_filter.html
@@ -8,14 +8,14 @@
         data-test-subj="filterForCellValue"
         ng-click="onFilterClick($event, false)"
         class="fa fa-search-plus"
-        tooltip="Filter for value"
+        tooltip="{{ ::'common.ui.directives.tableCellFilter.filterForValueTooltip' | i18n: {defaultMessage: 'Filter for value'} }}"
         tooltip-append-to-body="1"
       ></span>
 
       <span
         ng-click="onFilterClick($event, true)"
         class="fa fa-search-minus"
-        tooltip="Filter out value"
+        tooltip="{{ ::'common.ui.directives.tableCellFilter.filterOutValueTooltip' | i18n: {defaultMessage: 'Filter out value'} }}"
         tooltip-append-to-body="1"
       ></span>
     </span>

diff --git a/src/ui/public/directives/truncated.js b/src/ui/public/directives/truncated.js
@@ -25,7 +25,7 @@ import 'angular-sanitize';
 
 const module = uiModules.get('kibana', ['ngSanitize']);
 
-module.directive('kbnTruncated', function () {
+module.directive('kbnTruncated', function (i18n) {
   return {
     restrict: 'E',
     scope: {
@@ -48,11 +48,17 @@ module.directive('kbnTruncated', function () {
       }
       $scope.truncated = true;
       $scope.expanded = false;
-      $scope.action = 'more';
+      const showLessText = i18n('common.ui.directives.truncated.showLessLinkText', {
+        defaultMessage: 'less'
+      });
+      const showMoreText = i18n('common.ui.directives.truncated.showMoreLinkText', {
+        defaultMessage: 'more'
+      });
+      $scope.action = showMoreText;
       $scope.toggle = () => {
         $scope.expanded = !$scope.expanded;
         $scope.content = $scope.expanded ? source : truncated;
-        $scope.action = $scope.expanded ? 'less' : 'more';
+        $scope.action = $scope.expanded ? showLessText : showMoreText;
       };
     }
   };