Skip to content

Commit

Permalink
Feature/translate monitoring apm and chart (elastic#25063)
Browse files Browse the repository at this point in the history 
* Translate monitoring - apm

* Translate monitoring - chart

* Fix issues with apm

* Fix issues with chart

* Update snapshots
  • Loading branch information
@Nox911 @maryia-lapata
Nox911 authored and maryia-lapata committed Nov 23, 2018
1 parent 40f0b8f commit 304fdc6
Show file tree
Hide file tree
Showing 13 changed files with 229 additions and 63 deletions.
47 changes: 39 additions & 8 deletions x-pack/plugins/monitoring/public/components/apm/instance/status.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +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 Status({ stats }) {
function StatusUI({ stats, intl }) {
const {
name,
output,
Expand All @@ -22,35 +24,62 @@ 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',
value: formatTimestampToDuration(+moment(timeOfLastEvent), 'since') + ' ago',
label: intl.formatMessage({
id: 'xpack.monitoring.apm.instance.status.lastEventLabel',
defaultMessage: 'Last Event',
}),
value: intl.formatMessage({
id: 'xpack.monitoring.apm.instance.status.lastEventDescription',
defaultMessage: '{timeOfLastEvent} ago' }, {
timeOfLastEvent: formatTimestampToDuration(+moment(timeOfLastEvent), CALCULATE_DURATION_SINCE)
}),
dataTestSubj: 'timeOfLastEvent',
}
];

const IconComponent = ({ status }) => (
<Fragment>
Status: <ApmStatusIcon status={status} />
<FormattedMessage
id="xpack.monitoring.apm.instance.statusDescription"
defaultMessage="Status: {apmStatusIcon}"
values={{
apmStatusIcon: (
<ApmStatusIcon status={status} />
)
}}
/>
</Fragment>
);

Expand All @@ -62,3 +91,5 @@ export function Status({ stats }) {
/>
);
}

export const Status = injectI18n(StatusUI);
69 changes: 59 additions & 10 deletions x-pack/plugins/monitoring/public/components/apm/instances/instances.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -77,7 +121,7 @@ const instanceRowFactory = () => {
};
};

export function ApmServerInstances({ apms }) {
function ApmServerInstancesUI({ apms, intl }) {
const {
pageIndex,
filterText,
Expand All @@ -97,11 +141,16 @@ 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()}
/>
</div>
);
}

export const ApmServerInstances = injectI18n(ApmServerInstancesUI);
37 changes: 31 additions & 6 deletions x-pack/plugins/monitoring/public/components/apm/instances/status.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +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 Status({ stats }) {
function StatusUI({ stats, intl }) {
const {
apms: {
total
Expand All @@ -22,25 +24,46 @@ 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',
value: formatTimestampToDuration(+moment(timeOfLastEvent), 'since') + ' ago',
label: intl.formatMessage({
id: 'xpack.monitoring.apm.instances.status.lastEventLabel',
defaultMessage: 'Last Event',
}),
value: intl.formatMessage({
id: 'xpack.monitoring.apm.instances.status.lastEventDescription',
defaultMessage: '{timeOfLastEvent} ago' }, {
timeOfLastEvent: formatTimestampToDuration(+moment(timeOfLastEvent), CALCULATE_DURATION_SINCE)
}),
dataTestSubj: 'timeOfLastEvent',
}
];

const IconComponent = ({ status }) => (
<Fragment>
Status: <ApmStatusIcon status={status} />
<FormattedMessage
id="xpack.monitoring.apm.instances.statusDescription"
defaultMessage="Status: {apmStatusIcon}"
values={{
apmStatusIcon: (
<ApmStatusIcon status={status} />
)
}}
/>
</Fragment>
);

Expand All @@ -52,3 +75,5 @@ export function Status({ stats }) {
/>
);
}

export const Status = injectI18n(StatusUI);
14 changes: 12 additions & 2 deletions x-pack/plugins/monitoring/public/components/apm/status_icon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -18,6 +19,15 @@ export function ApmStatusIcon({ status, availability = true }) {
})();

return (
<StatusIcon type={type} label={`Health: ${status}`} />
<StatusIcon
type={type}
label={intl.formatMessage({
id: 'xpack.monitoring.apm.healthStatusLabel',
defaultMessage: 'Health: {status}' }, {
status
})}
/>
);
}

export const ApmStatusIcon = injectI18n(ApmStatusIconUI);
16 changes: 8 additions & 8 deletions ...k/plugins/monitoring/public/components/beats/overview/__snapshots__/overview.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ exports[`Overview that overview page renders normally 1`] = `
hasShadow={false}
paddingSize="m"
>
<MonitoringTimeseriesContainer
<InjectIntl(MonitoringTimeseriesContainerUI)
series={1}
/>
</EuiPanel>
Expand All @@ -211,7 +211,7 @@ exports[`Overview that overview page renders normally 1`] = `
hasShadow={false}
paddingSize="m"
>
<MonitoringTimeseriesContainer
<InjectIntl(MonitoringTimeseriesContainerUI)
series={1}
/>
</EuiPanel>
Expand All @@ -231,7 +231,7 @@ exports[`Overview that overview page renders normally 1`] = `
hasShadow={false}
paddingSize="m"
>
<MonitoringTimeseriesContainer
<InjectIntl(MonitoringTimeseriesContainerUI)
series={1}
/>
</EuiPanel>
Expand All @@ -251,7 +251,7 @@ exports[`Overview that overview page renders normally 1`] = `
hasShadow={false}
paddingSize="m"
>
<MonitoringTimeseriesContainer
<InjectIntl(MonitoringTimeseriesContainerUI)
series={1}
/>
</EuiPanel>
Expand Down Expand Up @@ -313,7 +313,7 @@ exports[`Overview that overview page shows a message if there is no beats data 1
hasShadow={false}
paddingSize="m"
>
<MonitoringTimeseriesContainer
<InjectIntl(MonitoringTimeseriesContainerUI)
series={1}
/>
</EuiPanel>
Expand All @@ -333,7 +333,7 @@ exports[`Overview that overview page shows a message if there is no beats data 1
hasShadow={false}
paddingSize="m"
>
<MonitoringTimeseriesContainer
<InjectIntl(MonitoringTimeseriesContainerUI)
series={1}
/>
</EuiPanel>
Expand All @@ -353,7 +353,7 @@ exports[`Overview that overview page shows a message if there is no beats data 1
hasShadow={false}
paddingSize="m"
>
<MonitoringTimeseriesContainer
<InjectIntl(MonitoringTimeseriesContainerUI)
series={1}
/>
</EuiPanel>
Expand All @@ -373,7 +373,7 @@ exports[`Overview that overview page shows a message if there is no beats data 1
hasShadow={false}
paddingSize="m"
>
<MonitoringTimeseriesContainer
<InjectIntl(MonitoringTimeseriesContainerUI)
series={1}
/>
</EuiPanel>
Expand Down
Loading

0 comments on commit 304fdc6

Please sign in to comment.