[SIEM] Detections bugs rules (elastic#55885)

* 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>
XavierM · Jan 24, 2020 · aa2378c · aa2378c
1 parent d801d2b
commit aa2378c
Show file tree

Hide file tree

Showing 24 changed files with 327 additions and 233 deletions.
diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx b/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 &&

diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx b/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,

diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/index.tsx b/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)) {

diff --git a/x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/api.ts b/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;

diff --git a/x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/fetch_index_patterns.tsx b/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();
 

diff --git a/...k/legacy/plugins/siem/public/containers/detection_engine/rules/use_pre_packaged_rules.tsx b/...k/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,
  };
 };
diff --git a/x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/use_rules.tsx b/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();

diff --git a/x-pack/legacy/plugins/siem/public/containers/detection_engine/signals/use_privilege_user.tsx b/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 };
 };