diff --git a/.i18nrc.json b/.i18nrc.json index 68fa80b55fe6a..4f7027e36ee3d 100644 --- a/.i18nrc.json +++ b/.i18nrc.json @@ -25,8 +25,6 @@ }, "exclude": [ "src/ui/ui_render/bootstrap/app_bootstrap.js", - "src/ui/ui_render/ui_render_mixin.js", - "x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js", - "x-pack/plugins/monitoring/public/directives/alerts/index.js" + "src/ui/ui_render/ui_render_mixin.js" ] } diff --git a/src/core/public/notifications/toasts/__snapshots__/toasts_service.test.tsx.snap b/src/core/public/notifications/toasts/__snapshots__/toasts_service.test.tsx.snap index f33bff56f5a63..d30bdead88c35 100644 --- a/src/core/public/notifications/toasts/__snapshots__/toasts_service.test.tsx.snap +++ b/src/core/public/notifications/toasts/__snapshots__/toasts_service.test.tsx.snap @@ -3,23 +3,25 @@ exports[`#start() renders the GlobalToastList into the targetDomElement param 1`] = ` Array [ Array [ - + , + /> + ,
, diff --git a/src/core/public/notifications/toasts/toasts_service.tsx b/src/core/public/notifications/toasts/toasts_service.tsx index fd7f7411b863e..fd2fd29ce978f 100644 --- a/src/core/public/notifications/toasts/toasts_service.tsx +++ b/src/core/public/notifications/toasts/toasts_service.tsx @@ -21,6 +21,7 @@ import React from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { Toast } from '@elastic/eui'; +import { I18nProvider } from '@kbn/i18n/react'; import { GlobalToastList } from './global_toast_list'; import { ToastsStartContract } from './toasts_start_contract'; @@ -35,10 +36,12 @@ export class ToastsService { const toasts = new ToastsStartContract(); render( - toasts.remove(toast)} - toasts$={toasts.get$()} - />, + + toasts.remove(toast)} + toasts$={toasts.get$()} + /> + , this.params.targetDomElement ); diff --git a/x-pack/plugins/monitoring/public/components/alerts/map_severity.js b/x-pack/plugins/monitoring/public/components/alerts/map_severity.js index 29ff9de73a108..2b3f348893402 100644 --- a/x-pack/plugins/monitoring/public/components/alerts/map_severity.js +++ b/x-pack/plugins/monitoring/public/components/alerts/map_severity.js @@ -29,24 +29,41 @@ import { capitalize } from 'lodash'; * @param {Number} severity The number representing the severity. Higher is "worse". * @return {Object} An object containing details about the severity. */ + +import { i18n } from '@kbn/i18n'; + export function mapSeverity(severity) { const floor = Math.floor(severity / 1000); let mapped; switch (floor) { case 0: - mapped = { value: 'low', color: 'warning', iconType: 'dot' }; + mapped = { + value: i18n.translate('xpack.monitoring.alerts.lowSeverityName', { defaultMessage: 'low' }), + color: 'warning', + iconType: 'dot' + }; break; case 1: - mapped = { value: 'medium', color: 'warning', iconType: 'dot' }; + mapped = { + value: i18n.translate('xpack.monitoring.alerts.mediumSeverityName', { defaultMessage: 'medium' }), + color: 'warning', + iconType: 'dot' + }; break; default: // severity >= 2000 - mapped = { value: 'high', color: 'danger', iconType: 'dot' }; + mapped = { + value: i18n.translate('xpack.monitoring.alerts.highSeverityName', { defaultMessage: 'high' }), + color: 'danger', + iconType: 'dot' + }; break; } return { - title: `${capitalize(mapped.value)} severity alert`, + title: i18n.translate('xpack.monitoring.alerts.severityTitle', + { defaultMessage: '{severity} severity alert', values: { severity: capitalize(mapped.value) } } + ), ...mapped }; -} \ No newline at end of file +} diff --git a/x-pack/plugins/monitoring/public/components/cluster/listing/alerts_indicator.js b/x-pack/plugins/monitoring/public/components/cluster/listing/alerts_indicator.js index e3397e01ad913..318b44304bccb 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/listing/alerts_indicator.js +++ b/x-pack/plugins/monitoring/public/components/cluster/listing/alerts_indicator.js @@ -8,12 +8,13 @@ import React from 'react'; import { Tooltip } from 'plugins/monitoring/components/tooltip'; import { mapSeverity } from 'plugins/monitoring/components/alerts/map_severity'; import { EuiHealth } from '@elastic/eui'; +import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; const HIGH_SEVERITY = 2000; const MEDIUM_SEVERITY = 1000; const LOW_SEVERITY = 0; -export function AlertsIndicator({ alerts }) { +function AlertsIndicatorUi({ alerts, intl }) { if (alerts && alerts.count > 0) { const severity = (() => { if (alerts.high > 0) { return HIGH_SEVERITY; } @@ -24,29 +25,49 @@ export function AlertsIndicator({ alerts }) { const tooltipText = (() => { switch (severity) { case HIGH_SEVERITY: - return 'There are some critical cluster issues that require your immediate attention!'; + return intl.formatMessage({ + id: 'xpack.monitoring.cluster.listing.alertsInticator.highSeverityTooltip', + defaultMessage: 'There are some critical cluster issues that require your immediate attention!' }); case MEDIUM_SEVERITY: - return 'There are some issues that might have impact on your cluster.'; + return intl.formatMessage({ + id: 'xpack.monitoring.cluster.listing.alertsInticator.mediumSeverityTooltip', + defaultMessage: 'There are some issues that might have impact on your cluster.' }); default: // might never show - return 'There are some low-severity cluster issues'; + return intl.formatMessage({ + id: 'xpack.monitoring.cluster.listing.alertsInticator.lowSeverityTooltip', + defaultMessage: 'There are some low-severity cluster issues' }); } })(); return ( - Alerts + ); } return ( - + - Clear + ); } + +export const AlertsIndicator = injectI18n(AlertsIndicatorUi); diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js b/x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js index 6f04cdfcbc086..de0318ea3f502 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js @@ -10,6 +10,7 @@ import { mapSeverity } from 'plugins/monitoring/components/alerts/map_severity'; import { formatTimestampToDuration } from '../../../../common/format_timestamp_to_duration'; import { CALCULATE_DURATION_SINCE } from '../../../../common/constants'; import { formatDateTimeLocal } from '../../../../common/formatting'; +import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; import { EuiFlexGroup, @@ -22,7 +23,7 @@ import { EuiCallOut, } from '@elastic/eui'; -export function AlertsPanel({ alerts, changeUrl }) { +function AlertsPanelUi({ alerts, changeUrl, intl }) { const goToAlerts = () => changeUrl('/alerts'); if (!alerts || !alerts.length) { @@ -35,8 +36,11 @@ export function AlertsPanel({ alerts, changeUrl }) { const severityIcon = mapSeverity(item.metadata.severity); if (item.resolved_timestamp) { - severityIcon.title = - `${severityIcon.title} (resolved ${formatTimestampToDuration(item.resolved_timestamp, CALCULATE_DURATION_SINCE)} ago)`; + severityIcon.title = intl.formatMessage({ + id: 'xpack.monitoring.cluster.overview.alertsPanel.severityIconTitle', + defaultMessage: '{severityIconTitle} (resolved {time} ago)' }, + { severityIconTitle: severityIcon.title, time: formatTimestampToDuration(item.resolved_timestamp, CALCULATE_DURATION_SINCE) + }); severityIcon.color = "success"; severityIcon.iconType = "check"; } @@ -60,11 +64,14 @@ export function AlertsPanel({ alerts, changeUrl }) {

- Last checked { - formatDateTimeLocal(item.update_timestamp) - } (triggered { - formatTimestampToDuration(item.timestamp, CALCULATE_DURATION_SINCE) - } ago) +

@@ -80,13 +87,19 @@ export function AlertsPanel({ alerts, changeUrl }) {

- Top cluster alerts +

- View all alerts + @@ -96,3 +109,5 @@ export function AlertsPanel({ alerts, changeUrl }) {
); } + +export const AlertsPanel = injectI18n(AlertsPanelUi); diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/apm_panel.js b/x-pack/plugins/monitoring/public/components/cluster/overview/apm_panel.js index a5726ab46666c..d031f6a57e02b 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/apm_panel.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/apm_panel.js @@ -9,6 +9,7 @@ import moment from 'moment'; import { get } from 'lodash'; import { formatMetric } from 'plugins/monitoring/lib/format_number'; import { ClusterItemContainer, BytesPercentageUsage } from './helpers'; +import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; import { EuiFlexGrid, @@ -22,8 +23,9 @@ import { EuiHorizontalRule, } from '@elastic/eui'; import { formatTimestampToDuration } from '../../../../common'; +import { CALCULATE_DURATION_SINCE } from '../../../../common/constants'; -export function ApmPanel(props) { +function ApmPanelUi(props) { if (!get(props, 'apms.total', 0) > 0) { return null; } @@ -32,7 +34,11 @@ export function ApmPanel(props) { const goToInstances = () => props.changeUrl('apm/instances'); return ( - + @@ -40,22 +46,40 @@ export function ApmPanel(props) {

- Overview +

- Processed Events + + + {formatMetric(props.totalEvents, '0.[0]a')} - Last Event + + + - {formatTimestampToDuration(+moment(props.timeOfLastEvent), 'since') + ' ago'} + @@ -66,16 +90,28 @@ export function ApmPanel(props) {

- APM Servers: {props.apms.total} + {props.apms.total}) }} + />

- Memory Usage + + + @@ -86,3 +122,5 @@ export function ApmPanel(props) { ); } + +export const ApmPanel = injectI18n(ApmPanelUi); diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/beats_panel.js b/x-pack/plugins/monitoring/public/components/cluster/overview/beats_panel.js index 8a0b2e279e9fa..1909698d52963 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/beats_panel.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/beats_panel.js @@ -19,8 +19,9 @@ import { EuiHorizontalRule, } from '@elastic/eui'; import { ClusterItemContainer } from './helpers'; +import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; -export function BeatsPanel(props) { +function BeatsPanelUi(props) { if (!get(props, 'beats.total', 0) > 0) { return null; } @@ -46,7 +47,11 @@ export function BeatsPanel(props) { }); return ( - + @@ -54,20 +59,34 @@ export function BeatsPanel(props) {

- Overview +

- Total Events + + + {formatMetric(props.totalEvents, '0.[0]a')} - Bytes Sent + + + {formatMetric(props.bytesSent, 'byte')} @@ -80,10 +99,17 @@ export function BeatsPanel(props) {

- Beats: {props.beats.total} + {props.beats.total}) }} + />

@@ -97,3 +123,5 @@ export function BeatsPanel(props) { ); } + +export const BeatsPanel = injectI18n(BeatsPanelUi); diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js b/x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js index f3c6f6e8d3173..a87e5b7232cc6 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js @@ -20,6 +20,7 @@ import { EuiHorizontalRule, } from '@elastic/eui'; import { LicenseText } from './license_text'; +import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; const calculateShards = shards => { const total = get(shards, 'total', 0); @@ -39,7 +40,7 @@ const calculateShards = shards => { }; }; -export function ElasticsearchPanel(props) { +function ElasticsearchPanelUi(props) { const clusterStats = props.cluster_stats || {}; const nodes = clusterStats.nodes; @@ -59,7 +60,12 @@ export function ElasticsearchPanel(props) { // if license doesn't support ML, then `ml === null` if (props.ml) { return [ - Jobs, + + + , { props.ml.jobs } ]; } @@ -69,7 +75,13 @@ export function ElasticsearchPanel(props) { const licenseText = ; return ( - + @@ -78,20 +90,35 @@ export function ElasticsearchPanel(props) {

- Overview +

- Version + + + - { props.version || 'N/A' } + { props.version || props.intl.formatMessage({ + id: 'xpack.monitoring.cluster.overview.esPanel.versionNotAvailableDescription', defaultMessage: 'N/A' }) } - Uptime + + + { formatNumber(get(nodes, 'jvm.max_uptime_in_millis'), 'time_since') } @@ -108,20 +135,35 @@ export function ElasticsearchPanel(props) { data-test-subj="esNumberOfNodes" onClick={goToNodes} > - Nodes: { formatNumber(get(nodes, 'count.total'), 'int_commas') } + - Disk Available + + + - JVM Heap + + + - Indices: { formatNumber(get(indices, 'count'), 'int_commas') } + - Documents + { formatNumber(get(indices, 'docs.count'), 'int_commas') } - Disk Usage + { formatNumber(get(indices, 'store.size_in_bytes'), 'byte') } - Primary Shards + { primaries } - Replica Shards + { replicas } @@ -182,3 +243,5 @@ export function ElasticsearchPanel(props) { ); } + +export const ElasticsearchPanel = injectI18n(ElasticsearchPanelUi); diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/helpers.js b/x-pack/plugins/monitoring/public/components/cluster/overview/helpers.js index 88c0e1b91940f..b4446177f0bb8 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/helpers.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/helpers.js @@ -16,6 +16,7 @@ import { EuiHealth, EuiText, } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; export function HealthStatusIndicator(props) { @@ -29,7 +30,11 @@ export function HealthStatusIndicator(props) { return ( - Health is {props.status} + ); } diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/kibana_panel.js b/x-pack/plugins/monitoring/public/components/cluster/overview/kibana_panel.js index 924064a5e2a2a..e7e6e08717b28 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/kibana_panel.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/kibana_panel.js @@ -19,8 +19,9 @@ import { EuiDescriptionListDescription, EuiHorizontalRule, } from '@elastic/eui'; +import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; -export function KibanaPanel(props) { +function KibanaPanelUi(props) { if (!props.count) { return null; } @@ -33,7 +34,13 @@ export function KibanaPanel(props) { const goToInstances = () => props.changeUrl('kibana/instances'); return ( - + @@ -41,22 +48,40 @@ export function KibanaPanel(props) {

- Overview +

- Requests + + + { props.requests_total } - Max. Response Time + + + - { props.response_time_max } ms + @@ -68,19 +93,36 @@ export function KibanaPanel(props) { - Instances: { props.count } + { props.count }) }} + /> - Connections + + + { formatNumber(props.concurrent_connections, 'int_commas') } - Memory Usage + + + @@ -91,3 +133,5 @@ export function KibanaPanel(props) { ); } + +export const KibanaPanel = injectI18n(KibanaPanelUi); diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/license_text.js b/x-pack/plugins/monitoring/public/components/cluster/overview/license_text.js index 17cd262a078b9..0dc646aced960 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/license_text.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/license_text.js @@ -4,21 +4,14 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { Fragment } from 'react'; +import React from 'react'; import moment from 'moment-timezone'; import { capitalize } from 'lodash'; import { EuiLink } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; const formatDateLocal = input => moment.tz(input, moment.tz.guess()).format('LL'); -const WillExpireOn = ({ expiryDate }) => { - if (expiryDate === undefined) { - return null; - } - - return will expire on {formatDateLocal(expiryDate)}; -}; - export function LicenseText({ license, showLicenseExpiration }) { if (!showLicenseExpiration) { return null; @@ -26,7 +19,20 @@ export function LicenseText({ license, showLicenseExpiration }) { return ( - {capitalize(license.type)} license + + ) + }} + /> ); } diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/logstash_panel.js b/x-pack/plugins/monitoring/public/components/cluster/overview/logstash_panel.js index 5394bcc8507bb..c26f7124d7f6d 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/logstash_panel.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/logstash_panel.js @@ -21,8 +21,9 @@ import { EuiDescriptionListDescription, EuiHorizontalRule, } from '@elastic/eui'; +import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; -export function LogstashPanel(props) { +function LogstashPanelUi(props) { if (!props.node_count) { return null; } @@ -32,7 +33,12 @@ export function LogstashPanel(props) { const goToPipelines = () => props.changeUrl('logstash/pipelines'); return ( - + @@ -40,19 +46,33 @@ export function LogstashPanel(props) {

- Overview +

- Events Received + + + { formatNumber(props.events_in_total, '0.[0]a') } - Events Emitted + + + { formatNumber(props.events_out_total, '0.[0]a') } @@ -67,19 +87,38 @@ export function LogstashPanel(props) { - Nodes: { props.node_count } + { props.node_count }) }} + /> - Uptime + + + { formatNumber(props.max_uptime, 'time_since') } - JVM Heap + + + @@ -94,24 +133,44 @@ export function LogstashPanel(props) { - Pipelines: { props.pipeline_count } + { props.pipeline_count }) }} + /> - With Memory Queues + + + { props.queue_types[LOGSTASH.QUEUE_TYPES.MEMORY] } - With Persistent Queues + + + { props.queue_types[LOGSTASH.QUEUE_TYPES.PERSISTED] } @@ -120,3 +179,5 @@ export function LogstashPanel(props) { ); } + +export const LogstashPanel = injectI18n(LogstashPanelUi); diff --git a/x-pack/plugins/monitoring/public/directives/alerts/index.js b/x-pack/plugins/monitoring/public/directives/alerts/index.js index 22efffd61dcfc..d125b0f1c074b 100644 --- a/x-pack/plugins/monitoring/public/directives/alerts/index.js +++ b/x-pack/plugins/monitoring/public/directives/alerts/index.js @@ -17,25 +17,65 @@ import { FormattedAlert } from 'plugins/monitoring/components/alerts/formatted_a import { mapSeverity } from 'plugins/monitoring/components/alerts/map_severity'; import { formatTimestampToDuration } from '../../../common/format_timestamp_to_duration'; import { formatDateTimeLocal } from '../../../common/formatting'; -import { I18nProvider } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; +import { injectI18n, I18nProvider, FormattedMessage } from '@kbn/i18n/react'; const linkToCategories = { - 'elasticsearch/nodes': 'Elasticsearch Nodes', - 'elasticsearch/indices': 'Elasticsearch Indices', - 'kibana/instances': 'Kibana Instances', - 'logstash/instances': 'Logstash Nodes', + 'elasticsearch/nodes': i18n.translate('xpack.monitoring.alerts.esNodesCategoryLabel', { + defaultMessage: 'Elasticsearch Nodes', + }), + 'elasticsearch/indices': i18n.translate('xpack.monitoring.alerts.esIndicesCategoryLabel', { + defaultMessage: 'Elasticsearch Indices', + }), + 'kibana/instances': i18n.translate('xpack.monitoring.alerts.kibanaInstancesCategoryLabel', { + defaultMessage: 'Kibana Instances', + }), + 'logstash/instances': i18n.translate('xpack.monitoring.alerts.logstashNodesCategoryLabel', { + defaultMessage: 'Logstash Nodes', + }), }; const filterFields = [ 'message', 'severity_group', 'prefix', 'suffix', 'metadata.link', 'since', 'timestamp', 'update_timestamp' ]; const columns = [ - { title: 'Status', sortKey: 'metadata.severity', sortOrder: SORT_DESCENDING }, - { title: 'Resolved', sortKey: 'resolved_timestamp' }, - { title: 'Message', sortKey: 'message' }, - { title: 'Category', sortKey: 'metadata.link' }, - { title: 'Last Checked', sortKey: 'update_timestamp' }, - { title: 'Triggered', sortKey: 'timestamp' }, + { + title: i18n.translate('xpack.monitoring.alerts.statusColumnTitle', { + defaultMessage: 'Status', + }), + sortKey: 'metadata.severity', + sortOrder: SORT_DESCENDING + }, + { + title: i18n.translate('xpack.monitoring.alerts.resolvedColumnTitle', { + defaultMessage: 'Resolved', + }), + sortKey: 'resolved_timestamp' + }, + { + title: i18n.translate('xpack.monitoring.alerts.messageColumnTitle', { + defaultMessage: 'Message', + }), + sortKey: 'message' + }, + { + title: i18n.translate('xpack.monitoring.alerts.categoryColumnTitle', { + defaultMessage: 'Category', + }), + sortKey: 'metadata.link' + }, + { + title: i18n.translate('xpack.monitoring.alerts.lastCheckedColumnTitle', { + defaultMessage: 'Last Checked', + }), + sortKey: 'update_timestamp' + }, + { + title: i18n.translate('xpack.monitoring.alerts.triggeredColumnTitle', { + defaultMessage: 'Triggered', + }), + sortKey: 'timestamp' + }, ]; const alertRowFactory = (scope, kbnUrl) => { - return props => { + return injectI18n(props => { const changeUrl = target => { scope.$evalAsync(() => { kbnUrl.changePath(target); @@ -44,13 +84,24 @@ const alertRowFactory = (scope, kbnUrl) => { const severityIcon = mapSeverity(props.metadata.severity); const resolution = { icon: null, - text: 'Not Resolved' + text: props.intl.formatMessage({ id: 'xpack.monitoring.alerts.notResolvedDescription', + defaultMessage: 'Not Resolved', + }) }; if (props.resolved_timestamp) { - resolution.text = `${formatTimestampToDuration(props.resolved_timestamp, CALCULATE_DURATION_SINCE)} ago`; + resolution.text = props.intl.formatMessage({ id: 'xpack.monitoring.alerts.resolvedAgoDescription', + defaultMessage: '{duration} ago', + }, { duration: formatTimestampToDuration(props.resolved_timestamp, CALCULATE_DURATION_SINCE) } + ); } else { - resolution.icon = ; + resolution.icon = ( + + ); } return ( @@ -75,25 +126,31 @@ const alertRowFactory = (scope, kbnUrl) => { /> - { linkToCategories[props.metadata.link] ? linkToCategories[props.metadata.link] : 'General' } + { linkToCategories[props.metadata.link] ? linkToCategories[props.metadata.link] : + props.intl.formatMessage({ id: 'xpack.monitoring.alerts.generalCategoryLabel', defaultMessage: 'General', }) } { formatDateTimeLocal(props.update_timestamp) } - { formatTimestampToDuration(props.timestamp, CALCULATE_DURATION_SINCE) } ago + ); - }; + }); }; const uiModule = uiModules.get('monitoring/directives', []); -uiModule.directive('monitoringClusterAlertsListing', kbnUrl => { +uiModule.directive('monitoringClusterAlertsListing', (kbnUrl, i18n) => { return { restrict: 'E', scope: { alerts: '=' }, link(scope, $el) { + const filterAlertsPlaceholder = i18n('xpack.monitoring.alerts.filterAlertsPlaceholder', { defaultMessage: 'Filter Alerts…' }); scope.$watch('alerts', (alerts = []) => { const alertsTable = ( @@ -101,7 +158,7 @@ uiModule.directive('monitoringClusterAlertsListing', kbnUrl => { { @@ -61,14 +102,36 @@ const clusterRowFactory = (scope, globalState, kbnUrl, showLicenseExpiration) => handleClickIncompatibleLicense() { this.licenseWarning({ - title: `You can't view the "${this.props.cluster_name}" cluster`, + title: ( + + ), text: ( -

The Basic license does not support multi-cluster monitoring.

- Need to monitor multiple clusters?{' '} - Get a license with full functionality{' '} - to enjoy multi-cluster monitoring. + +

+

+ + + + ) + }} + />

), @@ -79,15 +142,44 @@ const clusterRowFactory = (scope, globalState, kbnUrl, showLicenseExpiration) => const licensingPath = `${chrome.getBasePath()}/app/kibana#/management/elasticsearch/license_management/home`; this.licenseWarning({ - title: `You can't view the "${this.props.cluster_name}" cluster`, + title: ( + + ), text: ( -

The license information is invalid.

- Need a license?{' '} - Get a free Basic license or{' '} - get a license with full functionality{' '} - to enjoy multi-cluster monitoring. + +

+

+ + + + ), + getLicenseInfoLink: ( + + + + ) + }} + />

), @@ -136,7 +228,10 @@ const clusterRowFactory = (scope, globalState, kbnUrl, showLicenseExpiration) => // license is expired return ( - Expired + ); } @@ -144,7 +239,11 @@ const clusterRowFactory = (scope, globalState, kbnUrl, showLicenseExpiration) => // license is fine return ( - Expires { moment(this.props.license.expiry_date_in_millis).format('D MMM YY') } + ); }; @@ -167,7 +266,10 @@ const clusterRowFactory = (scope, globalState, kbnUrl, showLicenseExpiration) => onClick={this.handleClickInvalidLicense.bind(this)} > - N/A + ); @@ -212,7 +314,10 @@ const clusterRowFactory = (scope, globalState, kbnUrl, showLicenseExpiration) => trigger="hover" > - N/A + ); @@ -268,7 +373,7 @@ const clusterRowFactory = (scope, globalState, kbnUrl, showLicenseExpiration) => }; const uiModule = uiModules.get('monitoring/directives', []); -uiModule.directive('monitoringClusterListing', ($injector) => { +uiModule.directive('monitoringClusterListing', ($injector, i18n) => { return { restrict: 'E', scope: { @@ -283,6 +388,9 @@ uiModule.directive('monitoringClusterListing', ($injector) => { const globalState = $injector.get('globalState'); const kbnUrl = $injector.get('kbnUrl'); const showLicenseExpiration = $injector.get('showLicenseExpiration'); + const filterClustersPlaceholder = i18n('xpack.monitoring.cluster.listing.filterClustersPlaceholder', + { defaultMessage: 'Filter Clusters…' } + ); scope.$watch('clusters', (clusters = []) => { const clusterTable = ( @@ -295,7 +403,7 @@ uiModule.directive('monitoringClusterListing', ($injector) => { sortKey={scope.sortKey} sortOrder={scope.sortOrder} onNewState={scope.onNewState} - placeholder="Filter Clusters..." + placeholder={filterClustersPlaceholder} filterFields={filterFields} columns={columns} rowComponent={clusterRowFactory(scope, globalState, kbnUrl, showLicenseExpiration)} diff --git a/x-pack/plugins/monitoring/public/directives/cluster/overview/index.js b/x-pack/plugins/monitoring/public/directives/cluster/overview/index.js index 91952c4a9675c..17439f890886e 100644 --- a/x-pack/plugins/monitoring/public/directives/cluster/overview/index.js +++ b/x-pack/plugins/monitoring/public/directives/cluster/overview/index.js @@ -8,6 +8,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Overview } from 'plugins/monitoring/components/cluster/overview'; import { uiModules } from 'ui/modules'; +import { I18nProvider } from '@kbn/i18n/react'; const uiModule = uiModules.get('monitoring/directives', []); uiModule.directive('monitoringClusterOverview', (kbnUrl, showLicenseExpiration) => { @@ -24,11 +25,13 @@ uiModule.directive('monitoringClusterOverview', (kbnUrl, showLicenseExpiration) scope.$watch('cluster', cluster => { ReactDOM.render(( - + + + ), $el[0]); }); diff --git a/x-pack/plugins/monitoring/public/views/alerts/index.html b/x-pack/plugins/monitoring/public/views/alerts/index.html index 115eac1657615..5ef9cc2b03473 100644 --- a/x-pack/plugins/monitoring/public/views/alerts/index.html +++ b/x-pack/plugins/monitoring/public/views/alerts/index.html @@ -6,13 +6,23 @@
-

Alerts

+

+

- « Cluster Overview + +

diff --git a/x-pack/plugins/monitoring/public/views/alerts/index.js b/x-pack/plugins/monitoring/public/views/alerts/index.js index 1a7e21d32d2eb..7b85d19bc8be0 100644 --- a/x-pack/plugins/monitoring/public/views/alerts/index.js +++ b/x-pack/plugins/monitoring/public/views/alerts/index.js @@ -45,7 +45,7 @@ uiRoutes.when('/alerts', { }, controllerAs: 'alerts', controller: class AlertsView extends MonitoringViewBaseController { - constructor($injector, $scope) { + constructor($injector, $scope, i18n) { const $route = $injector.get('$route'); const globalState = $injector.get('globalState'); @@ -53,7 +53,7 @@ uiRoutes.when('/alerts', { $scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid }); super({ - title: 'Cluster Alerts', + title: i18n('xpack.monitoring.alerts.clusterAlertsTitle', { defaultMessage: 'Cluster Alerts' }), getPageData, $scope, $injector diff --git a/x-pack/plugins/monitoring/public/views/cluster/listing/index.html b/x-pack/plugins/monitoring/public/views/cluster/listing/index.html index 5034260e3dab8..5030a67fe3ec5 100644 --- a/x-pack/plugins/monitoring/public/views/cluster/listing/index.html +++ b/x-pack/plugins/monitoring/public/views/cluster/listing/index.html @@ -1,6 +1,11 @@
-

Clusters

+

+