[FEATURE] Rules UI/UX improvements opensearch-project#585

Signed-off-by: Jovan Cvetkovic <[email protected]>

cypress/integration/2_rules.spec.js

@@ -141,7 +141,7 @@ describe('Rules', () => {
 
     // Check that correct page is showing
     cy.waitForPageLoad('rules', {
-      contains: 'Rules',
+      contains: 'Detection rules',
     });
   });
 
@@ -223,15 +223,15 @@ describe('Rules', () => {
     cy.wait('@getRules');
 
     cy.waitForPageLoad('rules', {
-      contains: 'Rules',
+      contains: 'Detection rules',
     });
 
     checkRulesFlyout();
   });
 
   it('...can be edited', () => {
     cy.waitForPageLoad('rules', {
-      contains: 'Rules',
+      contains: 'Detection rules',
     });
 
     cy.get(`input[placeholder="Search rules"]`).ospSearch(SAMPLE_RULE.name);
@@ -281,7 +281,7 @@ describe('Rules', () => {
     });
 
     cy.waitForPageLoad('rules', {
-      contains: 'Rules',
+      contains: 'Detection rules',
     });
 
     cy.wait('@getRules');

package.json

@@ -15,6 +15,7 @@
   },
   "scripts": {
     "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
     "osd": "node ../../scripts/osd",
     "opensearch": "node ../../scripts/opensearch",
     "lint": "node ../../scripts/eslint .",

public/app.scss

@@ -18,6 +18,7 @@ $euiTextColor: $euiColorDarkestShade !default;
 @import "./pages/Correlations/Correlations.scss";
 @import "./pages/Correlations/components/FindingCard.scss";
 @import "./pages/Findings/components/CorrelationsTable/CorrelationsTable.scss";
+@import "./pages/Rules/components/RuleEditor/RuleEditorForm.scss";
 
 .selected-radio-panel {
   background-color: tintOrShade($euiColorPrimary, 90%, 70%);

public/pages/Rules/components/RuleEditor/RuleEditorContainer.tsx

@@ -16,7 +16,7 @@ import { validateRule } from '../../utils/helpers';
 import { DataStore } from '../../../../store/DataStore';
 
 export interface RuleEditorProps {
-  title: string;
+  title: string | JSX.Element;
   rule?: Rule;
   history: RouteComponentProps['history'];
   notifications?: NotificationsStart;

public/pages/Rules/components/RuleEditor/RuleEditorForm.scss

@@ -0,0 +1,6 @@
+.rule-editor-form {
+  .euiFlexGroup--gutterLarge + hr {
+    height: 0;
+    margin-bottom: 25px;
+  }
+}

public/pages/Rules/components/RuleEditor/RuleEditorForm.tsx

@@ -35,7 +35,7 @@ export interface VisualRuleEditorProps {
   submit: (values: RuleEditorFormModel) => void;
   cancel: () => void;
   mode: 'create' | 'edit';
-  title: string;
+  title: string | JSX.Element;
 }
 
 const editorTypes = [
@@ -119,7 +119,7 @@ export const RuleEditorForm: React.FC<VisualRuleEditorProps> = ({
     >
       {(props) => (
         <Form>
-          <ContentPanel title={title}>
+          <ContentPanel title={title} className={'rule-editor-form'}>
             <EuiButtonGroup
               data-test-subj="change-editor-type"
               legend="This is editor type selector"

public/pages/Rules/containers/CreateRule/CreateRule.tsx

@@ -11,6 +11,7 @@ import { BREADCRUMBS } from '../../../../utils/constants';
 import { CoreServicesContext } from '../../../../components/core_services';
 import { NotificationsStart } from 'opensearch-dashboards/public';
 import { setBreadCrumb } from '../../utils/helpers';
+import { EuiTitle, EuiText, EuiLink } from '@elastic/eui';
 
 export interface CreateRuleProps {
   services: BrowserServices;
@@ -24,7 +25,22 @@ export const CreateRule: React.FC<CreateRuleProps> = ({ history, services, notif
 
   return (
     <RuleEditorContainer
-      title="Create a rule"
+      title={
+        <>
+          <EuiTitle size={'m'}>
+            <h3>Create detection rule</h3>
+          </EuiTitle>
+          <EuiText size="s" color="subdued">
+            Create a rule for detectors to identify threat scenarios for different log sources.{' '}
+            <EuiLink
+              href="https://sigmahq.github.io/sigma-specification/Sigma_specification.html"
+              target="_blank"
+            >
+              Learn more in the Sigma rules specification
+            </EuiLink>
+          </EuiText>
+        </>
+      }
       history={history}
       notifications={notifications}
       mode={'create'}

public/pages/Rules/containers/Rules/Rules.tsx

@@ -67,7 +67,7 @@ export const Rules: React.FC<RulesProps> = (props) => {
         Import rule
       </EuiButton>,
       <EuiButton onClick={openCreatePage} data-test-subj={'create_rule_button'} fill={true}>
-        Create new rule
+        Create detection rule
       </EuiButton>,
     ],
     []
@@ -99,7 +99,7 @@ export const Rules: React.FC<RulesProps> = (props) => {
           <EuiFlexGroup gutterSize={'s'} justifyContent={'spaceBetween'}>
             <EuiFlexItem>
               <EuiTitle size="m">
-                <h1>Rules</h1>
+                <h1>Detection rules</h1>
               </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem>

public/utils/constants.ts

@@ -67,9 +67,9 @@ export const BREADCRUMBS = Object.freeze({
     text: `${name}`,
     href: `#${ROUTES.EDIT_DETECTOR_DETAILS}/${detectorId}`,
   }),
-  RULES: { text: 'Rules', href: `#${ROUTES.RULES}` },
+  RULES: { text: 'Detection rules', href: `#${ROUTES.RULES}` },
   ALERTS: { text: 'Alerts', href: `#${ROUTES.ALERTS}` },
-  RULES_CREATE: { text: 'Create rule', href: `#${ROUTES.RULES_CREATE}` },
+  RULES_CREATE: { text: 'Create detection rule', href: `#${ROUTES.RULES_CREATE}` },
   RULES_EDIT: { text: 'Edit rule', href: `#${ROUTES.RULES_EDIT}` },
   RULES_DUPLICATE: { text: 'Duplicate rule', href: `#${ROUTES.RULES_DUPLICATE}` },
   RULES_IMPORT: { text: 'Import rule', href: `#${ROUTES.RULES_IMPORT}` },