updated translation formatting !!

elastic · Nov 20, 2019 · a523f49 · a523f49
1 parent 7eced3c
commit a523f49
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 19 deletions.
diff --git a/...ime/public/components/functional/monitor_list/monitor_list_drawer/monitor_status_list.tsx b/...ime/public/components/functional/monitor_list/monitor_list_drawer/monitor_status_list.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { get } from 'lodash';
 import { EuiCallOut } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { Check } from '../../../../../common/graphql/types';
 import { LocationLink } from './location_link';
 import { MonitorStatusRow } from './monitor_status_row';
@@ -47,13 +47,11 @@ export const MonitorStatusList = ({ checks }: MonitorStatusListProps) => {
  <MonitorStatusRow locationNames={absUpChecks} status={UP} />
  {(downChecks.has(UNNAMED_LOCATION) || upChecks.has(UNNAMED_LOCATION)) && (
  <EuiCallOut color="warning">
- {i18n.translate('xpack.uptime.monitorList.drawer.missingLocation.description', {
- defaultMessage: `Some heartbeat instances do not have a location defined.`,
- })}
- <LocationLink />{' '}
- {i18n.translate('xpack.uptime.monitorList.drawer.missingLocation.toLocationDocsLink', {
- defaultMessage: `to your heartbeat configuration.`,
- })}
+ <FormattedMessage
+ id="xpack.uptime.monitorList.drawer.missingLocation"
+ defaultMessage="Some heartbeat instances do not have a location defined. {link} to your heartbeat configuration."
+ values={{ link: <LocationLink /> }}
+ />
  </EuiCallOut>
  )}
  </>

diff --git a/...time/public/components/functional/monitor_list/monitor_list_drawer/monitor_status_row.tsx b/...time/public/components/functional/monitor_list/monitor_list_drawer/monitor_status_row.tsx
@@ -6,7 +6,7 @@
 
 import React, { useContext } from 'react';
 import { EuiHealth, EuiSpacer } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { UptimeSettingsContext } from '../../../../contexts';
 import { UNNAMED_LOCATION, UP } from './monitor_status_list';
 
@@ -35,19 +35,29 @@ export const MonitorStatusRow = ({ locationNames, status }: MonitorStatusRowProp
  checkListArray.push(UNNAMED_LOCATION);
  }
 
- return locationNames.size > 0 ? (
+ if (locationNames.size === 0) {
+ return null;
+ }
+
+ const locations = checkListArray.join(', ');
+ return (
  <>
  <EuiHealth color={color}>
- {status === UP
- ? i18n.translate('xpack.uptime.monitorList.drawer.locations.statusUp', {
- defaultMessage: `Up in `,
- })
- : i18n.translate('xpack.uptime.monitorList.drawer.locations.statusDown', {
- defaultMessage: `Down in `,
- })}
- {checkListArray.map((location, index) => (index ? ', ' : '') + location)}
+ {status === UP ? (
+ <FormattedMessage
+ id="xpack.uptime.monitorList.drawer.locations.statusUp"
+ defaultMessage={`Up in {locations}`}
+ values={{ locations }}
+ />
+ ) : (
+ <FormattedMessage
+ id="xpack.uptime.monitorList.drawer.locations.statusDown"
+ defaultMessage={`Down in {locations}`}
+ values={{ locations }}
+ />
+ )}
  </EuiHealth>
  <EuiSpacer size="s" />
  </>
- ) : null;
+ );
 };