From 48895102a92914bb3be15594b417a54e054e90c5 Mon Sep 17 00:00:00 2001 From: patrykkopycinski Date: Tue, 7 Jan 2020 18:05:04 +0100 Subject: [PATCH] [SIEM] Add react/display-name eslint rule (#53107) --- .eslintrc.js | 1 + .../plugins/siem/public/apps/start_app.tsx | 103 ++++-- .../components/alerts_viewer/alerts_table.tsx | 58 ++- .../components/event_details/columns.tsx | 2 + .../fields_browser/category_columns.tsx | 2 + .../fields_browser/field_browser.tsx | 256 ++++++------- .../components/fields_browser/field_items.tsx | 2 + .../siem/public/components/markdown/index.tsx | 2 + .../matrix_histogram/index.test.tsx | 2 + .../get_anomalies_host_table_columns.tsx | 2 + .../get_anomalies_network_table_columns.tsx | 2 + .../ml_popover/jobs_table/jobs_table.tsx | 2 + .../siem/public/components/notes/columns.tsx | 2 + .../timelines_table/actions_columns.tsx | 2 + .../timelines_table/common_columns.tsx | 2 + .../timelines_table/extended_columns.tsx | 2 + .../timelines_table/icon_header_columns.tsx | 2 + .../hosts/authentications_table/index.tsx | 2 + .../hosts/uncommon_process_table/index.tsx | 2 + .../page/network/kpi_network/index.tsx | 2 + .../network/network_http_table/columns.tsx | 2 + .../page/network/tls_table/columns.tsx | 2 + .../components/stat_items/index.test.tsx | 2 + .../timeline/body/events/stateful_event.tsx | 338 +++++++++--------- .../renderers/auditd/generic_row_renderer.tsx | 2 + .../body/renderers/empty_column_renderer.tsx | 2 + .../netflow/netflow_row_renderer.tsx | 2 + .../body/renderers/plain_row_renderer.tsx | 2 + .../suricata/suricata_row_renderer.tsx | 2 + .../renderers/system/generic_row_renderer.tsx | 2 + .../body/renderers/zeek/zeek_row_renderer.tsx | 2 + .../components/timeline/refetch_timeline.tsx | 27 +- .../components/timeline/timeline_context.tsx | 51 +-- .../public/components/url_state/index.tsx | 30 +- .../public/containers/global_time/index.tsx | 57 +-- .../public/containers/timeline/all/index.tsx | 64 ++-- .../containers/timeline/details/index.tsx | 66 ++-- .../plugins/siem/public/mock/kibana_react.ts | 2 + .../siem/public/mock/test_providers.tsx | 47 +-- .../components/activity_monitor/columns.tsx | 2 + .../components/signals/default_config.tsx | 2 + .../signals/signals_filter_group/index.tsx | 77 ++-- .../signals/signals_utility_bar/index.tsx | 183 +++++----- .../components/signals_chart/index.tsx | 6 +- .../detection_engine/rules/all/columns.tsx | 2 + .../components/accordion_title/index.tsx | 8 +- .../description_step/filter_label.tsx | 6 +- .../components/description_step/index.tsx | 55 +-- .../rules/components/status_icon/index.tsx | 6 +- .../rules/components/step_panel/index.tsx | 20 +- .../public/pages/timelines/timelines_page.tsx | 7 +- x-pack/legacy/plugins/siem/public/routes.tsx | 6 +- .../public/utils/route/manage_spy_routes.tsx | 8 +- 53 files changed, 837 insertions(+), 703 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 6d399e195a252..e70ce3fd045c4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -762,6 +762,7 @@ module.exports = { // 'prefer-template': 'warn', 'react/boolean-prop-naming': 'error', 'react/button-has-type': 'error', + 'react/display-name': 'error', 'react/forbid-dom-props': 'error', 'react/no-access-state-in-setstate': 'error', // This style will be turned on after most bugs are fixed diff --git a/x-pack/legacy/plugins/siem/public/apps/start_app.tsx b/x-pack/legacy/plugins/siem/public/apps/start_app.tsx index 4461a61f62029..b765c8d6c9b41 100644 --- a/x-pack/legacy/plugins/siem/public/apps/start_app.tsx +++ b/x-pack/legacy/plugins/siem/public/apps/start_app.tsx @@ -4,9 +4,10 @@ * you may not use this file except in compliance with the Elastic License. */ -import { createHashHistory } from 'history'; -import React, { memo, FC } from 'react'; +import { createHashHistory, History } from 'history'; +import React, { memo, useMemo, FC } from 'react'; import { ApolloProvider } from 'react-apollo'; +import { Store } from 'redux'; import { Provider as ReduxStoreProvider } from 'react-redux'; import { ThemeProvider } from 'styled-components'; @@ -23,7 +24,7 @@ import { Storage } from '../../../../../../src/plugins/kibana_utils/public'; import { DEFAULT_DARK_MODE } from '../../common/constants'; import { ErrorToastDispatcher } from '../components/error_toast_dispatcher'; import { compose } from '../lib/compose/kibana_compose'; -import { AppFrontendLibs } from '../lib/lib'; +import { AppFrontendLibs, AppApolloClient } from '../lib/lib'; import { StartCore, StartPlugins } from './plugin'; import { PageRouter } from '../routes'; import { createStore } from '../store/store'; @@ -32,48 +33,70 @@ import { MlCapabilitiesProvider } from '../components/ml/permissions/ml_capabili import { ApolloClientContext } from '../utils/apollo_context'; -const StartApp: FC = memo(libs => { - const history = createHashHistory(); +interface AppPluginRootComponentProps { + apolloClient: AppApolloClient; + history: History; + store: Store; + theme: any; // eslint-disable-line @typescript-eslint/no-explicit-any +} - const libs$ = new BehaviorSubject(libs); +const AppPluginRootComponent: React.FC = ({ + theme, + store, + apolloClient, + history, +}) => ( + + + + + + + + + + + + + + + + + + + +); +const AppPluginRoot = memo(AppPluginRootComponent); + +const StartAppComponent: FC = libs => { + const history = createHashHistory(); + const libs$ = new BehaviorSubject(libs); const store = createStore(undefined, libs$.pipe(pluck('apolloClient'))); + const [darkMode] = useUiSetting$(DEFAULT_DARK_MODE); + const theme = useMemo( + () => ({ + eui: darkMode ? euiDarkVars : euiLightVars, + darkMode, + }), + [darkMode] + ); + + return ( + + ); +}; - const AppPluginRoot = memo(() => { - const [darkMode] = useUiSetting$(DEFAULT_DARK_MODE); - return ( - - - - - - - ({ - eui: darkMode ? euiDarkVars : euiLightVars, - darkMode, - })} - > - - - - - - - - - - - - - ); - }); - return ; -}); +const StartApp = memo(StartAppComponent); export const ROOT_ELEMENT_ID = 'react-siem-root'; -export const SiemApp = memo<{ core: StartCore; plugins: StartPlugins }>(({ core, plugins }) => ( +interface SiemAppComponentProps { + core: StartCore; + plugins: StartPlugins; +} + +const SiemAppComponent: React.FC = ({ core, plugins }) => ( (({ core, > -)); +); + +export const SiemApp = memo(SiemAppComponent); diff --git a/x-pack/legacy/plugins/siem/public/components/alerts_viewer/alerts_table.tsx b/x-pack/legacy/plugins/siem/public/components/alerts_viewer/alerts_table.tsx index 8fa4f3625c34f..179474ee6e9d4 100644 --- a/x-pack/legacy/plugins/siem/public/components/alerts_viewer/alerts_table.tsx +++ b/x-pack/legacy/plugins/siem/public/components/alerts_viewer/alerts_table.tsx @@ -51,33 +51,31 @@ const defaultAlertsFilters: esFilters.Filter[] = [ }, ]; -export const AlertsTable = React.memo( - ({ - endDate, - startDate, - pageFilters = [], - }: { - endDate: number; - startDate: number; - pageFilters?: esFilters.Filter[]; - }) => { - const alertsFilter = useMemo(() => [...defaultAlertsFilters, ...pageFilters], [pageFilters]); - return ( - ({ - documentType: i18n.ALERTS_DOCUMENT_TYPE, - footerText: i18n.TOTAL_COUNT_OF_ALERTS, - title: i18n.ALERTS_TABLE_TITLE, - }), - [] - )} - /> - ); - } -); +interface Props { + endDate: number; + startDate: number; + pageFilters?: esFilters.Filter[]; +} + +const AlertsTableComponent: React.FC = ({ endDate, startDate, pageFilters = [] }) => { + const alertsFilter = useMemo(() => [...defaultAlertsFilters, ...pageFilters], [pageFilters]); + return ( + ({ + documentType: i18n.ALERTS_DOCUMENT_TYPE, + footerText: i18n.TOTAL_COUNT_OF_ALERTS, + title: i18n.ALERTS_TABLE_TITLE, + }), + [] + )} + /> + ); +}; + +export const AlertsTable = React.memo(AlertsTableComponent); diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx b/x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx index d835d2c621931..3adfaf5337ac1 100644 --- a/x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx +++ b/x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { EuiCheckbox, EuiFlexGroup, diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/category_columns.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/category_columns.tsx index a4a53a5a51435..0c7dd7e908ce3 100644 --- a/x-pack/legacy/plugins/siem/public/components/fields_browser/category_columns.tsx +++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/category_columns.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { EuiIcon, EuiFlexGroup, diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_browser.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_browser.tsx index c23908c396386..c8a0eb9da688b 100644 --- a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_browser.tsx +++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_browser.tsx @@ -102,138 +102,138 @@ type Props = Pick< * This component has no internal state, but it uses lifecycle methods to * set focus to the search input, scroll to the selected category, etc */ -export const FieldsBrowser = React.memo( - ({ - browserFields, - columnHeaders, - filteredBrowserFields, - isEventViewer, - isSearching, - onCategorySelected, - onFieldSelected, - onHideFieldBrowser, - onSearchInputChange, - onOutsideClick, - onUpdateColumns, - searchInput, - selectedCategoryId, - timelineId, - toggleColumn, - width, - }) => { - /** Focuses the input that filters the field browser */ - const focusInput = () => { - const elements = document.getElementsByClassName( - getFieldBrowserSearchInputClassName(timelineId) - ); +const FieldsBrowserComponent: React.FC = ({ + browserFields, + columnHeaders, + filteredBrowserFields, + isEventViewer, + isSearching, + onCategorySelected, + onFieldSelected, + onHideFieldBrowser, + onSearchInputChange, + onOutsideClick, + onUpdateColumns, + searchInput, + selectedCategoryId, + timelineId, + toggleColumn, + width, +}) => { + /** Focuses the input that filters the field browser */ + const focusInput = () => { + const elements = document.getElementsByClassName( + getFieldBrowserSearchInputClassName(timelineId) + ); - if (elements.length > 0) { - (elements[0] as HTMLElement).focus(); // this cast is required because focus() does not exist on every `Element` returned by `getElementsByClassName` + if (elements.length > 0) { + (elements[0] as HTMLElement).focus(); // this cast is required because focus() does not exist on every `Element` returned by `getElementsByClassName` + } + }; + + /** Invoked when the user types in the input to filter the field browser */ + const onInputChange = useCallback( + (event: React.ChangeEvent) => { + onSearchInputChange(event.target.value); + }, + [onSearchInputChange] + ); + + const selectFieldAndHide = useCallback( + (fieldId: string) => { + if (onFieldSelected != null) { + onFieldSelected(fieldId); } - }; - - /** Invoked when the user types in the input to filter the field browser */ - const onInputChange = useCallback( - (event: React.ChangeEvent) => { - onSearchInputChange(event.target.value); - }, - [onSearchInputChange] - ); - const selectFieldAndHide = useCallback( - (fieldId: string) => { - if (onFieldSelected != null) { - onFieldSelected(fieldId); - } + onHideFieldBrowser(); + }, + [onFieldSelected, onHideFieldBrowser] + ); + + const scrollViews = () => { + if (selectedCategoryId !== '') { + const categoryPaneTitles = document.getElementsByClassName( + getCategoryPaneCategoryClassName({ + categoryId: selectedCategoryId, + timelineId, + }) + ); - onHideFieldBrowser(); - }, - [onFieldSelected, onHideFieldBrowser] - ); + if (categoryPaneTitles.length > 0) { + categoryPaneTitles[0].scrollIntoView(); + } + + const fieldPaneTitles = document.getElementsByClassName( + getFieldBrowserCategoryTitleClassName({ + categoryId: selectedCategoryId, + timelineId, + }) + ); - const scrollViews = () => { - if (selectedCategoryId !== '') { - const categoryPaneTitles = document.getElementsByClassName( - getCategoryPaneCategoryClassName({ - categoryId: selectedCategoryId, - timelineId, - }) - ); - - if (categoryPaneTitles.length > 0) { - categoryPaneTitles[0].scrollIntoView(); - } - - const fieldPaneTitles = document.getElementsByClassName( - getFieldBrowserCategoryTitleClassName({ - categoryId: selectedCategoryId, - timelineId, - }) - ); - - if (fieldPaneTitles.length > 0) { - fieldPaneTitles[0].scrollIntoView(); - } + if (fieldPaneTitles.length > 0) { + fieldPaneTitles[0].scrollIntoView(); } + } + + focusInput(); // always re-focus the input to enable additional filtering + }; + + useEffect(() => { + scrollViews(); + }, [selectedCategoryId, timelineId]); + + return ( + + +
+ + + + + + + + + + + + + ); +}; - focusInput(); // always re-focus the input to enable additional filtering - }; - - useEffect(() => { - scrollViews(); - }, [selectedCategoryId, timelineId]); - - return ( - - -
- - - - - - - - - - - - - ); - } -); +export const FieldsBrowser = React.memo(FieldsBrowserComponent); diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.tsx index dc902b792d601..17553c79b643c 100644 --- a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.tsx +++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { EuiCheckbox, EuiIcon, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { uniqBy } from 'lodash/fp'; import * as React from 'react'; diff --git a/x-pack/legacy/plugins/siem/public/components/markdown/index.tsx b/x-pack/legacy/plugins/siem/public/components/markdown/index.tsx index 16e065ae721c9..0727b6794f48c 100644 --- a/x-pack/legacy/plugins/siem/public/components/markdown/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/markdown/index.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { EuiLink, EuiTableRow, EuiTableRowCell, EuiText, EuiToolTip } from '@elastic/eui'; import * as React from 'react'; import ReactMarkdown from 'react-markdown'; diff --git a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.test.tsx index 87d4e072e4299..fd72fcd7322b0 100644 --- a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.test.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { shallow } from 'enzyme'; import * as React from 'react'; diff --git a/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx b/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx index daac4835adb28..4e6484c23613f 100644 --- a/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx +++ b/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_host_table_columns.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import React from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui'; import { Columns } from '../../paginated_table'; diff --git a/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.tsx b/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.tsx index 2113d3b82f52e..0c823ef75cf26 100644 --- a/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.tsx +++ b/x-pack/legacy/plugins/siem/public/components/ml/tables/get_anomalies_network_table_columns.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import React from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui'; diff --git a/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/jobs_table.tsx b/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/jobs_table.tsx index 73451d574d841..0d243a84aa192 100644 --- a/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/jobs_table.tsx +++ b/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/jobs_table.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import chrome from 'ui/chrome'; import React, { useEffect, useState } from 'react'; diff --git a/x-pack/legacy/plugins/siem/public/components/notes/columns.tsx b/x-pack/legacy/plugins/siem/public/components/notes/columns.tsx index bde23bd7dc308..6f3586db3c007 100644 --- a/x-pack/legacy/plugins/siem/public/components/notes/columns.tsx +++ b/x-pack/legacy/plugins/siem/public/components/notes/columns.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import * as React from 'react'; import { EuiTableDataType } from '@elastic/eui'; diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/actions_columns.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/actions_columns.tsx index 3a8bc83fdc98a..6934e69bd0f7f 100644 --- a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/actions_columns.tsx +++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/actions_columns.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'; import * as React from 'react'; diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/common_columns.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/common_columns.tsx index e4ab42bb37c55..743754842c6a8 100644 --- a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/common_columns.tsx +++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/common_columns.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { EuiButtonIcon, EuiLink } from '@elastic/eui'; import { omit } from 'lodash/fp'; import * as React from 'react'; diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/extended_columns.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/extended_columns.tsx index 63f6b8b674a3d..aa80a2b4e78a1 100644 --- a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/extended_columns.tsx +++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/extended_columns.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import * as React from 'react'; import { defaultToEmptyTag } from '../../empty_value'; diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.tsx index 6d8a792e91b02..7649b1a8ce01c 100644 --- a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.tsx +++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { EuiIcon, EuiToolTip } from '@elastic/eui'; import * as React from 'react'; diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.tsx index ad5755068e662..f5485922647ca 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { has } from 'lodash/fp'; import React, { useCallback } from 'react'; import { connect } from 'react-redux'; diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx index a8b9b2a1f61ce..b4c01053f0e9c 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import React, { useCallback } from 'react'; import { connect } from 'react-redux'; import { ActionCreator } from 'typescript-fsa'; diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.tsx index d59d4ccd60c60..73602fe3400a9 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/network/kpi_network/index.tsx @@ -146,6 +146,8 @@ export const KpiNetworkBaseComponent = React.memo<{ ); }); +KpiNetworkBaseComponent.displayName = 'KpiNetworkBaseComponent'; + export const KpiNetworkComponent = React.memo( ({ data, from, id, loading, to, narrowDateRange }) => { return loading ? ( diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/network_http_table/columns.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/network_http_table/columns.tsx index 6a47a58c85f31..bffc7235b6804 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/network/network_http_table/columns.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/network/network_http_table/columns.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import React from 'react'; import numeral from '@elastic/numeral'; import { NetworkHttpEdges, NetworkHttpFields, NetworkHttpItem } from '../../../../graphql/types'; diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/tls_table/columns.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/tls_table/columns.tsx index aea8ee9e6b9e1..44a538871d951 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/network/tls_table/columns.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/network/tls_table/columns.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import React from 'react'; import moment from 'moment'; import { TlsNode } from '../../../../graphql/types'; diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/stat_items/index.test.tsx index ed3eaa6cf1e91..7dac5ff2e9bb6 100644 --- a/x-pack/legacy/plugins/siem/public/components/stat_items/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/stat_items/index.test.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { mount, ReactWrapper } from 'enzyme'; import toJson from 'enzyme-to-json'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx index baa5c35880d68..b93b0531c740f 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx @@ -9,7 +9,7 @@ import uuid from 'uuid'; import VisibilitySensor from 'react-visibility-sensor'; import { BrowserFields } from '../../../../containers/source'; -import { TimelineDetailsComponentQuery } from '../../../../containers/timeline/details'; +import { TimelineDetailsQuery } from '../../../../containers/timeline/details'; import { TimelineItem, DetailItem, TimelineNonEcsData } from '../../../../graphql/types'; import { requestIdleCallbackViaScheduler } from '../../../../lib/helpers/scheduler'; import { Note } from '../../../../lib/note'; @@ -91,7 +91,7 @@ interface AttributesProps { children: React.ReactNode; } -const Attributes = React.memo(({ children }) => { +const AttributesComponent: React.FC = ({ children }) => { const width = useTimelineWidthContext(); // Passing the styles directly to the component because the width is @@ -106,187 +106,187 @@ const Attributes = React.memo(({ children }) => { {children} ); -}); +}; -export const StatefulEvent = React.memo( - ({ - actionsColumnWidth, - addNoteToEvent, - browserFields, - columnHeaders, - columnRenderers, - event, - eventIdToNoteIds, - getNotesByIds, - isEventViewer = false, - isEventPinned = false, - loadingEventIds, - maxDelay = 0, - onColumnResized, - onPinEvent, - onRowSelected, - onUnPinEvent, - onUpdateColumns, - rowRenderers, - selectedEventIds, - showCheckboxes, - timelineId, - toggleColumn, - updateNote, - }) => { - const [expanded, setExpanded] = useState<{ [eventId: string]: boolean }>({}); - const [initialRender, setInitialRender] = useState(false); - const [showNotes, setShowNotes] = useState<{ [eventId: string]: boolean }>({}); +const Attributes = React.memo(AttributesComponent); - const divElement = useRef(null); +const StatefulEventComponent: React.FC = ({ + actionsColumnWidth, + addNoteToEvent, + browserFields, + columnHeaders, + columnRenderers, + event, + eventIdToNoteIds, + getNotesByIds, + isEventViewer = false, + isEventPinned = false, + loadingEventIds, + maxDelay = 0, + onColumnResized, + onPinEvent, + onRowSelected, + onUnPinEvent, + onUpdateColumns, + rowRenderers, + selectedEventIds, + showCheckboxes, + timelineId, + toggleColumn, + updateNote, +}) => { + const [expanded, setExpanded] = useState<{ [eventId: string]: boolean }>({}); + const [initialRender, setInitialRender] = useState(false); + const [showNotes, setShowNotes] = useState<{ [eventId: string]: boolean }>({}); - const onToggleShowNotes = useCallback(() => { - const eventId = event._id; - setShowNotes({ ...showNotes, [eventId]: !showNotes[eventId] }); - }, [event, showNotes]); + const divElement = useRef(null); - const onToggleExpanded = useCallback(() => { - const eventId = event._id; - setExpanded({ - ...expanded, - [eventId]: !expanded[eventId], - }); - }, [event, expanded]); + const onToggleShowNotes = useCallback(() => { + const eventId = event._id; + setShowNotes({ ...showNotes, [eventId]: !showNotes[eventId] }); + }, [event, showNotes]); - const associateNote = useCallback( - (noteId: string) => { - addNoteToEvent({ eventId: event._id, noteId }); - if (!isEventPinned) { - onPinEvent(event._id); // pin the event, because it has notes - } - }, - [addNoteToEvent, event, isEventPinned, onPinEvent] - ); + const onToggleExpanded = useCallback(() => { + const eventId = event._id; + setExpanded({ + ...expanded, + [eventId]: !expanded[eventId], + }); + }, [event, expanded]); - /** - * Incrementally loads the events when it mounts by trying to - * see if it resides within a window frame and if it is it will - * indicate to React that it should render its self by setting - * its initialRender to true. - */ - useEffect(() => { - let _isMounted = true; + const associateNote = useCallback( + (noteId: string) => { + addNoteToEvent({ eventId: event._id, noteId }); + if (!isEventPinned) { + onPinEvent(event._id); // pin the event, because it has notes + } + }, + [addNoteToEvent, event, isEventPinned, onPinEvent] + ); - requestIdleCallbackViaScheduler( - () => { - if (!initialRender && _isMounted) { - setInitialRender(true); - } - }, - { timeout: maxDelay } - ); - return () => { - _isMounted = false; - }; - }, []); + /** + * Incrementally loads the events when it mounts by trying to + * see if it resides within a window frame and if it is it will + * indicate to React that it should render its self by setting + * its initialRender to true. + */ + useEffect(() => { + let _isMounted = true; - // Number of current columns plus one for actions. - const columnCount = columnHeaders.length + 1; + requestIdleCallbackViaScheduler( + () => { + if (!initialRender && _isMounted) { + setInitialRender(true); + } + }, + { timeout: maxDelay } + ); + return () => { + _isMounted = false; + }; + }, []); - // If we are not ready to render yet, just return null - // see useEffect() for when it schedules the first - // time this stateful component should be rendered. - if (!initialRender) { - return ; - } + // Number of current columns plus one for actions. + const columnCount = columnHeaders.length + 1; - return ( - - {({ isVisible }) => { - if (isVisible) { - return ( - - {({ detailsData, loading }) => ( - { - if (c != null) { - divElement.current = c; - } - }} - > - {getRowRenderer(event.ecs, rowRenderers).renderRow({ - browserFields, - data: event.ecs, - children: ( - - ), - timelineId, - })} + // If we are not ready to render yet, just return null + // see useEffect() for when it schedules the first + // time this stateful component should be rendered. + if (!initialRender) { + return ; + } - - + {({ isVisible }) => { + if (isVisible) { + return ( + + {({ detailsData, loading }) => ( + { + if (c != null) { + divElement.current = c; + } + }} + > + {getRowRenderer(event.ecs, rowRenderers).renderRow({ + browserFields, + data: event.ecs, + children: ( + - - - )} - - ); - } else { - // Height place holder for visibility detection as well as re-rendering sections. - const height = - divElement.current != null - ? `${divElement.current.clientHeight}px` - : DEFAULT_ROW_HEIGHT; + ), + timelineId, + })} - // height is being inlined directly in here because of performance with StyledComponents - // involving quick and constant changes to the DOM. - // https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291 - return ; - } - }} - - ); - } -); + + + + + )} + + ); + } else { + // Height place holder for visibility detection as well as re-rendering sections. + const height = + divElement.current != null + ? `${divElement.current.clientHeight}px` + : DEFAULT_ROW_HEIGHT; + + // height is being inlined directly in here because of performance with StyledComponents + // involving quick and constant changes to the DOM. + // https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291 + return ; + } + }} + + ); +}; -StatefulEvent.displayName = 'StatefulEvent'; +export const StatefulEvent = React.memo(StatefulEventComponent); diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_row_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_row_renderer.tsx index 71d56d641037d..bcf464ab6da15 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_row_renderer.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_row_renderer.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { IconType } from '@elastic/eui'; import { get } from 'lodash/fp'; import React from 'react'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx index 67554cc764486..8e046342abd42 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/empty_column_renderer.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import * as React from 'react'; import { TimelineNonEcsData } from '../../../../graphql/types'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx index 3ae154a14aaf5..754d6ad99b7fe 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow/netflow_row_renderer.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { get } from 'lodash/fp'; import React from 'react'; import styled from 'styled-components'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_row_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_row_renderer.tsx index 1eed05e6d2a7e..6725830c97d0a 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_row_renderer.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/plain_row_renderer.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import React from 'react'; import { RowRenderer } from './row_renderer'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_row_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_row_renderer.tsx index 0bafe54b715fd..b227326551e01 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_row_renderer.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_row_renderer.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { get } from 'lodash/fp'; import React from 'react'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_row_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_row_renderer.tsx index f8930fdca7ba2..3e64248d39876 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_row_renderer.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_row_renderer.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { get } from 'lodash/fp'; import React from 'react'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_row_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_row_renderer.tsx index 83d1c4347f57c..fc528e33b5ab6 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_row_renderer.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_row_renderer.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { get } from 'lodash/fp'; import React from 'react'; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/refetch_timeline.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/refetch_timeline.tsx index 8a78d04c88311..c804ccf658296 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/refetch_timeline.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/refetch_timeline.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { memo, useEffect } from 'react'; +import React, { useEffect } from 'react'; import { connect } from 'react-redux'; import { compose } from 'redux'; import { ActionCreator } from 'typescript-fsa'; @@ -33,18 +33,23 @@ export interface TimelineRefetchProps { type OwnProps = TimelineRefetchProps & TimelineRefetchDispatch; -const TimelineRefetchComponent = memo( - ({ id, inputId, inspect, loading, refetch, setTimelineQuery }) => { - useEffect(() => { - setTimelineQuery({ id, inputId, inspect, loading, refetch }); - }, [id, inputId, loading, refetch, inspect]); - - return null; - } -); +const TimelineRefetchComponent: React.FC = ({ + id, + inputId, + inspect, + loading, + refetch, + setTimelineQuery, +}) => { + useEffect(() => { + setTimelineQuery({ id, inputId, inspect, loading, refetch }); + }, [id, inputId, loading, refetch, inspect]); + + return null; +}; export const TimelineRefetch = compose>( connect(null, { setTimelineQuery: inputsActions.setQuery, }) -)(TimelineRefetchComponent); +)(React.memo(TimelineRefetchComponent)); diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/timeline_context.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/timeline_context.tsx index d3251e1d331e3..611452cc7ccd1 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/timeline_context.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/timeline_context.tsx @@ -45,30 +45,35 @@ interface ManageTimelineContextProps { // todo we need to refactor this as more complex context/reducer with useReducer // to avoid so many Context, at least the separation of code is there now -export const ManageTimelineContext = memo( - ({ children, loading, width, type = initTimelineType }) => { - const [myLoading, setLoading] = useState(initTimelineContext); - const [myWidth, setWidth] = useState(initTimelineWidth); - const [myType, setType] = useState(initTimelineType); +const ManageTimelineContextComponent: React.FC = ({ + children, + loading, + width, + type = initTimelineType, +}) => { + const [myLoading, setLoading] = useState(initTimelineContext); + const [myWidth, setWidth] = useState(initTimelineWidth); + const [myType, setType] = useState(initTimelineType); - useEffect(() => { - setLoading(loading); - }, [loading]); + useEffect(() => { + setLoading(loading); + }, [loading]); - useEffect(() => { - setType(type); - }, [type]); + useEffect(() => { + setType(type); + }, [type]); - useEffect(() => { - setWidth(width); - }, [width]); + useEffect(() => { + setWidth(width); + }, [width]); - return ( - - - {children} - - - ); - } -); + return ( + + + {children} + + + ); +}; + +export const ManageTimelineContext = memo(ManageTimelineContextComponent); diff --git a/x-pack/legacy/plugins/siem/public/components/url_state/index.tsx b/x-pack/legacy/plugins/siem/public/components/url_state/index.tsx index a7e7729de2e27..e656ec3496d8d 100644 --- a/x-pack/legacy/plugins/siem/public/components/url_state/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/url_state/index.tsx @@ -19,16 +19,12 @@ import { dispatchUpdateTimeline } from '../open_timeline/helpers'; import { dispatchSetInitialStateFromUrl } from './initialize_redux_by_url'; import { makeMapStateToProps } from './helpers'; -export const UrlStateContainer = React.memo( - (props: UrlStateContainerPropTypes) => { - useUrlStateHooks(props); - return null; - }, - (prevProps, nextProps) => - prevProps.pathName === nextProps.pathName && isEqual(prevProps.urlState, nextProps.urlState) -); - -UrlStateContainer.displayName = 'UrlStateContainer'; +export const UrlStateContainer: React.FC = ( + props: UrlStateContainerPropTypes +) => { + useUrlStateHooks(props); + return null; +}; const mapDispatchToProps = (dispatch: Dispatch) => ({ setInitialStateFromUrl: dispatchSetInitialStateFromUrl(dispatch), @@ -39,13 +35,21 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({ export const UrlStateRedux = compose>( connect(makeMapStateToProps, mapDispatchToProps) -)(UrlStateContainer); +)( + React.memo( + UrlStateContainer, + (prevProps, nextProps) => + prevProps.pathName === nextProps.pathName && isEqual(prevProps.urlState, nextProps.urlState) + ) +); -export const UseUrlState = React.memo(props => { +const UseUrlStateComponent: React.FC = props => { const [routeProps] = useRouteSpy(); const urlStateReduxProps: RouteSpyState & UrlStateProps = { ...routeProps, ...props, }; return ; -}); +}; + +export const UseUrlState = React.memo(UseUrlStateComponent); diff --git a/x-pack/legacy/plugins/siem/public/containers/global_time/index.tsx b/x-pack/legacy/plugins/siem/public/containers/global_time/index.tsx index 665148b7ad650..d77e0215f8353 100644 --- a/x-pack/legacy/plugins/siem/public/containers/global_time/index.tsx +++ b/x-pack/legacy/plugins/siem/public/containers/global_time/index.tsx @@ -47,33 +47,38 @@ interface OwnProps { type GlobalTimeProps = OwnProps & GlobalTimeReduxState & GlobalTimeDispatch; -export const GlobalTimeComponent = React.memo( - ({ children, deleteAllQuery, deleteOneQuery, from, to, setGlobalQuery }: GlobalTimeProps) => { - const [isInitializing, setIsInitializing] = useState(true); +export const GlobalTimeComponent: React.FC = ({ + children, + deleteAllQuery, + deleteOneQuery, + from, + to, + setGlobalQuery, +}) => { + const [isInitializing, setIsInitializing] = useState(true); - useEffect(() => { - if (isInitializing) { - setIsInitializing(false); - } - return () => { - deleteAllQuery({ id: 'global' }); - }; - }, []); + useEffect(() => { + if (isInitializing) { + setIsInitializing(false); + } + return () => { + deleteAllQuery({ id: 'global' }); + }; + }, []); - return ( - <> - {children({ - isInitializing, - from, - to, - setQuery: ({ id, inspect, loading, refetch }: SetQuery) => - setGlobalQuery({ inputId: 'global', id, inspect, loading, refetch }), - deleteQuery: ({ id }: { id: string }) => deleteOneQuery({ inputId: 'global', id }), - })} - - ); - } -); + return ( + <> + {children({ + isInitializing, + from, + to, + setQuery: ({ id, inspect, loading, refetch }: SetQuery) => + setGlobalQuery({ inputId: 'global', id, inspect, loading, refetch }), + deleteQuery: ({ id }: { id: string }) => deleteOneQuery({ inputId: 'global', id }), + })} + + ); +}; const mapStateToProps = (state: State) => { const timerange: inputsModel.TimeRange = inputsSelectors.globalTimeRangeSelector(state); @@ -87,4 +92,4 @@ export const GlobalTime = connect(mapStateToProps, { deleteAllQuery: inputsActions.deleteAllQuery, deleteOneQuery: inputsActions.deleteOneQuery, setGlobalQuery: inputsActions.setQuery, -})(GlobalTimeComponent); +})(React.memo(GlobalTimeComponent)); diff --git a/x-pack/legacy/plugins/siem/public/containers/timeline/all/index.tsx b/x-pack/legacy/plugins/siem/public/containers/timeline/all/index.tsx index 5ff28480f1b3f..22c7b03f34dd5 100644 --- a/x-pack/legacy/plugins/siem/public/containers/timeline/all/index.tsx +++ b/x-pack/legacy/plugins/siem/public/containers/timeline/all/index.tsx @@ -71,32 +71,38 @@ const getAllTimeline = memoizeOne( })) ); -export const AllTimelinesQuery = React.memo( - ({ children, onlyUserFavorite, pageInfo, search, sort }) => { - const variables: GetAllTimeline.Variables = { - onlyUserFavorite, - pageInfo, - search, - sort, - }; - return ( - - query={allTimelinesQuery} - fetchPolicy="network-only" - notifyOnNetworkStatusChange - variables={variables} - > - {({ data, loading }) => { - return children!({ - loading, - totalCount: getOr(0, 'getAllTimeline.totalCount', data), - timelines: getAllTimeline( - JSON.stringify(variables), - getOr([], 'getAllTimeline.timeline', data) - ), - }); - }} - - ); - } -); +const AllTimelinesQueryComponent: React.FC = ({ + children, + onlyUserFavorite, + pageInfo, + search, + sort, +}) => { + const variables: GetAllTimeline.Variables = { + onlyUserFavorite, + pageInfo, + search, + sort, + }; + return ( + + query={allTimelinesQuery} + fetchPolicy="network-only" + notifyOnNetworkStatusChange + variables={variables} + > + {({ data, loading }) => + children!({ + loading, + totalCount: getOr(0, 'getAllTimeline.totalCount', data), + timelines: getAllTimeline( + JSON.stringify(variables), + getOr([], 'getAllTimeline.timeline', data) + ), + }) + } + + ); +}; + +export const AllTimelinesQuery = React.memo(AllTimelinesQueryComponent); diff --git a/x-pack/legacy/plugins/siem/public/containers/timeline/details/index.tsx b/x-pack/legacy/plugins/siem/public/containers/timeline/details/index.tsx index 721cfefe01780..cf1b8954307e7 100644 --- a/x-pack/legacy/plugins/siem/public/containers/timeline/details/index.tsx +++ b/x-pack/legacy/plugins/siem/public/containers/timeline/details/index.tsx @@ -32,33 +32,39 @@ const getDetailsEvent = memoizeOne( (variables: string, detail: DetailItem[]): DetailItem[] => detail ); -export const TimelineDetailsComponentQuery = React.memo( - ({ children, indexName, eventId, executeQuery, sourceId }) => { - const variables: GetTimelineDetailsQuery.Variables = { - sourceId, - indexName, - eventId, - defaultIndex: useUiSetting(DEFAULT_INDEX_KEY), - }; - return executeQuery ? ( - - query={timelineDetailsQuery} - fetchPolicy="network-only" - notifyOnNetworkStatusChange - variables={variables} - > - {({ data, loading, refetch }) => { - return children!({ - loading, - detailsData: getDetailsEvent( - JSON.stringify(variables), - getOr([], 'source.TimelineDetails.data', data) - ), - }); - }} - - ) : ( - children!({ loading: false, detailsData: null }) - ); - } -); +const TimelineDetailsQueryComponent: React.FC = ({ + children, + indexName, + eventId, + executeQuery, + sourceId, +}) => { + const variables: GetTimelineDetailsQuery.Variables = { + sourceId, + indexName, + eventId, + defaultIndex: useUiSetting(DEFAULT_INDEX_KEY), + }; + return executeQuery ? ( + + query={timelineDetailsQuery} + fetchPolicy="network-only" + notifyOnNetworkStatusChange + variables={variables} + > + {({ data, loading, refetch }) => + children!({ + loading, + detailsData: getDetailsEvent( + JSON.stringify(variables), + getOr([], 'source.TimelineDetails.data', data) + ), + }) + } + + ) : ( + children!({ loading: false, detailsData: null }) + ); +}; + +export const TimelineDetailsQuery = React.memo(TimelineDetailsQueryComponent); diff --git a/x-pack/legacy/plugins/siem/public/mock/kibana_react.ts b/x-pack/legacy/plugins/siem/public/mock/kibana_react.ts index 15944df1822b3..a6b4fe664efba 100644 --- a/x-pack/legacy/plugins/siem/public/mock/kibana_react.ts +++ b/x-pack/legacy/plugins/siem/public/mock/kibana_react.ts @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import React from 'react'; import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public'; diff --git a/x-pack/legacy/plugins/siem/public/mock/test_providers.tsx b/x-pack/legacy/plugins/siem/public/mock/test_providers.tsx index 6c0a85e3ef778..f0f719a60a708 100644 --- a/x-pack/legacy/plugins/siem/public/mock/test_providers.tsx +++ b/x-pack/legacy/plugins/siem/public/mock/test_providers.tsx @@ -61,26 +61,33 @@ Object.defineProperty(window, 'localStorage', { const MockKibanaContextProvider = createKibanaContextProviderMock(); /** A utility for wrapping children in the providers required to run most tests */ -export const TestProviders = React.memo( - ({ children, store = createStore(state, apolloClientObservable), onDragEnd = jest.fn() }) => ( - - - - - ({ eui: euiDarkVars, darkMode: true })}> - {children} - - - - - - ) +const TestProvidersComponent: React.FC = ({ + children, + store = createStore(state, apolloClientObservable), + onDragEnd = jest.fn(), +}) => ( + + + + + ({ eui: euiDarkVars, darkMode: true })}> + {children} + + + + + ); -export const TestProviderWithoutDragAndDrop = React.memo( - ({ children, store = createStore(state, apolloClientObservable) }) => ( - - {children} - - ) +export const TestProviders = React.memo(TestProvidersComponent); + +const TestProviderWithoutDragAndDropComponent: React.FC = ({ + children, + store = createStore(state, apolloClientObservable), +}) => ( + + {children} + ); + +export const TestProviderWithoutDragAndDrop = React.memo(TestProviderWithoutDragAndDropComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/columns.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/columns.tsx index 9b9ee2cbdd113..6256d5b869925 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/columns.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/activity_monitor/columns.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { EuiBasicTableColumn, EuiIconTip, EuiLink, EuiTextColor } from '@elastic/eui'; import { DefaultItemIconButtonAction } from '@elastic/eui/src/components/basic_table/action_types'; import React from 'react'; diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/default_config.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/default_config.tsx index ea9a3ccef05b4..6b8cd5521c533 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/default_config.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/default_config.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'; import React from 'react'; diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/signals_filter_group/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/signals_filter_group/index.tsx index 2a47cb5f1b055..3c1317d463f8e 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/signals_filter_group/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/signals_filter_group/index.tsx @@ -3,6 +3,7 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ + import { EuiFilterButton, EuiFilterGroup } from '@elastic/eui'; import React, { useCallback, useState } from 'react'; import * as i18n from '../translations'; @@ -11,41 +12,41 @@ export const FILTER_OPEN = 'open'; export const FILTER_CLOSED = 'closed'; export type SignalFilterOption = typeof FILTER_OPEN | typeof FILTER_CLOSED; -export const SignalsTableFilterGroup = React.memo( - ({ - onFilterGroupChanged, - }: { - onFilterGroupChanged: (filterGroup: SignalFilterOption) => void; - }) => { - const [filterGroup, setFilterGroup] = useState(FILTER_OPEN); - - const onClickOpenFilterCallback = useCallback(() => { - setFilterGroup(FILTER_OPEN); - onFilterGroupChanged(FILTER_OPEN); - }, [setFilterGroup, onFilterGroupChanged]); - - const onClickCloseFilterCallback = useCallback(() => { - setFilterGroup(FILTER_CLOSED); - onFilterGroupChanged(FILTER_CLOSED); - }, [setFilterGroup, onFilterGroupChanged]); - - return ( - - - {i18n.OPEN_SIGNALS} - - - - {i18n.CLOSED_SIGNALS} - - - ); - } -); +interface Props { + onFilterGroupChanged: (filterGroup: SignalFilterOption) => void; +} + +const SignalsTableFilterGroupComponent: React.FC = ({ onFilterGroupChanged }) => { + const [filterGroup, setFilterGroup] = useState(FILTER_OPEN); + + const onClickOpenFilterCallback = useCallback(() => { + setFilterGroup(FILTER_OPEN); + onFilterGroupChanged(FILTER_OPEN); + }, [setFilterGroup, onFilterGroupChanged]); + + const onClickCloseFilterCallback = useCallback(() => { + setFilterGroup(FILTER_CLOSED); + onFilterGroupChanged(FILTER_CLOSED); + }, [setFilterGroup, onFilterGroupChanged]); + + return ( + + + {i18n.OPEN_SIGNALS} + + + + {i18n.CLOSED_SIGNALS} + + + ); +}; + +export const SignalsTableFilterGroup = React.memo(SignalsTableFilterGroupComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/signals_utility_bar/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/signals_utility_bar/index.tsx index 72b250470d19b..f80de053b59bd 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/signals_utility_bar/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals/signals_utility_bar/index.tsx @@ -33,103 +33,100 @@ interface SignalsUtilityBarProps { updateSignalsStatus: UpdateSignalsStatus; } -export const SignalsUtilityBar = React.memo( - ({ - areEventsLoading, - clearSelection, - totalCount, - selectedEventIds, - isFilteredToOpen, - selectAll, - showClearSelection, - updateSignalsStatus, - sendSignalsToTimeline, - }) => { - const [defaultNumberFormat] = useUiSetting$(DEFAULT_NUMBER_FORMAT); +const SignalsUtilityBarComponent: React.FC = ({ + areEventsLoading, + clearSelection, + totalCount, + selectedEventIds, + isFilteredToOpen, + selectAll, + showClearSelection, + updateSignalsStatus, + sendSignalsToTimeline, +}) => { + const [defaultNumberFormat] = useUiSetting$(DEFAULT_NUMBER_FORMAT); - const getBatchItemsPopoverContent = useCallback( - (closePopover: () => void) => ( - - ), - [ - areEventsLoading, - selectedEventIds, - updateSignalsStatus, - sendSignalsToTimeline, - isFilteredToOpen, - ] - ); + const getBatchItemsPopoverContent = useCallback( + (closePopover: () => void) => ( + + ), + [ + areEventsLoading, + selectedEventIds, + updateSignalsStatus, + sendSignalsToTimeline, + isFilteredToOpen, + ] + ); - const formattedTotalCount = numeral(totalCount).format(defaultNumberFormat); - const formattedSelectedEventsCount = numeral(Object.keys(selectedEventIds).length).format( - defaultNumberFormat - ); + const formattedTotalCount = numeral(totalCount).format(defaultNumberFormat); + const formattedSelectedEventsCount = numeral(Object.keys(selectedEventIds).length).format( + defaultNumberFormat + ); - return ( - <> - - - - - {i18n.SHOWING_SIGNALS(formattedTotalCount, totalCount)} - - + return ( + <> + + + + {i18n.SHOWING_SIGNALS(formattedTotalCount, totalCount)} + - - {totalCount > 0 && ( - <> - - {i18n.SELECTED_SIGNALS( - showClearSelection ? formattedTotalCount : formattedSelectedEventsCount, - showClearSelection ? totalCount : Object.keys(selectedEventIds).length - )} - + + {totalCount > 0 && ( + <> + + {i18n.SELECTED_SIGNALS( + showClearSelection ? formattedTotalCount : formattedSelectedEventsCount, + showClearSelection ? totalCount : Object.keys(selectedEventIds).length + )} + - - {i18n.BATCH_ACTIONS} - + + {i18n.BATCH_ACTIONS} + - { - if (!showClearSelection) { - selectAll(); - } else { - clearSelection(); - } - }} - > - {showClearSelection - ? i18n.CLEAR_SELECTION - : i18n.SELECT_ALL_SIGNALS(formattedTotalCount, totalCount)} - - - )} - - - - - ); - }, - (prevProps, nextProps) => { - return ( - prevProps.selectedEventIds === nextProps.selectedEventIds && - prevProps.totalCount === nextProps.totalCount && - prevProps.showClearSelection === nextProps.showClearSelection - ); - } + { + if (!showClearSelection) { + selectAll(); + } else { + clearSelection(); + } + }} + > + {showClearSelection + ? i18n.CLEAR_SELECTION + : i18n.SELECT_ALL_SIGNALS(formattedTotalCount, totalCount)} + + + )} + + + + + ); +}; + +export const SignalsUtilityBar = React.memo( + SignalsUtilityBarComponent, + (prevProps, nextProps) => + prevProps.selectedEventIds === nextProps.selectedEventIds && + prevProps.totalCount === nextProps.totalCount && + prevProps.showClearSelection === nextProps.showClearSelection ); diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_chart/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_chart/index.tsx index 094f17922af1a..01ebafdccfefd 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_chart/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_chart/index.tsx @@ -23,7 +23,7 @@ export const sampleChartOptions = [ { text: 'Top users', value: 'users' }, ]; -export const SignalsCharts = memo(() => ( +const SignalsChartsComponent = () => ( ( -)); +); + +export const SignalsCharts = memo(SignalsChartsComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx index 5fda012388a05..9b4fde110617c 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx @@ -4,6 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ +/* eslint-disable react/display-name */ + import { EuiTableActionsColumnType, EuiBasicTableColumn, diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/accordion_title/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/accordion_title/index.tsx index 66353a9613650..77a30b70705ff 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/accordion_title/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/accordion_title/index.tsx @@ -5,7 +5,7 @@ */ import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; -import React, { memo } from 'react'; +import React from 'react'; import { RuleStatusIcon, RuleStatusIconProps } from '../status_icon'; @@ -13,7 +13,7 @@ interface AccordionTitleProps extends RuleStatusIconProps { title: string; } -export const AccordionTitle = memo(({ name, title, type }) => ( +const AccordionTitleComponent: React.FC = ({ name, title, type }) => ( @@ -24,4 +24,6 @@ export const AccordionTitle = memo(({ name, title, type }) -)); +); + +export const AccordionTitle = React.memo(AccordionTitleComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/description_step/filter_label.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/description_step/filter_label.tsx index 15844f5012291..bc2cd39da44be 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/description_step/filter_label.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/description_step/filter_label.tsx @@ -16,7 +16,7 @@ interface Props { valueLabel?: string; } -export const FilterLabel = memo(({ filter, valueLabel }) => { +const FilterLabelComponent: React.FC = ({ filter, valueLabel }) => { const prefixText = filter.meta.negate ? ` ${i18n.translate('xpack.siem.detectionEngine.createRule.filterLabel.negatedFilterPrefix', { defaultMessage: 'NOT ', @@ -90,4 +90,6 @@ export const FilterLabel = memo(({ filter, valueLabel }) => { ); } -}); +}; + +export const FilterLabel = memo(FilterLabelComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/description_step/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/description_step/index.tsx index 39c660a0079a6..a05f43579e669 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/description_step/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/description_step/index.tsx @@ -68,34 +68,35 @@ const MyEuiTextArea = styled(EuiTextArea)` height: 80px; `; -export const StepRuleDescription = memo( - ({ data, direction = 'row', indexPatterns, schema }) => { - const kibana = useKibana(); - const [filterManager] = useState(new FilterManager(kibana.services.uiSettings)); +const StepRuleDescriptionComponent: React.FC = ({ + data, + direction = 'row', + indexPatterns, + schema, +}) => { + const kibana = useKibana(); + const [filterManager] = useState(new FilterManager(kibana.services.uiSettings)); - const keys = Object.keys(schema); - const listItems = keys.reduce( - (acc: ListItems[], key: string) => [ - ...acc, - ...buildListItems(data, pick(key, schema), filterManager, indexPatterns), - ], - [] - ); - return ( - - {chunk(Math.ceil(listItems.length / 2), listItems).map((chunckListItems, index) => ( - - - - ))} - - ); - } -); + const keys = Object.keys(schema); + const listItems = keys.reduce( + (acc: ListItems[], key: string) => [ + ...acc, + ...buildListItems(data, pick(key, schema), filterManager, indexPatterns), + ], + [] + ); + return ( + + {chunk(Math.ceil(listItems.length / 2), listItems).map((chunckListItems, index) => ( + + + + ))} + + ); +}; + +export const StepRuleDescription = memo(StepRuleDescriptionComponent); interface ListItems { title: NonNullable; diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/status_icon/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/status_icon/index.tsx index 22b116557ae6e..48ff0d80d0398 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/status_icon/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/status_icon/index.tsx @@ -25,7 +25,7 @@ const RuleStatusIconStyled = styled.div` } `; -export const RuleStatusIcon = memo(({ name, type }) => { +const RuleStatusIconComponent: React.FC = ({ name, type }) => { const theme = useEuiTheme(); const color = type === 'passive' ? theme.euiColorLightestShade : theme.euiColorDarkestShade; return ( @@ -34,4 +34,6 @@ export const RuleStatusIcon = memo(({ name, type }) => { {type === 'valid' ? : null} ); -}); +}; + +export const RuleStatusIcon = memo(RuleStatusIconComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_panel/index.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_panel/index.tsx index 21b38a83dad9d..88cecadb8b137 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_panel/index.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_panel/index.tsx @@ -17,15 +17,15 @@ interface StepPanelProps { } const MyPanel = styled(EuiPanel)` - poistion: relative; + position: relative; `; -export const StepPanel = memo(({ children, loading, title }) => { - return ( - - {loading && } - - {children} - - ); -}); +const StepPanelComponent: React.FC = ({ children, loading, title }) => ( + + {loading && } + + {children} + +); + +export const StepPanel = memo(StepPanelComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/timelines/timelines_page.tsx b/x-pack/legacy/plugins/siem/public/pages/timelines/timelines_page.tsx index 4dec9278ed6b0..86f702a8ad8a4 100644 --- a/x-pack/legacy/plugins/siem/public/pages/timelines/timelines_page.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/timelines/timelines_page.tsx @@ -17,7 +17,6 @@ import * as i18n from './translations'; const TimelinesContainer = styled.div` width: 100%; `; -TimelinesContainer.displayName = 'TimelinesContainer'; interface TimelinesProps { apolloClient: ApolloClient; @@ -27,7 +26,7 @@ type OwnProps = TimelinesProps; export const DEFAULT_SEARCH_RESULTS_PER_PAGE = 10; -export const TimelinesPage = React.memo(({ apolloClient }) => ( +const TimelinesPageComponent: React.FC = ({ apolloClient }) => ( <> @@ -44,4 +43,6 @@ export const TimelinesPage = React.memo(({ apolloClient }) => ( -)); +); + +export const TimelinesPage = React.memo(TimelinesPageComponent); diff --git a/x-pack/legacy/plugins/siem/public/routes.tsx b/x-pack/legacy/plugins/siem/public/routes.tsx index 0e9bcf5dc5bfa..cbb58a473e8ea 100644 --- a/x-pack/legacy/plugins/siem/public/routes.tsx +++ b/x-pack/legacy/plugins/siem/public/routes.tsx @@ -16,7 +16,7 @@ interface RouterProps { history: History; } -export const PageRouter: FC = memo(({ history }) => ( +const PageRouterComponent: FC = ({ history }) => ( @@ -25,4 +25,6 @@ export const PageRouter: FC = memo(({ history }) => ( -)); +); + +export const PageRouter = memo(PageRouterComponent); diff --git a/x-pack/legacy/plugins/siem/public/utils/route/manage_spy_routes.tsx b/x-pack/legacy/plugins/siem/public/utils/route/manage_spy_routes.tsx index 87b40c565c758..d1e76f75fca81 100644 --- a/x-pack/legacy/plugins/siem/public/utils/route/manage_spy_routes.tsx +++ b/x-pack/legacy/plugins/siem/public/utils/route/manage_spy_routes.tsx @@ -4,12 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { memo, useReducer } from 'react'; +import React, { FC, memo, useReducer } from 'react'; import { ManageRoutesSpyProps, RouteSpyState, RouteSpyAction } from './types'; import { RouterSpyStateContext, initRouteSpy } from './helpers'; -export const ManageRoutesSpy = memo(({ children }: ManageRoutesSpyProps) => { +const ManageRoutesSpyComponent: FC = ({ children }) => { const reducerSpyRoute = (state: RouteSpyState, action: RouteSpyAction) => { switch (action.type) { case 'updateRoute': @@ -28,4 +28,6 @@ export const ManageRoutesSpy = memo(({ children }: ManageRoutesSpyProps) => { {children} ); -}); +}; + +export const ManageRoutesSpy = memo(ManageRoutesSpyComponent);