Made minor changes to polish the UI (opensearch-project#247) (opensearch-project#252)

* polished UI

Signed-off-by: Amardeepsingh Siglani <[email protected]>

* updated legend for alert severity

Signed-off-by: Amardeepsingh Siglani <[email protected]>

* updated cypress test

Signed-off-by: Amardeepsingh Siglani <[email protected]>

* use prepend prop for vis group by control

Signed-off-by: Amardeepsingh Siglani <[email protected]>

Signed-off-by: Amardeepsingh Siglani <[email protected]>
(cherry picked from commit 30a5657)

Co-authored-by: Amardeepsingh Siglani <[email protected]>
Signed-off-by: AWSHurneyt <[email protected]>

Author: 2 people

cypress/integration/1_detectors.spec.js

@@ -204,7 +204,7 @@ describe('Detectors', () => {
     cy.contains('test detector').click({ force: true });
 
     // Confirm number of rules before edit
-    cy.contains('Detection rules (1)');
+    cy.contains('Active rules (1)');
 
     // Click "Edit" button in Detector rules panel
     cy.get(`[data-test-subj="edit-detector-rules"]`).click({ force: true });
@@ -229,7 +229,7 @@ describe('Detectors', () => {
     cy.get(`[data-test-subj="save-detector-rules-edits"]`).click({ force: true });
 
     // Confirm 1 rule has been removed from detector
-    cy.contains('Detection rules (0)');
+    cy.contains('Active rules (0)');
 
     // Click "Edit" button in Detector rules panel
     cy.get(`[data-test-subj="edit-detector-rules"]`).click({ force: true });
@@ -253,7 +253,7 @@ describe('Detectors', () => {
     cy.get(`[data-test-subj="save-detector-rules-edits"]`).click({ force: true });
 
     // Confirm 1 rule has been added to detector
-    cy.contains('Detection rules (1)');
+    cy.contains('Active rules (1)');
   });
 
   it('...can be deleted', () => {

public/pages/Alerts/containers/Alerts/Alerts.tsx

@@ -7,11 +7,11 @@ import {
   DurationRange,
   EuiBasicTableColumn,
   EuiButton,
-  EuiButtonEmpty,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiInMemoryTable,
+  EuiLink,
   EuiPanel,
   EuiSpacer,
   EuiSuperDatePicker,
@@ -34,7 +34,6 @@ import {
   DEFAULT_DATE_RANGE,
   DEFAULT_EMPTY_DATA,
   MAX_RECENTLY_USED_TIME_RANGES,
-  ROUTES,
 } from '../../../../utils/constants';
 import { CoreServicesContext } from '../../../../components/core_services';
 import AlertsService from '../../../../services/AlertsService';
@@ -146,7 +145,7 @@ class Alerts extends Component<AlertsProps, AlertsState> {
         sortable: false,
         dataType: 'string',
         render: (triggerName: string, alertItem: AlertItem) => (
-          <EuiButtonEmpty onClick={() => this.setFlyout(alertItem)}>{triggerName}</EuiButtonEmpty>
+          <EuiLink onClick={() => this.setFlyout(alertItem)}>{triggerName}</EuiLink>
         ),
       },
       {
@@ -224,7 +223,7 @@ class Alerts extends Component<AlertsProps, AlertsState> {
         alert: 1,
         time,
         status: alert.state,
-        severity: alert.severity,
+        severity: parseAlertSeverityToOption(alert.severity)?.label || alert.severity,
       };
     });
 

public/pages/Detectors/components/DetectorRulesView/DetectorRulesView.tsx

@@ -139,7 +139,7 @@ export const DetectorRulesView: React.FC<DetectorRulesViewProps> = (props) => {
       {rules}
     </EuiAccordion>
   ) : (
-    <ContentPanel title={`Detection rules (${totalSelected})`} actions={actions}>
+    <ContentPanel title={`Active rules (${totalSelected})`} actions={actions}>
       {rules}
     </ContentPanel>
   );

public/pages/Detectors/containers/Detectors/Detectors.tsx

@@ -277,7 +277,7 @@ export default class Detectors extends Component<DetectorsProps, DetectorsState>
       },
       {
         field: 'rulesCount',
-        name: 'Rules',
+        name: 'Active rules',
         sortable: true,
         dataType: 'number',
         align: 'left',

public/pages/Overview/components/GettingStarted/GetStartedStep.tsx

@@ -26,8 +26,8 @@ export const GetStartedStep: React.FC<GetStartedStepProps> = ({ buttons, title }
       </EuiText>
       <EuiSpacer size="s" />
       <EuiFlexGroup gutterSize="s">
-        {buttons.map((btn: GetStartedStepButton) => (
-          <EuiFlexItem grow={false}>
+        {buttons.map((btn: GetStartedStepButton, index: number) => (
+          <EuiFlexItem grow={false} key={index}>
             <EuiButton {...btn.opts} onClick={btn.onClick}>
               {btn.text}
             </EuiButton>

public/pages/Overview/components/GettingStarted/GettingStartedPopup.tsx

@@ -129,8 +129,7 @@ export const GettingStartedPopup: React.FC<GettingStartedPopupProps> = ({
       <EuiHorizontalRule />
       <EuiText>
         <p>
-          Security analytics generates critical security insights from existing security event
-          logs.&nbsp;
+          Generates critical security insights from your event logs.&nbsp;
           <EuiLink href={moreLink} target="_blank">
             Learn more
           </EuiLink>

public/pages/Overview/components/Widgets/RecentAlertsWidget.tsx

@@ -61,10 +61,7 @@ export const RecentAlertsWidget: React.FC<RecentAlertsWidgetProps> = ({
   );
 
   return (
-    <WidgetContainer
-      title={`Top ${alertItems.length < 20 ? '' : 20} recent alerts`}
-      actions={actions}
-    >
+    <WidgetContainer title={'Recent alerts'} actions={actions}>
       <TableWidget columns={columns} items={alertItems} loading={loading} />
     </WidgetContainer>
   );

public/pages/Overview/components/Widgets/RecentFindingsWidget.tsx

@@ -66,10 +66,7 @@ export const RecentFindingsWidget: React.FC<RecentFindingsWidgetProps> = ({
   );
 
   return (
-    <WidgetContainer
-      title={`Top ${findingItems.length < 20 ? '' : 20} recent findings`}
-      actions={actions}
-    >
+    <WidgetContainer title={'Recent findings'} actions={actions}>
       <TableWidget columns={columns} items={findingItems} loading={loading} />
     </WidgetContainer>
   );

public/pages/Overview/containers/Overview/Overview.tsx

@@ -125,23 +125,23 @@ export const Overview: React.FC<OverviewProps> = (props) => {
 
   return (
     <EuiFlexGroup direction="column">
-      <EuiFlexItem style={{ alignSelf: 'flex-end' }}>
-        <EuiPopover
-          button={button}
-          isOpen={isPopoverOpen}
-          anchorPosition="downRight"
-          closePopover={closePopover}
-        >
-          <GettingStartedPopup dismissPopup={closePopover} history={props.history} />
-        </EuiPopover>
-      </EuiFlexItem>
       <EuiFlexItem>
         <EuiFlexGroup justifyContent="spaceBetween">
-          <EuiFlexItem>
+          <EuiFlexItem grow={false}>
             <EuiTitle size="m">
               <h1>Overview</h1>
             </EuiTitle>
           </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPopover
+              button={button}
+              isOpen={isPopoverOpen}
+              anchorPosition="downRight"
+              closePopover={closePopover}
+            >
+              <GettingStartedPopup dismissPopup={closePopover} history={props.history} />
+            </EuiPopover>
+          </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiSuperDatePicker
               start={startTime}

public/utils/helpers.tsx

@@ -181,10 +181,7 @@ export function createSelectComponent(
   return (
     <EuiFlexGroup justifyContent="flexEnd" alignItems="center">
       <EuiFlexItem grow={false}>
-        <h5>Group by</h5>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiSelect id={id} options={options} value={value} onChange={onChange} />
+        <EuiSelect id={id} options={options} value={value} onChange={onChange} prepend="Group by" />
       </EuiFlexItem>
     </EuiFlexGroup>
   );