Updated all pages with new header UI

.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

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);

opensearch_dashboards.json

@@ -7,6 +7,7 @@
   "requiredPlugins": [
     "uiActions",
     "dashboard",
+    "navigation",
     "embeddable",
     "opensearchDashboardsReact",
     "savedObjects",

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>

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
           }

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();

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>
         ),

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' : ''
     }`;
 

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>

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"

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}</>
+  );
+};

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');
 

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}

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();
 });

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', () => {

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>

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

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 } 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.';
@@ -17,8 +18,11 @@ 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 = (
-  <EuiSmallButton fill href={`${PLUGIN_NAME}#${APP_PATH.CREATE_MONITOR}`}>
+const getCreateMonitorButton = () => (
+  <EuiSmallButton
+    fill
+    href={`${getUseUpdatedUx() ? MONITORS_NAV_ID : ''}#${APP_PATH.CREATE_MONITOR}`}
+  >
     Create monitor
   </EuiSmallButton>
 );
@@ -37,7 +41,7 @@ const DashboardEmptyPrompt = ({ onCreateTrigger, isModal = false }) => {
     ? undefined
     : isModal
     ? editMonitorButton(onCreateTrigger)
-    : createMonitorButton;
+    : getCreateMonitorButton();
   return (
     <EuiEmptyPrompt
       style={{ maxWidth: '45em' }}

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', () => {

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