Add a details button to open the findings flyout from the correlation…

…s page. (opensearch-project#572) * Add a details button to open the findings flyout from the correlations page. opensearch-project#564 Signed-off-by: Jovan Cvetkovic <[email protected]> * Add a details button to open the findings flyout from the correlations page. opensearch-project#564 Signed-off-by: Jovan Cvetkovic <[email protected]> * [FEATURE] Add a details button to open the findings flyout from the correlations page. opensearch-project#564 Signed-off-by: Jovan Cvetkovic <[email protected]> * fix tests Signed-off-by: Jovan Cvetkovic <[email protected]> * code review Signed-off-by: Jovan Cvetkovic <[email protected]> * code review Signed-off-by: Jovan Cvetkovic <[email protected]> * [BUG] Wrong field mappings for the cloud trail logs opensearch-project#573 Signed-off-by: Jovan Cvetkovic <[email protected]> * code review Signed-off-by: Jovan Cvetkovic <[email protected]> --------- Signed-off-by: Jovan Cvetkovic <[email protected]>
amsiglan · May 5, 2023 · 642c2f9 · 642c2f9
1 parent 5435504
commit 642c2f9
Show file tree

Hide file tree

Showing 14 changed files with 196 additions and 93 deletions.
diff --git a/.github/workflows/cypress-workflow.yml b/.github/workflows/cypress-workflow.yml
@@ -94,12 +94,12 @@ jobs:
       # Window is slow so wait longer
       - name: Sleep until OSD server starts - windows
         if: ${{ matrix.os == 'windows-latest' }}
-        run: Start-Sleep -s 400
+        run: Start-Sleep -s 450
         shell: powershell
 
       - name: Sleep until OSD server starts - non-windows
         if: ${{ matrix.os != 'windows-latest' }}
-        run: sleep 400
+        run: sleep 450
         shell: bash
 
       - name: Install Cypress
@@ -132,6 +132,7 @@ jobs:
           working-directory: OpenSearch-Dashboards/plugins/security-analytics-dashboards-plugin
           command: yarn run cypress run
           wait-on: 'http://localhost:5601'
+          wait-on-timeout: 300
           browser: chrome
         env:
           CYPRESS_CACHE_FOLDER: ${{ matrix.cypress_cache_folder }}

diff --git a/cypress/integration/1_detectors.spec.js b/cypress/integration/1_detectors.spec.js
@@ -243,7 +243,7 @@ describe('Detectors', () => {
   beforeEach(() => {
     cy.intercept('/detectors/_search').as('detectorsSearch');
 
-    // Visit Detectors page
+    // Visit Detectors page before any test
     cy.visit(`${OPENSEARCH_DASHBOARDS_URL}/detectors`);
     cy.wait('@detectorsSearch').should('have.property', 'state', 'Complete');
   });

diff --git a/public/app.scss b/public/app.scss
@@ -16,6 +16,7 @@ $euiTextColor: $euiColorDarkestShade !default;
 @import "./pages/Main/components/Callout.scss";
 @import "./pages/Detectors/components/ReviewFieldMappings/ReviewFieldMappings.scss";
 @import "./pages/Correlations/Correlations.scss";
+@import "./pages/Correlations/components/FindingCard.scss";
 @import "./pages/Findings/components/CorrelationsTable/CorrelationsTable.scss";
 
 .selected-radio-panel {
@@ -39,6 +40,10 @@ $euiTextColor: $euiColorDarkestShade !default;
   @return mix($euiColorInk, $color, $percent);
 }
 
+.euiLoadingContent__singleLineBackground {
+  background: linear-gradient(137deg, #d3dae6 45%, #bac0ca 50%, #d3dae6 55%) !important;
+}
+
 .refresh-button {
   min-width: 0;
   .euiButtonContent {

diff --git a/public/pages/Alerts/components/AlertFlyout/AlertFlyout.tsx b/public/pages/Alerts/components/AlertFlyout/AlertFlyout.tsx
@@ -29,7 +29,6 @@ import {
   renderTime,
 } from '../../../../utils/helpers';
 import { FindingsService, IndexPatternsService, OpenSearchService } from '../../../../services';
-import FindingDetailsFlyout from '../../../Findings/components/FindingDetailsFlyout';
 import { parseAlertSeverityToOption } from '../../../CreateDetector/components/ConfigureAlerts/utils/helpers';
 import { Finding } from '../../../Findings/models/interfaces';
 import { NotificationsStart } from 'opensearch-dashboards/public';
@@ -49,7 +48,6 @@ export interface AlertFlyoutProps {
 
 export interface AlertFlyoutState {
   acknowledged: boolean;
-  findingFlyoutData?: Finding;
   findingItems: Finding[];
   loading: boolean;
   rules: { [key: string]: RuleSource };
@@ -71,10 +69,6 @@ export class AlertFlyout extends React.Component<AlertFlyoutProps, AlertFlyoutSt
     this.getFindings();
   }
 
-  setFindingFlyoutData(finding?: Finding) {
-    this.setState({ findingFlyoutData: finding });
-  }
-
   getFindings = async () => {
     this.setState({ loading: true });
     const {
@@ -126,6 +120,18 @@ export class AlertFlyout extends React.Component<AlertFlyoutProps, AlertFlyoutSt
   createFindingTableColumns(): EuiBasicTableColumn<Finding>[] {
     const { detector } = this.props;
     const { rules } = this.state;
+
+    const backButton = (
+      <EuiButtonIcon
+        iconType="arrowLeft"
+        aria-label="back"
+        onClick={() => DataStore.findings.closeFlyout()}
+        display="base"
+        size="s"
+        data-test-subj={'finding-details-flyout-back-button'}
+      />
+    );
+
     return [
       {
         field: 'timestamp',
@@ -142,7 +148,22 @@ export class AlertFlyout extends React.Component<AlertFlyoutProps, AlertFlyoutSt
         render: (id, finding) =>
           (
             <EuiLink
-              onClick={() => this.setFindingFlyoutData(finding)}
+              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, finding],
+                  true,
+                  backButton
+                );
+              }}
               data-test-subj={'finding-details-flyout-button'}
             >
               {`${(id as string).slice(0, 7)}...`}
@@ -175,32 +196,9 @@ export class AlertFlyout extends React.Component<AlertFlyoutProps, AlertFlyoutSt
   render() {
     const { onClose, alertItem, detector, onAcknowledge } = this.props;
     const { trigger_name, state, severity, start_time, last_notification_time } = alertItem;
-    const { acknowledged, findingItems, findingFlyoutData, loading, rules } = this.state;
+    const { acknowledged, findingItems, loading } = this.state;
 
-    return !!this.state.findingFlyoutData ? (
-      <FindingDetailsFlyout
-        {...this.props}
-        shouldLoadAllFindings={true}
-        finding={{
-          ...(findingFlyoutData as Finding),
-          detector: { _id: detector.id as string, _index: '', _source: detector },
-        }}
-        findings={findingItems}
-        closeFlyout={onClose}
-        backButton={
-          <EuiButtonIcon
-            iconType="arrowLeft"
-            aria-label="back"
-            onClick={() => this.setFindingFlyoutData()}
-            display="base"
-            size="s"
-            data-test-subj={'finding-details-flyout-back-button'}
-          />
-        }
-        allRules={rules}
-        indexPatternsService={this.props.indexPatternService}
-      />
-    ) : (
+    return (
       <EuiFlyout
         onClose={onClose}
         hideCloseButton

diff --git a/public/pages/Correlations/components/FindingCard.scss b/public/pages/Correlations/components/FindingCard.scss
@@ -0,0 +1,9 @@
+.finding-card-header {
+  .euiFlexItem:nth-child(2) {
+    margin-right: 6px;
+  }
+
+  .euiFlexItem:nth-child(3) {
+    margin-left: 6px;
+  }
+}
diff --git a/public/pages/Correlations/components/FindingCard.tsx b/public/pages/Correlations/components/FindingCard.tsx
@@ -13,6 +13,7 @@ import {
   EuiSpacer,
   EuiBadge,
   EuiHorizontalRule,
+  EuiToolTip,
 } from '@elastic/eui';
 import { rulePriorityBySeverity } from '../../CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRulesTable';
 import {
@@ -21,6 +22,8 @@ import {
   getSeverityColor,
   getLabelFromLogType,
 } from '../utils/constants';
+import { DataStore } from '../../../store/DataStore';
+import { CorrelationFinding } from '../../../../types';
 
 export interface FindingCardProps {
   id: string;
@@ -32,6 +35,8 @@ export interface FindingCardProps {
     score: number;
     onInspect: (findingId: string, logType: string) => void;
   };
+  finding: CorrelationFinding;
+  findings: CorrelationFinding[];
 }
 
 export const FindingCard: React.FC<FindingCardProps> = ({
@@ -40,13 +45,25 @@ export const FindingCard: React.FC<FindingCardProps> = ({
   logType,
   timestamp,
   detectionRule,
+  finding,
+  findings,
 }) => {
   const correlationHeader = correlationData ? (
     <>
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
+      <EuiFlexGroup className={'finding-card-header'}>
+        <EuiFlexItem grow={true}>
           <EuiText style={{ fontSize: 22, fontWeight: 300 }}>{correlationData.score}</EuiText>
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiToolTip content={'View finding details'}>
+            <EuiButtonIcon
+              aria-label={'View finding details'}
+              data-test-subj={`view-details-icon`}
+              iconType={'expand'}
+              onClick={() => DataStore.findings.openFlyout(finding, findings, false)}
+            />
+          </EuiToolTip>
+        </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButtonIcon
             iconType={'inspect'}
@@ -110,6 +127,18 @@ export const FindingCard: React.FC<FindingCardProps> = ({
         <EuiFlexItem grow={1}>
           <strong>{getLabelFromLogType(logType)}</strong>
         </EuiFlexItem>
+        {!correlationData && (
+          <EuiFlexItem grow={false}>
+            <EuiToolTip content={'View finding details'}>
+              <EuiButtonIcon
+                aria-label={'View finding details'}
+                data-test-subj={`view-details-icon`}
+                iconType={'expand'}
+                onClick={() => DataStore.findings.openFlyout(finding, findings, false)}
+              />
+            </EuiToolTip>
+          </EuiFlexItem>
+        )}
       </EuiFlexGroup>
       {correlationHeader ? <EuiHorizontalRule margin="s" /> : null}
       <EuiSpacer size="m" />

diff --git a/public/pages/Correlations/containers/CorrelationsContainer.tsx b/public/pages/Correlations/containers/CorrelationsContainer.tsx
@@ -133,8 +133,10 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
   private async updateState() {
     if (this.props.location.state) {
       const state = this.props.location.state;
+
       const specificFindingInfo: SpecificFindingCorrelations = {
         finding: {
+          ...state.finding,
           id: state.finding.id,
           logType: state.finding.detector._source.detector_type,
           timestamp: new Date(state.finding.timestamp).toLocaleString(),
@@ -434,6 +436,8 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
                 logType={findingCardsData.finding.logType}
                 timestamp={findingCardsData.finding.timestamp}
                 detectionRule={findingCardsData.finding.detectionRule}
+                finding={findingCardsData.finding}
+                findings={findingCardsData.correlatedFindings}
               />
               <EuiSpacer />
               <EuiTitle size="xs">
@@ -456,6 +460,8 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
                         score: finding.correlationScore || 0,
                         onInspect: this.onFindingInspect,
                       }}
+                      finding={finding}
+                      findings={[...findingCardsData.correlatedFindings, findingCardsData.finding]}
                     />
                     <EuiSpacer size="m" />
                   </>

diff --git a/public/pages/Findings/components/CorrelationsTable/CorrelationsTable.tsx b/public/pages/Findings/components/CorrelationsTable/CorrelationsTable.tsx
@@ -22,6 +22,7 @@ import {
 import { RIGHT_ALIGNMENT } from '@elastic/eui/lib/services';
 import { FindingItemType } from '../../containers/Findings/Findings';
 import { RouteComponentProps } from 'react-router-dom';
+import { DataStore } from '../../../../store/DataStore';
 
 export interface CorrelationsTableProps {
   finding: FindingItemType;
@@ -131,6 +132,7 @@ export const CorrelationsTable: React.FC<CorrelationsTableProps> = ({
   ];
 
   const goToCorrelationsPage = () => {
+    DataStore.findings.closeFlyout();
     history.push({
       pathname: `${ROUTES.CORRELATIONS}`,
       state: {