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;
+  );
 };