From 30a5657181fe155143bade64ecf90ea1d464905e Mon Sep 17 00:00:00 2001
From: Amardeepsingh Siglani <amardeep7194@gmail.com>
Date: Wed, 21 Dec 2022 13:30:20 -0800
Subject: [PATCH] Made minor changes to polish the UI (#247)

* polished UI

Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>

* updated legend for alert severity

Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>

* updated cypress test

Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>

* use prepend prop for vis group by control

Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>

Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>
---
 cypress/integration/1_detectors.spec.js       |  6 ++---
 .../pages/Alerts/containers/Alerts/Alerts.tsx |  7 +++---
 .../DetectorRulesView/DetectorRulesView.tsx   |  2 +-
 .../containers/Detectors/Detectors.tsx        |  2 +-
 .../GettingStarted/GetStartedStep.tsx         |  4 ++--
 .../GettingStarted/GettingStartedPopup.tsx    |  3 +--
 .../components/Widgets/RecentAlertsWidget.tsx |  5 +----
 .../Widgets/RecentFindingsWidget.tsx          |  5 +----
 .../Overview/containers/Overview/Overview.tsx | 22 +++++++++----------
 public/utils/helpers.tsx                      |  5 +----
 10 files changed, 25 insertions(+), 36 deletions(-)

diff --git a/cypress/integration/1_detectors.spec.js b/cypress/integration/1_detectors.spec.js
index 46106bf11..65d1027f2 100644
--- a/cypress/integration/1_detectors.spec.js
+++ b/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', () => {
diff --git a/public/pages/Alerts/containers/Alerts/Alerts.tsx b/public/pages/Alerts/containers/Alerts/Alerts.tsx
index 983fc33eb..e362039e4 100644
--- a/public/pages/Alerts/containers/Alerts/Alerts.tsx
+++ b/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,
       };
     });
 
diff --git a/public/pages/Detectors/components/DetectorRulesView/DetectorRulesView.tsx b/public/pages/Detectors/components/DetectorRulesView/DetectorRulesView.tsx
index 452af54ac..e3762bade 100644
--- a/public/pages/Detectors/components/DetectorRulesView/DetectorRulesView.tsx
+++ b/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>
   );
diff --git a/public/pages/Detectors/containers/Detectors/Detectors.tsx b/public/pages/Detectors/containers/Detectors/Detectors.tsx
index 208e0d272..5707cf38d 100644
--- a/public/pages/Detectors/containers/Detectors/Detectors.tsx
+++ b/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',
diff --git a/public/pages/Overview/components/GettingStarted/GetStartedStep.tsx b/public/pages/Overview/components/GettingStarted/GetStartedStep.tsx
index 9c01956fe..4eb264b7c 100644
--- a/public/pages/Overview/components/GettingStarted/GetStartedStep.tsx
+++ b/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>
diff --git a/public/pages/Overview/components/GettingStarted/GettingStartedPopup.tsx b/public/pages/Overview/components/GettingStarted/GettingStartedPopup.tsx
index 51d262309..3f824eec5 100644
--- a/public/pages/Overview/components/GettingStarted/GettingStartedPopup.tsx
+++ b/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>
diff --git a/public/pages/Overview/components/Widgets/RecentAlertsWidget.tsx b/public/pages/Overview/components/Widgets/RecentAlertsWidget.tsx
index 6580ed615..398291a3c 100644
--- a/public/pages/Overview/components/Widgets/RecentAlertsWidget.tsx
+++ b/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>
   );
diff --git a/public/pages/Overview/components/Widgets/RecentFindingsWidget.tsx b/public/pages/Overview/components/Widgets/RecentFindingsWidget.tsx
index d18136bfd..2e0bbe1df 100644
--- a/public/pages/Overview/components/Widgets/RecentFindingsWidget.tsx
+++ b/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>
   );
diff --git a/public/pages/Overview/containers/Overview/Overview.tsx b/public/pages/Overview/containers/Overview/Overview.tsx
index 9106f7033..ec35abb92 100644
--- a/public/pages/Overview/containers/Overview/Overview.tsx
+++ b/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}
diff --git a/public/utils/helpers.tsx b/public/utils/helpers.tsx
index 7b754a8f6..a732171ad 100644
--- a/public/utils/helpers.tsx
+++ b/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>
   );