[Synthetics] Improve card view style and responsiveness !! (#231078)

shahzad31 · web-flow · commit f6da71c1ad46 · 2025-08-20T13:52:45.000+02:00
## Summary Fixes #205112 ### XXLarge screen <img width="2560" height="997" alt="image" src="https://github.com/user-attachments/assets/356ac475-68be-4fd8-b8a5-e0b8a80a8635" /> ### Large <img width="1780" height="987" alt="image" src="https://github.com/user-attachments/assets/fafcd620-4b97-4f0d-a7b5-5e6c74d9f4af" /> ### Medium <img width="1483" height="1001" alt="image" src="https://github.com/user-attachments/assets/ed4ff084-bd5d-47e2-bd4c-647618dc5c2d" /> ### Small <img width="1088" height="1001" alt="image" src="https://github.com/user-attachments/assets/f7c74bd5-ac81-49bc-ba29-fdd5ef461c0e" />
diff --git a/x-pack/solutions/observability/plugins/observability_shared/public/components/tags_list/tags_list.tsx b/x-pack/solutions/observability/plugins/observability_shared/public/components/tags_list/tags_list.tsx
@@ -18,8 +18,8 @@ export interface TagsListProps {
   color?: EuiBadgeProps['color'];
   ignoreEmpty?: boolean;
   disableExpand?: boolean;
+  prependChildren?: React.ReactNode;
 }
-
 const getFilterLabel = (tag: string) => {
   return i18n.translate('xpack.observabilityShared.getFilterLabel.filter', {
     defaultMessage: 'Click to filter list with tag {tag}',
@@ -36,6 +36,7 @@ const TagsList = ({
   onClick,
   color = 'hollow',
   disableExpand = false,
+  prependChildren,
 }: TagsListProps) => {
   const [toDisplay, setToDisplay] = useState(numberOfTagsToDisplay);
 
@@ -53,7 +54,8 @@ const TagsList = ({
   const tagsToDisplay = tags.slice(0, toDisplay);
 
   return (
-    <EuiFlexGroup wrap gutterSize="xs" css={{ maxWidth: 400 }} alignItems="baseline">
+    <EuiFlexGroup wrap gutterSize="xs" css={{ maxWidth: 400 }} alignItems="center">
+      {prependChildren}
       {tagsToDisplay.map((tag) => (
         // filtering only makes sense in monitor list, where we have summary
         <EuiFlexItem key={tag} grow={false}>
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item.tsx
@@ -14,6 +14,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import moment from 'moment';
 import React, { useState, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { MetricItemExtra } from './metric_item_extra';
 import type { OverviewStatusMetaData } from '../../../../../../../../common/runtime_types';
 import type { ClientPluginsStart } from '../../../../../../../plugin';
 import { useLocationName, useStatusByLocationOverview } from '../../../../../hooks';
@@ -30,11 +31,10 @@ import {
 import { formatDuration } from '../../../../../utils/formatting';
 import { ActionsPopover } from '../actions_popover';
 import { MetricItemBody } from './metric_item_body';
-import { MetricItemExtra } from './metric_item_extra';
 import { MetricItemIcon } from './metric_item_icon';
 import type { FlyoutParamProps } from '../types';
 
-const METRIC_ITEM_HEIGHT = 170;
+export const METRIC_ITEM_HEIGHT = 180;
 
 export const getColor = (euiTheme: EuiThemeComputed, isEnabled: boolean, status?: string) => {
   if (!isEnabled) {
@@ -62,6 +62,16 @@ export const getColor = (euiTheme: EuiThemeComputed, isEnabled: boolean, status?
   }
 };
 
+const truncateText = (text: string) => {
+  // truncate from middle if longer than maxLength
+  const maxLength = 100;
+  if (text.length <= maxLength) {
+    return text;
+  }
+  const halfLength = Math.floor(maxLength / 2);
+  return `${text.slice(0, halfLength)}…${text.slice(-halfLength)}`;
+};
+
 export const MetricItem = ({
   monitor,
   onClick,
@@ -153,6 +163,9 @@ export const MetricItem = ({
             pointer-events: auto;
             opacity: 1;
           }
+          .echMetricText__body {
+            overflow: visible;
+          }
         `}
         title={moment(timestamp).format('LLL')}
       >
@@ -184,7 +197,7 @@ export const MetricItem = ({
             data={[
               [
                 {
-                  title: monitor.name,
+                  title: truncateText(monitor.name),
                   subtitle: locationName,
                   value: trendData !== 'loading' ? trendData?.median ?? 0 : 0,
                   trendShape: MetricTrendShape.Area,
@@ -200,12 +213,12 @@ export const MetricItem = ({
                         }}
                       />
                     ) : trendData === 'loading' ? (
-                      <div>
+                      <span>
                         <FormattedMessage
-                          defaultMessage="Loading metrics"
+                          defaultMessage="..."
                           id="xpack.synthetics.overview.metricItem.loadingMessage"
                         />
-                      </div>
+                      </span>
                     ) : undefined,
                   valueFormatter: (d: number) => formatDuration(d),
                   color: getColor(euiTheme, monitor.isEnabled, status),
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item_body.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item_body.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { TagsList } from '@kbn/observability-shared-plugin/public';
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { MonitorTypeBadge } from '../../../../common/components/monitor_type_badge';
 import * as labels from '../../../management/monitor_list_table/labels';
 import type { OverviewStatusMetaData } from '../../../../../../../../common/runtime_types';
@@ -17,34 +17,40 @@ export const MetricItemBody = ({ monitor }: { monitor: OverviewStatusMetaData })
   const tags = monitor.tags;
   const history = useHistory();
 
+  const typeBadge = (
+    <MonitorTypeBadge
+      monitorType={monitor.type}
+      ariaLabel={labels.getFilterForTypeMessage(monitor.type)}
+      onClick={() => {
+        history.push({
+          search: `monitorTypes=${encodeURIComponent(JSON.stringify([monitor.type]))}`,
+        });
+      }}
+    />
+  );
+  if (tags.length === 0) {
+    return (
+      <>
+        <EuiSpacer size="xs" />
+        {typeBadge}
+      </>
+    );
+  }
+
   return (
     <>
       <EuiSpacer size="xs" />
-      <EuiFlexGroup gutterSize="xs">
-        <EuiFlexItem grow={false}>
-          <MonitorTypeBadge
-            monitorType={monitor.type}
-            ariaLabel={labels.getFilterForTypeMessage(monitor.type)}
-            onClick={() => {
-              history.push({
-                search: `monitorTypes=${encodeURIComponent(JSON.stringify([monitor.type]))}`,
-              });
-            }}
-          />
-        </EuiFlexItem>
-        {(tags ?? []).length > 0 && (
-          <EuiFlexItem grow={false}>
-            <TagsList
-              color="default"
-              tags={tags}
-              disableExpand={true}
-              onClick={(tag) => {
-                history.push({ search: `tags=${encodeURIComponent(JSON.stringify([tag]))}` });
-              }}
-            />
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
+      {(tags ?? []).length > 0 && (
+        <TagsList
+          prependChildren={<EuiFlexItem grow={false}>{typeBadge}</EuiFlexItem>}
+          color="default"
+          tags={tags}
+          disableExpand={true}
+          onClick={(tag) => {
+            history.push({ search: `tags=${encodeURIComponent(JSON.stringify([tag]))}` });
+          }}
+        />
+      )}
     </>
   );
 };
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid.tsx
@@ -19,7 +19,7 @@ import {
   EuiText,
   EuiAutoSizer,
 } from '@elastic/eui';
-import { MetricItem } from './metric_item/metric_item';
+import { METRIC_ITEM_HEIGHT, MetricItem } from './metric_item/metric_item';
 import { ShowAllSpaces } from '../../common/show_all_spaces';
 import type { OverviewStatusMetaData } from '../../../../../../../common/runtime_types';
 import type { TrendRequest } from '../../../../../../../common/types';
@@ -46,11 +46,11 @@ import { MaybeMonitorDetailsFlyout } from './monitor_detail_flyout';
 import { OverviewGridCompactView } from './compact_view/overview_grid_compact_view';
 import { ViewButtons } from './view_buttons/view_buttons';
 
-const ITEM_HEIGHT = 182;
-const ROW_COUNT = 4;
+const ITEM_HEIGHT = METRIC_ITEM_HEIGHT + 12;
 const MAX_LIST_HEIGHT = 800;
 const MIN_BATCH_SIZE = 20;
 const LIST_THRESHOLD = 12;
+const MIN_CARD_WIDTH = 400;
 
 interface ListItem {
   configId: string;
@@ -69,6 +69,8 @@ export const OverviewGrid = memo(
       groupBy: { field: groupField },
     } = useSelector(selectOverviewState);
 
+    const [rowCount, setRowCount] = useState(5);
+
     const trendData = useSelector(selectOverviewTrends);
     const { perPage } = pageState;
 
@@ -98,17 +100,17 @@ export const OverviewGrid = memo(
     }, [dispatch, maxItem, monitorsSortedByStatus, trendData]);
 
     const listHeight = Math.min(
-      ITEM_HEIGHT * Math.ceil(monitorsSortedByStatus.length / ROW_COUNT),
+      ITEM_HEIGHT * Math.ceil(monitorsSortedByStatus.length / rowCount),
       MAX_LIST_HEIGHT
     );
 
     const listItems: ListItem[][] = useMemo(() => {
       const acc: ListItem[][] = [];
-      for (let i = 0; i < monitorsSortedByStatus.length; i += ROW_COUNT) {
-        acc.push(monitorsSortedByStatus.slice(i, i + ROW_COUNT));
+      for (let i = 0; i < monitorsSortedByStatus.length; i += rowCount) {
+        acc.push(monitorsSortedByStatus.slice(i, i + rowCount));
       }
       return acc;
-    }, [monitorsSortedByStatus]);
+    }, [monitorsSortedByStatus, rowCount]);
 
     useEffect(() => {
       dispatch(refreshOverviewTrends.get());
@@ -168,6 +170,10 @@ export const OverviewGrid = memo(
                         threshold={LIST_THRESHOLD}
                       >
                         {({ onItemsRendered, ref }) => {
+                          // set min row count to based on width to ensure cards are not too small
+                          // min is 1 and max is 5
+                          setRowCount(Math.max(1, Math.min(5, Math.floor(width / MIN_CARD_WIDTH))));
+
                           return (
                             <FixedSizeList
                               // pad computed height to avoid clipping last row's drop shadow
@@ -196,20 +202,20 @@ export const OverviewGrid = memo(
                                     {listData[listIndex].map((_, idx) => (
                                       <EuiFlexItem
                                         data-test-subj="syntheticsOverviewGridItem"
-                                        key={listIndex * ROW_COUNT + idx}
+                                        key={listIndex * rowCount + idx}
                                       >
                                         <MetricItem
                                           monitor={
-                                            monitorsSortedByStatus[listIndex * ROW_COUNT + idx]
+                                            monitorsSortedByStatus[listIndex * rowCount + idx]
                                           }
                                           onClick={setFlyoutConfigCallback}
                                         />
                                       </EuiFlexItem>
                                     ))}
-                                    {listData[listIndex].length % ROW_COUNT !== 0 &&
+                                    {listData[listIndex].length % rowCount !== 0 &&
                                       // Adds empty items to fill out row
                                       Array.from({
-                                        length: ROW_COUNT - listData[listIndex].length,
+                                        length: rowCount - listData[listIndex].length,
                                       }).map((_, idx) => <EuiFlexItem key={idx} />)}
                                   </EuiFlexGroup>
                                 );
@@ -231,7 +237,7 @@ export const OverviewGrid = memo(
             {groupField === 'none' &&
               loaded &&
               // display this footer when user scrolls to end of list
-              currentIndex * ROW_COUNT + ROW_COUNT >= monitorsSortedByStatus.length && (
+              currentIndex * rowCount + rowCount >= monitorsSortedByStatus.length && (
                 <>
                   <EuiSpacer />
                   <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
