refactor

Author: kelvtanv

x-pack/solutions/security/plugins/security_solution/public/flyout_v2/shared/components/flyout_provider.tsx

@@ -5,25 +5,45 @@
  * 2.0.
  */
 
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
+import type { FC, ReactElement, ReactNode } from 'react';
+import React, { useEffect } from 'react';
 import type { History } from 'history';
 import { Router } from '@kbn/shared-ux-router';
 import type { Store } from 'redux';
-import { Provider } from 'react-redux';
+import { Provider, useStore } from 'react-redux';
 import { CellActionsProvider } from '@kbn/cell-actions';
 import { ExpandableFlyoutProvider } from '@kbn/expandable-flyout';
 import { NavigationProvider } from '@kbn/security-solution-navigation';
 import { EntityStoreEuidApiProvider } from '@kbn/entity-store/public';
 import type { StartServices } from '../../../types';
 import { ReactQueryClientProvider } from '../../../common/containers/query_client/query_client_provider';
-import { KibanaContextProvider } from '../../../common/lib/kibana';
+import { KibanaContextProvider, useKibana } from '../../../common/lib/kibana';
 import { UserPrivilegesProvider } from '../../../common/components/user_privileges/user_privileges_context';
 import { UpsellingProvider } from '../../../common/components/upselling_provider';
 import { DiscoverInTimelineContextProvider } from '../../../common/components/discover_in_timeline/provider';
 import { AssistantProvider } from '../../../assistant/provider';
 import { CaseProvider } from '../../../cases/components/provider/provider';
 import { MlCapabilitiesProvider } from '../../../common/components/ml/permissions/ml_capabilities_provider';
+import { setAbsoluteRangeDatePicker } from '../../../common/store/inputs/actions';
+import { InputsModelId } from '../../../common/store/inputs/constants';
+
+/**
+ * Syncs Kibana's global time filter to the Security Solution Redux store on mount.
+ * This ensures flyouts opened from outside Security Solution (e.g., Discover) use
+ * the correct time range for alert queries.
+ */
+const TimeRangeSync: FC<{ children: ReactNode }> = ({ children }) => {
+  const { services } = useKibana();
+  const store = useStore();
+
+  useEffect(() => {
+    const tf = services.data.query.timefilter.timefilter;
+    const { from, to } = tf.getAbsoluteTime();
+    store.dispatch(setAbsoluteRangeDatePicker({ id: InputsModelId.global, from, to }));
+  }, [services, store]);
+
+  return <>{children}</>;
+};
 
 export const flyoutProviders = ({
   services,
@@ -40,10 +60,14 @@ export const flyoutProviders = ({
   // TODO remove ExpandableFlyoutProvider when we're ready to drop the expandable flyout
   const flyoutContent = history ? (
     <Router history={history}>
-      <ExpandableFlyoutProvider>{children}</ExpandableFlyoutProvider>
+      <ExpandableFlyoutProvider>
+        <TimeRangeSync>{children}</TimeRangeSync>
+      </ExpandableFlyoutProvider>
     </Router>
   ) : (
-    <ExpandableFlyoutProvider>{children}</ExpandableFlyoutProvider>
+    <ExpandableFlyoutProvider>
+      <TimeRangeSync>{children}</TimeRangeSync>
+    </ExpandableFlyoutProvider>
   );
 
   return (

x-pack/solutions/security/plugins/security_solution/public/flyout_v2/shared/components/open_flyout_link.tsx

@@ -21,8 +21,6 @@ import { useIsInSecurityApp } from '../../../common/hooks/is_in_security_app';
 import { documentFlyoutHistoryKey } from '../constants/flyout_history';
 import { OPEN_FLYOUT_LINK_TEST_ID } from './test_ids';
 import { buildFlyoutContent } from '../utils/build_flyout_content';
-import { setAbsoluteRangeDatePicker } from '../../../common/store/inputs/actions';
-import { InputsModelId } from '../../../common/store/inputs/constants';
 
 export interface OpenFlyoutLinkProps {
   /**
@@ -74,10 +72,6 @@ export const OpenFlyoutLink: FC<OpenFlyoutLinkProps> = ({
 
   const onClick = useCallback(() => {
     if (flyoutContent) {
-      const tf = services.data.query.timefilter.timefilter;
-      const { from, to } = tf.getAbsoluteTime();
-      store.dispatch(setAbsoluteRangeDatePicker({ id: InputsModelId.global, from, to }));
-
       const baseFlyoutProperties = asParent
         ? defaultToolsFlyoutProperties
         : defaultDocumentFlyoutProperties;

x-pack/solutions/security/plugins/security_solution/public/one_discover/cell_renderers/host_cell_renderer.tsx

@@ -18,8 +18,6 @@ import { Host } from '../../flyout_v2/entity/host/main';
 import type { StartServices } from '../../types';
 import type { SecurityAppStore } from '../../common/store/types';
 import { useIsInSecurityApp } from '../../common/hooks/is_in_security_app';
-import { setAbsoluteRangeDatePicker } from '../../common/store/inputs/actions';
-import { InputsModelId } from '../../common/store/inputs/constants';
 
 export const HOST_CELL_RENDERER_FIELDS = new Set(['host.name', 'host.hostname']);
 
@@ -61,12 +59,6 @@ export const HostCellRenderer = React.memo<HostCellRendererProps>(
 
         if (!hostName && !entityId) return;
 
-        // Sync Kibana's current time range to the Security Solution Redux store so that
-        // alert queries inside the flyout use the same window Discover is showing.
-        const tf = services.data.query.timefilter.timefilter;
-        const { from, to } = tf.getAbsoluteTime();
-        store.dispatch(setAbsoluteRangeDatePicker({ id: InputsModelId.global, from, to }));
-
         overlays.openSystemFlyout(
           flyoutProviders({
             services,