From caa31d540785d6c17e659b85a1778e9b8d1b1480 Mon Sep 17 00:00:00 2001 From: Alexandr Ogarkov Date: Fri, 2 Nov 2018 18:27:22 +0300 Subject: [PATCH 1/5] Translate monitoring - apm --- .../public/components/apm/instance/status.js | 40 +++++++++-- .../components/apm/instances/instances.js | 69 ++++++++++++++++--- .../public/components/apm/instances/status.js | 30 ++++++-- .../public/components/apm/status_icon.js | 14 +++- .../public/views/apm/instance/index.js | 19 +++-- .../public/views/apm/instances/index.js | 29 ++++---- .../public/views/apm/overview/index.js | 6 +- 7 files changed, 162 insertions(+), 45 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/apm/instance/status.js b/x-pack/plugins/monitoring/public/components/apm/instance/status.js index f68bf6a72d2f8..24e47cf1c5abe 100644 --- a/x-pack/plugins/monitoring/public/components/apm/instance/status.js +++ b/x-pack/plugins/monitoring/public/components/apm/instance/status.js @@ -10,8 +10,9 @@ import { SummaryStatus } from '../../summary_status'; import { ApmStatusIcon } from '../status_icon'; import { formatMetric } from '../../../lib/format_number'; import { formatTimestampToDuration } from '../../../../common'; +import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; -export function Status({ stats }) { +function StatusUI({ stats, intl }) { const { name, output, @@ -22,27 +23,42 @@ export function Status({ stats }) { const metrics = [ { - label: 'Name', + label: intl.formatMessage({ + id: 'xpack.monitoring.apm.instance.status.nameLabel', + defaultMessage: 'Name', + }), value: name, dataTestSubj: 'name' }, { - label: 'Output', + label: intl.formatMessage({ + id: 'xpack.monitoring.apm.instance.status.outputLabel', + defaultMessage: 'Output', + }), value: output, dataTestSubj: 'output' }, { - label: 'Version', + label: intl.formatMessage({ + id: 'xpack.monitoring.apm.instance.status.versionLabel', + defaultMessage: 'Version', + }), value: version, dataTestSubj: 'version' }, { - label: 'Uptime', + label: intl.formatMessage({ + id: 'xpack.monitoring.apm.instance.status.uptimeLabel', + defaultMessage: 'Uptime', + }), value: formatMetric(uptime, 'time_since'), dataTestSubj: 'uptime' }, { - label: 'Last Event', + label: intl.formatMessage({ + id: 'xpack.monitoring.apm.instance.status.lastEventLabel', + defaultMessage: 'Last Event', + }), value: formatTimestampToDuration(+moment(timeOfLastEvent), 'since') + ' ago', dataTestSubj: 'timeOfLastEvent', } @@ -50,7 +66,15 @@ export function Status({ stats }) { const IconComponent = ({ status }) => ( - Status: + + ) + }} + /> ); @@ -62,3 +86,5 @@ export function Status({ stats }) { /> ); } + +export const Status = injectI18n(StatusUI); diff --git a/x-pack/plugins/monitoring/public/components/apm/instances/instances.js b/x-pack/plugins/monitoring/public/components/apm/instances/instances.js index 66b67cedbf065..14c2fcb762e11 100644 --- a/x-pack/plugins/monitoring/public/components/apm/instances/instances.js +++ b/x-pack/plugins/monitoring/public/components/apm/instances/instances.js @@ -16,18 +16,62 @@ import { Status } from './status'; import { SORT_ASCENDING, SORT_DESCENDING, TABLE_ACTION_UPDATE_FILTER } from '../../../../common/constants'; import { formatMetric } from '../../../lib/format_number'; import { formatTimestampToDuration } from '../../../../common'; +import { i18n } from '@kbn/i18n'; +import { injectI18n } from '@kbn/i18n/react'; const filterFields = [ 'name', 'type', 'version', 'output' ]; const columns = [ - { title: 'Name', sortKey: 'name', sortOrder: SORT_ASCENDING }, - { title: 'Output Enabled', sortKey: 'output' }, - { title: 'Total Events Rate', sortKey: 'total_events_rate', secondarySortOrder: SORT_DESCENDING }, - { title: 'Bytes Sent Rate', sortKey: 'bytes_sent_rate' }, - { title: 'Output Errors', sortKey: 'errors' }, - { title: 'Last Event', sortKey: 'time_of_last_event' }, - { title: 'Allocated Memory', sortKey: 'memory' }, - { title: 'Version', sortKey: 'version' }, + { + title: i18n.translate('xpack.monitoring.apm.instances.nameTitle', { + defaultMessage: 'Name' + }), + sortKey: 'name', + sortOrder: SORT_ASCENDING + }, + { + title: i18n.translate('xpack.monitoring.apm.instances.outputEnabledTitle', { + defaultMessage: 'Output Enabled' + }), + sortKey: 'output' + }, + { + title: i18n.translate('xpack.monitoring.apm.instances.totalEventsRateTitle', { + defaultMessage: 'Total Events Rate' + }), + sortKey: 'total_events_rate', + secondarySortOrder: SORT_DESCENDING + }, + { + title: i18n.translate('xpack.monitoring.apm.instances.bytesSentRateTitle', { + defaultMessage: 'Bytes Sent Rate' + }), + sortKey: 'bytes_sent_rate' + }, + { + title: i18n.translate('xpack.monitoring.apm.instances.outputErrorsTitle', { + defaultMessage: 'Output Errors' + }), + sortKey: 'errors' + }, + { + title: i18n.translate('xpack.monitoring.apm.instances.lastEventTitle', { + defaultMessage: 'Last Event' + }), + sortKey: 'time_of_last_event' + }, + { + title: i18n.translate('xpack.monitoring.apm.instances.allocatedMemoryTitle', { + defaultMessage: 'Allocated Memory' + }), + sortKey: 'memory' + }, + { + title: i18n.translate('xpack.monitoring.apm.instances.versionTitle', { + defaultMessage: 'Version' + }), + sortKey: 'version' + }, ]; const instanceRowFactory = () => { return function KibanaRow(props) { @@ -77,7 +121,7 @@ const instanceRowFactory = () => { }; }; -export function ApmServerInstances({ apms }) { +function ApmServerInstancesUI({ apms, intl }) { const { pageIndex, filterText, @@ -97,7 +141,10 @@ export function ApmServerInstances({ apms }) { sortKey={sortKey} sortOrder={sortOrder} onNewState={onNewState} - placeholder="Filter Instances..." + placeholder={intl.formatMessage({ + id: 'xpack.monitoring.apm.instances.filterInstancesPlaceholder', + defaultMessage: 'Filter Instances…' + })} filterFields={filterFields} columns={columns} rowComponent={instanceRowFactory()} @@ -105,3 +152,5 @@ export function ApmServerInstances({ apms }) { ); } + +export const ApmServerInstances = injectI18n(ApmServerInstancesUI); diff --git a/x-pack/plugins/monitoring/public/components/apm/instances/status.js b/x-pack/plugins/monitoring/public/components/apm/instances/status.js index e51063f02979b..9032a80e2a5a1 100644 --- a/x-pack/plugins/monitoring/public/components/apm/instances/status.js +++ b/x-pack/plugins/monitoring/public/components/apm/instances/status.js @@ -10,8 +10,9 @@ import { SummaryStatus } from '../../summary_status'; import { ApmStatusIcon } from '../status_icon'; import { formatMetric } from '../../../lib/format_number'; import { formatTimestampToDuration } from '../../../../common'; +import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; -export function Status({ stats }) { +export function StatusUI({ stats, intl }) { const { apms: { total @@ -22,17 +23,26 @@ export function Status({ stats }) { const metrics = [ { - label: 'Servers', + label: intl.formatMessage({ + id: 'xpack.monitoring.apm.instances.status.serversLabel', + defaultMessage: 'Servers', + }), value: total, dataTestSubj: 'total' }, { - label: 'Total Events', + label: intl.formatMessage({ + id: 'xpack.monitoring.apm.instances.status.totalEventsLabel', + defaultMessage: 'Total Events', + }), value: formatMetric(totalEvents, '0.[0]a'), dataTestSubj: 'totalEvents' }, { - label: 'Last Event', + label: intl.formatMessage({ + id: 'xpack.monitoring.apm.instances.status.lastEventLabel', + defaultMessage: 'Last Event', + }), value: formatTimestampToDuration(+moment(timeOfLastEvent), 'since') + ' ago', dataTestSubj: 'timeOfLastEvent', } @@ -40,7 +50,15 @@ export function Status({ stats }) { const IconComponent = ({ status }) => ( - Status: + + ) + }} + /> ); @@ -52,3 +70,5 @@ export function Status({ stats }) { /> ); } + +export const Status = injectI18n(StatusUI); diff --git a/x-pack/plugins/monitoring/public/components/apm/status_icon.js b/x-pack/plugins/monitoring/public/components/apm/status_icon.js index 49fe0faed1ad1..8d193daa9b062 100644 --- a/x-pack/plugins/monitoring/public/components/apm/status_icon.js +++ b/x-pack/plugins/monitoring/public/components/apm/status_icon.js @@ -6,8 +6,9 @@ import React from 'react'; import { StatusIcon } from 'plugins/monitoring/components/status_icon'; +import { injectI18n } from '@kbn/i18n/react'; -export function ApmStatusIcon({ status, availability = true }) { +function ApmStatusIconUI({ status, availability = true, intl }) { const type = (() => { if (!availability) { return StatusIcon.TYPES.GRAY; @@ -18,6 +19,15 @@ export function ApmStatusIcon({ status, availability = true }) { })(); return ( - + ); } + +export const ApmStatusIcon = injectI18n(ApmStatusIconUI); diff --git a/x-pack/plugins/monitoring/public/views/apm/instance/index.js b/x-pack/plugins/monitoring/public/views/apm/instance/index.js index d815e2f537b4b..902bdd5c4479d 100644 --- a/x-pack/plugins/monitoring/public/views/apm/instance/index.js +++ b/x-pack/plugins/monitoring/public/views/apm/instance/index.js @@ -19,6 +19,7 @@ import template from './index.html'; import { MonitoringViewBaseController } from '../../base_controller'; import { ApmServerInstance } from '../../../components/apm/instance'; import { timefilter } from 'ui/timefilter'; +import { I18nProvider } from '@kbn/i18n/react'; uiRoutes.when('/apm/instances/:uuid', { template, @@ -30,7 +31,7 @@ uiRoutes.when('/apm/instances/:uuid', { }, controller: class extends MonitoringViewBaseController { - constructor($injector, $scope) { + constructor($injector, $scope, i18n) { const $route = $injector.get('$route'); const title = $injector.get('title'); const globalState = $injector.get('globalState'); @@ -39,7 +40,9 @@ uiRoutes.when('/apm/instances/:uuid', { }); super({ - title: `APM - Instance`, + title: i18n('xpack.monitoring.apm.instanceRouteTitle', { + defaultMessage: 'APM - Instance' + }), api: `../api/monitoring/v1/clusters/${globalState.cluster_uuid}/apm/${$route.current.params.uuid}`, defaultData: {}, reactNodeId: 'apmInstanceReact', @@ -63,11 +66,13 @@ uiRoutes.when('/apm/instances/:uuid', { renderReact(data, onBrush) { const component = ( - + + + ); super.renderReact(component); } diff --git a/x-pack/plugins/monitoring/public/views/apm/instances/index.js b/x-pack/plugins/monitoring/public/views/apm/instances/index.js index e928289db61eb..a6fdb6e81f960 100644 --- a/x-pack/plugins/monitoring/public/views/apm/instances/index.js +++ b/x-pack/plugins/monitoring/public/views/apm/instances/index.js @@ -11,6 +11,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init'; import template from './index.html'; import { ApmServerInstances } from '../../../components/apm/instances'; import { MonitoringViewBaseTableController } from '../../base_table_controller'; +import { I18nProvider } from '@kbn/i18n/react'; uiRoutes.when('/apm/instances', { template, @@ -21,7 +22,7 @@ uiRoutes.when('/apm/instances', { }, }, controller: class extends MonitoringViewBaseTableController { - constructor($injector, $scope) { + constructor($injector, $scope, i18n) { const $route = $injector.get('$route'); const globalState = $injector.get('globalState'); $scope.cluster = find($route.current.locals.clusters, { @@ -29,7 +30,9 @@ uiRoutes.when('/apm/instances', { }); super({ - title: 'APM - Instances', + title: i18n('xpack.monitoring.apm.instancesRouteTitle', { + defaultMessage: 'APM - Instances' + }), storageKey: 'apm.instances', api: `../api/monitoring/v1/clusters/${globalState.cluster_uuid}/apm/instances`, defaultData: {}, @@ -53,16 +56,18 @@ uiRoutes.when('/apm/instances', { } = this; const component = ( - + + + ); super.renderReact(component); } diff --git a/x-pack/plugins/monitoring/public/views/apm/overview/index.js b/x-pack/plugins/monitoring/public/views/apm/overview/index.js index 23a4581be7614..cea2fe22e22e0 100644 --- a/x-pack/plugins/monitoring/public/views/apm/overview/index.js +++ b/x-pack/plugins/monitoring/public/views/apm/overview/index.js @@ -23,7 +23,7 @@ uiRoutes.when('/apm', { }, }, controller: class extends MonitoringViewBaseController { - constructor($injector, $scope) { + constructor($injector, $scope, i18n) { const $route = $injector.get('$route'); const globalState = $injector.get('globalState'); $scope.cluster = find($route.current.locals.clusters, { @@ -31,7 +31,9 @@ uiRoutes.when('/apm', { }); super({ - title: 'APM', + title: i18n('xpack.monitoring.apm.overviewRouteTitle', { + defaultMessage: 'APM' + }), api: `../api/monitoring/v1/clusters/${globalState.cluster_uuid}/apm`, defaultData: {}, reactNodeId: 'apmOverviewReact', From 7399eef726a8ee9eaeae94644bd5075b05033330 Mon Sep 17 00:00:00 2001 From: Alexandr Ogarkov Date: Fri, 2 Nov 2018 18:44:09 +0300 Subject: [PATCH 2/5] Translate monitoring - chart --- .../components/chart/horizontal_legend.js | 6 +++++- .../public/components/chart/info_tooltip.js | 8 +++++++- .../chart/monitoring_timeseries_container.js | 10 +++++++++- .../monitoring/public/directives/chart/index.js | 17 ++++++++++------- 4 files changed, 31 insertions(+), 10 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js b/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js index 169aabf693421..fd7a6e1b1758d 100644 --- a/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js +++ b/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js @@ -9,6 +9,7 @@ import { includes, isFunction } from 'lodash'; import { EuiKeyboardAccessible, } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; export class HorizontalLegend extends React.Component { constructor() { @@ -24,7 +25,10 @@ export class HorizontalLegend extends React.Component { */ formatter(value) { if (value === null) { - return 'N/A'; + return (); } if (isFunction(this.props.tickFormatter)) { return this.props.tickFormatter(value); diff --git a/x-pack/plugins/monitoring/public/components/chart/info_tooltip.js b/x-pack/plugins/monitoring/public/components/chart/info_tooltip.js index a6a47153fda28..505eaec102d4e 100644 --- a/x-pack/plugins/monitoring/public/components/chart/info_tooltip.js +++ b/x-pack/plugins/monitoring/public/components/chart/info_tooltip.js @@ -5,6 +5,7 @@ */ import React from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; export function InfoTooltip({ series, bucketSize }) { const tableRows = series.map((item, index) => { @@ -28,7 +29,12 @@ export function InfoTooltip({ series, bucketSize }) { - + { tableRows } diff --git a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js index abf8598230a67..2348e098fc505 100644 --- a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js +++ b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js @@ -14,6 +14,7 @@ import { InfoTooltip } from './info_tooltip'; import { EuiIconTip, EuiFlexGroup, EuiFlexItem, EuiTitle, EuiScreenReaderOnly } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; export function MonitoringTimeseriesContainer({ series, onBrush }) { if (series === undefined) { @@ -35,7 +36,14 @@ export function MonitoringTimeseriesContainer({ series, onBrush }) { - This chart is not screen reader accessible + + + + +

{ getTitle(series) }{ units ? ` (${units})` : '' }

diff --git a/x-pack/plugins/monitoring/public/directives/chart/index.js b/x-pack/plugins/monitoring/public/directives/chart/index.js index 7237a97f48887..48912e7ecba75 100644 --- a/x-pack/plugins/monitoring/public/directives/chart/index.js +++ b/x-pack/plugins/monitoring/public/directives/chart/index.js @@ -11,6 +11,7 @@ import { uiModules } from 'ui/modules'; import { timefilter } from 'ui/timefilter'; import { MonitoringTimeseriesContainer } from '../../components/chart/monitoring_timeseries_container'; import { EuiSpacer } from '@elastic/eui'; +import { I18nProvider } from '@kbn/i18n/react'; const uiModule = uiModules.get('plugins/monitoring/directives', []); uiModule.directive('monitoringChart', () => { @@ -30,13 +31,15 @@ uiModule.directive('monitoringChart', () => { scope.$watch('series', series => { render( - - - - , + + + + + + , $elem[0] ); }); From db01d315cfb038f96eea44e63b3bf58caf50406d Mon Sep 17 00:00:00 2001 From: Alexandr Ogarkov Date: Mon, 5 Nov 2018 15:12:49 +0300 Subject: [PATCH 3/5] Fix issues with apm --- .../public/components/apm/instance/status.js | 9 +++++++-- .../public/components/apm/instances/status.js | 11 ++++++++--- .../public/views/apm/instance/index.js | 7 +++++-- .../public/views/apm/instances/index.js | 7 +++++-- .../public/views/apm/overview/index.js | 17 +++++++++-------- 5 files changed, 34 insertions(+), 17 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/apm/instance/status.js b/x-pack/plugins/monitoring/public/components/apm/instance/status.js index 24e47cf1c5abe..386ddeaa5bc10 100644 --- a/x-pack/plugins/monitoring/public/components/apm/instance/status.js +++ b/x-pack/plugins/monitoring/public/components/apm/instance/status.js @@ -10,6 +10,7 @@ import { SummaryStatus } from '../../summary_status'; import { ApmStatusIcon } from '../status_icon'; import { formatMetric } from '../../../lib/format_number'; import { formatTimestampToDuration } from '../../../../common'; +import { CALCULATE_DURATION_SINCE } from '../../../../common/constants'; import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; function StatusUI({ stats, intl }) { @@ -59,7 +60,11 @@ function StatusUI({ stats, intl }) { id: 'xpack.monitoring.apm.instance.status.lastEventLabel', defaultMessage: 'Last Event', }), - value: formatTimestampToDuration(+moment(timeOfLastEvent), 'since') + ' ago', + value: intl.formatMessage({ + id: 'xpack.monitoring.apm.instance.status.lastEventDescription', + defaultMessage: '{timeOfLastEvent} ago' }, { + timeOfLastEvent: formatTimestampToDuration(+moment(timeOfLastEvent), CALCULATE_DURATION_SINCE) + }), dataTestSubj: 'timeOfLastEvent', } ]; @@ -68,7 +73,7 @@ function StatusUI({ stats, intl }) { diff --git a/x-pack/plugins/monitoring/public/components/apm/instances/status.js b/x-pack/plugins/monitoring/public/components/apm/instances/status.js index 9032a80e2a5a1..fd32ce26bb294 100644 --- a/x-pack/plugins/monitoring/public/components/apm/instances/status.js +++ b/x-pack/plugins/monitoring/public/components/apm/instances/status.js @@ -10,9 +10,10 @@ import { SummaryStatus } from '../../summary_status'; import { ApmStatusIcon } from '../status_icon'; import { formatMetric } from '../../../lib/format_number'; import { formatTimestampToDuration } from '../../../../common'; +import { CALCULATE_DURATION_SINCE } from '../../../../common/constants'; import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; -export function StatusUI({ stats, intl }) { +function StatusUI({ stats, intl }) { const { apms: { total @@ -43,7 +44,11 @@ export function StatusUI({ stats, intl }) { id: 'xpack.monitoring.apm.instances.status.lastEventLabel', defaultMessage: 'Last Event', }), - value: formatTimestampToDuration(+moment(timeOfLastEvent), 'since') + ' ago', + value: intl.formatMessage({ + id: 'xpack.monitoring.apm.instances.status.lastEventDescription', + defaultMessage: '{timeOfLastEvent} ago' }, { + timeOfLastEvent: formatTimestampToDuration(+moment(timeOfLastEvent), CALCULATE_DURATION_SINCE) + }), dataTestSubj: 'timeOfLastEvent', } ]; @@ -52,7 +57,7 @@ export function StatusUI({ stats, intl }) { diff --git a/x-pack/plugins/monitoring/public/views/apm/instance/index.js b/x-pack/plugins/monitoring/public/views/apm/instance/index.js index 902bdd5c4479d..a9afb883ae725 100644 --- a/x-pack/plugins/monitoring/public/views/apm/instance/index.js +++ b/x-pack/plugins/monitoring/public/views/apm/instance/index.js @@ -40,8 +40,11 @@ uiRoutes.when('/apm/instances/:uuid', { }); super({ - title: i18n('xpack.monitoring.apm.instanceRouteTitle', { - defaultMessage: 'APM - Instance' + title: i18n('xpack.monitoring.apm.instance.routeTitle', { + defaultMessage: '{apm} - Instance', + values: { + apm: 'APM' + } }), api: `../api/monitoring/v1/clusters/${globalState.cluster_uuid}/apm/${$route.current.params.uuid}`, defaultData: {}, diff --git a/x-pack/plugins/monitoring/public/views/apm/instances/index.js b/x-pack/plugins/monitoring/public/views/apm/instances/index.js index a6fdb6e81f960..a49aad8ca912b 100644 --- a/x-pack/plugins/monitoring/public/views/apm/instances/index.js +++ b/x-pack/plugins/monitoring/public/views/apm/instances/index.js @@ -30,8 +30,11 @@ uiRoutes.when('/apm/instances', { }); super({ - title: i18n('xpack.monitoring.apm.instancesRouteTitle', { - defaultMessage: 'APM - Instances' + title: i18n('xpack.monitoring.apm.instances.routeTitle', { + defaultMessage: '{apm} - Instances', + values: { + apm: 'APM' + } }), storageKey: 'apm.instances', api: `../api/monitoring/v1/clusters/${globalState.cluster_uuid}/apm/instances`, diff --git a/x-pack/plugins/monitoring/public/views/apm/overview/index.js b/x-pack/plugins/monitoring/public/views/apm/overview/index.js index cea2fe22e22e0..f06a60d43c1df 100644 --- a/x-pack/plugins/monitoring/public/views/apm/overview/index.js +++ b/x-pack/plugins/monitoring/public/views/apm/overview/index.js @@ -13,6 +13,7 @@ import template from './index.html'; import { MonitoringViewBaseController } from '../../base_controller'; import { ApmOverview } from '../../../components/apm/overview'; import { timefilter } from 'ui/timefilter'; +import { I18nProvider } from '@kbn/i18n/react'; uiRoutes.when('/apm', { template, @@ -23,7 +24,7 @@ uiRoutes.when('/apm', { }, }, controller: class extends MonitoringViewBaseController { - constructor($injector, $scope, i18n) { + constructor($injector, $scope) { const $route = $injector.get('$route'); const globalState = $injector.get('globalState'); $scope.cluster = find($route.current.locals.clusters, { @@ -31,9 +32,7 @@ uiRoutes.when('/apm', { }); super({ - title: i18n('xpack.monitoring.apm.overviewRouteTitle', { - defaultMessage: 'APM' - }), + title: 'APM', api: `../api/monitoring/v1/clusters/${globalState.cluster_uuid}/apm`, defaultData: {}, reactNodeId: 'apmOverviewReact', @@ -56,10 +55,12 @@ uiRoutes.when('/apm', { renderReact(data, onBrush) { const component = ( - + + + ); super.renderReact(component); } From bce30edac3cd9d562aa1d2a61b60666478a591bd Mon Sep 17 00:00:00 2001 From: Alexandr Ogarkov Date: Mon, 5 Nov 2018 15:37:46 +0300 Subject: [PATCH 4/5] Fix issues with chart --- .../public/components/chart/horizontal_legend.js | 12 +++++++++--- .../chart/monitoring_timeseries_container.js | 14 +++++++++++--- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js b/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js index fd7a6e1b1758d..057658a9fa10e 100644 --- a/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js +++ b/x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js @@ -9,9 +9,9 @@ import { includes, isFunction } from 'lodash'; import { EuiKeyboardAccessible, } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n/react'; +import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; -export class HorizontalLegend extends React.Component { +class HorizontalLegendUI extends React.Component { constructor() { super(); this.formatter = this.formatter.bind(this); @@ -37,6 +37,7 @@ export class HorizontalLegend extends React.Component { } createSeries(row, rowIdx) { + const { intl } = this.props; const formatter = row.tickFormatter || this.formatter; const value = formatter(this.props.seriesValues[row.id]); const classes = ['col-md-4 col-xs-6 monRhythmChart__legendItem']; @@ -63,7 +64,10 @@ export class HorizontalLegend extends React.Component { { ' ' + row.label } @@ -87,3 +91,5 @@ export class HorizontalLegend extends React.Component { ); } } + +export const HorizontalLegend = injectI18n(HorizontalLegendUI); diff --git a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js index 2348e098fc505..4a48424f9ed08 100644 --- a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js +++ b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js @@ -14,9 +14,9 @@ import { InfoTooltip } from './info_tooltip'; import { EuiIconTip, EuiFlexGroup, EuiFlexItem, EuiTitle, EuiScreenReaderOnly } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n/react'; +import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; -export function MonitoringTimeseriesContainer({ series, onBrush }) { +function MonitoringTimeseriesContainerUI({ series, onBrush, intl }) { if (series === undefined) { return null; // still loading } @@ -26,7 +26,13 @@ export function MonitoringTimeseriesContainer({ series, onBrush }) { const units = getUnits(series); const bucketSize = get(first(series), 'bucket_size'); // bucket size will be the same for all metrics in all series - const seriesScreenReaderTextList = [`Interval: ${bucketSize}`] + const seriesScreenReaderTextList = [ + intl.formatMessage({ + id: 'xpack.monitoring.chart.seriesScreenReaderListDescription', + defaultMessage: 'Interval: {bucketSize}' }, { + bucketSize + }) + ] .concat(series.map(item => `${item.metric.label}: ${item.metric.description}`)); return ( @@ -77,3 +83,5 @@ export function MonitoringTimeseriesContainer({ series, onBrush }) { ); } +export const MonitoringTimeseriesContainer = injectI18n(MonitoringTimeseriesContainerUI); + From 70701409195137f992f87bb4feb469aba7dd5ef1 Mon Sep 17 00:00:00 2001 From: Alexandr Ogarkov Date: Tue, 6 Nov 2018 19:24:43 +0300 Subject: [PATCH 5/5] Update snapshots --- .../overview/__snapshots__/overview.test.js.snap | 16 ++++++++-------- .../__snapshots__/ccr_shard.test.js.snap | 4 ++-- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/beats/overview/__snapshots__/overview.test.js.snap b/x-pack/plugins/monitoring/public/components/beats/overview/__snapshots__/overview.test.js.snap index c36d2f8ab25be..db320b5973bb7 100644 --- a/x-pack/plugins/monitoring/public/components/beats/overview/__snapshots__/overview.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/beats/overview/__snapshots__/overview.test.js.snap @@ -176,7 +176,7 @@ exports[`Overview that overview page renders normally 1`] = ` hasShadow={false} paddingSize="m" > - @@ -196,7 +196,7 @@ exports[`Overview that overview page renders normally 1`] = ` hasShadow={false} paddingSize="m" > - @@ -216,7 +216,7 @@ exports[`Overview that overview page renders normally 1`] = ` hasShadow={false} paddingSize="m" > - @@ -236,7 +236,7 @@ exports[`Overview that overview page renders normally 1`] = ` hasShadow={false} paddingSize="m" > - @@ -299,7 +299,7 @@ up, but you don't seem to have any activity within the last day." hasShadow={false} paddingSize="m" > - @@ -319,7 +319,7 @@ up, but you don't seem to have any activity within the last day." hasShadow={false} paddingSize="m" > - @@ -339,7 +339,7 @@ up, but you don't seem to have any activity within the last day." hasShadow={false} paddingSize="m" > - @@ -359,7 +359,7 @@ up, but you don't seem to have any activity within the last day." hasShadow={false} paddingSize="m" > - diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap index afcc22304603e..0053db5e055b8 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap @@ -126,7 +126,7 @@ exports[`CcrShard that it renders normally 1`] = ` hasShadow={false} paddingSize="m" > - + - +
Interval + + {bucketSize}