[Synthetics] Add missing monitorType and tag info in cards !!

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

@@ -17,7 +17,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useDispatch } from 'react-redux';
-import { TagsBadges } from './tag_badges';
+import { TagsList } from '@kbn/observability-shared-plugin/public';
 import { PanelWithTitle } from './panel_with_title';
 import { MonitorEnabled } from '../../monitors_page/management/monitor_list_table/monitor_enabled';
 import { getMonitorAction } from '../../../state';
@@ -102,7 +102,11 @@ export const MonitorDetailsPanel = ({
           {latestPing?.timestamp ? (
             <Time timestamp={latestPing?.timestamp} />
           ) : (
-            <EuiText color="subdued">--</EuiText>
+            <EuiText color="subdued">
+              {i18n.translate('xpack.synthetics.monitorDetailsPanel.TextLabel', {
+                defaultMessage: '--',
+              })}
+            </EuiText>
           )}
         </EuiDescriptionListDescription>
         <EuiDescriptionListTitle>{LAST_MODIFIED_LABEL}</EuiDescriptionListTitle>
@@ -121,7 +125,7 @@ export const MonitorDetailsPanel = ({
         <EuiDescriptionListDescription>{monitor.id}</EuiDescriptionListDescription>
         <EuiDescriptionListTitle>{MONITOR_TYPE_LABEL}</EuiDescriptionListTitle>
         <EuiDescriptionListDescription>
-          <MonitorTypeBadge monitor={monitor} />
+          <MonitorTypeBadge monitorType={monitor.type} />
         </EuiDescriptionListDescription>
         <EuiDescriptionListTitle>{FREQUENCY_LABEL}</EuiDescriptionListTitle>
         <EuiDescriptionListDescription>
@@ -139,7 +143,7 @@ export const MonitorDetailsPanel = ({
 
         <EuiDescriptionListTitle>{TAGS_LABEL}</EuiDescriptionListTitle>
         <EuiDescriptionListDescription>
-          <TagsBadges tags={monitor[ConfigKey.TAGS]} />
+          <TagsList tags={monitor[ConfigKey.TAGS]} />
         </EuiDescriptionListDescription>
       </EuiDescriptionList>
     </PanelWithTitle>

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

@@ -6,64 +6,78 @@
  */
 
 import React, { MouseEvent, KeyboardEvent } from 'react';
-import { EuiBadge, EuiIcon } from '@elastic/eui';
+import { EuiBadge, EuiIcon, EuiToolTip } from '@elastic/eui';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
-import {
-  EncryptedSyntheticsMonitor,
-  ConfigKey,
-  FormMonitorType,
-  MonitorTypeEnum,
-} from '../../../../../../common/runtime_types';
+import { i18n } from '@kbn/i18n';
+import { FormMonitorType, MonitorTypeEnum } from '../../../../../../common/runtime_types';
 
 export function MonitorTypeBadge({
-  monitor,
+  monitorType,
   ariaLabel,
   onClick,
   onKeyPress,
 }: {
-  monitor: EncryptedSyntheticsMonitor;
+  monitorType: string;
   ariaLabel?: string;
   onClick?: (evt: MouseEvent<HTMLDivElement>) => void;
   onKeyPress?: (evt: KeyboardEvent<HTMLDivElement>) => void;
 }) {
   const badge = (
     <EuiBadgeStyled data-is-clickable={!!onClick}>
-      <EuiIcon size="s" type={getMonitorTypeBadgeIcon(monitor)} />{' '}
-      {getMonitorTypeBadgeTitle(monitor)}
+      <EuiIcon size="s" type={getMonitorTypeBadgeIcon(monitorType)} />{' '}
+      {getMonitorTypeBadgeTitle(monitorType)}
     </EuiBadgeStyled>
   );
 
   return onClick ? (
-    <div title={ariaLabel} aria-label={ariaLabel} onClick={onClick} onKeyPress={onKeyPress}>
-      {badge}
-    </div>
+    <EuiToolTip content={getFilterTitle(monitorType)} position="left">
+      <div
+        title={ariaLabel}
+        aria-label={ariaLabel}
+        onClick={onClick}
+        onKeyPress={onKeyPress}
+        onMouseDown={(e: MouseEvent) => {
+          // Prevents the click event from being propagated to the @elastic/chart metric
+          e.stopPropagation();
+        }}
+      >
+        {badge}
+      </div>
+    </EuiToolTip>
   ) : (
     badge
   );
 }
 
-function getMonitorTypeBadgeTitle(monitor: EncryptedSyntheticsMonitor) {
-  switch (monitor[ConfigKey.FORM_MONITOR_TYPE]) {
+const getFilterTitle = (type: string) => {
+  return i18n.translate('xpack.synthetics.management.monitorList.monitorType.filter', {
+    defaultMessage: 'Click to filter monitors for type: {type}',
+    values: { type: getMonitorTypeBadgeTitle(type) },
+  });
+};
+
+function getMonitorTypeBadgeTitle(monitorType: string) {
+  switch (monitorType) {
     case FormMonitorType.TCP:
     case FormMonitorType.HTTP:
     case FormMonitorType.ICMP:
-      return monitor?.type?.toUpperCase();
+      return monitorType.toUpperCase();
     case FormMonitorType.SINGLE:
       return 'Page';
     case FormMonitorType.MULTISTEP:
       return 'Journey';
   }
 
-  switch (monitor?.type) {
+  switch (monitorType) {
     case MonitorTypeEnum.BROWSER:
       return 'Journey';
     default:
-      return monitor?.type?.toUpperCase();
+      return monitorType.toUpperCase();
   }
 }
 
-function getMonitorTypeBadgeIcon(monitor: EncryptedSyntheticsMonitor) {
-  return monitor?.type === 'browser' ? 'videoPlayer' : 'online';
+function getMonitorTypeBadgeIcon(monitorType: string) {
+  return monitorType === 'browser' ? 'videoPlayer' : 'online';
 }
 
 const EuiBadgeStyled = euiStyled(EuiBadge)<{ 'data-is-clickable': boolean }>`

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitor_add_edit/monitor_edit_page.test.tsx

@@ -191,6 +191,7 @@ describe('MonitorEditPage', () => {
           attributes: {
             [ConfigKey.MONITOR_SOURCE_TYPE]: 'ui',
             [ConfigKey.FORM_MONITOR_TYPE]: 'multistep',
+            [ConfigKey.MONITOR_TYPE]: 'browser',
             [ConfigKey.LOCATIONS]: [],
             [ConfigKey.THROTTLING_CONFIG]: PROFILES_MAP[PROFILE_VALUES_ENUM.DEFAULT],
           },

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/columns.tsx

@@ -9,7 +9,7 @@ import { EuiBasicTableColumn, EuiButtonIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { FETCH_STATUS } from '@kbn/observability-shared-plugin/public';
+import { FETCH_STATUS, TagsList } from '@kbn/observability-shared-plugin/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useEnablement } from '../../../../hooks';
 import { useCanEditSynthetics } from '../../../../../../hooks/use_capabilities';
@@ -21,7 +21,6 @@ import {
   CANNOT_PERFORM_ACTION_SYNTHETICS,
   NoPermissionsTooltip,
 } from '../../../common/components/permissions';
-import { TagsBadges } from '../../../common/components/tag_badges';
 import { useMonitorAlertEnable } from '../../../../hooks/use_monitor_alert_enable';
 import * as labels from './labels';
 import { MonitorDetailsLink } from './monitor_details_link';
@@ -103,7 +102,7 @@ export function useMonitorListColumns({
       sortable: true,
       render: (_: string, monitor: EncryptedSyntheticsSavedMonitor) => (
         <MonitorTypeBadge
-          monitor={monitor}
+          monitorType={monitor[ConfigKey.MONITOR_TYPE]}
           ariaLabel={labels.getFilterForTypeMessage(monitor[ConfigKey.MONITOR_TYPE])}
           onClick={() => {
             history.push({
@@ -146,7 +145,7 @@ export function useMonitorListColumns({
         defaultMessage: 'Tags',
       }),
       render: (tags: string[]) => (
-        <TagsBadges
+        <TagsList
           tags={tags}
           onClick={(tag) => {
             history.push({ search: `tags=${encodeURIComponent(JSON.stringify([tag]))}` });

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

@@ -8,11 +8,13 @@ import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
 import { css } from '@emotion/react';
 import { Chart, Settings, Metric, MetricTrendShape } from '@elastic/charts';
-import { EuiPanel, EuiIconTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiPanel } from '@elastic/eui';
 import { DARK_THEME } from '@elastic/charts';
 import { useTheme } from '@kbn/observability-shared-plugin/public';
 import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
+import { MetricItemBody } from './metric_item/metric_item_body';
+import { MetricItemExtra } from './metric_item/metric_item_extra';
 import { selectErrorPopoverState, toggleErrorPopoverOpen } from '../../../../state';
 import { useLocationName, useStatusByLocationOverview } from '../../../../hooks';
 import { formatDuration } from '../../../../utils/formatting';
@@ -47,19 +49,18 @@ export const getColor = (
 
 export const MetricItem = ({
   monitor,
-  medianDuration,
-  maxDuration,
-  minDuration,
-  avgDuration,
+  stats,
   data,
   onClick,
 }: {
   monitor: MonitorOverviewItem;
   data: Array<{ x: number; y: number }>;
-  medianDuration: number;
-  avgDuration: number;
-  minDuration: number;
-  maxDuration: number;
+  stats: {
+    medianDuration: number;
+    avgDuration: number;
+    minDuration: number;
+    maxDuration: number;
+  };
   onClick: (params: { id: string; configId: string; location: string; locationId: string }) => void;
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -135,46 +136,13 @@ export const MetricItem = ({
                 {
                   title: monitor.name,
                   subtitle: locationName,
-                  value: medianDuration,
+                  value: stats.medianDuration,
                   trendShape: MetricTrendShape.Area,
                   trend: data,
-                  extra: (
-                    <EuiFlexGroup
-                      alignItems="center"
-                      gutterSize="xs"
-                      justifyContent="flexEnd"
-                      // empty title to prevent default title from showing
-                      title=""
-                      component="span"
-                    >
-                      <EuiFlexItem grow={false} component="span">
-                        {i18n.translate('xpack.synthetics.overview.duration.label', {
-                          defaultMessage: 'Duration',
-                        })}
-                      </EuiFlexItem>
-                      <EuiFlexItem grow={false} component="span">
-                        <EuiIconTip
-                          title={i18n.translate('xpack.synthetics.overview.duration.description', {
-                            defaultMessage: 'Median duration of last 50 checks',
-                          })}
-                          content={i18n.translate(
-                            'xpack.synthetics.overview.duration.description.values',
-                            {
-                              defaultMessage: 'Avg: {avg}, Min: {min}, Max: {max}',
-                              values: {
-                                avg: formatDuration(avgDuration, { noSpace: true }),
-                                min: formatDuration(minDuration, { noSpace: true }),
-                                max: formatDuration(maxDuration, { noSpace: true }),
-                              },
-                            }
-                          )}
-                          position="top"
-                        />
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
-                  ),
+                  extra: <MetricItemExtra stats={stats} />,
                   valueFormatter: (d: number) => formatDuration(d),
                   color: getColor(theme, monitor.isEnabled, status),
+                  body: <MetricItemBody monitor={monitor} />,
                 },
               ],
             ]}