From fd424e627aac6457faa92a8b32d4dbb0de424f13 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Mon, 12 Sep 2022 15:57:46 +0200
Subject: [PATCH] [Synthetics] Fix monitor summary page layout (#140492)

---
 .../monitor_summary/monitor_summary_title.tsx    | 16 +++++++++++++---
 .../synthetics/public/apps/synthetics/routes.tsx | 12 +++---------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_summary/monitor_summary_title.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_summary/monitor_summary_title.tsx
index d8c8e4394f3a5..9e295496dd77c 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_summary/monitor_summary_title.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_summary/monitor_summary_title.tsx
@@ -10,6 +10,7 @@ import { useParams } from 'react-router-dom';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { MonitorSummaryLastRunInfo } from './last_run_info';
 import { getMonitorStatusAction, selectMonitorStatus } from '../../state';
+import { RunTestManually } from './run_test_manually';
 
 export const MonitorSummaryTitle = () => {
   const dispatch = useDispatch();
@@ -23,9 +24,18 @@ export const MonitorSummaryTitle = () => {
   }, [dispatch, monitorId]);
 
   return (
-    <EuiFlexGroup direction="column" gutterSize="xs">
-      <EuiFlexItem>{data?.monitor.name}</EuiFlexItem>
-      <EuiFlexItem grow={false}>{data && <MonitorSummaryLastRunInfo ping={data} />}</EuiFlexItem>
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiFlexGroup direction="column" gutterSize="xs">
+          <EuiFlexItem>{data?.monitor.name}</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            {data && <MonitorSummaryLastRunInfo ping={data} />}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <RunTestManually />
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/routes.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/routes.tsx
index 12783d39e2711..8da37518fbede 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/routes.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/routes.tsx
@@ -17,7 +17,6 @@ import { useInspectorContext } from '@kbn/observability-plugin/public';
 import type { LazyObservabilityPageTemplateProps } from '@kbn/observability-plugin/public';
 import { MonitorAddPage } from './components/monitor_add_edit/monitor_add_page';
 import { MonitorEditPage } from './components/monitor_add_edit/monitor_edit_page';
-import { RunTestManually } from './components/monitor_summary/run_test_manually';
 import { MonitorSummaryHeaderContent } from './components/monitor_summary/monitor_summary_header_content';
 import { MonitorSummaryTitle } from './components/monitor_summary/monitor_summary_title';
 import { MonitorSummaryPage } from './components/monitor_summary/monitor_summary';
@@ -79,22 +78,17 @@ const getRoutes = (
       },
     },
     {
-      title: i18n.translate('xpack.synthetics.gettingStartedRoute.title', {
-        defaultMessage: 'Synthetics Getting Started | {baseTitle}',
+      title: i18n.translate('xpack.synthetics.monitorSummaryRoute.title', {
+        defaultMessage: 'Monitor summary | {baseTitle}',
         values: { baseTitle },
       }),
       path: MONITOR_ROUTE,
       component: () => <MonitorSummaryPage />,
       dataTestSubj: 'syntheticsGettingStartedPage',
-      pageSectionProps: {
-        alignment: 'center',
-        paddingSize: 'none',
-      },
       pageHeader: {
-        paddingSize: 'none',
         children: <MonitorSummaryHeaderContent />,
         pageTitle: <MonitorSummaryTitle />,
-        rightSideItems: [<RunTestManually />],
+        // rightSideItems: [<RunTestManually />],
       },
     },
     {