[SIEM] Upgrades react-redux and utilize React.memo for performance gains (#43029) (#43070)

## Summary

* Upgrades react-redux so we can use React.memo with hooks and connected components.
* Adds displayName to all the components that are React.memo as well as all components that are `pure` components.

Using React Profiler you can see that when doing something as innocuous as dragging the divider bar of the Timeline you will get updates of the different tables:

<img width="1547" alt="Screen Shot 2019-08-08 at 1 25 22 PM" src="https://user-images.githubusercontent.com/1151048/62789872-19efad80-ba87-11e9-92b5-eb9666c7c07a.png">

This is a result of redux making changes based on the location of the timeline. As this occurs, the UrlState begins updating its self and all children which is not what we want.

You will see differences now in the snapshots such as this which adds naming to it:
<img width="1582" alt="Screen Shot 2019-08-09 at 2 34 06 PM" src="https://user-images.githubusercontent.com/1151048/62808504-7a95df00-bab5-11e9-89c1-910b3908c705.png">

For the rest of us profiling we will have friendly names in our profiling tools to be able to trace what is going on very quickly

Before where a name didn't exist and it just showed `Memo` or `pure`:
<img width="221" alt="Screen Shot 2019-08-09 at 11 55 08 AM" src="https://user-images.githubusercontent.com/1151048/62809192-79fe4800-bab7-11e9-993b-2e7abadbb691.png">

Now that a name exists you can trace to the code quickly to the component name:
<img width="1570" alt="Screen Shot 2019-08-09 at 3 08 42 PM" src="https://user-images.githubusercontent.com/1151048/62809235-9a2e0700-bab7-11e9-8711-bae7d263d487.png">


### Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

~~- [ ] This was checked for cross-browser compatibility, [including a check against IE11](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility)~~

~~- [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md)~~

~~- [ ] [Documentation](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#writing-documentation) was added for features that require explanation or tutorials~~

~~- [ ] [Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios~~

~~- [ ] This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist)~~

### For maintainers

~~- [ ] This was checked for breaking API changes and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~~

~~- [ ] This includes a feature addition or change that requires a release note and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~~

package.json

@@ -214,7 +214,7 @@
     "react-hooks-testing-library": "^0.5.0",
     "react-input-range": "^1.3.0",
     "react-markdown": "^3.4.1",
-    "react-redux": "^5.0.7",
+    "react-redux": "^5.1.1",
     "react-router-dom": "^4.3.1",
     "react-sizeme": "^2.3.6",
     "reactcss": "1.2.3",

x-pack/legacy/plugins/siem/public/components/and_or_badge/index.tsx

@@ -33,6 +33,8 @@ const RoundedBadge = styled(EuiBadge)`
   }
 `;
 
+RoundedBadge.displayName = 'RoundedBadge';
+
 export type AndOr = 'and' | 'or';
 
 /** Displays AND / OR in a round badge */
@@ -45,3 +47,5 @@ export const AndOrBadge = pure<{ type: AndOr }>(({ type }) => {
     </RoundedBadge>
   );
 });
+
+AndOrBadge.displayName = 'AndOrBadge';

x-pack/legacy/plugins/siem/public/components/arrows/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`arrows ArrowBody renders correctly against snapshot 1`] = `
 <Component>
-  <styled.span
+  <ArrowBody
     height={3}
   />
 </Component>

x-pack/legacy/plugins/siem/public/components/arrows/index.tsx

@@ -16,6 +16,8 @@ export const ArrowBody = styled.span<{ height: number }>`
   width: 25px;
 `;
 
+ArrowBody.displayName = 'ArrowBody';
+
 export type ArrowDirection = 'arrowLeft' | 'arrowRight';
 
 /** Renders the head of an arrow */
@@ -24,3 +26,5 @@ export const ArrowHead = pure<{
 }>(({ direction }) => (
   <EuiIcon color="subdued" data-test-subj="arrow-icon" size="s" type={direction} />
 ));
+
+ArrowHead.displayName = 'ArrowHead';

x-pack/legacy/plugins/siem/public/components/autocomplete_field/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Autocomplete rendering it renders against snapshot 1`] = `
 <EuiOutsideClickDetector
   onOutsideClick={[Function]}
 >
-  <styled.div>
+  <AutocompleteContainer>
     <EuiFieldSearch
       compressed={false}
       fullWidth={true}
@@ -20,6 +20,6 @@ exports[`Autocomplete rendering it renders against snapshot 1`] = `
       placeholder="myPlaceholder"
       value=""
     />
-  </styled.div>
+  </AutocompleteContainer>
 </EuiOutsideClickDetector>
 `;

x-pack/legacy/plugins/siem/public/components/autocomplete_field/index.tsx

@@ -311,6 +311,8 @@ const AutocompleteContainer = euiStyled.div`
   position: relative;
 `;
 
+AutocompleteContainer.displayName = 'AutocompleteContainer';
+
 const SuggestionsPanel = euiStyled(EuiPanel).attrs({
   paddingSize: 'none',
   hasShadow: true,
@@ -321,3 +323,5 @@ const SuggestionsPanel = euiStyled(EuiPanel).attrs({
   overflow: hidden;
   z-index: ${props => props.theme.eui.euiZLevel1};
 `;
+
+SuggestionsPanel.displayName = 'SuggestionsPanel';

x-pack/legacy/plugins/siem/public/components/autocomplete_field/suggestion_item.tsx

@@ -25,7 +25,6 @@ export class SuggestionItem extends React.PureComponent<SuggestionItemProps> {
 
   public render() {
     const { isSelected, onClick, onMouseEnter, suggestion } = this.props;
-
     return (
       <SuggestionItemContainer
         isSelected={isSelected}
@@ -55,6 +54,8 @@ const SuggestionItemContainer = euiStyled.div<{
     props.isSelected ? props.theme.eui.euiColorLightestShade : 'transparent'};
 `;
 
+SuggestionItemContainer.displayName = 'SuggestionItemContainer';
+
 const SuggestionItemField = euiStyled.div`
   align-items: center;
   cursor: pointer;
@@ -64,6 +65,8 @@ const SuggestionItemField = euiStyled.div`
   padding: ${props => props.theme.eui.euiSizeXS};
 `;
 
+SuggestionItemField.displayName = 'SuggestionItemField';
+
 const SuggestionItemIconField = styled(SuggestionItemField)<{ suggestionType: string }>`
   background-color: ${props =>
     transparentize(0.9, getEuiIconColor(props.theme, props.suggestionType))};
@@ -73,11 +76,15 @@ const SuggestionItemIconField = styled(SuggestionItemField)<{ suggestionType: st
   width: ${props => props.theme.eui.euiSizeXL};
 `;
 
+SuggestionItemIconField.displayName = 'SuggestionItemIconField';
+
 const SuggestionItemTextField = styled(SuggestionItemField)`
   flex: 2 0 0;
   font-family: ${props => props.theme.eui.euiCodeFontFamily};
 `;
 
+SuggestionItemTextField.displayName = 'SuggestionItemTextField';
+
 const SuggestionItemDescriptionField = styled(SuggestionItemField)`
   flex: 3 0 0;
 
@@ -90,6 +97,8 @@ const SuggestionItemDescriptionField = styled(SuggestionItemField)`
   }
 `;
 
+SuggestionItemDescriptionField.displayName = 'SuggestionItemDescriptionField';
+
 const getEuiIconType = (suggestionType: string) => {
   switch (suggestionType) {
     case 'field':

x-pack/legacy/plugins/siem/public/components/certificate_fingerprint/index.tsx

@@ -26,6 +26,8 @@ const FingerprintLabel = styled.span`
   margin-right: 5px;
 `;
 
+FingerprintLabel.displayName = 'FingerprintLabel';
+
 /**
  * Represents a field containing a certificate fingerprint (e.g. a sha1), with
  * a link to an external site, which in-turn compares the fingerprint against a
@@ -63,3 +65,5 @@ export const CertificateFingerprint = pure<{
     </DraggableBadge>
   );
 });
+
+CertificateFingerprint.displayName = 'CertificateFingerprint';

x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx

@@ -111,6 +111,8 @@ export const AreaChartBaseComponent = React.memo<{
   ) : null;
 });
 
+AreaChartBaseComponent.displayName = 'AreaChartBaseComponent';
+
 export const AreaChartWithCustomPrompt = React.memo<{
   data: ChartConfigsData[] | null | undefined;
   height: number | null | undefined;
@@ -131,6 +133,8 @@ export const AreaChartWithCustomPrompt = React.memo<{
   );
 });
 
+AreaChartWithCustomPrompt.displayName = 'AreaChartWithCustomPrompt';
+
 export const AreaChart = React.memo<{
   areaChart: ChartConfigsData[] | null | undefined;
   configs?: ChartSeriesConfigs | undefined;
@@ -148,3 +152,5 @@ export const AreaChart = React.memo<{
     )}
   </AutoSizer>
 ));
+
+AreaChart.displayName = 'AreaChart';

x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx

@@ -83,6 +83,8 @@ export const BarChartBaseComponent = React.memo<{
   ) : null;
 });
 
+BarChartBaseComponent.displayName = 'BarChartBaseComponent';
+
 export const BarChartWithCustomPrompt = React.memo<{
   data: ChartConfigsData[] | null | undefined;
   height: number | null | undefined;
@@ -101,6 +103,8 @@ export const BarChartWithCustomPrompt = React.memo<{
   );
 });
 
+BarChartWithCustomPrompt.displayName = 'BarChartWithCustomPrompt';
+
 export const BarChart = React.memo<{
   barChart: ChartConfigsData[] | null | undefined;
   configs?: ChartSeriesConfigs | undefined;
@@ -113,3 +117,5 @@ export const BarChart = React.memo<{
     )}
   </AutoSizer>
 ));
+
+BarChart.displayName = 'BarChart';

x-pack/legacy/plugins/siem/public/components/charts/common.tsx

@@ -30,6 +30,9 @@ const chartDefaultRendering: Rendering = 'canvas';
 const FlexGroup = styled(EuiFlexGroup)`
   height: 100%;
 `;
+
+FlexGroup.displayName = 'FlexGroup';
+
 export type UpdateDateRange = (min: number, max: number) => void;
 
 export const ChartHolder = () => (
@@ -89,6 +92,8 @@ export const WrappedByAutoSizer = styled.div`
   }
 `;
 
+WrappedByAutoSizer.displayName = 'WrappedByAutoSizer';
+
 export enum SeriesType {
   BAR = 'bar',
   AREA = 'area',

x-pack/legacy/plugins/siem/public/components/direction/index.tsx

@@ -70,3 +70,5 @@ export const DirectionBadge = pure<{
     value={direction}
   />
 ));
+
+DirectionBadge.displayName = 'DirectionBadge';

x-pack/legacy/plugins/siem/public/components/drag_and_drop/__snapshots__/droppable_wrapper.test.tsx.snap

@@ -393,11 +393,11 @@ exports[`DroppableWrapper rendering it renders against the snapshot 1`] = `
         }
       }
     >
-      <pure(Component)
+      <DroppableWrapper
         droppableId="testing"
       >
         draggable wrapper content
-      </pure(Component)>
+      </DroppableWrapper>
     </Connect(DragDropContextWrapperComponent)>
   </MockedProvider>
 </Component>

x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx

@@ -26,6 +26,8 @@ import { getDraggableId, getDroppableId } from './helpers';
 // As right now, we do not know what we want there, we will keep it as a placeholder
 export const DragEffects = styled.div``;
 
+DragEffects.displayName = 'DragEffects';
+
 const ProviderContainer = styled.div`
   &:hover {
     transition: background-color 0.7s ease;
@@ -33,6 +35,8 @@ const ProviderContainer = styled.div`
   }
 `;
 
+ProviderContainer.displayName = 'ProviderContainer';
+
 interface OwnProps {
   dataProvider: DataProvider;
   render: (

x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx

@@ -71,6 +71,8 @@ const ReactDndDropTarget = styled.div<{ isDraggingOver: boolean; height: string
   }
 `;
 
+ReactDndDropTarget.displayName = 'ReactDndDropTarget';
+
 export const DroppableWrapper = pure<Props>(
   ({ children, droppableId, height = '100%', isDropDisabled = false, type }) => (
     <Droppable
@@ -93,3 +95,5 @@ export const DroppableWrapper = pure<Props>(
     </Droppable>
   )
 );
+
+DroppableWrapper.displayName = 'DroppableWrapper';

x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx

@@ -19,10 +19,14 @@ const FieldBadgeFlexGroup = styled(EuiFlexGroup)`
   height: 38px;
 `;
 
+FieldBadgeFlexGroup.displayName = 'FieldBadgeFlexGroup';
+
 const FieldBadgeFlexItem = styled(EuiFlexItem)`
   font-weight: bold;
 `;
 
+FieldBadgeFlexItem.displayName = 'FieldBadgeFlexItem';
+
 /**
  * The name of a (draggable) field
  */
@@ -35,6 +39,8 @@ export const FieldNameContainer = styled.div`
   }
 `;
 
+FieldNameContainer.displayName = 'FieldNameContainer';
+
 /**
  * Renders a field (e.g. `event.action`) as a draggable badge
  */
@@ -47,3 +53,5 @@ export const DraggableFieldBadge = pure<{ fieldId: string }>(({ fieldId }) => (
     </FieldBadgeFlexGroup>
   </EuiBadge>
 ));
+
+DraggableFieldBadge.displayName = 'DraggableFieldBadge';

x-pack/legacy/plugins/siem/public/components/draggables/index.tsx

@@ -68,6 +68,8 @@ const Content = pure<{
   )
 );
 
+Content.displayName = 'Content';
+
 /**
  * Draggable text (or an arbitrary visualization specified by `children`)
  * that's only displayed when the specified value is non-`null`.
@@ -116,6 +118,8 @@ export const DefaultDraggable = pure<DefaultDraggableType>(
     ) : null
 );
 
+DefaultDraggable.displayName = 'DefaultDraggable';
+
 // Ref: https://github.com/elastic/eui/issues/1655
 // const Badge = styled(EuiBadge)`
 //   vertical-align: top;
@@ -124,6 +128,8 @@ export const Badge = (props: EuiBadgeProps) => (
   <EuiBadge {...props} style={{ verticalAlign: 'top' }} />
 );
 
+Badge.displayName = 'Badge';
+
 export type BadgeDraggableType = Omit<DefaultDraggableType, 'id'> & {
   contextId: string;
   eventId: string;
@@ -174,3 +180,5 @@ export const DraggableBadge = pure<BadgeDraggableType>(
       </DefaultDraggable>
     ) : null
 );
+
+DraggableBadge.displayName = 'DraggableBadge';

x-pack/legacy/plugins/siem/public/components/duration/index.tsx

@@ -32,3 +32,5 @@ export const Duration = pure<{
     <FormattedDuration maybeDurationNanoseconds={value} tooltipTitle={fieldName} />
   </DefaultDraggable>
 ));
+
+Duration.displayName = 'Duration';

x-pack/legacy/plugins/siem/public/components/edit_data_provider/index.tsx

@@ -44,6 +44,8 @@ export const HeaderContainer = styled.div`
   width: ${EDIT_DATA_PROVIDER_WIDTH};
 `;
 
+HeaderContainer.displayName = 'HeaderContainer';
+
 // SIDE EFFECT: the following `injectGlobal` overrides the default styling
 // of euiComboBoxOptionsList because it's implemented as a popover, so it's
 // not selectable as a child of the styled component

x-pack/legacy/plugins/siem/public/components/empty_page/index.tsx

@@ -13,6 +13,8 @@ const EmptyPrompt = styled(EuiEmptyPrompt)`
   align-self: center; // Corrects horizontal centering in IE11
 `;
 
+EmptyPrompt.displayName = 'EmptyPrompt';
+
 interface EmptyPageProps {
   actionPrimaryIcon?: IconType;
   actionPrimaryLabel: string;
@@ -74,3 +76,5 @@ export const EmptyPage = pure<EmptyPageProps>(
     />
   )
 );
+
+EmptyPage.displayName = 'EmptyPage';

x-pack/legacy/plugins/siem/public/components/empty_value/index.tsx

@@ -18,6 +18,8 @@ const EmptyString = styled.span`
   }) => euiColorMediumShade};
 `;
 
+EmptyString.displayName = 'EmptyString';
+
 export const getEmptyValue = () => '--';
 export const getEmptyString = () => `(${i18n.EMPTY_STRING})`;
 

x-pack/legacy/plugins/siem/public/components/event_details/__snapshots__/event_details.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`EventDetails rendering should match snapshot 1`] = `
 <Component>
-  <pure(Component)
+  <EventDetails
     browserFields={
       Object {
         "agent": Object {

x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx

@@ -42,11 +42,15 @@ const HoverActionsContainer = styled(EuiPanel)`
   width: 30px;
 `;
 
+HoverActionsContainer.displayName = 'HoverActionsContainer';
+
 const FieldTypeIcon = styled(EuiIcon)`
   position: relative;
   top: -2px;
 `;
 
+FieldTypeIcon.displayName = 'FieldTypeIcon';
+
 export const getColumns = ({
   browserFields,
   eventId,

x-pack/legacy/plugins/siem/public/components/event_details/event_details.tsx

@@ -35,6 +35,8 @@ const Details = styled.div`
   width: 100%;
 `;
 
+Details.displayName = 'Details';
+
 export const EventDetails = pure<Props>(
   ({ browserFields, data, id, isLoading, view, onUpdateColumns, onViewSelected, timelineId }) => {
     const tabs: EuiTabbedContentTab[] = [
@@ -70,3 +72,5 @@ export const EventDetails = pure<Props>(
     );
   }
 );
+
+EventDetails.displayName = 'EventDetails';

x-pack/legacy/plugins/siem/public/components/event_details/event_fields_browser.tsx

@@ -55,3 +55,5 @@ export const EventFieldsBrowser = pure<Props>(
     );
   }
 );
+
+EventFieldsBrowser.displayName = 'EventFieldsBrowser';

x-pack/legacy/plugins/siem/public/components/event_details/json_view.tsx

@@ -24,6 +24,8 @@ const JsonEditor = styled.div`
   width: 100%;
 `;
 
+JsonEditor.displayName = 'JsonEditor';
+
 export const JsonView = pure<Props>(({ data }) => (
   <JsonEditor data-test-subj="jsonView">
     <EuiCodeEditor
@@ -40,5 +42,7 @@ export const JsonView = pure<Props>(({ data }) => (
   </JsonEditor>
 ));
 
+JsonView.displayName = 'JsonView';
+
 export const buildJsonView = (data: DetailItem[]) =>
   data.reduce((accumulator, item) => set(item.field, item.originalValue, accumulator), {});

x-pack/legacy/plugins/siem/public/components/external_link_icon/index.tsx

@@ -14,10 +14,14 @@ const LinkIcon = styled(EuiIcon)`
   top: -2px;
 `;
 
+LinkIcon.displayName = 'LinkIcon';
+
 const LinkIconWithMargin = styled(LinkIcon)`
   margin-left: 5px;
 `;
 
+LinkIconWithMargin.displayName = 'LinkIconWithMargin';
+
 const color = 'subdued';
 const iconSize = 's';
 const iconType = 'popout';
@@ -40,3 +44,5 @@ export const ExternalLinkIcon = pure<{
     <LinkIcon color={color} data-test-subj="external-link-icon" size={iconSize} type={iconType} />
   )
 );
+
+ExternalLinkIcon.displayName = 'ExternalLinkIcon';

x-pack/legacy/plugins/siem/public/components/field_renderers/__snapshots__/field_renderers.test.tsx.snap

@@ -9,13 +9,13 @@ exports[`Field Renderers #autonomousSystemRenderer it renders correctly against
     <EuiFlexItem
       grow={false}
     >
-      <pure(Component)
+      <DefaultDraggable
         field="source.autonomous_system.as_org"
         id="ip-overview-source.autonomous_system.as_org"
         value="Test Org"
       />
        /
-      <pure(Component)
+      <DefaultDraggable
         field="source.autonomous_system.asn"
         id="ip-overview-source.autonomous_system.asn"
         value="Test ASN"
@@ -27,7 +27,7 @@ exports[`Field Renderers #autonomousSystemRenderer it renders correctly against
 
 exports[`Field Renderers #dateRenderer it renders correctly against snapshot 1`] = `
 <Component>
-  <pure(Component)
+  <FormattedDate
     fieldName="firstSeen"
     value="2019-02-07T17:19:41.636Z"
   />
@@ -36,33 +36,33 @@ exports[`Field Renderers #dateRenderer it renders correctly against snapshot 1`]
 
 exports[`Field Renderers #hostIdRenderer it renders correctly against snapshot 1`] = `
 <Component>
-  <pure(Component)
+  <DefaultDraggable
     field="host.name"
     id="ip-overview-host-name"
     value="raspberrypi"
   >
-    <pure(Component)
+    <HostDetailsLink
       hostName="raspberrypi"
     >
       raspberrypi
-    </pure(Component)>
-  </pure(Component)>
+    </HostDetailsLink>
+  </DefaultDraggable>
 </Component>
 `;
 
 exports[`Field Renderers #hostNameRenderer it renders correctly against snapshot 1`] = `
 <Component>
-  <pure(Component)
+  <DefaultDraggable
     field="host.name"
     id="ip-overview-host-name"
     value="raspberrypi"
   >
-    <pure(Component)
+    <HostDetailsLink
       hostName="raspberrypi"
     >
       raspberrypi
-    </pure(Component)>
-  </pure(Component)>
+    </HostDetailsLink>
+  </DefaultDraggable>
 </Component>
 `;
 
@@ -76,7 +76,7 @@ exports[`Field Renderers #locationRenderer it renders correctly against snapshot
     <EuiFlexItem
       grow={false}
     >
-      <pure(Component)
+      <DefaultDraggable
         field="source.geo.city_name"
         id="ip-overview-source.geo.city_name"
         value={
@@ -90,7 +90,7 @@ exports[`Field Renderers #locationRenderer it renders correctly against snapshot
     <EuiFlexItem
       grow={false}
     >
-      <pure(Component)
+      <DefaultDraggable
         field="source.geo.region_name"
         id="ip-overview-source.geo.region_name"
         value={
@@ -209,17 +209,17 @@ exports[`Field Renderers #reputationRenderer it renders correctly against snapsh
     }
   }
 >
-  <pure(Component)
+  <VirusTotalLink
     link="10.10.10.10"
   >
     virustotal.com
-  </pure(Component)>
+  </VirusTotalLink>
   , 
-  <pure(Component)
+  <ReputationLink
     domain="10.10.10.10"
   >
     talosIntelligence.com
-  </pure(Component)>
+  </ReputationLink>
 </Component>
 `;
 
@@ -328,10 +328,10 @@ exports[`Field Renderers #whoisRenderer it renders correctly against snapshot 1`
     }
   }
 >
-  <pure(Component)
+  <WhoIsLink
     domain="10.10.10.10"
   >
     iana.org
-  </pure(Component)>
+  </WhoIsLink>
 </Component>
 `;

x-pack/legacy/plugins/siem/public/components/field_renderers/field_renderers.tsx

@@ -182,6 +182,8 @@ export const DefaultFieldRenderer = pure<DefaultFieldRendererProps>(
   }
 );
 
+DefaultFieldRenderer.displayName = 'DefaultFieldRenderer';
+
 interface DefaultFieldRendererOverflowProps {
   rowItems: string[];
   idPrefix: string;
@@ -237,3 +239,5 @@ export const DefaultFieldRendererOverflow = pure<DefaultFieldRendererOverflowPro
     );
   }
 );
+
+DefaultFieldRendererOverflow.displayName = 'DefaultFieldRendererOverflow';

x-pack/legacy/plugins/siem/public/components/fields_browser/categories_pane.tsx

@@ -27,10 +27,14 @@ const CategoryNames = styled.div<{ height: number; width: number }>`
   }
 `;
 
+CategoryNames.displayName = 'CategoryNames';
+
 const Title = styled(EuiTitle)`
   padding-left: 5px;
 `;
 
+Title.displayName = 'Title';
+
 type Props = Pick<
   FieldBrowserProps,
   'browserFields' | 'isLoading' | 'timelineId' | 'onUpdateColumns'
@@ -89,3 +93,5 @@ export const CategoriesPane = pure<Props>(
     </>
   )
 );
+
+CategoriesPane.displayName = 'CategoriesPane';

x-pack/legacy/plugins/siem/public/components/fields_browser/category.tsx

@@ -22,6 +22,8 @@ const TableContainer = styled.div<{ height: number; width: number }>`
   ${({ width }) => `width: ${width}px`};
 `;
 
+TableContainer.displayName = 'TableContainer';
+
 interface Props {
   categoryId: string;
   fieldItems: FieldItem[];
@@ -51,3 +53,5 @@ export const Category = pure<Props>(
     </>
   )
 );
+
+Category.displayName = 'Category';

x-pack/legacy/plugins/siem/public/components/fields_browser/category_buttons.tsx

@@ -38,3 +38,5 @@ export const DefaultCategoryButton = pure<{
     </EuiButton>
   </EuiToolTip>
 ));
+
+DefaultCategoryButton.displayName = 'DefaultCategoryButton';

x-pack/legacy/plugins/siem/public/components/fields_browser/category_columns.tsx

@@ -21,6 +21,8 @@ const CategoryName = styled.span<{ bold: boolean }>`
   font-weight: ${({ bold }) => (bold ? 'bold' : 'normal')};
 `;
 
+CategoryName.displayName = 'CategoryName';
+
 const HoverActionsContainer = styled(EuiPanel)`
   cursor: default;
   height: 25px;
@@ -30,6 +32,8 @@ const HoverActionsContainer = styled(EuiPanel)`
   width: 30px;
 `;
 
+HoverActionsContainer.displayName = 'HoverActionsContainer';
+
 const HoverActionsFlexGroup = styled(EuiFlexGroup)`
   cursor: pointer;
   left: -2px;
@@ -37,6 +41,8 @@ const HoverActionsFlexGroup = styled(EuiFlexGroup)`
   top: -6px;
 `;
 
+HoverActionsFlexGroup.displayName = 'HoverActionsFlexGroup';
+
 const LinkContainer = styled.div`
   width: 100%;
   .euiLink {
@@ -44,6 +50,8 @@ const LinkContainer = styled.div`
   }
 `;
 
+LinkContainer.displayName = 'LinkContainer';
+
 export interface CategoryItem {
   categoryId: string;
 }

x-pack/legacy/plugins/siem/public/components/fields_browser/category_title.tsx

@@ -20,6 +20,8 @@ const CountBadgeContainer = styled.div`
   top: -3px;
 `;
 
+CountBadgeContainer.displayName = 'CountBadgeContainer';
+
 interface Props {
   /** The title of the category */
   categoryId: string;
@@ -52,3 +54,5 @@ export const CategoryTitle = pure<Props>(({ filteredBrowserFields, categoryId, t
     </EuiFlexItem>
   </EuiFlexGroup>
 ));
+
+CategoryTitle.displayName = 'CategoryTitle';

x-pack/legacy/plugins/siem/public/components/fields_browser/field_browser.tsx

@@ -41,10 +41,14 @@ const FieldsBrowserContainer = styled.div<{
   z-index: 9990;
 `;
 
+FieldsBrowserContainer.displayName = 'FieldsBrowserContainer';
+
 const PanesFlexGroup = styled(EuiFlexGroup)`
   width: ${PANES_FLEX_GROUP_WIDTH}px;
 `;
 
+PanesFlexGroup.displayName = 'PanesFlexGroup';
+
 type Props = Pick<
   FieldBrowserProps,
   | 'browserFields'

x-pack/legacy/plugins/siem/public/components/fields_browser/field_items.tsx

@@ -34,6 +34,8 @@ const TypeIcon = styled(EuiIcon)`
   top: -1px;
 `;
 
+TypeIcon.displayName = 'TypeIcon';
+
 /**
  * An item rendered in the table
  */

x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx

@@ -37,6 +37,8 @@ export const FieldNameContainer = styled.span`
   }
 `;
 
+FieldNameContainer.displayName = 'FieldNameContainer';
+
 const HoverActionsContainer = styled(EuiPanel)`
   cursor: default;
   height: 25px;
@@ -45,16 +47,22 @@ const HoverActionsContainer = styled(EuiPanel)`
   top: 3px;
 `;
 
+HoverActionsContainer.displayName = 'HoverActionsContainer';
+
 const HoverActionsFlexGroup = styled(EuiFlexGroup)`
   cursor: pointer;
   position: relative;
   top: -8px;
 `;
 
+HoverActionsFlexGroup.displayName = 'HoverActionsFlexGroup';
+
 const ViewCategoryIcon = styled(EuiIcon)`
   margin-left: 5px;
 `;
 
+ViewCategoryIcon.displayName = 'ViewCategoryIcon';
+
 /** Renders a field name in it's non-dragging state */
 export const FieldName = pure<{
   categoryId: string;
@@ -107,3 +115,5 @@ export const FieldName = pure<{
     )}
   />
 ));
+
+FieldName.displayName = 'FieldName';

x-pack/legacy/plugins/siem/public/components/fields_browser/fields_pane.tsx

@@ -25,10 +25,14 @@ const NoFieldsPanel = styled.div`
   height: ${TABLE_HEIGHT}px;
 `;
 
+NoFieldsPanel.displayName = 'NoFieldsPanel';
+
 const NoFieldsFlexGroup = styled(EuiFlexGroup)`
   height: 100%;
 `;
 
+NoFieldsFlexGroup.displayName = 'NoFieldsFlexGroup';
+
 type Props = Pick<
   FieldBrowserProps,
   'isLoading' | 'onFieldSelected' | 'onUpdateColumns' | 'timelineId'
@@ -104,3 +108,5 @@ export const FieldsPane = pure<Props>(
     </>
   )
 );
+
+FieldsPane.displayName = 'FieldsPane';

x-pack/legacy/plugins/siem/public/components/fields_browser/header.tsx

@@ -28,16 +28,22 @@ const CountsFlexGroup = styled(EuiFlexGroup)`
   margin-top: 5px;
 `;
 
+CountsFlexGroup.displayName = 'CountsFlexGroup';
+
 const CountFlexItem = styled(EuiFlexItem)`
   margin-right: 5px;
 `;
 
+CountFlexItem.displayName = 'CountFlexItem';
+
 // background-color: ${props => props.theme.eui.euiColorLightestShade};
 const HeaderContainer = styled.div`
   padding: 16px;
   margin-bottom: 8px;
 `;
 
+HeaderContainer.displayName = 'HeaderContainer';
+
 const SearchContainer = styled.div`
   input {
     max-width: ${SEARCH_INPUT_WIDTH}px;
@@ -45,6 +51,8 @@ const SearchContainer = styled.div`
   }
 `;
 
+SearchContainer.displayName = 'SearchContainer';
+
 interface Props {
   filteredBrowserFields: BrowserFields;
   isSearching: boolean;
@@ -81,6 +89,8 @@ const CountRow = pure<Pick<Props, 'filteredBrowserFields'>>(({ filteredBrowserFi
   </CountsFlexGroup>
 ));
 
+CountRow.displayName = 'CountRow';
+
 const TitleRow = pure<{ onOutsideClick: () => void; onUpdateColumns: OnUpdateColumns }>(
   ({ onOutsideClick, onUpdateColumns }) => (
     <EuiFlexGroup
@@ -109,6 +119,8 @@ const TitleRow = pure<{ onOutsideClick: () => void; onUpdateColumns: OnUpdateCol
   )
 );
 
+TitleRow.displayName = 'TitleRow';
+
 export const Header = pure<Props>(
   ({
     isSearching,
@@ -134,3 +146,5 @@ export const Header = pure<Props>(
     </HeaderContainer>
   )
 );
+
+Header.displayName = 'Header';

x-pack/legacy/plugins/siem/public/components/fields_browser/helpers.tsx

@@ -20,6 +20,8 @@ export const LoadingSpinner = styled(EuiLoadingSpinner)`
   top: 3px;
 `;
 
+LoadingSpinner.displayName = 'LoadingSpinner';
+
 export const CATEGORY_PANE_WIDTH = 200;
 export const DESCRIPTION_COLUMN_WIDTH = 300;
 export const FIELD_COLUMN_WIDTH = 200;

x-pack/legacy/plugins/siem/public/components/fields_browser/index.tsx

@@ -48,6 +48,8 @@ const FieldsBrowserButtonContainer = styled.div`
   }
 `;
 
+FieldsBrowserButtonContainer.displayName = 'FieldsBrowserButtonContainer';
+
 interface DispatchProps {
   removeColumn?: ActionCreator<{
     id: string;

x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx

@@ -43,6 +43,8 @@ const Aside = styled.aside<{ isSticky?: boolean }>`
   `}
 `;
 
+Aside.displayName = 'Aside';
+
 // Temporary fix for EuiSuperDatePicker whitespace bug and auto width - Michael Marcialis
 const FlexItemWithDatePickerFix = styled(EuiFlexItem)`
   .euiSuperDatePicker__flexWrapper {
@@ -51,6 +53,8 @@ const FlexItemWithDatePickerFix = styled(EuiFlexItem)`
   }
 `;
 
+FlexItemWithDatePickerFix.displayName = 'FlexItemWithDatePickerFix';
+
 export interface FiltersGlobalProps {
   children: React.ReactNode;
 }
@@ -70,3 +74,5 @@ export const FiltersGlobal = pure<FiltersGlobalProps>(({ children }) => (
     )}
   </Sticky>
 ));
+
+FiltersGlobal.displayName = 'FiltersGlobal';

x-pack/legacy/plugins/siem/public/components/flow_controls/flow_direction_select.tsx

@@ -37,3 +37,5 @@ export const FlowDirectionSelect = pure<Props>(({ onChangeDirection, selectedDir
     </EuiFilterButton>
   </EuiFilterGroup>
 ));
+
+FlowDirectionSelect.displayName = 'FlowDirectionSelect';

x-pack/legacy/plugins/siem/public/components/flow_controls/flow_target_select.tsx

@@ -83,3 +83,5 @@ export const FlowTargetSelect = pure<FlowTargetSelectProps>(
     />
   )
 );
+
+FlowTargetSelect.displayName = 'FlowTargetSelect';

x-pack/legacy/plugins/siem/public/components/flyout/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Flyout rendering it renders correctly against snapshot 1`] = `
 <Component>
-  <Connect(pure(Component))
+  <Connect(FlyoutComponent)
     flyoutHeight={980}
     headerHeight={60}
     timelineId="test"

x-pack/legacy/plugins/siem/public/components/flyout/button/index.tsx

@@ -28,12 +28,16 @@ const Container = styled.div`
   max-height: 240px;
 `;
 
+Container.displayName = 'Container';
+
 const BadgeButtonContainer = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
 
+BadgeButtonContainer.displayName = 'BadgeButtonContainer';
+
 export const Button = styled(EuiPanel)`
   display: flex;
   z-index: 9;
@@ -49,12 +53,16 @@ export const Button = styled(EuiPanel)`
   cursor: pointer;
 `;
 
+Button.displayName = 'Button';
+
 export const Text = styled(EuiText)`
   width: 12px;
   z-index: 10;
   user-select: none;
 `;
 
+Text.displayName = 'Text';
+
 // Ref: https://github.com/elastic/eui/issues/1655
 // export const Badge = styled(EuiBadge)`
 //   border-radius: 5px;
@@ -75,6 +83,9 @@ export const Badge = (props: EuiBadgeProps) => (
     }}
   />
 );
+
+Badge.displayName = 'Badge';
+
 interface FlyoutButtonProps {
   dataProviders: DataProvider[];
   onOpen: () => void;
@@ -108,3 +119,5 @@ export const FlyoutButton = pure<FlyoutButtonProps>(({ onOpen, show, dataProvide
     </Container>
   ) : null
 );
+
+FlyoutButton.displayName = 'FlyoutButton';

x-pack/legacy/plugins/siem/public/components/flyout/header/index.tsx

@@ -113,6 +113,8 @@ const statefulFlyoutHeader = pure<Props>(
   )
 );
 
+statefulFlyoutHeader.displayName = 'statefulFlyoutHeader';
+
 const emptyHistory: History[] = []; // stable reference
 
 const makeMapStateToProps = () => {

x-pack/legacy/plugins/siem/public/components/flyout/index.tsx

@@ -32,10 +32,14 @@ export const Badge = styled(EuiBadge)`
   border-bottom-left-radius: 5px;
 `;
 
+Badge.displayName = 'Badge';
+
 const Visible = styled.div<{ show: boolean }>`
   visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
 `;
 
+Visible.displayName = 'Visible';
+
 interface OwnProps {
   children?: React.ReactNode;
   flyoutHeight: number;
@@ -107,6 +111,8 @@ export const FlyoutComponent = pure<Props>(
   )
 );
 
+FlyoutComponent.displayName = 'FlyoutComponent';
+
 const mapStateToProps = (state: State, { timelineId }: OwnProps) => {
   const timelineById = defaultTo({}, timelineSelectors.timelineByIdSelector(state));
   const dataProviders = getOr([], `${timelineId}.dataProviders`, timelineById);

x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx

@@ -66,6 +66,8 @@ const EuiFlyoutContainer = styled.div<{ headerHeight: number; width: number }>`
   }
 `;
 
+EuiFlyoutContainer.displayName = 'EuiFlyoutContainer';
+
 const FlyoutHeaderContainer = styled.div`
   align-items: center;
   display: flex;
@@ -74,11 +76,15 @@ const FlyoutHeaderContainer = styled.div`
   width: 100%;
 `;
 
+FlyoutHeaderContainer.displayName = 'FlyoutHeaderContainer';
+
 // manually wrap the close button because EuiButtonIcon can't be a wrapped `styled`
 const WrappedCloseButton = styled.div`
   margin-right: 5px;
 `;
 
+WrappedCloseButton.displayName = 'WrappedCloseButton';
+
 const FlyoutHeaderWithCloseButton = pure<{
   onClose: () => void;
   timelineId: string;
@@ -99,6 +105,8 @@ const FlyoutHeaderWithCloseButton = pure<{
   </FlyoutHeaderContainer>
 ));
 
+FlyoutHeaderWithCloseButton.displayName = 'FlyoutHeaderWithCloseButton';
+
 class FlyoutPaneComponent extends React.PureComponent<Props> {
   public render() {
     const {

x-pack/legacy/plugins/siem/public/components/formatted_bytes/index.tsx

@@ -23,3 +23,5 @@ export const PreferenceFormattedBytes = React.memo<{ value: string | number }>((
     </>
   );
 });
+
+PreferenceFormattedBytes.displayName = 'PreferenceFormattedBytes';

x-pack/legacy/plugins/siem/public/components/formatted_date/index.tsx

@@ -30,6 +30,8 @@ export const PreferenceFormattedDate = pure<{ value: Date }>(({ value }) => {
   );
 });
 
+PreferenceFormattedDate.displayName = 'PreferenceFormattedDate';
+
 /**
  * Renders the specified date value in a format determined by the user's preferences,
  * with a tooltip that renders:
@@ -56,3 +58,5 @@ export const FormattedDate = pure<{
     );
   }
 );
+
+FormattedDate.displayName = 'FormattedDate';

x-pack/legacy/plugins/siem/public/components/formatted_duration/index.tsx

@@ -23,3 +23,5 @@ export const FormattedDuration = pure<{
     </div>
   </FormattedDurationTooltip>
 ));
+
+FormattedDuration.displayName = 'FormattedDuration';

x-pack/legacy/plugins/siem/public/components/formatted_duration/tooltip/index.tsx

@@ -16,6 +16,8 @@ const P = styled.p`
   margin-bottom: 5px;
 `;
 
+P.displayName = 'P';
+
 export const FormattedDurationTooltipContent = pure<{
   maybeDurationNanoseconds: string | number | object | undefined | null;
   tooltipTitle?: string;
@@ -31,6 +33,8 @@ export const FormattedDurationTooltipContent = pure<{
   </>
 ));
 
+FormattedDurationTooltipContent.displayName = 'FormattedDurationTooltipContent';
+
 export const FormattedDurationTooltip = pure<{
   children: JSX.Element;
   maybeDurationNanoseconds: string | number | object | undefined | null;
@@ -48,3 +52,5 @@ export const FormattedDurationTooltip = pure<{
     <>{children}</>
   </EuiToolTip>
 ));
+
+FormattedDurationTooltip.displayName = 'FormattedDurationTooltip';

x-pack/legacy/plugins/siem/public/components/formatted_ip/index.tsx

@@ -86,6 +86,8 @@ const NonDecoratedIp = pure<{
   />
 ));
 
+NonDecoratedIp.displayName = 'NonDecoratedIp';
+
 const AddressLinks = pure<{
   addresses: string[];
   contextId: string;
@@ -121,6 +123,8 @@ const AddressLinks = pure<{
   </>
 ));
 
+AddressLinks.displayName = 'AddressLinks';
+
 export const FormattedIp = pure<{
   contextId: string;
   eventId: string;
@@ -168,3 +172,5 @@ export const FormattedIp = pure<{
     );
   }
 });
+
+FormattedIp.displayName = 'FormattedIp';

x-pack/legacy/plugins/siem/public/components/header_page/header_page.tsx

@@ -17,6 +17,8 @@ const Header = styled.header`
   `}
 `;
 
+Header.displayName = 'Header';
+
 export interface HeaderPageProps {
   badgeLabel?: string;
   badgeTooltip?: string;
@@ -57,3 +59,5 @@ export const HeaderPage = pure<HeaderPageProps>(
     </Header>
   )
 );
+
+HeaderPage.displayName = 'HeaderPage';

x-pack/legacy/plugins/siem/public/components/header_panel/header_panel.tsx

@@ -23,6 +23,8 @@ const Header = styled.header<{ border?: boolean }>`
   `}
 `;
 
+Header.displayName = 'Header';
+
 export interface HeaderPanelProps {
   border?: boolean;
   children?: React.ReactNode;
@@ -64,3 +66,5 @@ export const HeaderPanel = pure<HeaderPanelProps>(
     </Header>
   )
 );
+
+HeaderPanel.displayName = 'HeaderPanel';

x-pack/legacy/plugins/siem/public/components/help_menu/help_menu.tsx

@@ -14,6 +14,8 @@ export const Icon = styled(EuiIcon)`
   margin-right: ${theme.euiSizeS};
 `;
 
+Icon.displayName = 'Icon';
+
 export class HelpMenuComponent extends React.PureComponent {
   public render() {
     return (

x-pack/legacy/plugins/siem/public/components/help_menu/index.tsx

@@ -23,3 +23,5 @@ export const HelpMenu = pure<{}>(() => {
 
   return null;
 });
+
+HelpMenu.displayName = 'HelpMenu';

x-pack/legacy/plugins/siem/public/components/inspect/index.tsx

@@ -26,6 +26,8 @@ const InspectContainer = styled.div<{ showInspect: boolean }>`
   }
 `;
 
+InspectContainer.displayName = 'InspectContainer';
+
 interface OwnProps {
   queryId: string;
   inputId?: InputsModelId;
@@ -135,6 +137,8 @@ const InspectButtonComponent = pure<InspectButtonProps>(
   )
 );
 
+InspectButtonComponent.displayName = 'InspectButtonComponent';
+
 const makeMapStateToProps = () => {
   const getGlobalQuery = inputsSelectors.globalQueryByIdSelector();
   const getTimelineQuery = inputsSelectors.timelineQueryByIdSelector();

x-pack/legacy/plugins/siem/public/components/inspect/modal.tsx

@@ -36,6 +36,8 @@ const DescriptionListStyled = styled(EuiDescriptionList)`
   }
 `;
 
+DescriptionListStyled.displayName = 'DescriptionListStyled';
+
 interface ModalInspectProps {
   closeModal: () => void;
   isShowing: boolean;
@@ -68,6 +70,8 @@ const MyEuiModal = styled(EuiModal)`
     max-width: 718px;
   }
 `;
+
+MyEuiModal.displayName = 'MyEuiModal';
 const parseInspectString = function<T>(objectStringify: string): T | null {
   try {
     return JSON.parse(objectStringify);

x-pack/legacy/plugins/siem/public/components/ip/index.tsx

@@ -42,3 +42,5 @@ export const Ip = pure<{
     />
   </DefaultDraggable>
 ));
+
+Ip.displayName = 'Ip';

x-pack/legacy/plugins/siem/public/components/ja3_fingerprint/index.tsx

@@ -20,6 +20,8 @@ const Ja3FingerprintLabel = styled.span`
   margin-right: 5px;
 `;
 
+Ja3FingerprintLabel.displayName = 'Ja3FingerprintLabel';
+
 /**
  * Renders a ja3 fingerprint, which enables (some) clients and servers communicating
  * using TLS traffic to be identified, which is possible because SSL
@@ -46,3 +48,5 @@ export const Ja3Fingerprint = pure<{
     <ExternalLinkIcon />
   </DraggableBadge>
 ));
+
+Ja3Fingerprint.displayName = 'Ja3Fingerprint';

x-pack/legacy/plugins/siem/public/components/last_event_time/index.tsx

@@ -65,3 +65,5 @@ export const LastEventTime = pure<LastEventTimeProps>(({ hostName, indexKey, ip
     </ApolloConsumer>
   );
 });
+
+LastEventTime.displayName = 'LastEventTime';

x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx

@@ -28,3 +28,5 @@ export const LinkToPage = pure<LinkToPageProps>(({ match }) => (
     <Redirect to="/" />
   </Switch>
 ));
+
+LinkToPage.displayName = 'LinkToPage';

x-pack/legacy/plugins/siem/public/components/links/index.tsx

@@ -19,6 +19,8 @@ export const HostDetailsLink = pure<{ children?: React.ReactNode; hostName: stri
   )
 );
 
+HostDetailsLink.displayName = 'HostDetailsLink';
+
 export const IPDetailsLink = pure<{ children?: React.ReactNode; ip: string }>(
   ({ children, ip }) => (
     <EuiLink href={`#/link-to/network/ip/${encodeURIComponent(encodeIpv6(ip))}`}>
@@ -27,6 +29,8 @@ export const IPDetailsLink = pure<{ children?: React.ReactNode; ip: string }>(
   )
 );
 
+IPDetailsLink.displayName = 'IPDetailsLink';
+
 // External Links
 export const GoogleLink = pure<{ children?: React.ReactNode; link: string }>(
   ({ children, link }) => (
@@ -36,6 +40,8 @@ export const GoogleLink = pure<{ children?: React.ReactNode; link: string }>(
   )
 );
 
+GoogleLink.displayName = 'GoogleLink';
+
 export const PortOrServiceNameLink = pure<{
   children?: React.ReactNode;
   portOrServiceName: number | string;
@@ -51,6 +57,8 @@ export const PortOrServiceNameLink = pure<{
   </EuiLink>
 ));
 
+PortOrServiceNameLink.displayName = 'PortOrServiceNameLink';
+
 export const Ja3FingerprintLink = pure<{ children?: React.ReactNode; ja3Fingerprint: string }>(
   ({ children, ja3Fingerprint }) => (
     <EuiLink
@@ -63,6 +71,8 @@ export const Ja3FingerprintLink = pure<{ children?: React.ReactNode; ja3Fingerpr
   )
 );
 
+Ja3FingerprintLink.displayName = 'Ja3FingerprintLink';
+
 export const CertificateFingerprintLink = pure<{
   children?: React.ReactNode;
   certificateFingerprint: string;
@@ -78,6 +88,8 @@ export const CertificateFingerprintLink = pure<{
   </EuiLink>
 ));
 
+CertificateFingerprintLink.displayName = 'CertificateFingerprintLink';
+
 export const ReputationLink = pure<{ children?: React.ReactNode; domain: string }>(
   ({ children, domain }) => (
     <EuiLink
@@ -91,6 +103,8 @@ export const ReputationLink = pure<{ children?: React.ReactNode; domain: string
   )
 );
 
+ReputationLink.displayName = 'ReputationLink';
+
 export const VirusTotalLink = pure<{ children?: React.ReactNode; link: string }>(
   ({ children, link }) => (
     <EuiLink
@@ -102,6 +116,8 @@ export const VirusTotalLink = pure<{ children?: React.ReactNode; link: string }>
   )
 );
 
+VirusTotalLink.displayName = 'VirusTotalLink';
+
 export const WhoIsLink = pure<{ children?: React.ReactNode; domain: string }>(
   ({ children, domain }) => (
     <EuiLink href={`https://www.iana.org/whois?q=${encodeURIComponent(domain)}`} target="_blank">
@@ -109,3 +125,5 @@ export const WhoIsLink = pure<{ children?: React.ReactNode; domain: string }>(
     </EuiLink>
   )
 );
+
+WhoIsLink.displayName = 'WhoIsLink';

x-pack/legacy/plugins/siem/public/components/load_more_table/index.tsx

@@ -303,6 +303,8 @@ const Panel = styled(EuiPanel)<{ loading: { loading?: boolean } }>`
   `}
 `;
 
+Panel.displayName = 'Panel';
+
 const BasicTable = styled(EuiBasicTable)`
   tbody {
     th,
@@ -312,9 +314,13 @@ const BasicTable = styled(EuiBasicTable)`
   }
 `;
 
+BasicTable.displayName = 'BasicTable';
+
 const FooterAction = styled(EuiFlexGroup).attrs({
   alignItems: 'center',
   responsive: false,
 })`
   margin-top: ${props => props.theme.eui.euiSizeXS};
 `;
+
+FooterAction.displayName = 'FooterAction';

x-pack/legacy/plugins/siem/public/components/loader/index.tsx

@@ -36,6 +36,8 @@ const Aside = styled.aside<{ overlay?: boolean; overlayBackground?: string }>`
   `}
 `;
 
+Aside.displayName = 'Aside';
+
 const FlexGroup = styled(EuiFlexGroup).attrs({
   alignItems: 'center',
   direction: 'column',
@@ -49,6 +51,8 @@ const FlexGroup = styled(EuiFlexGroup).attrs({
   `}
 `;
 
+FlexGroup.displayName = 'FlexGroup';
+
 export interface LoaderProps {
   overlay?: boolean;
   overlayBackground?: string;
@@ -72,3 +76,5 @@ export const Loader = pure<LoaderProps>(({ children, overlay, overlayBackground,
     </FlexGroup>
   </Aside>
 ));
+
+Loader.displayName = 'Loader';

x-pack/legacy/plugins/siem/public/components/loading/index.tsx

@@ -21,6 +21,8 @@ const SpinnerFlexItem = styled(EuiFlexItem)`
   margin-right: 5px;
 `;
 
+SpinnerFlexItem.displayName = 'SpinnerFlexItem';
+
 interface LoadingProps {
   text: string;
   height: number | string;
@@ -63,6 +65,8 @@ export const LoadingPanel = pure<LoadingProps>(
   )
 );
 
+LoadingPanel.displayName = 'LoadingPanel';
+
 export const LoadingStaticPanel = styled.div<{
   height: number | string;
   position: string;
@@ -79,6 +83,8 @@ export const LoadingStaticPanel = styled.div<{
   z-index: ${({ zIndex }) => zIndex};
 `;
 
+LoadingStaticPanel.displayName = 'LoadingStaticPanel';
+
 export const LoadingStaticContentPanel = styled.div`
   flex: 0 0 auto;
   align-self: center;
@@ -88,3 +94,5 @@ export const LoadingStaticContentPanel = styled.div`
     padding: 10px;
   }
 `;
+
+LoadingStaticContentPanel.displayName = 'LoadingStaticContentPanel';

x-pack/legacy/plugins/siem/public/components/localized_date_tooltip/index.tsx

@@ -45,3 +45,5 @@ export const LocalizedDateTooltip = pure<{
     <>{children}</>
   </EuiToolTip>
 ));
+
+LocalizedDateTooltip.displayName = 'LocalizedDateTooltip';

x-pack/legacy/plugins/siem/public/components/markdown/index.tsx

@@ -14,6 +14,8 @@ const TableHeader = styled.thead`
   font-weight: bold;
 `;
 
+TableHeader.displayName = 'TableHeader';
+
 /** prevents links to the new pages from accessing `window.opener` */
 const REL_NOOPENER = 'noopener';
 
@@ -67,3 +69,5 @@ export const Markdown = pure<{ raw?: string; size?: 'xs' | 's' | 'm' }>(({ raw,
     />
   );
 });
+
+Markdown.displayName = 'Markdown';

x-pack/legacy/plugins/siem/public/components/markdown/markdown_hint.tsx

@@ -15,37 +15,53 @@ const Heading = styled.span`
   margin-right: 5px;
 `;
 
+Heading.displayName = 'Heading';
+
 const Bold = styled.span`
   font-weight: bold;
   margin-right: 5px;
 `;
 
+Bold.displayName = 'Bold';
+
 const MarkdownHintContainer = styled(EuiText)<{ visibility: string }>`
   visibility: ${({ visibility }) => visibility};
 `;
 
+MarkdownHintContainer.displayName = 'MarkdownHintContainer';
+
 const ImageUrl = styled.span`
   margin-left: 5px;
 `;
 
+ImageUrl.displayName = 'ImageUrl';
+
 const Italic = styled.span`
   font-style: italic;
   margin-right: 5px;
 `;
 
+Italic.displayName = 'Italic';
+
 const Strikethrough = styled.span`
   text-decoration: line-through;
 `;
 
+Strikethrough.displayName = 'Strikethrough';
+
 const Code = styled.span`
   font-family: monospace;
   margin-right: 5px;
 `;
 
+Code.displayName = 'Code';
+
 const TrailingWhitespace = styled.span`
   margin-right: 5px;
 `;
 
+TrailingWhitespace.displayName = 'TrailingWhitespace';
+
 export const MarkdownHint = pure<{ show: boolean }>(({ show }) => (
   <MarkdownHintContainer
     color="subdued"
@@ -69,3 +85,5 @@ export const MarkdownHint = pure<{ show: boolean }>(({ show }) => (
     <ImageUrl>{i18n.MARKDOWN_HINT_IMAGE_URL}</ImageUrl>
   </MarkdownHintContainer>
 ));
+
+MarkdownHint.displayName = 'MarkdownHint';

x-pack/legacy/plugins/siem/public/components/ml/anomaly/anomaly_table_provider.tsx

@@ -34,3 +34,5 @@ export const AnomalyTableProvider = React.memo<Props>(
     return <>{children({ isLoadingAnomaliesData, anomaliesData })}</>;
   }
 );
+
+AnomalyTableProvider.displayName = 'AnomalyTableProvider';

x-pack/legacy/plugins/siem/public/components/ml/conditional_links/ml_host_conditional_container.tsx

@@ -87,3 +87,5 @@ export const MlHostConditionalContainer = pure<MlHostConditionalProps>(({ match
     <Redirect from="/ml-hosts/" to="/ml-hosts" />
   </Switch>
 ));
+
+MlHostConditionalContainer.displayName = 'MlHostConditionalContainer';

x-pack/legacy/plugins/siem/public/components/ml/conditional_links/ml_network_conditional_container.tsx

@@ -87,3 +87,5 @@ export const MlNetworkConditionalContainer = pure<MlNetworkConditionalProps>(({
     <Redirect from="/ml-network/" to="/ml-network" />
   </Switch>
 ));
+
+MlNetworkConditionalContainer.displayName = 'MlNetworkConditionalContainer';

x-pack/legacy/plugins/siem/public/components/ml/entity_draggable.tsx

@@ -48,3 +48,5 @@ export const EntityDraggable = React.memo<Props>(
     );
   }
 );
+
+EntityDraggable.displayName = 'EntityDraggable';

x-pack/legacy/plugins/siem/public/components/ml/permissions/ml_capabilities_provider.tsx

@@ -16,6 +16,8 @@ import * as i18n from './translations';
 
 export const MlCapabilitiesContext = React.createContext<MlCapabilities>(emptyMlCapabilities);
 
+MlCapabilitiesContext.displayName = 'MlCapabilitiesContext';
+
 export const MlCapabilitiesProvider = React.memo<{ children: JSX.Element }>(({ children }) => {
   const [capabilities, setCapabilities] = useState(emptyMlCapabilities);
   const config = useContext(KibanaConfigContext);
@@ -42,3 +44,5 @@ export const MlCapabilitiesProvider = React.memo<{ children: JSX.Element }>(({ c
     <MlCapabilitiesContext.Provider value={capabilities}>{children}</MlCapabilitiesContext.Provider>
   );
 });
+
+MlCapabilitiesProvider.displayName = 'MlCapabilitiesProvider';

x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
   <EuiFlexItem
     grow={false}
   >
-    <Memo()
+    <DraggableScore
       id="anomaly-scores-job-key-1"
       index={0}
       score={
@@ -82,7 +82,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
     <EuiPopover
       anchorPosition="downCenter"
       button={
-        <Styled(EuiIcon)
+        <Icon
           type="iInCircle"
         />
       }
@@ -105,9 +105,9 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
                 <EuiSpacer
                   size="m"
                 />
-                <Styled(EuiText)>
+                <LargeScore>
                   17
-                </Styled(EuiText)>
+                </LargeScore>
               </React.Fragment>,
               "title": "Max Anomaly Score",
             },
@@ -151,7 +151,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
                 <EuiFlexItem
                   grow={false}
                 >
-                  <pure(Component)
+                  <PreferenceFormattedDate
                     value={2019-06-16T06:00:00.000Z}
                   />
                 </EuiFlexItem>

x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_scores.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
     gutterSize="none"
     responsive={false}
   >
-    <Memo()
+    <AnomalyScore
       endDate={32503680000000}
       index={0}
       interval="day"
@@ -81,7 +81,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
       }
       startDate={0}
     />
-    <Memo()
+    <AnomalyScore
       endDate={32503680000000}
       index={1}
       interval="day"

x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/create_descriptions_list.test.tsx.snap

@@ -15,9 +15,9 @@ exports[`create_description_list renders correctly against snapshot 1`] = `
     <EuiSpacer
       size="m"
     />
-    <Styled(EuiText)>
+    <LargeScore>
       17
-    </Styled(EuiText)>
+    </LargeScore>
   </EuiDescriptionListDescription>
   <EuiDescriptionListTitle
     key="title-1"
@@ -70,7 +70,7 @@ exports[`create_description_list renders correctly against snapshot 1`] = `
       <EuiFlexItem
         grow={false}
       >
-        <pure(Component)
+        <PreferenceFormattedDate
           value={2019-06-16T06:00:00.000Z}
         />
       </EuiFlexItem>

x-pack/legacy/plugins/siem/public/components/ml/score/anomaly_score.tsx

@@ -27,6 +27,8 @@ const Icon = styled(EuiIcon)`
   cursor: pointer;
 `;
 
+Icon.displayName = 'Icon';
+
 export const AnomalyScore = React.memo<Args>(
   ({ jobKey, startDate, endDate, index = 0, score, interval, narrowDateRange }): JSX.Element => {
     const [isOpen, setIsOpen] = useState(false);
@@ -64,3 +66,5 @@ export const AnomalyScore = React.memo<Args>(
     );
   }
 );
+
+AnomalyScore.displayName = 'AnomalyScore';

x-pack/legacy/plugins/siem/public/components/ml/score/anomaly_scores.tsx

@@ -54,3 +54,5 @@ export const AnomalyScores = React.memo<Args>(
     }
   }
 );
+
+AnomalyScores.displayName = 'AnomalyScores';

x-pack/legacy/plugins/siem/public/components/ml/score/create_description_list.tsx

@@ -20,6 +20,8 @@ const LargeScore = styled(EuiText)`
   font-weight: lighter;
 `;
 
+LargeScore.displayName = 'LargeScore';
+
 export const createDescriptionList = (
   score: Anomaly,
   startDate: number,

x-pack/legacy/plugins/siem/public/components/ml/score/draggable_score.tsx

@@ -53,3 +53,5 @@ export const DraggableScore = React.memo<{
     />
   )
 );
+
+DraggableScore.displayName = 'DraggableScore';

x-pack/legacy/plugins/siem/public/components/ml/score/score_health.tsx

@@ -19,6 +19,8 @@ export const ScoreHealth = React.memo<Props>(({ score }) => {
   return <EuiHealth color={color}>{scoreCeiling}</EuiHealth>;
 });
 
+ScoreHealth.displayName = 'ScoreHealth';
+
 // ಠ_ಠ A hard-fork of the `ml` ml/common/util/anomaly_utils.js#getSeverityColor ಠ_ಠ
 //
 // Returns a severity label (one of critical, major, minor, warning, low or unknown)

x-pack/legacy/plugins/siem/public/components/ml/tables/anomalies_host_table.tsx

@@ -93,3 +93,7 @@ const Panel = styled(EuiPanel)<{ loading: { loading?: boolean } }>`
     overflow: hidden;
   `}
 `;
+
+Panel.displayName = 'Panel';
+
+AnomaliesHostTable.displayName = 'AnomaliesHostTable';

x-pack/legacy/plugins/siem/public/components/ml/tables/anomalies_network_table.tsx

@@ -96,3 +96,7 @@ const Panel = styled(EuiPanel)<{ loading: { loading?: boolean } }>`
     overflow: hidden;
   `}
 `;
+
+Panel.displayName = 'Panel';
+
+AnomaliesNetworkTable.displayName = 'AnomaliesNetworkTable';

x-pack/legacy/plugins/siem/public/components/ml/tables/basic_table.tsx

@@ -15,3 +15,5 @@ export const BasicTable = styled(EuiInMemoryTable)`
     }
   }
 `;
+
+BasicTable.displayName = 'BasicTable';

x-pack/legacy/plugins/siem/public/components/ml_popover/__snapshots__/upgrade_contents.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FilterGroup renders correctly against snapshot 1`] = `
-<styled.div
+<PopoverContentsDiv
   data-test-subj="ml-popover-upgrade-contents"
 >
   <EuiPopoverTitle>
@@ -25,5 +25,5 @@ exports[`FilterGroup renders correctly against snapshot 1`] = `
   >
     Subscription options
   </EuiButton>
-</styled.div>
+</PopoverContentsDiv>
 `;

x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/__snapshots__/job_switch.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`JobSwitch renders correctly against snapshot 1`] = `
   <EuiFlexItem
     grow={false}
   >
-    <Styled(EuiSwitch)
+    <StaticSwitch
       checked={true}
       data-test-subj="job-switch"
       disabled={false}

x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/__snapshots__/showing_count.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ShowingCount renders correctly against snapshot 1`] = `
-<styled.div
+<ShowingContainer
   data-test-subj="showing"
 >
   <EuiText
@@ -19,5 +19,5 @@ exports[`ShowingCount renders correctly against snapshot 1`] = `
       }
     />
   </EuiText>
-</styled.div>
+</ShowingContainer>
 `;

x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/filter_group.tsx

@@ -67,3 +67,5 @@ export const FilterGroup = React.memo<FilterGroupProps>(
     </EuiFlexGroup>
   )
 );
+
+FilterGroup.displayName = 'FilterGroup';

x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/job_switch.tsx

@@ -16,6 +16,8 @@ const StaticSwitch = styled(EuiSwitch)`
   }
 `;
 
+StaticSwitch.displayName = 'StaticSwitch';
+
 export interface JobSwitchProps {
   job: Job;
   isSummaryLoading: boolean;
@@ -64,3 +66,5 @@ export const JobSwitch = React.memo<JobSwitchProps>(
     );
   }
 );
+
+JobSwitch.displayName = 'JobSwitch';

x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/jobs_table.tsx

@@ -25,6 +25,8 @@ const JobNameWrapper = styled.div`
   margin: 5px 0;
 `;
 
+JobNameWrapper.displayName = 'JobNameWrapper';
+
 // TODO: Use SASS mixin @include EuiTextTruncate when we switch from styled components
 const truncateThreshold = 200;
 
@@ -99,6 +101,8 @@ export const JobsTable = React.memo(({ isLoading, jobs, onJobStateChange }: JobT
   );
 });
 
+JobsTable.displayName = 'JobsTable';
+
 export const NoItemsMessage = React.memo(() => (
   <EuiEmptyPrompt
     title={<h3>{i18n.NO_ITEMS_TEXT}</h3>}
@@ -116,3 +120,5 @@ export const NoItemsMessage = React.memo(() => (
     }
   />
 ));
+
+NoItemsMessage.displayName = 'NoItemsMessage';

x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/showing_count.tsx

@@ -15,6 +15,8 @@ const ShowingContainer = styled.div`
   margin-top: 5px;
 `;
 
+ShowingContainer.displayName = 'ShowingContainer';
+
 export interface ShowingCountProps {
   filterResultsLength: number;
 }
@@ -33,3 +35,5 @@ export const ShowingCount = React.memo<ShowingCountProps>(({ filterResultsLength
     </EuiText>
   </ShowingContainer>
 ));
+
+ShowingCount.displayName = 'ShowingCount';

x-pack/legacy/plugins/siem/public/components/ml_popover/ml_popover.tsx

@@ -31,6 +31,8 @@ const PopoverContentsDiv = styled.div`
   max-width: 550px;
 `;
 
+PopoverContentsDiv.displayName = 'PopoverContentsDiv';
+
 interface State {
   isLoading: boolean;
   jobs: Job[];
@@ -253,3 +255,5 @@ export const MlPopover = React.memo(() => {
     return null;
   }
 });
+
+MlPopover.displayName = 'MlPopover';

x-pack/legacy/plugins/siem/public/components/ml_popover/popover_description.tsx

@@ -27,3 +27,5 @@ export const PopoverDescription = React.memo(() => (
     />
   </EuiText>
 ));
+
+PopoverDescription.displayName = 'PopoverDescription';

x-pack/legacy/plugins/siem/public/components/ml_popover/upgrade_contents.tsx

@@ -14,6 +14,8 @@ const PopoverContentsDiv = styled.div`
   width: 384px;
 `;
 
+PopoverContentsDiv.displayName = 'PopoverContentsDiv';
+
 export const UpgradeContents = React.memo(() => {
   return (
     <PopoverContentsDiv data-test-subj="ml-popover-upgrade-contents">
@@ -31,3 +33,5 @@ export const UpgradeContents = React.memo(() => {
     </PopoverContentsDiv>
   );
 });
+
+UpgradeContents.displayName = 'UpgradeContents';

x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/index.tsx

@@ -57,6 +57,8 @@ const TabContainer = styled.div`
   }
 `;
 
+TabContainer.displayName = 'TabContainer';
+
 interface TabNavigationState {
   selectedTabId: string;
 }

x-pack/legacy/plugins/siem/public/components/netflow/__snapshots__/index.test.tsx.snap

@@ -105,7 +105,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
     }
   }
 >
-  <pure(Component)
+  <Netflow
     contextId="test"
     destinationBytes={
       Array [

x-pack/legacy/plugins/siem/public/components/netflow/fingerprints/index.tsx

@@ -82,3 +82,5 @@ export const Fingerprints = pure<{
     </EuiFlexGroup>
   )
 );
+
+Fingerprints.displayName = 'Fingerprints';