[Security Solution] Fix query fetchPolicy and deduplication (#73199)

elastic · Jul 28, 2020 · 2c6b044 · 2c6b044
1 parent 3c6202f
commit 2c6b044
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 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
@@ -222,6 +222,7 @@ const EventsViewerComponent: React.FC<Props> = ({
             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
@@ -69,7 +69,10 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
 }) => {
   const [
     { docValueFields, browserFields, indexPatterns, isLoading: isLoadingIndexPattern },
-  ] = useFetchIndexPatterns(defaultIndices ?? useUiSetting<string[]>(DEFAULT_INDEX_KEY));
+  ] = useFetchIndexPatterns(
+    defaultIndices ?? useUiSetting<string[]>(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
@@ -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
@@ -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$<string[]>(DEFAULT_INDEX_KEY);
   const defaultIndex = useMemo<string[]>(() => {
@@ -154,12 +159,16 @@ export const useWithSource = (
       setState((prevState) => ({ ...prevState, loading: true }));
 
       try {
-        const result = await apolloClient.query<SourceQuery.Query, SourceQuery.Variables>({
+        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
@@ -116,8 +116,9 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
   const [addExceptionModalState, setAddExceptionModalState] = useState<AddExceptionModalBaseProps>(
     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<AlertsTableComponentProps> = ({
     closeAddExceptionModal,
   ]);
 
-  if (loading || isEmpty(signalsIndex)) {
+  if (loading || indexPatternsLoading || isEmpty(signalsIndex)) {
     return (
       <EuiPanel>
         <HeaderSection title="" />

diff --git a/...ck/plugins/security_solution/public/detections/components/rules/step_about_rule/index.tsx b/...ck/plugins/security_solution/public/detections/components/rules/step_about_rule/index.tsx
@@ -74,7 +74,8 @@ const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
   const initialState = defaultValues ?? stepAboutDefaultValue;
   const [myStepData, setMyStepData] = useState<AboutStepRule>(initialState);
   const [{ isLoading: indexPatternLoading, indexPatterns }] = useFetchIndexPatterns(
-    defineRuleData?.index ?? []
+    defineRuleData?.index ?? [],
+    'step_about_rule'
   );
   const canUseExceptions =
     defineRuleData?.ruleType &&

diff --git a/...k/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx b/...k/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx
@@ -117,7 +117,7 @@ const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
   const [myStepData, setMyStepData] = useState<DefineStepRule>(initialState);
   const [
     { browserFields, indexPatterns: indexPatternQueryBar, isLoading: indexPatternLoadingQueryBar },
-  ] = useFetchIndexPatterns(myStepData.index);
+  ] = useFetchIndexPatterns(myStepData.index, 'step_define_rule');
 
   const { form } = useForm({
     defaultValue: initialState,

diff --git a/...ity_solution/public/detections/containers/detection_engine/rules/fetch_index_patterns.tsx b/...ity_solution/public/detections/containers/detection_engine/rules/fetch_index_patterns.tsx
@@ -77,7 +77,7 @@ export const useFetchIndexPatterns = (
         apolloClient
           .query<SourceQuery.Query, SourceQuery.Variables>({
             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
@@ -286,6 +286,7 @@ export const TimelineComponent: React.FC<Props> = ({
           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
@@ -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<string[]>(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 (