From 4b2272781dc0214debf1654d81c6858386ff5e51 Mon Sep 17 00:00:00 2001 From: Bamieh Date: Wed, 26 Dec 2018 17:49:53 +0200 Subject: [PATCH 1/8] feature(ml): localize components --- .../confirm_modal/confirm_modal.html | 4 +- .../confirm_modal/confirm_modal_controller.js | 19 +++- .../field_title_bar/field_title_bar.js | 5 +- .../field_type_icon/field_type_icon.js | 33 +++++-- .../form_filter_input_directive.js | 8 +- .../full_time_range_selector.html | 10 ++- .../influencers_list/influencers_list.js | 22 ++++- .../job_group_select/job_group_select.html | 22 +++-- .../public/components/nav_menu/get_crumbs.js | 86 +++++++++++++++++++ .../public/components/nav_menu/nav_menu.html | 25 ++++-- .../ml/public/components/nav_menu/nav_menu.js | 25 +----- .../validate_job/validate_job_view.js | 38 ++++++-- 12 files changed, 239 insertions(+), 58 deletions(-) create mode 100644 x-pack/plugins/ml/public/components/nav_menu/get_crumbs.js diff --git a/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal.html b/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal.html index c4505e464dfbe..0650412e15f50 100644 --- a/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal.html +++ b/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal.html @@ -6,7 +6,7 @@ ng-click="ok()" ng-disabled="(saveLock === true)" class="kuiButton kuiButton--primary" - aria-label="OK"> + aria-label="{{okAriaLabel}}"> {{okLabel}} diff --git a/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal_controller.js b/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal_controller.js index 15518e89b8426..345e9b9f5c19a 100644 --- a/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal_controller.js +++ b/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal_controller.js @@ -9,7 +9,7 @@ import { uiModules } from 'ui/modules'; const module = uiModules.get('apps/ml'); -module.controller('MlConfirmModal', function ($scope, $modalInstance, params) { +module.controller('MlConfirmModal', function ($scope, $modalInstance, params, i18n) { $scope.okFunc = params.ok; $scope.cancelFunc = params.cancel; @@ -17,8 +17,21 @@ module.controller('MlConfirmModal', function ($scope, $modalInstance, params) { $scope.message = params.message || ''; $scope.title = params.title || ''; - $scope.okLabel = params.okLabel || 'OK'; - $scope.cancelLabel = params.cancelLabel || 'Cancel'; + $scope.okAriaLabel = i18n('xpack.ml.confirmModal.okAriaLabel', { + defaultMessage: 'OK', + }); + + $scope.okLabel = params.okLabel || i18n('xpack.ml.confirmModal.okLabel', { + defaultMessage: 'OK', + }); + + $scope.cancelLabel = params.cancelLabel || i18n('xpack.ml.confirmModal.cancelLabel', { + defaultMessage: 'Cancel', + }); + + $scope.cancelAriaLabel = i18n('xpack.ml.confirmModal.cancelAriaLabel', { + defaultMessage: 'Cancel', + }); $scope.hideCancel = params.hideCancel || false; diff --git a/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.js b/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.js index 350d005ccd3e2..95f6d734ce976 100644 --- a/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.js +++ b/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.js @@ -10,6 +10,7 @@ import React from 'react'; import { EuiText, EuiToolTip } from '@elastic/eui'; import { FieldTypeIcon } from '../field_type_icon'; +import { i18n } from '@kbn/i18n'; export function FieldTitleBar({ card }) { // don't render and fail gracefully if card prop isn't set @@ -26,7 +27,9 @@ export function FieldTitleBar({ card }) { classNames.push(card.type); } - const fieldName = card.fieldName || 'document count'; + const fieldName = card.fieldName || i18n.translate('i18nxpack.ml.FieldTitleBar.fieldName', { + defaultMessage: 'document count' + }); return ( diff --git a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js index 5b1868d0598d5..11bfeda704539 100644 --- a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js +++ b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js @@ -8,6 +8,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { EuiToolTip } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; // don't use something like plugins/ml/../common // because it won't work with the jest tests @@ -20,35 +21,51 @@ export function FieldTypeIcon({ tooltipEnabled = false, type }) { switch (type) { case ML_JOB_FIELD_TYPES.BOOLEAN: - ariaLabel = 'boolean type'; + ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.booleanTypeAriaLabel', { + defaultMessage: 'boolean type' + }); iconClass = 'fa-adjust'; break; case ML_JOB_FIELD_TYPES.DATE: - ariaLabel = 'date type'; + ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.dateTypeAriaLabel', { + defaultMessage: 'date type' + }); iconClass = 'fa-clock-o'; break; case ML_JOB_FIELD_TYPES.NUMBER: - ariaLabel = 'number type'; + ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.numberTypeAriaLabel', { + defaultMessage: 'number type' + }); iconChar = '#'; break; case ML_JOB_FIELD_TYPES.GEO_POINT: - ariaLabel = 'geo_point type'; + ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.geo_pointTypeAriaLabel', { + defaultMessage: 'geo_point type' + }); iconClass = 'fa-globe'; break; case ML_JOB_FIELD_TYPES.KEYWORD: - ariaLabel = 'keyword type'; + ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.keywordTypeAriaLabel', { + defaultMessage: 'keyword type' + }); iconChar = 't'; break; case ML_JOB_FIELD_TYPES.TEXT: - ariaLabel = 'text type'; + ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.textTypeAriaLabel', { + defaultMessage: 'text type' + }); iconClass = 'fa-file-text-o'; break; case ML_JOB_FIELD_TYPES.IP: - ariaLabel = 'IP type'; + ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.IPTypeAriaLabel', { + defaultMessage: 'IP type' + }); iconClass = 'fa-laptop'; break; case ML_JOB_FIELD_TYPES.UNKNOWN: - ariaLabel = 'Unknown type'; + ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.UnknownTypeAriaLabel', { + defaultMessage: 'Unknown type' + }); iconChar = '?'; break; default: diff --git a/x-pack/plugins/ml/public/components/form_filter_input/form_filter_input_directive.js b/x-pack/plugins/ml/public/components/form_filter_input/form_filter_input_directive.js index 0cdfc9f897362..240184817ee27 100644 --- a/x-pack/plugins/ml/public/components/form_filter_input/form_filter_input_directive.js +++ b/x-pack/plugins/ml/public/components/form_filter_input/form_filter_input_directive.js @@ -12,7 +12,7 @@ import angular from 'angular'; import { uiModules } from 'ui/modules'; const module = uiModules.get('apps/ml'); -module.directive('mlFormFilterInput', function () { +module.directive('mlFormFilterInput', function (i18n) { return { scope: { placeholder: '@?', @@ -25,7 +25,11 @@ module.directive('mlFormFilterInput', function () { replace: false, template, link(scope) { - scope.placeholder = angular.isDefined(scope.placeholder) ? scope.placeholder : 'Filter'; + const placeholderText = i18n('xpack.ml.formFilterInputPlaceholder', { + defaultMessage: 'Filter', + }); + + scope.placeholder = angular.isDefined(scope.placeholder) ? scope.placeholder : placeholderText; } }; }); diff --git a/x-pack/plugins/ml/public/components/full_time_range_selector/full_time_range_selector.html b/x-pack/plugins/ml/public/components/full_time_range_selector/full_time_range_selector.html index 605ff4bf366e0..c11fb8fab91f4 100644 --- a/x-pack/plugins/ml/public/components/full_time_range_selector/full_time_range_selector.html +++ b/x-pack/plugins/ml/public/components/full_time_range_selector/full_time_range_selector.html @@ -3,7 +3,11 @@ type="button" ng-disabled="disabled" class="euiButton euiButton--primary euiButton--small euiButton--fill"> - - Use full {{indexPattern.title}} data - + + diff --git a/x-pack/plugins/ml/public/components/influencers_list/influencers_list.js b/x-pack/plugins/ml/public/components/influencers_list/influencers_list.js index eedac15ef0442..e393feca6b8ea 100644 --- a/x-pack/plugins/ml/public/components/influencers_list/influencers_list.js +++ b/x-pack/plugins/ml/public/components/influencers_list/influencers_list.js @@ -20,6 +20,7 @@ import { EuiTitle, EuiToolTip } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; import { abbreviateWholeNumber } from 'plugins/ml/formatters/abbreviate_whole_number'; import { getSeverity } from 'plugins/ml/../common/util/anomaly_utils'; @@ -28,8 +29,18 @@ import { getSeverity } from 'plugins/ml/../common/util/anomaly_utils'; function getTooltipContent(maxScoreLabel, totalScoreLabel) { return ( -

Maximum anomaly score: {maxScoreLabel}

-

Total anomaly score: {totalScoreLabel}

+

+

+

+

); } @@ -124,7 +135,12 @@ export function InfluencersList({ influencers }) { -

No influencers found

+

+ +

diff --git a/x-pack/plugins/ml/public/components/job_group_select/job_group_select.html b/x-pack/plugins/ml/public/components/job_group_select/job_group_select.html index 430abe4ff8fe5..d8557cc6b23dc 100644 --- a/x-pack/plugins/ml/public/components/job_group_select/job_group_select.html +++ b/x-pack/plugins/ml/public/components/job_group_select/job_group_select.html @@ -8,19 +8,31 @@ tagging='mlGroupSelect.createNewItem' append-to-body=true > - + + > {{$item.id}} -
+
+ + +
- - Other jobs in this group: {{group.count}} - +
diff --git a/x-pack/plugins/ml/public/components/nav_menu/get_crumbs.js b/x-pack/plugins/ml/public/components/nav_menu/get_crumbs.js new file mode 100644 index 0000000000000..8e99c0650c9c8 --- /dev/null +++ b/x-pack/plugins/ml/public/components/nav_menu/get_crumbs.js @@ -0,0 +1,86 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + + +export +const getAllCrumbNames = (i18n) => ({ + jobs: { + label: i18n('xpack.ml.navMenu.breadcrumbs.jobs', { defaultMessage: 'Job Management' }), + url: '#/jobs', + }, + new_job: { + label: i18n('xpack.ml.navMenu.breadcrumbs.new_job', { defaultMessage: 'Create New Job' }), + url: '#/jobs/new_job', + }, + single_metric: { + label: i18n('xpack.ml.navMenu.breadcrumbs.single_metric', { defaultMessage: 'Single Metric Job' }), + url: '', + }, + multi_metric: { + label: i18n('xpack.ml.navMenu.breadcrumbs.multi_metric', { defaultMessage: 'Multi Metric job' }), + url: '', + }, + population: { + label: i18n('xpack.ml.navMenu.breadcrumbs.population', { defaultMessage: 'Population job' }), + url: '', + }, + advanced: { + label: i18n('xpack.ml.navMenu.breadcrumbs.advanced', { defaultMessage: 'Advanced Job Configuration' }), + url: '', + }, + datavisualizer: { + label: i18n('xpack.ml.navMenu.breadcrumbs.datavisualizer', { defaultMessage: 'Data Visualizer' }), + url: '', + }, + filedatavisualizer: { + label: i18n('xpack.ml.navMenu.breadcrumbs.filedatavisualizer', { defaultMessage: 'File Data Visualizer (Experimental)' }), + url: '', + }, + explorer: { + label: i18n('xpack.ml.navMenu.breadcrumbs.explorer', { defaultMessage: 'Anomaly Explorer' }), + url: '#/explorer', + }, + timeseriesexplorer: { + label: i18n('xpack.ml.navMenu.breadcrumbs.timeseriesexplorer', { defaultMessage: 'Single Metric Viewer' }), + url: '#/timeseriesexplorer', + }, + settings: { + label: i18n('xpack.ml.navMenu.breadcrumbs.settings', { defaultMessage: 'Settings' }), + url: '#/settings', + }, + calendars_list: { + label: i18n('xpack.ml.navMenu.breadcrumbs.calendars_list', { defaultMessage: 'Calendar Management' }), + url: '#/settings/calendars_list', + }, + new_calendar: { + label: i18n('xpack.ml.navMenu.breadcrumbs.new_calendar', { defaultMessage: 'New Calendar' }), + url: '#/settings/calendars_list/new_calendar', + }, + edit_calendar: { + label: i18n('xpack.ml.navMenu.breadcrumbs.edit_calendar', { defaultMessage: 'Edit Calendar' }), + url: '#/settings/calendars_list/edit_calendar', + }, + filter_lists: { + label: i18n('xpack.ml.navMenu.breadcrumbs.filter_lists', { defaultMessage: 'Filter Lists' }), + url: '#/settings/filter_lists', + }, + new_filter_list: { + label: i18n('xpack.ml.navMenu.breadcrumbs.new_filter_list', { defaultMessage: 'New Filter List' }), + url: '#/settings/filter_lists/new', + }, + edit_filter_list: { + label: i18n('xpack.ml.navMenu.breadcrumbs.edit_filter_list', { defaultMessage: 'Edit Filter List' }), + url: '#/settings/filter_lists/edit', + }, +}); + +export +const getBaseBreadcrumbs = (i18n) => [ + { + label: i18n('xpack.ml.navMenu.breadcrumbs.mlBase', { defaultMessage: 'Machine Learning' }), + url: '#/', + } +]; diff --git a/x-pack/plugins/ml/public/components/nav_menu/nav_menu.html b/x-pack/plugins/ml/public/components/nav_menu/nav_menu.html index 345ed3bddb97e..7d78521aa19f6 100644 --- a/x-pack/plugins/ml/public/components/nav_menu/nav_menu.html +++ b/x-pack/plugins/ml/public/components/nav_menu/nav_menu.html @@ -16,23 +16,38 @@
- Job Management + - Anomaly Explorer + - Single Metric Viewer + - Data Visualizer + - Settings +
diff --git a/x-pack/plugins/ml/public/components/nav_menu/nav_menu.js b/x-pack/plugins/ml/public/components/nav_menu/nav_menu.js index da2915450449f..96617f6606030 100644 --- a/x-pack/plugins/ml/public/components/nav_menu/nav_menu.js +++ b/x-pack/plugins/ml/public/components/nav_menu/nav_menu.js @@ -11,10 +11,11 @@ import uiRouter from 'ui/routes'; import chrome from 'ui/chrome'; import { isFullLicense } from '../../license/check_license'; +import { getAllCrumbNames, getBaseBreadcrumbs } from './get_crumbs'; import { uiModules } from 'ui/modules'; const module = uiModules.get('apps/ml'); -module.directive('mlNavMenu', function (config) { +module.directive('mlNavMenu', function (config, i18n) { return { restrict: 'E', transclude: true, @@ -43,27 +44,9 @@ module.directive('mlNavMenu', function (config) { const isK7Design = chrome.getUiSettingsClient().get('k7design', false); if (isK7Design === false) { // Breadcrumbs - const crumbNames = { - jobs: { label: 'Job Management', url: '#/jobs' }, - new_job: { label: 'Create New Job', url: '#/jobs/new_job' }, - single_metric: { label: 'Single Metric Job', url: '' }, - multi_metric: { label: 'Multi Metric job', url: '' }, - population: { label: 'Population job', url: '' }, - advanced: { label: 'Advanced Job Configuration', url: '' }, - datavisualizer: { label: 'Data Visualizer', url: '' }, - filedatavisualizer: { label: 'File Data Visualizer (Experimental)', url: '' }, - explorer: { label: 'Anomaly Explorer', url: '#/explorer' }, - timeseriesexplorer: { label: 'Single Metric Viewer', url: '#/timeseriesexplorer' }, - settings: { label: 'Settings', url: '#/settings' }, - calendars_list: { label: 'Calendar Management', url: '#/settings/calendars_list' }, - new_calendar: { label: 'New Calendar', url: '#/settings/calendars_list/new_calendar' }, - edit_calendar: { label: 'Edit Calendar', url: '#/settings/calendars_list/edit_calendar' }, - filter_lists: { label: 'Filter Lists', url: '#/settings/filter_lists' }, - new_filter_list: { label: 'New Filter List', url: '#/settings/filter_lists/new' }, - edit_filter_list: { label: 'Edit Filter List', url: '#/settings/filter_lists/edit' }, - }; - const breadcrumbs = [{ label: 'Machine Learning', url: '#/' }]; + const crumbNames = getAllCrumbNames(i18n); + const breadcrumbs = getBaseBreadcrumbs(i18n); // get crumbs from url const crumbs = uiRouter.getBreadcrumbs(); diff --git a/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js b/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js index adfd66bdd7722..3a43751644b25 100644 --- a/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js +++ b/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js @@ -27,6 +27,8 @@ import { EuiText } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; + import { metadata } from 'ui/metadata'; // metadata.branch corresponds to the version used in documentation links. const jobTipsUrl = `https://www.elastic.co/guide/en/kibana/${metadata.branch}/job-tips.html`; @@ -101,6 +103,7 @@ Message.propTypes = { }) }; + const Callout = ({ message }) => ( - Validate Job + {!isDisabled && this.state.ui.isModalVisible && } > {this.state.data.messages.map( (m, i) => )} - Job validation performs certain checks against job configurations and underlying source data - and provides specific advice on how to adjust settings that are more likely to produce insightful results. + - For more information, see Machine Learning Job Tips. + + + + ) + }} + /> } From 850ee93a4c8ab053a3c2203e5a26c96015731e2e Mon Sep 17 00:00:00 2001 From: Bamieh Date: Tue, 1 Jan 2019 21:03:17 +0200 Subject: [PATCH 2/8] fix xpack.i18n localization strings --- .../field_title_bar/field_title_bar.js | 2 +- .../field_type_icon/field_type_icon.js | 16 ++++++++-------- .../components/validate_job/validate_job_view.js | 10 +++++----- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.js b/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.js index 95f6d734ce976..a88edd40d27da 100644 --- a/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.js +++ b/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.js @@ -27,7 +27,7 @@ export function FieldTitleBar({ card }) { classNames.push(card.type); } - const fieldName = card.fieldName || i18n.translate('i18nxpack.ml.FieldTitleBar.fieldName', { + const fieldName = card.fieldName || i18n.translate('xpack.ml.FieldTitleBar.fieldName', { defaultMessage: 'document count' }); diff --git a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js index 11bfeda704539..e70b4d1d28a2f 100644 --- a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js +++ b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js @@ -21,49 +21,49 @@ export function FieldTypeIcon({ tooltipEnabled = false, type }) { switch (type) { case ML_JOB_FIELD_TYPES.BOOLEAN: - ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.booleanTypeAriaLabel', { + ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.booleanTypeAriaLabel', { defaultMessage: 'boolean type' }); iconClass = 'fa-adjust'; break; case ML_JOB_FIELD_TYPES.DATE: - ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.dateTypeAriaLabel', { + ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.dateTypeAriaLabel', { defaultMessage: 'date type' }); iconClass = 'fa-clock-o'; break; case ML_JOB_FIELD_TYPES.NUMBER: - ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.numberTypeAriaLabel', { + ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.numberTypeAriaLabel', { defaultMessage: 'number type' }); iconChar = '#'; break; case ML_JOB_FIELD_TYPES.GEO_POINT: - ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.geo_pointTypeAriaLabel', { + ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.geo_pointTypeAriaLabel', { defaultMessage: 'geo_point type' }); iconClass = 'fa-globe'; break; case ML_JOB_FIELD_TYPES.KEYWORD: - ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.keywordTypeAriaLabel', { + ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.keywordTypeAriaLabel', { defaultMessage: 'keyword type' }); iconChar = 't'; break; case ML_JOB_FIELD_TYPES.TEXT: - ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.textTypeAriaLabel', { + ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.textTypeAriaLabel', { defaultMessage: 'text type' }); iconClass = 'fa-file-text-o'; break; case ML_JOB_FIELD_TYPES.IP: - ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.IPTypeAriaLabel', { + ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.IPTypeAriaLabel', { defaultMessage: 'IP type' }); iconClass = 'fa-laptop'; break; case ML_JOB_FIELD_TYPES.UNKNOWN: - ariaLabel = i18n.translate('i18nxpack.ml.FieldTypeIcon.UnknownTypeAriaLabel', { + ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.UnknownTypeAriaLabel', { defaultMessage: 'Unknown type' }); iconChar = '?'; diff --git a/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js b/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js index 3a43751644b25..238aeedcde619 100644 --- a/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js +++ b/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js @@ -234,7 +234,7 @@ class ValidateJob extends Component { isLoading={this.state.ui.isLoading} > @@ -243,7 +243,7 @@ class ValidateJob extends Component { From face179ece9800939784276b4d3c9fadeef7a4f6 Mon Sep 17 00:00:00 2001 From: Alexandr Ogarkov Date: Mon, 14 Jan 2019 18:37:21 +0300 Subject: [PATCH 3/8] Resolve review comments --- .../confirm_modal/confirm_modal.html | 4 +- .../confirm_modal/confirm_modal_controller.js | 12 +-- .../field_title_bar/field_title_bar.js | 2 +- .../field_type_icon/field_type_icon.js | 45 ++++++---- .../field_type_icon/field_type_icon.test.js | 12 +-- .../field_type_icon_directive.js | 5 +- .../form_filter_input/form_filter_input.html | 7 +- .../form_filter_input_directive.js | 12 ++- .../full_time_range_selector.html | 3 +- .../influencers_list/influencers_list.js | 24 +++--- .../job_group_select/job_group_select.html | 12 +-- .../job_group_select/job_group_select.js | 6 +- .../public/components/nav_menu/get_crumbs.js | 86 ------------------- .../public/components/nav_menu/nav_menu.html | 12 +-- .../ml/public/components/nav_menu/nav_menu.js | 77 ++++++++++++++++- .../validate_job/validate_job_view.js | 32 ++++--- .../validate_job/validate_job_view.test.js | 4 +- 17 files changed, 182 insertions(+), 173 deletions(-) delete mode 100644 x-pack/plugins/ml/public/components/nav_menu/get_crumbs.js diff --git a/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal.html b/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal.html index 0650412e15f50..d048eded3f1be 100644 --- a/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal.html +++ b/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal.html @@ -6,7 +6,7 @@ ng-click="ok()" ng-disabled="(saveLock === true)" class="kuiButton kuiButton--primary" - aria-label="{{okAriaLabel}}"> + aria-label="{{ ::'xpack.ml.confirmModal.okButtonAriaLabel' | i18n: {defaultMessage: 'Ok'} }}"> {{okLabel}} diff --git a/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal_controller.js b/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal_controller.js index 345e9b9f5c19a..a83b94bfe83f2 100644 --- a/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal_controller.js +++ b/x-pack/plugins/ml/public/components/confirm_modal/confirm_modal_controller.js @@ -17,19 +17,11 @@ module.controller('MlConfirmModal', function ($scope, $modalInstance, params, i1 $scope.message = params.message || ''; $scope.title = params.title || ''; - $scope.okAriaLabel = i18n('xpack.ml.confirmModal.okAriaLabel', { + $scope.okLabel = params.okLabel || i18n('xpack.ml.confirmModal.okButtonLabel', { defaultMessage: 'OK', }); - $scope.okLabel = params.okLabel || i18n('xpack.ml.confirmModal.okLabel', { - defaultMessage: 'OK', - }); - - $scope.cancelLabel = params.cancelLabel || i18n('xpack.ml.confirmModal.cancelLabel', { - defaultMessage: 'Cancel', - }); - - $scope.cancelAriaLabel = i18n('xpack.ml.confirmModal.cancelAriaLabel', { + $scope.cancelLabel = params.cancelLabel || i18n('xpack.ml.confirmModal.cancelButtonLabel', { defaultMessage: 'Cancel', }); diff --git a/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.js b/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.js index a88edd40d27da..99f9991f1f035 100644 --- a/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.js +++ b/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.js @@ -27,7 +27,7 @@ export function FieldTitleBar({ card }) { classNames.push(card.type); } - const fieldName = card.fieldName || i18n.translate('xpack.ml.FieldTitleBar.fieldName', { + const fieldName = card.fieldName || i18n.translate('xpack.ml.fieldTitleBar.documentCountLabel', { defaultMessage: 'document count' }); diff --git a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js index e70b4d1d28a2f..4db0dd65b7d17 100644 --- a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js +++ b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js @@ -8,62 +8,70 @@ import PropTypes from 'prop-types'; import React from 'react'; import { EuiToolTip } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; // don't use something like plugins/ml/../common // because it won't work with the jest tests import { ML_JOB_FIELD_TYPES } from '../../../common/constants/field_types'; +import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; -export function FieldTypeIcon({ tooltipEnabled = false, type }) { +export const FieldTypeIcon = injectI18n(function FieldTypeIcon({ tooltipEnabled = false, type, intl }) { let ariaLabel = ''; let iconClass = ''; let iconChar = ''; switch (type) { case ML_JOB_FIELD_TYPES.BOOLEAN: - ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.booleanTypeAriaLabel', { + ariaLabel = intl.formatMessage({ + id: 'xpack.ml.fieldTypeIcon.booleanTypeAriaLabel', defaultMessage: 'boolean type' }); iconClass = 'fa-adjust'; break; case ML_JOB_FIELD_TYPES.DATE: - ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.dateTypeAriaLabel', { + ariaLabel = intl.formatMessage({ + id: 'xpack.ml.fieldTypeIcon.dateTypeAriaLabel', defaultMessage: 'date type' }); iconClass = 'fa-clock-o'; break; case ML_JOB_FIELD_TYPES.NUMBER: - ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.numberTypeAriaLabel', { + ariaLabel = intl.formatMessage({ + id: 'xpack.ml.fieldTypeIcon.numberTypeAriaLabel', defaultMessage: 'number type' }); iconChar = '#'; break; case ML_JOB_FIELD_TYPES.GEO_POINT: - ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.geo_pointTypeAriaLabel', { - defaultMessage: 'geo_point type' - }); + ariaLabel = intl.formatMessage({ + id: 'xpack.ml.fieldTypeIcon.geoPointTypeAriaLabel', + defaultMessage: '{geoPointParam} type' + }, { geoPointParam: 'geo_point' }); iconClass = 'fa-globe'; break; case ML_JOB_FIELD_TYPES.KEYWORD: - ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.keywordTypeAriaLabel', { + ariaLabel = intl.formatMessage({ + id: 'xpack.ml.fieldTypeIcon.keywordTypeAriaLabel', defaultMessage: 'keyword type' }); iconChar = 't'; break; case ML_JOB_FIELD_TYPES.TEXT: - ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.textTypeAriaLabel', { + ariaLabel = intl.formatMessage({ + id: 'xpack.ml.fieldTypeIcon.textTypeAriaLabel', defaultMessage: 'text type' }); iconClass = 'fa-file-text-o'; break; case ML_JOB_FIELD_TYPES.IP: - ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.IPTypeAriaLabel', { + ariaLabel = intl.formatMessage({ + id: 'xpack.ml.fieldTypeIcon.ipTypeAriaLabel', defaultMessage: 'IP type' }); iconClass = 'fa-laptop'; break; case ML_JOB_FIELD_TYPES.UNKNOWN: - ariaLabel = i18n.translate('xpack.ml.FieldTypeIcon.UnknownTypeAriaLabel', { + ariaLabel = intl.formatMessage({ + id: 'xpack.ml.fieldTypeIcon.unknownTypeAriaLabel', defaultMessage: 'Unknown type' }); iconChar = '?'; @@ -90,15 +98,22 @@ export function FieldTypeIcon({ tooltipEnabled = false, type }) { // to support having another component directly inside the tooltip anchor // see https://github.com/elastic/eui/issues/839 return ( - + } + > ); } return ; -} -FieldTypeIcon.propTypes = { +}); +FieldTypeIcon.WrappedComponent.propTypes = { tooltipEnabled: PropTypes.bool, type: PropTypes.string }; diff --git a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.test.js b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.test.js index 975319f942739..73bada80e2b28 100644 --- a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.test.js +++ b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.test.js @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { mount, shallow } from 'enzyme'; +import { mountWithIntl, shallowWithIntl } from 'enzyme'; import React from 'react'; import { FieldTypeIcon } from './field_type_icon'; @@ -13,22 +13,22 @@ import { ML_JOB_FIELD_TYPES } from '../../../common/constants/field_types'; describe('FieldTypeIcon', () => { test(`don't render component when type is undefined`, () => { - const wrapper = shallow(); + const wrapper = shallowWithIntl(); expect(wrapper.isEmptyRender()).toBeTruthy(); }); test(`don't render component when type doesn't match a field type`, () => { - const wrapper = shallow(); + const wrapper = shallowWithIntl(); expect(wrapper.isEmptyRender()).toBeTruthy(); }); test(`render component when type matches a field type`, () => { - const wrapper = shallow(); + const wrapper = shallowWithIntl(); expect(wrapper).toMatchSnapshot(); }); test(`render with tooltip and test hovering`, () => { - const wrapper = mount(); + const wrapper = mountWithIntl(); const container = wrapper.find({ className: 'field-type-icon-container' }); expect(wrapper.find('EuiToolTip').children()).toHaveLength(1); @@ -41,7 +41,7 @@ describe('FieldTypeIcon', () => { }); test(`update component`, () => { - const wrapper = shallow(); + const wrapper = shallowWithIntl(); expect(wrapper.isEmptyRender()).toBeTruthy(); wrapper.setProps({ type: ML_JOB_FIELD_TYPES.IP }); expect(wrapper).toMatchSnapshot(); diff --git a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon_directive.js b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon_directive.js index 283f610d24226..a134ebfcb6912 100644 --- a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon_directive.js +++ b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon_directive.js @@ -10,6 +10,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { FieldTypeIcon } from './field_type_icon.js'; +import { I18nProvider } from '@kbn/i18n/react'; import { uiModules } from 'ui/modules'; const module = uiModules.get('apps/ml'); @@ -34,7 +35,9 @@ module.directive('mlFieldTypeIcon', function () { }; ReactDOM.render( - React.createElement(FieldTypeIcon, props), + + {React.createElement(FieldTypeIcon, props)} + , element[0] ); } diff --git a/x-pack/plugins/ml/public/components/form_filter_input/form_filter_input.html b/x-pack/plugins/ml/public/components/form_filter_input/form_filter_input.html index 9a246e45a03de..fd82e5b07f6cb 100644 --- a/x-pack/plugins/ml/public/components/form_filter_input/form_filter_input.html +++ b/x-pack/plugins/ml/public/components/form_filter_input/form_filter_input.html @@ -2,7 +2,7 @@ @@ -11,7 +11,10 @@ diff --git a/x-pack/plugins/ml/public/components/form_filter_input/form_filter_input_directive.js b/x-pack/plugins/ml/public/components/form_filter_input/form_filter_input_directive.js index 240184817ee27..0130fb7c39890 100644 --- a/x-pack/plugins/ml/public/components/form_filter_input/form_filter_input_directive.js +++ b/x-pack/plugins/ml/public/components/form_filter_input/form_filter_input_directive.js @@ -25,11 +25,15 @@ module.directive('mlFormFilterInput', function (i18n) { replace: false, template, link(scope) { - const placeholderText = i18n('xpack.ml.formFilterInputPlaceholder', { - defaultMessage: 'Filter', - }); + const placeholderIsDefined = angular.isDefined(scope.placeholder); - scope.placeholder = angular.isDefined(scope.placeholder) ? scope.placeholder : placeholderText; + scope.placeholder = placeholderIsDefined + ? scope.placeholder + : i18n('xpack.ml.formFilterInput.filterPlaceholder', { defaultMessage: 'Filter' }); + + scope.ariaLabel = placeholderIsDefined + ? scope.placeholder + : i18n('xpack.ml.formFilterInput.filterAriaLabel', { defaultMessage: 'Filter' }); } }; }); diff --git a/x-pack/plugins/ml/public/components/full_time_range_selector/full_time_range_selector.html b/x-pack/plugins/ml/public/components/full_time_range_selector/full_time_range_selector.html index c11fb8fab91f4..9e61a98f158d5 100644 --- a/x-pack/plugins/ml/public/components/full_time_range_selector/full_time_range_selector.html +++ b/x-pack/plugins/ml/public/components/full_time_range_selector/full_time_range_selector.html @@ -5,9 +5,8 @@ class="euiButton euiButton--primary euiButton--small euiButton--fill"> - diff --git a/x-pack/plugins/ml/public/components/influencers_list/influencers_list.js b/x-pack/plugins/ml/public/components/influencers_list/influencers_list.js index e393feca6b8ea..341c7a5df5980 100644 --- a/x-pack/plugins/ml/public/components/influencers_list/influencers_list.js +++ b/x-pack/plugins/ml/public/components/influencers_list/influencers_list.js @@ -29,17 +29,19 @@ import { getSeverity } from 'plugins/ml/../common/util/anomaly_utils'; function getTooltipContent(maxScoreLabel, totalScoreLabel) { return ( -

+

+

-

+

+

); @@ -137,7 +139,7 @@ export function InfluencersList({ influencers }) {

diff --git a/x-pack/plugins/ml/public/components/job_group_select/job_group_select.html b/x-pack/plugins/ml/public/components/job_group_select/job_group_select.html index d8557cc6b23dc..adf12a79b8328 100644 --- a/x-pack/plugins/ml/public/components/job_group_select/job_group_select.html +++ b/x-pack/plugins/ml/public/components/job_group_select/job_group_select.html @@ -9,7 +9,7 @@ append-to-body=true > + placeholder="{{:: 'xpack.ml.jobGroupSelect.jobGroupPlaceholder' | i18n: { defaultMessage: 'Job Group' } }}"> > {{$item.id}} @@ -17,17 +17,11 @@ repeat="group in mlGroupSelect.groups | filter: { id: $select.search }" group-by="mlGroupSelect.groupTypes" > -
- - -
+
diff --git a/x-pack/plugins/ml/public/components/nav_menu/nav_menu.js b/x-pack/plugins/ml/public/components/nav_menu/nav_menu.js index 96617f6606030..f4adf4f719679 100644 --- a/x-pack/plugins/ml/public/components/nav_menu/nav_menu.js +++ b/x-pack/plugins/ml/public/components/nav_menu/nav_menu.js @@ -11,7 +11,6 @@ import uiRouter from 'ui/routes'; import chrome from 'ui/chrome'; import { isFullLicense } from '../../license/check_license'; -import { getAllCrumbNames, getBaseBreadcrumbs } from './get_crumbs'; import { uiModules } from 'ui/modules'; const module = uiModules.get('apps/ml'); @@ -45,8 +44,80 @@ module.directive('mlNavMenu', function (config, i18n) { if (isK7Design === false) { // Breadcrumbs - const crumbNames = getAllCrumbNames(i18n); - const breadcrumbs = getBaseBreadcrumbs(i18n); + const crumbNames = { + jobs: { + label: i18n('xpack.ml.navMenu.breadcrumbs.jobsManagementLabel', { defaultMessage: 'Job Management' }), + url: '#/jobs' + }, + new_job: { + label: i18n('xpack.ml.navMenu.breadcrumbs.createNewJobLabel', { defaultMessage: 'Create New Job' }), + url: '#/jobs/new_job' + }, + single_metric: { + label: i18n('xpack.ml.navMenu.breadcrumbs.singleMetricJobLabel', { defaultMessage: 'Single Metric Job' }), + url: '' + }, + multi_metric: { + label: i18n('xpack.ml.navMenu.breadcrumbs.multiMetricJobLabel', { defaultMessage: 'Multi Metric job' }), + url: '' + }, + population: { + label: i18n('xpack.ml.navMenu.breadcrumbs.populationJobLabel', { defaultMessage: 'Population job' }), + url: '' + }, + advanced: { + label: i18n('xpack.ml.navMenu.breadcrumbs.advancedJobConfigurationLabel', { defaultMessage: 'Advanced Job Configuration' }), + url: '' + }, + datavisualizer: { + label: i18n('xpack.ml.navMenu.breadcrumbs.dataVisualizerLabel', { defaultMessage: 'Data Visualizer' }), + url: '' + }, + filedatavisualizer: { + label: i18n('xpack.ml.navMenu.breadcrumbs.fileDataVisualizerLabel', { defaultMessage: 'File Data Visualizer (Experimental)' }), + url: '' + }, + explorer: { + label: i18n('xpack.ml.navMenu.breadcrumbs.anomalyExplorerLabel', { defaultMessage: 'Anomaly Explorer' }), + url: '#/explorer' + }, + timeseriesexplorer: { + label: i18n('xpack.ml.navMenu.breadcrumbs.singleMetricViewerLabel', { defaultMessage: 'Single Metric Viewer' }), + url: '#/timeseriesexplorer' + }, + settings: { + label: i18n('xpack.ml.navMenu.breadcrumbs.settingsLabel', { defaultMessage: 'Settings' }), + url: '#/settings' + }, + calendars_list: { + label: i18n('xpack.ml.navMenu.breadcrumbs.calendarManagementLabel', { defaultMessage: 'Calendar Management' }), + url: '#/settings/calendars_list' + }, + new_calendar: { + label: i18n('xpack.ml.navMenu.breadcrumbs.newCalendarLabel', { defaultMessage: 'New Calendar' }), + url: '#/settings/calendars_list/new_calendar' + }, + edit_calendar: { + label: i18n('xpack.ml.navMenu.breadcrumbs.editCalendarLabel', { defaultMessage: 'Edit Calendar' }), + url: '#/settings/calendars_list/edit_calendar' + }, + filter_lists: { + label: i18n('xpack.ml.navMenu.breadcrumbs.filterListsLabel', { defaultMessage: 'Filter Lists' }), + url: '#/settings/filter_lists' + }, + new_filter_list: { + label: i18n('xpack.ml.navMenu.breadcrumbs.newFilterListLabel', { defaultMessage: 'New Filter List' }), + url: '#/settings/filter_lists/new' + }, + edit_filter_list: { + label: i18n('xpack.ml.navMenu.breadcrumbs.editFilterListLabel', { defaultMessage: 'Edit Filter List' }), + url: '#/settings/filter_lists/edit' + }, + }; + const breadcrumbs = [{ + label: i18n('xpack.ml.navMenu.breadcrumbs.machineLearningLabel', { defaultMessage: 'Machine Learning' }), + url: '#/' + }]; // get crumbs from url const crumbs = uiRouter.getBreadcrumbs(); diff --git a/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js b/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js index 238aeedcde619..c07822c33908e 100644 --- a/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js +++ b/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js @@ -84,7 +84,14 @@ const statusToEuiIconType = (status) => { } }; -const Link = ({ url }) => (Learn more); +const Link = ({ url }) => ( + + + +); Link.propTypes = { url: PropTypes.string.isRequired }; @@ -145,7 +152,10 @@ const Modal = ({ close, title, children }) => ( size="s" fill > - Close + @@ -234,7 +244,7 @@ class ValidateJob extends Component { isLoading={this.state.ui.isLoading} > @@ -243,11 +253,9 @@ class ValidateJob extends Component { } > {this.state.data.messages.map( @@ -255,20 +263,20 @@ class ValidateJob extends Component { )} diff --git a/x-pack/plugins/ml/public/components/validate_job/validate_job_view.test.js b/x-pack/plugins/ml/public/components/validate_job/validate_job_view.test.js index 258e7b55eb44e..8ec8e9af3c319 100644 --- a/x-pack/plugins/ml/public/components/validate_job/validate_job_view.test.js +++ b/x-pack/plugins/ml/public/components/validate_job/validate_job_view.test.js @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { shallow } from 'enzyme'; +import { shallowWithIntl } from 'test_utils/enzyme_helpers'; import React from 'react'; import { ValidateJob } from './validate_job_view'; @@ -26,7 +26,7 @@ function prepareTest(messages) { ); - const wrapper = shallow(component); + const wrapper = shallowWithIntl(component); return { wrapper, p }; } From 2659fe04efebcfada629f66611f6255da49ed6cf Mon Sep 17 00:00:00 2001 From: Alexandr Ogarkov Date: Mon, 14 Jan 2019 19:50:27 +0300 Subject: [PATCH 4/8] Add I18nProvider --- .../components/field_title_bar/field_title_bar_directive.js | 5 ++++- .../public/components/validate_job/validate_job_directive.js | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar_directive.js b/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar_directive.js index 642de0c27ab72..18f18a5949f1c 100644 --- a/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar_directive.js +++ b/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar_directive.js @@ -10,6 +10,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { FieldTitleBar } from './field_title_bar'; +import { I18nProvider } from '@kbn/i18n/react'; import { uiModules } from 'ui/modules'; const module = uiModules.get('apps/ml'); @@ -32,7 +33,9 @@ module.directive('mlFieldTitleBar', function () { }; ReactDOM.render( - React.createElement(FieldTitleBar, props), + + {React.createElement(FieldTitleBar, props)} + , element[0] ); } diff --git a/x-pack/plugins/ml/public/components/validate_job/validate_job_directive.js b/x-pack/plugins/ml/public/components/validate_job/validate_job_directive.js index eb9184fb9db04..e2d8ce2141799 100644 --- a/x-pack/plugins/ml/public/components/validate_job/validate_job_directive.js +++ b/x-pack/plugins/ml/public/components/validate_job/validate_job_directive.js @@ -14,10 +14,11 @@ const module = uiModules.get('apps/ml', ['react']); import { ValidateJob } from './validate_job_view'; import { mlJobService } from 'plugins/ml/services/job_service'; +import { injectI18nProvider } from '@kbn/i18n/react'; module.directive('mlValidateJob', function (reactDirective) { return reactDirective( - ValidateJob, + injectI18nProvider(ValidateJob), undefined, { restrict: 'E' }, { mlJobService } From 0304fc14272de92d0700932aca11cba1a5b06f5b Mon Sep 17 00:00:00 2001 From: Alexandr Ogarkov Date: Mon, 14 Jan 2019 19:51:49 +0300 Subject: [PATCH 5/8] Fix adding label to angular scope --- .../ml/public/components/job_group_select/job_group_select.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/x-pack/plugins/ml/public/components/job_group_select/job_group_select.js b/x-pack/plugins/ml/public/components/job_group_select/job_group_select.js index cf9b336d3a336..a18159f0ff552 100644 --- a/x-pack/plugins/ml/public/components/job_group_select/job_group_select.js +++ b/x-pack/plugins/ml/public/components/job_group_select/job_group_select.js @@ -29,14 +29,12 @@ module.directive('mlJobGroupSelect', function () { controllerAs: 'mlGroupSelect', bindToController: true, controller: class MlGroupSelectController extends InitAfterBindingsWorkaround { - constructor() { - this.newGroupLabel = i18n.translate('xpack.ml.jobGroupSelect.newGroupLabel', { defaultMessage: '(new group)' }); - } initAfterBindings($scope) { this.$scope = $scope; this.selectedGroups = []; this.groups = []; + this.$scope.newGroupLabel = i18n.translate('xpack.ml.jobGroupSelect.newGroupLabel', { defaultMessage: '(new group)' }); // load the jobs, in case they've not been loaded before // in order to get the job groups From b9868f0e9295ba3597972d8535dd990336585b54 Mon Sep 17 00:00:00 2001 From: Alexandr Ogarkov Date: Tue, 15 Jan 2019 10:21:37 +0300 Subject: [PATCH 6/8] Fix case of word --- .../ml/public/components/validate_job/validate_job_view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js b/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js index c07822c33908e..d4ad8f946924b 100644 --- a/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js +++ b/x-pack/plugins/ml/public/components/validate_job/validate_job_view.js @@ -254,7 +254,7 @@ class ValidateJob extends Component { close={this.closeModal} title={} > From 787f62354fcb299d59f5b35997006c0315e8f542 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Tue, 15 Jan 2019 10:41:39 +0300 Subject: [PATCH 7/8] Update test snapshots. --- .../field_title_bar/field_title_bar.test.js | 10 +- .../field_type_icon/field_type_icon.test.js | 2 +- .../validate_job_view.test.js.snap | 114 +++++++++++++----- 3 files changed, 93 insertions(+), 33 deletions(-) diff --git a/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.test.js b/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.test.js index 52b38a35c7c81..c8c2a05745c3b 100644 --- a/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.test.js +++ b/x-pack/plugins/ml/public/components/field_title_bar/field_title_bar.test.js @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { mount } from 'enzyme'; +import { mountWithIntl } from 'test_utils/enzyme_helpers'; import React from 'react'; import { FieldTitleBar } from './field_title_bar'; @@ -27,7 +27,7 @@ describe('FieldTitleBar', () => { test(`card prop is an empty object`, () => { const props = { card: {} }; - const wrapper = mount(); + const wrapper = mountWithIntl(); const fieldName = wrapper.find({ className: 'field-name' }).text(); expect(fieldName).toEqual('document count'); @@ -40,7 +40,7 @@ describe('FieldTitleBar', () => { const testFieldName = 'foo'; const props = { card: { fieldName: testFieldName, isUnsupportedType: true } }; - const wrapper = mount(); + const wrapper = mountWithIntl(); const fieldName = wrapper.find({ className: 'field-name' }).text(); expect(fieldName).toEqual(testFieldName); @@ -54,7 +54,7 @@ describe('FieldTitleBar', () => { const testType = 'bar'; const props = { card: { fieldName: testFieldName, type: testType } }; - const wrapper = mount(); + const wrapper = mountWithIntl(); const fieldName = wrapper.find({ className: 'field-name' }).text(); expect(fieldName).toEqual(testFieldName); @@ -65,7 +65,7 @@ describe('FieldTitleBar', () => { test(`tooltip hovering`, () => { const props = { card: { fieldName: 'foo', type: 'bar' } }; - const wrapper = mount(); + const wrapper = mountWithIntl(); const container = wrapper.find({ className: 'field-name' }); expect(wrapper.find('EuiToolTip').children()).toHaveLength(1); diff --git a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.test.js b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.test.js index 73bada80e2b28..5b32c0ab8c1bc 100644 --- a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.test.js +++ b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.test.js @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { mountWithIntl, shallowWithIntl } from 'enzyme'; +import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers'; import React from 'react'; import { FieldTypeIcon } from './field_type_icon'; diff --git a/x-pack/plugins/ml/public/components/validate_job/__snapshots__/validate_job_view.test.js.snap b/x-pack/plugins/ml/public/components/validate_job/__snapshots__/validate_job_view.test.js.snap index e5ecbd03bf28a..f4c34cf29ade4 100644 --- a/x-pack/plugins/ml/public/components/validate_job/__snapshots__/validate_job_view.test.js.snap +++ b/x-pack/plugins/ml/public/components/validate_job/__snapshots__/validate_job_view.test.js.snap @@ -13,11 +13,25 @@ exports[`ValidateJob renders button and modal with a message 1`] = ` size="s" type="button" > - Validate Job + + } > - Job validation performs certain checks against job configurations and underlying source data and provides specific advice on how to adjust settings that are more likely to produce insightful results. + - For more information, see - - Machine Learning Job Tips - - . + + + , + } + } + /> @@ -69,7 +97,11 @@ exports[`ValidateJob renders the button 1`] = ` size="s" type="button" > - Validate Job + `; @@ -87,32 +119,60 @@ exports[`ValidateJob renders the button and modal with a success message 1`] = ` size="s" type="button" > - Validate Job + + } > - Job validation performs certain checks against job configurations and underlying source data and provides specific advice on how to adjust settings that are more likely to produce insightful results. + - For more information, see - - Machine Learning Job Tips - - . + + + , + } + } + /> From d30fa9ef432960a9502d382f7c6f35ffefcef3a8 Mon Sep 17 00:00:00 2001 From: Alexandr Ogarkov Date: Tue, 15 Jan 2019 16:05:14 +0300 Subject: [PATCH 8/8] Resolve review comments --- .../public/components/job_group_select/job_group_select.js | 7 +++---- x-pack/plugins/ml/public/components/nav_menu/nav_menu.js | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/ml/public/components/job_group_select/job_group_select.js b/x-pack/plugins/ml/public/components/job_group_select/job_group_select.js index a18159f0ff552..c49d9afd992ff 100644 --- a/x-pack/plugins/ml/public/components/job_group_select/job_group_select.js +++ b/x-pack/plugins/ml/public/components/job_group_select/job_group_select.js @@ -13,11 +13,10 @@ import template from './job_group_select.html'; import { mlJobService } from 'plugins/ml/services/job_service'; import { mlCalendarService } from 'plugins/ml/services/calendar_service'; import { InitAfterBindingsWorkaround } from 'ui/compat'; -import { i18n } from '@kbn/i18n'; import { uiModules } from 'ui/modules'; const module = uiModules.get('apps/ml'); -module.directive('mlJobGroupSelect', function () { +module.directive('mlJobGroupSelect', function (i18n) { return { restrict: 'E', template, @@ -34,7 +33,7 @@ module.directive('mlJobGroupSelect', function () { this.$scope = $scope; this.selectedGroups = []; this.groups = []; - this.$scope.newGroupLabel = i18n.translate('xpack.ml.jobGroupSelect.newGroupLabel', { defaultMessage: '(new group)' }); + this.$scope.newGroupLabel = i18n('xpack.ml.jobGroupSelect.newGroupLabel', { defaultMessage: '(new group)' }); // load the jobs, in case they've not been loaded before // in order to get the job groups @@ -113,7 +112,7 @@ module.directive('mlJobGroupSelect', function () { groupTypes(group) { if(group.isTag === false) { - return i18n.translate('xpack.ml.jobGroupSelect.existingGroupsLabel', { defaultMessage: 'Existing groups' }); + return i18n('xpack.ml.jobGroupSelect.existingGroupsLabel', { defaultMessage: 'Existing groups' }); } } } diff --git a/x-pack/plugins/ml/public/components/nav_menu/nav_menu.js b/x-pack/plugins/ml/public/components/nav_menu/nav_menu.js index f4adf4f719679..09d92f3e28ca4 100644 --- a/x-pack/plugins/ml/public/components/nav_menu/nav_menu.js +++ b/x-pack/plugins/ml/public/components/nav_menu/nav_menu.js @@ -46,7 +46,7 @@ module.directive('mlNavMenu', function (config, i18n) { const crumbNames = { jobs: { - label: i18n('xpack.ml.navMenu.breadcrumbs.jobsManagementLabel', { defaultMessage: 'Job Management' }), + label: i18n('xpack.ml.navMenu.breadcrumbs.jobManagementLabel', { defaultMessage: 'Job Management' }), url: '#/jobs' }, new_job: {