Revert "Fit and Finish UX Fixes (opensearch-project#1092) (opensearch…

…-project#1094)" This reverts commit 51d2c95. Signed-off-by: AWSHurneyt <[email protected]>
AWSHurneyt · Sep 24, 2024 · 6eaec7f · 6eaec7f
1 parent bfb0d79
commit 6eaec7f
Show file tree

Hide file tree

Showing 44 changed files with 863 additions and 182 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 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 <caption> 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
@@ -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 <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,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
@@ -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 <caption> 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 <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 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
@@ -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 <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.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
@@ -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
@@ -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
@@ -19,7 +19,7 @@ const ContentPanel = ({
   children,
   panelOptions = {},
 }) => (
-  <EuiPanel style={{ padding: '16px', ...panelStyles }}>
+  <EuiPanel style={{ paddingLeft: '0px', paddingRight: '0px', ...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:16px"
+  style="padding-left:0px;padding-right:0px"
 >
   <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
@@ -11,7 +11,6 @@ import { dataSourceFilterFn, getSeverityColor, getSeverityBadgeText, getTruncate
 import { renderTime } from "../../pages/Dashboard/utils/tableUtils";
 import { ALERTS_NAV_ID, MONITORS_NAV_ID } from "../../../utils/constants";
 import { APP_PATH, DEFAULT_EMPTY_DATA } from "../../utils/constants";
-import { dataSourceEnabled, getURL } from "../../pages/utils/helpers.js";
 
 export interface DataSourceAlertsCardProps {
   getDataSourceMenu?: DataSourceManagementPluginSetup['ui']['getDataSourceMenu'];
@@ -32,7 +31,7 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> =  ({ get
       query: {
         size: 25,
         sortField: 'start_time',
-        ...(dataSourceEnabled() && { dataSourceId: dataSource?.id || ''}),
+        dataSourceId: dataSource?.id || '',
         sortDirection: 'desc'
       }
     }).then(res => {
@@ -54,22 +53,14 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> =  ({ get
   const createAlertDetailsHeader = useCallback((alert) => {
     const severityColor = getSeverityColor(alert.severity);
     const triggerName = alert.trigger_name ?? DEFAULT_EMPTY_DATA;
-    const monitorUrl = `${MONITORS_NAV_ID}#/monitors/${
-      alert.alert_source === 'workflow' ? alert.workflow_id : alert.monitor_id
-    }?&type=${alert.alert_source}`;
-    const url = getURL(monitorUrl, dataSource?.id);
 
     return (
       <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween" alignItems="center">
         <EuiFlexItem grow={false}>
           <div>
             <EuiBadge color={severityColor?.background} style={{ padding: '1px 4px', color: severityColor?.text }}>{getSeverityBadgeText(alert.severity)}</EuiBadge>
             &nbsp;&nbsp;
-            <EuiLink href={url}>
-              <span style={{ color: '#006BB4' }} className="eui-textTruncate">
-                {getTruncatedText(triggerName)}
-              </span>
-            </EuiLink>
+            <span style={{ color: "#006BB4" }} className="eui-textTruncate">{getTruncatedText(triggerName)}</span>
           </div>
         </EuiFlexItem>
         <EuiFlexItem grow={false} >
@@ -88,8 +79,8 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> =  ({ get
           <EuiFlexItem grow={false}>
             <EuiText size="s" color="subdued">Monitor:</EuiText>
           </EuiFlexItem>
-          <EuiFlexItem grow={false} style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
-            <EuiText size="m" style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{monitorName}</EuiText>
+          <EuiFlexItem grow={false} >
+            <EuiText size="m">{getTruncatedText(monitorName)}</EuiText>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiHorizontalRule margin="xs" />
@@ -105,7 +96,7 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> =  ({ get
   });
 
   return (
-    <EuiPanel hasBorder={false} hasShadow={false} style={{ overflow: 'hidden' }}>
+    <EuiPanel hasBorder={false} hasShadow={false}>
       <EuiFlexGroup style={{ height: '100%' }} direction="column" justifyContent="spaceBetween" alignItems="flexStart" gutterSize="xs">
         <EuiFlexItem grow={false} style={{ width: '100%', height: '90%' }}>
           <EuiFlexGroup direction="column" style={{ height: '100%' }}>
@@ -156,7 +147,7 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> =  ({ get
           </EuiFlexGroup>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiLink href={getApplication().getUrlForApp(ALERTS_NAV_ID, { path: '#/dashboard' })}><EuiText size="s" className="eui-displayInline">View all</EuiText></EuiLink>
+          <EuiLink href={getApplication().getUrlForApp(ALERTS_NAV_ID, { path: '#/dashboard' })} target="_blank"><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,15 +202,13 @@ 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:16px;padding-left:10px;padding-right:10px"
+  style="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:16px;padding-left:10px"
+  style="padding-left:10px;padding-right:0px"
 >
   <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:16px;padding-left:10px"
+  style="padding-left:10px;padding-right:0px"
 >
   <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: '16px' }}>
+      <div style={{ padding: '25px 50px' }}>
         <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 ? 'Save' : 'Create'}
+                          {edit ? 'Update' : '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": "16px",
+      "padding": "25px 50px",
     }
   }
 >

diff --git a/public/pages/CreateMonitor/containers/DataSource/DataSource.js b/public/pages/CreateMonitor/containers/DataSource/DataSource.js
@@ -65,6 +65,7 @@ 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,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
@@ -702,6 +702,10 @@ 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,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
@@ -63,7 +63,12 @@ const MonitorDetails = ({
     <Container
       title="Monitor details"
       titleSize="s"
-      panelStyles={{ padding: '16px' }}
+      panelStyles={{
+        paddingBottom: '20px',
+        paddingLeft: '10px',
+        paddingRight: '10px',
+        paddingTop: '20px',
+      }}
       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:16px;padding-bottom:20px;padding-left:10px;padding-right:10px;padding-top:20px"
+  style="padding-left:10px;padding-right:10px;padding-bottom:20px;padding-top:20px"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"