[Synthetics] Show pending for no data monitor in flyout (#145273)

## Summary

Fixes https://github.com/elastic/kibana/issues/144853 

Using a shared component for monitor status for flyout and details page 

<img width="1771" alt="image"
src="https://user-images.githubusercontent.com/3505601/201975432-f6c903a7-495a-41bc-a599-84386e2e49cc.png">

x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_status.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import { EuiBadge, EuiDescriptionList, EuiLoadingSpinner } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { EncryptedSyntheticsMonitor } from '../../../../../../common/runtime_types';
+
+export const MonitorStatus = ({
+  loading,
+  monitor,
+  status,
+  compressed = true,
+}: {
+  loading?: boolean;
+  compressed?: boolean;
+  monitor: EncryptedSyntheticsMonitor;
+  status?: string;
+}) => {
+  const isBrowserType = monitor.type === 'browser';
+
+  const badge = loading ? (
+    <EuiLoadingSpinner size="s" />
+  ) : !status ? (
+    <EuiBadge color="default">{PENDING_LABEL}</EuiBadge>
+  ) : status === 'up' ? (
+    <EuiBadge color="success">{isBrowserType ? SUCCESS_LABEL : UP_LABEL}</EuiBadge>
+  ) : (
+    <EuiBadge color="danger">{isBrowserType ? FAILED_LABEL : DOWN_LABEL}</EuiBadge>
+  );
+
+  return (
+    <EuiDescriptionList
+      align="left"
+      compressed={compressed}
+      listItems={[{ title: STATUS_LABEL, description: badge }]}
+    />
+  );
+};
+
+const STATUS_LABEL = i18n.translate('xpack.synthetics.monitorStatus.statusLabel', {
+  defaultMessage: 'Status',
+});
+
+const FAILED_LABEL = i18n.translate('xpack.synthetics.monitorStatus.failedLabel', {
+  defaultMessage: 'Failed',
+});
+
+const PENDING_LABEL = i18n.translate('xpack.synthetics.monitorStatus.pendingLabel', {
+  defaultMessage: 'Pending',
+});
+
+const SUCCESS_LABEL = i18n.translate('xpack.synthetics.monitorStatus.succeededLabel', {
+  defaultMessage: 'Succeeded',
+});
+
+const UP_LABEL = i18n.translate('xpack.synthetics.monitorStatus.upLabel', {
+  defaultMessage: 'Up',
+});
+
+const DOWN_LABEL = i18n.translate('xpack.synthetics.monitorStatus.downLabel', {
+  defaultMessage: 'Down',
+});

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_status.tsx

@@ -5,15 +5,12 @@
  * 2.0.
  */
 import React from 'react';
-import { EuiBadge, EuiDescriptionList, EuiLoadingSpinner } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { useTheme } from '@kbn/observability-plugin/public';
 
+import { MonitorStatus } from '../common/components/monitor_status';
 import { useSelectedMonitor } from './hooks/use_selected_monitor';
 import { useMonitorLatestPing } from './hooks/use_monitor_latest_ping';
 
-export const MonitorDetailsStatus: React.FC = () => {
-  const theme = useTheme();
+export const MonitorDetailsStatus = () => {
   const { latestPing, loading: pingsLoading } = useMonitorLatestPing();
 
   const { monitor } = useSelectedMonitor();
@@ -22,41 +19,12 @@ export const MonitorDetailsStatus: React.FC = () => {
     return null;
   }
 
-  const isBrowserType = monitor.type === 'browser';
-
-  const badge = pingsLoading ? (
-    <EuiLoadingSpinner size="s" />
-  ) : !latestPing ? (
-    <EuiBadge color="default">{PENDING_LABEL}</EuiBadge>
-  ) : latestPing.monitor.status === 'up' ? (
-    <EuiBadge color={theme.eui.euiColorVis0}>{isBrowserType ? SUCCESS_LABEL : UP_LABEL}</EuiBadge>
-  ) : (
-    <EuiBadge color={theme.eui.euiColorVis9}>{isBrowserType ? FAILED_LABEL : DOWN_LABEL}</EuiBadge>
+  return (
+    <MonitorStatus
+      status={latestPing?.monitor.status}
+      monitor={monitor}
+      loading={pingsLoading}
+      compressed={false}
+    />
   );
-
-  return <EuiDescriptionList listItems={[{ title: STATUS_LABEL, description: badge }]} />;
 };
-
-const STATUS_LABEL = i18n.translate('xpack.synthetics.monitorStatus.statusLabel', {
-  defaultMessage: 'Status',
-});
-
-const FAILED_LABEL = i18n.translate('xpack.synthetics.monitorStatus.failedLabel', {
-  defaultMessage: 'Failed',
-});
-
-const PENDING_LABEL = i18n.translate('xpack.synthetics.monitorStatus.pendingLabel', {
-  defaultMessage: 'Pending',
-});
-
-const SUCCESS_LABEL = i18n.translate('xpack.synthetics.monitorStatus.succeededLabel', {
-  defaultMessage: 'Succeeded',
-});
-
-const UP_LABEL = i18n.translate('xpack.synthetics.monitorStatus.upLabel', {
-  defaultMessage: 'Up',
-});
-
-const DOWN_LABEL = i18n.translate('xpack.synthetics.monitorStatus.downLabel', {
-  defaultMessage: 'Down',
-});

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.test.tsx

@@ -134,7 +134,7 @@ describe('Monitor Detail Flyout', () => {
 
     expect(getByText('Every 1 minute'));
     expect(getByText('test-id'));
-    expect(getByText('Up'));
+    expect(getByText('Pending'));
     expect(
       getByRole('heading', {
         level: 2,

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.tsx

@@ -58,6 +58,7 @@ import {
 } from '../types';
 import { useMonitorDetailLocator } from '../../hooks/use_monitor_detail_locator';
 import { fetchSyntheticsMonitor } from '../../../../state/overview/api';
+import { MonitorStatus } from '../../../common/components/monitor_status';
 
 interface Props {
   id: string;
@@ -174,7 +175,8 @@ function LocationSelect({
   setCurrentLocation: (location: string) => void;
 }) {
   const [isOpen, setIsOpen] = useState(false);
-  const isDown = !!locations.find((l) => l.observer?.geo?.name === currentLocation)?.summary?.down;
+  const status = locations.find((l) => l.observer?.geo?.name === currentLocation)?.monitor?.status;
+
   return (
     <EuiFlexGroup wrap={true} responsive={false}>
       <EuiFlexItem grow={false}>
@@ -227,14 +229,7 @@ function LocationSelect({
         </EuiDescriptionList>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiDescriptionList align="left" compressed>
-          <EuiDescriptionListTitle>{STATUS_TITLE_TEXT}</EuiDescriptionListTitle>
-          <EuiDescriptionListDescription>
-            <EuiBadge color={isDown ? 'danger' : 'success'}>
-              {isDown ? MONITOR_STATUS_DOWN_LABEL : MONITOR_STATUS_UP_LABEL}
-            </EuiBadge>
-          </EuiDescriptionListDescription>
-        </EuiDescriptionList>
+        <MonitorStatus status={status} monitor={monitor} />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiDescriptionList align="left" compressed>
@@ -514,10 +509,6 @@ const LAST_RUN_HEADER_TEXT = i18n.translate('xpack.synthetics.monitorList.lastRu
   defaultMessage: 'Last run',
 });
 
-const STATUS_TITLE_TEXT = i18n.translate('xpack.synthetics.monitorList.statusColumnName', {
-  defaultMessage: 'Status',
-});
-
 const LOCATION_TITLE_TEXT = i18n.translate('xpack.synthetics.monitorList.locationColumnName', {
   defaultMessage: 'Location',
 });
@@ -582,22 +573,6 @@ const LOCATION_SELECT_POPOVER_LINK_LABEL = i18n.translate(
   }
 );
 
-const MONITOR_STATUS_UP_LABEL = i18n.translate(
-  'xpack.synthetics.monitorList.flyout.monitorStatus.up',
-  {
-    defaultMessage: 'Up',
-    description: '"Up" in the sense that a process is running and available.',
-  }
-);
-
-const MONITOR_STATUS_DOWN_LABEL = i18n.translate(
-  'xpack.synthetics.monitorList.flyout.monitorStatus.down',
-  {
-    defaultMessage: 'Down',
-    description: '"Down" in the sense that a process is not running or available.',
-  }
-);
-
 function translateUnitMessage(unitMsg: string) {
   return i18n.translate('xpack.synthetics.monitorList.flyout.unitStr', {
     defaultMessage: 'Every {unitMsg}',