From 5b514586398a0d863a4a33952e2153bf64ab246f Mon Sep 17 00:00:00 2001 From: Joanne Wang Date: Tue, 17 Sep 2024 09:28:03 -0700 Subject: [PATCH] Fit and Finish UX Fixes (#1092) * remove horizontal line below search bar Signed-off-by: Joanne Wang * space between header and panel 16px and space around table 16px Signed-off-by: Joanne Wang * fix 16px around table and search bar Signed-off-by: Joanne Wang * remove pagination from top of table Signed-off-by: Joanne Wang * add button to create monitor Signed-off-by: Joanne Wang * add tooltip to delete Signed-off-by: Joanne Wang * remove space on trash icon Signed-off-by: Joanne Wang * fix gutter size Signed-off-by: Joanne Wang * move edit under actions Signed-off-by: Joanne Wang * fix notifications breadcrumb redirect Signed-off-by: Joanne Wang * spacing from title to panel 16 for view monitor Signed-off-by: Joanne Wang * fix some padding and remove horiz rule for findings section Signed-off-by: Joanne Wang * change update monitor to edit monitor Signed-off-by: Joanne Wang * change update to save and fix padding for create monitor Signed-off-by: Joanne Wang * change monitor details padding and fix link to new page in alerts card Signed-off-by: Joanne Wang * remove boarder when empty state Signed-off-by: Joanne Wang * fix search bar spacing above Signed-off-by: Joanne Wang * make create and edit monitor panels 16px padding Signed-off-by: Joanne Wang * rename Signed-off-by: Joanne Wang * fix original tabs Signed-off-by: Joanne Wang * fix spacing on original monitor page Signed-off-by: Joanne Wang * add pagination back to the alerts page Signed-off-by: Joanne Wang * fix spacing for alerts dashboard flyout Signed-off-by: Joanne Wang * cleanup Signed-off-by: Joanne Wang * fix unit tests and run yarn test:jest -u Signed-off-by: Joanne Wang * fix cypress tests Signed-off-by: Joanne Wang --------- Signed-off-by: Joanne Wang --- .../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, 172 insertions(+), 862 deletions(-) diff --git a/cypress/integration/bucket_level_monitor_spec.js b/cypress/integration/bucket_level_monitor_spec.js index 1d8077af0..766bdba6b 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 update button to save monitor changes - cy.get('button').contains('Update').last().click({ force: true }); + // Click save to save monitor changes + cy.get('button').contains('Save').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 update button - cy.get('button').contains('Update').last().click({ force: true }); + // Click the save button + cy.get('button').contains('Save').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 e66145e7c..2ba38e5bf 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 update button to save monitor changes - cy.get('button').contains('Update').last().click({ force: true }); + // Click save button to save monitor changes + cy.get('button').contains('Save').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 4ef877d73..9bf785dea 100644 --- a/cypress/integration/composite_level_monitor_spec.js +++ b/cypress/integration/composite_level_monitor_spec.js @@ -130,6 +130,7 @@ 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'); @@ -150,7 +151,7 @@ describe('CompositeLevelMonitor', () => { .type('{enter}'); cy.intercept('api/alerting/workflows/*').as('updateMonitorRequest'); - cy.get('button').contains('Update').click({ force: true }); + cy.get('button').contains('Save').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 9e82db039..f43c3930f 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 update button - cy.get('button').contains('Update').last().click({ force: true }); + // Click the save button + cy.get('button').contains('Save').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 create button - cy.get('button').contains('Update').last().click({ force: true }); + // Click the save button + cy.get('button').contains('Save').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 update button - cy.get('button').contains('Update').last().click({ force: true }); + // Click the save button + cy.get('button').contains('Save').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 6743d7d1a..57f1af4c4 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 Update button - cy.get('button').contains('Update').last().click({ force: true }); + // Click save button + cy.get('button').contains('Save').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 update button - cy.get('button').contains('Update').last().click(); + // Click the save button + cy.get('button').contains('Save').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 Update button - cy.get('button').contains('Update').last().click({ force: true }); + // Click save button + cy.get('button').contains('Save').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 45640e466..1fc731295 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.UPDATE_MONITOR) - breadcrumbs.push({ text: 'Update monitor', href: '/' }); + if (action === MONITOR_ACTIONS.EDIT_MONITOR) + breadcrumbs.push({ text: 'Edit 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 045fc4faa..a2921166b 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.UPDATE_MONITOR}`, + `${monitorId}?action=${MONITOR_ACTIONS.EDIT_MONITOR}`, {}, httpClientMock ) diff --git a/public/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.js.snap b/public/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.js.snap index c649707d3..7082b7064 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": "Update monitor", + "text": "Edit monitor", }, ] `; diff --git a/public/components/ContentPanel/ContentPanel.js b/public/components/ContentPanel/ContentPanel.js index 445b05183..4baa8c1c8 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 4efb999c3..6c3fe1fe8 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 0a97b8c31..de91f1793 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 ? 'Update' : 'Create'} + {edit ? 'Save' : '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 a7f3b3507..32f594204 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 c7daff3e8..fdf159e7a 100644 --- a/public/pages/CreateMonitor/containers/DataSource/DataSource.js +++ b/public/pages/CreateMonitor/containers/DataSource/DataSource.js @@ -65,7 +65,6 @@ 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 f66def69a..2c6902d8a 100644 --- a/public/pages/CreateMonitor/containers/DataSource/__snapshots__/DataSource.test.js.snap +++ b/public/pages/CreateMonitor/containers/DataSource/__snapshots__/DataSource.test.js.snap @@ -7,12 +7,6 @@ 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 b0284aae5..96dd6cc4e 100644 --- a/public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js +++ b/public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js @@ -702,10 +702,6 @@ 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 f4339f1e4..09fd36867 100644 --- a/public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap +++ b/public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap @@ -91,12 +91,6 @@ exports[`DefineMonitor renders 1`] = ` "padding": "initial", } } - panelStyles={ - Object { - "paddingLeft": "10px", - "paddingRight": "10px", - } - } title="Query" titleSize="s" > @@ -144,12 +138,6 @@ 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 04d1b10fd..95e397863 100644 --- a/public/pages/CreateMonitor/containers/MonitorDetails/MonitorDetails.js +++ b/public/pages/CreateMonitor/containers/MonitorDetails/MonitorDetails.js @@ -63,12 +63,7 @@ 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 65b8caa32..16ab04200 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 a839d9c13..e9dae71f0 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.UPDATE_MONITOR}`); + history.push(`/monitors/${monitorId}?action=${MONITOR_ACTIONS.EDIT_MONITOR}`); }; render() { diff --git a/public/pages/Dashboard/components/DashboardControls/DashboardControls.js b/public/pages/Dashboard/components/DashboardControls/DashboardControls.js index c1d38190a..fc9118b08 100644 --- a/public/pages/Dashboard/components/DashboardControls/DashboardControls.js +++ b/public/pages/Dashboard/components/DashboardControls/DashboardControls.js @@ -45,6 +45,7 @@ const DashboardControls = ({ isAlertsFlyout = false, monitorType, alertActions = [], + panelStyles = {}, }) => { let supportedStateOptions = stateOptions; switch (monitorType) { @@ -56,7 +57,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 4809833ca..f15dbc8d7 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 0838fe007..2005bee81 100644 --- a/public/pages/Dashboard/containers/Dashboard.js +++ b/public/pages/Dashboard/containers/Dashboard.js @@ -9,10 +9,12 @@ 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'; @@ -530,6 +532,7 @@ export default class Dashboard extends Component { }; const useUpdatedUx = !perAlertView && getUseUpdatedUx(); + const shouldShowPagination = !perAlertView && totalAlerts > 0; return ( <> @@ -546,6 +549,7 @@ 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 61414901b..0bd386aef 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 && ( - + )} - - @@ -128,8 +132,7 @@ exports[`Dashboard renders in flyout 1`] = ` className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow" style={ Object { - "paddingLeft": "0px", - "paddingRight": "0px", + "padding": "16px", } } > @@ -301,6 +304,11 @@ exports[`Dashboard renders in flyout 1`] = ` onSeverityChange={[Function]} onStateChange={[Function]} pageCount={1} + panelStyles={ + Object { + "padding": "8px 0px 16px", + } + } search="" severity="ALL" state="ALL" @@ -309,7 +317,7 @@ exports[`Dashboard renders in flyout 1`] = ` gutterSize="s" style={ Object { - "padding": "0px 5px", + "padding": "8px 0px 16px", } } > @@ -317,7 +325,7 @@ exports[`Dashboard renders in flyout 1`] = ` className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive" style={ Object { - "padding": "0px 5px", + "padding": "8px 0px 16px", } } > @@ -569,216 +577,9 @@ exports[`Dashboard renders in flyout 1`] = `
- -
- - - -
-
- -
- @@ -1736,8 +1541,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = ` className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow" style={ Object { - "paddingLeft": "0px", - "paddingRight": "0px", + "padding": "16px", } } > @@ -1970,6 +1774,11 @@ 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" @@ -1978,7 +1787,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = ` gutterSize="s" style={ Object { - "padding": "0px 5px", + "padding": "0px 0px 16px", } } > @@ -1986,7 +1795,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = ` className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive" style={ Object { - "padding": "0px 5px", + "padding": "0px 0px 16px", } } > @@ -2412,216 +2221,9 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
- -
- - - -
-
- -
- @@ -3792,8 +3398,7 @@ exports[`Dashboard renders with per alert view 1`] = ` className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow" style={ Object { - "paddingLeft": "0px", - "paddingRight": "0px", + "padding": "16px", } } > @@ -3965,6 +3570,11 @@ 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" @@ -3973,7 +3583,7 @@ exports[`Dashboard renders with per alert view 1`] = ` gutterSize="s" style={ Object { - "padding": "0px 5px", + "padding": "8px 0px 16px", } } > @@ -3981,7 +3591,7 @@ exports[`Dashboard renders with per alert view 1`] = ` className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive" style={ Object { - "padding": "0px 5px", + "padding": "8px 0px 16px", } } > @@ -4407,216 +4017,9 @@ 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 8813eda35..ca67c308e 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 94bcb3dc6..5eb075a99 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( @@ -518,7 +521,7 @@ export default class MonitorDetails extends Component { } return ( -
+
{this.renderNoTriggersCallOut()} - + {!useUpdatedUx && } Acknowledge , + { + this.onCloseActions(); + this.props.onClickEdit(); + }} + disabled={isEditDisabled} + > + Edit + , + Create monitor ); @@ -112,15 +129,6 @@ 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="editButton"]').hostNodes().simulate('click'); + wrapper.find('[data-test-subj="actionsButton"]').hostNodes().simulate('click'); + wrapper.find('[data-test-subj="editItem"]').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="editButton"]').hostNodes().simulate('click'); + wrapper.find('[data-test-subj="actionsButton"]').hostNodes().simulate('click'); + wrapper.find('[data-test-subj="editItem"]').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 28675fe19..27f98b44e 100644 --- a/public/pages/Monitors/components/MonitorActions/__snapshots__/MonitorActions.test.js.snap +++ b/public/pages/Monitors/components/MonitorActions/__snapshots__/MonitorActions.test.js.snap @@ -35,26 +35,6 @@ exports[`MonitorActions renders 1`] = `
-
- -
@@ -65,8 +45,11 @@ 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 56c329855..593fb92a1 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 22be5d5f4..cb822a7ec 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, EuiHorizontalRule } from '@elastic/eui'; +import { EuiBasicTable } 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.UPDATE_MONITOR}`); + if (id) this.props.history.push(`/monitors/${id}?action=${MONITOR_ACTIONS.EDIT_MONITOR}`); } onClickEnable(item) { @@ -467,6 +467,7 @@ 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=update-monitor`); + expect(historyMock.push).toHaveBeenCalledWith(`/monitors/random_id?action=edit-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 28233c7c4..8c0f71f42 100644 --- a/public/pages/Monitors/containers/Monitors/__snapshots__/Monitors.test.js.snap +++ b/public/pages/Monitors/containers/Monitors/__snapshots__/Monitors.test.js.snap @@ -24,6 +24,11 @@ exports[`Monitors renders 1`] = ` "hideTitleBorder": undefined, } } + panelStyles={ + Object { + "padding": "16px", + } + } title="Monitors" > -