rule details flyout on detector create 4th step (opensearch-project#266)

* rule details flyout on detector create 4th step

Signed-off-by: Aleksandar Djindjic <[email protected]>

* rule details flyout on detector edit page

Signed-off-by: Aleksandar Djindjic <[email protected]>

Signed-off-by: Aleksandar Djindjic <[email protected]>

Author: djindjic

public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/types/interfaces.ts

@@ -4,6 +4,7 @@
  */
 
 import { RuleItemInfoBase } from '../../../../../../Rules/models/types';
+import { RuleInfo } from './../../../../../../../../server/models/interfaces/Rules';
 
 export interface RuleItem {
   name: string;
@@ -13,6 +14,7 @@ export interface RuleItem {
   library: string;
   description: string;
   active: boolean;
+  ruleInfo: RuleInfo;
 }
 
 export type RuleItemInfo = RuleItemInfoBase & { enabled: boolean };

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

@@ -13,6 +13,9 @@ import { Detector } from '../../../../../models/interfaces';
 import { RuleInfo } from '../../../../../server/models/interfaces';
 import { errorNotificationToast, translateToRuleItems } from '../../../../utils/helpers';
 import { NotificationsStart } from 'opensearch-dashboards/public';
+import { RulesTable } from '../../../Rules/components/RulesTable/RulesTable';
+import { RuleTableItem } from '../../../Rules/utils/helpers';
+import { RuleViewerFlyout } from '../../../Rules/components/RuleViewerFlyout/RuleViewerFlyout';
 
 export interface DetectorRulesViewProps {
   detector: Detector;
@@ -21,6 +24,18 @@ export interface DetectorRulesViewProps {
   notifications: NotificationsStart;
 }
 
+const mapRuleItemToRuleTableItem = (ruleItem: RuleItem): RuleTableItem => {
+  return {
+    title: ruleItem.name,
+    level: ruleItem.severity,
+    category: ruleItem.logType,
+    description: ruleItem.description,
+    source: ruleItem.library,
+    ruleId: ruleItem.id,
+    ruleInfo: { ...ruleItem.ruleInfo, prePackaged: ruleItem.library === 'Sigma' },
+  };
+};
+
 export const DetectorRulesView: React.FC<DetectorRulesViewProps> = (props) => {
   const totalSelected = props.detector.inputs.reduce((sum, inputObj) => {
     return (
@@ -30,6 +45,7 @@ export const DetectorRulesView: React.FC<DetectorRulesViewProps> = (props) => {
     );
   }, 0);
 
+  const [flyoutData, setFlyoutData] = useState<RuleTableItem | null>(null);
   const [enabledRuleItems, setEnabledRuleItems] = useState<RuleItem[]>([]);
   const [allRuleItems, setAllRuleItems] = useState<RuleItem[]>([]);
   const [loading, setLoading] = useState(false);
@@ -125,22 +141,44 @@ export const DetectorRulesView: React.FC<DetectorRulesViewProps> = (props) => {
 
   const getDetectionRulesTitle = () => `View detection rules (${totalSelected})`;
 
-  return props.rulesCanFold ? (
-    <EuiAccordion
-      id={props.detector.name}
-      title={getDetectionRulesTitle()}
-      buttonContent={
-        <EuiText size="m">
-          <p>{getDetectionRulesTitle()}</p>
-        </EuiText>
-      }
-    >
-      <EuiSpacer size="l" />
-      {rules}
-    </EuiAccordion>
-  ) : (
-    <ContentPanel title={`Active rules (${totalSelected})`} actions={actions}>
-      {rules}
-    </ContentPanel>
+  const onShowRuleDetails = (rule: RuleTableItem) => {
+    setFlyoutData(() => rule);
+  };
+
+  return (
+    <>
+      {flyoutData ? (
+        <RuleViewerFlyout
+          hideFlyout={() => setFlyoutData(() => null)}
+          history={null as any}
+          ruleTableItem={flyoutData}
+          ruleService={null as any}
+          notifications={props.notifications}
+        />
+      ) : null}
+      {props.rulesCanFold ? (
+        <EuiAccordion
+          id={props.detector.name}
+          title={getDetectionRulesTitle()}
+          buttonContent={
+            <EuiText size="m">
+              <p>{getDetectionRulesTitle()}</p>
+            </EuiText>
+          }
+        >
+          <EuiSpacer size="l" />
+          <RulesTable
+            loading={loading}
+            ruleItems={enabledRuleItems.map((i) => mapRuleItemToRuleTableItem(i))}
+            showRuleDetails={onShowRuleDetails}
+          />
+          {rules}
+        </EuiAccordion>
+      ) : (
+        <ContentPanel title={`Active rules (${totalSelected})`} actions={actions}>
+          {rules}
+        </ContentPanel>
+      )}
+    </>
   );
 };

public/pages/Detectors/components/UpdateRules/UpdateRules.tsx

@@ -20,6 +20,8 @@ import { ServicesContext } from '../../../../services';
 import { ServerResponse } from '../../../../../server/models/types';
 import { NotificationsStart } from 'opensearch-dashboards/public';
 import { errorNotificationToast, successNotificationToast } from '../../../../utils/helpers';
+import { RuleTableItem } from '../../../Rules/utils/helpers';
+import { RuleViewerFlyout } from '../../../Rules/components/RuleViewerFlyout/RuleViewerFlyout';
 
 export interface UpdateDetectorRulesProps
   extends RouteComponentProps<
@@ -38,6 +40,7 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
   const [customRuleItems, setCustomRuleItems] = useState<RuleItem[]>([]);
   const [prePackagedRuleItems, setPrePackagedRuleItems] = useState<RuleItem[]>([]);
   const detectorId = props.location.pathname.replace(`${ROUTES.EDIT_DETECTOR_RULES}/`, '');
+  const [flyoutData, setFlyoutData] = useState<RuleTableItem | null>(null);
 
   useEffect(() => {
     const getDetector = async () => {
@@ -86,6 +89,7 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
           library: 'Sigma',
           description: rule._source.description,
           active: enabledRuleIds.includes(rule._id),
+          ruleInfo: rule,
         }));
         setPrePackagedRuleItems(ruleItems);
       } else {
@@ -124,6 +128,7 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
           library: 'Custom',
           description: rule._source.description,
           active: enabledRuleIds.includes(rule._id),
+          ruleInfo: rule,
         }));
         setCustomRuleItems(ruleItems);
       } else {
@@ -210,8 +215,29 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
   };
 
   const ruleItems = prePackagedRuleItems.concat(customRuleItems);
+
+  const onRuleDetails = (ruleItem: RuleItem) => {
+    console.log('onRuleDetails', ruleItem);
+    setFlyoutData(() => ({
+      title: ruleItem.name,
+      level: ruleItem.severity,
+      category: ruleItem.logType,
+      description: ruleItem.description,
+      source: ruleItem.library,
+      ruleInfo: ruleItem.ruleInfo,
+      ruleId: ruleItem.id,
+    }));
+  };
   return (
     <div>
+      {flyoutData ? (
+        <RuleViewerFlyout
+          hideFlyout={() => setFlyoutData(() => null)}
+          history={null as any}
+          ruleTableItem={flyoutData}
+          ruleService={null as any}
+        />
+      ) : null}
       <EuiTitle size={'m'}>
         <h3>Edit detector rules</h3>
       </EuiTitle>
@@ -222,6 +248,7 @@ export const UpdateDetectorRules: React.FC<UpdateDetectorRulesProps> = (props) =
         ruleItems={ruleItems}
         onRuleActivationToggle={onToggle}
         onAllRulesToggled={onAllRulesToggle}
+        onRuleDetails={onRuleDetails}
       />
 
       <EuiSpacer size="xl" />

public/utils/helpers.tsx

@@ -122,6 +122,7 @@ export function ruleItemInfosToItems(
       logType: detectorType.toLowerCase(),
       name: itemInfo._source.title,
       severity: itemInfo._source.level,
+      ruleInfo: itemInfo,
     }));
   }