[Monitoring] Fix issues with the localization effort (#29372)
* Fix issues with the localization effort, mainly due to two ongoing refactors in the same code * Apply suggestions from code review Co-Authored-By: chrisronline <chrisronline@gmail.com> * PR feedback
This commit is contained in:
parent
4356a2dae3
commit
eec327b1fe
|
@ -14,6 +14,7 @@ import { FormattedAlert } from 'plugins/monitoring/components/alerts/formatted_a
|
||||||
import { EuiMonitoringTable } from 'plugins/monitoring/components/table';
|
import { EuiMonitoringTable } from 'plugins/monitoring/components/table';
|
||||||
import { EuiHealth, EuiIcon, EuiToolTip } from '@elastic/eui';
|
import { EuiHealth, EuiIcon, EuiToolTip } from '@elastic/eui';
|
||||||
import { injectI18n } from '@kbn/i18n/react';
|
import { injectI18n } from '@kbn/i18n/react';
|
||||||
|
import { i18n } from '@kbn/i18n';
|
||||||
|
|
||||||
const linkToCategories = {
|
const linkToCategories = {
|
||||||
'elasticsearch/nodes': 'Elasticsearch Nodes',
|
'elasticsearch/nodes': 'Elasticsearch Nodes',
|
||||||
|
@ -23,7 +24,9 @@ const linkToCategories = {
|
||||||
};
|
};
|
||||||
const getColumns = (kbnUrl, scope) => ([
|
const getColumns = (kbnUrl, scope) => ([
|
||||||
{
|
{
|
||||||
name: 'Status',
|
name: i18n.translate('xpack.monitoring.alerts.statusColumnTitle', {
|
||||||
|
defaultMessage: 'Status',
|
||||||
|
}),
|
||||||
field: 'status',
|
field: 'status',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: severity => {
|
render: severity => {
|
||||||
|
@ -39,19 +42,30 @@ const getColumns = (kbnUrl, scope) => ([
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Resolved',
|
name: i18n.translate('xpack.monitoring.alerts.resolvedColumnTitle', {
|
||||||
|
defaultMessage: 'Resolved',
|
||||||
|
}),
|
||||||
field: 'resolved_timestamp',
|
field: 'resolved_timestamp',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: (resolvedTimestamp) => {
|
render: (resolvedTimestamp) => {
|
||||||
|
const notResolvedLabel = i18n.translate('xpack.monitoring.alerts.notResolvedDescription', {
|
||||||
|
defaultMessage: 'Not Resolved',
|
||||||
|
});
|
||||||
|
|
||||||
const resolution = {
|
const resolution = {
|
||||||
icon: null,
|
icon: null,
|
||||||
text: 'Not Resolved'
|
text: notResolvedLabel,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (resolvedTimestamp) {
|
if (resolvedTimestamp) {
|
||||||
resolution.text = `${formatTimestampToDuration(resolvedTimestamp, CALCULATE_DURATION_SINCE)} ago`;
|
resolution.text = i18n.translate('xpack.monitoring.alerts.resolvedAgoDescription', {
|
||||||
|
defaultMessage: '{duration} ago',
|
||||||
|
values: {
|
||||||
|
duration: formatTimestampToDuration(resolvedTimestamp, CALCULATE_DURATION_SINCE)
|
||||||
|
}
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
resolution.icon = <EuiIcon type="alert" size="m" aria-label="Not Resolved" />;
|
resolution.icon = <EuiIcon type="alert" size="m" aria-label={notResolvedLabel} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -62,7 +76,9 @@ const getColumns = (kbnUrl, scope) => ([
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Message',
|
name: i18n.translate('xpack.monitoring.alerts.messageColumnTitle', {
|
||||||
|
defaultMessage: 'Message',
|
||||||
|
}),
|
||||||
field: 'message',
|
field: 'message',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: (message, alert) => (
|
render: (message, alert) => (
|
||||||
|
@ -80,22 +96,37 @@ const getColumns = (kbnUrl, scope) => ([
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Category',
|
name: i18n.translate('xpack.monitoring.alerts.categoryColumnTitle', {
|
||||||
|
defaultMessage: 'Category',
|
||||||
|
}),
|
||||||
field: 'category',
|
field: 'category',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: link => linkToCategories[link] ? linkToCategories[link] : 'General'
|
render: link => linkToCategories[link]
|
||||||
|
? linkToCategories[link]
|
||||||
|
: i18n.translate('xpack.monitoring.alerts.categoryColumn.generalLabel', {
|
||||||
|
defaultMessage: 'General',
|
||||||
|
})
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Last Checked',
|
name: i18n.translate('xpack.monitoring.alerts.lastCheckedColumnTitle', {
|
||||||
|
defaultMessage: 'Last Checked',
|
||||||
|
}),
|
||||||
field: 'update_timestamp',
|
field: 'update_timestamp',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: timestamp => formatDateTimeLocal(timestamp)
|
render: timestamp => formatDateTimeLocal(timestamp)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Triggered',
|
name: i18n.translate('xpack.monitoring.alerts.triggeredColumnTitle', {
|
||||||
|
defaultMessage: 'Triggered',
|
||||||
|
}),
|
||||||
field: 'timestamp',
|
field: 'timestamp',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: timestamp => formatTimestampToDuration(timestamp, CALCULATE_DURATION_SINCE) + ' ago'
|
render: timestamp => i18n.translate('xpack.monitoring.alerts.triggeredColumnValue', {
|
||||||
|
defaultMessage: '{timestamp} ago',
|
||||||
|
values: {
|
||||||
|
timestamp: formatTimestampToDuration(timestamp, CALCULATE_DURATION_SINCE)
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
|
@ -62,7 +62,12 @@ const columns = [
|
||||||
defaultMessage: 'Last Event'
|
defaultMessage: 'Last Event'
|
||||||
}),
|
}),
|
||||||
field: 'time_of_last_event',
|
field: 'time_of_last_event',
|
||||||
render: value => formatTimestampToDuration(+moment(value), 'since') + ' ago'
|
render: value => i18n.translate('xpack.monitoring.apm.instances.lastEventValue', {
|
||||||
|
defaultMessage: '{timeOfLastEvent} ago',
|
||||||
|
values: {
|
||||||
|
timeOfLastEvent: formatTimestampToDuration(+moment(value), 'since')
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: i18n.translate('xpack.monitoring.apm.instances.allocatedMemoryTitle', {
|
name: i18n.translate('xpack.monitoring.apm.instances.allocatedMemoryTitle', {
|
||||||
|
@ -115,7 +120,10 @@ export function ApmServerInstancesUI({ apms, intl }) {
|
||||||
{
|
{
|
||||||
type: 'field_value_selection',
|
type: 'field_value_selection',
|
||||||
field: 'version',
|
field: 'version',
|
||||||
name: 'Version',
|
name: intl.formatMessage({
|
||||||
|
id: 'xpack.monitoring.apm.instances.versionFilter',
|
||||||
|
defaultMessage: 'Version'
|
||||||
|
}),
|
||||||
options: versions,
|
options: versions,
|
||||||
multiSelect: 'or',
|
multiSelect: 'or',
|
||||||
}
|
}
|
||||||
|
|
|
@ -108,14 +108,18 @@ class ListingUI extends PureComponent {
|
||||||
{
|
{
|
||||||
type: 'field_value_selection',
|
type: 'field_value_selection',
|
||||||
field: 'type',
|
field: 'type',
|
||||||
name: 'Type',
|
name: i18n.translate('xpack.monitoring.beats.instances.typeFilter', {
|
||||||
|
defaultMessage: 'Type'
|
||||||
|
}),
|
||||||
options: types,
|
options: types,
|
||||||
multiSelect: 'or',
|
multiSelect: 'or',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'field_value_selection',
|
type: 'field_value_selection',
|
||||||
field: 'version',
|
field: 'version',
|
||||||
name: 'Version',
|
name: i18n.translate('xpack.monitoring.beats.instances.versionFilter', {
|
||||||
|
defaultMessage: 'Version'
|
||||||
|
}),
|
||||||
options: versions,
|
options: versions,
|
||||||
multiSelect: 'or',
|
multiSelect: 'or',
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { formatMetric } from 'plugins/monitoring/lib/format_number';
|
import { formatMetric } from 'plugins/monitoring/lib/format_number';
|
||||||
import { SummaryStatus } from '../summary_status';
|
import { SummaryStatus } from '../summary_status';
|
||||||
|
import { i18n } from '@kbn/i18n';
|
||||||
|
|
||||||
export function Stats({ stats }) {
|
export function Stats({ stats }) {
|
||||||
const {
|
const {
|
||||||
|
@ -20,7 +21,9 @@ export function Stats({ stats }) {
|
||||||
|
|
||||||
const metrics = [
|
const metrics = [
|
||||||
{
|
{
|
||||||
label: 'Total Beats',
|
label: i18n.translate('xpack.monitoring.beats.overview.totalBeatsLabel', {
|
||||||
|
defaultMessage: 'Total Beats'
|
||||||
|
}),
|
||||||
value: formatMetric(total, 'int_commas'),
|
value: formatMetric(total, 'int_commas'),
|
||||||
'data-test-subj': 'totalBeats'
|
'data-test-subj': 'totalBeats'
|
||||||
},
|
},
|
||||||
|
@ -34,13 +37,17 @@ export function Stats({ stats }) {
|
||||||
})));
|
})));
|
||||||
|
|
||||||
metrics.push({
|
metrics.push({
|
||||||
label: 'Total Events',
|
label: i18n.translate('xpack.monitoring.beats.overview.totalEventsLabel', {
|
||||||
|
defaultMessage: 'Total Events'
|
||||||
|
}),
|
||||||
value: formatMetric(totalEvents, '0.[0]a'),
|
value: formatMetric(totalEvents, '0.[0]a'),
|
||||||
'data-test-subj': 'totalEvents'
|
'data-test-subj': 'totalEvents'
|
||||||
});
|
});
|
||||||
|
|
||||||
metrics.push({
|
metrics.push({
|
||||||
label: 'Bytes Sent',
|
label: i18n.translate('xpack.monitoring.beats.overview.bytesSentLabel', {
|
||||||
|
defaultMessage: 'Bytes Sent'
|
||||||
|
}),
|
||||||
value: formatMetric(bytesSent, 'byte'),
|
value: formatMetric(bytesSent, 'byte'),
|
||||||
'data-test-subj': 'bytesSent'
|
'data-test-subj': 'bytesSent'
|
||||||
});
|
});
|
||||||
|
|
|
@ -8,6 +8,7 @@ import React from 'react';
|
||||||
import { get } from 'lodash';
|
import { get } from 'lodash';
|
||||||
import { formatMetric } from '../../../lib/format_number';
|
import { formatMetric } from '../../../lib/format_number';
|
||||||
import { EuiStat, EuiText, EuiTitle, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
import { EuiStat, EuiText, EuiTitle, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||||
|
import { i18n } from '@kbn/i18n';
|
||||||
|
|
||||||
function OfflineCell() {
|
function OfflineCell() {
|
||||||
return (
|
return (
|
||||||
|
@ -52,10 +53,20 @@ function MetricCell({ isOnline, metric = {}, isPercent, ...props }) {
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
<EuiFlexItem grow={false}>
|
<EuiFlexItem grow={false}>
|
||||||
<EuiText size="xs">
|
<EuiText size="xs">
|
||||||
{ metricVal(maxVal, format, isPercent) + ' max' }
|
{i18n.translate('xpack.monitoring.elasticsearch.nodes.cells.maxText', {
|
||||||
|
defaultMessage: '{metric} max',
|
||||||
|
values: {
|
||||||
|
metric: metricVal(maxVal, format, isPercent)
|
||||||
|
}
|
||||||
|
})}
|
||||||
</EuiText>
|
</EuiText>
|
||||||
<EuiText size="xs">
|
<EuiText size="xs">
|
||||||
{ metricVal(minVal, format, isPercent) + ' min' }
|
{i18n.translate('xpack.monitoring.elasticsearch.nodes.cells.minText', {
|
||||||
|
defaultMessage: '{metric} min',
|
||||||
|
values: {
|
||||||
|
metric: metricVal(minVal, format, isPercent)
|
||||||
|
}
|
||||||
|
})}
|
||||||
</EuiText>
|
</EuiText>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
</EuiFlexGroup>
|
</EuiFlexGroup>
|
||||||
|
|
|
@ -67,7 +67,11 @@ const getColumns = showCgroupMetricsElasticsearch => {
|
||||||
field: 'isOnline',
|
field: 'isOnline',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: value => {
|
render: value => {
|
||||||
const status = value ? 'Online' : 'Offline';
|
const status = value ? i18n.translate('xpack.monitoring.elasticsearch.nodes.statusColumn.onlineLabel', {
|
||||||
|
defaultMessage: 'Online',
|
||||||
|
}) : i18n.translate('xpack.monitoring.elasticsearch.nodes.statusColumn.offlineLabel', {
|
||||||
|
defaultMessage: 'Offline',
|
||||||
|
});
|
||||||
return (
|
return (
|
||||||
<div className="monTableCell__status">
|
<div className="monTableCell__status">
|
||||||
<NodeStatusIcon
|
<NodeStatusIcon
|
||||||
|
|
|
@ -13,6 +13,7 @@ import { ClusterStatus } from '../cluster_status';
|
||||||
import { Sparkline } from 'plugins/monitoring/components/sparkline';
|
import { Sparkline } from 'plugins/monitoring/components/sparkline';
|
||||||
import { EuiMonitoringTable } from '../../table';
|
import { EuiMonitoringTable } from '../../table';
|
||||||
import { injectI18n } from '@kbn/i18n/react';
|
import { injectI18n } from '@kbn/i18n/react';
|
||||||
|
import { i18n } from '@kbn/i18n';
|
||||||
|
|
||||||
class PipelineListingUI extends Component {
|
class PipelineListingUI extends Component {
|
||||||
tooltipXValueFormatter(xValue) {
|
tooltipXValueFormatter(xValue) {
|
||||||
|
@ -29,7 +30,9 @@ class PipelineListingUI extends Component {
|
||||||
|
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
name: 'ID',
|
name: i18n.translate('xpack.monitoring.logstash.pipelines.idTitle', {
|
||||||
|
defaultMessage: 'ID'
|
||||||
|
}),
|
||||||
field: 'id',
|
field: 'id',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: (id) => (
|
render: (id) => (
|
||||||
|
@ -46,7 +49,9 @@ class PipelineListingUI extends Component {
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Events Emitted Rate',
|
name: i18n.translate('xpack.monitoring.logstash.pipelines.eventsEmittedRateTitle', {
|
||||||
|
defaultMessage: 'Events Emitted Rate'
|
||||||
|
}),
|
||||||
field: 'latestThroughput',
|
field: 'latestThroughput',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: (value, pipeline) => {
|
render: (value, pipeline) => {
|
||||||
|
@ -78,7 +83,9 @@ class PipelineListingUI extends Component {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Number of Nodes',
|
name: i18n.translate('xpack.monitoring.logstash.pipelines.numberOfNodesTitle', {
|
||||||
|
defaultMessage: 'Number of Nodes'
|
||||||
|
}),
|
||||||
field: 'latestNodesCount',
|
field: 'latestNodesCount',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: (value, pipeline) => {
|
render: (value, pipeline) => {
|
||||||
|
|
|
@ -9,6 +9,8 @@ import PropTypes from 'prop-types';
|
||||||
import { isEmpty, capitalize } from 'lodash';
|
import { isEmpty, capitalize } from 'lodash';
|
||||||
import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiHorizontalRule } from '@elastic/eui';
|
import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiHorizontalRule } from '@elastic/eui';
|
||||||
import { StatusIcon } from '../status_icon/index.js';
|
import { StatusIcon } from '../status_icon/index.js';
|
||||||
|
import { i18n } from '@kbn/i18n';
|
||||||
|
import { FormattedMessage } from '@kbn/i18n/react';
|
||||||
|
|
||||||
const wrapChild = ({ label, value, ...props }, index) => (
|
const wrapChild = ({ label, value, ...props }, index) => (
|
||||||
<EuiFlexItem
|
<EuiFlexItem
|
||||||
|
@ -27,9 +29,23 @@ const wrapChild = ({ label, value, ...props }, index) => (
|
||||||
|
|
||||||
const DefaultIconComponent = ({ status }) => (
|
const DefaultIconComponent = ({ status }) => (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
Status: {(
|
<FormattedMessage
|
||||||
<StatusIcon type={status.toUpperCase()} label={`Status: ${status}`} />
|
id="xpack.monitoring.summaryStatus.statusIconTitle"
|
||||||
)}
|
defaultMessage="Status: {statusIcon}"
|
||||||
|
values={{
|
||||||
|
statusIcon: (
|
||||||
|
<StatusIcon
|
||||||
|
type={status.toUpperCase()}
|
||||||
|
label={i18n.translate('xpack.monitoring.summaryStatus.statusIconLabel', {
|
||||||
|
defaultMessage: 'Status: {status}',
|
||||||
|
values: {
|
||||||
|
status
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -53,7 +69,9 @@ const StatusIndicator = ({ status, isOnline, IconComponent }) => {
|
||||||
)}
|
)}
|
||||||
titleSize="s"
|
titleSize="s"
|
||||||
textAlign="left"
|
textAlign="left"
|
||||||
description="Status:"
|
description={i18n.translate('xpack.monitoring.summaryStatus.statusDescription', {
|
||||||
|
defaultMessage: 'Status:',
|
||||||
|
})}
|
||||||
/>
|
/>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue