From 37376fb8be1579354d978ee690d223fe2655604b Mon Sep 17 00:00:00 2001
From: Amardeepsingh Siglani <amardeep7194@gmail.com>
Date: Mon, 19 Aug 2024 18:16:38 -0700
Subject: [PATCH 1/4] updated all pages with new header UI

Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>
---
 opensearch_dashboards.json                    |   1 +
 .../components/ContentPanel/ContentPanel.js   |   5 +-
 .../DeleteModal/DeleteMonitorModal.tsx        |   3 +-
 .../AssociatedMonitors/helpers.js             |   3 +-
 .../AlertsDashboardFlyoutComponent.js         |   3 +-
 ...lertsDashboardFlyoutComponent.test.js.snap |   2 +-
 .../__snapshots__/FormikSwitch.test.js.snap   |   2 +-
 public/components/PageHeader/PageHeader.tsx   |  43 ++++++
 .../containers/CreateMonitor/CreateMonitor.js |  11 +-
 .../DashboardControls/DashboardControls.js    |  12 +-
 .../DashboardControls.test.js.snap            |   2 +-
 .../DashboardEmptyPrompt.js                   |   8 +-
 .../pages/Dashboard/containers/Dashboard.js   |   9 +-
 public/pages/Dashboard/utils/tableUtils.js    |   7 +-
 .../DestinationsActions.js                    |   3 -
 .../MonitorOverview/MonitorOverview.js        |   5 +-
 .../containers/MonitorDetails.js              | 143 ++++++++++++------
 .../MonitorActions/MonitorActions.js          |  28 ++--
 .../MonitorControls/MonitorControls.js        |   4 +-
 .../MonitorEmptyPrompt/MonitorEmptyPrompt.js  |   3 +-
 .../MonitorEmptyPrompt.test.js.snap           |   2 +-
 .../Monitors/containers/Monitors/Monitors.js  |  32 ++--
 .../containers/Monitors/utils/tableUtils.js   |   6 +-
 public/plugin.tsx                             |  21 ++-
 public/services/services.ts                   |   9 ++
 public/utils/helpers.js                       |  17 ++-
 26 files changed, 263 insertions(+), 121 deletions(-)
 create mode 100644 public/components/PageHeader/PageHeader.tsx

diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
index aa5a9468a..ae8d94367 100644
--- a/opensearch_dashboards.json
+++ b/opensearch_dashboards.json
@@ -7,6 +7,7 @@
   "requiredPlugins": [
     "uiActions",
     "dashboard",
+    "navigation",
     "embeddable",
     "opensearchDashboardsReact",
     "savedObjects",
diff --git a/public/components/ContentPanel/ContentPanel.js b/public/components/ContentPanel/ContentPanel.js
index cb9133377..445b05183 100644
--- a/public/components/ContentPanel/ContentPanel.js
+++ b/public/components/ContentPanel/ContentPanel.js
@@ -17,6 +17,7 @@ const ContentPanel = ({
   horizontalRuleClassName = '',
   actions,
   children,
+  panelOptions = {},
 }) => (
   <EuiPanel style={{ paddingLeft: '0px', paddingRight: '0px', ...panelStyles }}>
     <EuiFlexGroup style={{ padding: '0px 10px' }} justifyContent="spaceBetween" alignItems="center">
@@ -38,7 +39,9 @@ const ContentPanel = ({
     <EuiText style={{ padding: '0px 10px' }} size={descriptionSize} color="subdued">
       {description}
     </EuiText>
-    <EuiHorizontalRule margin="xs" className={horizontalRuleClassName} />
+    {!panelOptions.hideTitleBorder && (
+      <EuiHorizontalRule margin="xs" className={horizontalRuleClassName} />
+    )}
 
     <div style={{ padding: '0px 10px', ...bodyStyles }}>{children}</div>
   </EuiPanel>
diff --git a/public/components/DeleteModal/DeleteMonitorModal.tsx b/public/components/DeleteModal/DeleteMonitorModal.tsx
index 18b280ff4..681752903 100644
--- a/public/components/DeleteModal/DeleteMonitorModal.tsx
+++ b/public/components/DeleteModal/DeleteMonitorModal.tsx
@@ -9,7 +9,6 @@ import {
   EuiLink,
   EuiOverlayMask
 } from '@elastic/eui';
-import { PLUGIN_NAME } from '../../../utils/constants';
 import { getDataSourceQueryObj, constructUrlFromDataSource } from '../../pages/utils/helpers';
 
 interface DeleteModalProps {
@@ -55,7 +54,7 @@ export const DeleteMonitorModal = ({
           {`The monitor ${monitorNames[0]} is currently being used as a delegate monitor for composite monitors. Unlink from the following composite monitors before deleting this monitor:`}
           { associatedWorkflows ?
                 <ul>
-                  {associatedWorkflows.map(({ id, name }) => <li><EuiLink target='_blank' href={constructUrlFromDataSource(`${PLUGIN_NAME}#/monitors/${id}?type=workflow`)}>{name}</EuiLink></li>)}
+                  {associatedWorkflows.map(({ id, name }) => <li><EuiLink target='_blank' href={constructUrlFromDataSource(`#/monitors/${id}?type=workflow`)}>{name}</EuiLink></li>)}
                 </ul>
               : null
           }
diff --git a/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/helpers.js b/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/helpers.js
index 602e6ca85..35d9011dc 100644
--- a/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/helpers.js
+++ b/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/helpers.js
@@ -7,7 +7,6 @@ import React, { useMemo } from 'react';
 import { EuiHealth, EuiLink } from '@elastic/eui';
 import { stateToLabel } from '../../../utils/contextMenu/monitors';
 import { dateOptionsLong } from '../../../utils/contextMenu/helpers';
-import { PLUGIN_NAME } from '../../../../utils/constants';
 import { constructUrlFromDataSource } from '../../../pages/utils/helpers';
 
 export const useColumns = ({ onUnlink, onEdit }) => {
@@ -20,7 +19,7 @@ export const useColumns = ({ onUnlink, onEdit }) => {
         truncateText: true,
         width: '50%',
         render: (name, monitor) => (
-          <EuiLink href={constructUrlFromDataSource(`${PLUGIN_NAME}#/monitors/${monitor.id}`)} target="_blank">
+          <EuiLink href={constructUrlFromDataSource(`#/monitors/${monitor.id}`)} target="_blank">
             {name}
           </EuiLink>
         ),
diff --git a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js
index bd82b436e..a45774ac8 100644
--- a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js
+++ b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js
@@ -21,7 +21,6 @@ import {
   EuiSmallButtonIcon,
 } from '@elastic/eui';
 import { getTime } from '../../../../pages/MonitorDetails/components/MonitorOverview/utils/getOverviewStats';
-import { PLUGIN_NAME } from '../../../../../utils/constants';
 import {
   ALERT_STATE,
   DEFAULT_EMPTY_DATA,
@@ -585,7 +584,7 @@ export default class AlertsDashboardFlyoutComponent extends Component {
         displayTableTabs = false;
         break;
     }
-    const monitorUrl = `${PLUGIN_NAME}#/monitors/${monitor_id}${
+    const monitorUrl = `#/monitors/${monitor_id}${
       monitorType === MONITOR_TYPE.COMPOSITE_LEVEL ? '?type=workflow' : ''
     }`;
 
diff --git a/public/components/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap b/public/components/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap
index 539f38a99..a34f10592 100644
--- a/public/components/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap
+++ b/public/components/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap
@@ -71,7 +71,7 @@ exports[`AlertsDashboardFlyoutComponent renders 1`] = `
         </strong>
         <p>
           <EuiLink
-            href="alerting#/monitors/undefined"
+            href="#/monitors/undefined"
           />
         </p>
       </EuiText>
diff --git a/public/components/FormControls/FormikSwitch/__snapshots__/FormikSwitch.test.js.snap b/public/components/FormControls/FormikSwitch/__snapshots__/FormikSwitch.test.js.snap
index 989233815..8860aac81 100644
--- a/public/components/FormControls/FormikSwitch/__snapshots__/FormikSwitch.test.js.snap
+++ b/public/components/FormControls/FormikSwitch/__snapshots__/FormikSwitch.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`FormikSwitch renders 1`] = `
 <div
-  class="euiSwitch euiSwitch--compressed"
+  class="euiSwitch euiSwitch--primary euiSwitch--compressed"
 >
   <button
     aria-checked="false"
diff --git a/public/components/PageHeader/PageHeader.tsx b/public/components/PageHeader/PageHeader.tsx
new file mode 100644
index 000000000..71c76b95e
--- /dev/null
+++ b/public/components/PageHeader/PageHeader.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  TopNavControlData,
+  TopNavControlDescriptionData,
+  TopNavControlLinkData,
+  TopNavControlIconData
+} from '../../../../../src/plugins/navigation/public';
+import { getNavigationUI, getApplication, getUseUpdatedUx } from '../../services';
+
+
+export interface PageHeaderProps {
+  appRightControls?: TopNavControlData[];
+  appBadgeControls?: TopNavControlData[];
+  appDescriptionControls?: (TopNavControlDescriptionData | TopNavControlLinkData | TopNavControlIconData)[];
+  appBottomControls?: TopNavControlData[];
+}
+
+export const PageHeader: React.FC<PageHeaderProps> = ({
+  children,
+  appBadgeControls,
+  appRightControls,
+  appDescriptionControls,
+  appBottomControls
+}) => {
+  const { HeaderControl } = getNavigationUI();
+  const { setAppBadgeControls, setAppRightControls, setAppDescriptionControls, setAppBottomControls } = getApplication();
+
+  return getUseUpdatedUx() ? (
+    <>
+      <HeaderControl setMountPoint={setAppBadgeControls} controls={appBadgeControls} />
+      <HeaderControl setMountPoint={setAppRightControls} controls={appRightControls} />
+      <HeaderControl setMountPoint={setAppDescriptionControls} controls={appDescriptionControls} />
+      <HeaderControl setMountPoint={setAppBottomControls} controls={appBottomControls} />
+    </>
+  ) : (
+    <>{children}</>
+  );
+};
\ No newline at end of file
diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js b/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
index cd5ce2bb7..46cf80ed3 100644
--- a/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
+++ b/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
@@ -29,6 +29,7 @@ import {
   RECOMMENDED_DURATION,
 } from '../../components/QueryPerformance/QueryPerformance';
 import { isDataSourceChanged } from '../../../utils/helpers';
+import { PageHeader } from '../../../../components/PageHeader/PageHeader';
 
 export default class CreateMonitor extends Component {
   static defaultProps = {
@@ -187,10 +188,12 @@ export default class CreateMonitor extends Component {
             const isComposite = values.monitor_type === MONITOR_TYPE.COMPOSITE_LEVEL;
             return (
               <Fragment>
-                <EuiText size="s">
-                  <h1>{edit ? 'Edit' : 'Create'} monitor</h1>
-                </EuiText>
-                <EuiSpacer />
+                <PageHeader>
+                  <EuiText size="s">
+                    <h1>{edit ? 'Edit' : 'Create'} monitor</h1>
+                  </EuiText>
+                  <EuiSpacer />
+                </PageHeader>
 
                 <MonitorDetails
                   values={values}
diff --git a/public/pages/Dashboard/components/DashboardControls/DashboardControls.js b/public/pages/Dashboard/components/DashboardControls/DashboardControls.js
index 3cdb97aa8..c1d38190a 100644
--- a/public/pages/Dashboard/components/DashboardControls/DashboardControls.js
+++ b/public/pages/Dashboard/components/DashboardControls/DashboardControls.js
@@ -44,6 +44,7 @@ const DashboardControls = ({
   onPageChange,
   isAlertsFlyout = false,
   monitorType,
+  alertActions = [],
 }) => {
   let supportedStateOptions = stateOptions;
   switch (monitorType) {
@@ -55,7 +56,7 @@ const DashboardControls = ({
       break;
   }
   return (
-    <EuiFlexGroup style={{ padding: '0px 5px' }}>
+    <EuiFlexGroup style={{ padding: '0px 5px' }} gutterSize="s">
       <EuiFlexItem>
         <EuiCompressedFieldSearch
           fullWidth={true}
@@ -67,7 +68,11 @@ const DashboardControls = ({
 
       {isAlertsFlyout ? null : (
         <EuiFlexItem grow={false}>
-          <EuiCompressedSelect options={severityOptions} value={severity} onChange={onSeverityChange} />
+          <EuiCompressedSelect
+            options={severityOptions}
+            value={severity}
+            onChange={onSeverityChange}
+          />
         </EuiFlexItem>
       )}
 
@@ -79,6 +84,9 @@ const DashboardControls = ({
           data-test-subj={'dashboardAlertStateFilter'}
         />
       </EuiFlexItem>
+      {alertActions.map((action, idx) => (
+        <EuiFlexItem grow={false}>{action}</EuiFlexItem>
+      ))}
       <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
         <EuiPagination pageCount={pageCount} activePage={activePage} onPageClick={onPageChange} />
       </EuiFlexItem>
diff --git a/public/pages/Dashboard/components/DashboardControls/__snapshots__/DashboardControls.test.js.snap b/public/pages/Dashboard/components/DashboardControls/__snapshots__/DashboardControls.test.js.snap
index ad6ed0219..4809833ca 100644
--- a/public/pages/Dashboard/components/DashboardControls/__snapshots__/DashboardControls.test.js.snap
+++ b/public/pages/Dashboard/components/DashboardControls/__snapshots__/DashboardControls.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`DashboardControls renders 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
   style="padding:0px 5px"
 >
   <div
diff --git a/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.js b/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.js
index ac506fe9e..fb56221e1 100644
--- a/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.js
+++ b/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.js
@@ -8,7 +8,8 @@ import PropTypes from 'prop-types';
 import { EuiSmallButton, EuiSmallButtonEmpty, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 
 import { APP_PATH } from '../../../../utils/constants';
-import { PLUGIN_NAME } from '../../../../../utils/constants';
+import { MONITORS_NAV_ID, PLUGIN_NAME } from '../../../../../utils/constants';
+import { getUseUpdatedUx } from '../../../../services';
 
 const createMonitorText =
   'There are no existing alerts. Create a monitor to add triggers and actions. Once an alarm is triggered, the state will show in this table.';
@@ -18,7 +19,10 @@ const editTriggerConditionsText =
   'There are no existing alerts. Adjust trigger conditions to start alerting. Once an alarm is triggered, the state will show in this table.';
 
 const createMonitorButton = (
-  <EuiSmallButton fill href={`${PLUGIN_NAME}#${APP_PATH.CREATE_MONITOR}`}>
+  <EuiSmallButton
+    fill
+    href={`${getUseUpdatedUx() ? MONITORS_NAV_ID : ''}#${APP_PATH.CREATE_MONITOR}`}
+  >
     Create monitor
   </EuiSmallButton>
 );
diff --git a/public/pages/Dashboard/containers/Dashboard.js b/public/pages/Dashboard/containers/Dashboard.js
index ba7abafd4..5f703240e 100644
--- a/public/pages/Dashboard/containers/Dashboard.js
+++ b/public/pages/Dashboard/containers/Dashboard.js
@@ -44,6 +44,7 @@ import {
   appendCommentsAction,
   getIsCommentsEnabled,
 } from '../../utils/helpers';
+import { getUseUpdatedUx } from '../../../services';
 
 export default class Dashboard extends Component {
   constructor(props) {
@@ -528,6 +529,8 @@ export default class Dashboard extends Component {
       return `${item.triggerID}-${item.version}`;
     };
 
+    const useUpdatedUx = !perAlertView && getUseUpdatedUx();
+
     return (
       <>
         {chainedAlert && (
@@ -538,10 +541,11 @@ export default class Dashboard extends Component {
           />
         )}
         <ContentPanel
-          title={perAlertView ? 'Alerts' : 'Alerts by triggers'}
+          title={perAlertView ? 'Alerts' : useUpdatedUx ? undefined : 'Alerts by triggers'}
           titleSize={'s'}
           bodyStyles={{ padding: 'initial' }}
-          actions={actions()}
+          actions={useUpdatedUx ? undefined : actions()}
+          panelOptions={{ hideTitleBorder: useUpdatedUx }}
         >
           <DashboardControls
             activePage={page}
@@ -555,6 +559,7 @@ export default class Dashboard extends Component {
             onPageChange={this.onPageClick}
             isAlertsFlyout={isAlertsFlyout}
             monitorType={monitorType}
+            alertActions={useUpdatedUx ? actions() : undefined}
           />
 
           <EuiHorizontalRule margin="xs" />
diff --git a/public/pages/Dashboard/utils/tableUtils.js b/public/pages/Dashboard/utils/tableUtils.js
index 8b54fb17e..1121e4de4 100644
--- a/public/pages/Dashboard/utils/tableUtils.js
+++ b/public/pages/Dashboard/utils/tableUtils.js
@@ -8,7 +8,6 @@ import _ from 'lodash';
 import { EuiLink, EuiToolTip } from '@elastic/eui';
 import moment from 'moment';
 import { ALERT_STATE, DEFAULT_EMPTY_DATA } from '../../../utils/constants';
-import { PLUGIN_NAME } from '../../../../utils/constants';
 
 export const renderTime = (time) => {
   const momentTime = moment(time);
@@ -208,9 +207,7 @@ export const alertColumns = (
     truncateText: true,
     textOnly: true,
     render: (name, alert) => (
-      <EuiLink href={`${PLUGIN_NAME}#/monitors/${alert.monitor_id}?type=${alert.alert_source}`}>
-        {name}
-      </EuiLink>
+      <EuiLink href={`#/monitors/${alert.monitor_id}?type=${alert.alert_source}`}>{name}</EuiLink>
     ),
   },
 ];
@@ -238,7 +235,7 @@ export const associatedAlertsTableColumns = [
     render: ({ monitor_id, monitor_name }) => {
       return (
         <EuiToolTip content={monitor_name}>
-          <EuiLink href={`${PLUGIN_NAME}#/monitors/${monitor_id}?type='monitor'`} target="_blank">
+          <EuiLink href={`#/monitors/${monitor_id}?type='monitor'`} target="_blank">
             {monitor_name}
           </EuiLink>
         </EuiToolTip>
diff --git a/public/pages/Destinations/components/DestinationsList/DestinationsActions/DestinationsActions.js b/public/pages/Destinations/components/DestinationsList/DestinationsActions/DestinationsActions.js
index 172c8c4d0..329ea2a12 100644
--- a/public/pages/Destinations/components/DestinationsList/DestinationsActions/DestinationsActions.js
+++ b/public/pages/Destinations/components/DestinationsList/DestinationsActions/DestinationsActions.js
@@ -13,9 +13,6 @@ import {
   EuiPopover,
 } from '@elastic/eui';
 
-import { APP_PATH } from '../../../../../utils/constants';
-import { PLUGIN_NAME } from '../../../../../../utils/constants';
-
 export default class DestinationsActions extends Component {
   state = {
     isActionsOpen: false,
diff --git a/public/pages/MonitorDetails/components/MonitorOverview/MonitorOverview.js b/public/pages/MonitorDetails/components/MonitorOverview/MonitorOverview.js
index 6212a64ab..a725b4320 100644
--- a/public/pages/MonitorDetails/components/MonitorOverview/MonitorOverview.js
+++ b/public/pages/MonitorDetails/components/MonitorOverview/MonitorOverview.js
@@ -8,7 +8,6 @@ import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
 import ContentPanel from '../../../../components/ContentPanel/index';
 import OverviewStat from '../OverviewStat/index';
 import getOverviewStats from './utils/getOverviewStats';
-import { PLUGIN_NAME } from '../../../../../utils/constants';
 import { RelatedMonitors } from '../RelatedMonitors/RelatedMonitors';
 import { RelatedMonitorsFlyout } from '../RelatedMonitors/RelatedMonitorsFlyout';
 import { getURL } from '../../../utils/helpers';
@@ -32,7 +31,7 @@ const MonitorOverview = ({
   if (monitor.associated_workflows) {
     const links = monitor.associated_workflows.map(({ id, name }) => ({
       name,
-      href: getURL(`${PLUGIN_NAME}#/monitors/${id}?type=workflow`, landingDataSourceId),
+      href: getURL(`#/monitors/${id}?type=workflow`, landingDataSourceId),
     }));
     relatedMonitorsData = {
       header: 'Associations with composite monitors',
@@ -42,7 +41,7 @@ const MonitorOverview = ({
   } else if (delegateMonitors.length) {
     const links = delegateMonitors.map(({ id, name }) => ({
       name,
-      href: getURL(`${PLUGIN_NAME}#/monitors/${id}?type=monitor`, landingDataSourceId),
+      href: getURL(`#/monitors/${id}?type=monitor`, landingDataSourceId),
     }));
 
     relatedMonitorsData = {
diff --git a/public/pages/MonitorDetails/containers/MonitorDetails.js b/public/pages/MonitorDetails/containers/MonitorDetails.js
index d2d6bdf5a..03e0aba8c 100644
--- a/public/pages/MonitorDetails/containers/MonitorDetails.js
+++ b/public/pages/MonitorDetails/containers/MonitorDetails.js
@@ -26,6 +26,8 @@ import {
   EuiTab,
   EuiTabs,
   EuiText,
+  EuiButtonIcon,
+  EuiButton,
 } from '@elastic/eui';
 import CreateMonitor from '../../CreateMonitor';
 import MonitorOverview from '../components/MonitorOverview';
@@ -50,7 +52,8 @@ import { DeleteMonitorModal } from '../../../components/DeleteModal/DeleteMonito
 import { getLocalClusterName } from '../../CreateMonitor/components/CrossClusterConfigurations/utils/helpers';
 import { getDataSourceQueryObj } from '../../utils/helpers';
 import { MultiDataSourceContext } from '../../../../public/utils/MultiDataSourceContext';
-import { setDataSource } from '../../../services';
+import { getUseUpdatedUx, setDataSource } from '../../../services';
+import { PageHeader } from '../../../components/PageHeader/PageHeader';
 
 export default class MonitorDetails extends Component {
   static contextType = MultiDataSourceContext;
@@ -294,25 +297,31 @@ export default class MonitorDetails extends Component {
 
   renderNoTriggersCallOut = () => {
     const { monitor, editMonitor } = this.state;
+    const callout = (
+      <EuiCallOut
+        title={
+          <span>
+            This monitor has no triggers configured. To receive alerts from this monitor you must
+            first create a trigger.{' '}
+            {
+              <EuiLink style={{ textDecoration: 'underline' }} onClick={editMonitor}>
+                Edit monitor
+              </EuiLink>
+            }
+          </span>
+        }
+        iconType="alert"
+        size="s"
+      />
+    );
+
     if (!monitor.triggers.length) {
       return (
         <Fragment>
-          <EuiCallOut
-            title={
-              <span>
-                This monitor has no triggers configured. To receive alerts from this monitor you
-                must first create a trigger.{' '}
-                {
-                  <EuiLink style={{ textDecoration: 'underline' }} onClick={editMonitor}>
-                    Edit monitor
-                  </EuiLink>
-                }
-              </span>
-            }
-            iconType="alert"
-            size="s"
-          />
-          <EuiSpacer size="s" />
+          <PageHeader appBottomControls={[{ renderComponent: callout }]}>
+            {callout}
+            <EuiSpacer size="s" />
+          </PageHeader>
         </Fragment>
       );
     }
@@ -479,42 +488,76 @@ export default class MonitorDetails extends Component {
     const displayTableTabs = [MONITOR_TYPE.DOC_LEVEL, MONITOR_TYPE.COMPOSITE_LEVEL].includes(
       monitor.monitor_type
     );
+
+    const badgeControl = monitor.enabled ? (
+      <EuiHealth color="success">Enabled</EuiHealth>
+    ) : (
+      <EuiHealth color="subdued">Disabled</EuiHealth>
+    );
+    const useUpdatedUx = getUseUpdatedUx();
+
+    const monitorActions = [
+      <EuiSmallButton
+        isLoading={updating}
+        onClick={() => this.updateMonitor({ enabled: !monitor.enabled })}
+      >
+        {monitor.enabled ? 'Disable' : 'Enable'}
+      </EuiSmallButton>,
+      <EuiSmallButton onClick={this.showJsonModal}>Export as JSON</EuiSmallButton>,
+    ];
+
+    if (useUpdatedUx) {
+      monitorActions.unshift(
+        <EuiSmallButton
+          iconType={'trash'}
+          onClick={this.onDeleteClick}
+          color="danger"
+          aria-label="Delete"
+        ></EuiSmallButton>
+      );
+      monitorActions.push(
+        <EuiSmallButton onClick={editMonitor} fill>
+          Edit
+        </EuiSmallButton>
+      );
+    } else {
+      monitorActions.push(
+        <EuiSmallButton onClick={this.onDeleteClick} color="danger" aria-label="Delete">
+          Delete
+        </EuiSmallButton>
+      );
+      monitorActions.unshift(
+        <EuiSmallButton onClick={editMonitor} fill>
+          Edit
+        </EuiSmallButton>
+      );
+    }
+
     return (
       <div style={{ padding: '25px 50px' }}>
         {this.renderNoTriggersCallOut()}
-        <EuiFlexGroup alignItems="flexEnd">
-          <EuiFlexItem grow={false}>
-            <EuiText size="s" style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
-              <h1>{monitor.name}</h1>
-            </EuiText>
-          </EuiFlexItem>
-          <EuiFlexItem style={{ paddingBottom: '5px', marginLeft: '0px' }}>
-            {monitor.enabled ? (
-              <EuiHealth color="success">Enabled</EuiHealth>
-            ) : (
-              <EuiHealth color="subdued">Disabled</EuiHealth>
-            )}
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiSmallButton onClick={editMonitor}>Edit</EuiSmallButton>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiSmallButton
-              isLoading={updating}
-              onClick={() => this.updateMonitor({ enabled: !monitor.enabled })}
-            >
-              {monitor.enabled ? 'Disable' : 'Enable'}
-            </EuiSmallButton>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiSmallButton onClick={this.showJsonModal}>Export as JSON</EuiSmallButton>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiSmallButton onClick={this.onDeleteClick} color="danger">
-              Delete
-            </EuiSmallButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <PageHeader
+          appBadgeControls={[{ renderComponent: badgeControl }]}
+          appRightControls={monitorActions.map((action) => ({
+            renderComponent: action,
+          }))}
+        >
+          <EuiFlexGroup alignItems="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiText size="s" style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
+                <h1>{monitor.name}</h1>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem style={{ paddingBottom: '5px', marginLeft: '0px' }}>
+              {badgeControl}
+            </EuiFlexItem>
+            {monitorActions.map((action, idx) => (
+              <EuiFlexItem grow={false} key={idx}>
+                {action}
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGroup>
+        </PageHeader>
         <EuiSpacer />
         <MonitorOverview
           monitor={monitor}
diff --git a/public/pages/Monitors/components/MonitorActions/MonitorActions.js b/public/pages/Monitors/components/MonitorActions/MonitorActions.js
index 489450fb8..11d41090f 100644
--- a/public/pages/Monitors/components/MonitorActions/MonitorActions.js
+++ b/public/pages/Monitors/components/MonitorActions/MonitorActions.js
@@ -14,7 +14,7 @@ import {
 } from '@elastic/eui';
 
 import { APP_PATH } from '../../../../utils/constants';
-import { PLUGIN_NAME } from '../../../../../utils/constants';
+import { PageHeader } from '../../../../components/PageHeader/PageHeader';
 
 export default class MonitorActions extends Component {
   state = {
@@ -83,8 +83,14 @@ export default class MonitorActions extends Component {
   render() {
     const { isActionsOpen } = this.state;
     const { isEditDisabled, onClickEdit } = this.props;
+    const createMonitorControl = (
+      <EuiSmallButton fill href={`#${APP_PATH.CREATE_MONITOR}`} data-test-subj="createButton">
+        Create monitor
+      </EuiSmallButton>
+    );
+
     return (
-      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" gutterSize="s">
         <EuiFlexItem grow={false}>
           <EuiPopover
             id="actionsPopover"
@@ -115,15 +121,15 @@ export default class MonitorActions extends Component {
             Edit
           </EuiSmallButton>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiSmallButton
-            fill
-            href={`${PLUGIN_NAME}#${APP_PATH.CREATE_MONITOR}`}
-            data-test-subj="createButton"
-          >
-            Create monitor
-          </EuiSmallButton>
-        </EuiFlexItem>
+        <PageHeader
+          appRightControls={[
+            {
+              renderComponent: createMonitorControl,
+            },
+          ]}
+        >
+          <EuiFlexItem grow={false}>{createMonitorControl}</EuiFlexItem>
+        </PageHeader>
       </EuiFlexGroup>
     );
   }
diff --git a/public/pages/Monitors/components/MonitorControls/MonitorControls.js b/public/pages/Monitors/components/MonitorControls/MonitorControls.js
index 7b1c7ea1f..56c329855 100644
--- a/public/pages/Monitors/components/MonitorControls/MonitorControls.js
+++ b/public/pages/Monitors/components/MonitorControls/MonitorControls.js
@@ -32,8 +32,9 @@ const MonitorControls = ({
   onSearchChange,
   onStateChange,
   onPageClick,
+  monitorActions = null,
 }) => (
-  <EuiFlexGroup style={{ padding: '0px 5px' }}>
+  <EuiFlexGroup style={{ padding: '0px 5px' }} gutterSize="s">
     <EuiFlexItem>
       <EuiCompressedFieldSearch
         fullWidth={true}
@@ -45,6 +46,7 @@ const MonitorControls = ({
     <EuiFlexItem grow={false}>
       <EuiCompressedSelect options={states} value={state} onChange={onStateChange} />
     </EuiFlexItem>
+    {monitorActions && <EuiFlexItem grow={false}>{monitorActions}</EuiFlexItem>}
     <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
       <EuiPagination pageCount={pageCount} activePage={activePage} onPageClick={onPageClick} />
     </EuiFlexItem>
diff --git a/public/pages/Monitors/components/MonitorEmptyPrompt/MonitorEmptyPrompt.js b/public/pages/Monitors/components/MonitorEmptyPrompt/MonitorEmptyPrompt.js
index f227f5229..88194f359 100644
--- a/public/pages/Monitors/components/MonitorEmptyPrompt/MonitorEmptyPrompt.js
+++ b/public/pages/Monitors/components/MonitorEmptyPrompt/MonitorEmptyPrompt.js
@@ -7,7 +7,6 @@ import React from 'react';
 import { EuiSmallButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 
 import { APP_PATH } from '../../../../utils/constants';
-import { PLUGIN_NAME } from '../../../../../utils/constants';
 
 const filterText =
   'There are no monitors matching your applied filters. Reset your filters to view your monitors.';
@@ -15,7 +14,7 @@ const emptyMonitorText =
   'There are no existing monitors. Create a monitor to add triggers and actions.';
 const loadingText = 'Loading monitors...';
 const createMonitorButton = (
-  <EuiSmallButton fill href={`${PLUGIN_NAME}#${APP_PATH.CREATE_MONITOR}`}>
+  <EuiSmallButton fill href={`#${APP_PATH.CREATE_MONITOR}`}>
     Create monitor
   </EuiSmallButton>
 );
diff --git a/public/pages/Monitors/components/MonitorEmptyPrompt/__snapshots__/MonitorEmptyPrompt.test.js.snap b/public/pages/Monitors/components/MonitorEmptyPrompt/__snapshots__/MonitorEmptyPrompt.test.js.snap
index bf4e38330..2d9bae91c 100644
--- a/public/pages/Monitors/components/MonitorEmptyPrompt/__snapshots__/MonitorEmptyPrompt.test.js.snap
+++ b/public/pages/Monitors/components/MonitorEmptyPrompt/__snapshots__/MonitorEmptyPrompt.test.js.snap
@@ -25,7 +25,7 @@ exports[`MonitorEmptyPrompt renders 1`] = `
   />
   <a
     class="euiButton euiButton--primary euiButton--small euiButton--fill"
-    href="alerting#/create-monitor"
+    href="#/create-monitor"
     rel="noreferrer"
   >
     <span
diff --git a/public/pages/Monitors/containers/Monitors/Monitors.js b/public/pages/Monitors/containers/Monitors/Monitors.js
index b7b80d433..58d107e54 100644
--- a/public/pages/Monitors/containers/Monitors/Monitors.js
+++ b/public/pages/Monitors/containers/Monitors/Monitors.js
@@ -24,6 +24,7 @@ import {
   isDataSourceChanged,
   getDataSourceId,
 } from '../../../utils/helpers';
+import { getUseUpdatedUx } from '../../../../services';
 
 const MAX_MONITOR_COUNT = 1000;
 
@@ -446,24 +447,26 @@ export default class Monitors extends Component {
       selectableMessage: (selectable) => (selectable ? undefined : undefined),
     };
 
+    const useUpdatedUx = getUseUpdatedUx();
+    const monitorActions = (
+      <MonitorActions
+        isEditDisabled={selectedItems.length !== 1}
+        isDeleteDisabled={selectedItems.length === 0 || this.isDeleteNotSupported(selectedItems)}
+        onBulkAcknowledge={this.onBulkAcknowledge}
+        onBulkEnable={this.onBulkEnable}
+        onBulkDisable={this.onBulkDisable}
+        onBulkDelete={this.onBulkDelete}
+        onClickEdit={this.onClickEdit}
+      />
+    );
+
     return (
       <>
         <ContentPanel
-          actions={
-            <MonitorActions
-              isEditDisabled={selectedItems.length !== 1}
-              isDeleteDisabled={
-                selectedItems.length === 0 || this.isDeleteNotSupported(selectedItems)
-              }
-              onBulkAcknowledge={this.onBulkAcknowledge}
-              onBulkEnable={this.onBulkEnable}
-              onBulkDisable={this.onBulkDisable}
-              onBulkDelete={this.onBulkDelete}
-              onClickEdit={this.onClickEdit}
-            />
-          }
+          actions={useUpdatedUx ? undefined : monitorActions}
           bodyStyles={{ padding: 'initial' }}
-          title="Monitors"
+          title={useUpdatedUx ? undefined : 'Monitors'}
+          panelOptions={{ hideTitleBorder: useUpdatedUx }}
         >
           <MonitorControls
             activePage={page}
@@ -473,6 +476,7 @@ export default class Monitors extends Component {
             onSearchChange={this.onSearchChange}
             onStateChange={this.onMonitorStateChange}
             onPageClick={this.onPageClick}
+            monitorActions={useUpdatedUx ? monitorActions : null}
           />
 
           <EuiHorizontalRule margin="xs" />
diff --git a/public/pages/Monitors/containers/Monitors/utils/tableUtils.js b/public/pages/Monitors/containers/Monitors/utils/tableUtils.js
index 0422aa37d..f2f09c700 100644
--- a/public/pages/Monitors/containers/Monitors/utils/tableUtils.js
+++ b/public/pages/Monitors/containers/Monitors/utils/tableUtils.js
@@ -7,7 +7,6 @@ import React from 'react';
 import { EuiLink } from '@elastic/eui';
 import moment from 'moment';
 import { DEFAULT_EMPTY_DATA, MONITOR_TYPE } from '../../../../../utils/constants';
-import { PLUGIN_NAME } from '../../../../../../utils/constants';
 import { getItemLevelType } from './helpers';
 
 const renderTime = (time) => {
@@ -23,10 +22,7 @@ export const columns = [
     sortable: true,
     textOnly: true,
     render: (name, item) => (
-      <EuiLink
-        data-test-subj={name}
-        href={`${PLUGIN_NAME}#/monitors/${item.id}?type=${item.monitor.type}`}
-      >
+      <EuiLink data-test-subj={name} href={`#/monitors/${item.id}?type=${item.monitor.type}`}>
         {name}
       </EuiLink>
     ),
diff --git a/public/plugin.tsx b/public/plugin.tsx
index e4be048aa..06ca8a2bc 100644
--- a/public/plugin.tsx
+++ b/public/plugin.tsx
@@ -20,11 +20,12 @@ import { alertingTriggerAd } from './utils/contextMenu/triggers';
 import { ExpressionsSetup } from '../../../src/plugins/expressions/public';
 import { UiActionsSetup } from '../../../src/plugins/ui_actions/public';
 import { overlayAlertsFunction } from './expressions/overlay_alerts';
-import { setClient, setEmbeddable, setNotifications, setOverlays, setSavedAugmentVisLoader, setUISettings, setQueryService, setSavedObjectsClient, setDataSourceEnabled, setDataSourceManagementPlugin } from './services';
+import { setClient, setEmbeddable, setNotifications, setOverlays, setSavedAugmentVisLoader, setUISettings, setQueryService, setSavedObjectsClient, setDataSourceEnabled, setDataSourceManagementPlugin, setNavigationUI, setApplication } from './services';
 import { VisAugmenterStart } from '../../../src/plugins/vis_augmenter/public';
 import { DataPublicPluginStart } from '../../../src/plugins/data/public';
 import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public';
 import { DataSourcePluginSetup } from '../../../src/plugins/data_source/public';
+import { NavigationPublicPluginStart } from '../../../src/plugins/navigation/public';
 
 declare module '../../../src/plugins/ui_actions/public' {
   export interface ActionContextMapping {
@@ -47,6 +48,7 @@ export interface AlertingStartDeps {
   visAugmenter: VisAugmenterStart;
   embeddable: EmbeddableStart;
   data: DataPublicPluginStart;
+  navigation: NavigationPublicPluginStart;
 }
 
 export class AlertingPlugin implements Plugin<void, AlertingStart, AlertingSetupDeps, AlertingStartDeps> {
@@ -86,6 +88,14 @@ export class AlertingPlugin implements Plugin<void, AlertingStart, AlertingSetup
         }
       ])
 
+      core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS['security-analytics'], [
+        {
+          id: PLUGIN_NAME,
+          category: DEFAULT_APP_CATEGORIES.detect,
+          showInAllNavGroup: false
+        }
+      ])
+
       // channels route
       core.application.register({
         id: ALERTS_NAV_ID,
@@ -136,6 +146,11 @@ export class AlertingPlugin implements Plugin<void, AlertingStart, AlertingSetup
         DEFAULT_NAV_GROUPS.observability,
         navLinks
       );
+
+      core.chrome.navGroup.addNavLinksToGroup(
+        DEFAULT_NAV_GROUPS['security-analytics'],
+        navLinks
+      );
     }
 
     setUISettings(core.uiSettings);
@@ -167,13 +182,15 @@ export class AlertingPlugin implements Plugin<void, AlertingStart, AlertingSetup
     uiActions.addTriggerAction(alertingTriggerAd.id, adAction);
   }
 
-  public start(core: CoreStart, { visAugmenter, embeddable, data }: AlertingStartDeps): AlertingStart {
+  public start(core: CoreStart, { visAugmenter, embeddable, data, navigation }: AlertingStartDeps): AlertingStart {
     setEmbeddable(embeddable);
     setOverlays(core.overlays);
     setQueryService(data.query);
     setSavedAugmentVisLoader(visAugmenter.savedAugmentVisLoader);
     setNotifications(core.notifications);
     setSavedObjectsClient(core.savedObjects.client);
+    setNavigationUI(navigation.ui);
+    setApplication(core.application);
     return {};
   }
 }
diff --git a/public/services/services.ts b/public/services/services.ts
index 6d14b9457..1bdcfb6be 100644
--- a/public/services/services.ts
+++ b/public/services/services.ts
@@ -11,6 +11,7 @@ import { CoreStart, IUiSettingsClient, NotificationsStart, OverlayStart } from '
 import { SavedObjectLoaderAugmentVis } from '../../../../src/plugins/vis_augmenter/public';
 import { DataPublicPluginStart } from '../../../../src/plugins/data/public';
 import { EmbeddableStart } from '../../../../src/plugins/embeddable/public';
+import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
 
 const ServicesContext = createContext<BrowserServices | null>(null);
 
@@ -56,3 +57,11 @@ export const [getDataSourceReadOnly, setDataSourceReadOnly] =
 
 export const [getNotifications, setNotifications] =
   createGetterSetter<NotificationsStart>('Notifications');
+
+export const [getNavigationUI, setNavigationUI] = createGetterSetter<NavigationPublicPluginStart['ui']>('navigation');
+
+export const [getApplication, setApplication] = createGetterSetter<CoreStart['application']>('application');
+
+export const getUseUpdatedUx = () => {
+  return getUISettings().get('home:useNewHomePage', false);
+};
diff --git a/public/utils/helpers.js b/public/utils/helpers.js
index 4394ee92a..3806b9d9f 100644
--- a/public/utils/helpers.js
+++ b/public/utils/helpers.js
@@ -12,6 +12,7 @@ import {
 } from '../pages/Dashboard/utils/helpers';
 import _ from 'lodash';
 import { getDataSourceQueryObj } from '../pages/utils/helpers';
+import { getUseUpdatedUx } from '../services';
 
 export const makeId = htmlIdGenerator();
 
@@ -142,13 +143,21 @@ export const titleTemplate = (title, subTitle) => (
 );
 
 // This is updated to include the server.basepath during plugin's first render inside app.js using `initManageChannelsUrl` function
-export let MANAGE_CHANNELS_URL = '/app/notifications-dashboards#/channels';
+export let MANAGE_CHANNELS_URL = undefined;
+// export const manageChannelsRelativePath = `/app/notifications-dashboards#/channels`;
 
 export function initManageChannelsUrl(httpClient) {
-  const manageChannelsRelativePath = `/app/notifications-dashboards#/channels`;
-  MANAGE_CHANNELS_URL = httpClient.basePath.prepend(manageChannelsRelativePath);
+  if (!MANAGE_CHANNELS_URL) {
+    const relativePath = `/app/${
+      getUseUpdatedUx() ? 'channels' : 'notifications-dashboards'
+    }#/channels`;
+    MANAGE_CHANNELS_URL = httpClient.basePath.prepend(relativePath);
+  }
 }
 
 export function getManageChannelsUrl() {
-  return MANAGE_CHANNELS_URL;
+  const relativePath = `/app/${
+    getUseUpdatedUx() ? 'channels' : 'notifications-dashboards'
+  }#/channels`;
+  return MANAGE_CHANNELS_URL || relativePath;
 }

From 736a3b259d1a7501738972e556b230c949d03f32 Mon Sep 17 00:00:00 2001
From: Amardeepsingh Siglani <amardeep7194@gmail.com>
Date: Mon, 19 Aug 2024 22:22:24 -0700
Subject: [PATCH 2/4] fixed UTs

Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>
---
 .../AddAlertingMonitor.test.js                |  5 ++
 .../FeatureChart/FeatureChart.test.js         |  2 +-
 .../CreateMonitor/CreateMonitor.test.js       |  7 ++-
 .../AcknowledgeAlertsModal.test.js            |  2 +
 .../DashboardEmptyPrompt.js                   |  6 +--
 .../DashboardEmptyPrompt.test.js              |  5 ++
 .../DashboardEmptyPrompt.test.js.snap         |  2 +-
 .../Dashboard/containers/Dashboard.test.js    |  5 ++
 .../__snapshots__/Dashboard.test.js.snap      | 54 ++++++++++++-------
 .../FullPageNotificationsInfoCallOut.test.js  |  5 ++
 .../NotificationsInfoCallOut.test.js          |  5 ++
 .../DestinationsList/DestinationsList.test.js |  5 ++
 public/pages/Main/Main.test.js                |  5 ++
 .../MonitorActions/MonitorActions.test.js     |  5 ++
 .../__snapshots__/MonitorActions.test.js.snap |  4 +-
 .../containers/Monitors/Monitors.test.js      |  6 ++-
 .../__snapshots__/Monitors.test.js.snap       |  6 +++
 test/utils/helpers.js                         | 17 ++++--
 18 files changed, 114 insertions(+), 32 deletions(-)

diff --git a/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AddAlertingMonitor.test.js b/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AddAlertingMonitor.test.js
index 6a5e8534f..4697f5351 100644
--- a/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AddAlertingMonitor.test.js
+++ b/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AddAlertingMonitor.test.js
@@ -8,6 +8,11 @@ import { httpServiceMock, notificationServiceMock } from '../../../../../../src/
 import { shallow } from 'enzyme';
 import AddAlertingMonitor from './AddAlertingMonitor';
 import { setClient, setNotifications } from '../../../services';
+import { setupCoreStart } from '../../../../test/utils/helpers';
+
+beforeAll(() => {
+  setupCoreStart();
+});
 
 describe('AddAlertingMonitor', () => {
   const httpClient = httpServiceMock.createStartContract();
diff --git a/public/pages/CreateMonitor/components/AnomalyDetectors/FeatureChart/FeatureChart.test.js b/public/pages/CreateMonitor/components/AnomalyDetectors/FeatureChart/FeatureChart.test.js
index 813def183..930afcc38 100644
--- a/public/pages/CreateMonitor/components/AnomalyDetectors/FeatureChart/FeatureChart.test.js
+++ b/public/pages/CreateMonitor/components/AnomalyDetectors/FeatureChart/FeatureChart.test.js
@@ -6,7 +6,7 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
 import { FeatureChart } from './FeatureChart';
-import AlertingFakes from '../../../../../../test/utils/helpers';
+import { AlertingFakes } from '../../../../../../test/utils/helpers';
 
 const alertingFakes = new AlertingFakes('random seed');
 
diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.test.js b/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.test.js
index d13b0b8a7..89444569e 100644
--- a/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.test.js
+++ b/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.test.js
@@ -10,7 +10,7 @@ import { httpServiceMock } from '../../../../../../../src/core/public/mocks';
 import CreateMonitor from './CreateMonitor';
 import { historyMock, httpClientMock } from '../../../../../test/mocks';
 import { FORMIK_INITIAL_VALUES } from './utils/constants';
-import AlertingFakes from '../../../../../test/utils/helpers';
+import { AlertingFakes, setupCoreStart } from '../../../../../test/utils/helpers';
 import { SEARCH_TYPE } from '../../../../utils/constants';
 import { TRIGGER_TYPE } from '../../../CreateTrigger/containers/CreateTrigger/utils/constants';
 import { setClient, setNotifications } from '../../../../services';
@@ -37,6 +37,11 @@ const location = {
   search: '',
   state: undefined,
 };
+
+beforeAll(() => {
+  setupCoreStart();
+});
+
 beforeEach(() => {
   jest.clearAllMocks();
 });
diff --git a/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.test.js b/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.test.js
index 8c7678b73..1e562867c 100644
--- a/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.test.js
+++ b/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.test.js
@@ -9,9 +9,11 @@ import { historyMock, httpClientMock } from '../../../../../test/mocks';
 import AcknowledgeAlertsModal from './AcknowledgeAlertsModal';
 import { FORMIK_INITIAL_VALUES } from '../../../CreateMonitor/containers/CreateMonitor/utils/constants';
 import coreMock from '../../../../../test/mocks/CoreMock';
+import { setupCoreStart } from '../../../../../test/utils/helpers';
 
 beforeEach(() => {
   jest.clearAllMocks();
+  setupCoreStart();
 });
 
 describe('AcknowledgeAlertsModal', () => {
diff --git a/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.js b/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.js
index fb56221e1..edb18a595 100644
--- a/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.js
+++ b/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.js
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { EuiSmallButton, EuiSmallButtonEmpty, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 
 import { APP_PATH } from '../../../../utils/constants';
-import { MONITORS_NAV_ID, PLUGIN_NAME } from '../../../../../utils/constants';
+import { MONITORS_NAV_ID } from '../../../../../utils/constants';
 import { getUseUpdatedUx } from '../../../../services';
 
 const createMonitorText =
@@ -18,7 +18,7 @@ const createTriggerText =
 const editTriggerConditionsText =
   'There are no existing alerts. Adjust trigger conditions to start alerting. Once an alarm is triggered, the state will show in this table.';
 
-const createMonitorButton = (
+const getCreateMonitorButton = () => (
   <EuiSmallButton
     fill
     href={`${getUseUpdatedUx() ? MONITORS_NAV_ID : ''}#${APP_PATH.CREATE_MONITOR}`}
@@ -41,7 +41,7 @@ const DashboardEmptyPrompt = ({ onCreateTrigger, isModal = false }) => {
     ? undefined
     : isModal
     ? editMonitorButton(onCreateTrigger)
-    : createMonitorButton;
+    : getCreateMonitorButton();
   return (
     <EuiEmptyPrompt
       style={{ maxWidth: '45em' }}
diff --git a/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.test.js b/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.test.js
index 5a3d660e9..18abf206c 100644
--- a/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.test.js
+++ b/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.test.js
@@ -7,6 +7,11 @@ import React from 'react';
 import { render } from 'enzyme';
 
 import DashboardEmptyPrompt from './DashboardEmptyPrompt';
+import { setupCoreStart } from '../../../../../test/utils/helpers';
+
+beforeAll(() => {
+  setupCoreStart();
+});
 
 describe('DashboardEmptyPrompt', () => {
   test('renders', () => {
diff --git a/public/pages/Dashboard/components/DashboardEmptyPrompt/__snapshots__/DashboardEmptyPrompt.test.js.snap b/public/pages/Dashboard/components/DashboardEmptyPrompt/__snapshots__/DashboardEmptyPrompt.test.js.snap
index 059702e8e..1bdc6c240 100644
--- a/public/pages/Dashboard/components/DashboardEmptyPrompt/__snapshots__/DashboardEmptyPrompt.test.js.snap
+++ b/public/pages/Dashboard/components/DashboardEmptyPrompt/__snapshots__/DashboardEmptyPrompt.test.js.snap
@@ -25,7 +25,7 @@ exports[`DashboardEmptyPrompt renders 1`] = `
   />
   <a
     class="euiButton euiButton--primary euiButton--small euiButton--fill"
-    href="alerting#/create-monitor"
+    href="#/create-monitor"
     rel="noreferrer"
   >
     <span
diff --git a/public/pages/Dashboard/containers/Dashboard.test.js b/public/pages/Dashboard/containers/Dashboard.test.js
index 06811d23b..9fb6dda12 100644
--- a/public/pages/Dashboard/containers/Dashboard.test.js
+++ b/public/pages/Dashboard/containers/Dashboard.test.js
@@ -8,6 +8,7 @@ import { mount } from 'enzyme';
 
 import Dashboard from './Dashboard';
 import { historyMock, httpClientMock } from '../../../../test/mocks';
+import { setupCoreStart } from '../../../../test/utils/helpers';
 
 const location = {
   hash: '',
@@ -56,6 +57,10 @@ const sampleQueryAlerts = [
 
 const runAllPromises = () => new Promise(setImmediate);
 
+beforeAll(() => {
+  setupCoreStart();
+});
+
 describe('Dashboard', () => {
   beforeEach(() => {
     jest.clearAllMocks();
diff --git a/public/pages/Dashboard/containers/__snapshots__/Dashboard.test.js.snap b/public/pages/Dashboard/containers/__snapshots__/Dashboard.test.js.snap
index 7dcbd7846..21adda480 100644
--- a/public/pages/Dashboard/containers/__snapshots__/Dashboard.test.js.snap
+++ b/public/pages/Dashboard/containers/__snapshots__/Dashboard.test.js.snap
@@ -108,6 +108,11 @@ exports[`Dashboard renders in flyout 1`] = `
         "padding": "initial",
       }
     }
+    panelOptions={
+      Object {
+        "hideTitleBorder": false,
+      }
+    }
     title="Alerts"
     titleSize="s"
   >
@@ -300,6 +305,7 @@ exports[`Dashboard renders in flyout 1`] = `
             state="ALL"
           >
             <EuiFlexGroup
+              gutterSize="s"
               style={
                 Object {
                   "padding": "0px 5px",
@@ -307,7 +313,7 @@ exports[`Dashboard renders in flyout 1`] = `
               }
             >
               <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
                 style={
                   Object {
                     "padding": "0px 5px",
@@ -1498,7 +1504,7 @@ exports[`Dashboard renders in flyout 1`] = `
                                         actions={
                                           <EuiSmallButton
                                             fill={true}
-                                            href="alerting#/create-monitor"
+                                            href="#/create-monitor"
                                           >
                                             Create monitor
                                           </EuiSmallButton>
@@ -1560,18 +1566,18 @@ exports[`Dashboard renders in flyout 1`] = `
                                           </EuiSpacer>
                                           <EuiSmallButton
                                             fill={true}
-                                            href="alerting#/create-monitor"
+                                            href="#/create-monitor"
                                           >
                                             <EuiButton
                                               fill={true}
-                                              href="alerting#/create-monitor"
+                                              href="#/create-monitor"
                                               size="s"
                                             >
                                               <EuiButtonDisplay
                                                 baseClassName="euiButton"
                                                 element="a"
                                                 fill={true}
-                                                href="alerting#/create-monitor"
+                                                href="#/create-monitor"
                                                 isDisabled={false}
                                                 rel="noreferrer"
                                                 size="s"
@@ -1579,7 +1585,7 @@ exports[`Dashboard renders in flyout 1`] = `
                                                 <a
                                                   className="euiButton euiButton--primary euiButton--small euiButton--fill"
                                                   disabled={false}
-                                                  href="alerting#/create-monitor"
+                                                  href="#/create-monitor"
                                                   rel="noreferrer"
                                                   style={
                                                     Object {
@@ -1706,6 +1712,11 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
         "padding": "initial",
       }
     }
+    panelOptions={
+      Object {
+        "hideTitleBorder": undefined,
+      }
+    }
     title="Alerts by triggers"
     titleSize="s"
   >
@@ -1958,6 +1969,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
             state="ALL"
           >
             <EuiFlexGroup
+              gutterSize="s"
               style={
                 Object {
                   "padding": "0px 5px",
@@ -1965,7 +1977,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
               }
             >
               <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
                 style={
                   Object {
                     "padding": "0px 5px",
@@ -3549,7 +3561,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                                         actions={
                                           <EuiSmallButton
                                             fill={true}
-                                            href="alerting#/create-monitor"
+                                            href="#/create-monitor"
                                           >
                                             Create monitor
                                           </EuiSmallButton>
@@ -3611,18 +3623,18 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                                           </EuiSpacer>
                                           <EuiSmallButton
                                             fill={true}
-                                            href="alerting#/create-monitor"
+                                            href="#/create-monitor"
                                           >
                                             <EuiButton
                                               fill={true}
-                                              href="alerting#/create-monitor"
+                                              href="#/create-monitor"
                                               size="s"
                                             >
                                               <EuiButtonDisplay
                                                 baseClassName="euiButton"
                                                 element="a"
                                                 fill={true}
-                                                href="alerting#/create-monitor"
+                                                href="#/create-monitor"
                                                 isDisabled={false}
                                                 rel="noreferrer"
                                                 size="s"
@@ -3630,7 +3642,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                                                 <a
                                                   className="euiButton euiButton--primary euiButton--small euiButton--fill"
                                                   disabled={false}
-                                                  href="alerting#/create-monitor"
+                                                  href="#/create-monitor"
                                                   rel="noreferrer"
                                                   style={
                                                     Object {
@@ -3751,6 +3763,11 @@ exports[`Dashboard renders with per alert view 1`] = `
         "padding": "initial",
       }
     }
+    panelOptions={
+      Object {
+        "hideTitleBorder": false,
+      }
+    }
     title="Alerts"
     titleSize="s"
   >
@@ -3943,6 +3960,7 @@ exports[`Dashboard renders with per alert view 1`] = `
             state="ALL"
           >
             <EuiFlexGroup
+              gutterSize="s"
               style={
                 Object {
                   "padding": "0px 5px",
@@ -3950,7 +3968,7 @@ exports[`Dashboard renders with per alert view 1`] = `
               }
             >
               <div
-                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
                 style={
                   Object {
                     "padding": "0px 5px",
@@ -5315,7 +5333,7 @@ exports[`Dashboard renders with per alert view 1`] = `
                                         actions={
                                           <EuiSmallButton
                                             fill={true}
-                                            href="alerting#/create-monitor"
+                                            href="#/create-monitor"
                                           >
                                             Create monitor
                                           </EuiSmallButton>
@@ -5377,18 +5395,18 @@ exports[`Dashboard renders with per alert view 1`] = `
                                           </EuiSpacer>
                                           <EuiSmallButton
                                             fill={true}
-                                            href="alerting#/create-monitor"
+                                            href="#/create-monitor"
                                           >
                                             <EuiButton
                                               fill={true}
-                                              href="alerting#/create-monitor"
+                                              href="#/create-monitor"
                                               size="s"
                                             >
                                               <EuiButtonDisplay
                                                 baseClassName="euiButton"
                                                 element="a"
                                                 fill={true}
-                                                href="alerting#/create-monitor"
+                                                href="#/create-monitor"
                                                 isDisabled={false}
                                                 rel="noreferrer"
                                                 size="s"
@@ -5396,7 +5414,7 @@ exports[`Dashboard renders with per alert view 1`] = `
                                                 <a
                                                   className="euiButton euiButton--primary euiButton--small euiButton--fill"
                                                   disabled={false}
-                                                  href="alerting#/create-monitor"
+                                                  href="#/create-monitor"
                                                   rel="noreferrer"
                                                   style={
                                                     Object {
diff --git a/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.test.js b/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.test.js
index 9b4562d50..c6fb453d0 100644
--- a/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.test.js
+++ b/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.test.js
@@ -7,6 +7,11 @@ import React from 'react';
 import { render } from 'enzyme';
 
 import FullPageNotificationsInfoCallOut from './FullPageNotificationsInfoCallOut';
+import { setupCoreStart } from '../../../../../test/utils/helpers';
+
+beforeAll(() => {
+  setupCoreStart();
+});
 
 describe('FullPageNotificationsInfoCallOut', () => {
   test('renders when Notifications plugin is installed', () => {
diff --git a/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.test.js b/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.test.js
index 066f6269f..76f346e83 100644
--- a/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.test.js
+++ b/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.test.js
@@ -7,6 +7,11 @@ import React from 'react';
 import { render } from 'enzyme';
 
 import NotificationsInfoCallOut from './NotificationsInfoCallOut';
+import { setupCoreStart } from '../../../../../test/utils/helpers';
+
+beforeAll(() => {
+  setupCoreStart();
+});
 
 describe('NotificationsInfoCallOut', () => {
   test('renders when Notifications plugin is installed', () => {
diff --git a/public/pages/Destinations/containers/DestinationsList/DestinationsList.test.js b/public/pages/Destinations/containers/DestinationsList/DestinationsList.test.js
index 9cb386f40..03731ec04 100644
--- a/public/pages/Destinations/containers/DestinationsList/DestinationsList.test.js
+++ b/public/pages/Destinations/containers/DestinationsList/DestinationsList.test.js
@@ -10,6 +10,7 @@ import DestinationsList from './DestinationsList';
 import { historyMock, httpClientMock } from '../../../../../test/mocks';
 import { DESTINATION_TYPE } from '../../utils/constants';
 import { OS_NOTIFICATION_PLUGIN } from '../../../../utils/constants';
+import { setupCoreStart } from '../../../../../test/utils/helpers';
 
 const location = {
   hash: '',
@@ -19,6 +20,10 @@ const location = {
 
 const runAllPromises = () => new Promise(setImmediate);
 
+beforeAll(() => {
+  setupCoreStart();
+});
+
 describe('DestinationsList', () => {
   beforeEach(() => {
     jest.clearAllMocks();
diff --git a/public/pages/Main/Main.test.js b/public/pages/Main/Main.test.js
index bc54640d0..a585f538d 100644
--- a/public/pages/Main/Main.test.js
+++ b/public/pages/Main/Main.test.js
@@ -10,6 +10,11 @@ import * as Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
 import { createMemoryHistory } from 'history';
 
 import Main from './Main';
+import { setupCoreStart } from '../../../test/utils/helpers';
+
+beforeAll(() => {
+  setupCoreStart();
+});
 
 describe('Main', () => {
   test('renders', () => {
diff --git a/public/pages/Monitors/components/MonitorActions/MonitorActions.test.js b/public/pages/Monitors/components/MonitorActions/MonitorActions.test.js
index 94fb381b3..f96948b1e 100644
--- a/public/pages/Monitors/components/MonitorActions/MonitorActions.test.js
+++ b/public/pages/Monitors/components/MonitorActions/MonitorActions.test.js
@@ -7,6 +7,7 @@ import React from 'react';
 import { render, shallow, mount } from 'enzyme';
 
 import MonitorActions from './MonitorActions';
+import { setupCoreStart } from '../../../../../test/utils/helpers';
 
 const getProps = () => ({
   onBulkAcknowledge: jest.fn(),
@@ -17,6 +18,10 @@ const getProps = () => ({
   onClickEdit: jest.fn(),
 });
 
+beforeAll(() => {
+  setupCoreStart();
+});
+
 describe('MonitorActions', () => {
   test('renders', () => {
     const component = <MonitorActions {...getProps()} />;
diff --git a/public/pages/Monitors/components/MonitorActions/__snapshots__/MonitorActions.test.js.snap b/public/pages/Monitors/components/MonitorActions/__snapshots__/MonitorActions.test.js.snap
index 503c10aeb..28675fe19 100644
--- a/public/pages/Monitors/components/MonitorActions/__snapshots__/MonitorActions.test.js.snap
+++ b/public/pages/Monitors/components/MonitorActions/__snapshots__/MonitorActions.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`MonitorActions renders 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
 >
   <div
     class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -61,7 +61,7 @@ exports[`MonitorActions renders 1`] = `
     <a
       class="euiButton euiButton--primary euiButton--small euiButton--fill"
       data-test-subj="createButton"
-      href="alerting#/create-monitor"
+      href="#/create-monitor"
       rel="noreferrer"
     >
       <span
diff --git a/public/pages/Monitors/containers/Monitors/Monitors.test.js b/public/pages/Monitors/containers/Monitors/Monitors.test.js
index c5655e8d0..8e195f85b 100644
--- a/public/pages/Monitors/containers/Monitors/Monitors.test.js
+++ b/public/pages/Monitors/containers/Monitors/Monitors.test.js
@@ -9,7 +9,7 @@ import _ from 'lodash';
 
 import Monitors from './Monitors';
 import { historyMock, httpClientMock } from '../../../../../test/mocks';
-import AlertingFakes from '../../../../../test/utils/helpers';
+import { AlertingFakes, setupCoreStart } from '../../../../../test/utils/helpers';
 
 const alertingFakes = new AlertingFakes('random seed');
 
@@ -41,6 +41,10 @@ function getMountWrapper(customProps = {}) {
   );
 }
 
+beforeAll(() => {
+  setupCoreStart();
+});
+
 describe('Monitors', () => {
   beforeEach(() => {
     jest.clearAllMocks();
diff --git a/public/pages/Monitors/containers/Monitors/__snapshots__/Monitors.test.js.snap b/public/pages/Monitors/containers/Monitors/__snapshots__/Monitors.test.js.snap
index a1b75778a..28233c7c4 100644
--- a/public/pages/Monitors/containers/Monitors/__snapshots__/Monitors.test.js.snap
+++ b/public/pages/Monitors/containers/Monitors/__snapshots__/Monitors.test.js.snap
@@ -19,10 +19,16 @@ exports[`Monitors renders 1`] = `
         "padding": "initial",
       }
     }
+    panelOptions={
+      Object {
+        "hideTitleBorder": undefined,
+      }
+    }
     title="Monitors"
   >
     <MonitorControls
       activePage={0}
+      monitorActions={null}
       onPageClick={[Function]}
       onSearchChange={[Function]}
       onStateChange={[Function]}
diff --git a/test/utils/helpers.js b/test/utils/helpers.js
index b869dfbcd..662461bef 100644
--- a/test/utils/helpers.js
+++ b/test/utils/helpers.js
@@ -4,10 +4,19 @@
  */
 
 import { TRIGGER_TYPE } from '../../public/pages/CreateTrigger/containers/CreateTrigger/utils/constants';
+import { navigationPluginMock } from '../../../../src/plugins/navigation/public/mocks';
+import { applicationServiceMock } from '../../../../src/core/public/application/application_service.mock';
+import { uiSettingsServiceMock } from '../../../../src/core/public/ui_settings/ui_settings_service.mock';
+import { setApplication, setNavigationUI, setUISettings } from '../../public/services';
+import { Chance } from 'chance';
+
+export function setupCoreStart() {
+  setNavigationUI(navigationPluginMock.createStartContract().ui);
+  setApplication(applicationServiceMock.createStartContract());
+  setUISettings(uiSettingsServiceMock.createStartContract());
+}
 
-const Chance = require('chance');
-
-class AlertingFakes {
+export class AlertingFakes {
   constructor(seed = 'seed') {
     this.chance = new Chance(seed);
 
@@ -188,5 +197,3 @@ class AlertingFakes {
     return this.chance.timestamp();
   }
 }
-
-module.exports = AlertingFakes;

From b64cc51d03be85af85b77669da0eedb63bdffc8a Mon Sep 17 00:00:00 2001
From: Amardeepsingh Siglani <amardeep7194@gmail.com>
Date: Tue, 20 Aug 2024 11:23:52 -0700
Subject: [PATCH 3/4] fixed cross cluster API; cypress workflow

Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>
---
 .github/workflows/cypress-workflow.yml | 2 +-
 server/services/CrossClusterService.js | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/cypress-workflow.yml b/.github/workflows/cypress-workflow.yml
index 1bd8083e8..442c41fb2 100644
--- a/.github/workflows/cypress-workflow.yml
+++ b/.github/workflows/cypress-workflow.yml
@@ -34,7 +34,7 @@ jobs:
       - name: Run Opensearch with plugin
         run: |
           cd alerting
-          ./gradlew run -Dopensearch.version=${{ env.OPENSEARCH_VERSION }} &
+          ./gradlew :alerting:run -Dopensearch.version=${{ env.OPENSEARCH_VERSION }} &
           timeout 300 bash -c 'while [[ "$(curl -s -o /dev/null -w ''%{http_code}'' localhost:9200)" != "200" ]]; do sleep 5; done'
       - name: Checkout OpenSearch Dashboards
         uses: actions/checkout@v2
diff --git a/server/services/CrossClusterService.js b/server/services/CrossClusterService.js
index 948421a75..f1216af08 100644
--- a/server/services/CrossClusterService.js
+++ b/server/services/CrossClusterService.js
@@ -8,6 +8,7 @@ export default class CrossClusterService extends MDSEnabledClientService {
   getRemoteIndexes = async (context, req, res) => {
     try {
       const client = this.getClientBasedOnDataSource(context, req);
+      delete req.query['dataSourceId'];
       const response = await client('alerting.getRemoteIndexes', req.query);
 
       return res.ok({

From fa07551305730283a421caeb4d2549247aa3a71f Mon Sep 17 00:00:00 2001
From: Amardeepsingh Siglani <amardeep7194@gmail.com>
Date: Tue, 20 Aug 2024 14:19:12 -0700
Subject: [PATCH 4/4] fixed data source logic on page load for view/edit
 monitor; removed redundant code; updated tests

Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>
---
 .../composite_level_monitor_spec.js           |  4 +--
 .../pages/Dashboard/containers/Dashboard.js   |  4 +--
 public/pages/Main/Main.js                     | 22 +++++++++-----
 .../containers/MonitorDetails.js              | 30 ++++---------------
 .../containers/Triggers/Triggers.js           |  8 -----
 .../containers/Triggers/Triggers.test.js      | 10 -------
 .../Monitors/containers/Monitors/Monitors.js  |  4 +--
 public/pages/utils/helpers.js                 |  2 +-
 8 files changed, 28 insertions(+), 56 deletions(-)

diff --git a/cypress/integration/composite_level_monitor_spec.js b/cypress/integration/composite_level_monitor_spec.js
index dc2c72cf4..d09a8f65a 100644
--- a/cypress/integration/composite_level_monitor_spec.js
+++ b/cypress/integration/composite_level_monitor_spec.js
@@ -75,7 +75,7 @@ describe('CompositeLevelMonitor', () => {
         .type('{backspace}')
         .type('Composite trigger');
 
-      cy.intercept('api/alerting/workflows').as('createMonitorRequest');
+      cy.intercept('api/alerting/workflows?*').as('createMonitorRequest');
       cy.intercept(`api/alerting/monitors?*`).as('getMonitorsRequest');
       cy.get('button').contains('Create').click({ force: true });
 
@@ -116,7 +116,7 @@ describe('CompositeLevelMonitor', () => {
             cy.visit(
               `${Cypress.env('opensearch_dashboards')}/app/${PLUGIN_NAME}#/monitors/${
                 createdMonitor._id
-              }?action=update-monitor&type=workflow`
+              }?action=update-monitor&type=workflow&dataSourceId=`
             );
           } else {
             cy.log('Failed to get created monitor ', SAMPLE_VISUAL_EDITOR_MONITOR);
diff --git a/public/pages/Dashboard/containers/Dashboard.js b/public/pages/Dashboard/containers/Dashboard.js
index 5f703240e..0838fe007 100644
--- a/public/pages/Dashboard/containers/Dashboard.js
+++ b/public/pages/Dashboard/containers/Dashboard.js
@@ -131,6 +131,7 @@ export default class Dashboard extends Component {
 
   getAlerts = _.debounce(
     (from, size, search, sortField, sortDirection, severityLevel, alertState, monitorIds) => {
+      const dataSourceId = getDataSourceId();
       const params = {
         from,
         size,
@@ -141,13 +142,12 @@ export default class Dashboard extends Component {
         alertState,
         monitorIds,
         monitorType: this.props.monitorType,
+        dataSourceId,
       };
 
       const queryParamsString = queryString.stringify(params);
-      location.search;
       const { httpClient, history, notifications, perAlertView } = this.props;
       history.replace({ ...this.props.location, search: queryParamsString });
-      const dataSourceId = getDataSourceId();
       const extendedParams = {
         ...(dataSourceId !== undefined && { dataSourceId }), // Only include dataSourceId if it exists
         ...params, // Other parameters
diff --git a/public/pages/Main/Main.js b/public/pages/Main/Main.js
index 1746ea610..7751f43dc 100644
--- a/public/pages/Main/Main.js
+++ b/public/pages/Main/Main.js
@@ -22,8 +22,8 @@ import {
 } from '../../../public/services';
 import { MultiDataSourceContext } from '../../../public/utils/MultiDataSourceContext';
 import { parseQueryStringAndGetDataSource } from '../utils/helpers';
-import * as pluginManifest from "../../../opensearch_dashboards.json";
-import semver from "semver";
+import * as pluginManifest from '../../../opensearch_dashboards.json';
+import semver from 'semver';
 
 class Main extends Component {
   static contextType = CoreContext;
@@ -53,8 +53,10 @@ class Main extends Component {
   async updateBreadcrumbs() {
     if (this.props.dataSourceEnabled && this.props.location) {
       const search = this.props.location?.search;
-      const dataSourceId = search ? parseQueryStringAndGetDataSource(search) : parseQueryStringAndGetDataSource(this.props.location?.pathname);
-      if (dataSourceId) {
+      const dataSourceId = parseQueryStringAndGetDataSource(
+        search || this.props.location?.pathname
+      );
+      if (dataSourceId !== undefined) {
         setDataSource({ dataSourceId });
         this.setState({
           selectedDataSourceId: dataSourceId,
@@ -103,11 +105,13 @@ class Main extends Component {
   };
 
   dataSourceFilterFn = (dataSource) => {
-    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || "";
+    const dataSourceVersion = dataSource?.attributes?.dataSourceVersion || '';
     const installedPlugins = dataSource?.attributes?.installedPlugins || [];
     return (
       semver.satisfies(dataSourceVersion, pluginManifest.supportedOSDataSourceVersions) &&
-      pluginManifest.requiredOSDataSourcePlugins.every((plugin) => installedPlugins.includes(plugin))
+      pluginManifest.requiredOSDataSourcePlugins.every((plugin) =>
+        installedPlugins.includes(plugin)
+      )
     );
   };
 
@@ -236,7 +240,11 @@ class Main extends Component {
                                   setFlyout={this.setFlyout}
                                   notifications={core.notifications}
                                   landingDataSourceId={this.state.selectedDataSourceId}
-                                  defaultRoute={core.chrome?.navGroup?.getNavGroupEnabled() ? this.props.defaultRoute : undefined}
+                                  defaultRoute={
+                                    core.chrome?.navGroup?.getNavGroupEnabled()
+                                      ? this.props.defaultRoute
+                                      : undefined
+                                  }
                                 />
                               )}
                             />
diff --git a/public/pages/MonitorDetails/containers/MonitorDetails.js b/public/pages/MonitorDetails/containers/MonitorDetails.js
index 03e0aba8c..57e51a5fe 100644
--- a/public/pages/MonitorDetails/containers/MonitorDetails.js
+++ b/public/pages/MonitorDetails/containers/MonitorDetails.js
@@ -50,7 +50,7 @@ import FindingsDashboard from '../../Dashboard/containers/FindingsDashboard';
 import { TABLE_TAB_IDS } from '../../Dashboard/components/FindingsDashboard/findingsUtils';
 import { DeleteMonitorModal } from '../../../components/DeleteModal/DeleteMonitorModal';
 import { getLocalClusterName } from '../../CreateMonitor/components/CrossClusterConfigurations/utils/helpers';
-import { getDataSourceQueryObj } from '../../utils/helpers';
+import { getDataSourceQueryObj, parseQueryStringAndGetDataSource } from '../../utils/helpers';
 import { MultiDataSourceContext } from '../../../../public/utils/MultiDataSourceContext';
 import { getUseUpdatedUx, setDataSource } from '../../../services';
 import { PageHeader } from '../../../components/PageHeader/PageHeader';
@@ -72,9 +72,13 @@ export default class MonitorDetails extends Component {
       triggerToEdit: null,
       delegateMonitors: [],
       editMonitor: () => {
+        const dataSourceId = parseQueryStringAndGetDataSource(this.props.location?.search);
+        const monitorType = this.state.monitor.monitor_type;
         this.props.history.push({
           ...this.props.location,
-          search: `?action=${MONITOR_ACTIONS.UPDATE_MONITOR}`,
+          search: `?action=${MONITOR_ACTIONS.UPDATE_MONITOR}&monitorType=${monitorType}${
+            dataSourceId !== undefined ? `&dataSourceId=${dataSourceId}` : ''
+          }`,
         });
       },
       isJsonModalOpen: false,
@@ -275,26 +279,6 @@ export default class MonitorDetails extends Component {
       });
   };
 
-  onCreateTrigger = () => {
-    this.props.history.push({
-      ...this.props.location,
-      search: `?action=${TRIGGER_ACTIONS.CREATE_TRIGGER}`,
-    });
-  };
-
-  onCloseTrigger = () => {
-    this.props.history.push({ ...this.props.location, search: '' });
-    this.setState({ triggerToEdit: null });
-  };
-
-  onEditTrigger = (trigger) => {
-    this.setState({ triggerToEdit: trigger });
-    this.props.history.push({
-      ...this.props.location,
-      search: `?action=${TRIGGER_ACTIONS.UPDATE_TRIGGER}`,
-    });
-  };
-
   renderNoTriggersCallOut = () => {
     const { monitor, editMonitor } = this.state;
     const callout = (
@@ -577,8 +561,6 @@ export default class MonitorDetails extends Component {
           httpClient={httpClient}
           delegateMonitors={delegateMonitors}
           updateMonitor={this.updateMonitor}
-          onEditTrigger={this.onEditTrigger}
-          onCreateTrigger={this.onCreateTrigger}
         />
         <div className="eui-hideFor--xs eui-hideFor--s eui-hideFor--m">
           <EuiSpacer />
diff --git a/public/pages/MonitorDetails/containers/Triggers/Triggers.js b/public/pages/MonitorDetails/containers/Triggers/Triggers.js
index 801dfb6fe..0f86251e5 100644
--- a/public/pages/MonitorDetails/containers/Triggers/Triggers.js
+++ b/public/pages/MonitorDetails/containers/Triggers/Triggers.js
@@ -78,7 +78,6 @@ export default class Triggers extends Component {
     };
 
     this.onDelete = this.onDelete.bind(this);
-    this.onEdit = this.onEdit.bind(this);
     this.onSelectionChange = this.onSelectionChange.bind(this);
     this.onTableChange = this.onTableChange.bind(this);
     this.monitorsById = {};
@@ -151,11 +150,6 @@ export default class Triggers extends Component {
     updateMonitor({ triggers: updatedTriggers });
   }
 
-  onEdit() {
-    const { monitor } = this.props;
-    this.props.onEditTrigger(monitor.triggers);
-  }
-
   onSelectionChange(selectedItems) {
     this.setState({ selectedItems });
   }
@@ -230,6 +224,4 @@ Triggers.propTypes = {
   monitor: PropTypes.object.isRequired,
   httpClient: PropTypes.object.isRequired,
   updateMonitor: PropTypes.func.isRequired,
-  onEditTrigger: PropTypes.func.isRequired,
-  onCreateTrigger: PropTypes.func.isRequired,
 };
diff --git a/public/pages/MonitorDetails/containers/Triggers/Triggers.test.js b/public/pages/MonitorDetails/containers/Triggers/Triggers.test.js
index 5b6227565..1ff79c4cf 100644
--- a/public/pages/MonitorDetails/containers/Triggers/Triggers.test.js
+++ b/public/pages/MonitorDetails/containers/Triggers/Triggers.test.js
@@ -16,8 +16,6 @@ const props = {
   },
   delegateMonitors: [],
   updateMonitor: jest.fn(),
-  onEditTrigger: jest.fn(),
-  onCreateTrigger: jest.fn(),
 };
 
 jest.mock('uuid/v4', () => {
@@ -50,14 +48,6 @@ describe('Triggers', () => {
     expect(tableKey).not.toBe(diffTableKey);
   });
 
-  test('onEdit calls onEditTrigger', () => {
-    const onEdit = jest.spyOn(Triggers.prototype, 'onEdit');
-    const wrapper = getShallowWrapper();
-    wrapper.instance().onEdit();
-    expect(onEdit).toHaveBeenCalled();
-    expect(props.onEditTrigger).toHaveBeenCalled();
-  });
-
   test('onDelete calls updateMonitor with triggers to keep', () => {
     const onDelete = jest.spyOn(Triggers.prototype, 'onDelete');
     const monitor = {
diff --git a/public/pages/Monitors/containers/Monitors/Monitors.js b/public/pages/Monitors/containers/Monitors/Monitors.js
index 58d107e54..22be5d5f4 100644
--- a/public/pages/Monitors/containers/Monitors/Monitors.js
+++ b/public/pages/Monitors/containers/Monitors/Monitors.js
@@ -144,11 +144,11 @@ export default class Monitors extends Component {
   async getMonitors(from, size, search, sortField, sortDirection, state) {
     this.setState({ loadingMonitors: true });
     try {
-      const params = { from, size, search, sortField, sortDirection, state };
+      const dataSourceId = getDataSourceId();
+      const params = { from, size, search, sortField, sortDirection, state, dataSourceId };
       const queryParamsString = queryString.stringify(params);
       const { httpClient, history } = this.props;
       history.replace({ ...this.props.location, search: queryParamsString });
-      const dataSourceId = getDataSourceId();
       const extendedParams = {
         ...(dataSourceId !== undefined && { dataSourceId }), // Only include dataSourceId if it exists
         ...params, // Other parameters
diff --git a/public/pages/utils/helpers.js b/public/pages/utils/helpers.js
index d990da842..4acc59d10 100644
--- a/public/pages/utils/helpers.js
+++ b/public/pages/utils/helpers.js
@@ -42,7 +42,7 @@ export function parseQueryStringAndGetDataSource(queryString) {
     const pair = param.split('=');
     params[pair[0]] = pair[1];
   }
-  return params['dataSourceId'];
+  return params.hasOwnProperty('dataSourceId') ? params['dataSourceId'] || '' : undefined;
 }
 
 export function constructUrlFromDataSource(url) {