[SIEM] update ip/hosts details tables to zero when detailName changes (#48253) (#48369)

Author: spong

x-pack/legacy/plugins/siem/public/components/page/network/network_top_n_flow_table/index.tsx

@@ -5,7 +5,7 @@
  */
 import { EuiFlexItem } from '@elastic/eui';
 import { isEqual, last } from 'lodash/fp';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
 import { ActionCreator } from 'typescript-fsa';
@@ -31,7 +31,6 @@ interface OwnProps {
   flowTargeted: FlowTargetSourceDest;
   id: string;
   indexPattern: StaticIndexPattern;
-  ip?: string;
   isInspect: boolean;
   loading: boolean;
   loadPage: (newActivePage: number) => void;
@@ -47,7 +46,6 @@ interface NetworkTopNFlowTableReduxProps {
 }
 
 interface NetworkTopNFlowTableDispatchProps {
-  setIpDetailsTablesActivePageToZero: ActionCreator<null>;
   updateIpDetailsTableActivePage: ActionCreator<{
     activePage: number;
     tableType: networkModel.IpDetailsTableType;
@@ -93,12 +91,10 @@ const NetworkTopNFlowTableComponent = React.memo<NetworkTopNFlowTableProps>(
     flowTargeted,
     id,
     indexPattern,
-    ip,
     isInspect,
     limit,
     loading,
     loadPage,
-    setIpDetailsTablesActivePageToZero,
     showMorePagesIndicator,
     topNFlowSort,
     totalCount,
@@ -108,11 +104,6 @@ const NetworkTopNFlowTableComponent = React.memo<NetworkTopNFlowTableProps>(
     updateTopNFlowLimit,
     updateTopNFlowSort,
   }) => {
-    useEffect(() => {
-      if (ip && activePage !== 0) {
-        setIpDetailsTablesActivePageToZero(null);
-      }
-    }, [ip]);
     const onChange = (criteria: Criteria, tableType: networkModel.TopNTableType) => {
       if (criteria.sort != null) {
         const splitField = criteria.sort.field.split('.');
@@ -200,7 +191,6 @@ const mapStateToProps = (state: State, ownProps: OwnProps) =>
 export const NetworkTopNFlowTable = connect(
   mapStateToProps,
   {
-    setIpDetailsTablesActivePageToZero: networkActions.setIpDetailsTablesActivePageToZero,
     updateTopNFlowLimit: networkActions.updateTopNFlowLimit,
     updateTopNFlowSort: networkActions.updateTopNFlowSort,
     updateNetworkPageTableActivePage: networkActions.updateNetworkPageTableActivePage,

x-pack/legacy/plugins/siem/public/containers/source/index.tsx

@@ -108,5 +108,7 @@ export const WithSource = React.memo<WithSourceProps>(({ children, sourceId }) =
   );
 });
 
+WithSource.displayName = 'WithSource';
+
 export const indicesExistOrDataTemporarilyUnavailable = (indicesExist: boolean | undefined) =>
   indicesExist || isUndefined(indicesExist);

x-pack/legacy/plugins/siem/public/pages/hosts/details/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { StickyContainer } from 'react-sticky';
@@ -19,6 +19,7 @@ import { MlCapabilitiesContext } from '../../../components/ml/permissions/ml_cap
 import { hasMlUserPermissions } from '../../../components/ml/permissions/has_ml_user_permissions';
 import { AnomalyTableProvider } from '../../../components/ml/anomaly/anomaly_table_provider';
 import { scoreIntervalToDateTime } from '../../../components/ml/score/score_interval_to_datetime';
+import { setHostDetailsTablesActivePageToZero as dispatchHostDetailsTablesActivePageToZero } from '../../../store/hosts/actions';
 import { SiemNavigation } from '../../../components/navigation';
 import { manageQuery } from '../../../components/page/manage_query';
 import { HostOverview } from '../../../components/page/hosts/host_overview';
@@ -45,14 +46,18 @@ const KpiHostDetailsManage = manageQuery(KpiHostsComponent);
 const HostDetailsComponent = React.memo<HostDetailsComponentProps>(
   ({
     detailName,
-    isInitializing,
     filters,
     from,
+    isInitializing,
     query,
-    setQuery,
     setAbsoluteRangeDatePicker,
+    setHostDetailsTablesActivePageToZero,
+    setQuery,
     to,
   }) => {
+    useEffect(() => {
+      setHostDetailsTablesActivePageToZero(null);
+    }, [detailName]);
     const capabilities = useContext(MlCapabilitiesContext);
     return (
       <>
@@ -193,6 +198,7 @@ export const HostDetails = compose<React.ComponentClass<HostsQueryProps & { deta
     makeMapStateToProps,
     {
       setAbsoluteRangeDatePicker: dispatchAbsoluteRangeDatePicker,
+      setHostDetailsTablesActivePageToZero: dispatchHostDetailsTablesActivePageToZero,
     }
   )
 )(HostDetailsComponent);

x-pack/legacy/plugins/siem/public/pages/hosts/details/types.ts

@@ -24,7 +24,7 @@ interface HostDetailsComponentReduxProps {
   filters: Filter[];
 }
 
-interface HostDetailsComponentDispatchProps {
+interface HostBodyComponentDispatchProps {
   setAbsoluteRangeDatePicker: ActionCreator<{
     id: InputsModelId;
     from: number;
@@ -33,6 +33,10 @@ interface HostDetailsComponentDispatchProps {
   detailName: string;
 }
 
+interface HostDetailsComponentDispatchProps extends HostBodyComponentDispatchProps {
+  setHostDetailsTablesActivePageToZero: ActionCreator<null>;
+}
+
 export interface HostDetailsBodyProps extends HostsQueryProps {
   children: CommonChildren | AnomaliesChildren;
 }
@@ -43,7 +47,7 @@ export type HostDetailsComponentProps = HostDetailsComponentReduxProps &
   HostsQueryProps;
 
 export type HostDetailsBodyComponentProps = HostDetailsComponentReduxProps &
-  HostDetailsComponentDispatchProps &
+  HostBodyComponentDispatchProps &
   HostDetailsBodyProps;
 
 type KeyHostDetailsNavTabWithoutMlPermission = HostsTableType.authentications &

x-pack/legacy/plugins/siem/public/pages/network/__snapshots__/ip_details.test.tsx.snap

@@ -75,7 +75,6 @@ const getMockHistory = (ip: string) => ({
 
 const to = new Date('2018-03-23T18:49:23.132Z').valueOf();
 const from = new Date('2018-03-24T03:33:52.253Z').valueOf();
-
 const getMockProps = (ip: string) => ({
   to,
   from,
@@ -98,6 +97,7 @@ const getMockProps = (ip: string) => ({
     from: number;
     to: number;
   }>,
+  setIpDetailsTablesActivePageToZero: (jest.fn() as unknown) as ActionCreator<null>,
 });
 
 jest.mock('ui/documentation_links', () => ({
@@ -137,12 +137,7 @@ describe('Ip Details', () => {
   });
   test('it renders', () => {
     const wrapper = shallow(<IPDetailsComponent {...getMockProps('123.456.78.90')} />);
-    expect(
-      wrapper
-        .dive()
-        .find('[data-test-subj="ip-details-page"]')
-        .exists()
-    ).toBe(true);
+    expect(wrapper.find('[data-test-subj="ip-details-page"]').exists()).toBe(true);
   });
 
   test('it matches the snapshot', () => {