[FEATURE] Add a details button to open the findings flyout from the c…

…orrelations page. #564

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

public/pages/Alerts/components/AlertFlyout/AlertFlyout.tsx

@@ -148,16 +148,22 @@ export class AlertFlyout extends React.Component<AlertFlyoutProps, AlertFlyoutSt
         render: (id, finding) =>
           (
             <EuiLink
-              onClick={() =>
+              onClick={() => {
+                const customRules = detector.inputs[0].detector_input.custom_rules[0];
+                const prePackagedRules = detector.inputs[0].detector_input.pre_packaged_rules[0];
+                const rule = rules[customRules?.id] || rules[prePackagedRules?.id] || {};
                 DataStore.findings.openFlyout(
                   {
                     ...finding,
                     detector: { _id: detector.id as string, _index: '', _source: detector },
+                    ruleName: rule.title,
+                    ruleSeverity: rule.level,
                   },
-                  this.state.findingItems,
+                  [...this.state.findingItems, finding],
+                  true,
                   backButton
-                )
-              }
+                );
+              }}
               data-test-subj={'finding-details-flyout-button'}
             >
               {`${(id as string).slice(0, 7)}...`}

public/pages/Correlations/components/FindingCard.tsx

@@ -23,6 +23,7 @@ import {
   getLabelFromLogType,
 } from '../utils/constants';
 import { DataStore } from '../../../store/DataStore';
+import { CorrelationFinding } from '../../../../types';
 
 export interface FindingCardProps {
   id: string;
@@ -34,6 +35,8 @@ export interface FindingCardProps {
     score: number;
     onInspect: (findingId: string, logType: string) => void;
   };
+  finding: CorrelationFinding;
+  findings: CorrelationFinding[];
 }
 
 export const FindingCard: React.FC<FindingCardProps> = ({
@@ -57,7 +60,7 @@ export const FindingCard: React.FC<FindingCardProps> = ({
               aria-label={'View finding details'}
               data-test-subj={`view-details-icon`}
               iconType={'expand'}
-              onClick={() => DataStore.findings.openFlyout(finding, findings)}
+              onClick={() => DataStore.findings.openFlyout(finding, findings, false)}
             />
           </EuiToolTip>
         </EuiFlexItem>
@@ -131,7 +134,7 @@ export const FindingCard: React.FC<FindingCardProps> = ({
                 aria-label={'View finding details'}
                 data-test-subj={`view-details-icon`}
                 iconType={'expand'}
-                onClick={() => DataStore.findings.openFlyout(finding, findings)}
+                onClick={() => DataStore.findings.openFlyout(finding, findings, false)}
               />
             </EuiToolTip>
           </EuiFlexItem>

public/pages/Correlations/containers/CorrelationsContainer.tsx

@@ -406,7 +406,7 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
                       onInspect: this.onFindingInspect,
                     }}
                     finding={finding}
-                    findings={findingCardsData.correlatedFindings}
+                    findings={[...findingCardsData.correlatedFindings, findingCardsData.finding]}
                   />
                 );
               })}

public/pages/Findings/components/FindingDetailsFlyout.tsx

@@ -46,17 +46,20 @@ import { FindingItemType } from '../containers/Findings/Findings';
 import { CorrelationFinding, RuleItemInfoBase } from '../../../../types';
 import { FindingFlyoutTabId, FindingFlyoutTabs } from '../utils/constants';
 import { DataStore } from '../../../store/DataStore';
-import { RouteComponentProps } from 'react-router-dom';
 import { ruleTypes } from '../../Rules/utils/constants';
 
-interface FindingDetailsFlyoutProps extends RouteComponentProps {
+export interface FindingDetailsFlyoutBaseProps {
   finding: FindingItemType;
   findings: FindingItemType[];
+  shouldLoadAllFindings: boolean;
   backButton?: React.ReactNode;
+}
+
+export interface FindingDetailsFlyoutProps extends FindingDetailsFlyoutBaseProps {
   opensearchService: OpenSearchService;
   indexPatternsService: IndexPatternsService;
   correlationService: CorrelationService;
-  shouldLoadAllFindings: boolean;
+  history: History;
 }
 
 interface FindingDetailsFlyoutState {

public/pages/Main/Main.tsx

@@ -45,7 +45,9 @@ import { DataStore } from '../../store/DataStore';
 import { CreateCorrelationRule } from '../Correlations/containers/CreateCorrelationRule';
 import { CorrelationRules } from '../Correlations/containers/CorrelationRules';
 import { Correlations } from '../Correlations/containers/CorrelationsContainer';
-import FindingDetailsFlyout from '../Findings/components/FindingDetailsFlyout';
+import FindingDetailsFlyout, {
+  FindingDetailsFlyoutBaseProps,
+} from '../Findings/components/FindingDetailsFlyout';
 
 enum Navigation {
   SecurityAnalytics = 'Security Analytics',
@@ -83,7 +85,7 @@ interface MainState {
   dateTimeFilter: DateTimeFilter;
   callout?: ICalloutProps;
   toasts?: Toast[];
-  findingFlyout: JSX.Element | null;
+  findingFlyout: FindingDetailsFlyoutBaseProps | null;
 }
 
 const navItemIndexByRoute: { [route: string]: number } = {
@@ -111,7 +113,7 @@ export default class Main extends Component<MainProps, MainState> {
     DataStore.findings.setFlyoutCallback(this.showFindingFlyout);
   }
 
-  showFindingFlyout = (findingFlyout: Object | null) => {
+  showFindingFlyout = (findingFlyout: FindingDetailsFlyoutBaseProps | null) => {
     this.setState({
       findingFlyout,
     });

public/store/FindingsStore.ts

@@ -3,11 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import React from 'react';
 import { DetectorsService, FindingsService } from '../services';
 import { NotificationsStart } from 'opensearch-dashboards/public';
 import { RouteComponentProps } from 'react-router-dom';
 import { errorNotificationToast } from '../utils/helpers';
 import { FindingItemType } from '../pages/Findings/containers/Findings/Findings';
+import { FindingDetailsFlyoutBaseProps } from '../pages/Findings/components/FindingDetailsFlyout';
 
 export interface IFindingsStore {
   readonly service: FindingsService;
@@ -19,6 +21,19 @@ export interface IFindingsStore {
   getFindingsPerDetector: (detectorId: string) => Promise<FindingItemType[]>;
 
   getAllFindings: () => Promise<FindingItemType[]>;
+
+  setFlyoutCallback: (
+    flyoutCallback: (findingFlyout: FindingDetailsFlyoutBaseProps | null) => void
+  ) => void;
+
+  openFlyout: (
+    finding: FindingItemType,
+    findings: FindingItemType[],
+    shouldLoadAllFindings: boolean,
+    backButton?: React.ReactNode
+  ) => void;
+
+  closeFlyout: () => void;
 }
 
 export interface IFindingsCache {}
@@ -105,4 +120,30 @@ export class FindingsStore implements IFindingsStore {
 
     return allFindings;
   };
+
+  public setFlyoutCallback = (
+    flyoutCallback: (findingFlyout: FindingDetailsFlyoutBaseProps | null) => void
+  ): void => {
+    this.openFlyoutCallback = flyoutCallback;
+  };
+
+  public openFlyoutCallback = (findingFlyout: FindingDetailsFlyoutBaseProps | null) => {};
+
+  closeFlyout = () => this.openFlyoutCallback(null);
+
+  public openFlyout = (
+    finding: FindingItemType,
+    findings: FindingItemType[],
+    shouldLoadAllFindings: boolean,
+    backButton?: React.ReactNode
+  ) => {
+    const flyout = {
+      finding,
+      findings,
+      shouldLoadAllFindings,
+      backButton,
+    } as FindingDetailsFlyoutBaseProps;
+    console.log('FIND DATA', flyout);
+    this.openFlyoutCallback(flyout);
+  };
 }