Translate metric_vis (#23187) (#23561)

* Translate metric_vis

* Close span tag

* Remove space code

* Update ids

* Translations for color mode list

.i18nrc.json

@@ -4,6 +4,7 @@
     "inputControl":"src/core_plugins/input_control_vis",
     "kbn": "src/core_plugins/kibana",
     "markdownVis": "src/core_plugins/markdown_vis",
+    "metricVis": "src/core_plugins/metric_vis",
     "statusPage": "src/core_plugins/status_page",
     "xpack.idxMgmt": "x-pack/plugins/index_management"
   },

src/core_plugins/metric_vis/public/metric_vis.js

@@ -32,16 +32,16 @@ import { MetricVisComponent } from './metric_vis_controller';
 // register the provider with the visTypes registry
 VisTypesRegistryProvider.register(MetricVisProvider);
 
-function MetricVisProvider(Private) {
+function MetricVisProvider(Private, i18n) {
   const VisFactory = Private(VisFactoryProvider);
 
   // return the visType object, which kibana will use to display and configure new
   // Vis object of this type.
   return VisFactory.createReactVisualization({
     name: 'metric',
-    title: 'Metric',
+    title: i18n('metricVis.metricTitle', { defaultMessage: 'Metric' }),
     icon: 'visMetric',
-    description: 'Display a calculation as a single number',
+    description: i18n('metricVis.metricDescription', { defaultMessage: 'Display a calculation as a single number' }),
     category: CATEGORY.DATA,
     visConfig: {
       component: MetricVisComponent,
@@ -73,7 +73,20 @@ function MetricVisProvider(Private) {
     },
     editorConfig: {
       collections: {
-        metricColorMode: ['None', 'Labels', 'Background'],
+        metricColorMode: [
+          {
+            id: 'None',
+            label: i18n('metricVis.colorModes.noneOptionLabel', { defaultMessage: 'None' })
+          },
+          {
+            id: 'Labels',
+            label: i18n('metricVis.colorModes.labelsOptionLabel', { defaultMessage: 'Labels' })
+          },
+          {
+            id: 'Background',
+            label: i18n('metricVis.colorModes.backgroundOptionLabel', { defaultMessage: 'Background' })
+          }
+        ],
         colorSchemas: Object.keys(vislibColorMaps),
       },
       optionsTemplate: '<metric-vis-params></metric-vis-params>',
@@ -81,7 +94,7 @@ function MetricVisProvider(Private) {
         {
           group: 'metrics',
           name: 'metric',
-          title: 'Metric',
+          title: i18n('metricVis.schemas.metricTitle', { defaultMessage: 'Metric' }),
           min: 1,
           aggFilter: [
             '!std_dev', '!geo_centroid',
@@ -92,7 +105,7 @@ function MetricVisProvider(Private) {
         }, {
           group: 'buckets',
           name: 'group',
-          title: 'Split Group',
+          title: i18n('metricVis.schemas.splitGroupTitle', { defaultMessage: 'Split Group' }),
           min: 0,
           max: 1,
           aggFilter: ['!geohash_grid', '!filter']

src/core_plugins/metric_vis/public/metric_vis_params.html

@@ -1,8 +1,12 @@
 <div class="kuiSideBarSection">
 
   <div class="kuiSideBarFormRow">
-    <label class="kuiSideBarFormRow__label" for="percentageMode">
+    <label
-      Percentage Mode
+      class="kuiSideBarFormRow__label"
+      for="percentageMode"
+      i18n-id="metricVis.params.percentageModeLabel"
+      i18n-default-message="Percentage Mode"
+    >
     </label>
     <div class="kuiSideBarFormRow__control">
       <input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="editorState.params.metric.percentageMode">
@@ -10,8 +14,12 @@
   </div>
 
   <div class="kuiSideBarFormRow">
-    <label class="kuiSideBarFormRow__label" for="showLabels">
+    <label
-      Show Labels
+      class="kuiSideBarFormRow__label"
+      for="showLabels"
+      i18n-id="metricVis.params.showLabelsLabel"
+      i18n-default-message="Show Labels"
+    >
     </label>
     <div class="kuiSideBarFormRow__control">
       <input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="editorState.params.metric.labels.show">
@@ -24,7 +32,7 @@
         kbn-accessible-click
         aria-expanded="{{!!showColorRange}}"
         aria-controls="metricOptionsRanges"
-        aria-label="Toggle range options"
+        aria-label="{{'metricVis.params.ranges.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle range options' } }}"
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="showColorRange = !showColorRange"
       >
@@ -33,8 +41,11 @@
         ng-class="{ 'fa-caret-down': showColorRange, 'fa-caret-right': !showColorRange }"
         class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
       ></span>
-        <span class="kuiSideBarCollapsibleTitle__text">
+        <span
-        Ranges
+          class="kuiSideBarCollapsibleTitle__text"
+          i18n-id="metricVis.params.rangesTitle"
+          i18n-default-message="Ranges"
+        >
       </span>
       </div>
     </div>
@@ -43,11 +54,21 @@
       <div class="kuiSideBarSection">
         <table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.metric.colorsRange.length">
           <tr>
-            <th>
+            <th scope="col">
-              <label id="metricOptionsCustomRangeFrom">From</label>
+              <label
+                id="metricOptionsCustomRangeFrom"
+                i18n-id="metricVis.params.ranges.fromLabel"
+                i18n-default-message="From"
+              >
+              </label>
             </th>
-            <th colspan="2">
+            <th scope="col" colspan="2">
-              <label id="metricOptionsCustomRangeTo">To</label>
+              <label
+                id="metricOptionsCustomRangeTo"
+                i18n-id="metricVis.params.ranges.toLabel"
+                i18n-default-message="To"
+              >
+              </label>
             </th>
           </tr>
 
@@ -89,14 +110,21 @@
         <div class="hintbox" ng-show="!editorState.params.metric.colorsRange.length">
           <p>
             <i class="fa fa-danger text-danger"></i>
-            <strong>Required:</strong> You must specify at least one range.
+            <span
+              i18n-id="metricVis.params.ranges.warning.specifyRangeDescription"
+              i18n-default-message="{strongRequiredDescripion} You must specify at least one range."
+              i18n-values="{ strongRequiredDescripion: '<strong>' + editorState.requiredDescription + '</strong>' }"
+            >
+            </span>
           </p>
         </div>
 
         <div
           ng-click="addRange()"
-          class="kuiButton kuiButton--primary kuiButton--fullWidth">
+          class="kuiButton kuiButton--primary kuiButton--fullWidth"
-          Add Range
+          i18n-id="metricVis.params.ranges.addRangeButtonLabel"
+          i18n-default-message="Add Range"
+        >
         </div>
       </div>
     </div>
@@ -107,7 +135,7 @@
         kbn-accessible-click
         aria-expanded="{{!!showColorOptions}}"
         aria-controls="metricOptionsColors"
-        aria-label="Toggle color options"
+        aria-label="{{'metricVis.params.color.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle color options' } }}"
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="showColorOptions = !showColorOptions"
       >
@@ -119,29 +147,40 @@
         }"
         class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
       ></span>
-        <span class="kuiSideBarCollapsibleTitle__text">
+        <span
-        Color Options
+          class="kuiSideBarCollapsibleTitle__text"
+          i18n-id="metricVis.params.color.colorOptionsTitle"
+          i18n-default-message="Color Options"
+        >
       </span>
       </div>
     </div>
     <div id="metricOptionsColors" ng-if="showColorOptions" class="kuiSideBarCollapsibleSection">
       <div class="kuiSideBarSection">
         <div class="kuiSideBarFormRow" ng-show="editorState.params.metric.colorsRange.length > 1">
-          <label class="kuiSideBarFormRow__label" for="metricColorMode">
+          <label
-            Use Color For
+            class="kuiSideBarFormRow__label"
+            for="metricColorMode"
+            i18n-id="metricVis.params.color.useForLabel"
+            i18n-default-message="Use Color For"
+          >
           </label>
           <div class="kuiSideBarFormRow__control">
             <select
               id="metricColorMode"
               class="kuiSelect kuiSideBarSelect"
               ng-model="editorState.params.metric.metricColorMode"
-              ng-options="mode for mode in collections.metricColorMode"
+              ng-options="mode.id as mode.label for mode in collections.metricColorMode"
             ></select>
           </div>
         </div>
         <div class="kuiSideBarFormRow" ng-show="editorState.params.metric.metricColorMode !== 'None'">
-          <label class="kuiSideBarFormRow__label" for="colorSchema">
+          <label
-            Color Schema
+            class="kuiSideBarFormRow__label"
+            for="colorSchema"
+            i18n-id="metricVis.params.color.schemaLabel"
+            i18n-default-message="Color Schema"
+          >
           </label>
           <div class="kuiSideBarFormRow__control">
             <select
@@ -151,12 +190,20 @@
               ng-options="mode for mode in collections.colorSchemas"
             ></select>
           </div>
-          <div class="text-info text-center" ng-show="customColors" ng-click="resetColors()">reset colors</div>
+          <div class="text-info text-center" ng-show="customColors" ng-click="resetColors()"
+            i18n-id="metricVis.params.color.resetColorDescription"
+            i18n-default-message="reset colors"
+          >
+          </div>
         </div>
 
         <div class="kuiSideBarFormRow"  ng-show="editorState.params.metric.metricColorMode !== 'None'">
-          <label class="kuiSideBarFormRow__label" for="invertColors">
+          <label
-            Reverse Color Schema
+            class="kuiSideBarFormRow__label"
+            for="invertColors"
+            i18n-id="metricVis.params.color.reverseSchemaLabel"
+            i18n-default-message="Reverse Color Schema"
+          >
           </label>
           <div class="kuiSideBarFormRow__control">
             <input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.metric.invertColors">
@@ -172,7 +219,7 @@
         kbn-accessible-click
         aria-expanded="{{!!showStyle}}"
         aria-controls="metricOptionsStyle"
-        aria-label="Toggle style options"
+        aria-label="{{'metricVis.params.style.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle style options' } }}"
         class="kuiSideBarCollapsibleTitle__label"
         ng-click="showStyle = !showStyle"
       >
@@ -184,8 +231,11 @@
           }"
           class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
         ></span>
-        <span class="kuiSideBarCollapsibleTitle__text">
+        <span
-          Style
+          class="kuiSideBarCollapsibleTitle__text"
+          i18n-id="metricVis.params.style.styleTitle"
+          i18n-default-message="Style"
+        >
         </span>
       </div>
     </div>
@@ -195,7 +245,12 @@
 
         <div class="kuiSideBarFormRow">
           <label class="kuiSideBarFormRow__label" for="metricFontSize">
-            Font Size (<span ng-bind="editorState.params.metric.style.fontSize"></span>pt)
+            <span
+              i18n-id="metricVis.params.style.fontSizeLabel"
+              i18n-default-message="Font Size ({fontSize}pt)"
+              i18n-values="{ fontSize: editorState.params.metric.style.fontSize }"
+            >
+            </span>
           </label>
           <div class="kuiSideBarFormRow__control">
             <input id="metricFontSize" type="range" ng-model="editorState.params.metric.style.fontSize" class="form-control" min="12" max="120" />

src/core_plugins/metric_vis/public/metric_vis_params.js

@@ -22,7 +22,7 @@ import metricVisParamsTemplate from './metric_vis_params.html';
 import _ from 'lodash';
 const module = uiModules.get('kibana');
 
-module.directive('metricVisParams', function () {
+module.directive('metricVisParams', function (i18n) {
   return {
     restrict: 'E',
     template: metricVisParamsTemplate,
@@ -80,6 +80,7 @@ module.directive('metricVisParams', function () {
         $scope.customColors = true;
       });
 
+      $scope.editorState.requiredDescription = i18n('metricVis.params.ranges.warning.requiredDescription', { defaultMessage: 'Required:' });
     }
   };
 });