From 71973f759fb05dfe51c4c99492ad5d3aa4932a47 Mon Sep 17 00:00:00 2001 From: Joanne Wang Date: Tue, 24 Sep 2024 15:15:30 -0400 Subject: [PATCH] Revert "Fit and Finish UX Fixes (#1092) (#1094)" This reverts commit 51d2c95e470883f3a0ed1d0d899e9264323e2804. --- .../integration/bucket_level_monitor_spec.js | 8 +- .../cluster_metrics_monitor_spec.js | 4 +- .../composite_level_monitor_spec.js | 3 +- .../document_level_monitor_spec.js | 12 +- .../integration/query_level_monitor_spec.js | 12 +- public/components/Breadcrumbs/Breadcrumbs.js | 4 +- .../Breadcrumbs/Breadcrumbs.test.js | 2 +- .../__snapshots__/Breadcrumbs.test.js.snap | 2 +- .../components/ContentPanel/ContentPanel.js | 2 +- .../__snapshots__/ContentPanel.test.js.snap | 2 +- .../DataSourceAlertsCard.tsx | 10 +- .../AlertsDashboardFlyoutComponent.js | 2 +- ...lertsDashboardFlyoutComponent.test.js.snap | 8 +- .../QueryPerformance.test.js.snap | 2 +- .../__snapshots__/VisualGraph.test.js.snap | 4 +- .../containers/CreateMonitor/CreateMonitor.js | 4 +- .../__snapshots__/CreateMonitor.test.js.snap | 2 +- .../containers/DataSource/DataSource.js | 1 + .../__snapshots__/DataSource.test.js.snap | 6 + .../containers/DefineMonitor/DefineMonitor.js | 4 + .../__snapshots__/DefineMonitor.test.js.snap | 12 + .../MonitorDetails/MonitorDetails.js | 7 +- .../WorkflowDetails.test.js.snap | 2 +- .../ConfigureTriggers/ConfigureTriggers.js | 2 +- .../AcknowledgeAlertsModal.js | 2 +- .../DashboardControls/DashboardControls.js | 6 +- .../DashboardControls.test.js.snap | 78 +- .../pages/Dashboard/containers/Dashboard.js | 21 +- .../Dashboard/containers/FindingsDashboard.js | 4 +- .../__snapshots__/Dashboard.test.js.snap | 681 ++++++++++++++++-- public/pages/Home/Home.js | 4 +- .../Home/__snapshots__/Home.test.js.snap | 3 +- public/pages/Main/Main.js | 2 +- .../MonitorOverview.test.js.snap | 2 +- .../containers/MonitorDetails.js | 27 +- .../MonitorActions/MonitorActions.js | 28 +- .../MonitorActions/MonitorActions.test.js | 6 +- .../__snapshots__/MonitorActions.test.js.snap | 25 +- .../MonitorControls/MonitorControls.js | 5 +- .../Monitors/containers/Monitors/Monitors.js | 7 +- .../containers/Monitors/Monitors.test.js | 2 +- .../__snapshots__/Monitors.test.js.snap | 8 +- public/utils/constants.js | 2 +- public/utils/helpers.js | 4 +- 44 files changed, 862 insertions(+), 172 deletions(-) diff --git a/cypress/integration/bucket_level_monitor_spec.js b/cypress/integration/bucket_level_monitor_spec.js index 766bdba6b..1d8077af0 100644 --- a/cypress/integration/bucket_level_monitor_spec.js +++ b/cypress/integration/bucket_level_monitor_spec.js @@ -338,8 +338,8 @@ describe('Bucket-Level Monitors', () => { // Add a trigger addTriggerToVisualEditorMonitor(SAMPLE_TRIGGER, 0, SAMPLE_ACTION, true); - // Click save to save monitor changes - cy.get('button').contains('Save').last().click({ force: true }); + // Click update button to save monitor changes + cy.get('button').contains('Update').last().click({ force: true }); // Confirm we can see only one row in the trigger list by checking element cy.contains('This table contains 1 row'); @@ -375,8 +375,8 @@ describe('Bucket-Level Monitors', () => { timeout: 25000, }); - // Click the save button - cy.get('button').contains('Save').last().click({ force: true }); + // Click the update button + cy.get('button').contains('Update').last().click({ force: true }); // Confirm we're on the Monitor Details page by searching for the History element cy.contains('History', { timeout: 20000 }); diff --git a/cypress/integration/cluster_metrics_monitor_spec.js b/cypress/integration/cluster_metrics_monitor_spec.js index 2ba38e5bf..e66145e7c 100644 --- a/cypress/integration/cluster_metrics_monitor_spec.js +++ b/cypress/integration/cluster_metrics_monitor_spec.js @@ -369,8 +369,8 @@ describe('ClusterMetricsMonitor', () => { 'ctx.results[0].number_of_pending_tasks >= 0' ); - // Click save button to save monitor changes - cy.get('button').contains('Save').last().click({ force: true }); + // Click update button to save monitor changes + cy.get('button').contains('Update').last().click({ force: true }); // Confirm we can see only one row in the trigger list by checking element cy.contains('This table contains 1 row'); diff --git a/cypress/integration/composite_level_monitor_spec.js b/cypress/integration/composite_level_monitor_spec.js index 9bf785dea..4ef877d73 100644 --- a/cypress/integration/composite_level_monitor_spec.js +++ b/cypress/integration/composite_level_monitor_spec.js @@ -130,7 +130,6 @@ describe('CompositeLevelMonitor', () => { it('by visual editor', () => { // Verify edit page - cy.contains('Edit').click({ force: true }); cy.contains('Edit monitor', { timeout: 20000 }); cy.get('input[name="name"]').type('_edited'); @@ -151,7 +150,7 @@ describe('CompositeLevelMonitor', () => { .type('{enter}'); cy.intercept('api/alerting/workflows/*').as('updateMonitorRequest'); - cy.get('button').contains('Save').click({ force: true }); + cy.get('button').contains('Update').click({ force: true }); // Wait for monitor to be created cy.wait('@updateMonitorRequest').then(() => { diff --git a/cypress/integration/document_level_monitor_spec.js b/cypress/integration/document_level_monitor_spec.js index f43c3930f..9e82db039 100644 --- a/cypress/integration/document_level_monitor_spec.js +++ b/cypress/integration/document_level_monitor_spec.js @@ -380,8 +380,8 @@ describe('DocumentLevelMonitor', () => { // TODO: Test with Notifications plugin - // Click the save button - cy.get('button').contains('Save').last().click({ force: true }); + // Click the update button + cy.get('button').contains('Update').last().click({ force: true }); // Confirm we can see only one row in the trigger list by checking element cy.contains('This table contains 2 rows'); @@ -446,8 +446,8 @@ describe('DocumentLevelMonitor', () => { // TODO: Test with Notifications plugin - // Click the save button - cy.get('button').contains('Save').last().click({ force: true }); + // Click the create button + cy.get('button').contains('Update').last().click({ force: true }); // Confirm we can see only one row in the trigger list by checking element cy.contains('This table contains 1 row'); @@ -489,8 +489,8 @@ describe('DocumentLevelMonitor', () => { cy.get('[data-test-subj="indicesComboBox"]').should('not.have.text', TESTING_INDEX_A); cy.get('[data-test-subj="indicesComboBox"]').contains(TESTING_INDEX_B, { timeout: 20000 }); - // Click the save button - cy.get('button').contains('Save').last().click({ force: true }); + // Click the update button + cy.get('button').contains('Update').last().click({ force: true }); // Confirm we're on the Monitor Details page by searching for the History element cy.contains('History', { timeout: 20000 }); diff --git a/cypress/integration/query_level_monitor_spec.js b/cypress/integration/query_level_monitor_spec.js index 57f1af4c4..6743d7d1a 100644 --- a/cypress/integration/query_level_monitor_spec.js +++ b/cypress/integration/query_level_monitor_spec.js @@ -178,8 +178,8 @@ describe('Query-Level Monitors', () => { .clear() .type(UPDATED_MONITOR, { force: true }); - // Click save button - cy.get('button').contains('Save').last().click({ force: true }); + // Click Update button + cy.get('button').contains('Update').last().click({ force: true }); // Confirm the update process is done and the page loaded cy.contains('Edit monitor'); @@ -222,8 +222,8 @@ describe('Query-Level Monitors', () => { timeout: 25000, }); - // Click the save button - cy.get('button').contains('Save').last().click(); + // Click the update button + cy.get('button').contains('Update').last().click(); // Confirm we're on the Monitor Details page by searching for the History element cy.contains('History', { timeout: 25000 }); @@ -339,8 +339,8 @@ describe('Query-Level Monitors', () => { addVisualQueryLevelTrigger(trigger.name, i, true, `IS ${trigger.enum}`, `${i}`); } - // Click save button - cy.get('button').contains('Save').last().click({ force: true }); + // Click Update button + cy.get('button').contains('Update').last().click({ force: true }); // Confirm we can see the correct number of rows in the trigger list by checking element cy.contains(`This table contains ${triggers.length} rows`, { timeout: 25000 }); diff --git a/public/components/Breadcrumbs/Breadcrumbs.js b/public/components/Breadcrumbs/Breadcrumbs.js index 1fc731295..45640e466 100644 --- a/public/components/Breadcrumbs/Breadcrumbs.js +++ b/public/components/Breadcrumbs/Breadcrumbs.js @@ -82,8 +82,8 @@ export async function getBreadcrumb(route, routeState, httpClient) { console.error(err); } const breadcrumbs = [{ text: monitorName, href: `/monitors/${base}` }]; - if (action === MONITOR_ACTIONS.EDIT_MONITOR) - breadcrumbs.push({ text: 'Edit monitor', href: '/' }); + if (action === MONITOR_ACTIONS.UPDATE_MONITOR) + breadcrumbs.push({ text: 'Update monitor', href: '/' }); if (action === TRIGGER_ACTIONS.CREATE_TRIGGER) breadcrumbs.push({ text: 'Create trigger', href: '/' }); if (action === TRIGGER_ACTIONS.UPDATE_TRIGGER) diff --git a/public/components/Breadcrumbs/Breadcrumbs.test.js b/public/components/Breadcrumbs/Breadcrumbs.test.js index a2921166b..045fc4faa 100644 --- a/public/components/Breadcrumbs/Breadcrumbs.test.js +++ b/public/components/Breadcrumbs/Breadcrumbs.test.js @@ -102,7 +102,7 @@ describe('getBreadcrumb', () => { httpClientMock.get.mockResolvedValue({ ok: true, resp: { name: 'random_name' } }); expect( await getBreadcrumb( - `${monitorId}?action=${MONITOR_ACTIONS.EDIT_MONITOR}`, + `${monitorId}?action=${MONITOR_ACTIONS.UPDATE_MONITOR}`, {}, httpClientMock ) diff --git a/public/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.js.snap b/public/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.js.snap index 7082b7064..c649707d3 100644 --- a/public/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.js.snap +++ b/public/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.js.snap @@ -70,7 +70,7 @@ Array [ }, Object { "href": "/", - "text": "Edit monitor", + "text": "Update monitor", }, ] `; diff --git a/public/components/ContentPanel/ContentPanel.js b/public/components/ContentPanel/ContentPanel.js index 4baa8c1c8..445b05183 100644 --- a/public/components/ContentPanel/ContentPanel.js +++ b/public/components/ContentPanel/ContentPanel.js @@ -19,7 +19,7 @@ const ContentPanel = ({ children, panelOptions = {}, }) => ( - + diff --git a/public/components/ContentPanel/__snapshots__/ContentPanel.test.js.snap b/public/components/ContentPanel/__snapshots__/ContentPanel.test.js.snap index 6c3fe1fe8..4efb999c3 100644 --- a/public/components/ContentPanel/__snapshots__/ContentPanel.test.js.snap +++ b/public/components/ContentPanel/__snapshots__/ContentPanel.test.js.snap @@ -3,7 +3,7 @@ exports[`ContentPanel renders 1`] = `
= ({ get useEffect(() => { setLoading(true); - getClient().get('../api/alerting/alerts', { + getClient().get('../api/alerting/alerts', { query: { size: 25, sortField: 'start_time', dataSourceId: dataSource?.id || '', sortDirection: 'desc' - } + } }).then(res => { if (res.ok) { setAlerts(res.alerts); @@ -53,7 +53,7 @@ export const DataSourceAlertsCard: React.FC = ({ get const createAlertDetailsHeader = useCallback((alert) => { const severityColor = getSeverityColor(alert.severity); const triggerName = alert.trigger_name ?? DEFAULT_EMPTY_DATA; - + return ( @@ -147,9 +147,9 @@ export const DataSourceAlertsCard: React.FC = ({ get - View all + View all ) -}; +}; \ No newline at end of file diff --git a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js index de91f1793..0a97b8c31 100644 --- a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js +++ b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js @@ -455,8 +455,8 @@ export default class AlertsDashboardFlyoutComponent extends Component { onPageChange={this.onPageClick} isAlertsFlyout={true} monitorType={monitorType} - panelStyles={{ padding: '8px 0px 16px' }} /> + +
+
- {edit ? 'Save' : 'Create'} + {edit ? 'Update' : 'Create'} diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/__snapshots__/CreateMonitor.test.js.snap b/public/pages/CreateMonitor/containers/CreateMonitor/__snapshots__/CreateMonitor.test.js.snap index 32f594204..a7f3b3507 100644 --- a/public/pages/CreateMonitor/containers/CreateMonitor/__snapshots__/CreateMonitor.test.js.snap +++ b/public/pages/CreateMonitor/containers/CreateMonitor/__snapshots__/CreateMonitor.test.js.snap @@ -4,7 +4,7 @@ exports[`CreateMonitor renders 1`] = `
diff --git a/public/pages/CreateMonitor/containers/DataSource/DataSource.js b/public/pages/CreateMonitor/containers/DataSource/DataSource.js index fdf159e7a..c7daff3e8 100644 --- a/public/pages/CreateMonitor/containers/DataSource/DataSource.js +++ b/public/pages/CreateMonitor/containers/DataSource/DataSource.js @@ -65,6 +65,7 @@ class DataSource extends Component { {monitorIndexDisplay} diff --git a/public/pages/CreateMonitor/containers/DataSource/__snapshots__/DataSource.test.js.snap b/public/pages/CreateMonitor/containers/DataSource/__snapshots__/DataSource.test.js.snap index 2c6902d8a..f66def69a 100644 --- a/public/pages/CreateMonitor/containers/DataSource/__snapshots__/DataSource.test.js.snap +++ b/public/pages/CreateMonitor/containers/DataSource/__snapshots__/DataSource.test.js.snap @@ -7,6 +7,12 @@ exports[`DataSource renders 1`] = ` "padding": "initial", } } + panelStyles={ + Object { + "paddingLeft": "10px", + "paddingRight": "10px", + } + } title="Select data" titleSize="s" > diff --git a/public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js b/public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js index 96dd6cc4e..b0284aae5 100644 --- a/public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js +++ b/public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js @@ -702,6 +702,10 @@ class DefineMonitor extends Component { diff --git a/public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap b/public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap index 09fd36867..f4339f1e4 100644 --- a/public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap +++ b/public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap @@ -91,6 +91,12 @@ exports[`DefineMonitor renders 1`] = ` "padding": "initial", } } + panelStyles={ + Object { + "paddingLeft": "10px", + "paddingRight": "10px", + } + } title="Query" titleSize="s" > @@ -138,6 +144,12 @@ exports[`DefineMonitor should show warning in case of Ad monitor and plugin is n "padding": "initial", } } + panelStyles={ + Object { + "paddingLeft": "10px", + "paddingRight": "10px", + } + } title="Query" titleSize="s" > diff --git a/public/pages/CreateMonitor/containers/MonitorDetails/MonitorDetails.js b/public/pages/CreateMonitor/containers/MonitorDetails/MonitorDetails.js index 95e397863..04d1b10fd 100644 --- a/public/pages/CreateMonitor/containers/MonitorDetails/MonitorDetails.js +++ b/public/pages/CreateMonitor/containers/MonitorDetails/MonitorDetails.js @@ -63,7 +63,12 @@ const MonitorDetails = ({ {!flyoutMode && } diff --git a/public/pages/CreateMonitor/containers/WorkflowDetails/__snapshots__/WorkflowDetails.test.js.snap b/public/pages/CreateMonitor/containers/WorkflowDetails/__snapshots__/WorkflowDetails.test.js.snap index 16ab04200..65b8caa32 100644 --- a/public/pages/CreateMonitor/containers/WorkflowDetails/__snapshots__/WorkflowDetails.test.js.snap +++ b/public/pages/CreateMonitor/containers/WorkflowDetails/__snapshots__/WorkflowDetails.test.js.snap @@ -3,7 +3,7 @@ exports[`WorkflowDetails renders 1`] = `
diff --git a/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js b/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js index e9dae71f0..a839d9c13 100644 --- a/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js +++ b/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js @@ -227,7 +227,7 @@ export default class AcknowledgeAlertsModal extends Component { onCreateTrigger = () => { const { history, monitorId, onClose } = this.props; onClose(); - history.push(`/monitors/${monitorId}?action=${MONITOR_ACTIONS.EDIT_MONITOR}`); + history.push(`/monitors/${monitorId}?action=${MONITOR_ACTIONS.UPDATE_MONITOR}`); }; render() { diff --git a/public/pages/Dashboard/components/DashboardControls/DashboardControls.js b/public/pages/Dashboard/components/DashboardControls/DashboardControls.js index fc9118b08..c1d38190a 100644 --- a/public/pages/Dashboard/components/DashboardControls/DashboardControls.js +++ b/public/pages/Dashboard/components/DashboardControls/DashboardControls.js @@ -45,7 +45,6 @@ const DashboardControls = ({ isAlertsFlyout = false, monitorType, alertActions = [], - panelStyles = {}, }) => { let supportedStateOptions = stateOptions; switch (monitorType) { @@ -57,7 +56,7 @@ const DashboardControls = ({ break; } return ( - + ( {action} ))} + + + ); }; 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 f15dbc8d7..4809833ca 100644 --- a/public/pages/Dashboard/components/DashboardControls/__snapshots__/DashboardControls.test.js.snap +++ b/public/pages/Dashboard/components/DashboardControls/__snapshots__/DashboardControls.test.js.snap @@ -3,7 +3,7 @@ exports[`DashboardControls renders 1`] = `
+
+ +
`; diff --git a/public/pages/Dashboard/containers/Dashboard.js b/public/pages/Dashboard/containers/Dashboard.js index 2005bee81..0838fe007 100644 --- a/public/pages/Dashboard/containers/Dashboard.js +++ b/public/pages/Dashboard/containers/Dashboard.js @@ -9,12 +9,10 @@ import queryString from 'query-string'; import { EuiBasicTable, EuiSmallButton, + EuiHorizontalRule, EuiIcon, EuiToolTip, EuiSmallButtonIcon, - EuiFlexItem, - EuiPagination, - EuiFlexGroup, } from '@elastic/eui'; import ContentPanel from '../../../components/ContentPanel'; import DashboardEmptyPrompt from '../components/DashboardEmptyPrompt'; @@ -532,7 +530,6 @@ export default class Dashboard extends Component { }; const useUpdatedUx = !perAlertView && getUseUpdatedUx(); - const shouldShowPagination = !perAlertView && totalAlerts > 0; return ( <> @@ -549,7 +546,6 @@ export default class Dashboard extends Component { bodyStyles={{ padding: 'initial' }} actions={useUpdatedUx ? undefined : actions()} panelOptions={{ hideTitleBorder: useUpdatedUx }} - panelStyles={{ padding: useUpdatedUx && totalAlerts < 1 ? '16px 16px 0px' : '16px' }} > + + - {shouldShowPagination && ( - - - - - - )} - {this.state.showAlertsModal && this.renderModal()} diff --git a/public/pages/Dashboard/containers/FindingsDashboard.js b/public/pages/Dashboard/containers/FindingsDashboard.js index 0bd386aef..61414901b 100644 --- a/public/pages/Dashboard/containers/FindingsDashboard.js +++ b/public/pages/Dashboard/containers/FindingsDashboard.js @@ -206,7 +206,7 @@ export default class FindingsDashboard extends Component { bodyStyles={{ padding: 'initial' }} > {!isPreview && ( - + )} + + @@ -132,7 +128,8 @@ exports[`Dashboard renders in flyout 1`] = ` className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow" style={ Object { - "padding": "16px", + "paddingLeft": "0px", + "paddingRight": "0px", } } > @@ -304,11 +301,6 @@ exports[`Dashboard renders in flyout 1`] = ` onSeverityChange={[Function]} onStateChange={[Function]} pageCount={1} - panelStyles={ - Object { - "padding": "8px 0px 16px", - } - } search="" severity="ALL" state="ALL" @@ -317,7 +309,7 @@ exports[`Dashboard renders in flyout 1`] = ` gutterSize="s" style={ Object { - "padding": "8px 0px 16px", + "padding": "0px 5px", } } > @@ -325,7 +317,7 @@ exports[`Dashboard renders in flyout 1`] = ` className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive" style={ Object { - "padding": "8px 0px 16px", + "padding": "0px 5px", } } > @@ -577,9 +569,216 @@ exports[`Dashboard renders in flyout 1`] = `
+ +
+ + + +
+
+ +
+ @@ -1541,7 +1736,8 @@ exports[`Dashboard renders with alert by triggers view 1`] = ` className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow" style={ Object { - "padding": "16px", + "paddingLeft": "0px", + "paddingRight": "0px", } } > @@ -1774,11 +1970,6 @@ exports[`Dashboard renders with alert by triggers view 1`] = ` onSeverityChange={[Function]} onStateChange={[Function]} pageCount={1} - panelStyles={ - Object { - "padding": "0px 0px 16px", - } - } search="" severity="ALL" state="ALL" @@ -1787,7 +1978,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = ` gutterSize="s" style={ Object { - "padding": "0px 0px 16px", + "padding": "0px 5px", } } > @@ -1795,7 +1986,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = ` className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive" style={ Object { - "padding": "0px 0px 16px", + "padding": "0px 5px", } } > @@ -2221,9 +2412,216 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
+ +
+ + + +
+
+ +
+ @@ -3398,7 +3792,8 @@ exports[`Dashboard renders with per alert view 1`] = ` className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow" style={ Object { - "padding": "16px", + "paddingLeft": "0px", + "paddingRight": "0px", } } > @@ -3570,11 +3965,6 @@ exports[`Dashboard renders with per alert view 1`] = ` onSeverityChange={[Function]} onStateChange={[Function]} pageCount={1} - panelStyles={ - Object { - "padding": "8px 0px 16px", - } - } search="" severity="ALL" state="ALL" @@ -3583,7 +3973,7 @@ exports[`Dashboard renders with per alert view 1`] = ` gutterSize="s" style={ Object { - "padding": "8px 0px 16px", + "padding": "0px 5px", } } > @@ -3591,7 +3981,7 @@ exports[`Dashboard renders with per alert view 1`] = ` className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive" style={ Object { - "padding": "8px 0px 16px", + "padding": "0px 5px", } } > @@ -4017,9 +4407,216 @@ exports[`Dashboard renders with per alert view 1`] = `
+ +
+ + + +
+
+ +
+ {!defaultRoute && ( - + {this.tabs.map(this.renderTab)} )} -
+
`; diff --git a/public/pages/Main/Main.js b/public/pages/Main/Main.js index ca67c308e..8813eda35 100644 --- a/public/pages/Main/Main.js +++ b/public/pages/Main/Main.js @@ -146,7 +146,7 @@ class Main extends Component { -
+
{ diff --git a/public/pages/MonitorDetails/components/MonitorOverview/__snapshots__/MonitorOverview.test.js.snap b/public/pages/MonitorDetails/components/MonitorOverview/__snapshots__/MonitorOverview.test.js.snap index 5eb075a99..94bcb3dc6 100644 --- a/public/pages/MonitorDetails/components/MonitorOverview/__snapshots__/MonitorOverview.test.js.snap +++ b/public/pages/MonitorDetails/components/MonitorOverview/__snapshots__/MonitorOverview.test.js.snap @@ -3,7 +3,7 @@ exports[`MonitorOverview renders 1`] = `
- - - - + ); monitorActions.push( @@ -521,7 +518,7 @@ export default class MonitorDetails extends Component { } return ( -
+
{this.renderNoTriggersCallOut()} - {!useUpdatedUx && } + Acknowledge , - { - this.onCloseActions(); - this.props.onClickEdit(); - }} - disabled={isEditDisabled} - > - Edit - , + Create monitor ); @@ -129,6 +112,15 @@ export default class MonitorActions extends Component { + + + Edit + + { }); test('does not call onClickEdit when Edit is clicked and edit is disabled', () => { - wrapper.find('[data-test-subj="actionsButton"]').hostNodes().simulate('click'); - wrapper.find('[data-test-subj="editItem"]').hostNodes().simulate('click'); + wrapper.find('[data-test-subj="editButton"]').hostNodes().simulate('click'); expect(props.onClickEdit).toHaveBeenCalledTimes(0); }); test('calls onClickEdit when Edit is clicked and isEditDisabled=false', () => { const props = getProps(); wrapper.setProps({ ...props, isEditDisabled: false }); - wrapper.find('[data-test-subj="actionsButton"]').hostNodes().simulate('click'); - wrapper.find('[data-test-subj="editItem"]').hostNodes().simulate('click'); + wrapper.find('[data-test-subj="editButton"]').hostNodes().simulate('click'); expect(props.onClickEdit).toHaveBeenCalledTimes(1); }); }); 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 27f98b44e..28675fe19 100644 --- a/public/pages/Monitors/components/MonitorActions/__snapshots__/MonitorActions.test.js.snap +++ b/public/pages/Monitors/components/MonitorActions/__snapshots__/MonitorActions.test.js.snap @@ -35,6 +35,26 @@ exports[`MonitorActions renders 1`] = `
+
+ +
@@ -45,11 +65,8 @@ exports[`MonitorActions renders 1`] = ` rel="noreferrer" > -
- EuiIconMock -
diff --git a/public/pages/Monitors/components/MonitorControls/MonitorControls.js b/public/pages/Monitors/components/MonitorControls/MonitorControls.js index 593fb92a1..56c329855 100644 --- a/public/pages/Monitors/components/MonitorControls/MonitorControls.js +++ b/public/pages/Monitors/components/MonitorControls/MonitorControls.js @@ -34,7 +34,7 @@ const MonitorControls = ({ onPageClick, monitorActions = null, }) => ( - + {monitorActions && {monitorActions}} + + + ); diff --git a/public/pages/Monitors/containers/Monitors/Monitors.js b/public/pages/Monitors/containers/Monitors/Monitors.js index cb822a7ec..22be5d5f4 100644 --- a/public/pages/Monitors/containers/Monitors/Monitors.js +++ b/public/pages/Monitors/containers/Monitors/Monitors.js @@ -6,7 +6,7 @@ import React, { Component } from 'react'; import _ from 'lodash'; import queryString from 'query-string'; -import { EuiBasicTable } from '@elastic/eui'; +import { EuiBasicTable, EuiHorizontalRule } from '@elastic/eui'; import AcknowledgeModal from '../../components/AcknowledgeModal'; import ContentPanel from '../../../../components/ContentPanel'; import MonitorActions from '../../components/MonitorActions'; @@ -285,7 +285,7 @@ export default class Monitors extends Component { const { selectedItems: [{ id }], } = this.state; - if (id) this.props.history.push(`/monitors/${id}?action=${MONITOR_ACTIONS.EDIT_MONITOR}`); + if (id) this.props.history.push(`/monitors/${id}?action=${MONITOR_ACTIONS.UPDATE_MONITOR}`); } onClickEnable(item) { @@ -467,7 +467,6 @@ export default class Monitors extends Component { bodyStyles={{ padding: 'initial' }} title={useUpdatedUx ? undefined : 'Monitors'} panelOptions={{ hideTitleBorder: useUpdatedUx }} - panelStyles={{ padding: useUpdatedUx && totalMonitors < 1 ? '16px 16px 0px' : '16px' }} > + + {showAcknowledgeModal && ( { expect(onClickEdit).toHaveBeenCalled(); expect(historyMock.push).toHaveBeenCalled(); - expect(historyMock.push).toHaveBeenCalledWith(`/monitors/random_id?action=edit-monitor`); + expect(historyMock.push).toHaveBeenCalledWith(`/monitors/random_id?action=update-monitor`); }); test('onClickEnable calls updateMonitors with monitor and enable:true update', () => { 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 8c0f71f42..28233c7c4 100644 --- a/public/pages/Monitors/containers/Monitors/__snapshots__/Monitors.test.js.snap +++ b/public/pages/Monitors/containers/Monitors/__snapshots__/Monitors.test.js.snap @@ -24,11 +24,6 @@ exports[`Monitors renders 1`] = ` "hideTitleBorder": undefined, } } - panelStyles={ - Object { - "padding": "16px", - } - } title="Monitors" > +