diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/file_datavisualizer_view/file_datavisualizer_view.js b/x-pack/plugins/ml/public/file_datavisualizer/components/file_datavisualizer_view/file_datavisualizer_view.js index 36916286e682c..4c24254314101 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/file_datavisualizer_view/file_datavisualizer_view.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/file_datavisualizer_view/file_datavisualizer_view.js @@ -5,6 +5,7 @@ */ +import { FormattedMessage } from '@kbn/i18n/react'; import React, { Component, } from 'react'; @@ -129,7 +130,12 @@ export class FileDataVisualizerView extends Component { if (serverSettings.format === 'xml') { throw { - message: 'XML not currently supported' + message: ( + + ), }; } diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/file_datavisualizer_view/file_error_callouts.js b/x-pack/plugins/ml/public/file_datavisualizer/components/file_datavisualizer_view/file_error_callouts.js index 63ba52ad88dd3..bc3178447b0c1 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/file_datavisualizer_view/file_error_callouts.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/file_datavisualizer_view/file_error_callouts.js @@ -4,6 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ +import { FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; import { @@ -25,23 +26,42 @@ export function FileTooLarge({ fileSize, maxFileSize }) { if (fileSizeFormatted !== maxFileSizeFormatted) { errorText = (

- The size of the file you selected for upload is {fileSizeFormatted} which - exceeds the maximum permitted size of {maxFileSizeFormatted} +

); } else { const diffFormatted = numeral(fileSize - maxFileSize).format(FILE_SIZE_DISPLAY_FORMAT); errorText = (

- The size of the file you selected for upload exceeds the maximum - permitted size of {maxFileSizeFormatted} by {diffFormatted} +

); } return ( + } color="danger" iconType="cross" > @@ -53,7 +73,12 @@ export function FileTooLarge({ fileSize, maxFileSize }) { export function FileCouldNotBeRead({ error, loaded }) { return ( + } color="danger" iconType="cross" > @@ -63,7 +88,12 @@ export function FileCouldNotBeRead({ error, loaded }) { } { loaded && -

Reverting to previous settings

+

+ +

} ); diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/import_errors/errors.js b/x-pack/plugins/ml/public/file_datavisualizer/components/import_errors/errors.js index 4981e4cf23f11..80a90dcbfed9d 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/import_errors/errors.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/import_errors/errors.js @@ -5,6 +5,7 @@ */ +import { FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; import { @@ -34,17 +35,47 @@ export function ImportErrors({ errors, statuses }) { function title(statuses) { switch (IMPORT_STATUS.FAILED) { case statuses.readStatus: - return 'Error reading file'; + return ( + + ); case statuses.indexCreatedStatus: - return 'Error creating index'; + return ( + + ); case statuses.ingestPipelineCreatedStatus: - return 'Error creating ingest pipeline'; + return ( + + ); case statuses.uploadStatus: - return 'Error uploading data'; + return ( + + ); case statuses.indexPatternCreatedStatus: - return 'Error creating index pattern'; + return ( + + ); default: - return 'Error'; + return ( + + ); } } @@ -59,7 +90,12 @@ function ImportError(error, key) { {errorObj.more !== undefined && + } paddingSize="m" > {errorObj.more} @@ -99,5 +135,12 @@ function toString(error) { } } - return { msg: 'Unknown error' }; + return { + msg: ( + + ), + }; } diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/import_progress/import_progress.js b/x-pack/plugins/ml/public/file_datavisualizer/components/import_progress/import_progress.js index 75e3eb4b97a31..6988eb07d226d 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/import_progress/import_progress.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/import_progress/import_progress.js @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ - +import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; import { @@ -19,7 +19,7 @@ export const IMPORT_STATUS = { FAILED: 'danger', }; -export function ImportProgress({ statuses }) { +export const ImportProgress = injectI18n(function ({ statuses, intl }) { const { reading, @@ -60,43 +60,115 @@ export function ImportProgress({ statuses }) { completedStep = 5; } - - let processFileTitle = 'Process file'; - let createIndexTitle = 'Create index'; - let createIngestPipelineTitle = 'Create ingest pipeline'; - let uploadingDataTitle = 'Upload data'; - let createIndexPatternTitle = 'Create index pattern'; + let processFileTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.processFileTitle', + defaultMessage: 'Process file' + }); + let createIndexTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.createIndexTitle', + defaultMessage: 'Create index' + }); + let createIngestPipelineTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.createIngestPipelineTitle', + defaultMessage: 'Create ingest pipeline' + }); + let uploadingDataTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.uploadDataTitle', + defaultMessage: 'Upload data' + }); + let createIndexPatternTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.createIndexPatternTitle', + defaultMessage: 'Create index pattern' + }); if (completedStep >= 0) { - processFileTitle = 'Processing file'; - statusInfo = (

Processing file for import

); + processFileTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.processingFileTitle', + defaultMessage: 'Processing file' + }); + statusInfo = ( +

+ +

+ ); } if (completedStep >= 1) { - processFileTitle = 'File processed'; - createIndexTitle = 'Creating index'; - statusInfo = (

Creating index and ingest pipeline

); + processFileTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.fileProcessedTitle', + defaultMessage: 'File processed' + }); + createIndexTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.creatingIndexTitle', + defaultMessage: 'Creating index' + }); + statusInfo = ( +

+ +

+ ); } if (completedStep >= 2) { - createIndexTitle = 'Index created'; - createIngestPipelineTitle = 'Creating ingest pipeline'; - statusInfo = (

Creating index and ingest pipeline

); + createIndexTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.indexCreatedTitle', + defaultMessage: 'Index created' + }); + createIngestPipelineTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.creatingIngestPipelineTitle', + defaultMessage: 'Creating ingest pipeline' + }); + statusInfo = ( +

+ +

+ ); } if (completedStep >= 3) { - createIngestPipelineTitle = 'Ingest pipeline created'; - uploadingDataTitle = 'Uploading data'; + createIngestPipelineTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.ingestPipelineCreatedTitle', + defaultMessage: 'Ingest pipeline created' + }); + uploadingDataTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.uploadingDataTitle', + defaultMessage: 'Uploading data' + }); statusInfo = (); } if (completedStep >= 4) { - uploadingDataTitle = 'Data uploaded'; + uploadingDataTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.dataUploadedTitle', + defaultMessage: 'Data uploaded' + }); if (createIndexPattern === true) { - createIndexPatternTitle = 'Creating index pattern'; - statusInfo = (

Creating index pattern

); + createIndexPatternTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.creatingIndexPatternTitle', + defaultMessage: 'Creating index pattern' + }); + statusInfo = ( +

+ +

+ ); } else { statusInfo = null; } } if (completedStep >= 5) { - createIndexPatternTitle = 'Index pattern created'; + createIndexPatternTitle = intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importProgress.indexPatternCreatedTitle', + defaultMessage: 'Index pattern created' + }); statusInfo = null; } @@ -159,12 +231,17 @@ export function ImportProgress({ statuses }) { } ); -} +}); function UploadFunctionProgress({ progress }) { return ( -

Uploading data

+

+ +

{(progress < 100) && diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/import_settings/advanced.js b/x-pack/plugins/ml/public/file_datavisualizer/components/import_settings/advanced.js index d019137387926..3a459ad59ed85 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/import_settings/advanced.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/import_settings/advanced.js @@ -5,6 +5,7 @@ */ +import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; import { @@ -19,7 +20,7 @@ import { import { MLJobEditor, EDITOR_MODE } from '../../../jobs/jobs_list/components/ml_job_editor'; const EDITOR_HEIGHT = '300px'; -export function AdvancedSettings({ +function AdvancedSettingsUi({ index, indexPattern, initialized, @@ -35,17 +36,26 @@ export function AdvancedSettings({ onPipelineStringChange, indexNameError, indexPatternNameError, + intl, }) { return ( + } isInvalid={indexNameError !== ''} error={[indexNameError]} > + } checked={(createIndexPattern === true)} disabled={(initialized === true)} onChange={onCreateIndexPatternChange} @@ -64,7 +79,12 @@ export function AdvancedSettings({ + } disabled={(createIndexPattern === false || initialized === true)} isInvalid={indexPatternNameError !== ''} error={[indexPatternNameError]} @@ -109,11 +129,18 @@ export function AdvancedSettings({ ); } +export const AdvancedSettings = injectI18n(AdvancedSettingsUi); + function IndexSettings({ initialized, data, onChange }) { return ( + } disabled={(initialized === true)} fullWidth > @@ -134,7 +161,12 @@ function Mappings({ initialized, data, onChange }) { return ( + } disabled={(initialized === true)} fullWidth > @@ -155,7 +187,12 @@ function IngestPipeline({ initialized, data, onChange }) { return ( + } disabled={(initialized === true)} fullWidth > diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/import_settings/import_settings.js b/x-pack/plugins/ml/public/file_datavisualizer/components/import_settings/import_settings.js index ec2a8364b482e..9e35f1478d3ce 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/import_settings/import_settings.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/import_settings/import_settings.js @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ - +import { injectI18n } from '@kbn/i18n/react'; import React from 'react'; import { @@ -15,7 +15,7 @@ import { import { SimpleSettings } from './simple'; import { AdvancedSettings } from './advanced'; -export function ImportSettings({ +export const ImportSettings = injectI18n(function ({ index, indexPattern, initialized, @@ -30,12 +30,16 @@ export function ImportSettings({ onMappingsStringChange, onPipelineStringChange, indexNameError, - indexPatternNameError + indexPatternNameError, + intl }) { const tabs = [{ id: 'simple-settings', - name: 'Simple', + name: intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importSettings.simpleTabName', + defaultMessage: 'Simple' + }), content: ( @@ -54,7 +58,10 @@ export function ImportSettings({ }, { id: 'advanced-settings', - name: 'Advanced', + name: intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.importSettings.advancedTabName', + defaultMessage: 'Advanced' + }), content: ( @@ -90,4 +97,4 @@ export function ImportSettings({ /> ); -} +}); diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/import_settings/simple.js b/x-pack/plugins/ml/public/file_datavisualizer/components/import_settings/simple.js index 5e384e4c93bcb..fbfeed05d0419 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/import_settings/simple.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/import_settings/simple.js @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ - +import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; import { @@ -13,23 +13,32 @@ import { EuiCheckbox, } from '@elastic/eui'; -export function SimpleSettings({ +export const SimpleSettings = injectI18n(function ({ index, initialized, onIndexChange, createIndexPattern, onCreateIndexPatternChange, indexNameError, + intl, }) { return ( + } isInvalid={indexNameError !== ''} error={[indexNameError]} > + } checked={(createIndexPattern === true)} disabled={(initialized === true)} onChange={onCreateIndexPatternChange} /> ); -} +}); diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/import_summary/import_summary.js b/x-pack/plugins/ml/public/file_datavisualizer/components/import_summary/import_summary.js index 923cd1fe0026e..02712f42d2300 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/import_summary/import_summary.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/import_summary/import_summary.js @@ -5,6 +5,7 @@ */ +import { FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; import { @@ -36,7 +37,12 @@ export function ImportSummary({ return ( + } color="success" iconType="check" > @@ -51,13 +57,26 @@ export function ImportSummary({ + } color="warning" iconType="help" >

- {importFailures.length} out of {docCount} documents could not be imported. - This could be due to lines not matching the Grok pattern. + +

@@ -72,7 +91,12 @@ function Failures({ failedDocs }) { return ( + } paddingSize="m" >
@@ -100,32 +124,57 @@ function createDisplayItems( ) { const items = [ { - title: 'Index', + title: ( + + ), description: index, }, { - title: 'Documents ingested', + title: ( + + ), description: docCount - ((importFailures && importFailures.length) || 0), } ]; if (createPipeline) { items.splice(1, 0, { - title: 'Ingest pipeline', + title: ( + + ), description: ingestPipelineId, }); } if (createIndexPattern) { items.splice(1, 0, { - title: 'Index pattern', + title: ( + + ), description: indexPattern, }); } if (importFailures && importFailures.length > 0) { items.push({ - title: 'Failed documents', + title: ( + + ), description: importFailures.length, }); } diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/import_view/import_view.js b/x-pack/plugins/ml/public/file_datavisualizer/components/import_view/import_view.js index a722b11b9945c..651924542cfe7 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/import_view/import_view.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/import_view/import_view.js @@ -5,6 +5,7 @@ */ +import { FormattedMessage } from '@kbn/i18n/react'; import React, { Component, } from 'react'; @@ -363,9 +364,18 @@ export class ImportView extends Component {

- Import data   + +   + } />

@@ -399,7 +409,10 @@ export class ImportView extends Component { iconSide="right" fill > - Import + } @@ -409,7 +422,10 @@ export class ImportView extends Component { - Reset + } @@ -519,7 +535,12 @@ function getDefaultState(state, results) { function isIndexNameValid(name, indexNames) { if (indexNames.find(i => i === name)) { - return 'Index name already exists'; + return ( + + ); } const reg = new RegExp('[\\\\/\*\?\"\<\>\|\\s\,\#]+'); @@ -529,7 +550,12 @@ function isIndexNameValid(name, indexNames) { name.match(/^[-_+]/) !== null || // name can't start with these chars name.match(reg) !== null // name can't contain these chars ) { - return 'Index name contains illegal characters'; + return ( + + ); } return ''; } @@ -541,7 +567,12 @@ function isIndexPatternNameValid(name, indexPatternNames, index) { } if (indexPatternNames.find(i => i === name)) { - return 'Index pattern name already exists'; + return ( + + ); } // escape . and + to stop the regex matching more than it should. @@ -551,7 +582,12 @@ function isIndexPatternNameValid(name, indexPatternNames, index) { newName = newName.replace('*', '.*'); const reg = new RegExp(`^${newName}$`); if (index.match(reg) === null) { // name should match index - return 'Index pattern does not match index name'; + return ( + + ); } return ''; diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/results_links/results_links.js b/x-pack/plugins/ml/public/file_datavisualizer/components/results_links/results_links.js index b88c87c21758e..5c38548825cd7 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/results_links/results_links.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/results_links/results_links.js @@ -5,6 +5,7 @@ */ +import { FormattedMessage } from '@kbn/i18n/react'; import React, { Component, } from 'react'; @@ -90,7 +91,12 @@ export class ResultsLinks extends Component { } - title="View index in Discover" + title={ + + } description="" href={`${uiChrome.getBasePath()}/app/kibana#/discover?&_a=(index:'${indexPatternId}')${_g}`} /> @@ -100,7 +106,12 @@ export class ResultsLinks extends Component { } - title="Create new ML job" + title={ + + } description="" href={`${uiChrome.getBasePath()}/app/ml#/jobs/new_job/step/job_type?index=${indexPatternId}${_g}`} /> @@ -110,7 +121,12 @@ export class ResultsLinks extends Component { } - title="Open in Data Visualizer" + title={ + + } description="" href={`${uiChrome.getBasePath()}/app/ml#/jobs/new_job/datavisualizer?index=${indexPatternId}${_g}`} /> @@ -119,7 +135,12 @@ export class ResultsLinks extends Component { } - title="Index Management" + title={ + + } description="" href={`${uiChrome.getBasePath()}/app/kibana#/management/elasticsearch/index_management/home`} /> @@ -128,7 +149,12 @@ export class ResultsLinks extends Component { } - title="Index Pattern Management" + title={ + + } description="" href={`${uiChrome.getBasePath()}/app/kibana#/management/kibana/indices/${indexPatternId}`} /> diff --git a/x-pack/plugins/ml/public/file_datavisualizer/components/results_view/results_view.js b/x-pack/plugins/ml/public/file_datavisualizer/components/results_view/results_view.js index 1c966cbefede2..9a632edefed0b 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/components/results_view/results_view.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/components/results_view/results_view.js @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ - +import { injectI18n, FormattedMessage } from '@kbn/i18n/react'; import React from 'react'; import { @@ -18,14 +18,17 @@ import { FileContents } from '../file_contents'; import { AnalysisSummary } from '../analysis_summary'; import { FieldsStats } from '../fields_stats'; -export function ResultsView({ data, results, showEditFlyout }) { +export const ResultsView = injectI18n(function ({ data, results, showEditFlyout, intl }) { console.log(results); const tabs = [ { id: 'file-stats', - name: 'File stats', + name: intl.formatMessage({ + id: 'xpack.ml.fileDatavisualizer.resultsView.fileStatsTabName', + defaultMessage: 'File stats' + }), content: , } ]; @@ -50,7 +53,10 @@ export function ResultsView({ data, results, showEditFlyout }) { showEditFlyout()}> - Override settings + @@ -66,4 +72,4 @@ export function ResultsView({ data, results, showEditFlyout }) {
); -} +}); diff --git a/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer.js b/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer.js index f59788329da34..8b18e00aef534 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer.js @@ -4,7 +4,6 @@ * you may not use this file except in compliance with the Elastic License. */ - import { FileDataVisualizerView } from './components/file_datavisualizer_view'; import React from 'react'; diff --git a/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js b/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js index 85666785c92fc..6e150126338b4 100644 --- a/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js +++ b/x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js @@ -6,6 +6,7 @@ import 'ngreact'; +import { injectI18nProvider } from '@kbn/i18n/react'; import { uiModules } from 'ui/modules'; const module = uiModules.get('apps/ml', ['react']); @@ -17,6 +18,7 @@ import { getMlNodeCount } from 'plugins/ml/ml_nodes_check/check_ml_nodes'; import { loadNewJobDefaults } from 'plugins/ml/jobs/new_job/utils/new_job_defaults'; import { loadIndexPatterns } from '../util/index_utils'; import { initPromise } from 'plugins/ml/util/promise'; +import { FileDataVisualizerPage } from './file_datavisualizer'; import uiRoutes from 'ui/routes'; @@ -36,14 +38,10 @@ uiRoutes } }); - - -import { FileDataVisualizerPage } from './file_datavisualizer'; - module.directive('fileDatavisualizerPage', function ($injector) { const reactDirective = $injector.get('reactDirective'); const indexPatterns = $injector.get('indexPatterns'); const kibanaConfig = $injector.get('config'); - return reactDirective(FileDataVisualizerPage, undefined, { restrict: 'E' }, { indexPatterns, kibanaConfig }); + return reactDirective(injectI18nProvider(FileDataVisualizerPage), undefined, { restrict: 'E' }, { indexPatterns, kibanaConfig }); });