final commit -> to fix context of timeline between tabs

elastic · Nov 2, 2020 · 91ef942 · 91ef942
1 parent 15eb5e7
commit 91ef942
Show file tree

Hide file tree

Showing 15 changed files with 35 additions and 56 deletions.
diff --git a/x-pack/plugins/security_solution/public/app/home/index.tsx b/x-pack/plugins/security_solution/public/app/home/index.tsx
@@ -6,7 +6,6 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-import { useDispatch } from 'react-redux';
 
 import { TimelineId } from '../../../common/types/timeline';
 import { DragDropContextWrapper } from '../../common/components/drag_and_drop/drag_drop_context_wrapper';
@@ -24,7 +23,6 @@ import { DETECTIONS_SUB_PLUGIN_ID } from '../../../common/constants';
 import { SourcererScopeName } from '../../common/store/sourcerer/model';
 import { useUpgradeEndpointPackage } from '../../common/hooks/endpoint/upgrade';
 import { useThrottledResizeObserver } from '../../common/components/utils';
-import { inputsActions } from '../../common/store/inputs';
 
 const Main = styled.main.attrs<{ paddingTop: number }>(({ paddingTop }) => ({
   style: {
@@ -46,7 +44,6 @@ interface HomePageProps {
 }
 
 const HomePageComponent: React.FC<HomePageProps> = ({ children }) => {
-  const dispatch = useDispatch();
   const { application, overlays } = useKibana().services;
   const subPluginId = useRef<string>('');
   const { ref, height = 0 } = useThrottledResizeObserver(300);
@@ -82,12 +79,6 @@ const HomePageComponent: React.FC<HomePageProps> = ({ children }) => {
   // can remove this.
   useUpgradeEndpointPackage();
 
-  useEffect(() => {
-    return () => {
-      dispatch(inputsActions.setIsInitializing({ id: 'timeline' }));
-    };
-  }, [dispatch]);
-
   return (
     <SecuritySolutionAppWrapper>
       <HeaderGlobal ref={ref} isFixed={headerFixed} />

diff --git a/...ck/plugins/security_solution/public/common/components/super_date_picker/selectors.test.ts b/...ck/plugins/security_solution/public/common/components/super_date_picker/selectors.test.ts
@@ -28,7 +28,6 @@ describe('selectors', () => {
   };
 
   let inputState: InputsRange = {
-    isInitializing: false,
     timerange: absoluteTime,
     policy: {
       kind: 'manual',
@@ -63,7 +62,6 @@ describe('selectors', () => {
     };
 
     inputState = {
-      isInitializing: false,
       timerange: absoluteTime,
       policy: {
         kind: 'manual',

diff --git a/x-pack/plugins/security_solution/public/common/mock/global_state.ts b/x-pack/plugins/security_solution/public/common/mock/global_state.ts
@@ -160,7 +160,6 @@ export const mockGlobalState: State = {
   },
   inputs: {
     global: {
-      isInitializing: false,
       timerange: {
         kind: 'relative',
         fromStr: DEFAULT_FROM,
@@ -178,7 +177,6 @@ export const mockGlobalState: State = {
       filters: [],
     },
     timeline: {
-      isInitializing: false,
       timerange: {
         kind: 'relative',
         fromStr: DEFAULT_FROM,

diff --git a/x-pack/plugins/security_solution/public/common/store/inputs/actions.ts b/x-pack/plugins/security_solution/public/common/store/inputs/actions.ts
@@ -89,7 +89,3 @@ export const setSearchBarFilter = actionCreator<{
   id: InputsModelId;
   filters: Filter[];
 }>('SET_SEARCH_BAR_FILTER');
-
-export const setIsInitializing = actionCreator<{
-  id: InputsModelId;
-}>('SET_IS_INITIALIZING');
diff --git a/x-pack/plugins/security_solution/public/common/store/inputs/helpers.test.ts b/x-pack/plugins/security_solution/public/common/store/inputs/helpers.test.ts
@@ -258,7 +258,6 @@ describe('Inputs', () => {
         })
       ).toEqual({
         global: {
-          isInitializing: false,
           linkTo: ['timeline'],
           policy: {
             duration: 300000,
@@ -285,7 +284,6 @@ describe('Inputs', () => {
           filters: [],
         },
         timeline: {
-          isInitializing: false,
           linkTo: ['global'],
           policy: {
             duration: 300000,

diff --git a/x-pack/plugins/security_solution/public/common/store/inputs/helpers.ts b/x-pack/plugins/security_solution/public/common/store/inputs/helpers.ts
@@ -38,7 +38,6 @@ export const updateInputTimerange = (
           ...acc,
           [linkToId]: {
             ...get(linkToId, state),
-            isInitializing: false,
             timerange,
           },
         }),

diff --git a/x-pack/plugins/security_solution/public/common/store/inputs/model.ts b/x-pack/plugins/security_solution/public/common/store/inputs/model.ts
@@ -73,7 +73,6 @@ export interface GlobalKqlQuery extends GlobalGenericQuery {
 export type GlobalQuery = GlobalGraphqlQuery | GlobalKqlQuery;
 
 export interface InputsRange {
-  isInitializing: boolean;
   timerange: TimeRange;
   policy: Policy;
   queries: GlobalQuery[];

diff --git a/x-pack/plugins/security_solution/public/common/store/inputs/reducer.ts b/x-pack/plugins/security_solution/public/common/store/inputs/reducer.ts
@@ -28,7 +28,6 @@ import {
   setFilterQuery,
   setSavedQuery,
   setSearchBarFilter,
-  setIsInitializing,
 } from './actions';
 import {
   setIsInspected,
@@ -48,7 +47,6 @@ export type InputsState = InputsModel;
 
 export const initialInputsState: InputsState = {
   global: {
-    isInitializing: false,
     timerange: {
       kind: 'relative',
       ...getTimeRangeSettings(false),
@@ -64,7 +62,6 @@ export const initialInputsState: InputsState = {
     fullScreen: false,
   },
   timeline: {
-    isInitializing: false,
     timerange: {
       kind: 'relative',
       ...getTimeRangeSettings(false),
@@ -87,7 +84,6 @@ export const createInitialInputsState = (): InputsState => {
 
   return {
     global: {
-      isInitializing: false,
       timerange: {
         kind: 'relative',
         fromStr,
@@ -109,7 +105,6 @@ export const createInitialInputsState = (): InputsState => {
       fullScreen: false,
     },
     timeline: {
-      isInitializing: false,
       timerange: {
         kind: 'relative',
         fromStr,
@@ -250,11 +245,4 @@ export const inputsReducer = reducerWithInitialState(initialInputsState)
       filters,
     },
   }))
-  .case(setIsInitializing, (state, { id }) => ({
-    ...state,
-    [id]: {
-      ...get(id, state),
-      isInitializing: true,
-    },
-  }))
   .build();
diff --git a/...curity_solution/public/timelines/components/timeline/__snapshots__/timeline.test.tsx.snap b/...curity_solution/public/timelines/components/timeline/__snapshots__/timeline.test.tsx.snap
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
@@ -27,6 +27,11 @@ export interface OwnProps {
 
 export type Props = OwnProps & PropsFromRedux;
 
+const isTimerangeSame = (prevProps: Props, nextProps: Props) =>
+  prevProps.end === nextProps.end &&
+  prevProps.start === nextProps.start &&
+  prevProps.timerangeKind === nextProps.timerangeKind;
+
 const StatefulTimelineComponent = React.memo<Props>(
   ({
     columns,
@@ -39,7 +44,6 @@ const StatefulTimelineComponent = React.memo<Props>(
     isLive,
     isSaving,
     isTimelineExists,
-    isTimerangeInitializing,
     itemsPerPage,
     itemsPerPageOptions,
     kqlMode,
@@ -52,6 +56,7 @@ const StatefulTimelineComponent = React.memo<Props>(
     start,
     status,
     timelineType,
+    timerangeKind,
     updateItemsPerPage,
     upsertColumn,
     usersViewing,
@@ -114,7 +119,6 @@ const StatefulTimelineComponent = React.memo<Props>(
         isSaving={isSaving}
         itemsPerPage={itemsPerPage!}
         itemsPerPageOptions={itemsPerPageOptions!}
-        isTimerangeInitializing={isTimerangeInitializing}
         kqlMode={kqlMode}
         kqlQueryExpression={kqlQueryExpression}
         loadingSourcerer={loading}
@@ -127,26 +131,24 @@ const StatefulTimelineComponent = React.memo<Props>(
         status={status}
         toggleColumn={toggleColumn}
         timelineType={timelineType}
+        timerangeKind={timerangeKind}
         usersViewing={usersViewing}
       />
     );
   },
-  // eslint-disable-next-line complexity
   (prevProps, nextProps) => {
     return (
-      prevProps.end === nextProps.end &&
+      isTimerangeSame(prevProps, nextProps) &&
       prevProps.graphEventId === nextProps.graphEventId &&
       prevProps.id === nextProps.id &&
       prevProps.isLive === nextProps.isLive &&
       prevProps.isSaving === nextProps.isSaving &&
       prevProps.isTimelineExists === nextProps.isTimelineExists &&
-      prevProps.isTimerangeInitializing === nextProps.isTimerangeInitializing &&
       prevProps.itemsPerPage === nextProps.itemsPerPage &&
       prevProps.kqlMode === nextProps.kqlMode &&
       prevProps.kqlQueryExpression === nextProps.kqlQueryExpression &&
       prevProps.show === nextProps.show &&
       prevProps.showCallOutUnauthorizedMsg === nextProps.showCallOutUnauthorizedMsg &&
-      prevProps.start === nextProps.start &&
       prevProps.timelineType === nextProps.timelineType &&
       prevProps.status === nextProps.status &&
       deepEqual(prevProps.columns, nextProps.columns) &&
@@ -199,7 +201,6 @@ const makeMapStateToProps = () => {
       end: input.timerange.to,
       filters: timelineFilter,
       graphEventId,
-      isTimerangeInitializing: input.isInitializing,
       id,
       isLive: input.policy.kind === 'interval',
       isSaving,
@@ -214,6 +215,7 @@ const makeMapStateToProps = () => {
       start: input.timerange.from,
       status,
       timelineType,
+      timerangeKind: input.timerange.kind,
     };
   };
   return mapStateToProps;

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx
@@ -103,7 +103,6 @@ describe('Timeline', () => {
       indexPattern,
       isLive: false,
       isSaving: false,
-      isTimerangeInitializing: false,
       itemsPerPage: 5,
       itemsPerPageOptions: [5, 10, 20],
       kqlMode: 'search' as TimelineComponentProps['kqlMode'],
@@ -117,6 +116,7 @@ describe('Timeline', () => {
       start: startDate,
       status: TimelineStatus.active,
       timelineType: TimelineType.default,
+      timerangeKind: 'absolute',
       toggleColumn: jest.fn(),
       usersViewing: ['elastic'],
     };

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx
@@ -99,7 +99,6 @@ export interface Props {
   indexPattern: IIndexPattern;
   isLive: boolean;
   isSaving: boolean;
-  isTimerangeInitializing: boolean;
   itemsPerPage: number;
   itemsPerPageOptions: number[];
   kqlMode: KqlMode;
@@ -113,6 +112,7 @@ export interface Props {
   start: string;
   status: TimelineStatusLiteral;
   timelineType: TimelineType;
+  timerangeKind: 'absolute' | 'relative';
   toggleColumn: (column: ColumnHeaderOptions) => void;
   usersViewing: string[];
 }
@@ -132,7 +132,6 @@ export const TimelineComponent: React.FC<Props> = ({
   isLive,
   loadingSourcerer,
   isSaving,
-  isTimerangeInitializing,
   itemsPerPage,
   itemsPerPageOptions,
   kqlMode,
@@ -145,6 +144,7 @@ export const TimelineComponent: React.FC<Props> = ({
   status,
   sort,
   timelineType,
+  timerangeKind,
   toggleColumn,
   usersViewing,
 }) => {
@@ -220,13 +220,13 @@ export const TimelineComponent: React.FC<Props> = ({
     endDate: end,
     id,
     indexNames,
-    isTimerangeInitializing,
     fields: timelineQueryFields,
     limit: itemsPerPage,
     filterQuery: combinedQueries?.filterQuery ?? '',
     startDate: start,
     skip: !canQueryTimeline,
     sort: timelineQuerySortField,
+    timerangeKind,
   });
 
   useEffect(() => {

diff --git a/x-pack/plugins/security_solution/public/timelines/containers/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/containers/index.test.tsx
@@ -98,7 +98,6 @@ describe('useTimelineEvents', () => {
     endDate: '',
     id: TimelineId.active,
     indexNames: ['filebeat-*'],
-    isTimerangeInitializing: false,
     fields: [],
     filterQuery: '',
     startDate: '',