Skip to content

Feature/translate monitoring apm and chart #25063

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maryia-lapata merged 28 commits into from
Nov 23, 2018
Merged

Feature/translate monitoring apm and chart #25063

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
c7ec189
Merge pull request #1 from elastic/master
Nox911 Sep 24, 2018
fa01b88
Merge pull request #2 from elastic/master
Nox911 Sep 27, 2018
70f6c7e
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Sep 27, 2018
68587a0
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Sep 28, 2018
42aa7d3
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Oct 2, 2018
efeaefe
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Oct 2, 2018
8a054ed
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Oct 8, 2018
b0d1660
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Oct 16, 2018
62b6ad1
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Oct 17, 2018
acbad4b
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Oct 18, 2018
a850650
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Oct 22, 2018
0a200ce
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Oct 25, 2018
b2a8244
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Oct 29, 2018
b4b979e
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Oct 30, 2018
d349a4f
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Oct 31, 2018
ae285b9
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Nov 2, 2018
caa31d5
Translate monitoring - apm
Nox911 Nov 2, 2018
7399eef
Translate monitoring - chart
Nox911 Nov 2, 2018
db01d31
Fix issues with apm
Nox911 Nov 5, 2018
bce30ed
Fix issues with chart
Nox911 Nov 5, 2018
3051641
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Nov 5, 2018
7070140
Update snapshots
Nox911 Nov 6, 2018
6231971
Merge branch 'master' of https://github.com/elastic/kibana
Nox911 Nov 8, 2018
cb91611
Merge branch 'master' into feature/translate-monitoring-apm
Nox911 Nov 8, 2018
01d4a1d
Merge branch 'master' into feature/translate-monitoring-apm
maryia-lapata Nov 19, 2018
5e0e6de
Merge branch 'master' into feature/translate-monitoring-apm
maryia-lapata Nov 20, 2018
81df60e
Merge branch 'master' into feature/translate-monitoring-apm
maryia-lapata Nov 21, 2018
5e66b95
Merge branch 'master' into feature/translate-monitoring-apm
maryia-lapata Nov 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 39 additions & 8 deletions x-pack/plugins/monitoring/public/components/apm/instance/status.js
View file
Open in desktop
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)
Copy link
Copy Markdown
Contributor

@chrisronline chrisronline Nov 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing 'since' argument

Copy link
Copy Markdown
Contributor Author

@Nox911 Nox911 Nov 6, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'since' it's not a label, it's a kind of key, which is passed as a parameter to function formatTimestampToDuration() . And according to this key timeDuration is calculated differently. So we didn't miss 'since' argument, we just replaced it with a constant like in the other code:

Please correct me if I am wrong.

Copy link
Copy Markdown
Contributor

@chrisronline chrisronline Nov 6, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yes you're right!

}),
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
Open in desktop
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
Open in desktop
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)
Copy link
Copy Markdown
Contributor

@chrisronline chrisronline Nov 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again here, missing 'since' argument

Copy link
Copy Markdown
Contributor Author

@Nox911 Nox911 Nov 6, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as above

}),
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
Open in desktop
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
Open in desktop
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