updated log types related UX

Signed-off-by: Amardeepsingh Siglani <[email protected]>
amsiglan · Sep 2, 2023 · 0e3900a · 0e3900a
1 parent 96a96fb
commit 0e3900a
Show file tree

Hide file tree

Showing 19 changed files with 99 additions and 41 deletions.
diff --git a/.github/workflows/cypress-workflow.yml b/.github/workflows/cypress-workflow.yml
@@ -9,7 +9,7 @@ on:
 env:
   OPENSEARCH_DASHBOARDS_VERSION: '2.9.0'
   OPENSEARCH_VERSION: '2.9.0-SNAPSHOT'
-  SECURITY_ANALYTICS_BRANCH: '2.x'
+  SECURITY_ANALYTICS_BRANCH: '2.9'
   GRADLE_VERSION: '7.6.1'
 
   # If this variable is not empty, the package.json, opensearch_dashboards.json, and yarn.lock files will be replaced

diff --git a/...ges/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx b/...ges/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
@@ -9,6 +9,9 @@ import {
   EuiHorizontalRule,
   CriteriaWithPagination,
   EuiText,
+  EuiEmptyPrompt,
+  EuiButton,
+  EuiIcon,
 } from '@elastic/eui';
 
 import React, { useMemo, useState } from 'react';
@@ -17,6 +20,7 @@ import { RuleItem, RuleItemInfo } from './types/interfaces';
 import { RuleViewerFlyout } from '../../../../../Rules/components/RuleViewerFlyout/RuleViewerFlyout';
 import { RuleTableItem } from '../../../../../Rules/utils/helpers';
 import { RuleItemInfoBase } from '../../../../../../../types';
+import { ROUTES } from '../../../../../../utils/constants';
 
 export interface CreateDetectorRulesState {
   allRules: RuleItemInfo[];
@@ -26,6 +30,7 @@ export interface CreateDetectorRulesState {
 }
 
 export interface DetectionRulesProps {
+  detectorType: string;
   rulesState: CreateDetectorRulesState;
   loading?: boolean;
   onRuleToggle: (changedItem: RuleItem, isActive: boolean) => void;
@@ -34,6 +39,7 @@ export interface DetectionRulesProps {
 }
 
 export const DetectionRules: React.FC<DetectionRulesProps> = ({
+  detectorType,
   rulesState,
   loading,
   onPageChange,
@@ -55,7 +61,7 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
         id: rule._id,
         active: rule.enabled,
         description: rule._source.description,
-        library: rule.prePackaged ? 'Sigma' : 'Custom',
+        library: rule.prePackaged ? 'Standard' : 'Custom',
         logType: rule._source.category,
         name: rule._source.title,
         severity: rule._source.level,
@@ -106,14 +112,42 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
         isLoading={loading}
       >
         <EuiHorizontalRule margin={'xs'} />
-        <DetectionRulesTable
-          pageIndex={rulesState.page.index}
-          ruleItems={ruleItems}
-          onAllRulesToggled={onAllRulesToggle}
-          onRuleActivationToggle={onRuleToggle}
-          onTableChange={onTableChange}
-          onRuleDetails={onRuleDetails}
-        />
+
+        {ruleItems.length ? (
+          <DetectionRulesTable
+            pageIndex={rulesState.page.index}
+            ruleItems={ruleItems}
+            onAllRulesToggled={onAllRulesToggle}
+            onRuleActivationToggle={onRuleToggle}
+            onTableChange={onTableChange}
+            onRuleDetails={onRuleDetails}
+          />
+        ) : (
+          <EuiEmptyPrompt
+            title={
+              <EuiTitle>
+                <h1>No detection rules {detectorType ? 'to display' : 'selected'}</h1>
+              </EuiTitle>
+            }
+            body={
+              <p>
+                {detectorType
+                  ? 'There are no applicable detection rules for the selected log type. Consider creating new detection rules.'
+                  : 'Select a log type to be able to select detection rules.'}
+              </p>
+            }
+            actions={
+              detectorType
+                ? [
+                    <EuiButton href={`#${ROUTES.RULES}`} target="_blank">
+                      Manage&nbsp;
+                      <EuiIcon type={'popout'} />
+                    </EuiButton>,
+                  ]
+                : undefined
+            }
+          />
+        )}
       </EuiAccordion>
     </>
   );

diff --git a/...c/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx b/...c/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx
@@ -94,6 +94,7 @@ export default class DetectorType extends Component<DetectorTypeProps, DetectorT
 
         <EuiFormRow fullWidth={true}>
           <DetectionRules
+            detectorType={detectorType}
             rulesState={this.props.rulesState}
             loading={this.props.loadingRules}
             onPageChange={this.props.onPageChange}

diff --git a/public/pages/CreateDetector/containers/CreateDetector.tsx b/public/pages/CreateDetector/containers/CreateDetector.tsx
@@ -63,7 +63,10 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
 
     this.state = {
       currentStep: DetectorCreationStep.DEFINE_DETECTOR,
-      detector: EMPTY_DEFAULT_DETECTOR,
+      detector: {
+        ...EMPTY_DEFAULT_DETECTOR,
+        detector_type: '',
+      },
       fieldMappings: [],
       stepDataValid: {
         [DetectorCreationStep.DEFINE_DETECTOR]: false,

diff --git a/public/pages/Detectors/components/DetectorRulesView/DetectorRulesView.tsx b/public/pages/Detectors/components/DetectorRulesView/DetectorRulesView.tsx
@@ -33,7 +33,7 @@ const mapRuleItemToRuleTableItem = (ruleItem: RuleItem): RuleTableItem => {
     description: ruleItem.description,
     source: ruleItem.library,
     ruleId: ruleItem.id,
-    ruleInfo: { ...ruleItem.ruleInfo, prePackaged: ruleItem.library === 'Sigma' },
+    ruleInfo: { ...ruleItem.ruleInfo, prePackaged: ruleItem.library === 'Standard' },
   };
 };
 

diff --git a/...ages/Detectors/components/DetectorRulesView/__snapshots__/DetectorRulesView.test.tsx.snap b/...ages/Detectors/components/DetectorRulesView/__snapshots__/DetectorRulesView.test.tsx.snap
@@ -478,7 +478,7 @@ exports[`<DetectorRulesView /> spec renders the component 1`] = `
                       "name": "Source",
                       "options": Array [
                         Object {
-                          "value": "Sigma",
+                          "value": "Standard",
                         },
                         Object {
                           "value": "Custom",
@@ -587,7 +587,7 @@ exports[`<DetectorRulesView /> spec renders the component 1`] = `
                         "name": "Source",
                         "options": Array [
                           Object {
-                            "value": "Sigma",
+                            "value": "Standard",
                           },
                           Object {
                             "value": "Custom",
@@ -768,7 +768,7 @@ exports[`<DetectorRulesView /> spec renders the component 1`] = `
                                   "name": "Source",
                                   "options": Array [
                                     Object {
-                                      "value": "Sigma",
+                                      "value": "Standard",
                                     },
                                     Object {
                                       "value": "Custom",
@@ -1115,7 +1115,7 @@ exports[`<DetectorRulesView /> spec renders the component 1`] = `
                                       "name": "Source",
                                       "options": Array [
                                         Object {
-                                          "value": "Sigma",
+                                          "value": "Standard",
                                         },
                                         Object {
                                           "value": "Custom",

diff --git a/public/pages/Detectors/components/UpdateRules/UpdateRules.tsx b/public/pages/Detectors/components/UpdateRules/UpdateRules.tsx
@@ -97,7 +97,7 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
         id: rule._id,
         severity: rule._source.level,
         logType: rule._source.category,
-        library: 'Sigma',
+        library: 'Standard',
         description: rule._source.description,
         active: enabledRuleIds.includes(rule._id),
         ruleInfo: rule,
@@ -140,7 +140,7 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
           .filter((rule) => rule.active);
         await getRuleFieldsForEnabledRules(withCustomRulesUpdated);
         break;
-      case 'Sigma':
+      case 'Standard':
         const updatedPrePackgedRules: RuleItem[] = prePackagedRuleItems.map((rule) =>
           rule.id === changedItem.id ? { ...rule, active: isActive } : rule
         );

diff --git a/public/pages/Detectors/containers/Detector/__snapshots__/DetectorDetails.test.tsx.snap b/public/pages/Detectors/containers/Detector/__snapshots__/DetectorDetails.test.tsx.snap
@@ -3032,7 +3032,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                           "name": "Source",
                           "options": Array [
                             Object {
-                              "value": "Sigma",
+                              "value": "Standard",
                             },
                             Object {
                               "value": "Custom",
@@ -3141,7 +3141,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                             "name": "Source",
                             "options": Array [
                               Object {
-                                "value": "Sigma",
+                                "value": "Standard",
                               },
                               Object {
                                 "value": "Custom",
@@ -3322,7 +3322,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                                       "name": "Source",
                                       "options": Array [
                                         Object {
-                                          "value": "Sigma",
+                                          "value": "Standard",
                                         },
                                         Object {
                                           "value": "Custom",
@@ -3669,7 +3669,7 @@ exports[`<DetectorDetails /> spec renders the component 1`] = `
                                           "name": "Source",
                                           "options": Array [
                                             Object {
-                                              "value": "Sigma",
+                                              "value": "Standard",
                                             },
                                             Object {
                                               "value": "Custom",

diff --git a/.../Detectors/containers/DetectorDetailsView/__snapshots__/DetectorDetailsView.test.tsx.snap b/.../Detectors/containers/DetectorDetailsView/__snapshots__/DetectorDetailsView.test.tsx.snap
@@ -1856,7 +1856,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                         "name": "Source",
                         "options": Array [
                           Object {
-                            "value": "Sigma",
+                            "value": "Standard",
                           },
                           Object {
                             "value": "Custom",
@@ -1965,7 +1965,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                           "name": "Source",
                           "options": Array [
                             Object {
-                              "value": "Sigma",
+                              "value": "Standard",
                             },
                             Object {
                               "value": "Custom",
@@ -2146,7 +2146,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                                     "name": "Source",
                                     "options": Array [
                                       Object {
-                                        "value": "Sigma",
+                                        "value": "Standard",
                                       },
                                       Object {
                                         "value": "Custom",
@@ -2493,7 +2493,7 @@ exports[`<DetectorDetailsView /> spec renders the component 1`] = `
                                         "name": "Source",
                                         "options": Array [
                                           Object {
-                                            "value": "Sigma",
+                                            "value": "Standard",
                                           },
                                           Object {
                                             "value": "Custom",

diff --git a/public/pages/LogTypes/components/LogTypeDetails.tsx b/public/pages/LogTypes/components/LogTypeDetails.tsx
@@ -40,9 +40,10 @@ export const LogTypeDetails: React.FC<LogTypeDetailsProps> = ({
   return (
     <ContentPanel
       title="Details"
+      titleSize="l"
       actions={
         !isEditMode &&
-        logTypeDetails.source.toLocaleLowerCase() !== 'sigma' && [
+        logTypeDetails.source.toLocaleLowerCase() !== 'standard' && [
           <EuiButton onClick={() => setIsEditMode(true)}>Edit</EuiButton>,
         ]
       }

diff --git a/public/pages/LogTypes/components/LogTypeForm.tsx b/public/pages/LogTypes/components/LogTypeForm.tsx
@@ -89,7 +89,14 @@ export const LogTypeForm: React.FC<LogTypeFormProps> = ({
         />
       </EuiFormRow>
       <EuiSpacer />
-      <EuiFormRow label="Description">
+      <EuiFormRow
+        label={
+          <>
+            {'Description - '}
+            <em>optional</em>
+          </>
+        }
+      >
         <EuiTextArea
           value={logTypeDetails?.description}
           onChange={(e) => {

diff --git a/public/pages/LogTypes/containers/CreateLogType.tsx b/public/pages/LogTypes/containers/CreateLogType.tsx
@@ -44,7 +44,7 @@ export const CreateLogType: React.FC<CreateLogTypeProps> = ({ history, notificat
       <LogTypeForm
         logTypeDetails={{ ...logTypeDetails, id: '', detectionRulesCount: 0 }}
         isEditMode={true}
-        confirmButtonText={'Create rule category'}
+        confirmButtonText={'Create log type'}
         notifications={notifications}
         setLogTypeDetails={setLogTypeDetails}
         onCancel={() => history.push(ROUTES.LOG_TYPES)}

diff --git a/public/pages/LogTypes/containers/LogType.tsx b/public/pages/LogTypes/containers/LogType.tsx
@@ -66,7 +66,7 @@ export const LogType: React.FC<LogTypeProps> = ({ notifications, history }) => {
       level: rule._source.level,
       category: rule._source.category,
       description: rule._source.description,
-      source: rule.prePackaged ? 'Sigma' : 'Custom',
+      source: rule.prePackaged ? 'Standard' : 'Custom',
       ruleInfo: rule,
       ruleId: rule._id,
     }));
@@ -193,7 +193,13 @@ export const LogType: React.FC<LogTypeProps> = ({ notifications, history }) => {
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiDescriptionList
-              listItems={[{ title: 'Source', description: logTypeDetails.source }]}
+              listItems={[
+                {
+                  title: 'Source',
+                  description:
+                    logTypeDetails.source === 'Sigma' ? 'Standard' : logTypeDetails.source,
+                },
+              ]}
             />
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -214,6 +220,7 @@ export const LogType: React.FC<LogTypeProps> = ({ notifications, history }) => {
           );
         })}
       </EuiTabs>
+      <EuiSpacer size="m" />
       {renderTabContent()}
     </>
   );

diff --git a/public/pages/Rules/components/RuleContentViewer/RuleContentViewer.tsx b/public/pages/Rules/components/RuleContentViewer/RuleContentViewer.tsx
@@ -95,7 +95,7 @@ export const RuleContentViewer: React.FC<RuleContentViewerProps> = ({
           <EuiFlexGroup justifyContent="flexEnd">
             <EuiFlexItem data-test-subj={'rule_flyout_rule_source'}>
               <EuiFormLabel>Source</EuiFormLabel>
-              {prePackaged ? 'Sigma' : 'Custom'}
+              {prePackaged ? 'Standard' : 'Custom'}
             </EuiFlexItem>
             {prePackaged ? (
               <EuiFlexItem>

diff --git a/public/pages/Rules/components/RuleViewerFlyout/RuleViewFlyoutHeaderActions.tsx b/public/pages/Rules/components/RuleViewerFlyout/RuleViewFlyoutHeaderActions.tsx
@@ -25,7 +25,7 @@ export const RuleViewerFlyoutHeaderActions: React.FC<RuleViewerFlyoutHeaderActio
   editRule,
   toggleActionsPopover,
 }) => {
-  return ruleSource === 'Sigma' ? (
+  return ruleSource === 'Standard' ? (
     <EuiButton onClick={duplicateRule}>Duplicate</EuiButton>
   ) : (
     <EuiPopover

diff --git a/public/pages/Rules/containers/Rules/Rules.tsx b/public/pages/Rules/containers/Rules/Rules.tsx
@@ -34,7 +34,7 @@ export const Rules: React.FC<RulesProps> = (props) => {
       level: rule._source.level,
       category: rule._source.category,
       description: rule._source.description,
-      source: rule.prePackaged ? 'Sigma' : 'Custom',
+      source: rule.prePackaged ? 'Standard' : 'Custom',
       ruleInfo: rule,
       ruleId: rule._id,
     }));

diff --git a/public/pages/Rules/utils/constants.ts b/public/pages/Rules/utils/constants.ts
@@ -47,6 +47,6 @@ export const ruleSeverity: {
   },
 ];
 
-export const ruleSource: string[] = ['Sigma', 'Custom'];
+export const ruleSource: string[] = ['Standard', 'Custom'];
 
 export const ruleStatus: string[] = ['experimental', 'test', 'stable'];
diff --git a/public/store/LogTypeStore.ts b/public/store/LogTypeStore.ts
@@ -45,17 +45,22 @@ export class LogTypeStore {
         return {
           id: hit._id,
           ...hit._source,
+          source: hit._source.source.toLowerCase() === 'sigma' ? 'Standard' : hit._source.source,
         };
       });
 
       ruleTypes.splice(
         0,
         ruleTypes.length,
-        ...logTypes.map((logType) => ({
-          label: logType.name,
-          value: logType.name,
-          id: logType.id,
-        }))
+        ...logTypes
+          .map((logType) => ({
+            label: logType.name,
+            value: logType.name,
+            id: logType.id,
+          }))
+          .sort((a, b) => {
+            return a.label < b.label ? -1 : a.label > b.label ? 1 : 0;
+          })
       );
 
       return logTypes;

diff --git a/public/utils/helpers.tsx b/public/utils/helpers.tsx
@@ -119,7 +119,7 @@ export function ruleItemInfosToItems(
       id: itemInfo._id,
       active: itemInfo.enabled,
       description: itemInfo._source.description,
-      library: itemInfo.prePackaged ? 'Sigma' : 'Custom',
+      library: itemInfo.prePackaged ? 'Standard' : 'Custom',
       logType: detectorType.toLowerCase(),
       name: itemInfo._source.title,
       severity: itemInfo._source.level,