From a523f496d565956092d9812e626a28c41972dcc4 Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Wed, 20 Nov 2019 16:24:18 +0100
Subject: [PATCH] updated translation formatting !!

---
 .../monitor_status_list.tsx                   | 14 ++++----
 .../monitor_status_row.tsx                    | 32 ++++++++++++-------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_status_list.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_status_list.tsx
index 34ba6ecec8edb..82e415cd5e8ae 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_status_list.tsx
+++ b/x-pack/legacy/plugins/uptime/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/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_status_row.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_status_row.tsx
index 5a20be266eef1..abd42dd085ad8 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list_drawer/monitor_status_row.tsx
+++ b/x-pack/legacy/plugins/uptime/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;
+  );
 };