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

@@ -9,6 +9,7 @@ import template from './threshold_watch_agg_field.html';
 import { ThresholdWatchBaseController } from '../threshold_watch_base';
 import 'plugins/watcher/services/html_id_generator';
 import 'plugins/watcher/components/xpack_aria_describes';
+import { i18n } from '@kbn/i18n';
 
 const app = uiModules.get('xpack/watcher');
 
@@ -51,11 +52,16 @@ app.directive('thresholdWatchAggField', function ($injector) {
           }
         });
 
-        this.itemDescription = 'Of';
+        this.itemDescription = i18n.translate('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.translate(
+          '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.aggregationTypeIsRequiredValidationMessage"
+      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

@@ -9,6 +9,7 @@ import template from './threshold_watch_agg_type.html';
 import { ThresholdWatchBaseController } from '../threshold_watch_base';
 import 'plugins/watcher/services/html_id_generator';
 import 'plugins/watcher/components/xpack_aria_describes';
+import { i18n } from '@kbn/i18n';
 
 const app = uiModules.get('xpack/watcher');
 
@@ -43,7 +44,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.translate('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.valueIsRequiredValidationMessage"
+      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.fieldMustBeSelectedValidationMessage"
+      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

@@ -9,6 +9,7 @@ import template from './threshold_watch_group_by.html';
 import { ThresholdWatchBaseController } from '../threshold_watch_base';
 import 'plugins/watcher/services/html_id_generator';
 import 'plugins/watcher/components/xpack_aria_describes';
+import { i18n } from '@kbn/i18n';
 
 const app = uiModules.get('xpack/watcher');
 
@@ -57,7 +58,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.translate('xpack.watcher.thresholdWatchExpression.groupeBy.groupedItemDescription', {
+            defaultMessage: 'Grouped over',
+          })
+          : i18n.translate('xpack.watcher.thresholdWatchExpression.groupeBy.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

@@ -12,6 +12,7 @@ import { ThresholdWatchBaseController } from '../threshold_watch_base';
 import 'plugins/watcher/components/duration_select';
 import 'plugins/watcher/services/html_id_generator';
 import 'plugins/watcher/components/xpack_aria_describes';
+import { i18n } from '@kbn/i18n';
 
 const app = uiModules.get('xpack/watcher');
 
@@ -55,7 +56,9 @@ app.directive('thresholdWatchTimeWindow', function ($injector) {
       }
 
       get itemDescription() {
-        return 'For the last';
+        return i18n.translate('xpack.watcher.thresholdWatchExpression.timeWindow.itemDescription', {
+          defaultMessage: 'For the last',
+        });
       }
 
       get itemValue() {

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

@@ -5,33 +5,44 @@
  */
 
 import { AGG_TYPES } from 'plugins/watcher/../common/constants';
+import { i18n } from '@kbn/i18n';
 
 export const aggTypes = {
   count: {
-    label: 'count()',
+    label: i18n.translate('xpack.watcher.thresholdWatchExpression.aggTypes.countLabel', {
+      defaultMessage: 'count()',
+    }),
     fieldRequired: false,
     value: AGG_TYPES.COUNT
   },
   average: {
-    label: 'average()',
+    label: i18n.translate('xpack.watcher.thresholdWatchExpression.aggTypes.averageLabel', {
+      defaultMessage: 'average()',
+    }),
     fieldRequired: true,
     validNormalizedTypes: ['number'],
     value: AGG_TYPES.AVERAGE
   },
   sum: {
-    label: 'sum()',
+    label: i18n.translate('xpack.watcher.thresholdWatchExpression.aggTypes.sumLabel', {
+      defaultMessage: 'sum()',
+    }),
     fieldRequired: true,
     validNormalizedTypes: ['number'],
     value: AGG_TYPES.SUM
   },
   min: {
-    label: 'min()',
+    label: i18n.translate('xpack.watcher.thresholdWatchExpression.aggTypes.minLabel', {
+      defaultMessage: 'min()',
+    }),
     fieldRequired: true,
     validNormalizedTypes: ['number', 'date'],
     value: AGG_TYPES.MIN
   },
   max: {
-    label: 'max()',
+    label: i18n.translate('xpack.watcher.thresholdWatchExpression.aggTypes.maxLabel', {
+      defaultMessage: 'max()',
+    }),
     fieldRequired: true,
     validNormalizedTypes: ['number', 'date'],
     value: AGG_TYPES.MAX

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']