[ML] translate job select (#27803)

[ML] translate job select

x-pack/plugins/ml/public/components/job_select_list/job_select_button.html

@@ -1,5 +1,9 @@
 <div style='display: flex;' class="ml-job-select-btn-container">
-  <div class="ml-job-select-btn-label">Job</div>
+  <div
+    class="ml-job-select-btn-label"
+    i18n-id="xpack.ml.jobSelectButton.jobTitle"
+    i18n-default-message="Job"
+  ></div>
   <div style="flex:0 0 auto;">
     <div  popover-placement="bottom"
           popover-placement="bottom"
@@ -7,8 +11,13 @@
           popover-append-to-body="false"
           popover-trigger="click"
           class="ml-job-select-btn"
-          tooltip="{{description.txt}} selected"
-          aria-label="Job selection menu"
+          tooltip="{{ 'xpack.ml.jobSelectButton.jobSelectionMenuButtonTooltip' | i18n: {
+            defaultMessage: '{description} selected',
+            values: {
+              description: description.txt,
+            }
+          } }}"
+          aria-label="{{:: 'xpack.ml.jobSelectButton.jobSelectionMenuButtonAriaLabel' | i18n: { defaultMessage: 'Job selection menu' } }}"
           ng-click='createMenu()'
           kbn-accessible-click>
     <span class="ml-job-select-btn-text">{{description.txt}}</span>

x-pack/plugins/ml/public/components/job_select_list/job_select_list.html

@@ -1,10 +1,12 @@
 <div class='ml-job-selector'>
-  <div class="header">
-    Job Selection
-  </div>
+  <div
+    class="header"
+    i18n-id="xpack.ml.jobSelectList.jobSelectionTitle"
+    i18n-default-message="Job Selection"
+  ></div>
 
   <ml-loading-indicator
-    label="Loading jobs"
+    label="{{ ::'xpack.ml.jobSelectList.loadingJobsLabel' | i18n: { defaultMessage: 'Loading jobs'} }}"
     is-loading="noJobsCreated===undefined"
   />
   <div class="select-list" ng-show='noJobsCreated!==undefined'>
@@ -14,9 +16,12 @@
           ng-if="singleSelection !== true"
           type="checkbox"
           ng-checked="allGroupsSelected"
-          aria-label="Select all groups checkbox. Total count {{selected.groups.length}}."
+          aria-label="{{ 'xpack.ml.jobSelectList.selectAllGroupsCheckboxAriaLabel' | i18n: {
+            defaultMessage: 'Select all groups checkbox. Total count {selectedGroupsLength}.',
+            values: { selectedGroupsLength: selected.groups.length }
+          } }}"
           ng-click="toggleAllGroupsSelection()" />
-        Groups
+          {{ ::'xpack.ml.jobSelectList.groupsTitle' | i18n: { defaultMessage: 'Groups' } }}
       </div>
       <div class="list-section">
         <div class='group' ng-repeat="group in selected.groups">
@@ -25,7 +30,10 @@
               <label class="kuiFormLabel">
                 <div >
                   <input
-                    aria-label="Group ID {{group.id}}"
+                    aria-label="{{ 'xpack.ml.jobSelectList.groupIdAriaLabel' | i18n: {
+                      defaultMessage: 'Group ID {groupId}',
+                      values: { groupId: group.id }
+                    } }}"
                     ng-if="singleSelection !== true && group.selectable === true" type="checkbox"
                     ng-model="group.selected"
                     ng-click="toggleGroupSelection()" />
@@ -54,9 +62,12 @@
     <div class="list-section-title" ng-if="singleSelection !== true">
       <input type="checkbox"
         ng-checked="allJobsSelected"
-        aria-label="Select all jobs checkbox. Total count {{selected.jobs.length}}."
+        aria-label="{{ 'xpack.ml.jobSelectList.selectAllJobsCheckboxAriaLabel' | i18n: {
+          defaultMessage: 'Select all jobs checkbox. Total count {selectedJobsLength}.',
+          values: { selectedJobsLength: selected.jobs.length }
+        } }}"
         ng-click="toggleAllJobsSelection()" />
-      Jobs
+        {{ ::'xpack.ml.jobSelectList.jobsTitle' | i18n: { defaultMessage: 'Jobs' } }}
     </div>
     <div class="list-section" ng-class="{'list-section-single': singleSelection}">
       <div class='job-row' ng-repeat="job in selected.jobs">
@@ -73,7 +84,13 @@
                   value="{{job.id}}"
                   ng-model="$parent.$parent.selectedJobRadio"
                   ng-disabled='job.disabled' />
-                <span ng-class="{'disabled-job': job.disabled}" aria-label="Job ID {{job.id}}">{{job.id}}</span>
+                <span
+                  ng-class="{'disabled-job': job.disabled}"
+                  aria-label="{{ 'xpack.ml.jobSelectList.jobIdAriaLabel' | i18n: {
+                    defaultMessage: 'Job ID {jobId}',
+                    values: { jobId: job.id }
+                  } }}"
+                >{{job.id}}</span>
               </span>
             </div>
             <div>
@@ -82,7 +99,10 @@
               </div>
               <div
                 class='gant-bar'
-                aria-label="time range {{job.timeRange.label}}"
+                aria-label="{{ 'xpack.ml.jobSelectList.timeRangeAriaLabel' | i18n: {
+                  defaultMessage: 'time range {jobTimeRangeLabel}',
+                  values: { jobTimeRangeLabel: job.timeRange.label }
+                } }}"
                 ng-class="{'disabled-job': job.disabled, 'gant-bar-running': job.running}"
                 tooltip='{{job.timeRange.label}}'
                 tooltip-placement="bottom"
@@ -102,19 +122,25 @@
     <button
       ng-click="apply()"
       class="kuiButton kuiButton--primary"
-      aria-label="Apply"
+      aria-label="{{ ::'xpack.ml.jobSelectList.applyButtonAriaLabel' | i18n: { defaultMessage: 'Apply'} }}"
       ng-disabled="selectedCount===0"
-      >
-      Apply
-    </button>
-    <button ng-click="closePopover()" class="kuiButton kuiButton--primary" aria-label="Cancel">Cancel</button>
+      i18n-id="xpack.ml.jobSelectList.applyButtonLabel"
+      i18n-default-message="Apply"
+    ></button>
+    <button
+      ng-click="closePopover()"
+      class="kuiButton kuiButton--primary"
+      aria-label="{{ ::'xpack.ml.jobSelectList.cancelButtonAriaLabel' | i18n: { defaultMessage: 'Cancel'} }}"
+      i18n-id="xpack.ml.jobSelectList.cancelButtonLabel"
+      i18n-default-message="Cancel"
+    ></button>
   </div>
 
   <div class='apply-time-range'>
     <label class="kuiFormLabel">
     <input type="checkbox"
       ng-model="applyTimeRange"/>
-      Also apply time range
+      {{ ::'xpack.ml.jobSelectList.applyTimeRangeLabel' | i18n: { defaultMessage: 'Also apply time range' } }}
   </label>
   </div>
 

x-pack/plugins/ml/public/components/job_select_list/job_select_list_directive.js

@@ -31,7 +31,7 @@ module.directive('mlJobSelectList', function (Private) {
     replace: true,
     transclude: true,
     template,
-    controller: function ($scope) {
+    controller: function ($scope, i18n) {
       const mlJobSelectService = Private(JobSelectServiceProvider);
       $scope.jobs = [];
       $scope.groups = [];
@@ -208,7 +208,13 @@ module.directive('mlJobSelectList', function (Private) {
 
           const fromString = timeRange.fromMoment.format('MMM Do YYYY, HH:mm');
           const toString =  timeRange.toMoment.format('MMM Do YYYY, HH:mm');
-          timeRange.label = `${fromString} to ${toString}`;
+          timeRange.label = i18n('xpack.ml.jobSelectList.groupTimeRangeLabel', {
+            defaultMessage: '{fromString} to {toString}',
+            values: {
+              fromString,
+              toString,
+            }
+          });
 
           group.timeRange = timeRange;
           return group;
@@ -356,7 +362,13 @@ module.directive('mlJobSelectList', function (Private) {
 
             const fromString = job.timeRange.fromMoment.format('MMM Do YYYY, HH:mm');
             const toString = job.timeRange.toMoment.format('MMM Do YYYY, HH:mm');
-            job.timeRange.label = `${fromString} to ${toString}`;
+            job.timeRange.label = i18n('xpack.ml.jobSelectList.jobTimeRangeLabel', {
+              defaultMessage: '{fromString} to {toString}',
+              values: {
+                fromString,
+                toString,
+              }
+            });
           }
         });
 

x-pack/plugins/ml/public/components/job_select_list/job_select_service.js

@@ -15,7 +15,7 @@ import { mlJobService } from 'plugins/ml/services/job_service';
 
 let jobSelectService = undefined;
 
-export function JobSelectServiceProvider($rootScope, globalState) {
+export function JobSelectServiceProvider($rootScope, globalState, i18n) {
 
   function checkGlobalState() {
     if (globalState.ml === undefined) {
@@ -42,8 +42,9 @@ export function JobSelectServiceProvider($rootScope, globalState) {
 
       // if there are no valid ids, warn and then select the first job
       if (validIds.length === 0) {
-        const warningText = `No jobs selected, auto selecting first job`;
-        toastNotifications.addWarning(warningText);
+        toastNotifications.addWarning(i18n('xpack.ml.jobSelect.noJobsSelectedWarningMessage', {
+          defaultMessage: 'No jobs selected, auto selecting first job',
+        }));
 
         if (mlJobService.jobs.length) {
           validIds = [mlJobService.jobs[0].job_id];
@@ -89,9 +90,14 @@ export function JobSelectServiceProvider($rootScope, globalState) {
 
   function warnAboutInvalidJobIds(invalidIds) {
     if (invalidIds.length > 0) {
-      const warningText = (invalidIds.length === 1) ? `Requested job ${invalidIds} does not exist` :
-        `Requested jobs ${invalidIds} do not exist`;
-      toastNotifications.addWarning(warningText);
+      toastNotifications.addWarning(i18n('xpack.ml.jobSelect.requestedJobsDoesNotExistWarningMessage', {
+        defaultMessage: `Requested
+{invalidIdsLength, plural, one {job {invalidIds} does not exist} other {jobs {invalidIds} do not exist}}`,
+        values: {
+          invalidIdsLength: invalidIds.length,
+          invalidIds,
+        }
+      }));
     }
   }
 
@@ -102,7 +108,9 @@ export function JobSelectServiceProvider($rootScope, globalState) {
       return sum + ((job.groups === undefined) ? 1 : job.groups.length);
     }, 0);
     if (jobs.length === count) {
-      txt = 'All jobs';
+      txt = i18n('xpack.ml.jobSelect.allJobsDescription', {
+        defaultMessage: 'All jobs',
+      });
     } else {
       // not all jobs have been selected
       // add up how many jobs belong to groups and how many don't
@@ -137,13 +145,25 @@ export function JobSelectServiceProvider($rootScope, globalState) {
         txt = wholeGroups[0];
         if (wholeGroups.length > 1 || groupLessJobs > 0) {
           const total = (wholeGroups.length - 1) + groupLessJobs;
-          txt += ` and ${total} other${(total > 1 ? 's' : '')}`;
+          txt = i18n('xpack.ml.jobSelect.wholeGroupDescription', {
+            defaultMessage: '{wholeGroup} and {total, plural, zero {# other} one {# other} other {# others}}',
+            values: {
+              wholeGroup: wholeGroups[0],
+              total,
+            }
+          });
         }
       } else {
         // otherwise just list the job ids
         txt = splitJobId(jobs[0]).job;
         if (jobs.length > 1) {
-          txt += ` and ${jobs.length - 1} other${(jobs.length > 2 ? 's' : '')}`;
+          txt = i18n('xpack.ml.jobSelect.jobDescription', {
+            defaultMessage: '{jobId} and {jobsAmount} {jobsAmount, plural, zero {# other} one {# other} other {# others}}',
+            values: {
+              jobId: splitJobId(jobs[0]).job,
+              jobsAmount: jobs.length - 1,
+            }
+          });
         }
       }
     }