From 2c1262db97d8b8cc52ff0112e05ed4d1c7e81e0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= Date: Wed, 8 Jan 2020 09:06:14 +0100 Subject: [PATCH 01/10] [SIEM] Fix Inspect query 'request timestamp' value changes when cursor leaves modal --- .../siem/public/components/inspect/index.tsx | 130 ++++++++++-------- 1 file changed, 74 insertions(+), 56 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx b/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx index 04d6d94d6624d..4e461a0c30433 100644 --- a/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx @@ -8,6 +8,7 @@ import { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui'; import { getOr } from 'lodash/fp'; import React, { useCallback } from 'react'; import { connect } from 'react-redux'; +import deepEqual from 'fast-deep-equal'; import { ActionCreator } from 'typescript-fsa'; import styled from 'styled-components'; @@ -20,7 +21,7 @@ import * as i18n from './translations'; const InspectContainer = styled.div<{ showInspect: boolean }>` .euiButtonIcon { - ${props => (props.showInspect ? 'opacity: 1;' : 'opacity: 0')} + ${props => (props.showInspect ? 'opacity: 1;' : 'opacity: 0')}; transition: opacity ${props => getOr(250, 'theme.eui.euiAnimSpeedNormal', props)} ease; } `; @@ -57,44 +58,45 @@ interface InspectButtonDispatch { type InspectButtonProps = OwnProps & InspectButtonReducer & InspectButtonDispatch; -const InspectButtonComponent = React.memo( - ({ - compact = false, - inputId = 'global', - inspect, - isDisabled, - isInspected, - loading, - inspectIndex = 0, - onCloseInspect, - queryId = '', - selectedInspectIndex, - setIsInspected, - show, - title = '', - }: InspectButtonProps) => { - const handleClick = useCallback(() => { - setIsInspected({ - id: queryId, - inputId, - isInspected: true, - selectedInspectIndex: inspectIndex, - }); - }, [setIsInspected, queryId, inputId, inspectIndex]); - - const handleCloseModal = useCallback(() => { - if (onCloseInspect != null) { - onCloseInspect(); - } - setIsInspected({ - id: queryId, - inputId, - isInspected: false, - selectedInspectIndex: inspectIndex, - }); - }, [onCloseInspect, setIsInspected, queryId, inputId, inspectIndex]); - - return ( +const InspectButtonComponent: React.FC = ({ + compact = false, + inputId = 'global', + inspect, + isDisabled, + isInspected, + loading, + inspectIndex = 0, + onCloseInspect, + queryId = '', + selectedInspectIndex, + setIsInspected, + show, + title = '', +}) => { + const isShowingModal = !loading && selectedInspectIndex === inspectIndex && isInspected; + const handleClick = useCallback(() => { + setIsInspected({ + id: queryId, + inputId, + isInspected: true, + selectedInspectIndex: inspectIndex, + }); + }, [setIsInspected, queryId, inputId, inspectIndex]); + + const handleCloseModal = useCallback(() => { + if (onCloseInspect != null) { + onCloseInspect(); + } + setIsInspected({ + id: queryId, + inputId, + isInspected: false, + selectedInspectIndex: inspectIndex, + }); + }, [onCloseInspect, setIsInspected, queryId, inputId, inspectIndex]); + + return ( + <> ( onClick={handleClick} /> )} - 0 ? inspect.dsl[inspectIndex] : null} - response={ - inspect != null && inspect.response.length > 0 ? inspect.response[inspectIndex] : null - } - title={title} - data-test-subj="inspect-modal" - /> - ); - } -); - -InspectButtonComponent.displayName = 'InspectButtonComponent'; + 0 ? inspect.dsl[inspectIndex] : null} + response={ + inspect != null && inspect.response.length > 0 ? inspect.response[inspectIndex] : null + } + title={title} + data-test-subj="inspect-modal" + /> + + ); +}; const makeMapStateToProps = () => { const getGlobalQuery = inputsSelectors.globalQueryByIdSelector(); @@ -150,6 +150,24 @@ const makeMapStateToProps = () => { return mapStateToProps; }; -export const InspectButton = connect(makeMapStateToProps, { +const mapDispatchToProps = { setIsInspected: inputsActions.setInspectionParameter, -})(InspectButtonComponent); +}; + +export const InspectButton = connect( + makeMapStateToProps, + mapDispatchToProps +)( + React.memo(InspectButtonComponent, (prevProps, nextProps) => { + // we don't want to update modal content after when it's open + if ( + prevProps.isInspected && + nextProps.isInspected && + deepEqual(prevProps.inspect, nextProps.inspect) + ) { + return true; + } + + return deepEqual(prevProps, nextProps); + }) +); From dcb700bcf97472cb105e179bcb92e8126f02e9a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= Date: Wed, 8 Jan 2020 12:14:28 +0100 Subject: [PATCH 02/10] Fix import --- x-pack/legacy/plugins/siem/public/components/inspect/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx b/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx index 4e461a0c30433..7915e510da3c4 100644 --- a/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx @@ -8,7 +8,7 @@ import { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui'; import { getOr } from 'lodash/fp'; import React, { useCallback } from 'react'; import { connect } from 'react-redux'; -import deepEqual from 'fast-deep-equal'; +import deepEqual from 'fast-deep-equal/es6/react'; import { ActionCreator } from 'typescript-fsa'; import styled from 'styled-components'; From 2564efe94bcaf5e05cd0889264577a62f11a2957 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= Date: Wed, 8 Jan 2020 14:55:48 +0100 Subject: [PATCH 03/10] [SIEM] Use css approach --- .../line_tool_tip_content.test.tsx.snap | 16 +- .../events_viewer/events_viewer.tsx | 307 +++-- .../components/events_viewer/index.test.tsx | 9 +- .../public/components/events_viewer/index.tsx | 12 +- .../components/header_section/index.test.tsx | 30 - .../components/header_section/index.tsx | 78 +- .../public/components/inspect/index.test.tsx | 30 +- .../siem/public/components/inspect/index.tsx | 100 +- .../components/matrix_histogram/index.tsx | 63 +- .../__snapshots__/anomaly_score.test.tsx.snap | 6 +- .../__snapshots__/new_note.test.tsx.snap | 8 +- .../__snapshots__/index.test.tsx.snap | 4 +- .../page/hosts/host_overview/index.tsx | 45 +- .../page/network/ip_overview/index.tsx | 45 +- .../page/overview/overview_host/index.tsx | 23 +- .../page/overview/overview_network/index.tsx | 24 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../components/paginated_table/index.tsx | 228 ++-- .../__snapshots__/index.test.tsx.snap | 1138 ++++++++--------- .../public/components/stat_items/index.tsx | 128 +- .../data_providers.test.tsx.snap | 4 +- .../timeline/properties/properties_right.tsx | 93 +- .../__snapshots__/index.test.tsx.snap | 2 +- 23 files changed, 1140 insertions(+), 1255 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/line_tool_tip_content.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/line_tool_tip_content.test.tsx.snap index 05f507ec3a775..436255d4e003a 100644 --- a/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/line_tool_tip_content.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/line_tool_tip_content.test.tsx.snap @@ -6,10 +6,10 @@ exports[`LineToolTipContent renders correctly against snapshot 1`] = ` justifyContent="center" > - - Source - - + + - - + Destination - - + + `; diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx index aaf88e68684ca..2c669c259d07e 100644 --- a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx +++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx @@ -59,7 +59,6 @@ interface Props { kqlMode: KqlMode; onChangeItemsPerPage: OnChangeItemsPerPage; query: Query; - showInspect: boolean; start: number; sort: Sort; timelineTypeContext: TimelineTypeContextProps; @@ -67,171 +66,171 @@ interface Props { utilityBar?: (totalCount: number) => React.ReactNode; } -export const EventsViewer = React.memo( - ({ - browserFields, - columns, +const EventsViewerComponent: React.FC = ({ + browserFields, + columns, + dataProviders, + deletedEventIds, + end, + filters, + headerFilterGroup, + height = DEFAULT_EVENTS_VIEWER_HEIGHT, + id, + indexPattern, + isLive, + itemsPerPage, + itemsPerPageOptions, + kqlMode, + onChangeItemsPerPage, + query, + start, + sort, + timelineTypeContext, + toggleColumn, + utilityBar, +}) => { + const columnsHeader = isEmpty(columns) ? defaultHeaders : columns; + const kibana = useKibana(); + const combinedQueries = combineQueries({ + config: esQuery.getEsQueryConfig(kibana.services.uiSettings), dataProviders, - deletedEventIds, - end, - filters, - headerFilterGroup, - height = DEFAULT_EVENTS_VIEWER_HEIGHT, - id, indexPattern, - isLive, - itemsPerPage, - itemsPerPageOptions, + browserFields, + filters, + kqlQuery: query, kqlMode, - onChangeItemsPerPage, - query, - showInspect, start, - sort, - timelineTypeContext, - toggleColumn, - utilityBar, - }) => { - const columnsHeader = isEmpty(columns) ? defaultHeaders : columns; - const kibana = useKibana(); - const combinedQueries = combineQueries({ - config: esQuery.getEsQueryConfig(kibana.services.uiSettings), - dataProviders, - indexPattern, - browserFields, - filters, - kqlQuery: query, - kqlMode, - start, - end, - isEventViewer: true, - }); - const queryFields = useMemo( - () => - union( - columnsHeader.map(c => c.id), - timelineTypeContext.queryFields ?? [] - ), - [columnsHeader, timelineTypeContext.queryFields] - ); + end, + isEventViewer: true, + }); + const queryFields = useMemo( + () => + union( + columnsHeader.map(c => c.id), + timelineTypeContext.queryFields ?? [] + ), + [columnsHeader, timelineTypeContext.queryFields] + ); - return ( - - - {({ measureRef, content: { width = 0 } }) => ( - <> - -
- + return ( + + + {({ measureRef, content: { width = 0 } }) => ( + <> + +
+ - {combinedQueries != null ? ( - - {({ - events, - getUpdatedAt, - inspect, - loading, - loadMore, - pageInfo, - refetch, - totalCount = 0, - }) => { - const totalCountMinusDeleted = - totalCount > 0 ? totalCount - deletedEventIds.length : 0; + {combinedQueries != null ? ( + + {({ + events, + getUpdatedAt, + inspect, + loading, + loadMore, + pageInfo, + refetch, + totalCount = 0, + }) => { + const totalCountMinusDeleted = + totalCount > 0 ? totalCount - deletedEventIds.length : 0; - // TODO: Reset eventDeletedIds/eventLoadingIds on refresh/loadmore (getUpdatedAt) - return ( - <> - - {headerFilterGroup} - + // TODO: Reset eventDeletedIds/eventLoadingIds on refresh/loadmore (getUpdatedAt) + return ( + <> + + {headerFilterGroup} + - {utilityBar?.(totalCountMinusDeleted)} + {utilityBar?.(totalCountMinusDeleted)} -
+ - - + refetch={refetch} + /> + + !deletedEventIds.includes(e._id))} + id={id} + isEventViewer={true} + height={height} + sort={sort} + toggleColumn={toggleColumn} + /> - !deletedEventIds.includes(e._id))} - id={id} - isEventViewer={true} - height={height} - sort={sort} - toggleColumn={toggleColumn} - /> +
+ +
+ + ); + }} + + ) : null} + + )} + + + ); +}; -
- -
- - ); - }} - - ) : null} - - )} - - - ); - }, +export const EventsViewer = React.memo( + EventsViewerComponent, (prevProps, nextProps) => prevProps.browserFields === nextProps.browserFields && prevProps.columns === nextProps.columns && @@ -247,10 +246,8 @@ export const EventsViewer = React.memo( prevProps.itemsPerPageOptions === nextProps.itemsPerPageOptions && prevProps.kqlMode === nextProps.kqlMode && isEqual(prevProps.query, nextProps.query) && - prevProps.showInspect === nextProps.showInspect && prevProps.start === nextProps.start && prevProps.sort === nextProps.sort && isEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) && prevProps.utilityBar === nextProps.utilityBar ); -EventsViewer.displayName = 'EventsViewer'; diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx index 1e225dabb2541..b8a0d80773595 100644 --- a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx @@ -16,6 +16,7 @@ import { StatefulEventsViewer } from '.'; import { useFetchIndexPatterns } from '../../containers/detection_engine/rules/fetch_index_patterns'; import { mockBrowserFields } from '../../containers/source/mock'; import { eventsDefaultModel } from './default_model'; +import { BUTTON_CLASS } from '../inspect'; const mockUseFetchIndexPatterns: jest.Mock = useFetchIndexPatterns as jest.Mock; jest.mock('../../containers/detection_engine/rules/fetch_index_patterns'); @@ -76,10 +77,10 @@ describe('StatefulEventsViewer', () => { expect( wrapper - .find(`[data-test-subj="transparent-inspect-container"]`) + .find(`.${BUTTON_CLASS}`) .first() .exists() - ).toBe(true); + ).toHaveStyleRule('opacity', 0); }); test('it renders an opaque inspect button when it has mouse focus', async () => { @@ -104,9 +105,9 @@ describe('StatefulEventsViewer', () => { expect( wrapper - .find(`[data-test-subj="opaque-inspect-container"]`) + .find(`.${BUTTON_CLASS}`) .first() .exists() - ).toBe(true); + ).toHaveStyleRule('opacity', 1); }); }); diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx index 9b8ec243d5f38..7da01ca04b5a4 100644 --- a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx @@ -5,7 +5,7 @@ */ import { isEqual } from 'lodash/fp'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect } from 'react'; import { connect } from 'react-redux'; import { ActionCreator } from 'typescript-fsa'; import { inputsModel, inputsSelectors, State, timelineSelectors } from '../../store'; @@ -23,6 +23,7 @@ import { InputsModelId } from '../../store/inputs/constants'; import { useFetchIndexPatterns } from '../../containers/detection_engine/rules/fetch_index_patterns'; import { TimelineTypeContextProps } from '../timeline/timeline_context'; import { DEFAULT_INDEX_KEY } from '../../../common/constants'; +import { InspectButtonContainer } from '../inspect'; import * as i18n from './translations'; export interface OwnProps { @@ -114,7 +115,6 @@ const StatefulEventsViewerComponent = React.memo( upsertColumn, utilityBar, }) => { - const [showInspect, setShowInspect] = useState(false); const [{ browserFields, indexPatterns }] = useFetchIndexPatterns( defaultIndices ?? useUiSetting(DEFAULT_INDEX_KEY) ); @@ -155,11 +155,8 @@ const StatefulEventsViewerComponent = React.memo( [columns, id, upsertColumn, removeColumn] ); - const handleOnMouseEnter = useCallback(() => setShowInspect(true), []); - const handleOnMouseLeave = useCallback(() => setShowInspect(false), []); - return ( -
+ ( kqlMode={kqlMode} onChangeItemsPerPage={onChangeItemsPerPage} query={query} - showInspect={showInspect} start={start} sort={sort!} timelineTypeContext={timelineTypeContext} toggleColumn={toggleColumn} utilityBar={utilityBar} /> -
+ ); }, (prevProps, nextProps) => diff --git a/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx index 2bc80be20e42d..bc4692b6fe0c5 100644 --- a/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx @@ -63,36 +63,6 @@ describe('HeaderSection', () => { ).toBe(false); }); - test('it renders a transparent inspect button when showInspect is false', () => { - const wrapper = mount( - - - - ); - - expect( - wrapper - .find('[data-test-subj="transparent-inspect-container"]') - .first() - .exists() - ).toBe(true); - }); - - test('it renders an opaque inspect button when showInspect is true', () => { - const wrapper = mount( - - - - ); - - expect( - wrapper - .find('[data-test-subj="opaque-inspect-container"]') - .first() - .exists() - ).toBe(true); - }); - test('it renders supplements when children provided', () => { const wrapper = mount( diff --git a/x-pack/legacy/plugins/siem/public/components/header_section/index.tsx b/x-pack/legacy/plugins/siem/public/components/header_section/index.tsx index 14af10eb6cd9b..3153e785a8a32 100644 --- a/x-pack/legacy/plugins/siem/public/components/header_section/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/header_section/index.tsx @@ -35,48 +35,54 @@ export interface HeaderSectionProps extends HeaderProps { id?: string; split?: boolean; subtitle?: string | React.ReactNode; - showInspect?: boolean; title: string | React.ReactNode; tooltip?: string; } -export const HeaderSection = React.memo( - ({ border, children, id, showInspect = false, split, subtitle, title, tooltip }) => ( -
- - - - - -

- {title} - {tooltip && ( - <> - {' '} - - - )} -

- +const HeaderSectionComponent: React.FC = ({ + border, + children, + id, + split, + subtitle, + title, + tooltip, +}) => ( +
+ + + + + +

+ {title} + {tooltip && ( + <> + {' '} + + + )} +

+ - {subtitle && } + {subtitle && } + + + {id && ( + + + )} + + - {id && ( - - - - )} - + {children && ( + + {children} - - {children && ( - - {children} - - )} - -
- ) + )} + +
); -HeaderSection.displayName = 'HeaderSection'; + +export const HeaderSection = React.memo(HeaderSectionComponent); diff --git a/x-pack/legacy/plugins/siem/public/components/inspect/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/inspect/index.test.tsx index 26c5f499717e9..c4a6ce7a6590c 100644 --- a/x-pack/legacy/plugins/siem/public/components/inspect/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/inspect/index.test.tsx @@ -44,7 +44,7 @@ describe('Inspect Button', () => { test('Eui Empty Button', () => { const wrapper = mount( - + ); expect( @@ -58,13 +58,7 @@ describe('Inspect Button', () => { test('it does NOT render the Eui Empty Button when timeline is timeline and compact is true', () => { const wrapper = mount( - + ); expect( @@ -78,7 +72,7 @@ describe('Inspect Button', () => { test('Eui Icon Button', () => { const wrapper = mount( - + ); expect( @@ -92,13 +86,7 @@ describe('Inspect Button', () => { test('renders the Icon Button when inputId does NOT equal global, but compact is true', () => { const wrapper = mount( - + ); expect( @@ -112,7 +100,7 @@ describe('Inspect Button', () => { test('Eui Empty Button disabled', () => { const wrapper = mount( - + ); expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true); @@ -121,7 +109,7 @@ describe('Inspect Button', () => { test('Eui Icon Button disabled', () => { const wrapper = mount( - + ); expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true); @@ -143,7 +131,7 @@ describe('Inspect Button', () => { const wrapper = mount( - + ); @@ -167,7 +155,7 @@ describe('Inspect Button', () => { const wrapper = mount( - + ); @@ -197,7 +185,7 @@ describe('Inspect Button', () => { test('Do not Open Inspect Modal if it is loading', () => { const wrapper = mount( - + ); store.getState().inputs.global.queries[0].loading = true; diff --git a/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx b/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx index 7915e510da3c4..dc321a9a2d000 100644 --- a/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx @@ -8,9 +8,8 @@ import { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui'; import { getOr } from 'lodash/fp'; import React, { useCallback } from 'react'; import { connect } from 'react-redux'; -import deepEqual from 'fast-deep-equal/es6/react'; import { ActionCreator } from 'typescript-fsa'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { inputsModel, inputsSelectors, State } from '../../store'; import { InputsModelId } from '../../store/inputs/constants'; @@ -19,14 +18,29 @@ import { inputsActions } from '../../store/inputs'; import { ModalInspectQuery } from './modal'; import * as i18n from './translations'; -const InspectContainer = styled.div<{ showInspect: boolean }>` - .euiButtonIcon { - ${props => (props.showInspect ? 'opacity: 1;' : 'opacity: 0')}; +export const BUTTON_CLASS = 'inspectButtonComponent'; + +export const InspectButtonContainer = styled.div<{ show?: boolean }>` + display: flex; + flex-grow: 1; + + .${BUTTON_CLASS} { + opacity: 0; transition: opacity ${props => getOr(250, 'theme.eui.euiAnimSpeedNormal', props)} ease; } + + ${({ show }) => + show && + css` + &:hover .${BUTTON_CLASS} { + opacity: 1; + } + `} `; -InspectContainer.displayName = 'InspectContainer'; +InspectButtonContainer.defaultProps = { + show: true, +}; interface OwnProps { compact?: boolean; @@ -35,7 +49,6 @@ interface OwnProps { inspectIndex?: number; isDisabled?: boolean; onCloseInspect?: () => void; - show: boolean; title: string | React.ReactElement | React.ReactNode; } @@ -70,7 +83,6 @@ const InspectButtonComponent: React.FC = ({ queryId = '', selectedInspectIndex, setIsInspected, - show, title = '', }) => { const isShowingModal = !loading && selectedInspectIndex === inspectIndex && isInspected; @@ -97,36 +109,33 @@ const InspectButtonComponent: React.FC = ({ return ( <> - - {inputId === 'timeline' && !compact && ( - - {i18n.INSPECT} - - )} - {(inputId === 'global' || compact) && ( - - )} - + {inputId === 'timeline' && !compact && ( + + {i18n.INSPECT} + + )} + {(inputId === 'global' || compact) && ( + + )} { - // we don't want to update modal content after when it's open - if ( - prevProps.isInspected && - nextProps.isInspected && - deepEqual(prevProps.inspect, nextProps.inspect) - ) { - return true; - } - - return deepEqual(prevProps, nextProps); - }) -); +)(React.memo(InspectButtonComponent)); diff --git a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx index c29b5282e13af..94c05d00d5462 100644 --- a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useState, useEffect } from 'react'; import { ScaleType } from '@elastic/charts'; import darkTheme from '@elastic/eui/dist/eui_theme_dark.json'; @@ -17,10 +17,11 @@ import { DEFAULT_DARK_MODE } from '../../../common/constants'; import { useUiSetting$ } from '../../lib/kibana'; import { Loader } from '../loader'; import { Panel } from '../panel'; +import { InspectButtonContainer } from '../inspect'; import { getBarchartConfigs, getCustomChartData } from './utils'; import { MatrixHistogramProps, MatrixHistogramDataTypes } from './types'; -export const MatrixHistogram = ({ +export const MatrixHistogramComponent: React.FC> = ({ data, dataKey, endDate, @@ -35,7 +36,7 @@ export const MatrixHistogram = ({ updateDateRange, yTickFormatter, showLegend, -}: MatrixHistogramProps) => { +}) => { const barchartConfigs = getBarchartConfigs({ from: startDate, to: endDate, @@ -44,7 +45,6 @@ export const MatrixHistogram = ({ yTickFormatter, showLegend, }); - const [showInspect, setShowInspect] = useState(false); const [darkMode] = useUiSetting$(DEFAULT_DARK_MODE); const [loadingInitial, setLoadingInitial] = useState(false); @@ -56,40 +56,31 @@ export const MatrixHistogram = ({ } }, [loading, loadingInitial, totalCount]); - const handleOnMouseEnter = useCallback(() => setShowInspect(true), []); - const handleOnMouseLeave = useCallback(() => setShowInspect(false), []); - return ( - - + + + - {loadingInitial ? ( - - ) : ( - <> - + {loadingInitial ? ( + + ) : ( + <> + - {loading && ( - - )} - - )} - + {loading && ( + + )} + + )} + + ); }; + +export const MatrixHistogram = React.memo(MatrixHistogramComponent); diff --git a/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap index 1cf35aac19043..b8f1946e8d982 100644 --- a/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap @@ -82,7 +82,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = ` } @@ -105,9 +105,9 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = ` - + 17 - + , "title": "Max Anomaly Score", }, diff --git a/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap index b4e6bce163057..085e3f05b8add 100644 --- a/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap @@ -5,7 +5,7 @@ exports[`NewNote renders correctly 1`] = ` data-test-subj="new-note-tabs" initialSelectedTab={ Object { - "content": - , + , "id": "preview", "name": "Preview (Markdown)", }, diff --git a/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap index 42ef4e5404faa..76540fe858b63 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap @@ -3,7 +3,7 @@ exports[`AddFilterToGlobalSearchBar Component Rendering 1`] = ` @@ -18,7 +18,7 @@ exports[`AddFilterToGlobalSearchBar Component Rendering 1`] = ` type="filter" /> - + } render={[Function]} /> diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/host_overview/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/host_overview/index.tsx index 9e3f8f91d5cf7..bf32a33af1eac 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/hosts/host_overview/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/host_overview/index.tsx @@ -8,14 +8,14 @@ import { EuiFlexItem } from '@elastic/eui'; import darkTheme from '@elastic/eui/dist/eui_theme_dark.json'; import lightTheme from '@elastic/eui/dist/eui_theme_light.json'; import { getOr } from 'lodash/fp'; -import React, { useContext, useState, useCallback } from 'react'; +import React, { useContext } from 'react'; import { DEFAULT_DARK_MODE } from '../../../../../common/constants'; import { DescriptionList } from '../../../../../common/utility_types'; import { useUiSetting$ } from '../../../../lib/kibana'; import { getEmptyTagValue } from '../../../empty_value'; import { DefaultFieldRenderer, hostIdRenderer } from '../../../field_renderers/field_renderers'; -import { InspectButton } from '../../../inspect'; +import { InspectButton, InspectButtonContainer } from '../../../inspect'; import { HostItem } from '../../../../graphql/types'; import { Loader } from '../../../loader'; import { IPDetailsLink } from '../../../links'; @@ -56,7 +56,6 @@ export const HostOverview = React.memo( anomaliesData, narrowDateRange, }) => { - const [showInspect, setShowInspect] = useState(false); const capabilities = useContext(MlCapabilitiesContext); const userPermissions = hasMlUserPermissions(capabilities); const [darkMode] = useUiSetting$(DEFAULT_DARK_MODE); @@ -165,32 +164,26 @@ export const HostOverview = React.memo( ], ]; - const handleOnMouseEnter = useCallback(() => setShowInspect(true), []); - const handleOnMouseLeave = useCallback(() => setShowInspect(false), []); - return ( - - + + + - {descriptionLists.map((descriptionList, index) => - getDescriptionList(descriptionList, index) - )} + {descriptionLists.map((descriptionList, index) => + getDescriptionList(descriptionList, index) + )} - {loading && ( - - )} - + {loading && ( + + )} + + ); } ); diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/index.tsx index 0c4e594399517..901b82210a661 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/index.tsx @@ -7,7 +7,7 @@ import { EuiFlexItem } from '@elastic/eui'; import darkTheme from '@elastic/eui/dist/eui_theme_dark.json'; import lightTheme from '@elastic/eui/dist/eui_theme_light.json'; -import React, { useContext, useState, useCallback } from 'react'; +import React, { useContext } from 'react'; import { DEFAULT_DARK_MODE } from '../../../../../common/constants'; import { DescriptionList } from '../../../../../common/utility_types'; @@ -32,7 +32,7 @@ import { Anomalies, NarrowDateRange } from '../../../ml/types'; import { AnomalyScores } from '../../../ml/score/anomaly_scores'; import { MlCapabilitiesContext } from '../../../ml/permissions/ml_capabilities_provider'; import { hasMlUserPermissions } from '../../../ml/permissions/has_ml_user_permissions'; -import { InspectButton } from '../../../inspect'; +import { InspectButton, InspectButtonContainer } from '../../../inspect'; interface OwnProps { data: IpOverviewData; @@ -71,7 +71,6 @@ export const IpOverview = React.memo( anomaliesData, narrowDateRange, }) => { - const [showInspect, setShowInspect] = useState(false); const capabilities = useContext(MlCapabilitiesContext); const userPermissions = hasMlUserPermissions(capabilities); const [darkMode] = useUiSetting$(DEFAULT_DARK_MODE); @@ -140,32 +139,26 @@ export const IpOverview = React.memo( ], ]; - const handleOnMouseEnter = useCallback(() => setShowInspect(true), []); - const handleOnMouseLeave = useCallback(() => setShowInspect(false), []); - return ( - - + + + - {descriptionLists.map((descriptionList, index) => - getDescriptionList(descriptionList, index) - )} + {descriptionLists.map((descriptionList, index) => + getDescriptionList(descriptionList, index) + )} - {loading && ( - - )} - + {loading && ( + + )} + + ); } ); diff --git a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host/index.tsx index 302917c3de93e..a70d9d0080271 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host/index.tsx @@ -6,7 +6,7 @@ import { EuiButton, EuiFlexItem, EuiPanel } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import React, { useState, useCallback } from 'react'; +import React from 'react'; import { HeaderSection } from '../../../header_section'; import { manageQuery } from '../../../page/manage_query'; @@ -17,6 +17,7 @@ import { import { inputsModel } from '../../../../store/inputs'; import { OverviewHostStats } from '../overview_host_stats'; import { getHostsUrl } from '../../../link_to'; +import { InspectButtonContainer } from '../../../inspect'; export interface OwnProps { startDate: number; @@ -36,18 +37,14 @@ export interface OwnProps { const OverviewHostStatsManage = manageQuery(OverviewHostStats); type OverviewHostProps = OwnProps; -export const OverviewHost = React.memo(({ endDate, startDate, setQuery }) => { - const [isHover, setIsHover] = useState(false); - const handleMouseEnter = useCallback(() => setIsHover(true), [setIsHover]); - const handleMouseLeave = useCallback(() => setIsHover(false), [setIsHover]); - return ( - - +const OverviewHostComponent: React.FC = ({ endDate, startDate, setQuery }) => ( + + + (({ endDate, startDate, )} - - ); -}); + + +); -OverviewHost.displayName = 'OverviewHost'; +export const OverviewHost = React.memo(OverviewHostComponent); diff --git a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network/index.tsx index f60957cf7b485..af8c87ff38596 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network/index.tsx @@ -6,7 +6,7 @@ import { EuiButton, EuiFlexItem, EuiPanel } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; -import React, { useState, useCallback } from 'react'; +import React from 'react'; import { HeaderSection } from '../../../header_section'; import { manageQuery } from '../../../page/manage_query'; @@ -17,6 +17,7 @@ import { import { inputsModel } from '../../../../store/inputs'; import { OverviewNetworkStats } from '../overview_network_stats'; import { getNetworkUrl } from '../../../link_to'; +import { InspectButtonContainer } from '../../../inspect'; export interface OwnProps { startDate: number; @@ -36,18 +37,13 @@ export interface OwnProps { const OverviewNetworkStatsManage = manageQuery(OverviewNetworkStats); -export const OverviewNetwork = React.memo(({ endDate, startDate, setQuery }) => { - const [isHover, setIsHover] = useState(false); - const handleMouseEnter = useCallback(() => setIsHover(true), [setIsHover]); - const handleMouseLeave = useCallback(() => setIsHover(false), [setIsHover]); - - return ( - - +const OverviewNetworkComponent: React.FC = ({ endDate, startDate, setQuery }) => ( + + + (({ endDate, startDate, setQu )} - - ); -}); + + +); -OverviewNetwork.displayName = 'OverviewNetwork'; +export const OverviewNetwork = React.memo(OverviewNetworkComponent); diff --git a/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap index 9c3bf7b11e3ed..98c9fc202dd6b 100644 --- a/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap @@ -520,7 +520,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta } } > - { width?: string; } -export const PaginatedTable = memo( - ({ - activePage, - columns, - dataTestSubj = DEFAULT_DATA_TEST_SUBJ, - headerCount, - headerSupplement, - headerTitle, - headerTooltip, - headerUnit, - id, - isInspect, - itemsPerRow, - limit, - loading, - loadPage, - onChange = noop, - pageOfItems, - showMorePagesIndicator, - sorting = null, - totalCount, - updateActivePage, - updateLimitPagination, - }) => { - const [myLoading, setMyLoading] = useState(loading); - const [myActivePage, setActivePage] = useState(activePage); - const [showInspect, setShowInspect] = useState(false); - const [loadingInitial, setLoadingInitial] = useState(headerCount === -1); - const [isPopoverOpen, setPopoverOpen] = useState(false); - - const pageCount = Math.ceil(totalCount / limit); - const dispatchToaster = useStateToaster()[1]; - - useEffect(() => { - setActivePage(activePage); - }, [activePage]); - - useEffect(() => { - if (headerCount >= 0 && loadingInitial) { - setLoadingInitial(false); - } - }, [loadingInitial, headerCount]); - - useEffect(() => { - setMyLoading(loading); - }, [loading]); - - const onButtonClick = () => { - setPopoverOpen(!isPopoverOpen); - }; - - const closePopover = () => { - setPopoverOpen(false); - }; - - const goToPage = (newActivePage: number) => { - if ((newActivePage + 1) * limit >= DEFAULT_MAX_TABLE_QUERY_SIZE) { - const toast: Toast = { - id: 'PaginationWarningMsg', - title: headerTitle + i18n.TOAST_TITLE, - color: 'warning', - iconType: 'alert', - toastLifeTimeMs: 10000, - text: i18n.TOAST_TEXT, - }; - return dispatchToaster({ - type: 'addToaster', - toast, - }); - } - setActivePage(newActivePage); - loadPage(newActivePage); - updateActivePage(newActivePage); - }; - - const button = ( - - {`${i18n.ROWS}: ${limit}`} - - ); - - const rowItems = - itemsPerRow && - itemsPerRow.map((item: ItemsPerRow) => ( - { - closePopover(); - updateLimitPagination(item.numberOfRow); - updateActivePage(0); // reset results to first page - }} - > - {item.text} - - )); - const PaginationWrapper = showMorePagesIndicator ? PaginationEuiFlexItem : EuiFlexItem; - const handleOnMouseEnter = useCallback(() => setShowInspect(true), []); - const handleOnMouseLeave = useCallback(() => setShowInspect(false), []); - - return ( - = ({ + activePage, + columns, + dataTestSubj = DEFAULT_DATA_TEST_SUBJ, + headerCount, + headerSupplement, + headerTitle, + headerTooltip, + headerUnit, + id, + isInspect, + itemsPerRow, + limit, + loading, + loadPage, + onChange = noop, + pageOfItems, + showMorePagesIndicator, + sorting = null, + totalCount, + updateActivePage, + updateLimitPagination, +}) => { + const [myLoading, setMyLoading] = useState(loading); + const [myActivePage, setActivePage] = useState(activePage); + const [loadingInitial, setLoadingInitial] = useState(headerCount === -1); + const [isPopoverOpen, setPopoverOpen] = useState(false); + + const pageCount = Math.ceil(totalCount / limit); + const dispatchToaster = useStateToaster()[1]; + + useEffect(() => { + setActivePage(activePage); + }, [activePage]); + + useEffect(() => { + if (headerCount >= 0 && loadingInitial) { + setLoadingInitial(false); + } + }, [loadingInitial, headerCount]); + + useEffect(() => { + setMyLoading(loading); + }, [loading]); + + const onButtonClick = () => { + setPopoverOpen(!isPopoverOpen); + }; + + const closePopover = () => { + setPopoverOpen(false); + }; + + const goToPage = (newActivePage: number) => { + if ((newActivePage + 1) * limit >= DEFAULT_MAX_TABLE_QUERY_SIZE) { + const toast: Toast = { + id: 'PaginationWarningMsg', + title: headerTitle + i18n.TOAST_TITLE, + color: 'warning', + iconType: 'alert', + toastLifeTimeMs: 10000, + text: i18n.TOAST_TEXT, + }; + return dispatchToaster({ + type: 'addToaster', + toast, + }); + } + setActivePage(newActivePage); + loadPage(newActivePage); + updateActivePage(newActivePage); + }; + + const button = ( + + {`${i18n.ROWS}: ${limit}`} + + ); + + const rowItems = + itemsPerRow && + itemsPerRow.map((item: ItemsPerRow) => ( + { + closePopover(); + updateLimitPagination(item.numberOfRow); + updateActivePage(0); // reset results to first page + }} > + {item.text} + + )); + const PaginationWrapper = showMorePagesIndicator ? PaginationEuiFlexItem : EuiFlexItem; + + return ( + + = 0 ? headerCount.toLocaleString() : 0} ${headerUnit}` @@ -306,11 +298,11 @@ export const PaginatedTable = memo( )} - ); - } -); + + ); +}; -PaginatedTable.displayName = 'PaginatedTable'; +export const PaginatedTable = memo(PaginatedTableComponent); type BasicTableType = ComponentType>; // eslint-disable-line @typescript-eslint/no-explicit-any const BasicTable: typeof EuiBasicTable & { displayName: string } = styled( diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap index 098f54640e4b2..c6b2d3960c1ea 100644 --- a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap @@ -45,71 +45,63 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] = className="euiFlexItem sc-AykKG krmHWP" data-test-subj="stat-item" > -
- +
- -
- -
- HOSTS -
- -
- -
- +
+ +
+ HOSTS +
+ +
+ + - - -
- - - + + +
+
- -
- - -
- - + +
-
-
- - +
-
- - + +
-

- - + +

- — - - - -

- - -
- - + + + — + + + +

+ + +
+ + +
+
- -
- - + + +
+ + +
+
- - -
- +
- +
@@ -287,71 +279,63 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] = className="euiFlexItem sc-AykKG krmHWP" data-test-subj="stat-item" > -
- +
- -
- -
- HOSTS -
- -
- -
- +
+ +
+ HOSTS +
+ +
+ + - - -
- - - + + +
+
- -
- - -
- - + +
-
-
- 0 - - +
-
- - + +
-

- - + +

- — - - - -

- - -
- - + + + — + + + +

+ + +
+ + +
+
- -
- - + + +
+ + +
+
- - -
- +
- +
@@ -599,71 +583,63 @@ exports[`Stat Items Component rendering kpis with charts it renders the default className="euiFlexItem sc-AykKG krmHWP" data-test-subj="stat-item" > -
- +
- -
- -
- UNIQUE_PRIVATE_IPS -
- -
- -
- +
+ +
+ UNIQUE_PRIVATE_IPS +
+ +
+ + - - -
- - - + + +
+
- -
- - -
- - + +
-
-
- - -
- - - + - - -
- - - - -
- - + + + +
+ + + + +
-

- 1,714 - - Source -

- - -
- - + + +

+ 1,714 + + Source +

+ + +
+ + +
+
- -
- - - - -
+ + -
- - -
- - - + - - -
- - - - -
- - + + + +
+ + + + +
-

- 2,359 - - Dest. -

- - -
- - + + +

+ 2,359 + + Dest. +

+ + +
+ + +
+
- - - - - - - -
- - -
- - + +
+ + +
+ + +
-
- + +
+ +
+ +
+ + + +
- -
- - - - -
- + -
- -
- - + } + } + > +
+ +
+ + +
+
- +
- +
diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx b/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx index 2d081468599a2..a5c883ebd0e05 100644 --- a/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/stat_items/index.tsx @@ -21,7 +21,7 @@ import { IconType, } from '@elastic/eui'; import { get, getOr } from 'lodash/fp'; -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import { KpiHostsData, KpiNetworkData } from '../../graphql/types'; @@ -30,7 +30,7 @@ import { BarChart } from '../charts/barchart'; import { ChartSeriesData, ChartData, ChartSeriesConfigs, UpdateDateRange } from '../charts/common'; import { getEmptyTagValue } from '../empty_value'; -import { InspectButton } from '../inspect'; +import { InspectButton, InspectButtonContainer } from '../inspect'; const FlexItem = styled(EuiFlexItem)` min-width: 0; @@ -209,9 +209,6 @@ export const StatItemsComponent = React.memo( statKey = 'item', to, }) => { - const [isHover, setIsHover] = useState(false); - const handleMouseEnter = useCallback(() => setIsHover(true), [setIsHover]); - const handleMouseLeave = useCallback(() => setIsHover(false), [setIsHover]); const isBarChartDataAvailable = barChart && barChart.length && @@ -223,72 +220,69 @@ export const StatItemsComponent = React.memo( return ( - - - - -
{description}
- - - - - - + + + + + +
{description}
+ + + + + + - - {fields.map(field => ( - - - {(isAreaChartDataAvailable || isBarChartDataAvailable) && field.icon && ( - - - - )} + + {fields.map(field => ( + + + {(isAreaChartDataAvailable || isBarChartDataAvailable) && field.icon && ( + + + + )} - - -

- {field.value != null ? field.value.toLocaleString() : getEmptyTagValue()}{' '} - {field.description} -

- - - - - ))} - + + +

+ {field.value != null ? field.value.toLocaleString() : getEmptyTagValue()}{' '} + {field.description} +

+ + + + + ))} + - {(enableAreaChart || enableBarChart) && } - - {enableBarChart && ( - - - - )} + {(enableAreaChart || enableBarChart) && } + + {enableBarChart && ( + + + + )} - {enableAreaChart && from != null && to != null && ( - - - - )} - - + {enableAreaChart && from != null && to != null && ( + + + + )} + + + ); } diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap index 24b034d893d6b..79dd45f21baa9 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DataProviders rendering renders correctly against snapshot 1`] = ` - - + `; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/properties/properties_right.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/properties/properties_right.tsx index 4027682282dcd..8f2b39ddb794e 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/properties/properties_right.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/properties/properties_right.tsx @@ -17,7 +17,7 @@ import { import { NewTimeline, Description, NotesButton } from './helpers'; import { OpenTimelineModalButton } from '../../open_timeline/open_timeline_modal/open_timeline_modal_button'; import { OpenTimelineModal } from '../../open_timeline/open_timeline_modal'; -import { InspectButton } from '../../inspect'; +import { InspectButton, InspectButtonContainer } from '../../inspect'; import * as i18n from './translations'; import { AssociateNote } from '../../notes/helpers'; @@ -82,31 +82,31 @@ interface Props { updateNote: UpdateNote; } -export const PropertiesRight = React.memo( - ({ - onButtonClick, - showActions, - onClosePopover, - createTimeline, - timelineId, - isDataInTimeline, - showNotesFromWidth, - showNotes, - showDescription, - showUsersView, - usersViewing, - description, - updateDescription, - associateNote, - getNotesByIds, - noteIds, - onToggleShowNotes, - updateNote, - showTimelineModal, - onCloseTimelineModal, - onOpenTimelineModal, - }) => ( - +const PropertiesRightComponent: React.FC = ({ + onButtonClick, + showActions, + onClosePopover, + createTimeline, + timelineId, + isDataInTimeline, + showNotesFromWidth, + showNotes, + showDescription, + showUsersView, + usersViewing, + description, + updateDescription, + associateNote, + getNotesByIds, + noteIds, + onToggleShowNotes, + updateNote, + showTimelineModal, + onCloseTimelineModal, + onOpenTimelineModal, +}) => ( + + ( inspectIndex={0} isDisabled={!isDataInTimeline} onCloseInspect={onClosePopover} - show={true} title={i18n.INSPECT_TIMELINE_TITLE} /> @@ -178,25 +177,25 @@ export const PropertiesRight = React.memo( - - {showUsersView - ? usersViewing.map(user => ( - // Hide the hard-coded elastic user avatar as the 7.2 release does not implement - // support for multi-user-collaboration as proposed in elastic/ingest-dev#395 - - - - - - )) - : null} - - {showTimelineModal ? : null} - - ) + + + {showUsersView + ? usersViewing.map(user => ( + // Hide the hard-coded elastic user avatar as the 7.2 release does not implement + // support for multi-user-collaboration as proposed in elastic/ingest-dev#395 + + + + + + )) + : null} + + {showTimelineModal ? : null} + ); -PropertiesRight.displayName = 'PropertiesRight'; +export const PropertiesRight = React.memo(PropertiesRightComponent); diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/json_downloader/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/json_downloader/__snapshots__/index.test.tsx.snap index c4377c265c2c2..714078c7908ca 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/json_downloader/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/json_downloader/__snapshots__/index.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`JSONDownloader renders correctly against snapshot 1`] = ``; +exports[`JSONDownloader renders correctly against snapshot 1`] = ``; From ae450d330f259e6821d754346583adce7a9673a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= Date: Wed, 8 Jan 2020 15:03:21 +0100 Subject: [PATCH 04/10] fix styling --- .../components/timeline/properties/properties_right.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/properties/properties_right.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/properties/properties_right.tsx index 8f2b39ddb794e..b21ab5063441e 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/properties/properties_right.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/properties/properties_right.tsx @@ -106,8 +106,8 @@ const PropertiesRightComponent: React.FC = ({ onOpenTimelineModal, }) => ( - - + + = ({ ) : null} - - + + {showUsersView ? usersViewing.map(user => ( From 7634187a9aa7b79c67c68335459263fb2beb3372 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= Date: Wed, 8 Jan 2020 17:07:08 +0100 Subject: [PATCH 05/10] revert snapshots --- .../line_tool_tip_content.test.tsx.snap | 16 ++++++++-------- .../__snapshots__/anomaly_score.test.tsx.snap | 6 +++--- .../__snapshots__/new_note.test.tsx.snap | 8 ++++---- .../__snapshots__/index.test.tsx.snap | 4 ++-- .../__snapshots__/data_providers.test.tsx.snap | 4 ++-- .../__snapshots__/index.test.tsx.snap | 2 +- 6 files changed, 20 insertions(+), 20 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/line_tool_tip_content.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/line_tool_tip_content.test.tsx.snap index 436255d4e003a..05f507ec3a775 100644 --- a/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/line_tool_tip_content.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/line_tool_tip_content.test.tsx.snap @@ -6,10 +6,10 @@ exports[`LineToolTipContent renders correctly against snapshot 1`] = ` justifyContent="center" > - - Source - - + + - - + Destination - - + + `; diff --git a/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap index b8f1946e8d982..1cf35aac19043 100644 --- a/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap @@ -82,7 +82,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = ` } @@ -105,9 +105,9 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = ` - + 17 - + , "title": "Max Anomaly Score", }, diff --git a/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap index 085e3f05b8add..b4e6bce163057 100644 --- a/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap @@ -5,7 +5,7 @@ exports[`NewNote renders correctly 1`] = ` data-test-subj="new-note-tabs" initialSelectedTab={ Object { - "content": - , + , "id": "preview", "name": "Preview (Markdown)", }, diff --git a/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap index 76540fe858b63..42ef4e5404faa 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap @@ -3,7 +3,7 @@ exports[`AddFilterToGlobalSearchBar Component Rendering 1`] = ` @@ -18,7 +18,7 @@ exports[`AddFilterToGlobalSearchBar Component Rendering 1`] = ` type="filter" /> - + } render={[Function]} /> diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap index 79dd45f21baa9..24b034d893d6b 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DataProviders rendering renders correctly against snapshot 1`] = ` - - + `; diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/json_downloader/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/json_downloader/__snapshots__/index.test.tsx.snap index 714078c7908ca..c4377c265c2c2 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/json_downloader/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/json_downloader/__snapshots__/index.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`JSONDownloader renders correctly against snapshot 1`] = ``; +exports[`JSONDownloader renders correctly against snapshot 1`] = ``; From cb3b85069d0134d1b3f17836980d0646f7d093f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= Date: Wed, 8 Jan 2020 18:43:42 +0100 Subject: [PATCH 06/10] fix unit tests --- .../components/events_viewer/index.test.tsx | 21 +- .../public/components/events_viewer/index.tsx | 241 +++++++++--------- .../siem/public/components/inspect/index.tsx | 2 + 3 files changed, 128 insertions(+), 136 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx index b8a0d80773595..7b32ef4b8caef 100644 --- a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx @@ -75,12 +75,9 @@ describe('StatefulEventsViewer', () => { await wait(); wrapper.update(); - expect( - wrapper - .find(`.${BUTTON_CLASS}`) - .first() - .exists() - ).toHaveStyleRule('opacity', 0); + expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '0', { + modifier: `.${BUTTON_CLASS}`, + }); }); test('it renders an opaque inspect button when it has mouse focus', async () => { @@ -100,14 +97,8 @@ describe('StatefulEventsViewer', () => { await wait(); wrapper.update(); - wrapper.simulate('mouseenter'); - wrapper.update(); - - expect( - wrapper - .find(`.${BUTTON_CLASS}`) - .first() - .exists() - ).toHaveStyleRule('opacity', 1); + expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '1', { + modifier: `:hover .${BUTTON_CLASS}`, + }); }); }); diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx index 7da01ca04b5a4..99d174d74f3f8 100644 --- a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx @@ -84,128 +84,102 @@ interface DispatchProps { type Props = OwnProps & StateReduxProps & DispatchProps; -const StatefulEventsViewerComponent = React.memo( - ({ - createTimeline, - columns, - dataProviders, - defaultModel, - deletedEventIds, - defaultIndices, - deleteEventQuery, - end, - filters, - headerFilterGroup, - id, - isLive, - itemsPerPage, - itemsPerPageOptions, - kqlMode, - pageFilters = [], - query, - removeColumn, - start, - showCheckboxes, - showRowRenderers, - sort, - timelineTypeContext = { - loadingText: i18n.LOADING_EVENTS, - }, - updateItemsPerPage, - upsertColumn, - utilityBar, - }) => { - const [{ browserFields, indexPatterns }] = useFetchIndexPatterns( - defaultIndices ?? useUiSetting(DEFAULT_INDEX_KEY) - ); - - useEffect(() => { - if (createTimeline != null) { - createTimeline({ id, columns, sort, itemsPerPage, showCheckboxes, showRowRenderers }); - } - return () => { - deleteEventQuery({ id, inputId: 'global' }); - }; - }, []); - - const onChangeItemsPerPage: OnChangeItemsPerPage = useCallback( - itemsChangedPerPage => updateItemsPerPage({ id, itemsPerPage: itemsChangedPerPage }), - [id, updateItemsPerPage] - ); - - const toggleColumn = useCallback( - (column: ColumnHeader) => { - const exists = columns.findIndex(c => c.id === column.id) !== -1; - - if (!exists && upsertColumn != null) { - upsertColumn({ - column, - id, - index: 1, - }); - } - - if (exists && removeColumn != null) { - removeColumn({ - columnId: column.id, - id, - }); - } - }, - [columns, id, upsertColumn, removeColumn] - ); - - return ( - - - - ); +const StatefulEventsViewerComponent: React.FC = ({ + createTimeline, + columns, + dataProviders, + deletedEventIds, + defaultIndices, + deleteEventQuery, + end, + filters, + headerFilterGroup, + id, + isLive, + itemsPerPage, + itemsPerPageOptions, + kqlMode, + pageFilters = [], + query, + removeColumn, + start, + showCheckboxes, + showRowRenderers, + sort, + timelineTypeContext = { + loadingText: i18n.LOADING_EVENTS, }, - (prevProps, nextProps) => - prevProps.id === nextProps.id && - isEqual(prevProps.columns, nextProps.columns) && - isEqual(prevProps.dataProviders, nextProps.dataProviders) && - prevProps.deletedEventIds === nextProps.deletedEventIds && - prevProps.end === nextProps.end && - isEqual(prevProps.filters, nextProps.filters) && - prevProps.isLive === nextProps.isLive && - prevProps.itemsPerPage === nextProps.itemsPerPage && - isEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) && - prevProps.kqlMode === nextProps.kqlMode && - isEqual(prevProps.query, nextProps.query) && - prevProps.pageCount === nextProps.pageCount && - isEqual(prevProps.sort, nextProps.sort) && - prevProps.start === nextProps.start && - isEqual(prevProps.pageFilters, nextProps.pageFilters) && - prevProps.showCheckboxes === nextProps.showCheckboxes && - prevProps.showRowRenderers === nextProps.showRowRenderers && - prevProps.start === nextProps.start && - isEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) && - prevProps.utilityBar === nextProps.utilityBar -); + updateItemsPerPage, + upsertColumn, + utilityBar, +}) => { + const [{ browserFields, indexPatterns }] = useFetchIndexPatterns( + defaultIndices ?? useUiSetting(DEFAULT_INDEX_KEY) + ); + + useEffect(() => { + if (createTimeline != null) { + createTimeline({ id, columns, sort, itemsPerPage, showCheckboxes, showRowRenderers }); + } + return () => { + deleteEventQuery({ id, inputId: 'global' }); + }; + }, []); + + const onChangeItemsPerPage: OnChangeItemsPerPage = useCallback( + itemsChangedPerPage => updateItemsPerPage({ id, itemsPerPage: itemsChangedPerPage }), + [id, updateItemsPerPage] + ); + + const toggleColumn = useCallback( + (column: ColumnHeader) => { + const exists = columns.findIndex(c => c.id === column.id) !== -1; + + if (!exists && upsertColumn != null) { + upsertColumn({ + column, + id, + index: 1, + }); + } -StatefulEventsViewerComponent.displayName = 'StatefulEventsViewerComponent'; + if (exists && removeColumn != null) { + removeColumn({ + columnId: column.id, + id, + }); + } + }, + [columns, id, upsertColumn, removeColumn] + ); + + return ( + + + + ); +}; const makeMapStateToProps = () => { const getInputsTimeline = inputsSelectors.getTimelineSelector(); @@ -252,4 +226,29 @@ export const StatefulEventsViewer = connect(makeMapStateToProps, { updateItemsPerPage: timelineActions.updateItemsPerPage, removeColumn: timelineActions.removeColumn, upsertColumn: timelineActions.upsertColumn, -})(StatefulEventsViewerComponent); +})( + React.memo( + StatefulEventsViewerComponent, + (prevProps, nextProps) => + prevProps.id === nextProps.id && + isEqual(prevProps.columns, nextProps.columns) && + isEqual(prevProps.dataProviders, nextProps.dataProviders) && + prevProps.deletedEventIds === nextProps.deletedEventIds && + prevProps.end === nextProps.end && + isEqual(prevProps.filters, nextProps.filters) && + prevProps.isLive === nextProps.isLive && + prevProps.itemsPerPage === nextProps.itemsPerPage && + isEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) && + prevProps.kqlMode === nextProps.kqlMode && + isEqual(prevProps.query, nextProps.query) && + prevProps.pageCount === nextProps.pageCount && + isEqual(prevProps.sort, nextProps.sort) && + prevProps.start === nextProps.start && + isEqual(prevProps.pageFilters, nextProps.pageFilters) && + prevProps.showCheckboxes === nextProps.showCheckboxes && + prevProps.showRowRenderers === nextProps.showRowRenderers && + prevProps.start === nextProps.start && + isEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) && + prevProps.utilityBar === nextProps.utilityBar + ) +); diff --git a/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx b/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx index dc321a9a2d000..32e71b3db575f 100644 --- a/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx @@ -38,6 +38,8 @@ export const InspectButtonContainer = styled.div<{ show?: boolean }>` `} `; +InspectButtonContainer.displayName = 'InspectButtonContainer'; + InspectButtonContainer.defaultProps = { show: true, }; From 82c7d8f3e04584b90af08c5a01353b5e11248934 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= Date: Wed, 8 Jan 2020 19:26:03 +0100 Subject: [PATCH 07/10] update snapshots --- .../__snapshots__/index.test.tsx.snap | 98 +++++++++---------- 1 file changed, 49 insertions(+), 49 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap index c6b2d3960c1ea..31456ba8c4ada 100644 --- a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap @@ -38,18 +38,18 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] = data-test-subj="stat-item" >
-

— @@ -223,7 +223,7 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] =

- +
@@ -272,18 +272,18 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] = data-test-subj="stat-item" >
-

— @@ -458,7 +458,7 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] =

- +
@@ -576,18 +576,18 @@ exports[`Stat Items Component rendering kpis with charts it renders the default data-test-subj="stat-item" >
-

1,714 @@ -799,10 +799,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default key="stat-items-field-uniqueDestinationIps" >

2,359 @@ -903,10 +903,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default >

- +
From 1acf6bb2d18b97ca43f0ae8fc1222c190720c3ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= Date: Wed, 8 Jan 2020 20:35:42 +0100 Subject: [PATCH 08/10] update styled-components --- x-pack/package.json | 2 +- yarn.lock | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/x-pack/package.json b/x-pack/package.json index d513e4ed34965..b493fb866baaa 100644 --- a/x-pack/package.json +++ b/x-pack/package.json @@ -327,7 +327,7 @@ "squel": "^5.13.0", "stats-lite": "^2.2.0", "style-it": "^2.1.3", - "styled-components": "beta", + "styled-components": "5.0.0-rc.3", "suricata-sid-db": "^1.0.2", "tinycolor2": "1.4.1", "tinymath": "1.2.1", diff --git a/yarn.lock b/yarn.lock index 9631ca271295e..d035501c46cd5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14989,7 +14989,7 @@ hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0, hoist-non-react- resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== -hoist-non-react-statics@^3.1.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0: version "3.3.1" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#101685d3aff3b23ea213163f6e8e12f4f111e19f" integrity sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw== @@ -26880,10 +26880,10 @@ style-loader@0.23.1, style-loader@^0.23.1: loader-utils "^1.1.0" schema-utils "^1.0.0" -styled-components@beta: - version "5.0.0-rc.2" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.0.0-rc.2.tgz#6c44570ff202f47a1a688d6f1249bc079b10a958" - integrity sha512-dRMU2Ka12F2qbJK6XMDVy1H6KOXpbf7nAKReV0uIikCdW/zbO2K3C+XUCL0EqTVeevugFBJUACZUoTc7ShKsTg== +styled-components@5.0.0-rc.3: + version "5.0.0-rc.3" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.0.0-rc.3.tgz#f5916a1892c658887016a3c96f3c96e97e92021a" + integrity sha512-FPezIfX26DigdMspk4rtL2Z4KMtgHcUK56Zb/XTXfs4XXBPFZefTNpi+pQEOkWRmE5r5dO9vzT7Hd+b78NtMLA== dependencies: "@babel/helper-module-imports" "^7.0.0" "@babel/traverse" "^7.4.5" @@ -26892,6 +26892,7 @@ styled-components@beta: "@emotion/unitless" "^0.7.4" babel-plugin-styled-components ">= 1" css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" shallowequal "^1.1.0" stylis-rule-sheet "^0.0.10" supports-color "^5.5.0" From 31a69a9f7f2414ad349bfc5edeaa19b7d727a002 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= Date: Mon, 13 Jan 2020 15:33:47 +0100 Subject: [PATCH 09/10] PR comments --- .../components/events_viewer/index.test.tsx | 30 +--- .../public/components/inspect/index.test.tsx | 32 ++++- .../__snapshots__/index.test.tsx.snap | 128 +++++++++++------- x-pack/package.json | 2 +- yarn.lock | 9 +- 5 files changed, 115 insertions(+), 86 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx index 7b32ef4b8caef..ec8d329f1dfe3 100644 --- a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx @@ -16,7 +16,6 @@ import { StatefulEventsViewer } from '.'; import { useFetchIndexPatterns } from '../../containers/detection_engine/rules/fetch_index_patterns'; import { mockBrowserFields } from '../../containers/source/mock'; import { eventsDefaultModel } from './default_model'; -import { BUTTON_CLASS } from '../inspect'; const mockUseFetchIndexPatterns: jest.Mock = useFetchIndexPatterns as jest.Mock; jest.mock('../../containers/detection_engine/rules/fetch_index_patterns'); @@ -58,7 +57,8 @@ describe('StatefulEventsViewer', () => { ).toBe(true); }); - test('it renders a transparent inspect button when it does NOT have mouse focus', async () => { + // InspectButtonContainer controls displaying InspectButton components + test('it renders InspectButtonContainer', async () => { const wrapper = mount( @@ -75,30 +75,6 @@ describe('StatefulEventsViewer', () => { await wait(); wrapper.update(); - expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '0', { - modifier: `.${BUTTON_CLASS}`, - }); - }); - - test('it renders an opaque inspect button when it has mouse focus', async () => { - const wrapper = mount( - - - - - - ); - - await wait(); - wrapper.update(); - - expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '1', { - modifier: `:hover .${BUTTON_CLASS}`, - }); + expect(wrapper.find(`InspectButtonContainer`).exists()).toBe(true); }); }); diff --git a/x-pack/legacy/plugins/siem/public/components/inspect/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/inspect/index.test.tsx index c4a6ce7a6590c..9492002717e2b 100644 --- a/x-pack/legacy/plugins/siem/public/components/inspect/index.test.tsx +++ b/x-pack/legacy/plugins/siem/public/components/inspect/index.test.tsx @@ -17,7 +17,7 @@ import { import { createStore, State } from '../../store'; import { UpdateQueryParams, upsertQuery } from '../../store/inputs/helpers'; -import { InspectButton } from '.'; +import { InspectButton, InspectButtonContainer, BUTTON_CLASS } from '.'; import { cloneDeep } from 'lodash/fp'; describe('Inspect Button', () => { @@ -114,6 +114,36 @@ describe('Inspect Button', () => { ); expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true); }); + + describe('InspectButtonContainer', () => { + test('it renders a transparent inspect button by default', async () => { + const wrapper = mount( + + + + + + ); + + expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '0', { + modifier: `.${BUTTON_CLASS}`, + }); + }); + + test('it renders an opaque inspect button when it has mouse focus', async () => { + const wrapper = mount( + + + + + + ); + + expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '1', { + modifier: `:hover .${BUTTON_CLASS}`, + }); + }); + }); }); describe('Modal Inspect - happy path', () => { diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap index 1c1a28f319021..ca06c484dc8a2 100644 --- a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap +++ b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap @@ -38,18 +38,18 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] = data-test-subj="stat-item" >
-

— @@ -264,18 +272,18 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] = data-test-subj="stat-item" >

-

— @@ -560,18 +576,18 @@ exports[`Stat Items Component rendering kpis with charts it renders the default data-test-subj="stat-item" >

-

1,714 @@ -775,10 +799,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default key="stat-items-field-uniqueDestinationIps" >

2,359 @@ -879,10 +903,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default >

= 1" css-to-react-native "^3.0.0" - hoist-non-react-statics "^3.0.0" shallowequal "^1.1.0" stylis-rule-sheet "^0.0.10" supports-color "^5.5.0" From 3402b7ca4c7c8ad37da2cd1d37b5cd4dfceb6d0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= Date: Mon, 13 Jan 2020 18:54:11 +0100 Subject: [PATCH 10/10] yarn.lock --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index 8e9bea248c4f6..ff098b7b9c891 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14998,7 +14998,7 @@ hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0, hoist-non-react- resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0: +hoist-non-react-statics@^3.1.0: version "3.3.1" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#101685d3aff3b23ea213163f6e8e12f4f111e19f" integrity sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw== @@ -26898,7 +26898,7 @@ style-loader@0.23.1, style-loader@^0.23.1: styled-components@beta: version "5.0.0-rc.2" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.0.0-rc.3.tgz#6c44570ff202f47a1a688d6f1249bc079b10a958" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.0.0-rc.2.tgz#6c44570ff202f47a1a688d6f1249bc079b10a958" integrity sha512-dRMU2Ka12F2qbJK6XMDVy1H6KOXpbf7nAKReV0uIikCdW/zbO2K3C+XUCL0EqTVeevugFBJUACZUoTc7ShKsTg== dependencies: "@babel/helper-module-imports" "^7.0.0"