Feature/translate watcher(part_2)

x-pack/plugins/watcher/public/components/threshold_watch_expression/components/threshold_watch_agg_field/threshold_watch_agg_field.html

@@ -16,9 +16,9 @@
       xpack-aria-describes="{{thresholdWatchAggField.makeId('aggField')}}"
       class="kuiInputNote kuiInputNote--danger"
       ng-if="thresholdWatchAggField.isValidationMessageVisible('aggField', 'required')"
-    >
-      Please select a field.
-    </div>
+      i18n-id="xpack.watcher.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage"
+      i18n-default-message="Please select a field."
+    ></div>
     <select
       id="{{thresholdWatchAggField.makeId('aggField')}}"
       class="kuiSelect"
@@ -27,7 +27,11 @@
       ng-model="thresholdWatchAggField.aggField"
       ng-options="aggField as aggField.name group by aggField.normalizedType for aggField in thresholdWatchAggField.aggFields"
     >
-      <option value="">Select a field...</option>
+      <option
+        value=""
+        i18n-id="xpack.watcher.thresholdWatchExpression.aggType.selectFieldDropdownPlaceholder"
+        i18n-default-message="Select a field…"
+      ></option>
     </select>
   </form>
 </expression-item>

x-pack/plugins/watcher/public/components/threshold_watch_expression/components/threshold_watch_agg_field/threshold_watch_agg_field.js

@@ -12,7 +12,7 @@ import 'plugins/watcher/components/xpack_aria_describes';
 
 const app = uiModules.get('xpack/watcher');
 
-app.directive('thresholdWatchAggField', function ($injector) {
+app.directive('thresholdWatchAggField', function ($injector, i18n) {
   const htmlIdGeneratorFactory = $injector.get('xpackWatcherHtmlIdGeneratorFactory');
 
   return {
@@ -51,11 +51,16 @@ app.directive('thresholdWatchAggField', function ($injector) {
           }
         });
 
-        this.itemDescription = 'Of';
+        this.itemDescription = i18n('xpack.watcher.thresholdWatchExpression.aggField.itemDescription', {
+          defaultMessage: 'Of',
+        });
       }
 
       get itemValue() {
-        return this.aggField ? this.aggField.name : 'select a field';
+        return this.aggField ? this.aggField.name : i18n(
+          'xpack.watcher.thresholdWatchExpression.aggField.selectFieldTextMessage', {
+            defaultMessage: 'select a field',
+          });
       }
     }
   };

x-pack/plugins/watcher/public/components/threshold_watch_expression/components/threshold_watch_agg_type/threshold_watch_agg_type.html

@@ -16,9 +16,9 @@
       xpack-aria-describes="{{thresholdWatchAggType.makeId('aggType')}}"
       class="kuiInputNote kuiInputNote--danger"
       ng-if="thresholdWatchAggType.isValidationMessageVisible('aggType', 'required')"
-    >
-      Please select an aggregation type.
-    </div>
+      i18n-id="xpack.watcher.thresholdWatchExpression.aggType.requiredTypeValidationMessage"
+      i18n-default-message="Please select an aggregation type."
+    ></div>
     <select
       id="{{thresholdWatchAggType.makeId('aggType')}}"
       class="kuiSelect"

x-pack/plugins/watcher/public/components/threshold_watch_expression/components/threshold_watch_agg_type/threshold_watch_agg_type.js

@@ -12,7 +12,7 @@ import 'plugins/watcher/components/xpack_aria_describes';
 
 const app = uiModules.get('xpack/watcher');
 
-app.directive('thresholdWatchAggType', function ($injector) {
+app.directive('thresholdWatchAggType', function ($injector, i18n) {
   const htmlIdGeneratorFactory = $injector.get('xpackWatcherHtmlIdGeneratorFactory');
 
   return {
@@ -43,7 +43,9 @@ app.directive('thresholdWatchAggType', function ($injector) {
         $scope.$watch('thresholdWatchAggType.form.$valid', this.checkValidity);
         $scope.$watch('thresholdWatchAggType.form.$dirty', this.checkDirty);
 
-        this.itemDescription = 'When';
+        this.itemDescription = i18n('xpack.watcher.thresholdWatchExpression.aggType.itemDescription', {
+          defaultMessage: 'When',
+        });
       }
 
       get itemValue() {

x-pack/plugins/watcher/public/components/threshold_watch_expression/components/threshold_watch_group_by/threshold_watch_group_by.html

@@ -16,33 +16,33 @@
       xpack-aria-describes="{{thresholdWatchGroupBy.makeId('termSize')}}"
       class="kuiInputNote kuiInputNote--danger"
       ng-if="thresholdWatchGroupBy.isValidationMessageVisible('termSize', 'required')"
-    >
-      A value is required.
-    </div>
+      i18n-id="xpack.watcher.thresholdWatchExpression.groupBy.requiredValueValidationMessage"
+      i18n-default-message="A value is required."
+    ></div>
     <div
       id="{{thresholdWatchGroupBy.makeId(['termSize', 'number'])}}"
       xpack-aria-describes="{{thresholdWatchGroupBy.makeId('termSize')}}"
       class="kuiInputNote kuiInputNote--danger"
       ng-if="thresholdWatchGroupBy.isValidationMessageVisible('termSize', 'number')"
-    >
-      Value must be a valid number.
-    </div>
+      i18n-id="xpack.watcher.thresholdWatchExpression.groupBy.valueMustBeValidNumberValidationMessage"
+      i18n-default-message="Value must be a valid number."
+    ></div>
     <div
       id="{{thresholdWatchGroupBy.makeId(['termSize', 'min'])}}"
       xpack-aria-describes="{{thresholdWatchGroupBy.makeId('termSize')}}"
       class="kuiInputNote kuiInputNote--danger"
       ng-if="thresholdWatchGroupBy.isValidationMessageVisible('termSize', 'min')"
-    >
-      Value must be greater than 0.
-    </div>
+      i18n-id="xpack.watcher.thresholdWatchExpression.groupBy.valueMustBeGraterThanZeroValidationMessage"
+      i18n-default-message="Value must be greater than 0."
+    ></div>
     <div
       id="{{thresholdWatchGroupBy.makeId(['termField', 'required'])}}"
       xpack-aria-describes="{{thresholdWatchGroupBy.makeId('termField')}}"
       class="kuiInputNote kuiInputNote--danger"
       ng-if="thresholdWatchGroupBy.isValidationMessageVisible('termField', 'required')"
-    >
-      Please select a field.
-    </div>
+      i18n-id="xpack.watcher.thresholdWatchExpression.groupBy.requiredFieldValidationMessage"
+      i18n-default-message="Please select a field."
+    ></div>
     <select
       id="{{thresholdWatchGroupBy.makeId('groupByType')}}"
       class="kuiSelect"
@@ -67,7 +67,11 @@
       ng-options="termField as termField.name group by termField.normalizedType for termField in thresholdWatchGroupBy.termFields"
       ng-if="thresholdWatchGroupBy.groupByType.sizeRequired"
     >
-      <option value="">Select a field...</option>
+      <option
+        value=""
+        i18n-id="xpack.watcher.thresholdWatchExpression.groupBy.selectFieldDropdownPlaceholder"
+        i18n-default-message="Select a field…"
+      ></option>
     </select>
   </form>
 </expression-item>

x-pack/plugins/watcher/public/components/threshold_watch_expression/components/threshold_watch_group_by/threshold_watch_group_by.js

@@ -12,7 +12,7 @@ import 'plugins/watcher/components/xpack_aria_describes';
 
 const app = uiModules.get('xpack/watcher');
 
-app.directive('thresholdWatchGroupBy', function ($injector) {
+app.directive('thresholdWatchGroupBy', function ($injector, i18n) {
   const htmlIdGeneratorFactory = $injector.get('xpackWatcherHtmlIdGeneratorFactory');
 
   return {
@@ -57,7 +57,15 @@ app.directive('thresholdWatchGroupBy', function ($injector) {
       }
 
       get itemDescription() {
-        return (this.groupByType && this.groupByType.sizeRequired) ? 'Grouped over' : 'Over';
+        const itemDescription = (this.groupByType && this.groupByType.sizeRequired)
+          ? i18n('xpack.watcher.thresholdWatchExpression.groupBy.groupedItemDescription', {
+            defaultMessage: 'Grouped over',
+          })
+          : i18n('xpack.watcher.thresholdWatchExpression.groupBy.itemDescription', {
+            defaultMessage: 'Over',
+          });
+
+        return itemDescription;
       }
 
       get itemValue() {

x-pack/plugins/watcher/public/components/threshold_watch_expression/components/threshold_watch_threshold_level/threshold_watch_threshold_level.html

@@ -16,17 +16,17 @@
       xpack-aria-describes="{{thresholdWatchThresholdLevel.makeId('threshold')}}"
       class="kuiInputNote kuiInputNote--danger"
       ng-if="thresholdWatchThresholdLevel.isValidationMessageVisible('threshold', 'required')"
-    >
-      A value is required.
-    </div>
+      i18n-id="xpack.watcher.thresholdWatchExpression.thresholdLevel.valueIsRequiredValidationMessage"
+      i18n-default-message="A value is required."
+    ></div>
     <div
       id="{{thresholdWatchThresholdLevel.makeId(['threshold', 'number'])}}"
       xpack-aria-describes="{{thresholdWatchThresholdLevel.makeId('threshold')}}"
       class="kuiInputNote kuiInputNote--danger"
       ng-if="thresholdWatchThresholdLevel.isValidationMessageVisible('threshold', 'number')"
-    >
-      Value must be a valid number.
-    </div>
+      i18n-id="xpack.watcher.thresholdWatchExpression.thresholdLevel.valueMustBeValidNumberValidationMessage"
+      i18n-default-message="Value must be a valid number."
+    ></div>
     <select
       id="{{thresholdWatchThresholdLevel.makeId('thresholdComparator')}}"
       name="thresholdComparator"

x-pack/plugins/watcher/public/components/threshold_watch_expression/components/threshold_watch_time_window/threshold_watch_time_window.html

@@ -16,42 +16,42 @@
       xpack-aria-describes="durationSelectWindowSize"
       class="kuiInputNote kuiInputNote--danger"
       ng-if="thresholdWatchTimeWindow.isValidationMessageVisible('durationSelectWindowSize', 'required')"
-    >
-      Window duration size is required.
-    </div>
+      i18n-id="xpack.watcher.thresholdWatchExpression.timeWindow.durationSizeIsRequiredValidationMessage"
+      i18n-default-message="Window duration size is required."
+    ></div>
     <div
       id="{{thresholdWatchTimeWindow.makeId(['durationSelectWindowSize', 'min'])}}"
       aria-describes="durationSelectWindowSize"
       class="kuiInputNote kuiInputNote--danger"
       ng-if="thresholdWatchTimeWindow.isValidationMessageVisible('durationSelectWindowSize', 'min')"
-    >
-      Window duration size can not be a negative number.
-    </div>
+      i18n-id="xpack.watcher.thresholdWatchExpression.timeWindow.durationSizeMustBePositiveNumberValidationMessage"
+      i18n-default-message="Window duration size can not be a negative number."
+    ></div>
     <div
       id="{{thresholdWatchTimeWindow.makeId(['durationSelectWindowSize', 'number'])}}"
       xpack-aria-describes="durationSelectWindowSize"
       class="kuiInputNote kuiInputNote--danger"
       ng-if="thresholdWatchTimeWindow.isValidationMessageVisible('durationSelectWindowSize', 'number')"
-    >
-      Window duration size must be a valid number.
-    </div>
+      i18n-id="xpack.watcher.thresholdWatchExpression.timeWindow.durationSizeMustBeValidNumberValidationMessage"
+      i18n-default-message="Window duration size must be a valid number."
+    ></div>
     <div
       id="{{thresholdWatchTimeWindow.makeId(['durationSelectWindowUnit', 'required'])}}"
       xpack-aria-describes="durationSelectWindowUnit"
       class="kuiInputNote kuiInputNote--danger"
       ng-if="thresholdWatchTimeWindow.isValidationMessageVisible('durationSelectWindowUnit', 'required')"
-    >
-      Window duration unit is required.
-    </div>
+      i18n-id="xpack.watcher.thresholdWatchExpression.timeWindow.durationUnitIsRequiredValidationMessage"
+      i18n-default-message="Window duration unit is required."
+    ></div>
     <div
       id="{{thresholdWatchTimeWindow.makeId(['durationSelectWindowSize', 'minimumDuration'])}}"
       xpack-aria-describes="durationSelectWindowSize durationSelectWindowUnit"
       class="kuiInputNote kuiInputNote--danger"
       ng-if="thresholdWatchTimeWindow.isValidationMessageVisible('durationSelectWindowSize', 'minimumDuration', false)"
-    >
-      Window duration is too short.
-      The minimum allowed is {{thresholdWatchTimeWindow.timeWindowMinimumSize}}{{thresholdWatchTimeWindow.timeWindowMinimumUnit}}.
-    </div>
+      i18n-id="xpack.watcher.thresholdWatchExpression.timeWindow.durationIsTooShortValidationMessage"
+      i18n-default-message="Window duration is too short. The minimum allowed is {minimumSize}{minimumUnit}."
+      i18n-values="{ minimumSize: thresholdWatchTimeWindow.timeWindowMinimumSize, minimumUnit: thresholdWatchTimeWindow.timeWindowMinimumUnit }"
+    ></div>
     <duration-select
       duration-id="window"
       minimum-unit="thresholdWatchTimeWindow.timeWindowMinimumUnit"

x-pack/plugins/watcher/public/components/threshold_watch_expression/components/threshold_watch_time_window/threshold_watch_time_window.js

@@ -15,7 +15,7 @@ import 'plugins/watcher/components/xpack_aria_describes';
 
 const app = uiModules.get('xpack/watcher');
 
-app.directive('thresholdWatchTimeWindow', function ($injector) {
+app.directive('thresholdWatchTimeWindow', function ($injector, i18n) {
   const htmlIdGeneratorFactory = $injector.get('xpackWatcherHtmlIdGeneratorFactory');
 
   return {
@@ -55,7 +55,9 @@ app.directive('thresholdWatchTimeWindow', function ($injector) {
       }
 
       get itemDescription() {
-        return 'For the last';
+        return i18n('xpack.watcher.thresholdWatchExpression.timeWindow.itemDescription', {
+          defaultMessage: 'For the last',
+        });
       }
 
       get itemValue() {

x-pack/plugins/watcher/public/components/threshold_watch_expression/lib/comparators.js

@@ -4,15 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
+
 import { COMPARATORS } from 'plugins/watcher/../common/constants';
 
 export const comparators = {
   'above': {
-    label: 'Is above',
+    label: i18n.translate('xpack.watcher.thresholdWatchExpression.comparators.isAboveLabel', {
+      defaultMessage: 'Is above',
+    }),
     value: COMPARATORS.GREATER_THAN
   },
   'below': {
-    label: 'Is below',
+    label: i18n.translate('xpack.watcher.thresholdWatchExpression.comparators.isBelowLabel', {
+      defaultMessage: 'Is below',
+    }),
     value: COMPARATORS.LESS_THAN
   }
 };

x-pack/plugins/watcher/public/components/threshold_watch_expression/lib/group_by_types.js

@@ -4,15 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
+
 export const groupByTypes = {
   'all': {
-    label: 'all documents',
+    label: i18n.translate('xpack.watcher.thresholdWatchExpression.groupByLabel.allDocumentsLabel', {
+      defaultMessage: 'all documents',
+    }),
     sizeRequired: false,
     value: 'all',
     validNormalizedTypes: []
   },
   'top': {
-    label: 'top',
+    label: i18n.translate('xpack.watcher.thresholdWatchExpression.groupByLabel.topLabel', {
+      defaultMessage: 'top',
+    }),
     sizeRequired: true,
     value: 'top',
     validNormalizedTypes: ['number', 'date', 'keyword']

x-pack/plugins/watcher/public/components/threshold_watch_expression/lib/time_units.js

@@ -4,25 +4,43 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { i18n } from '@kbn/i18n';
+
 export const timeUnits = {
   'second': {
-    labelPlural: 'seconds',
-    labelSingular: 'second',
+    labelPlural: i18n.translate('xpack.watcher.thresholdWatchExpression.timeUnits.secondPluralLabel', {
+      defaultMessage: 'seconds',
+    }),
+    labelSingular: i18n.translate('xpack.watcher.thresholdWatchExpression.timeUnits.secondSingularLabel', {
+      defaultMessage: 'second',
+    }),
     value: 's'
   },
   'minute': {
-    labelPlural: 'minutes',
-    labelSingular: 'minute',
+    labelPlural: i18n.translate('xpack.watcher.thresholdWatchExpression.timeUnits.minutePluralLabel', {
+      defaultMessage: 'minutes',
+    }),
+    labelSingular: i18n.translate('xpack.watcher.thresholdWatchExpression.timeUnits.minuteSingularLabel', {
+      defaultMessage: 'minute',
+    }),
     value: 'm'
   },
   'hour': {
-    labelPlural: 'hours',
-    labelSingular: 'hour',
+    labelPlural: i18n.translate('xpack.watcher.thresholdWatchExpression.timeUnits.hourPluralLabel', {
+      defaultMessage: 'hours',
+    }),
+    labelSingular: i18n.translate('xpack.watcher.thresholdWatchExpression.timeUnits.hourSingularLabel', {
+      defaultMessage: 'hour',
+    }),
     value: 'h'
   },
   'day': {
-    labelPlural: 'days',
-    labelSingular: 'day',
+    labelPlural: i18n.translate('xpack.watcher.thresholdWatchExpression.timeUnits.dayPluralLabel', {
+      defaultMessage: 'days',
+    }),
+    labelSingular: i18n.translate('xpack.watcher.thresholdWatchExpression.timeUnits.daySingularLabel', {
+      defaultMessage: 'day',
+    }),
     value: 'd'
   }
 };

x-pack/plugins/watcher/public/components/threshold_watch_expression/threshold_watch_expression.html

@@ -2,9 +2,9 @@
   <div
     class="kuiInputNote kuiInputNote--danger"
     ng-show="thresholdWatchExpression.showExpressionValidation()"
-  >
-    Please fix the errors in the expression below.
-  </div>
+    i18n-id="xpack.watcher.thresholdWatchExpression.fixErrorInExpressionBelowValidationMessage"
+    i18n-default-message="Please fix the errors in the expression below."
+  ></div>
 
   <threshold-watch-agg-type
     item-id="agg-type"

x-pack/plugins/watcher/public/components/tool_bar_selected_count/tool_bar_selected_count.html

@@ -1,3 +1,4 @@
 <div class="kuiToolBarText">
-  {{ toolBarSelectedCount.count }} {{ toolBarSelectedCount.count === 1 ? toolBarSelectedCount.singularName : toolBarSelectedCount.pluralName}} selected
+    {{ toolBarSelectedCount.count }} {{ toolBarSelectedCount.count === 1 ? toolBarSelectedCount.singularName : toolBarSelectedCount.pluralName}}
+    {{ 'xpack.watcher.toolBarSelectedCountText' | i18n: { defaultMessage: 'selected' } }}
 </div>