From 2c6b044f87e29ad674ebfa529941854e15fb7c14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopyci=C5=84ski?= Date: Tue, 28 Jul 2020 22:13:02 +0200 Subject: [PATCH] [Security Solution] Fix query fetchPolicy and deduplication (#73199) --- .../components/events_viewer/events_viewer.tsx | 1 + .../common/components/events_viewer/index.tsx | 5 ++++- .../common/components/events_viewer/mock.ts | 1 + .../public/common/containers/source/index.tsx | 17 +++++++++++++---- .../components/alerts_table/index.tsx | 7 ++++--- .../components/rules/step_about_rule/index.tsx | 3 ++- .../components/rules/step_define_rule/index.tsx | 2 +- .../rules/fetch_index_patterns.tsx | 2 +- .../timelines/components/timeline/timeline.tsx | 1 + .../public/timelines/containers/index.tsx | 9 ++++++++- 10 files changed, 36 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx index bc036b38524ba..e836e2e20432a 100644 --- a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx +++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx @@ -222,6 +222,7 @@ const EventsViewerComponent: React.FC = ({ sourceId="default" startDate={start} endDate={end} + queryDeduplication="events_viewer" > {({ events, diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx index 80831b4022ace..c402116ee2714 100644 --- a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx @@ -69,7 +69,10 @@ const StatefulEventsViewerComponent: React.FC = ({ }) => { const [ { docValueFields, browserFields, indexPatterns, isLoading: isLoadingIndexPattern }, - ] = useFetchIndexPatterns(defaultIndices ?? useUiSetting(DEFAULT_INDEX_KEY)); + ] = useFetchIndexPatterns( + defaultIndices ?? useUiSetting(DEFAULT_INDEX_KEY), + 'events_viewer' + ); useEffect(() => { if (createTimeline != null) { diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/mock.ts b/x-pack/plugins/security_solution/public/common/components/events_viewer/mock.ts index ea2e60ebc82b8..6266e84051901 100644 --- a/x-pack/plugins/security_solution/public/common/components/events_viewer/mock.ts +++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/mock.ts @@ -40,6 +40,7 @@ export const mockEventViewerResponse = [ { field: 'event.end', format: 'date_time' }, ], inspect: false, + queryDeduplication: 'events_viewer', }, }, result: { diff --git a/x-pack/plugins/security_solution/public/common/containers/source/index.tsx b/x-pack/plugins/security_solution/public/common/containers/source/index.tsx index 54d49d7279d68..ffbecf9e3d433 100644 --- a/x-pack/plugins/security_solution/public/common/containers/source/index.tsx +++ b/x-pack/plugins/security_solution/public/common/containers/source/index.tsx @@ -122,7 +122,12 @@ interface UseWithSourceState { export const useWithSource = ( sourceId = 'default', indexToAdd?: string[] | null, - onlyCheckIndexToAdd?: boolean + onlyCheckIndexToAdd?: boolean, + // Fun fact: When using this hook multiple times within a component (e.g. add_exception_modal & edit_exception_modal), + // the apolloClient will perform queryDeduplication and prevent the first query from executing. A deep compare is not + // performed on `indices`, so another field must be passed to circumvent this. + // For details, see https://github.com/apollographql/react-apollo/issues/2202 + queryDeduplication = 'default' ) => { const [configIndex] = useUiSetting$(DEFAULT_INDEX_KEY); const defaultIndex = useMemo(() => { @@ -154,12 +159,16 @@ export const useWithSource = ( setState((prevState) => ({ ...prevState, loading: true })); try { - const result = await apolloClient.query({ + const result = await apolloClient.query< + SourceQuery.Query, + SourceQuery.Variables & { queryDeduplication: string } + >({ query: sourceQuery, - fetchPolicy: 'network-only', + fetchPolicy: 'cache-first', variables: { sourceId, defaultIndex, + queryDeduplication, }, context: { fetchOptions: { @@ -206,7 +215,7 @@ export const useWithSource = ( isSubscribed = false; return abortCtrl.abort(); }; - }, [apolloClient, sourceId, defaultIndex]); + }, [apolloClient, sourceId, defaultIndex, queryDeduplication]); return state; }; diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx index 1eda358fe5944..ab95e433d92f3 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx @@ -116,8 +116,9 @@ export const AlertsTableComponent: React.FC = ({ const [addExceptionModalState, setAddExceptionModalState] = useState( addExceptionModalInitialState ); - const [{ browserFields, indexPatterns }] = useFetchIndexPatterns( - signalsIndex !== '' ? [signalsIndex] : [] + const [{ browserFields, indexPatterns, isLoading: indexPatternsLoading }] = useFetchIndexPatterns( + signalsIndex !== '' ? [signalsIndex] : [], + 'alerts_table' ); const kibana = useKibana(); const [, dispatchToaster] = useStateToaster(); @@ -433,7 +434,7 @@ export const AlertsTableComponent: React.FC = ({ closeAddExceptionModal, ]); - if (loading || isEmpty(signalsIndex)) { + if (loading || indexPatternsLoading || isEmpty(signalsIndex)) { return ( diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/index.tsx index ec812fa63eadf..5edf6f0a9312e 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/index.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/index.tsx @@ -74,7 +74,8 @@ const StepAboutRuleComponent: FC = ({ const initialState = defaultValues ?? stepAboutDefaultValue; const [myStepData, setMyStepData] = useState(initialState); const [{ isLoading: indexPatternLoading, indexPatterns }] = useFetchIndexPatterns( - defineRuleData?.index ?? [] + defineRuleData?.index ?? [], + 'step_about_rule' ); const canUseExceptions = defineRuleData?.ruleType && diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx index 51e9291f31941..3d5b66b8869cc 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx @@ -117,7 +117,7 @@ const StepDefineRuleComponent: FC = ({ const [myStepData, setMyStepData] = useState(initialState); const [ { browserFields, indexPatterns: indexPatternQueryBar, isLoading: indexPatternLoadingQueryBar }, - ] = useFetchIndexPatterns(myStepData.index); + ] = useFetchIndexPatterns(myStepData.index, 'step_define_rule'); const { form } = useForm({ defaultValue: initialState, diff --git a/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/fetch_index_patterns.tsx b/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/fetch_index_patterns.tsx index c0997a5e62908..82c9292af7451 100644 --- a/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/fetch_index_patterns.tsx +++ b/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/fetch_index_patterns.tsx @@ -77,7 +77,7 @@ export const useFetchIndexPatterns = ( apolloClient .query({ query: sourceQuery, - fetchPolicy: 'network-only', + fetchPolicy: 'cache-first', variables: { sourceId: 'default', defaultIndex: indices, 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 index c27af94addeab..a2ee1e56306b5 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx @@ -286,6 +286,7 @@ export const TimelineComponent: React.FC = ({ filterQuery={combinedQueries!.filterQuery} sortField={timelineQuerySortField} startDate={start} + queryDeduplication="timeline" > {({ events, diff --git a/x-pack/plugins/security_solution/public/timelines/containers/index.tsx b/x-pack/plugins/security_solution/public/timelines/containers/index.tsx index 510d58dbe6a69..562999108b4b0 100644 --- a/x-pack/plugins/security_solution/public/timelines/containers/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/containers/index.tsx @@ -58,6 +58,7 @@ export interface OwnProps extends QueryTemplateProps { sortField: SortField; fields: string[]; startDate: string; + queryDeduplication: string; } type TimelineQueryProps = OwnProps & PropsFromRedux & WithKibanaProps & CustomReduxProps; @@ -93,6 +94,7 @@ class TimelineQueryComponent extends QueryTemplate< sourceId, sortField, startDate, + queryDeduplication, } = this.props; const defaultKibanaIndex = kibana.services.uiSettings.get(DEFAULT_INDEX_KEY); const defaultIndex = @@ -102,7 +104,11 @@ class TimelineQueryComponent extends QueryTemplate< ...(['all', 'alert', 'signal'].includes(eventType) ? indexToAdd : []), ] : indexPattern?.title.split(',') ?? []; - const variables: GetTimelineQuery.Variables = { + // Fun fact: When using this hook multiple times within a component (e.g. add_exception_modal & edit_exception_modal), + // the apolloClient will perform queryDeduplication and prevent the first query from executing. A deep compare is not + // performed on `indices`, so another field must be passed to circumvent this. + // For details, see https://github.com/apollographql/react-apollo/issues/2202 + const variables: GetTimelineQuery.Variables & { queryDeduplication: string } = { fieldRequested: fields, filterQuery: createFilter(filterQuery), sourceId, @@ -116,6 +122,7 @@ class TimelineQueryComponent extends QueryTemplate< defaultIndex, docValueFields: docValueFields ?? [], inspect: isInspected, + queryDeduplication, }; return (