[9.0] [Synthetics] Fix UI issue on Last test run panel and changed breadcrumb string when creating a monitor (#213874) (#214158)

# Backport This will backport the following commits from `main` to `9.0`: - [[Synthetics] Fix UI issue on Last test run panel and changed breadcrumb string when creating a monitor (#213874)](https://github.com/elastic/kibana/pull/213874)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Francesco Fagnani <fagnani.francesco@gmail.com>
2025-04-24 01:38:56 -04:00 · 2025-03-13 02:19:57 +11:00 · 2025-03-13 02:19:57 +11:00 · 6536b6598d
commit 6536b6598d
parent 66b752064b
4 changed files with 64 additions and 40 deletions
--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/browser_steps_list.tsx
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/browser_steps_list.tsx
@ -16,6 +16,7 @@ import React, {
  useMemo,
 } from 'react';
 import {
+  Criteria,
  EuiBasicTable,
  EuiBasicTableColumn,
  EuiButtonIcon,
@ -24,8 +25,8 @@ import {
  EuiText,
  EuiTextProps,
  EuiTitle,
+  Pagination,
  useEuiTheme,
-  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';

@ -77,6 +78,8 @@ function mapStepIds(steps: JourneyStep[]) {
  return steps.map(({ _id }) => _id).toString();
 }

+const MAX_STEPS_TO_SHOW = 5;
+
 export const BrowserStepsList = ({
  steps,
  error,
@ -88,8 +91,34 @@ export const BrowserStepsList = ({
  showExpand = true,
  testNowMode = false,
 }: Props) => {
-  const stepEnds: JourneyStep[] = steps.filter(isStepEnd);
-  const failedStep = stepEnds.find((step) => step.synthetics.step?.status === 'failed');
+  const [pageIndex, setPageIndex] = useState(0);
+
+  const allStepEnds: JourneyStep[] = steps.filter(isStepEnd);
+  const failedStep = allStepEnds.find((step) => step.synthetics.step?.status === 'failed');
+
+  const shouldPaginate = allStepEnds.length > MAX_STEPS_TO_SHOW;
+
+  const stepEnds = shouldPaginate
+    ? allStepEnds.slice(
+        pageIndex * MAX_STEPS_TO_SHOW,
+        Math.min(pageIndex * MAX_STEPS_TO_SHOW + MAX_STEPS_TO_SHOW, allStepEnds.length)
+      )
+    : allStepEnds;
+
+  const pagination: Pagination | undefined = shouldPaginate
+    ? {
+        pageIndex,
+        pageSize: MAX_STEPS_TO_SHOW,
+        totalItemCount: allStepEnds.length,
+        showPerPageOptions: false,
+      }
+    : undefined;
+
+  const onTableChange = ({ page }: Criteria<JourneyStep>) => {
+    if (page) {
+      setPageIndex(page.index);
+    }
+  };
  /**
   * This component is used in cases where the steps list is not pre-fetched at render time. In that case, we handle the auto-expand
   * in the `useEffect` call below, which will update the expanded map after the data loads. At times, the component is also rendered
@ -105,7 +134,6 @@ export const BrowserStepsList = ({
  const { euiTheme } = useEuiTheme();
  const [expandedMap, setExpandedMap] = useState<Record<string, ReactElement>>(defaultExpanded);
  const [stepIds, setStepIds] = useState<string>(mapStepIds(stepEnds));
-  const isTabletOrGreater = useIsWithinMinBreakpoint('s');

  useEffect(() => {
    /**
@ -284,35 +312,34 @@ export const BrowserStepsList = ({
  ];

  return (
-    <>
-      <EuiBasicTable
-        css={{ overflowX: isTabletOrGreater ? 'auto' : undefined }}
-        cellProps={(row) => {
-          if (expandedMap[row._id]) {
-            return {
-              style: { verticalAlign: 'top' },
-            };
-          }
-        }}
-        compressed={compressed}
-        loading={loading}
-        columns={columns}
-        error={error?.message}
-        items={stepEnds}
-        noItemsMessage={
-          loading
-            ? i18n.translate('xpack.synthetics.monitor.step.loading', {
-                defaultMessage: 'Loading steps...',
-              })
-            : i18n.translate('xpack.synthetics.monitor.step.noDataFound', {
-                defaultMessage: 'No data found',
-              })
+    <EuiBasicTable
+      cellProps={(row) => {
+        if (expandedMap[row._id]) {
+          return {
+            style: { verticalAlign: 'top' },
+          };
        }
-        tableLayout="auto"
-        itemId="_id"
-        itemIdToExpandedRowMap={testNowMode || showExpand ? expandedMap : undefined}
-      />
-    </>
+      }}
+      compressed={compressed}
+      loading={loading}
+      columns={columns}
+      error={error?.message}
+      items={stepEnds}
+      noItemsMessage={
+        loading
+          ? i18n.translate('xpack.synthetics.monitor.step.loading', {
+              defaultMessage: 'Loading steps...',
+            })
+          : i18n.translate('xpack.synthetics.monitor.step.noDataFound', {
+              defaultMessage: 'No data found',
+            })
+      }
+      tableLayout="auto"
+      itemId="_id"
+      itemIdToExpandedRowMap={testNowMode || showExpand ? expandedMap : undefined}
+      onChange={onTableChange}
+      pagination={pagination}
+    />
  );
 };

--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/result_details.tsx
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/result_details.tsx
@ -31,8 +31,8 @@ export const ResultDetails = ({
 }) => {
  return (
    <div>
-      <EuiText className="eui-textNoWrap" size="s">
-        <StatusBadge status={parseBadgeStatus(pingStatus)} />{' '}
+      <StatusBadge status={parseBadgeStatus(pingStatus)} />
+      <EuiText size="s">
        {!testNowMode
          ? i18n.translate('xpack.synthetics.step.duration.label', {
              defaultMessage: 'after {value}',
--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/use_breadcrumbs.ts
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/use_breadcrumbs.ts
@ -30,7 +30,7 @@ export const useMonitorAddEditBreadcrumbs = (isEdit?: boolean) => {
 export const ADD_MONITOR_CRUMB = i18n.translate(
  'xpack.synthetics.monitorManagement.addMonitorCrumb',
  {
-    defaultMessage: 'Add monitor',
+    defaultMessage: 'Create monitor',
  }
 );

--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_summary.tsx
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_summary.tsx
@ -10,7 +10,6 @@ import { EuiTitle, EuiPanel, EuiFlexGroup, EuiFlexItem, EuiText, EuiSpacer } fro
 import { i18n } from '@kbn/i18n';
 import { LoadWhenInView } from '@kbn/observability-shared-plugin/public';
 import { SummaryPanel } from './summary_panel';
-import { useTestFlyoutOpen } from '../../test_now_mode/hooks/use_test_flyout_open';

 import { useMonitorDetailsPage } from '../use_monitor_details_page';
 import { useMonitorRangeFrom } from '../hooks/use_monitor_range_from';
@ -26,8 +25,6 @@ import { MonitorPendingWrapper } from '../monitor_pending_wrapper';
 export const MonitorSummary = () => {
  const { from, to } = useMonitorRangeFrom();

-  const isFlyoutOpen = !!useTestFlyoutOpen();
-
  const dateLabel = from === 'now-30d/d' ? LAST_30_DAYS_LABEL : TO_DATE_LABEL;

  const redirect = useMonitorDetailsPage();
@ -70,13 +67,13 @@ export const MonitorSummary = () => {
      />
      <EuiSpacer size="m" />
      <EuiFlexGroup gutterSize="m" wrap={true}>
-        <EuiFlexItem css={isFlyoutOpen ? { minWidth: 260, maxWidth: 500 } : { maxWidth: 500 }}>
+        <EuiFlexItem css={{ minWidth: 430 }}>
          <LastTestRun />
        </EuiFlexItem>
        <EuiFlexItem css={{ minWidth: 260 }}>
          <MonitorAlerts dateLabel={dateLabel} from={from} to={to} />
          <EuiSpacer size="m" />
-          <StepDurationPanel />
+          <StepDurationPanel legendPosition="bottom" />
        </EuiFlexItem>
      </EuiFlexGroup>
      <EuiSpacer size="m" />