From dd593c22a0996305bc09996268dd9d54f52810ae Mon Sep 17 00:00:00 2001 From: Patryk Kopycinski Date: Wed, 30 Dec 2020 18:14:23 +0100 Subject: [PATCH] fixes --- .../components/event_details/columns.tsx | 21 +- .../plugins/timeline/plugin.tsx | 43 ++-- .../timeline/selectable_timeline/index.tsx | 202 ++++++++---------- .../factory/hosts/overview/__mocks__/index.ts | 2 +- .../factory/hosts/overview/index.ts | 2 +- .../apis/security_solution/overview_host.ts | 2 +- 6 files changed, 141 insertions(+), 131 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx index 6bc3a4904e031d..fa0684e5593bf8 100644 --- a/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx +++ b/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx @@ -51,6 +51,14 @@ const HoverActionsContainer = styled(EuiPanel)` HoverActionsContainer.displayName = 'HoverActionsContainer'; +const FullWidthFlexGroup = styled(EuiFlexGroup)` + width: 100%; +`; + +const FullWidthFlexItem = styled(EuiFlexItem)` + width: 100%; +`; + export const getColumns = ({ browserFields, columnHeaders, @@ -159,10 +167,15 @@ export const getColumns = ({ sortable: true, truncateText: false, render: (values: ToStringArray | null | undefined, data: EventFieldsData) => ( - + {values != null && values.map((value, i) => ( - )} - + ))} - + ), }, { diff --git a/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/timeline/plugin.tsx b/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/timeline/plugin.tsx index 8d2488b269d76e..4b03e7e0d32c4a 100644 --- a/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/timeline/plugin.tsx +++ b/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/timeline/plugin.tsx @@ -8,6 +8,7 @@ import React, { useCallback, memo } from 'react'; import { EuiSelectableOption, EuiModalBody, + EuiModalHeader, EuiMarkdownEditorUiPlugin, EuiCodeBlock, } from '@elastic/eui'; @@ -47,24 +48,32 @@ const TimelineEditorComponent: React.FC = ({ onClosePopover [] ); + const handleTimelineChange = useCallback( + (timelineTitle, timelineId, graphEventId) => { + const url = formatUrl(getTimelineUrl(timelineId ?? '', graphEventId), { + absolute: true, + skipSearch: true, + }); + onInsert(`[${timelineTitle}](${url})`, { + block: false, + }); + }, + [formatUrl, onInsert] + ); + return ( - - { - const url = formatUrl(getTimelineUrl(timelineId ?? '', graphEventId), { - absolute: true, - skipSearch: true, - }); - onInsert(`[${timelineTitle}](${url})`, { - block: false, - }); - }} - onClosePopover={onClosePopover} - timelineType={TimelineType.default} - /> - + <> + + + + + ); }; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx index a80576c7237f4d..51317a97a2c95c 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx @@ -12,8 +12,7 @@ import { EuiIcon, EuiTextColor, EuiSelectableOption, - EuiPortal, - EuiFilterGroup, + EuiSelectableProps, EuiFilterButton, } from '@elastic/eui'; import { isEmpty, debounce } from 'lodash/fp'; @@ -45,26 +44,31 @@ const MyEuiFlexGroup = styled(EuiFlexGroup)` padding 0px 4px; `; -const EuiSelectableContainer = styled.div<{ isLoading: boolean }>` - .euiSelectable { - .euiFormControlLayout__childrenWrapper { - display: flex; - } - ${({ isLoading }) => `${ - isLoading - ? ` - .euiFormControlLayoutIcons { - display: none; - } - .euiFormControlLayoutIcons.euiFormControlLayoutIcons--right { - display: block; - left: 12px; - top: 12px; - }` - : '' - } - `} - } +// const EuiSelectableContainer = styled.div<{ isLoading: boolean }>` +// .euiSelectable { +// .euiFormControlLayout__childrenWrapper { +// display: flex; +// } +// ${({ isLoading }) => `${ +// isLoading +// ? ` +// .euiFormControlLayoutIcons { +// display: none; +// } +// .euiFormControlLayoutIcons.euiFormControlLayoutIcons--right { +// display: block; +// left: 12px; +// top: 12px; +// }` +// : '' +// } +// `} +// } +// `; + +const StyledEuiFilterButton = styled(EuiFilterButton)` + border-top: 0; + border-bottom: 0; `; export const ORIGINAL_PAGE_SIZE = 50; @@ -95,15 +99,6 @@ export interface SelectableTimelineProps { timelineType: TimelineTypeLiteral; } -export interface SearchProps { - 'data-test-subj'?: string; - isLoading: boolean; - placeholder: string; - onSearch: (arg: string) => void; - incremental: boolean; - inputRef: (arg: HTMLInputElement | null) => void; -} - const SelectableTimelineComponent: React.FC = ({ hideUntitled = false, getSelectableOptions, @@ -115,7 +110,6 @@ const SelectableTimelineComponent: React.FC = ({ const [heightTrigger, setHeightTrigger] = useState(0); const [searchTimelineValue, setSearchTimelineValue] = useState(''); const [onlyFavorites, setOnlyFavorites] = useState(false); - const [searchRef, setSearchRef] = useState(null); const { fetchAllTimeline, timelines, loading, totalCount: timelineCount } = useGetAllTimeline(); const selectableListOuterRef = useRef(null); const selectableListInnerRef = useRef(null); @@ -156,8 +150,8 @@ const SelectableTimelineComponent: React.FC = ({ [heightTrigger, pageSize] ); - const renderTimelineOption = useCallback((option, searchValue) => { - return ( + const renderTimelineOption = useCallback( + (option, searchValue) => ( = ({ /> - ); - }, []); + ), + [] + ); const handleTimelineChange = useCallback( (options) => { @@ -215,39 +210,53 @@ const SelectableTimelineComponent: React.FC = ({ [onClosePopover, onTimelineChange] ); - const favoritePortal = useMemo( - () => - searchRef != null ? ( - - - - - - {i18nTimeline.ONLY_FAVORITES} - - - - - - ) : null, - [searchRef, onlyFavorites, handleOnToggleOnlyFavorites] + const EuiSelectableContent = useCallback( + (list, search) => ( + <> + {search} + {list} + + ), + [] ); - const searchProps: SearchProps = { - 'data-test-subj': 'timeline-super-select-search-box', - isLoading: loading, - placeholder: useMemo(() => i18n.SEARCH_BOX_TIMELINE_PLACEHOLDER(timelineType), [timelineType]), - onSearch: onSearchTimeline, - incremental: true, - inputRef: (node: HTMLInputElement | null) => { - setSearchRef(node); - }, - }; + const searchProps: EuiSelectableProps['searchProps'] = useMemo( + () => ({ + 'data-test-subj': 'timeline-super-select-search-box', + placeholder: i18n.SEARCH_BOX_TIMELINE_PLACEHOLDER(timelineType), + onSearch: onSearchTimeline, + incremental: true, + append: ( + + {i18nTimeline.ONLY_FAVORITES} + + ), + }), + [handleOnToggleOnlyFavorites, onSearchTimeline, onlyFavorites, timelineType] + ); + + const listProps: EuiSelectableProps['listProps'] = useMemo( + () => ({ + rowHeight: TIMELINE_ITEM_HEIGHT, + showIcons: false, + windowProps: { + onScroll: ({ scrollOffset }) => + handleOnScroll( + timelines.filter((t) => !hideUntitled || t.title !== '').length, + timelineCount, + scrollOffset + ), + outerRef: selectableListOuterRef, + innerRef: selectableListInnerRef, + }, + }), + [handleOnScroll, hideUntitled, timelineCount, timelines] + ); useEffect(() => { fetchAllTimeline({ @@ -267,46 +276,25 @@ const SelectableTimelineComponent: React.FC = ({ }, [fetchAllTimeline, onlyFavorites, pageSize, searchTimelineValue, timelineType]); return ( - - - handleOnScroll( - timelines.filter((t) => !hideUntitled || t.title !== '').length, - timelineCount, - scrollOffset - ), - outerRef: selectableListOuterRef, - innerRef: selectableListInnerRef, - }, - }} - renderOption={renderTimelineOption} - onChange={handleTimelineChange} - searchable - searchProps={searchProps} - singleSelection={true} - options={getSelectableOptions({ - timelines, - onlyFavorites, - searchTimelineValue, - timelineType, - })} - > - {(list, search) => ( - <> - {search} - {favoritePortal} - {list} - - )} - - + + {EuiSelectableContent} + ); }; diff --git a/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/overview/__mocks__/index.ts b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/overview/__mocks__/index.ts index b1f9b04daa1c10..574be4b45fe267 100644 --- a/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/overview/__mocks__/index.ts +++ b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/overview/__mocks__/index.ts @@ -322,7 +322,7 @@ export const formattedSearchStrategyResponse = { endgameSecurity: 0, filebeatSystemModule: 1793, winlogbeatSecurity: 42, - winlogbeatMWSysmonOperational: null, + winlogbeatMWSysmonOperational: 1781, }, }; diff --git a/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/overview/index.ts b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/overview/index.ts index 61c228a5fd164d..4a9d4c7af103cb 100644 --- a/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/overview/index.ts +++ b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/overview/index.ts @@ -58,7 +58,7 @@ export const hostOverview: SecuritySolutionFactory = { winlogbeatMWSysmonOperational: getOr( null, 'winlog_module.mwsysmon_operational_event_count.doc_count', - response + aggregations ), }, }; diff --git a/x-pack/test/api_integration/apis/security_solution/overview_host.ts b/x-pack/test/api_integration/apis/security_solution/overview_host.ts index f3de9a6481b8f3..6077332b3a6524 100644 --- a/x-pack/test/api_integration/apis/security_solution/overview_host.ts +++ b/x-pack/test/api_integration/apis/security_solution/overview_host.ts @@ -36,7 +36,7 @@ export default function ({ getService }: FtrProviderContext) { endgameSecurity: 4, filebeatSystemModule: 0, winlogbeatSecurity: 0, - winlogbeatMWSysmonOperational: null, + winlogbeatMWSysmonOperational: 0, }; it('Make sure that we get OverviewHost data', async () => {