Fit and Finish UX Fixes (#1092) (#1093)

* remove horizontal line below search bar * space between header and panel 16px and space around table 16px * fix 16px around table and search bar * remove pagination from top of table * add button to create monitor * add tooltip to delete * remove space on trash icon * fix gutter size * move edit under actions * fix notifications breadcrumb redirect * spacing from title to panel 16 for view monitor * fix some padding and remove horiz rule for findings section * change update monitor to edit monitor * change update to save and fix padding for create monitor * change monitor details padding and fix link to new page in alerts card * remove boarder when empty state * fix search bar spacing above * make create and edit monitor panels 16px padding * rename * fix original tabs * fix spacing on original monitor page * add pagination back to the alerts page * fix spacing for alerts dashboard flyout * cleanup * fix unit tests and run yarn test:jest -u * fix cypress tests --------- (cherry picked from commit 4a2b603) Signed-off-by: Joanne Wang <jowg@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Sep 17, 2024 · 4e7f2af · 4e7f2af
1 parent 200531d
commit 4e7f2af
Show file tree

Hide file tree

Showing 44 changed files with 172 additions and 862 deletions.
diff --git 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 <caption> 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
@@ -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 <caption> 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
@@ -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
@@ -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 <caption> 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 <caption> 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
@@ -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 <caption> 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
@@ -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
@@ -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
@@ -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
@@ -19,7 +19,7 @@ const ContentPanel = ({
   children,
   panelOptions = {},
 }) => (
-  <EuiPanel style={{ paddingLeft: '0px', paddingRight: '0px', ...panelStyles }}>
+  <EuiPanel style={{ padding: '16px', ...panelStyles }}>
     <EuiFlexGroup style={{ padding: '0px 10px' }} justifyContent="spaceBetween" alignItems="center">
       <EuiFlexItem>
         <EuiText size={titleSize}>

diff --git 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`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-  style="padding-left:0px;padding-right:0px"
+  style="padding:16px"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"

diff --git a/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx b/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx
@@ -27,13 +27,13 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> =  ({ 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<DataSourceAlertsCardProps> =  ({ get
   const createAlertDetailsHeader = useCallback((alert) => {
     const severityColor = getSeverityColor(alert.severity);
     const triggerName = alert.trigger_name ?? DEFAULT_EMPTY_DATA;
-    
+
     return (
       <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween" alignItems="center">
         <EuiFlexItem grow={false}>
@@ -147,9 +147,9 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> =  ({ get
           </EuiFlexGroup>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiLink href={getApplication().getUrlForApp(ALERTS_NAV_ID, { path: '#/dashboard' })} target="_blank"><EuiText size="s" className="eui-displayInline">View all</EuiText></EuiLink>
+          <EuiLink href={getApplication().getUrlForApp(ALERTS_NAV_ID, { path: '#/dashboard' })}><EuiText size="s" className="eui-displayInline">View all</EuiText></EuiLink>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>
   )
-};
+};
diff --git 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' }}
         />
-        <EuiHorizontalRule margin="xs" />
         <EuiBasicTable
           items={loading ? [] : trimmedAlerts}
           /*

diff --git a/...nents/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap b/...nents/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap
@@ -202,13 +202,15 @@ exports[`AlertsDashboardFlyoutComponent renders 1`] = `
       onSearchChange={[Function]}
       onStateChange={[Function]}
       pageCount={1}
+      panelStyles={
+        Object {
+          "padding": "8px 0px 16px",
+        }
+      }
       search=""
       severity="ALL"
       state="ALL"
     />
-    <EuiHorizontalRule
-      margin="xs"
-    />
     <EuiBasicTable
       columns={
         Array [

diff --git a/...ges/CreateMonitor/components/QueryPerformance/__snapshots__/QueryPerformance.test.js.snap b/...ges/CreateMonitor/components/QueryPerformance/__snapshots__/QueryPerformance.test.js.snap
@@ -3,7 +3,7 @@
 exports[`QueryPerformance renders 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-  style="padding-left:10px;padding-right:10px"
+  style="padding:16px;padding-left:10px;padding-right:10px"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"

diff --git a/public/pages/CreateMonitor/components/VisualGraph/__snapshots__/VisualGraph.test.js.snap b/public/pages/CreateMonitor/components/VisualGraph/__snapshots__/VisualGraph.test.js.snap
@@ -3,7 +3,7 @@
 exports[`VisualGraph renders 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-  style="padding-left:10px;padding-right:0px"
+  style="padding:16px;padding-left:10px"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -544,7 +544,7 @@ exports[`VisualGraph renders 1`] = `
 exports[`VisualGraph renders with bucket level monitor 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-  style="padding-left:10px;padding-right:0px"
+  style="padding:16px;padding-left:10px"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"

diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js b/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
@@ -177,7 +177,7 @@ export default class CreateMonitor extends Component {
     } = this.props;
     const { createModalOpen, initialValues, plugins } = this.state;
     return (
-      <div style={{ padding: '25px 50px' }}>
+      <div style={{ padding: '16px' }}>
         <Formik
           initialValues={initialValues}
           onSubmit={this.evaluateSubmission}
@@ -268,7 +268,7 @@ export default class CreateMonitor extends Component {
                       </EuiFlexItem>
                       <EuiFlexItem grow={false}>
                         <EuiSmallButton fill onClick={handleSubmit} isLoading={isSubmitting}>
-                          {edit ? 'Update' : 'Create'}
+                          {edit ? 'Save' : 'Create'}
                         </EuiSmallButton>
                       </EuiFlexItem>
                     </EuiFlexGroup>

diff --git 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`] = `
 <div
   style={
     Object {
-      "padding": "25px 50px",
+      "padding": "16px",
     }
   }
 >

diff --git a/public/pages/CreateMonitor/containers/DataSource/DataSource.js b/public/pages/CreateMonitor/containers/DataSource/DataSource.js
@@ -65,7 +65,6 @@ class DataSource extends Component {
       <ContentPanel
         title="Select data"
         titleSize="s"
-        panelStyles={{ paddingLeft: '10px', paddingRight: '10px' }}
         bodyStyles={{ padding: 'initial' }}
       >
         {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
@@ -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
@@ -702,10 +702,6 @@ class DefineMonitor extends Component {
         <PanelComponent
           title="Query"
           titleSize="s"
-          panelStyles={{
-            paddingLeft: '10px',
-            paddingRight: '10px',
-          }}
           bodyStyles={{ padding: 'initial' }}
           actions={monitorContent.actions}
         >

diff --git 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
@@ -63,12 +63,7 @@ const MonitorDetails = ({
     <Container
       title="Monitor details"
       titleSize="s"
-      panelStyles={{
-        paddingBottom: '20px',
-        paddingLeft: '10px',
-        paddingRight: '10px',
-        paddingTop: '20px',
-      }}
+      panelStyles={{ padding: '16px' }}
       actions={anomalyDetectorContent.actions}
     >
       {!flyoutMode && <EuiSpacer size="s" />}

diff --git a/...pages/CreateMonitor/containers/WorkflowDetails/__snapshots__/WorkflowDetails.test.js.snap b/...pages/CreateMonitor/containers/WorkflowDetails/__snapshots__/WorkflowDetails.test.js.snap
@@ -3,7 +3,7 @@
 exports[`WorkflowDetails renders 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-  style="padding-left:10px;padding-right:10px;padding-bottom:20px;padding-top:20px"
+  style="padding:16px;padding-bottom:20px;padding-left:10px;padding-right:10px;padding-top:20px"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"

diff --git a/public/pages/CreateTrigger/containers/ConfigureTriggers/ConfigureTriggers.js b/public/pages/CreateTrigger/containers/ConfigureTriggers/ConfigureTriggers.js
@@ -453,7 +453,7 @@ class ConfigureTriggers extends React.Component {
             ? 'Triggers define the conditions that determine when a composite monitor should generate its own alert.'
             : undefined
         }
-        panelStyles={{ paddingBottom: '0px', paddingLeft: '20px', paddingRight: '20px' }}
+        panelStyles={{ padding: '16px' }}
         bodyStyles={{ paddingLeft: '0px', padding: '10px' }}
         horizontalRuleClassName={'accordion-horizontal-rule'}
       >

diff --git 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() {
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ exports[`CreateMonitor renders 1`] = ` @@
     <div
       style={
         Object {
-          "padding": "25px 50px",
+          "padding": "16px",
         }
       }
     >
@@ Expand Down @@