From ea6349ce48b7a6371dd54f20316c43330a0fba52 Mon Sep 17 00:00:00 2001 From: Amardeepsingh Siglani Date: Tue, 20 Aug 2024 15:55:21 -0700 Subject: [PATCH] Updated all pages with new header UI (#1056) * updated all pages with new header UI Signed-off-by: Amardeepsingh Siglani * fixed UTs Signed-off-by: Amardeepsingh Siglani * fixed cross cluster API; cypress workflow Signed-off-by: Amardeepsingh Siglani * fixed data source logic on page load for view/edit monitor; removed redundant code; updated tests Signed-off-by: Amardeepsingh Siglani --------- Signed-off-by: Amardeepsingh Siglani Signed-off-by: AWSHurneyt --- .../composite_level_monitor_spec.js | 4 +- opensearch_dashboards.json | 1 + .../components/ContentPanel/ContentPanel.js | 5 +- .../DeleteModal/DeleteMonitorModal.tsx | 3 +- .../AddAlertingMonitor.test.js | 5 + .../AssociatedMonitors/helpers.js | 3 +- .../AlertsDashboardFlyoutComponent.js | 3 +- ...lertsDashboardFlyoutComponent.test.js.snap | 2 +- .../__snapshots__/FormikSwitch.test.js.snap | 2 +- public/components/PageHeader/PageHeader.tsx | 43 +++++ .../FeatureChart/FeatureChart.test.js | 2 +- .../containers/CreateMonitor/CreateMonitor.js | 11 +- .../CreateMonitor/CreateMonitor.test.js | 7 +- .../AcknowledgeAlertsModal.test.js | 2 + .../DashboardControls/DashboardControls.js | 12 +- .../DashboardControls.test.js.snap | 2 +- .../DashboardEmptyPrompt.js | 12 +- .../DashboardEmptyPrompt.test.js | 5 + .../DashboardEmptyPrompt.test.js.snap | 2 +- .../pages/Dashboard/containers/Dashboard.js | 13 +- .../Dashboard/containers/Dashboard.test.js | 5 + .../__snapshots__/Dashboard.test.js.snap | 54 ++++-- public/pages/Dashboard/utils/tableUtils.js | 7 +- .../DestinationsActions.js | 3 - .../FullPageNotificationsInfoCallOut.test.js | 5 + .../NotificationsInfoCallOut.test.js | 5 + .../DestinationsList/DestinationsList.test.js | 5 + public/pages/Main/Main.js | 22 ++- public/pages/Main/Main.test.js | 5 + .../MonitorOverview/MonitorOverview.js | 5 +- .../containers/MonitorDetails.js | 173 ++++++++++-------- .../containers/Triggers/Triggers.js | 8 - .../containers/Triggers/Triggers.test.js | 10 - .../MonitorActions/MonitorActions.js | 28 +-- .../MonitorActions/MonitorActions.test.js | 5 + .../__snapshots__/MonitorActions.test.js.snap | 4 +- .../MonitorControls/MonitorControls.js | 4 +- .../MonitorEmptyPrompt/MonitorEmptyPrompt.js | 3 +- .../MonitorEmptyPrompt.test.js.snap | 2 +- .../Monitors/containers/Monitors/Monitors.js | 36 ++-- .../containers/Monitors/Monitors.test.js | 6 +- .../__snapshots__/Monitors.test.js.snap | 6 + .../containers/Monitors/utils/tableUtils.js | 6 +- public/pages/utils/helpers.js | 2 +- public/plugin.tsx | 21 ++- public/services/services.ts | 9 + public/utils/helpers.js | 17 +- server/services/CrossClusterService.js | 1 + test/utils/helpers.js | 17 +- 49 files changed, 405 insertions(+), 208 deletions(-) create mode 100644 public/components/PageHeader/PageHeader.tsx 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/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 = {}, }) => ( @@ -38,7 +39,9 @@ const ContentPanel = ({ {description} - + {!panelOptions.hideTitleBorder && ( + + )}
{children}
 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 ?
    - {associatedWorkflows.map(({ id, name }) =>
  • {name}
    • )} + {associatedWorkflows.map(({ id, name }) =>
  • {name}
    • )}
: null } 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/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) => ( - + {name} ), 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`] = `

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`] = `