[Security Solution][Detection Alerts] Fixes follow-up alert refresh b…

…ugs (elastic#112169)
kibanamachine · Oct 12, 2021 · 2be4f19 · 2be4f19
1 parent d8fcbc3
commit 2be4f19
Show file tree

Hide file tree

Showing 10 changed files with 549 additions and 446 deletions.
diff --git a/x-pack/plugins/security_solution/cypress/integration/detection_alerts/acknowledged.spec.ts b/x-pack/plugins/security_solution/cypress/integration/detection_alerts/acknowledged.spec.ts
@@ -6,7 +6,11 @@
  */
 
 import { getNewRule } from '../../objects/rule';
-import { ALERTS_COUNT, TAKE_ACTION_POPOVER_BTN } from '../../screens/alerts';
+import {
+  ALERTS_COUNT,
+  TAKE_ACTION_POPOVER_BTN,
+  ALERT_COUNT_TABLE_FIRST_ROW_COUNT,
+} from '../../screens/alerts';
 
 import {
   selectNumberOfAlerts,
@@ -50,11 +54,16 @@ describe('Marking alerts as acknowledged', () => {
         markAcknowledgedFirstAlert();
         const expectedNumberOfAlerts = +numberOfAlerts - numberOfAlertsToBeMarkedAcknowledged;
         cy.get(ALERTS_COUNT).should('have.text', `${expectedNumberOfAlerts} alerts`);
+        cy.get(ALERT_COUNT_TABLE_FIRST_ROW_COUNT).should('have.text', `${expectedNumberOfAlerts}`);
 
         goToAcknowledgedAlerts();
         waitForAlerts();
 
         cy.get(ALERTS_COUNT).should('have.text', `${numberOfAlertsToBeMarkedAcknowledged} alert`);
+        cy.get(ALERT_COUNT_TABLE_FIRST_ROW_COUNT).should(
+          'have.text',
+          `${numberOfAlertsToBeMarkedAcknowledged}`
+        );
       });
   });
 });
diff --git a/x-pack/plugins/security_solution/cypress/integration/detection_alerts/closing.spec.ts b/x-pack/plugins/security_solution/cypress/integration/detection_alerts/closing.spec.ts
@@ -6,7 +6,13 @@
  */
 
 import { getNewRule } from '../../objects/rule';
-import { ALERTS_COUNT, SELECTED_ALERTS, TAKE_ACTION_POPOVER_BTN } from '../../screens/alerts';
+import {
+  ALERTS_COUNT,
+  SELECTED_ALERTS,
+  TAKE_ACTION_POPOVER_BTN,
+  ALERT_COUNT_TABLE_FIRST_ROW_COUNT,
+  ALERTS_TREND_SIGNAL_RULE_NAME_PANEL,
+} from '../../screens/alerts';
 
 import {
   closeFirstAlert,
@@ -46,6 +52,7 @@ describe('Closing alerts', () => {
       .then((alertNumberString) => {
         const numberOfAlerts = alertNumberString.split(' ')[0];
         cy.get(ALERTS_COUNT).should('have.text', `${numberOfAlerts} alerts`);
+        cy.get(ALERT_COUNT_TABLE_FIRST_ROW_COUNT).should('have.text', `${numberOfAlerts}`);
 
         selectNumberOfAlerts(numberOfAlertsToBeClosed);
 
@@ -56,6 +63,10 @@ describe('Closing alerts', () => {
 
         const expectedNumberOfAlertsAfterClosing = +numberOfAlerts - numberOfAlertsToBeClosed;
         cy.get(ALERTS_COUNT).should('have.text', `${expectedNumberOfAlertsAfterClosing} alerts`);
+        cy.get(ALERT_COUNT_TABLE_FIRST_ROW_COUNT).should(
+          'have.text',
+          `${expectedNumberOfAlertsAfterClosing}`
+        );
 
         goToClosedAlerts();
         waitForAlerts();
@@ -75,6 +86,10 @@ describe('Closing alerts', () => {
           'have.text',
           `${expectedNumberOfClosedAlertsAfterOpened} alerts`
         );
+        cy.get(ALERT_COUNT_TABLE_FIRST_ROW_COUNT).should(
+          'have.text',
+          `${expectedNumberOfClosedAlertsAfterOpened}`
+        );
 
         goToOpenedAlerts();
         waitForAlerts();
@@ -83,6 +98,10 @@ describe('Closing alerts', () => {
           +numberOfAlerts - expectedNumberOfClosedAlertsAfterOpened;
 
         cy.get(ALERTS_COUNT).should('have.text', `${expectedNumberOfOpenedAlerts} alerts`);
+        cy.get(ALERT_COUNT_TABLE_FIRST_ROW_COUNT).should(
+          'have.text',
+          `${expectedNumberOfOpenedAlerts}`
+        );
       });
   });
 
@@ -103,11 +122,59 @@ describe('Closing alerts', () => {
 
         const expectedNumberOfAlerts = +numberOfAlerts - numberOfAlertsToBeClosed;
         cy.get(ALERTS_COUNT).should('have.text', `${expectedNumberOfAlerts} alerts`);
+        cy.get(ALERT_COUNT_TABLE_FIRST_ROW_COUNT).should('have.text', `${expectedNumberOfAlerts}`);
+
+        goToClosedAlerts();
+        waitForAlerts();
+
+        cy.get(ALERTS_COUNT).should('have.text', `${numberOfAlertsToBeClosed} alert`);
+        cy.get(ALERT_COUNT_TABLE_FIRST_ROW_COUNT).should(
+          'have.text',
+          `${numberOfAlertsToBeClosed}`
+        );
+      });
+  });
+
+  it('Updates trend histogram whenever alert status is updated in table', () => {
+    const numberOfAlertsToBeClosed = 1;
+    cy.get(ALERTS_COUNT)
+      .invoke('text')
+      .then((alertNumberString) => {
+        const numberOfAlerts = alertNumberString.split(' ')[0];
+        cy.get(ALERTS_COUNT).should('have.text', `${numberOfAlerts} alerts`);
+        cy.get(ALERT_COUNT_TABLE_FIRST_ROW_COUNT).should('have.text', `${numberOfAlerts}`);
+
+        selectNumberOfAlerts(numberOfAlertsToBeClosed);
+
+        cy.get(SELECTED_ALERTS).should('have.text', `Selected ${numberOfAlertsToBeClosed} alert`);
+
+        closeAlerts();
+        waitForAlerts();
+
+        const expectedNumberOfAlertsAfterClosing = +numberOfAlerts - numberOfAlertsToBeClosed;
+        cy.get(ALERTS_COUNT).should('have.text', `${expectedNumberOfAlertsAfterClosing} alerts`);
+        cy.get(ALERT_COUNT_TABLE_FIRST_ROW_COUNT).should(
+          'have.text',
+          `${expectedNumberOfAlertsAfterClosing}`
+        );
 
         goToClosedAlerts();
         waitForAlerts();
 
         cy.get(ALERTS_COUNT).should('have.text', `${numberOfAlertsToBeClosed} alert`);
+
+        const numberOfAlertsToBeOpened = 1;
+        selectNumberOfAlerts(numberOfAlertsToBeOpened);
+
+        cy.get(SELECTED_ALERTS).should('have.text', `Selected ${numberOfAlertsToBeOpened} alert`);
+        cy.get(ALERTS_TREND_SIGNAL_RULE_NAME_PANEL).should('exist');
+
+        openAlerts();
+        waitForAlerts();
+
+        cy.get(ALERTS_COUNT).should('not.exist');
+        cy.get(ALERT_COUNT_TABLE_FIRST_ROW_COUNT).should('not.exist');
+        cy.get(ALERTS_TREND_SIGNAL_RULE_NAME_PANEL).should('not.exist');
       });
   });
 });
diff --git a/x-pack/plugins/security_solution/cypress/integration/detection_alerts/opening.spec.ts b/x-pack/plugins/security_solution/cypress/integration/detection_alerts/opening.spec.ts
@@ -6,7 +6,12 @@
  */
 
 import { getNewRule } from '../../objects/rule';
-import { ALERTS_COUNT, SELECTED_ALERTS, TAKE_ACTION_POPOVER_BTN } from '../../screens/alerts';
+import {
+  ALERTS_COUNT,
+  SELECTED_ALERTS,
+  TAKE_ACTION_POPOVER_BTN,
+  ALERT_COUNT_TABLE_FIRST_ROW_COUNT,
+} from '../../screens/alerts';
 
 import {
   closeAlerts,
@@ -74,6 +79,10 @@ describe('Opening alerts', () => {
 
             const expectedNumberOfAlerts = +numberOfAlerts - numberOfAlertsToBeOpened;
             cy.get(ALERTS_COUNT).should('have.text', `${expectedNumberOfAlerts} alerts`);
+            cy.get(ALERT_COUNT_TABLE_FIRST_ROW_COUNT).should(
+              'have.text',
+              `${expectedNumberOfAlerts}`
+            );
 
             goToOpenedAlerts();
             waitForAlerts();
@@ -82,6 +91,10 @@ describe('Opening alerts', () => {
               'have.text',
               `${numberOfOpenedAlerts + numberOfAlertsToBeOpened} alerts`.toString()
             );
+            cy.get(ALERT_COUNT_TABLE_FIRST_ROW_COUNT).should(
+              'have.text',
+              `${numberOfOpenedAlerts + numberOfAlertsToBeOpened}`
+            );
           });
       });
   });

diff --git a/x-pack/plugins/security_solution/cypress/screens/alerts.ts b/x-pack/plugins/security_solution/cypress/screens/alerts.ts
@@ -74,3 +74,9 @@ export const TAKE_ACTION_POPOVER_BTN = '[data-test-subj="selectedShowBulkActions
 export const TIMELINE_CONTEXT_MENU_BTN = '[data-test-subj="timeline-context-menu-button"]';
 
 export const ATTACH_ALERT_TO_CASE_BUTTON = '[data-test-subj="attach-alert-to-case-button"]';
+
+export const ALERT_COUNT_TABLE_FIRST_ROW_COUNT =
+  '[data-test-subj="alertsCountTable"] tr:nth-child(1) td:nth-child(2) .euiTableCellContent__text';
+
+export const ALERTS_TREND_SIGNAL_RULE_NAME_PANEL =
+  '[data-test-subj="render-content-signal.rule.name"]';
diff --git a/...olution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx b/...olution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx
@@ -12,6 +12,7 @@ import { indexOf } from 'lodash';
 import { connect, ConnectedProps } from 'react-redux';
 import { ExceptionListType } from '@kbn/securitysolution-io-ts-list-types';
 import { get } from 'lodash/fp';
+import { useRouteSpy } from '../../../../common/utils/route/use_route_spy';
 import { buildGetAlertByIdQuery } from '../../../../common/components/exceptions/helpers';
 import { EventsTdContent } from '../../../../timelines/components/timeline/styles';
 import { DEFAULT_ICON_BUTTON_WIDTH } from '../../../../timelines/components/timeline/helpers';
@@ -63,6 +64,7 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps & PropsFromRedux
   timelineQuery,
 }) => {
   const [isPopoverOpen, setPopover] = useState(false);
+  const [routeProps] = useRouteSpy();
 
   const afterItemSelection = useCallback(() => {
     setPopover(false);
@@ -112,10 +114,13 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps & PropsFromRedux
   const refetchAll = useCallback(() => {
     if (timelineId === TimelineId.active) {
       refetchQuery([timelineQuery]);
+      if (routeProps.pageName === 'alerts') {
+        refetchQuery(globalQuery);
+      }
     } else {
       refetchQuery(globalQuery);
     }
-  }, [timelineId, globalQuery, timelineQuery]);
+  }, [timelineId, globalQuery, timelineQuery, routeProps]);
 
   const {
     exceptionModalType,

diff --git a/x-pack/plugins/security_solution/public/detections/components/take_action_dropdown/index.tsx b/x-pack/plugins/security_solution/public/detections/components/take_action_dropdown/index.tsx
@@ -9,8 +9,7 @@ import React, { useState, useCallback, useMemo } from 'react';
 import { EuiContextMenuPanel, EuiButton, EuiPopover } from '@elastic/eui';
 import type { ExceptionListType } from '@kbn/securitysolution-io-ts-list-types';
 import { isEmpty } from 'lodash/fp';
-import { connect, ConnectedProps } from 'react-redux';
-import { TimelineEventsDetailsItem, TimelineId } from '../../../../common';
+import { TimelineEventsDetailsItem } from '../../../../common';
 import { TAKE_ACTION } from '../alerts_table/alerts_utility_bar/translations';
 import { useExceptionActions } from '../alerts_table/timeline_actions/use_add_exception_actions';
 import { useAlertsActions } from '../alerts_table/timeline_actions/use_alerts_actions';
@@ -24,8 +23,6 @@ import { Status } from '../../../../common/detection_engine/schemas/common/schem
 import { isAlertFromEndpointAlert } from '../../../common/utils/endpoint_alert_check';
 import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
 import { useAddToCaseActions } from '../alerts_table/timeline_actions/use_add_to_case_actions';
-import { inputsModel, inputsSelectors, State } from '../../../common/store';
-
 interface ActionsData {
   alertStatus: Status;
   eventId: string;
@@ -48,7 +45,7 @@ export interface TakeActionDropdownProps {
   timelineId: string;
 }
 
-export const TakeActionDropdownComponent = React.memo(
+export const TakeActionDropdown = React.memo(
   ({
     detailsData,
     ecsData,
@@ -61,9 +58,7 @@ export const TakeActionDropdownComponent = React.memo(
     onAddIsolationStatusClick,
     refetch,
     timelineId,
-    globalQuery,
-    timelineQuery,
-  }: TakeActionDropdownProps & PropsFromRedux) => {
+  }: TakeActionDropdownProps) => {
     const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
 
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -145,24 +140,12 @@ export const TakeActionDropdownComponent = React.memo(
       closePopoverHandler();
     }, [closePopoverHandler]);
 
-    const refetchQuery = (newQueries: inputsModel.GlobalQuery[]) => {
-      newQueries.forEach((q) => q.refetch && (q.refetch as inputsModel.Refetch)());
-    };
-
-    const refetchAll = useCallback(() => {
-      if (timelineId === TimelineId.active) {
-        refetchQuery([timelineQuery]);
-      } else {
-        refetchQuery(globalQuery);
-      }
-    }, [timelineId, globalQuery, timelineQuery]);
-
     const { actionItems: statusActionItems } = useAlertsActions({
       alertStatus: actionsData.alertStatus,
       closePopover: closePopoverAndFlyout,
       eventId: actionsData.eventId,
       indexName,
-      refetch: refetchAll,
+      refetch,
       timelineId,
     });
 
@@ -232,21 +215,3 @@ export const TakeActionDropdownComponent = React.memo(
     ) : null;
   }
 );
-
-const makeMapStateToProps = () => {
-  const getGlobalQueries = inputsSelectors.globalQuery();
-  const getTimelineQuery = inputsSelectors.timelineQueryByIdSelector();
-  const mapStateToProps = (state: State, { timelineId }: TakeActionDropdownProps) => {
-    return {
-      globalQuery: getGlobalQueries(state),
-      timelineQuery: getTimelineQuery(state, timelineId),
-    };
-  };
-  return mapStateToProps;
-};
-
-const connector = connect(makeMapStateToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export const TakeActionDropdown = connector(React.memo(TakeActionDropdownComponent));