From 80bfb1596536456d6dd828d9fa983ada21b6ddf2 Mon Sep 17 00:00:00 2001
From: Maryia Lapata <mary.lopato@gmail.com>
Date: Fri, 14 Dec 2018 16:22:42 +0300
Subject: [PATCH] [i18n] Translate Agg_types(part_2)  (#26091) (#27194)

* partial translate

* Translate agg_types -> controls

* Fix translations issues

* Fix id

* Fix issue

* Fix issues

* Fix issues

* Fix long string

* Fix issues

* Fix issues
---
 .../agg_types/controls/date_ranges.html       | 35 +++++++---
 .../agg_types/controls/drop_partials.html     |  7 +-
 .../agg_types/controls/extended_bounds.html   | 26 +++++--
 src/ui/public/agg_types/controls/field.html   | 24 +++++--
 src/ui/public/agg_types/controls/filters.html | 37 +++++++---
 .../public/agg_types/controls/ip_ranges.html  | 70 +++++++++++++++----
 .../agg_types/controls/min_doc_count.html     | 12 +++-
 .../agg_types/controls/number_interval.html   | 13 +++-
 .../public/agg_types/controls/order_agg.html  | 33 ++++++---
 .../agg_types/controls/order_and_size.html    | 12 +++-
 .../agg_types/controls/other_bucket.html      | 28 +++++---
 .../agg_types/controls/percentile_ranks.html  |  6 +-
 .../agg_types/controls/percentiles.html       |  6 +-
 .../public/agg_types/controls/precision.html  | 41 +++++++----
 src/ui/public/agg_types/controls/ranges.html  | 27 +++++--
 .../public/agg_types/controls/raw_json.html   |  7 +-
 .../controls/regular_expression.html          |  7 +-
 src/ui/public/agg_types/controls/sub_agg.html | 23 ++++--
 .../agg_types/controls/time_interval.html     | 31 ++++++--
 .../controls/top_aggregate_and_size.html      | 14 ++--
 .../public/agg_types/controls/top_sort.html   | 21 +++---
 21 files changed, 357 insertions(+), 123 deletions(-)

diff --git a/src/ui/public/agg_types/controls/date_ranges.html b/src/ui/public/agg_types/controls/date_ranges.html
index 33347e7123b6..8ca414a67618 100644
--- a/src/ui/public/agg_types/controls/date_ranges.html
+++ b/src/ui/public/agg_types/controls/date_ranges.html
@@ -2,10 +2,18 @@
     <table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.length">
       <tr>
         <th scope="col">
-          <label id="visEditorDateRangeFrom{{agg.id}}">From</label>
+          <label
+            id="visEditorDateRangeFrom{{agg.id}}"
+            i18n-id="common.ui.aggTypes.dateRanges.fromColumnLabel"
+            i18n-default-message="From"
+          ></label>
         </th>
         <th scope="col" colspan="2">
-          <label id="visEditorDateRangeTo{{agg.id}}">To</label>
+          <label
+            id="visEditorDateRangeTo{{agg.id}}"
+            i18n-id="common.ui.aggTypes.dateRanges.toColumnLabel"
+            i18n-default-message="To"
+          ></label>
         </th>
       </tr>
 
@@ -31,7 +39,7 @@
         <td>
           <button
             type="button"
-            aria-label="Remove this range"
+            aria-label="{{ ::'common.ui.aggTypes.dateRanges.removeRangeButtonAriaLabel' | i18n: { defaultMessage: 'Remove this range' } }}"
             ng-click="agg.params.ranges.splice($index, 1)"
             class="kuiButton kuiButton--danger kuiButton--small">
             <i class="fa fa-times" ></i>
@@ -46,9 +54,9 @@
               documentation-href="date.dateMath"
               target="_blank"
               rel="noopener noreferrer"
-            >
-              Accepted date formats
-            </a>
+              i18n-id="common.ui.aggTypes.dateRanges.acceptedDateFormatsLinkText"
+              i18n-default-message="Accepted date formats"
+            ></a>
           </small>
         </td>
       </tr>
@@ -58,15 +66,22 @@
     <div class="hintbox" ng-show="aggForm.rangeLength.$invalid">
       <p>
         <i class="fa fa-danger text-danger"></i>
-        <strong>Required:</strong> You must specify at least one date range.
+        <strong
+          i18n-id="common.ui.aggTypes.dateRanges.requiredDateRangeLabel"
+          i18n-default-message="Required:"
+        ></strong>
+        <span
+          i18n-id="common.ui.aggTypes.dateRanges.requiredDateRangeDescription"
+          i18n-default-message="You must specify at least one date range."
+        ></span>
       </p>
     </div>
 
     <button
       ng-click="agg.params.ranges.push({})"
       class="kuiButton kuiButton--primary kuiButton--fullWidth"
-    >
-      Add Range
-    </button>
+      i18n-id="common.ui.aggTypes.dateRanges.addRangeButtonLabel"
+      i18n-default-message="Add Range"
+    ></button>
   </div>
 </div>
diff --git a/src/ui/public/agg_types/controls/drop_partials.html b/src/ui/public/agg_types/controls/drop_partials.html
index 776916e4817d..d1bff6a67ae0 100644
--- a/src/ui/public/agg_types/controls/drop_partials.html
+++ b/src/ui/public/agg_types/controls/drop_partials.html
@@ -1,11 +1,14 @@
 <div class="checkbox" ng-if="agg.params.field.name === agg.getIndexPattern().timeFieldName">
   <label>
     <input ng-model="agg.params.drop_partials" type="checkbox" data-test-subj="dropPartialBucketsCheckbox">
-    Drop partial buckets
+    <span
+      i18n-id="common.ui.aggTypes.dropPartialBucketsLabel"
+      i18n-default-message="Drop partial buckets"
+    ></span>
     &nbsp;
     <icon-tip
       position="'right'"
-      content="'Remove buckets that span time outside the time range so the histogram doesn\'t start and end with incomplete buckets.'"
+      content="::'common.ui.aggTypes.dropPartialBucketsTooltip' | i18n: { defaultMessage: 'Remove buckets that span time outside the time range so the histogram doesn\'t start and end with incomplete buckets.' }"
     ></icon-tip>
   </label>
 </div>
diff --git a/src/ui/public/agg_types/controls/extended_bounds.html b/src/ui/public/agg_types/controls/extended_bounds.html
index 7965b272bf4c..316dc62dac07 100644
--- a/src/ui/public/agg_types/controls/extended_bounds.html
+++ b/src/ui/public/agg_types/controls/extended_bounds.html
@@ -1,11 +1,13 @@
 <div ng-if="aggParam.shouldShow(agg)">
   <div>
     <label id="extendedBoundsLabel{{agg.id}}">
-      Extended Bounds
-      &nbsp;
+      <span
+        i18n-id="common.ui.aggTypes.extendedBoundsLabel"
+        i18n-default-message="Extended Bounds"
+      ></span>
       <icon-tip
         position="'right'"
-        content="'Min and Max do not filter the results, but rather extend the bounds of the result set'"
+        content="::'common.ui.aggTypes.extendedBoundsTooltip' | i18n: { defaultMessage: 'Min and Max do not filter the results, but rather extend the bounds of the result set' }"
       ></icon-tip>
     </label>
   </div>
@@ -15,7 +17,14 @@
         id="extendedBoundsMinLabel{{agg.id}}"
         for="extendedBoundsMinInput{{agg.id}}"
       >
-        Min <small>(optional)</small>
+        <span
+          i18n-id="common.ui.aggTypes.extendedBounds.minLabel"
+          i18n-default-message="Min"
+        ></span>
+        <small
+          i18n-id="common.ui.aggTypes.extendedBounds.minLabel.optionalText"
+          i18n-default-message="(optional)"
+        ></small>
       </label>
       <input
         id="extendedBoundsMinInput{{agg.id}}"
@@ -30,7 +39,14 @@
         id="extendedBoundsMaxLabel{{agg.id}}"
         for="extendedBoundsMaxInput{{agg.id}}"
       >
-        Max <small>(optional)</small>
+      <span
+        i18n-id="common.ui.aggTypes.extendedBounds.maxLabel"
+        i18n-default-message="Max"
+      ></span>
+      <small
+        i18n-id="common.ui.aggTypes.extendedBounds.maxLabel.optionalText"
+        i18n-default-message="(optional)"
+      ></small>
       </label>
       <input
         id="extendedBoundsMaxInput{{agg.id}}"
diff --git a/src/ui/public/agg_types/controls/field.html b/src/ui/public/agg_types/controls/field.html
index 8d0f5e12468f..b6cc1ce7620b 100644
--- a/src/ui/public/agg_types/controls/field.html
+++ b/src/ui/public/agg_types/controls/field.html
@@ -1,10 +1,11 @@
 <div class="form-group">
-  <label>
-    Field
-  </label>
+  <label
+    i18n-id="common.ui.aggTypes.field.fieldLabel"
+    i18n-default-message="Field"
+  ></label>
 
   <ui-select
-    title="Aggregation Field"
+    title="{{ ::'common.ui.aggTypes.field.aggregationFieldTitle' | i18n: { defaultMessage: 'Aggregation Field' } }}"
     name="field"
     required
     class="visEditorAggSelect__select field-select"
@@ -13,7 +14,9 @@
     on-select="aggParam.onChange(agg)"
     uis-open-close="limit = 100"
   >
-    <ui-select-match placeholder="Select a field">
+    <ui-select-match
+      placeholder="{{ ::'common.ui.aggTypes.field.selectFieldPlaceholder' | i18n: { defaultMessage: 'Select a field' } }}"
+    >
       {{$select.selected.displayName}}
     </ui-select-match>
     <ui-select-choices
@@ -33,7 +36,16 @@
   <div class="hintbox" ng-if="!indexedFields.length">
     <p>
       <i class="fa fa-danger text-danger"></i>
-      <strong>No Compatible Fields:</strong> The "{{ agg.getIndexPattern().title }}" index pattern does not contain any of the following field types: {{ agg.type.params.byName.field.filterFieldTypes | commaList:false }}
+      <strong
+        i18n-id="common.ui.aggTypes.dateRanges.noCompatibleFieldsLabel"
+        i18n-default-message="No Compatible Fields:"
+      ></strong>
+      <span
+        i18n-id="common.ui.aggTypes.dateRanges.noCompatibleFieldsDescription"
+        i18n-default-message="The {indexPatternTitle} index pattern does not contain any of the following field types:"
+        i18n-values="{ indexPatternTitle: agg.getIndexPattern().title }"
+      ></span>
+      {{ agg.type.params.byName.field.filterFieldTypes | commaList:false }}
     </p>
   </div>
 
diff --git a/src/ui/public/agg_types/controls/filters.html b/src/ui/public/agg_types/controls/filters.html
index b24e6e8398be..62854c1faacc 100644
--- a/src/ui/public/agg_types/controls/filters.html
+++ b/src/ui/public/agg_types/controls/filters.html
@@ -1,16 +1,23 @@
 <div class="form-group">
   <div ng-repeat="filter in agg.params.filters">
     <div class="visEditorAggHeader">
-      <label class="visEditorAggHeader__title visEditorAggHeader__title--grow" for="visEditorFilterInput{{agg.id}}">
-          Filter {{$index + 1}}
-          <span ng-if="filter.label">- {{ filter.label }}</span>
+      <label
+        class="visEditorAggHeader__title visEditorAggHeader__title--grow"
+        for="visEditorFilterInput{{agg.id}}"
+      >
+        <span
+          i18n-id="common.ui.aggTypes.filters.filterLabel"
+          i18n-default-message="Filter {index}"
+          i18n-values="{ index: $index + 1 }"
+        ></span>
+        <span ng-if="filter.label">- {{ filter.label }}</span>
       </label>
 
       <div class="visEditorAggHeader__controls kuiButtonGroup kuiButtonGroup--united">
         <button
           ng-click="showConfig = !showConfig"
           type="button"
-          aria-label="Toggle filter label"
+          aria-label="{{ ::'common.ui.aggTypes.filters.toggleFilterButtonAriaLabel' | i18n: { defaultMessage: 'Toggle filter label' } }}"
           aria-expanded="{{!!showConfig}}"
           aria-controls="visEditorFilterLabel{{agg.id}}"
           class="kuiButton kuiButton--basic kuiButton--small">
@@ -18,7 +25,7 @@
         </button>
         <button
           type="button"
-          aria-label="Remove this filter"
+          aria-label="{{ ::'common.ui.aggTypes.filters.removeFilterButtonAriaLabel' | i18n: { defaultMessage: 'Remove this filter' } }}"
           ng-click="agg.params.filters.splice($index, 1)"
           class="kuiButton kuiButton--danger kuiButton--small">
           <i class="fa fa-times"></i>
@@ -38,11 +45,16 @@
     </div>
 
     <div class="form-group" ng-show="showConfig" id="visEditorFilterLabel{{agg.id}}">
-      <label for="visEditorFilterLabelInput{{agg.id}}">Filter {{$index + 1}} label</label>
+      <label
+        for="visEditorFilterLabelInput{{agg.id}}"
+        i18n-id="common.ui.aggTypes.filters.definiteFilterLabel"
+        i18n-default-message="Filter {index} label"
+        i18n-values="{ index: $index + 1 }"
+      ></label>
       <input
         id="visEditorFilterLabelInput{{agg.id}}"
         ng-model="filter.label"
-        placeholder="Label"
+        placeholder="{{ ::'common.ui.aggTypes.filters.labelPlaceholder' | i18n: { defaultMessage: 'Label' } }}"
         type="text"
         class="form-control"
         name="label{{$index}}">
@@ -54,7 +66,14 @@
 <div class="hintbox" ng-show="aggForm.filterLength.$invalid">
   <p>
     <i class="fa fa-danger text-danger"></i>
-    <strong>Required:</strong> You must specify at least one filter.
+    <strong
+      i18n-id="common.ui.aggTypes.filters.requiredFilterLabel"
+      i18n-default-message="Required:"
+    ></strong>
+    <span
+      i18n-id="common.ui.aggTypes.filters.requiredFilterDescription"
+      i18n-default-message="You must specify at least one filter."
+    ></span>
   </p>
 </div>
 
@@ -64,7 +83,7 @@
   ng-click="agg.params.filters.push({input:{}})"
   class="kuiButton kuiButton--primary kuiButton--fullWidth"
 >
-  Add Filter
+  {{ ::'common.ui.aggTypes.filters.addFilterButtonLabel' | i18n: { defaultMessage: 'Add Filter' } }}
 </button>
 
 <div class="euiSpacer euiSpacer--s"></div>
diff --git a/src/ui/public/agg_types/controls/ip_ranges.html b/src/ui/public/agg_types/controls/ip_ranges.html
index a3a75fd9a575..5450fae62cb1 100644
--- a/src/ui/public/agg_types/controls/ip_ranges.html
+++ b/src/ui/public/agg_types/controls/ip_ranges.html
@@ -1,8 +1,22 @@
 <div>
 
   <p>
-    <button type="button" class="kuiButton kuiButton--secondary" ng-show="agg.params.ipRangeType == 'mask'" ng-click="agg.params.ipRangeType = 'fromTo'">Use From/To</button>
-    <button type="button" class="kuiButton kuiButton--secondary" ng-show="agg.params.ipRangeType != 'mask'" ng-click="agg.params.ipRangeType = 'mask'">Use CIDR Masks</button>
+    <button
+      type="button"
+      class="kuiButton kuiButton--secondary"
+      ng-show="agg.params.ipRangeType == 'mask'"
+      ng-click="agg.params.ipRangeType = 'fromTo'"
+      i18n-id="common.ui.aggTypes.ipRanges.useFromToButtonLabel"
+      i18n-default-message="Use From/To"
+    ></button>
+    <button
+      type="button"
+      class="kuiButton kuiButton--secondary"
+      ng-show="agg.params.ipRangeType != 'mask'"
+      ng-click="agg.params.ipRangeType = 'mask'"
+      i18n-id="common.ui.aggTypes.ipRanges.useCidrMasksButtonLabel"
+      i18n-default-message="Use CIDR Masks"
+    ></button>
   </p>
 
   <div class="euiSpacer euiSpacer--s"></div>
@@ -11,10 +25,18 @@
     <table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.fromTo.length">
       <tr>
         <th scope="col">
-          <label id="visEditorIpRangeFromLabel{{agg.id}}">From</label>
+          <label
+            id="visEditorIpRangeFromLabel{{agg.id}}"
+            i18n-id="common.ui.aggTypes.ipRanges.fromLabel"
+            i18n-default-message="From"
+          ></label>
         </th>
         <th scope="col" colspan="2">
-          <label id="visEditorIpRangeToLabel{{agg.id}}">To</label>
+          <label
+            id="visEditorIpRangeToLabel{{agg.id}}"
+            i18n-id="common.ui.aggTypes.ipRanges.toLabel"
+            i18n-default-message="To"
+          ></label>
         </th>
       </tr>
 
@@ -40,7 +62,7 @@
         <td>
           <button
             type="button"
-            aria-label="Remove this range"
+            aria-label="{{ ::'common.ui.aggTypes.ipRanges.removeRangeAriaLabel' | i18n: { defaultMessage: 'Remove this range' } }}"
             ng-click="agg.params.ranges.fromTo.splice($index, 1)"
             class="kuiButton kuiButton--danger kuiButton--small">
             <i class="fa fa-times" ></i>
@@ -53,23 +75,34 @@
     <div class="hintbox" ng-show="aggForm.rangeLength.$invalid">
       <p>
         <i class="fa fa-danger text-danger"></i>
-        <strong>Required:</strong> You must specify at least one IP range.
+        <strong
+          i18n-id="common.ui.aggTypes.ipRanges.fromTo.requiredIpRangeLabel"
+          i18n-default-message="Required:"
+        ></strong>
+        <span
+          i18n-id="common.ui.aggTypes.ipRanges.fromTo.requiredIpRangeDescription"
+          i18n-default-message="You must specify at least one IP range."
+        ></span>
       </p>
     </div>
 
     <button
       ng-click="agg.params.ranges.fromTo.push({})"
       class="kuiButton kuiButton--primary kuiButton--fullWidth"
-    >
-      Add Range
-    </button>
+      i18n-id="common.ui.aggTypes.ipRanges.fromTo.addRangeButtonLabel"
+      i18n-default-message="Add Range"
+    ></button>
   </div>
 
   <div ng-show="agg.params.ipRangeType == 'mask'">
     <table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.mask.length">
       <tr>
         <th scope="col">
-          <label id="visEditorIpRangeCidrLabel{{agg.id}}">CIDR Mask</label>
+          <label
+            id="visEditorIpRangeCidrLabel{{agg.id}}"
+            i18n-id="common.ui.aggTypes.ipRanges.cidrMaskLabel"
+            i18n-default-message="CIDR Mask"
+          ></label>
         </th>
       </tr>
 
@@ -87,7 +120,7 @@
         <td>
           <button
             type="button"
-            aria-label="Remove this CIDR mask"
+            aria-label="{{ ::'common.ui.aggTypes.ipRanges.removeCidrMaskButtonAriaLabel' | i18n: { defaultMessage: 'Remove this CIDR mask' } }}"
             ng-click="agg.params.ranges.mask.splice($index, 1)"
             class="kuiButton kuiButton--danger kuiButton--small">
             <i class="fa fa-times" ></i>
@@ -100,15 +133,22 @@
     <div class="hintbox" ng-show="aggForm.rangeLength.$invalid">
       <p>
         <i class="fa fa-danger text-danger"></i>
-        <strong>Required:</strong> You must specify at least one IP range.
+        <strong
+          i18n-id="common.ui.aggTypes.ipRanges.cidrMask.requiredIpRangeLabel"
+          i18n-default-message="Required:"
+        ></strong>
+        <span
+          i18n-id="common.ui.aggTypes.ipRanges.cidrMask.requiredIpRangeDescription"
+          i18n-default-message="You must specify at least one IP range."
+        ></span>
       </p>
     </div>
 
     <button
       ng-click="agg.params.ranges.mask.push({})"
       class="kuiButton kuiButton--primary  kuiButton--fullWidth"
-    >
-      Add Range
-    </button>
+      i18n-id="common.ui.aggTypes.ipRanges.cidrMask.addRangeButtonLabel"
+      i18n-default-message="Add Range"
+    ></button>
   </div>
 </div>
diff --git a/src/ui/public/agg_types/controls/min_doc_count.html b/src/ui/public/agg_types/controls/min_doc_count.html
index de5213971477..ded526b61d12 100644
--- a/src/ui/public/agg_types/controls/min_doc_count.html
+++ b/src/ui/public/agg_types/controls/min_doc_count.html
@@ -1,11 +1,17 @@
 <div class="checkbox">
   <label>
-    <input ng-model="agg.params.min_doc_count" type="checkbox">
-    Show empty buckets
+    <input
+      ng-model="agg.params.min_doc_count"
+      type="checkbox"
+    >
+    <span
+      i18n-id="common.ui.aggTypes.showEmptyBucketsLabel"
+      i18n-default-message="Show empty buckets"
+    ></span>
     &nbsp;
     <icon-tip
       position="'right'"
-      content="'Show all buckets, not only the buckets with results'"
+      content="::'common.ui.aggTypes.showEmptyBucketsTooltip' | i18n: { defaultMessage: 'Show all buckets, not only the buckets with results' }"
     ></icon-tip>
   </label>
 </div>
diff --git a/src/ui/public/agg_types/controls/number_interval.html b/src/ui/public/agg_types/controls/number_interval.html
index a281875531d1..a9fc3315e425 100644
--- a/src/ui/public/agg_types/controls/number_interval.html
+++ b/src/ui/public/agg_types/controls/number_interval.html
@@ -1,10 +1,17 @@
 <div class="form-group">
-  <label for="visEditorInterval{{agg.id}}">
-    Minimum Interval
+  <label
+    for="visEditorInterval{{agg.id}}"
+  >
+    <span
+      i18n-id="common.ui.aggTypes.minimumIntervalLabel"
+      i18n-default-message="Minimum Interval"
+    ></span>
     &nbsp;
     <icon-tip
       position="'right'"
-      content="'Interval will be automatically scaled in the event that the provided value creates more buckets than specified by Advanced Setting\'s histogram:maxBars'"
+      content="::'common.ui.aggTypes.minimumIntervalTooltip' | i18n: {
+        defaultMessage: 'Interval will be automatically scaled in the event that the provided value creates more buckets than specified by Advanced Setting\'s {histogramMaxBars}',
+        values: { histogramMaxBars: 'histogram:maxBars'} }"
     ></icon-tip>
   </label>
   <input
diff --git a/src/ui/public/agg_types/controls/order_agg.html b/src/ui/public/agg_types/controls/order_agg.html
index 3c31e51157de..28e1e1323b2d 100644
--- a/src/ui/public/agg_types/controls/order_agg.html
+++ b/src/ui/public/agg_types/controls/order_agg.html
@@ -1,6 +1,10 @@
 <div ng-controller="aggParam.controller">
   <div class="form-group">
-    <label for="visEditorOrder{{agg.id}}">Order By</label>
+    <label
+      for="visEditorOrder{{agg.id}}"
+      i18n-id="common.ui.aggTypes.orderAgg.orderByLabel"
+      i18n-default-message="Order By"
+    ></label>
     <select
       id="visEditorOrder{{agg.id}}"
       name="orderBy"
@@ -12,15 +16,26 @@
         value="{{respAgg.id}}"
         data-test-subj="visEditorOrder{{agg.id}}-{{respAgg.id}}"
         ng-disabled="rejectAgg(respAgg)"
-        ng-selected="agg.params.orderBy === respAgg.id">
-        metric: {{safeMakeLabel(respAgg)}}
-      </option>
-      <option value="custom" data-test-subj="visEditorOrder{{agg.id}}-custom" ng-selected="agg.params.orderBy === 'custom'">
-        Custom Metric
-      </option>
-       <option value="_key" data-test-subj="visEditorOrder{{agg.id}}-key" ng-selected="agg.params.orderBy === '_key'">
-        Alphabetical
+        ng-selected="agg.params.orderBy === respAgg.id"
+        i18n-id="common.ui.aggTypes.orderAgg.metricLabel"
+        i18n-default-message="metric: {metric}"
+        i18n-values="{ metric: safeMakeLabel(respAgg) }"
+      >
       </option>
+      <option
+        value="custom"
+        data-test-subj="visEditorOrder{{agg.id}}-custom"
+        ng-selected="agg.params.orderBy === 'custom'"
+        i18n-id="common.ui.aggTypes.orderAgg.customMetricLabel"
+        i18n-default-message="Custom Metric"
+      ></option>
+       <option
+        value="_key"
+        data-test-subj="visEditorOrder{{agg.id}}-key"
+        ng-selected="agg.params.orderBy === '_key'"
+        i18n-id="common.ui.aggTypes.orderAgg.alphabeticalLabel"
+        i18n-default-message="Alphabetical"
+      ></option>
     </select>
   </div>
   <div ng-show="agg.params.orderAgg" class="visEditorAgg__subAgg">
diff --git a/src/ui/public/agg_types/controls/order_and_size.html b/src/ui/public/agg_types/controls/order_and_size.html
index 0daee545ea14..06731a67f08a 100644
--- a/src/ui/public/agg_types/controls/order_and_size.html
+++ b/src/ui/public/agg_types/controls/order_and_size.html
@@ -1,7 +1,11 @@
 <div>
   <div class="visEditorAgg__formRow--flex">
     <div ng-if="agg.type.params.byName.order && aggParam.options" class="form-group">
-      <label for="visEditorOrderByOrder{{agg.id}}">Order</label>
+      <label
+        for="visEditorOrderByOrder{{agg.id}}"
+        i18n-id="common.ui.aggTypes.orderLabel"
+        i18n-default-message="Order"
+      ></label>
       <select
         id="visEditorOrderByOrder{{agg.id}}"
         name="order"
@@ -12,7 +16,11 @@
       </select>
     </div>
     <div class="form-group">
-      <label for="visEditorOrderBySize{{agg.id}}">Size</label>
+      <label
+        for="visEditorOrderBySize{{agg.id}}"
+        i18n-id="common.ui.aggTypes.sizeLabel"
+        i18n-default-message="Size"
+      ></label>
       <input
         id="visEditorOrderBySize{{agg.id}}"
         name="size"
diff --git a/src/ui/public/agg_types/controls/other_bucket.html b/src/ui/public/agg_types/controls/other_bucket.html
index a846157049f9..441c7b5641dd 100644
--- a/src/ui/public/agg_types/controls/other_bucket.html
+++ b/src/ui/public/agg_types/controls/other_bucket.html
@@ -8,19 +8,23 @@
           name="showOther"
           ng-model="agg.params.otherBucket"
         >
-        Group other values in separate bucket
+        <span
+          i18n-id="common.ui.aggTypes.otherBucket.groupValuesLabel"
+          i18n-default-message="Group other values in separate bucket"
+        ></span>
         <icon-tip
           position="'right'"
-          content="'Values not in the top N are grouped in this bucket. To include documents with missing values, enable \'Show missing values\'.'"
+          content="::'common.ui.aggTypes.otherBucket.groupValuesTooltip' | i18n: { defaultMessage: 'Values not in the top N are grouped in this bucket. To include documents with missing values, enable \'Show missing values\'.' }"
         ></icon-tip>
       </label>
     </div>
   </div>
   <div class="visEditorAgg__formRow--flex" ng-if="agg.params.otherBucket">
     <div class="form-group">
-      <label>
-        Label for other bucket
-      </label>
+      <label
+        i18n-id="common.ui.aggTypes.otherBucket.labelForOtherBucketLabel"
+        i18n-default-message="Label for other bucket"
+      ></label>
       <div>
         <input
           type="text"
@@ -40,19 +44,23 @@
           ng-model="agg.params.missingBucket"
           ng-disabled="agg.params.field.type !== 'string'"
         >
-        Show missing values
+        <span
+          i18n-id="common.ui.aggTypes.otherBucket.showMissingValuesLabel"
+          i18n-default-message="Show missing values"
+        ></span>
         <icon-tip
           position="'right'"
-          content="'Only works for fields of type \'string\'. When enabled, include documents with missing values in the search. If this bucket is in the top N, it appears in the chart.  If not in the top N, and you enable \'Group other values in separate bucket\', Elasticsearch adds the missing values to the \'other\' bucket.'"
+          content="::'common.ui.aggTypes.otherBucket.showMissingValuesTooltip' | i18n: { defaultMessage: 'Only works for fields of type \'string\'. When enabled, include documents with missing values in the search. If this bucket is in the top N, it appears in the chart. If not in the top N, and you enable \'Group other values in separate bucket\', Elasticsearch adds the missing values to the \'other\' bucket.' }"
         ></icon-tip>
       </label>
     </div>
   </div>
   <div class="visEditorAgg__formRow--flex" ng-show="agg.params.missingBucket">
     <div class="form-group">
-      <label>
-        Label for missing values
-      </label>
+      <label
+        i18n-id="common.ui.aggTypes.otherBucket.labelForMissingValuesLabel"
+        i18n-default-message="Label for missing values"
+      ></label>
       <div>
         <input
           type="text"
diff --git a/src/ui/public/agg_types/controls/percentile_ranks.html b/src/ui/public/agg_types/controls/percentile_ranks.html
index f9d27a0e9602..72192ac6375d 100644
--- a/src/ui/public/agg_types/controls/percentile_ranks.html
+++ b/src/ui/public/agg_types/controls/percentile_ranks.html
@@ -1,5 +1,9 @@
 <div class="form-group">
-  <label id="visEditorPercentileRanksLabel{{agg.id}}">Values</label>
+  <label
+    id="visEditorPercentileRanksLabel{{agg.id}}"
+    i18n-id="common.ui.aggTypes.valuesLabel"
+    i18n-default-message="Values"
+  ></label>
   <kbn-number-list
     ng-model="agg.params.values"
     unit-name="value"
diff --git a/src/ui/public/agg_types/controls/percentiles.html b/src/ui/public/agg_types/controls/percentiles.html
index 458e38afcc34..3a7afed6ac30 100644
--- a/src/ui/public/agg_types/controls/percentiles.html
+++ b/src/ui/public/agg_types/controls/percentiles.html
@@ -1,5 +1,9 @@
 <div class="form-group">
-  <label id="visEditorPercentileLabel{{agg.id}}">Percents</label>
+  <label
+    id="visEditorPercentileLabel{{agg.id}}"
+    i18n-id="common.ui.aggTypes.percentsLabel"
+    i18n-default-message="Percents"
+  ></label>
   <kbn-number-list
     ng-model="agg.params.percents"
     unit-name="percent"
diff --git a/src/ui/public/agg_types/controls/precision.html b/src/ui/public/agg_types/controls/precision.html
index be61c32e88a4..021b50f20bf1 100644
--- a/src/ui/public/agg_types/controls/precision.html
+++ b/src/ui/public/agg_types/controls/precision.html
@@ -1,6 +1,10 @@
 <div class="visEditorAgg__formRow--flex" ng-controller="agg.type.params.byName.precision.controller">
   <div ng-if="!agg.params.autoPrecision" class="form-group">
-    <label for="visEditorMapPrecision{{agg.id}}">Precision</label>
+    <label
+      for="visEditorMapPrecision{{agg.id}}"
+      i18n-id="common.ui.aggTypes.precisionLabel"
+      i18n-default-message="Precision"
+    ></label>
     <div class="visEditorAgg__formRow--flex">
       <input
         id="visEditorMapPrecision{{agg.id}}"
@@ -21,19 +25,29 @@
 
 <div>
   <label>
-    <input type="checkbox"
-    name="autoPrecision"
-    ng-model="agg.params.autoPrecision">
-    Change precision on map zoom
+    <input
+      type="checkbox"
+      name="autoPrecision"
+      ng-model="agg.params.autoPrecision"
+    >
+    <span
+      i18n-id="common.ui.aggTypes.changePrecisionLabel"
+      i18n-default-message="Change precision on map zoom"
+    ></span>
   </label>
 </div>
 
 <div>
   <label>
-    <input type="checkbox"
-           name="useGeocentroid"
-           ng-model="agg.params.useGeocentroid">
-    Place markers off grid (use geocentroid)
+    <input
+      type="checkbox"
+      name="useGeocentroid"
+      ng-model="agg.params.useGeocentroid"
+    >
+    <span
+      i18n-id="common.ui.aggTypes.placeMarkersOffGridLabel"
+      i18n-default-message="Place markers off grid (use geocentroid)"
+    ></span>
   </label>
 </div>
 
@@ -45,12 +59,13 @@
       name="isFilteredByCollar"
       ng-model="agg.params.isFilteredByCollar"
     >
-
-    Only request data around map extent
-
+    <span
+      i18n-id="common.ui.aggTypes.onlyRequestDataAroundMapExtentLabel"
+      i18n-default-message="Only request data around map extent"
+    ></span>
     <icon-tip
       position="'right'"
-      content="'Apply geo_bounding_box filter aggregation to narrow the subject area to the map view box with collar'"
+      content="::'common.ui.aggTypes.onlyRequestDataAroundMapExtentTooltip' | i18n: { defaultMessage: 'Apply geo_bounding_box filter aggregation to narrow the subject area to the map view box with collar' }"
     ></icon-tip>
   </label>
 </div>
diff --git a/src/ui/public/agg_types/controls/ranges.html b/src/ui/public/agg_types/controls/ranges.html
index 94084d803e09..4255c671628e 100644
--- a/src/ui/public/agg_types/controls/ranges.html
+++ b/src/ui/public/agg_types/controls/ranges.html
@@ -1,10 +1,18 @@
 <table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.length">
   <tr>
     <th scope="col">
-      <label id="visEditorRangeFrom{{agg.id}}">From</label>
+      <label
+        id="visEditorRangeFrom{{agg.id}}"
+        i18n-id="common.ui.aggTypes.ranges.fromColumnLabel"
+        i18n-default-message="From"
+      ></label>
     </th>
     <th scope="col" colspan="2">
-      <label id="visEditorRangeTo{{agg.id}}">To</label>
+      <label
+        id="visEditorRangeTo{{agg.id}}"
+        i18n-id="common.ui.aggTypes.ranges.toColumnLabel"
+        i18n-default-message="To"
+      ></label>
     </th>
   </tr>
 
@@ -44,13 +52,20 @@
 <div class="hintbox" ng-show="aggForm.rangeLength.$invalid">
   <p>
     <i class="fa fa-danger text-danger"></i>
-    <strong>Required:</strong> You must specify at least one range.
+    <strong
+      i18n-id="common.ui.aggTypes.ranges.requiredRangeTitle"
+      i18n-default-message="Required:"
+    ></strong>
+    <span
+      i18n-id="common.ui.aggTypes.ranges.requiredRangeDescription"
+      i18n-default-message="You must specify at least one range."
+    ></span>
   </p>
 </div>
 
 <button
   ng-click="agg.params.ranges.push({})"
   class="kuiButton kuiButton--primary kuiButton--fullWidth"
->
-  Add Range
-</button>
+  i18n-id="common.ui.aggTypes.ranges.addRangeButtonLabel"
+  i18n-default-message="Add Range"
+></button>
diff --git a/src/ui/public/agg_types/controls/raw_json.html b/src/ui/public/agg_types/controls/raw_json.html
index cfb6fceb9824..f7d3f78a1f66 100644
--- a/src/ui/public/agg_types/controls/raw_json.html
+++ b/src/ui/public/agg_types/controls/raw_json.html
@@ -1,10 +1,13 @@
 <div class="form-group regex">
     <span class="hintbox-label">
       <label for="visEditorRawJson{{agg.id}}">
-        JSON Input
+        <span
+          i18n-id="common.ui.aggTypes.jsonInputLabel"
+          i18n-default-message="JSON Input"
+        ></span>
         <icon-tip
           position="'right'"
-          content="'Any JSON formatted properties you add here will be merged with the elasticsearch aggregation definition for this section. For example \'shard_size\' on a terms aggregation.'"
+          content="::'common.ui.aggTypes.jsonInputTooltip' | i18n: { defaultMessage: 'Any JSON formatted properties you add here will be merged with the elasticsearch aggregation definition for this section. For example \'shard_size\' on a terms aggregation.' }"
         ></icon-tip>
       </label>
     </span>
diff --git a/src/ui/public/agg_types/controls/regular_expression.html b/src/ui/public/agg_types/controls/regular_expression.html
index e47e922b90f3..4422c341b28a 100644
--- a/src/ui/public/agg_types/controls/regular_expression.html
+++ b/src/ui/public/agg_types/controls/regular_expression.html
@@ -1,6 +1,11 @@
 <div ng-if="!aggParam.disabled(agg)">
   <div class="form-group regex">
-    <label for="visEditorRegexInput{{agg.id}}{{aggParam.name}}">{{ aggParam.name | label }} Pattern</label>
+    <label
+      for="visEditorRegexInput{{agg.id}}{{aggParam.name}}"
+      i18n-id="common.ui.aggTypes.paramNamePatternLabel"
+      i18n-default-message="{aggParamName} Pattern"
+      i18n-values="{ aggParamName: (aggParam.name | label) }"
+    ></label>
     <input
       id="visEditorRegexInput{{agg.id}}{{aggParam.name}}"
       type="text"
diff --git a/src/ui/public/agg_types/controls/sub_agg.html b/src/ui/public/agg_types/controls/sub_agg.html
index 88f404657b5f..bcd3bc53690f 100644
--- a/src/ui/public/agg_types/controls/sub_agg.html
+++ b/src/ui/public/agg_types/controls/sub_agg.html
@@ -1,6 +1,10 @@
 <div ng-controller="aggParam.controller">
   <div class="form-group">
-    <label for="visEditorSubAggMetric{{agg.id}}">Metric</label>
+    <label
+      for="visEditorSubAggMetric{{agg.id}}"
+      i18n-id="common.ui.aggTypes.metricLabel"
+      i18n-default-message="Metric"
+    ></label>
     <select
       id="visEditorSubAggMetric{{agg.id}}"
       name="metricAgg"
@@ -14,12 +18,17 @@
         value="{{respAgg.id}}"
         ng-if="respAgg.type.name !== agg.type.name"
         ng-disabled="isDisabledAgg(respAgg)"
-        ng-selected="agg.params.metricAgg === respAgg.id">
-        metric: {{safeMakeLabel(respAgg)}}
-      </option>
-      <option value="custom" ng-selected="agg.params.metricAgg === 'custom'">
-        Custom Metric
-      </option>
+        ng-selected="agg.params.metricAgg === respAgg.id"
+        i18n-id="common.ui.aggTypes.definiteMetricLabel"
+        i18n-default-message="metric: {safeMakeLabel}"
+        i18n-values="{ safeMakeLabel: safeMakeLabel(respAgg) }"
+      ></option>
+      <option
+        value="custom"
+        ng-selected="agg.params.metricAgg === 'custom'"
+        i18n-id="common.ui.aggTypes.customMetricLabel"
+        i18n-default-message="Custom Metric"
+      ></option>
     </select>
   </div>
   <div ng-if="agg.params.metricAgg === 'custom'" class="visEditorAgg__subAgg">
diff --git a/src/ui/public/agg_types/controls/time_interval.html b/src/ui/public/agg_types/controls/time_interval.html
index 4a980f39c727..4a28b2df8b8c 100644
--- a/src/ui/public/agg_types/controls/time_interval.html
+++ b/src/ui/public/agg_types/controls/time_interval.html
@@ -1,11 +1,26 @@
 <div class="form-group">
-  <label for="visEditorInterval{{agg.id}}">
-    Interval
+  <label
+    for="visEditorInterval{{agg.id}}"
+  >
+    <span
+      i18n-id="common.ui.aggTypes.timeIntervalLabel"
+      i18n-default-message="Interval"
+    ></span>
     <icon-tip
-      ng-show="agg.buckets.getInterval().scaled"
+      ng-if="agg.buckets.getInterval().scaled && (agg.buckets.getInterval().scale <= 1)"
       type="'alert'"
       position="'right'"
-      content="'This interval creates {{ agg.buckets.getInterval().scale > 1 ? 'buckets that are too large' : 'too many buckets' }} to show in the selected time range, so it has been scaled to {{ agg.buckets.getInterval().description }}'"
+      content="'common.ui.aggTypes.intervalCreatesTooManyBucketsTooltip' | i18n: {
+        defaultMessage: 'This interval creates too many buckets to show in the selected time range, so it has been scaled to {bucketDescription}',
+        values: { bucketDescription: agg.buckets.getInterval().description } }"
+    ></icon-tip>
+    <icon-tip
+      ng-if="agg.buckets.getInterval().scaled && (agg.buckets.getInterval().scale > 1)"
+      type="'alert'"
+      position="'right'"
+      content="'common.ui.aggTypes.intervalCreatesTooLargeBucketsTooltip' | i18n: {
+        defaultMessage: 'This interval creates buckets that are too large to show in the selected time range, so it has been scaled to {bucketDescription}',
+        values: { bucketDescription: agg.buckets.getInterval().description } }"
     ></icon-tip>
   </label>
   <select
@@ -17,10 +32,14 @@
     ng-options="opt as opt.display for opt in aggParam.options.raw | filter: optionEnabled"
     class="form-control"
     name="interval">
-    <option value="">-- select a valid interval --</option>
+    <option
+      value=""
+      i18n-id="common.ui.aggTypes.selectTimeIntervalLabel"
+      i18n-default-message="-- select a valid interval --"
+    ></option>
   </select>
   <input
-    aria-label="Custom interval"
+    aria-label="{{ ::'common.ui.aggTypes.customTimeIntervalAriaLabel' | i18n: { defaultMessage: 'Custom interval' } }}"
     type="text"
     name="customInterval"
     ng-model="agg.params.customInterval"
diff --git a/src/ui/public/agg_types/controls/top_aggregate_and_size.html b/src/ui/public/agg_types/controls/top_aggregate_and_size.html
index f4962a8ca0e1..c96f7570081e 100644
--- a/src/ui/public/agg_types/controls/top_aggregate_and_size.html
+++ b/src/ui/public/agg_types/controls/top_aggregate_and_size.html
@@ -1,9 +1,12 @@
 <div ng-controller="aggParam.controller" class="visEditorAgg__formRow--flex">
   <div class="form-group visEditorAgg__formRow--split">
     <label for="visEditorTopHitsAggregate{{agg.id}}">
-      Aggregate with
+      <span
+        i18n-id="common.ui.aggTypes.aggregateWithLabel"
+        i18n-default-message="Aggregate with"
+      ></span>
       <icon-tip
-        content="'Choose a strategy for combining multiple hits or a multi-valued field into a single metric'"
+        content="::'common.ui.aggTypes.aggregateWithTooltip' | i18n: { defaultMessage: 'Choose a strategy for combining multiple hits or a multi-valued field into a single metric' }"
       ></icon-tip>
     </label>
 
@@ -18,9 +21,12 @@
   </div>
   <div class="form-group visEditorAgg__formRow--split">
     <label for="visEditorTopHitsSize{{agg.id}}">
-      Size
+      <span
+        i18n-id="common.ui.aggTypes.sizeLabel"
+        i18n-default-message="Size"
+      ></span>
       <icon-tip
-        content="'Request top-K hits. Multiple hits will be combined via \'aggregate with\'.'"
+        content="::'common.ui.aggTypes.sizeTooltip' | i18n: { defaultMessage: 'Request top-K hits. Multiple hits will be combined via \'aggregate with\'.' }"
       ></icon-tip>
     </label>
 
diff --git a/src/ui/public/agg_types/controls/top_sort.html b/src/ui/public/agg_types/controls/top_sort.html
index a90ef5e82223..bf3951c79ec9 100644
--- a/src/ui/public/agg_types/controls/top_sort.html
+++ b/src/ui/public/agg_types/controls/top_sort.html
@@ -1,19 +1,22 @@
 <div class="form-group">
-  <label>
-    Sort On
-  </label>
+  <label
+    i18n-id="common.ui.aggTypes.sortOnLabel"
+    i18n-default-message="Sort On"
+    ></label>
 
   <ui-select
     name="field"
     sortField
-    title="Sort on"
+    title="{{ ::'common.ui.aggTypes.sortOnTooltip' | i18n: { defaultMessage: 'Sort on' } }}"
     class="visEditorAggSelect__select"
     ng-show="sortFieldOptions.length"
     ng-model="agg.params.sortField"
     uis-open-close="limit = 100"
     auto-select-if-only-one="sortFieldOptions"
   >
-    <ui-select-match placeholder="Select a field">
+    <ui-select-match
+      placeholder="{{ ::'common.ui.aggTypes.sortOnPlaceholder' | i18n: { defaultMessage: 'Select a field' } }}"
+    >
       {{$select.selected.displayName}}
     </ui-select-match>
     <ui-select-choices
@@ -27,9 +30,11 @@
 </div>
 
 <div class="form-group">
-  <label for="visEditorTopSort{{agg.id}}">
-    Order
-  </label>
+  <label
+    for="visEditorTopSort{{agg.id}}"
+    i18n-id="common.ui.aggTypes.orderLabel"
+    i18n-default-message="Order"
+  ></label>
 
   <select
      id="visEditorTopSort{{agg.id}}"