[Security Solution] Refactor GlobalTime to useGlobalTime hook and cle… (

elastic#69345)
patrykkopycinski · Jul 6, 2020 · 1cb5cef · 1cb5cef
1 parent d81687d
commit 1cb5cef
Show file tree

Hide file tree

Showing 45 changed files with 574 additions and 728 deletions.
diff --git a/x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.tsx b/x-pack/plugins/security_solution/public/alerts/components/alerts_histogram_panel/index.tsx
@@ -11,6 +11,7 @@ import styled from 'styled-components';
 import { isEmpty } from 'lodash/fp';
 import uuid from 'uuid';
 
+import { GlobalTimeArgs } from '../../../common/containers/use_global_time';
 import { DEFAULT_NUMBER_FORMAT, APP_ID } from '../../../../common/constants';
 import { UpdateDateRange } from '../../../common/components/charts/common';
 import { LegendItem } from '../../../common/components/charts/draggable_legend_item';
@@ -28,7 +29,7 @@ import { alertsHistogramOptions } from './config';
 import { formatAlertsData, getAlertsHistogramQuery, showInitialLoadingSpinner } from './helpers';
 import { AlertsHistogram } from './alerts_histogram';
 import * as i18n from './translations';
-import { RegisterQuery, AlertsHistogramOption, AlertsAggregation, AlertsTotal } from './types';
+import { AlertsHistogramOption, AlertsAggregation, AlertsTotal } from './types';
 import { LinkButton } from '../../../common/components/links';
 import { SecurityPageName } from '../../../app/types';
 
@@ -52,26 +53,23 @@ const ViewAlertsFlexItem = styled(EuiFlexItem)`
  margin-left: 24px;
 `;
 
-interface AlertsHistogramPanelProps {
+interface AlertsHistogramPanelProps
+ extends Pick<GlobalTimeArgs, 'from' | 'to' | 'setQuery' | 'deleteQuery'> {
  chartHeight?: number;
  defaultStackByOption?: AlertsHistogramOption;
- deleteQuery?: ({ id }: { id: string }) => void;
  filters?: Filter[];
- from: number;
  headerChildren?: React.ReactNode;
  /** Override all defaults, and only display this field */
  onlyField?: string;
  query?: Query;
  legendPosition?: Position;
  panelHeight?: number;
  signalIndexName: string | null;
- setQuery: (params: RegisterQuery) => void;
  showLinkToAlerts?: boolean;
  showTotalAlertsCount?: boolean;
  stackByOptions?: AlertsHistogramOption[];
  timelineId?: string;
  title?: string;
- to: number;
  updateDateRange: UpdateDateRange;
 }
 

diff --git a/...plugins/security_solution/public/alerts/components/detection_engine_header_page/index.tsx b/...plugins/security_solution/public/alerts/components/detection_engine_header_page/index.tsx
@@ -22,3 +22,5 @@ DetectionEngineHeaderPageComponent.defaultProps = {
 };
 
 export const DetectionEngineHeaderPage = React.memo(DetectionEngineHeaderPageComponent);
+
+DetectionEngineHeaderPage.displayName = 'DetectionEngineHeaderPage';
diff --git a/.../plugins/security_solution/public/alerts/pages/detection_engine/detection_engine.test.tsx b/.../plugins/security_solution/public/alerts/pages/detection_engine/detection_engine.test.tsx
@@ -17,6 +17,11 @@ import { useWithSource } from '../../../common/containers/source';
 jest.mock('../../components/user_info');
 jest.mock('../../../common/containers/source');
 jest.mock('../../../common/components/link_to');
+jest.mock('../../../common/containers/use_global_time', () => ({
+ useGlobalTime: jest
+ .fn()
+ .mockReturnValue({ from: 0, isInitializing: false, to: 0, setQuery: jest.fn() }),
+}));
 jest.mock('react-router-dom', () => {
  const originalModule = jest.requireActual('react-router-dom');
 

diff --git a/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/detection_engine.tsx b/x-pack/plugins/security_solution/public/alerts/pages/detection_engine/detection_engine.tsx
@@ -12,7 +12,7 @@ import { connect, ConnectedProps } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { SecurityPageName } from '../../../app/types';
 import { TimelineId } from '../../../../common/types/timeline';
-import { GlobalTime } from '../../../common/containers/global_time';
+import { useGlobalTime } from '../../../common/containers/use_global_time';
 import { useWithSource } from '../../../common/containers/source';
 import { UpdateDateRange } from '../../../common/components/charts/common';
 import { FiltersGlobal } from '../../../common/components/filters_global';
@@ -44,6 +44,7 @@ export const DetectionEnginePageComponent: React.FC<PropsFromRedux> = ({
  query,
  setAbsoluteRangeDatePicker,
 }) => {
+ const { to, from, deleteQuery, setQuery } = useGlobalTime();
  const {
  loading,
  isSignalIndexExists,
@@ -131,36 +132,28 @@ export const DetectionEnginePageComponent: React.FC<PropsFromRedux> = ({
  </LinkButton>
  </DetectionEngineHeaderPage>
 
- <GlobalTime>
- {({ to, from, deleteQuery, setQuery }) => (
- <>
- <>
- <AlertsHistogramPanel
- deleteQuery={deleteQuery}
- filters={filters}
- from={from}
- query={query}
- setQuery={setQuery}
- showTotalAlertsCount={true}
- signalIndexName={signalIndexName}
- stackByOptions={alertsHistogramOptions}
- to={to}
- updateDateRange={updateDateRangeCallback}
- />
- <EuiSpacer size="l" />
- <AlertsTable
- timelineId={TimelineId.alertsPage}
- loading={loading}
- hasIndexWrite={hasIndexWrite ?? false}
- canUserCRUD={(canUserCRUD ?? false) && (hasEncryptionKey ?? false)}
- from={from}
- signalsIndex={signalIndexName ?? ''}
- to={to}
- />
- </>
- </>
- )}
- </GlobalTime>
+ <AlertsHistogramPanel
+ deleteQuery={deleteQuery}
+ filters={filters}
+ from={from}
+ query={query}
+ setQuery={setQuery}
+ showTotalAlertsCount={true}
+ signalIndexName={signalIndexName}
+ stackByOptions={alertsHistogramOptions}
+ to={to}
+ updateDateRange={updateDateRangeCallback}
+ />
+ <EuiSpacer size="l" />
+ <AlertsTable
+ timelineId={TimelineId.alertsPage}
+ loading={loading}
+ hasIndexWrite={hasIndexWrite ?? false}
+ canUserCRUD={(canUserCRUD ?? false) && (hasEncryptionKey ?? false)}
+ from={from}
+ signalsIndex={signalIndexName ?? ''}
+ to={to}
+ />
  </WrapperPage>
  </StickyContainer>
  ) : (

diff --git a/...ugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.test.tsx b/...ugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.test.tsx
@@ -18,6 +18,12 @@ import { useParams } from 'react-router-dom';
 jest.mock('../../../../../common/components/link_to');
 jest.mock('../../../../components/user_info');
 jest.mock('../../../../../common/containers/source');
+jest.mock('../../../../../common/containers/use_global_time', () => ({
+ useGlobalTime: jest
+ .fn()
+ .mockReturnValue({ from: 0, isInitializing: false, to: 0, setQuery: jest.fn() }),
+}));
+
 jest.mock('react-router-dom', () => {
  const originalModule = jest.requireActual('react-router-dom');
 
@@ -50,6 +56,6 @@ describe('RuleDetailsPageComponent', () => {
  }
  );
 
- expect(wrapper.find('GlobalTime')).toHaveLength(1);
+ expect(wrapper.find('DetectionEngineHeaderPage')).toHaveLength(1);
  });
 });