[SIEM] Detections bugs rules (#55885) (#55933)

* Fix flow of all rules

* fix the multitude http request + fix table timeline re-rendering

* Update x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx

Co-Authored-By: Garrett Spong <spong@users.noreply.github.com>

Co-authored-by: Garrett Spong <spong@users.noreply.github.com>

Co-authored-by: Garrett Spong <spong@users.noreply.github.com>

x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx

@@ -5,6 +5,7 @@
  */
 
 import { EuiPanel } from '@elastic/eui';
+import deepEqual from 'fast-deep-equal';
 import { getOr, isEmpty, isEqual, union } from 'lodash/fp';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
@@ -34,6 +35,7 @@ import {
   IIndexPattern,
   Query,
 } from '../../../../../../../src/plugins/data/public';
+import { inputsModel } from '../../store';
 
 const DEFAULT_EVENTS_VIEWER_HEIGHT = 500;
 
@@ -67,7 +69,7 @@ interface Props {
   sort: Sort;
   timelineTypeContext: TimelineTypeContextProps;
   toggleColumn: (column: ColumnHeader) => void;
-  utilityBar?: (totalCount: number) => React.ReactNode;
+  utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode;
 }
 
 const EventsViewerComponent: React.FC<Props> = ({
@@ -171,7 +173,7 @@ const EventsViewerComponent: React.FC<Props> = ({
                         {headerFilterGroup}
                       </HeaderSection>
 
-                      {utilityBar?.(totalCountMinusDeleted)}
+                      {utilityBar?.(refetch, totalCountMinusDeleted)}
 
                       <div
                         data-test-subj={`events-container-loading-${loading}`}
@@ -234,15 +236,15 @@ const EventsViewerComponent: React.FC<Props> = ({
 export const EventsViewer = React.memo(
   EventsViewerComponent,
   (prevProps, nextProps) =>
-    prevProps.browserFields === nextProps.browserFields &&
+    isEqual(prevProps.browserFields, nextProps.browserFields) &&
     prevProps.columns === nextProps.columns &&
     prevProps.dataProviders === nextProps.dataProviders &&
     prevProps.deletedEventIds === nextProps.deletedEventIds &&
     prevProps.end === nextProps.end &&
-    isEqual(prevProps.filters, nextProps.filters) &&
+    deepEqual(prevProps.filters, nextProps.filters) &&
     prevProps.height === nextProps.height &&
     prevProps.id === nextProps.id &&
-    prevProps.indexPattern === nextProps.indexPattern &&
+    deepEqual(prevProps.indexPattern, nextProps.indexPattern) &&
     prevProps.isLive === nextProps.isLive &&
     prevProps.itemsPerPage === nextProps.itemsPerPage &&
     prevProps.itemsPerPageOptions === nextProps.itemsPerPageOptions &&

x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import { isEqual } from 'lodash/fp';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useMemo, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { ActionCreator } from 'typescript-fsa';
 import { inputsModel, inputsSelectors, State, timelineSelectors } from '../../store';
@@ -35,7 +35,7 @@ export interface OwnProps {
   headerFilterGroup?: React.ReactNode;
   pageFilters?: esFilters.Filter[];
   timelineTypeContext?: TimelineTypeContextProps;
-  utilityBar?: (totalCount: number) => React.ReactNode;
+  utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode;
 }
 
 interface StateReduxProps {
@@ -84,6 +84,10 @@ interface DispatchProps {
 
 type Props = OwnProps & StateReduxProps & DispatchProps;
 
+const defaultTimelineTypeContext = {
+  loadingText: i18n.LOADING_EVENTS,
+};
+
 const StatefulEventsViewerComponent: React.FC<Props> = ({
   createTimeline,
   columns,
@@ -99,16 +103,14 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
   itemsPerPage,
   itemsPerPageOptions,
   kqlMode,
-  pageFilters = [],
+  pageFilters,
   query,
   removeColumn,
   start,
   showCheckboxes,
   showRowRenderers,
   sort,
-  timelineTypeContext = {
-    loadingText: i18n.LOADING_EVENTS,
-  },
+  timelineTypeContext = defaultTimelineTypeContext,
   updateItemsPerPage,
   upsertColumn,
   utilityBar,
@@ -153,18 +155,20 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
     [columns, id, upsertColumn, removeColumn]
   );
 
+  const globalFilters = useMemo(() => [...filters, ...(pageFilters ?? [])], [filters, pageFilters]);
+
   return (
     <InspectButtonContainer>
       <EventsViewer
-        browserFields={browserFields ?? {}}
+        browserFields={browserFields}
         columns={columns}
         id={id}
         dataProviders={dataProviders!}
         deletedEventIds={deletedEventIds}
         end={end}
-        filters={filters}
+        filters={globalFilters}
         headerFilterGroup={headerFilterGroup}
-        indexPattern={indexPatterns ?? { fields: [], title: '' }}
+        indexPattern={indexPatterns}
         isLive={isLive}
         itemsPerPage={itemsPerPage!}
         itemsPerPageOptions={itemsPerPageOptions!}
@@ -186,7 +190,7 @@ const makeMapStateToProps = () => {
   const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
   const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
   const getEvents = timelineSelectors.getEventsByIdSelector();
-  const mapStateToProps = (state: State, { id, pageFilters = [], defaultModel }: OwnProps) => {
+  const mapStateToProps = (state: State, { id, defaultModel }: OwnProps) => {
     const input: inputsModel.InputsRange = getInputsTimeline(state);
     const events: TimelineModel = getEvents(state, id) ?? defaultModel;
     const {
@@ -205,7 +209,7 @@ const makeMapStateToProps = () => {
       columns,
       dataProviders,
       deletedEventIds,
-      filters: [...getGlobalFiltersQuerySelector(state), ...pageFilters],
+      filters: getGlobalFiltersQuerySelector(state),
       id,
       isLive: input.policy.kind === 'interval',
       itemsPerPage,

x-pack/legacy/plugins/siem/public/components/timeline/index.tsx

@@ -166,7 +166,7 @@ const StatefulTimelineComponent = React.memo<Props>(
     updateItemsPerPage,
     upsertColumn,
   }) => {
-    const [loading, signalIndexExists, signalIndexName] = useSignalIndex();
+    const { loading, signalIndexExists, signalIndexName } = useSignalIndex();
 
     const indexToAdd = useMemo<string[]>(() => {
       if (signalIndexExists && signalIndexName != null && ['signal', 'all'].includes(eventType)) {

x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/api.ts

@@ -389,6 +389,7 @@ export const getPrePackagedRulesStatus = async ({
 }: {
   signal: AbortSignal;
 }): Promise<{
+  rules_custom_installed: number;
   rules_installed: number;
   rules_not_installed: number;
   rules_not_updated: number;

x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/fetch_index_patterns.tsx

@@ -22,11 +22,11 @@ import { useApolloClient } from '../../../utils/apollo_context';
 import * as i18n from './translations';
 
 interface FetchIndexPatternReturn {
-  browserFields: BrowserFields | null;
+  browserFields: BrowserFields;
   isLoading: boolean;
   indices: string[];
   indicesExists: boolean;
-  indexPatterns: IIndexPattern | null;
+  indexPatterns: IIndexPattern;
 }
 
 type Return = [FetchIndexPatternReturn, Dispatch<SetStateAction<string[]>>];
@@ -35,8 +35,8 @@ export const useFetchIndexPatterns = (defaultIndices: string[] = []): Return =>
   const apolloClient = useApolloClient();
   const [indices, setIndices] = useState<string[]>(defaultIndices);
   const [indicesExists, setIndicesExists] = useState(false);
-  const [indexPatterns, setIndexPatterns] = useState<IIndexPattern | null>(null);
-  const [browserFields, setBrowserFields] = useState<BrowserFields | null>(null);
+  const [indexPatterns, setIndexPatterns] = useState<IIndexPattern>({ fields: [], title: '' });
+  const [browserFields, setBrowserFields] = useState<BrowserFields>({});
   const [isLoading, setIsLoading] = useState(false);
   const [, dispatchToaster] = useStateToaster();
 

x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/use_pre_packaged_rules.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useStateToaster, displaySuccessToast } from '../../../components/toasters';
 import { errorToToaster } from '../../../components/ml/api/error_to_toaster';
@@ -18,6 +18,7 @@ interface Return {
   loading: boolean;
   loadingCreatePrePackagedRules: boolean;
   refetchPrePackagedRulesStatus: Func | null;
+  rulesCustomInstalled: number | null;
   rulesInstalled: number | null;
   rulesNotInstalled: number | null;
   rulesNotUpdated: number | null;
@@ -47,13 +48,26 @@ export const usePrePackagedRules = ({
   isAuthenticated,
   isSignalIndexExists,
 }: UsePrePackagedRuleProps): Return => {
-  const [rulesInstalled, setRulesInstalled] = useState<number | null>(null);
-  const [rulesNotInstalled, setRulesNotInstalled] = useState<number | null>(null);
-  const [rulesNotUpdated, setRulesNotUpdated] = useState<number | null>(null);
+  const [rulesStatus, setRuleStatus] = useState<
+    Pick<
+      Return,
+      | 'createPrePackagedRules'
+      | 'refetchPrePackagedRulesStatus'
+      | 'rulesCustomInstalled'
+      | 'rulesInstalled'
+      | 'rulesNotInstalled'
+      | 'rulesNotUpdated'
+    >
+  >({
+    createPrePackagedRules: null,
+    refetchPrePackagedRulesStatus: null,
+    rulesCustomInstalled: null,
+    rulesInstalled: null,
+    rulesNotInstalled: null,
+    rulesNotUpdated: null,
+  });
   const [loadingCreatePrePackagedRules, setLoadingCreatePrePackagedRules] = useState(false);
   const [loading, setLoading] = useState(true);
-  const createPrePackagedRules = useRef<null | CreatePreBuiltRules>(null);
-  const refetchPrePackagedRules = useRef<Func | null>(null);
   const [, dispatchToaster] = useStateToaster();
 
   useEffect(() => {
@@ -68,15 +82,25 @@ export const usePrePackagedRules = ({
         });
 
         if (isSubscribed) {
-          setRulesInstalled(prePackagedRuleStatusResponse.rules_installed);
-          setRulesNotInstalled(prePackagedRuleStatusResponse.rules_not_installed);
-          setRulesNotUpdated(prePackagedRuleStatusResponse.rules_not_updated);
+          setRuleStatus({
+            createPrePackagedRules: createElasticRules,
+            refetchPrePackagedRulesStatus: fetchPrePackagedRules,
+            rulesCustomInstalled: prePackagedRuleStatusResponse.rules_custom_installed,
+            rulesInstalled: prePackagedRuleStatusResponse.rules_installed,
+            rulesNotInstalled: prePackagedRuleStatusResponse.rules_not_installed,
+            rulesNotUpdated: prePackagedRuleStatusResponse.rules_not_updated,
+          });
         }
       } catch (error) {
         if (isSubscribed) {
-          setRulesInstalled(null);
-          setRulesNotInstalled(null);
-          setRulesNotUpdated(null);
+          setRuleStatus({
+            createPrePackagedRules: null,
+            refetchPrePackagedRulesStatus: null,
+            rulesCustomInstalled: null,
+            rulesInstalled: null,
+            rulesNotInstalled: null,
+            rulesNotUpdated: null,
+          });
           errorToToaster({ title: i18n.RULE_FETCH_FAILURE, error, dispatchToaster });
         }
       }
@@ -122,9 +146,14 @@ export const usePrePackagedRules = ({
                       iterationTryOfFetchingPrePackagedCount > 100)
                   ) {
                     setLoadingCreatePrePackagedRules(false);
-                    setRulesInstalled(prePackagedRuleStatusResponse.rules_installed);
-                    setRulesNotInstalled(prePackagedRuleStatusResponse.rules_not_installed);
-                    setRulesNotUpdated(prePackagedRuleStatusResponse.rules_not_updated);
+                    setRuleStatus({
+                      createPrePackagedRules: createElasticRules,
+                      refetchPrePackagedRulesStatus: fetchPrePackagedRules,
+                      rulesCustomInstalled: prePackagedRuleStatusResponse.rules_custom_installed,
+                      rulesInstalled: prePackagedRuleStatusResponse.rules_installed,
+                      rulesNotInstalled: prePackagedRuleStatusResponse.rules_not_installed,
+                      rulesNotUpdated: prePackagedRuleStatusResponse.rules_not_updated,
+                    });
                     displaySuccessToast(i18n.RULE_PREPACKAGED_SUCCESS, dispatchToaster);
                     stopTimeOut();
                     resolve(true);
@@ -146,8 +175,7 @@ export const usePrePackagedRules = ({
     };
 
     fetchPrePackagedRules();
-    createPrePackagedRules.current = createElasticRules;
-    refetchPrePackagedRules.current = fetchPrePackagedRules;
+
     return () => {
       isSubscribed = false;
       abortCtrl.abort();
@@ -157,10 +185,6 @@ export const usePrePackagedRules = ({
   return {
     loading,
     loadingCreatePrePackagedRules,
-    refetchPrePackagedRulesStatus: refetchPrePackagedRules.current,
-    rulesInstalled,
-    rulesNotInstalled,
-    rulesNotUpdated,
-    createPrePackagedRules: createPrePackagedRules.current,
+    ...rulesStatus,
   };
 };

x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/use_rules.tsx

@@ -36,7 +36,7 @@ export const useRules = (pagination: PaginationOptions, filterOptions: FilterOpt
     let isSubscribed = true;
     const abortCtrl = new AbortController();
 
-    async function fetchData() {
+    async function fetchData(forceReload: boolean = false) {
       try {
         setLoading(true);
         const fetchRulesResult = await fetchRules({
@@ -59,7 +59,7 @@ export const useRules = (pagination: PaginationOptions, filterOptions: FilterOpt
     }
 
     fetchData();
-    reFetchRules.current = fetchData;
+    reFetchRules.current = fetchData.bind(null, true);
     return () => {
       isSubscribed = false;
       abortCtrl.abort();

x-pack/legacy/plugins/siem/public/containers/detection_engine/signals/use_privilege_user.tsx

@@ -24,10 +24,14 @@ interface Return {
  */
 export const usePrivilegeUser = (): Return => {
   const [loading, setLoading] = useState(true);
-  const [isAuthenticated, setAuthenticated] = useState<boolean | null>(null);
-  const [hasIndexManage, setHasIndexManage] = useState<boolean | null>(null);
-  const [hasIndexWrite, setHasIndexWrite] = useState<boolean | null>(null);
-  const [hasManageApiKey, setHasManageApiKey] = useState<boolean | null>(null);
+  const [privilegeUser, setPrivilegeUser] = useState<
+    Pick<Return, 'isAuthenticated' | 'hasIndexManage' | 'hasManageApiKey' | 'hasIndexWrite'>
+  >({
+    isAuthenticated: null,
+    hasIndexManage: null,
+    hasManageApiKey: null,
+    hasIndexWrite: null,
+  });
   const [, dispatchToaster] = useStateToaster();
 
   useEffect(() => {
@@ -42,29 +46,31 @@ export const usePrivilegeUser = (): Return => {
         });
 
         if (isSubscribed && privilege != null) {
-          setAuthenticated(privilege.is_authenticated);
           if (privilege.index != null && Object.keys(privilege.index).length > 0) {
             const indexName = Object.keys(privilege.index)[0];
-            setHasIndexManage(privilege.index[indexName].manage);
-            setHasIndexWrite(
-              privilege.index[indexName].create ||
+            setPrivilegeUser({
+              isAuthenticated: privilege.is_authenticated,
+              hasIndexManage: privilege.index[indexName].manage,
+              hasIndexWrite:
+                privilege.index[indexName].create ||
                 privilege.index[indexName].create_doc ||
                 privilege.index[indexName].index ||
-                privilege.index[indexName].write
-            );
-            setHasManageApiKey(
-              privilege.cluster.manage_security ||
+                privilege.index[indexName].write,
+              hasManageApiKey:
+                privilege.cluster.manage_security ||
                 privilege.cluster.manage_api_key ||
-                privilege.cluster.manage_own_api_key
-            );
+                privilege.cluster.manage_own_api_key,
+            });
           }
         }
       } catch (error) {
         if (isSubscribed) {
-          setAuthenticated(false);
-          setHasIndexManage(false);
-          setHasIndexWrite(false);
-          setHasManageApiKey(false);
+          setPrivilegeUser({
+            isAuthenticated: false,
+            hasIndexManage: false,
+            hasManageApiKey: false,
+            hasIndexWrite: false,
+          });
           errorToToaster({ title: i18n.PRIVILEGE_FETCH_FAILURE, error, dispatchToaster });
         }
       }
@@ -80,5 +86,5 @@ export const usePrivilegeUser = (): Return => {
     };
   }, []);
 
-  return { loading, isAuthenticated, hasIndexManage, hasManageApiKey, hasIndexWrite };
+  return { loading, ...privilegeUser };
 };