From b4142f2a9f0dc3d31abd43c3234b8d778c72b19f Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 25 Oct 2024 01:13:19 +1100
Subject: [PATCH] [8.x] [Synthetics] Fixes embedded components styles !!
 (#197188) (#197499)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Synthetics] Fixes embedded components styles !!
(#197188)](https://github.com/elastic/kibana/pull/197188)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Shahzad","email":"shahzad31comp@gmail.com"},"sourceCommit":{"committedDate":"2024-10-23T16:34:53Z","message":"[Synthetics]
Fixes embedded components styles !! (#197188)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/190853\r\n\r\nFixes embedded
components styles !!\r\n\r\nHide multiple titles \r\n\r\n###
After\r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\">\r\n\r\n###
Before\r\n<img width=\"1251\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kevin Delemme
<kdelemme@gmail.com>","sha":"d6465c749a554b485d390df4ae8f9628f4aa3661","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-management"],"title":"[Synthetics]
Fixes embedded components styles
!!","number":197188,"url":"https://github.com/elastic/kibana/pull/197188","mergeCommit":{"message":"[Synthetics]
Fixes embedded components styles !! (#197188)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/190853\r\n\r\nFixes embedded
components styles !!\r\n\r\nHide multiple titles \r\n\r\n###
After\r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\">\r\n\r\n###
Before\r\n<img width=\"1251\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kevin Delemme
<kdelemme@gmail.com>","sha":"d6465c749a554b485d390df4ae8f9628f4aa3661"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/197188","number":197188,"mergeCommit":{"message":"[Synthetics]
Fixes embedded components styles !! (#197188)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/190853\r\n\r\nFixes embedded
components styles !!\r\n\r\nHide multiple titles \r\n\r\n###
After\r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\">\r\n\r\n###
Before\r\n<img width=\"1251\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kevin Delemme
<kdelemme@gmail.com>","sha":"d6465c749a554b485d390df4ae8f9628f4aa3661"}}]}]
BACKPORT-->

Co-authored-by: Shahzad <shahzad31comp@gmail.com>
---
 .../common/monitor_configuration.tsx          | 95 ++++++++-----------
 .../common/monitor_filters_form.tsx           | 14 +--
 .../common/monitors_open_configuration.tsx    |  3 +
 .../public/apps/embeddables/common/utils.ts   | 22 +++++
 .../monitors_embeddable_factory.tsx           |  6 ++
 .../monitors_grid_component.tsx               | 10 +-
 .../stats_overview_component.tsx              | 32 +++++--
 .../stats_overview_embeddable_factory.tsx     |  3 +
 .../synthetics_embeddable_context.tsx         | 10 +-
 .../create_monitors_overview_panel_action.tsx |  6 ++
 .../create_stats_overview_panel_action.tsx    |  3 +
 .../components/embeddable_panel_wrapper.tsx   | 67 ++++++++-----
 .../grid_by_group/grid_items_by_group.tsx     | 29 ++++--
 .../overview/overview/overview_status.tsx     | 22 +++--
 .../contexts/synthetics_shared_context.tsx    |  3 +
 .../translations/translations/fr-FR.json      |  1 -
 .../translations/translations/ja-JP.json      |  1 -
 .../translations/translations/zh-CN.json      |  1 -
 18 files changed, 200 insertions(+), 128 deletions(-)
 create mode 100644 x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/utils.ts

diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitor_configuration.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitor_configuration.tsx
index 24995e898b3a1..4092f5cd40478 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitor_configuration.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitor_configuration.tsx
@@ -18,7 +18,6 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { i18n } from '@kbn/i18n';
 import { FormProvider, useForm } from 'react-hook-form';
 import { MonitorFilters } from '../monitors_overview/types';
 import { MonitorFiltersForm } from './monitor_filters_form';
@@ -29,12 +28,14 @@ interface MonitorConfigurationProps {
   };
   onCreate: (props: { filters: MonitorFilters }) => void;
   onCancel: () => void;
+  title: string;
 }
 
 export function MonitorConfiguration({
   initialInput,
   onCreate,
   onCancel,
+  title,
 }: MonitorConfigurationProps) {
   const methods = useForm<MonitorFilters>({
     defaultValues: {
@@ -57,64 +58,50 @@ export function MonitorConfiguration({
   };
 
   return (
-    <EuiFlyout data-test-subj="sloSingleOverviewConfiguration" onClose={onCancel}>
+    <EuiFlyout onClose={onCancel}>
       <EuiFlyoutHeader>
-        <EuiFlexGroup direction="column">
+        <EuiTitle>
+          <h2>{title}</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiTitle>
-              <h2>
-                {i18n.translate(
-                  'xpack.synthetics.overviewEmbeddable.config.sloSelector.headerTitle',
-                  {
-                    defaultMessage: 'Overview configuration',
-                  }
-                )}
-              </h2>
-            </EuiTitle>
+            <EuiFlexGroup>
+              <EuiFlexItem grow>
+                <FormProvider {...methods}>
+                  <MonitorFiltersForm />
+                </FormProvider>
+              </EuiFlexItem>
+            </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
-      </EuiFlyoutHeader>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiButtonEmpty
+            data-test-subj="syntheticsMonitorConfigurationCancelButton"
+            onClick={onCancel}
+          >
+            <FormattedMessage
+              id="xpack.synthetics.embeddable.config.cancelButtonLabel"
+              defaultMessage="Cancel"
+            />
+          </EuiButtonEmpty>
 
-      <>
-        <EuiFlyoutBody>
-          <EuiFlexGroup>
-            <EuiFlexItem>
-              <EuiFlexGroup>
-                <EuiFlexItem data-test-subj="singleSloSelector" grow>
-                  <FormProvider {...methods}>
-                    <MonitorFiltersForm />
-                  </FormProvider>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiFlyoutBody>
-        <EuiFlyoutFooter>
-          <EuiFlexGroup justifyContent="spaceBetween">
-            <EuiButtonEmpty
-              data-test-subj="syntheticsMonitorConfigurationCancelButton"
-              onClick={onCancel}
-            >
-              <FormattedMessage
-                id="xpack.synthetics.sloEmbeddable.config.cancelButtonLabel"
-                defaultMessage="Cancel"
-              />
-            </EuiButtonEmpty>
-
-            <EuiButton
-              data-test-subj="syntheticsMonitorConfigurationSaveButton"
-              isDisabled={!(formState.isDirty || !initialInput)}
-              onClick={onConfirmClick}
-              fill
-            >
-              <FormattedMessage
-                id="xpack.synthetics.overviewEmbeddableSlo.config.confirmButtonLabel"
-                defaultMessage="Save"
-              />
-            </EuiButton>
-          </EuiFlexGroup>
-        </EuiFlyoutFooter>
-      </>
+          <EuiButton
+            data-test-subj="syntheticsMonitorConfigurationSaveButton"
+            isDisabled={!(formState.isDirty || !initialInput)}
+            onClick={onConfirmClick}
+            fill
+          >
+            <FormattedMessage
+              id="xpack.synthetics.overviewEmbeddableSynthetics.config.confirmButtonLabel"
+              defaultMessage="Save"
+            />
+          </EuiButton>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
     </EuiFlyout>
   );
 }
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitor_filters_form.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitor_filters_form.tsx
index 80d2f3aa072cd..a53d275a12428 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitor_filters_form.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitor_filters_form.tsx
@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiFlexGroup, EuiIconTip } from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { FieldSelector } from './field_selector';
@@ -23,18 +23,6 @@ export function MonitorFiltersForm() {
           )}
           name="monitorIds"
           dataTestSubj="syntheticsAvailabilityMonitorSelector"
-          tooltip={
-            <EuiIconTip
-              content={i18n.translate(
-                'xpack.synthetics.monitorEdit.syntheticsAvailability.monitor.tooltip',
-                {
-                  defaultMessage:
-                    'This is the monitor or monitors part of this monitor. Select "*" to group by project, tag, or location',
-                }
-              )}
-              position="top"
-            />
-          }
         />
         <FieldSelector
           label={i18n.translate('xpack.synthetics.monitorEdit.syntheticsAvailability.tags', {
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitors_open_configuration.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitors_open_configuration.tsx
index 48dbcb085b806..9891ed7e5a0ac 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitors_open_configuration.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/monitors_open_configuration.tsx
@@ -18,7 +18,9 @@ export async function openMonitorConfiguration({
   coreStart,
   pluginStart,
   initialState,
+  title,
 }: {
+  title: string;
   coreStart: CoreStart;
   pluginStart: ClientPluginsStart;
   initialState?: { filters: MonitorFilters };
@@ -37,6 +39,7 @@ export async function openMonitorConfiguration({
           >
             <QueryClientProvider client={queryClient}>
               <MonitorConfiguration
+                title={title}
                 initialInput={initialState}
                 onCreate={(update: { filters: MonitorFilters }) => {
                   flyoutSession.close();
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/utils.ts b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/utils.ts
new file mode 100644
index 0000000000000..0a5e104a74270
--- /dev/null
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/common/utils.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { MonitorFilters } from '../monitors_overview/types';
+
+export const areFiltersEmpty = (filters: MonitorFilters) => {
+  if (!filters) {
+    return true;
+  }
+
+  return (
+    !filters.monitorIds?.length &&
+    !filters.projects?.length &&
+    !filters.tags?.length &&
+    !filters.monitorTypes?.length &&
+    !filters.locations?.length
+  );
+};
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/monitors_overview/monitors_embeddable_factory.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/monitors_overview/monitors_embeddable_factory.tsx
index e23de3cc67a14..3908063e68116 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/monitors_overview/monitors_embeddable_factory.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/monitors_overview/monitors_embeddable_factory.tsx
@@ -87,6 +87,12 @@ export const getMonitorsEmbeddableFactory = (
                 initialState: {
                   filters: filters$.getValue(),
                 },
+                title: i18n.translate(
+                  'xpack.synthetics.editSyntheticsOverviewEmbeddableTitle.overview.title',
+                  {
+                    defaultMessage: 'Create monitors overview',
+                  }
+                ),
               });
               filters$.next(result.filters);
             } catch (e) {
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/monitors_overview/monitors_grid_component.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/monitors_overview/monitors_grid_component.tsx
index c3801bb98ca9a..c6465b9d56408 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/monitors_overview/monitors_grid_component.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/monitors_overview/monitors_grid_component.tsx
@@ -7,8 +7,8 @@
 
 import React, { useEffect, useRef } from 'react';
 import { Subject } from 'rxjs';
-import { i18n } from '@kbn/i18n';
 import { useDispatch } from 'react-redux';
+import { areFiltersEmpty } from '../common/utils';
 import { getOverviewStore } from './redux_store';
 import { ShowSelectedFilters } from '../common/show_selected_filters';
 import { setOverviewPageStateAction } from '../../synthetics/state';
@@ -26,13 +26,11 @@ export const StatusGridComponent = ({
 }) => {
   const overviewStore = useRef(getOverviewStore());
 
+  const hasFilters = !areFiltersEmpty(filters);
+
   return (
     <EmbeddablePanelWrapper
-      title={i18n.translate(
-        'xpack.synthetics.statusOverviewComponent.embeddablePanelWrapper.monitorsLabel',
-        { defaultMessage: 'Monitors' }
-      )}
-      titleAppend={<ShowSelectedFilters filters={filters ?? {}} />}
+      titleAppend={hasFilters ? <ShowSelectedFilters filters={filters ?? {}} /> : null}
     >
       <SyntheticsEmbeddableContext reload$={reload$} reduxStore={overviewStore.current}>
         <MonitorsOverviewList filters={filters} />
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/stats_overview/stats_overview_component.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/stats_overview/stats_overview_component.tsx
index 579596615ae72..a7c1cee656795 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/stats_overview/stats_overview_component.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/stats_overview/stats_overview_component.tsx
@@ -8,6 +8,8 @@
 import React, { useEffect, useRef } from 'react';
 import { Subject } from 'rxjs';
 import { useDispatch } from 'react-redux';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { areFiltersEmpty } from '../common/utils';
 import { getStatsOverviewStore } from './redux_store';
 import { ShowSelectedFilters } from '../common/show_selected_filters';
 import { MonitorFilters } from '../monitors_overview/types';
@@ -26,7 +28,16 @@ export const StatsOverviewComponent = ({
 
   return (
     <SyntheticsEmbeddableContext reload$={reload$} reduxStore={statsOverviewStore.current}>
-      <WithFiltersComponent filters={filters} />
+      <EuiFlexGroup
+        alignItems="center"
+        css={{
+          height: '100%',
+        }}
+      >
+        <EuiFlexItem>
+          <WithFiltersComponent filters={filters ?? {}} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </SyntheticsEmbeddableContext>
   );
 };
@@ -36,14 +47,21 @@ const WithFiltersComponent = ({ filters }: { filters: MonitorFilters }) => {
   useEffect(() => {
     dispatch(
       setOverviewPageStateAction({
-        tags: filters.tags.map((tag) => tag.value),
-        locations: filters.locations.map((location) => location.value),
-        monitorTypes: filters.monitorTypes.map((monitorType) => monitorType.value),
-        monitorQueryIds: filters.monitorIds.map((monitorId) => monitorId.value),
-        projects: filters.projects.map((project) => project.value),
+        tags: filters.tags?.map((tag) => tag.value),
+        locations: filters.locations?.map((location) => location.value),
+        monitorTypes: filters.monitorTypes?.map((monitorType) => monitorType.value),
+        monitorQueryIds: filters.monitorIds?.map((monitorId) => monitorId.value),
+        projects: filters.projects?.map((project) => project.value),
       })
     );
   }, [dispatch, filters]);
 
-  return <OverviewStatus titleAppend={<ShowSelectedFilters filters={filters ?? {}} />} />;
+  const hasFilters = !areFiltersEmpty(filters);
+
+  return (
+    <OverviewStatus
+      titleAppend={hasFilters ? <ShowSelectedFilters filters={filters ?? {}} /> : null}
+      hideTitle={true}
+    />
+  );
 };
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/stats_overview/stats_overview_embeddable_factory.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/stats_overview/stats_overview_embeddable_factory.tsx
index 07f1e72fa1e98..83b37f080d422 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/stats_overview/stats_overview_embeddable_factory.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/stats_overview/stats_overview_embeddable_factory.tsx
@@ -80,6 +80,9 @@ export const getStatsOverviewEmbeddableFactory = (
                 initialState: {
                   filters: filters$.getValue(),
                 },
+                title: i18n.translate('xpack.synthetics.editSloOverviewEmbeddableTitle.title', {
+                  defaultMessage: 'Create monitor stats',
+                }),
               });
               filters$.next(result.filters);
             } catch (e) {
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/synthetics_embeddable_context.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/synthetics_embeddable_context.tsx
index 5e7b912d43eba..53e242f77c23c 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/synthetics_embeddable_context.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/synthetics_embeddable_context.tsx
@@ -7,7 +7,6 @@
 
 import React from 'react';
 import { createBrowserHistory } from 'history';
-import { EuiPanel } from '@elastic/eui';
 import { Router } from '@kbn/shared-ux-router';
 import { Subject } from 'rxjs';
 import { Store } from 'redux';
@@ -29,14 +28,7 @@ export const SyntheticsEmbeddableContext: React.FC<
       <SyntheticsEmbeddableStateContextProvider>
         <Router history={createBrowserHistory()}>
           <SyntheticsSettingsContextProvider {...props}>
-            <EuiPanel
-              hasShadow={false}
-              css={{
-                width: '100%',
-              }}
-            >
-              {children}
-            </EuiPanel>
+            {children}
           </SyntheticsSettingsContextProvider>
         </Router>
       </SyntheticsEmbeddableStateContextProvider>
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/ui_actions/create_monitors_overview_panel_action.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/ui_actions/create_monitors_overview_panel_action.tsx
index c3f935add49c4..1e6eb30c7cc02 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/ui_actions/create_monitors_overview_panel_action.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/ui_actions/create_monitors_overview_panel_action.tsx
@@ -38,6 +38,12 @@ export function createMonitorsOverviewPanelAction(
       const initialState = await openMonitorConfiguration({
         coreStart,
         pluginStart,
+        title: i18n.translate(
+          'xpack.synthetics.editSyntheticsOverviewEmbeddableTitle.overview.title',
+          {
+            defaultMessage: 'Create monitors overview',
+          }
+        ),
       });
       try {
         embeddable.addNewPanel({
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/ui_actions/create_stats_overview_panel_action.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/ui_actions/create_stats_overview_panel_action.tsx
index 9f88e38c3640c..f3311bec302f7 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/ui_actions/create_stats_overview_panel_action.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/embeddables/ui_actions/create_stats_overview_panel_action.tsx
@@ -39,6 +39,9 @@ export function createStatusOverviewPanelAction(
         const initialState = await openMonitorConfiguration({
           coreStart,
           pluginStart,
+          title: i18n.translate('xpack.synthetics.editSyntheticsOverviewEmbeddableTitle.title', {
+            defaultMessage: 'Create monitor stats',
+          }),
         });
         embeddable.addNewPanel({
           panelType: SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE,
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/common/components/embeddable_panel_wrapper.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/common/components/embeddable_panel_wrapper.tsx
index 1d3328197fb55..168984361795e 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/common/components/embeddable_panel_wrapper.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/common/components/embeddable_panel_wrapper.tsx
@@ -6,37 +6,58 @@
  */
 
 import React, { FC } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiProgress, EuiTitle } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiProgress,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
 import { AddToDashboard } from './add_to_dashboard';
 import { SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE } from '../../../../embeddables/constants';
 
-export const EmbeddablePanelWrapper: FC<
-  React.PropsWithChildren<{
-    title: string;
-    loading?: boolean;
-    titleAppend?: React.ReactNode;
-  }>
-> = ({ children, title, loading, titleAppend }) => {
+interface Props {
+  title?: string;
+  loading?: boolean;
+  hideTitle?: boolean;
+  titleAppend?: React.ReactNode;
+}
+
+export const EmbeddablePanelWrapper: FC<React.PropsWithChildren<Props>> = ({
+  children,
+  title,
+  loading,
+  titleAppend,
+  hideTitle,
+}) => {
   const isSyntheticsApp = window.location.pathname.includes('/app/synthetics');
 
+  const noTitle = !title && !titleAppend;
   return (
     <>
-      <EuiPanel hasShadow={false} hasBorder>
+      <EuiPanel hasShadow={false} hasBorder={isSyntheticsApp}>
+        {!noTitle && (
+          <>
+            <EuiFlexGroup>
+              <EuiFlexItem grow={true}>
+                {(!hideTitle || !title) && (
+                  <EuiTitle size="xs">
+                    <h3>{title}</h3>
+                  </EuiTitle>
+                )}
+              </EuiFlexItem>
+              {isSyntheticsApp && (
+                <EuiFlexItem grow={false}>
+                  <AddToDashboard type={SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE} />
+                </EuiFlexItem>
+              )}
+              {titleAppend && <EuiFlexItem grow={false}>{titleAppend}</EuiFlexItem>}
+            </EuiFlexGroup>
+            <EuiSpacer size="s" />
+          </>
+        )}
         {loading && <EuiProgress size="xs" color="accent" />}
-        <EuiFlexGroup>
-          <EuiFlexItem grow={true}>
-            <EuiTitle size="xs">
-              <h3>{title}</h3>
-            </EuiTitle>
-          </EuiFlexItem>
-          {isSyntheticsApp && (
-            <EuiFlexItem grow={false}>
-              <AddToDashboard type={SYNTHETICS_STATS_OVERVIEW_EMBEDDABLE} />
-            </EuiFlexItem>
-          )}
-          {titleAppend && <EuiFlexItem grow={false}>{titleAppend}</EuiFlexItem>}
-        </EuiFlexGroup>
-
         {children}
       </EuiPanel>
     </>
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/grid_by_group/grid_items_by_group.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/grid_by_group/grid_items_by_group.tsx
index 1951e0744c9e8..a2e9226e26162 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/grid_by_group/grid_items_by_group.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/grid_by_group/grid_items_by_group.tsx
@@ -10,6 +10,7 @@ import React, { useRef, useState, FC, PropsWithChildren } from 'react';
 import { useSelector } from 'react-redux';
 import { get, invert, orderBy } from 'lodash';
 import styled from 'styled-components';
+import { i18n } from '@kbn/i18n';
 import { OverviewLoader } from '../overview_loader';
 import {
   getSyntheticsFilterDisplayValues,
@@ -60,18 +61,25 @@ export const GridItemsByGroup = ({
         items: monitorTypes,
         values: getSyntheticsFilterDisplayValues(monitorTypes, 'monitorTypes', allLocations),
         otherValues: {
-          label: 'Invalid monitor type',
+          label: i18n.translate('xpack.synthetics.monitorsPage.overview.gridItemsByGroup.noType', {
+            defaultMessage: 'Invalid monitor type',
+          }),
           items: allConfigs?.filter((monitor) => !get(monitor, ConfigKey.MONITOR_TYPE)),
         },
       };
       break;
     case 'locationId':
       selectedGroup = {
-        key: 'location.label',
+        key: 'locationLabel',
         items: locations,
         values: getSyntheticsFilterDisplayValues(locations, 'locations', allLocations),
         otherValues: {
-          label: 'Without any location',
+          label: i18n.translate(
+            'xpack.synthetics.monitorsPage.overview.gridItemsByGroup.noLocations',
+            {
+              defaultMessage: 'Without any location',
+            }
+          ),
           items: allConfigs?.filter((monitor) => !get(monitor, 'location')),
         },
       };
@@ -82,7 +90,9 @@ export const GridItemsByGroup = ({
         items: tags,
         values: getSyntheticsFilterDisplayValues(tags, 'tags', allLocations),
         otherValues: {
-          label: 'Without any tags',
+          label: i18n.translate('xpack.synthetics.monitorsPage.overview.gridItemsByGroup.noTags', {
+            defaultMessage: 'Without any tags',
+          }),
           items: allConfigs?.filter((monitor) => get(monitor, 'tags', []).length === 0),
         },
       };
@@ -93,7 +103,12 @@ export const GridItemsByGroup = ({
         items: projects,
         values: getSyntheticsFilterDisplayValues(projects, 'projects', allLocations),
         otherValues: {
-          label: 'UI Monitors',
+          label: i18n.translate(
+            'xpack.synthetics.monitorsPage.overview.gridItemsByGroup.uiMonitors',
+            {
+              defaultMessage: 'UI Monitors',
+            }
+          ),
           items: allConfigs?.filter((monitor) => !Boolean(monitor.projectId)),
         },
       };
@@ -138,11 +153,11 @@ export const GridItemsByGroup = ({
           </>
         );
       })}
-      {selectedGroup.otherValues.items?.length && (
+      {(selectedGroup.otherValues.items ?? []).length > 0 && (
         <WrappedPanel isFullScreen={fullScreenGroup === selectedGroup.otherValues.label}>
           <GroupGridItem
             groupLabel={selectedGroup.otherValues.label}
-            groupMonitors={selectedGroup.otherValues.items}
+            groupMonitors={selectedGroup.otherValues.items ?? []}
             loaded={loaded}
             setFlyoutConfigCallback={setFlyoutConfigCallback}
             setFullScreenGroup={setFullScreenGroup}
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_status.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_status.tsx
index 88133c5c06d38..6e7d35f448691 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_status.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_status.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiStat } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiStat } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
@@ -19,7 +19,13 @@ function title(t?: number) {
   return t ?? '-';
 }
 
-export function OverviewStatus({ titleAppend }: { titleAppend?: React.ReactNode }) {
+export function OverviewStatus({
+  titleAppend,
+  hideTitle,
+}: {
+  titleAppend?: React.ReactNode;
+  hideTitle?: boolean;
+}) {
   const { statusFilter } = useGetUrlParams();
 
   const {
@@ -92,8 +98,12 @@ export function OverviewStatus({ titleAppend }: { titleAppend?: React.ReactNode
   }, [status, statusFilter]);
 
   return (
-    <EmbeddablePanelWrapper title={headingText} loading={loading} titleAppend={titleAppend}>
-      <EuiSpacer size="m" />
+    <EmbeddablePanelWrapper
+      title={headingText}
+      loading={loading}
+      titleAppend={titleAppend}
+      hideTitle={hideTitle}
+    >
       <EuiFlexGroup gutterSize="xl" justifyContent="spaceAround">
         <EuiFlexItem grow={false}>
           <EuiStat
@@ -142,8 +152,8 @@ export function OverviewStatus({ titleAppend }: { titleAppend?: React.ReactNode
   );
 }
 
-const headingText = i18n.translate('xpack.synthetics.overview.status.headingText', {
-  defaultMessage: 'Current status',
+const headingText = i18n.translate('xpack.synthetics.overview.monitors.headingText', {
+  defaultMessage: 'Monitors status',
 });
 
 const upDescription = i18n.translate('xpack.synthetics.overview.status.up.description', {
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/contexts/synthetics_shared_context.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/contexts/synthetics_shared_context.tsx
index abe990d4f401c..6d4188938b451 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/contexts/synthetics_shared_context.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/contexts/synthetics_shared_context.tsx
@@ -50,6 +50,9 @@ export const SyntheticsSharedContext: React.FC<
                 coreStart={{
                   application: coreStart.application,
                 }}
+                style={{
+                  height: '100%',
+                }}
               >
                 {children}
               </RedirectAppLinks>
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index 0f9f07169894b..8761399b5d33a 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@@ -44465,7 +44465,6 @@
     "xpack.synthetics.overview.status.filters.legend": "Statut du moniteur",
     "xpack.synthetics.overview.status.filters.pending": "En attente",
     "xpack.synthetics.overview.status.filters.up": "Opérationnel",
-    "xpack.synthetics.overview.status.headingText": "Statut actuel",
     "xpack.synthetics.overview.status.pending.description": "En attente",
     "xpack.synthetics.overview.status.up.description": "Opérationnel",
     "xpack.synthetics.overview.SyntheticsHeading": "Moniteurs",
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 9b9ab9a1aa8eb..e02a35a433251 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -44205,7 +44205,6 @@
     "xpack.synthetics.overview.status.filters.legend": "監視ステータス",
     "xpack.synthetics.overview.status.filters.pending": "保留中",
     "xpack.synthetics.overview.status.filters.up": "アップ",
-    "xpack.synthetics.overview.status.headingText": "現在のステータス",
     "xpack.synthetics.overview.status.pending.description": "保留中",
     "xpack.synthetics.overview.status.up.description": "アップ",
     "xpack.synthetics.overview.SyntheticsHeading": "監視",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 730d8bde1eed3..8fbf954130039 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -44255,7 +44255,6 @@
     "xpack.synthetics.overview.status.filters.legend": "监测状态",
     "xpack.synthetics.overview.status.filters.pending": "待处理",
     "xpack.synthetics.overview.status.filters.up": "运行",
-    "xpack.synthetics.overview.status.headingText": "当前状态",
     "xpack.synthetics.overview.status.pending.description": "待处理",
     "xpack.synthetics.overview.status.up.description": "运行",
     "xpack.synthetics.overview.SyntheticsHeading": "监测",