Skip to content

Commit dd593c2

Browse files
fixes
1 parent eda2618 commit dd593c2

6 files changed

Lines changed: 141 additions & 131 deletions

File tree

  • x-pack
    • plugins/security_solution
      • public
      • server/search_strategy/security_solution/factory/hosts/overview
    • test/api_integration/apis/security_solution

x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,14 @@ const HoverActionsContainer = styled(EuiPanel)`
5151

5252
HoverActionsContainer.displayName = 'HoverActionsContainer';
5353

54+
const FullWidthFlexGroup = styled(EuiFlexGroup)`
55+
width: 100%;
56+
`;
57+
58+
const FullWidthFlexItem = styled(EuiFlexItem)`
59+
width: 100%;
60+
`;
61+
5462
export const getColumns = ({
5563
browserFields,
5664
columnHeaders,
@@ -159,10 +167,15 @@ export const getColumns = ({
159167
sortable: true,
160168
truncateText: false,
161169
render: (values: ToStringArray | null | undefined, data: EventFieldsData) => (
162-
<EuiFlexGroup direction="column" alignItems="flexStart" component="span" gutterSize="none">
170+
<FullWidthFlexGroup
171+
direction="column"
172+
alignItems="flexStart"
173+
component="span"
174+
gutterSize="none"
175+
>
163176
{values != null &&
164177
values.map((value, i) => (
165-
<EuiFlexItem
178+
<FullWidthFlexItem
166179
grow={false}
167180
component="span"
168181
key={`event-details-value-flex-item-${contextId}-${eventId}-${data.field}-${i}-${value}`}
@@ -182,9 +195,9 @@ export const getColumns = ({
182195
/>
183196
)}
184197
</div>
185-
</EuiFlexItem>
198+
</FullWidthFlexItem>
186199
))}
187-
</EuiFlexGroup>
200+
</FullWidthFlexGroup>
188201
),
189202
},
190203
{

x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/timeline/plugin.tsx

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import React, { useCallback, memo } from 'react';
88
import {
99
EuiSelectableOption,
1010
EuiModalBody,
11+
EuiModalHeader,
1112
EuiMarkdownEditorUiPlugin,
1213
EuiCodeBlock,
1314
} from '@elastic/eui';
@@ -47,24 +48,32 @@ const TimelineEditorComponent: React.FC<TimelineEditorProps> = ({ onClosePopover
4748
[]
4849
);
4950

51+
const handleTimelineChange = useCallback(
52+
(timelineTitle, timelineId, graphEventId) => {
53+
const url = formatUrl(getTimelineUrl(timelineId ?? '', graphEventId), {
54+
absolute: true,
55+
skipSearch: true,
56+
});
57+
onInsert(`[${timelineTitle}](${url})`, {
58+
block: false,
59+
});
60+
},
61+
[formatUrl, onInsert]
62+
);
63+
5064
return (
51-
<EuiModalBody>
52-
<SelectableTimeline
53-
hideUntitled={true}
54-
getSelectableOptions={handleGetSelectableOptions}
55-
onTimelineChange={(timelineTitle, timelineId, graphEventId) => {
56-
const url = formatUrl(getTimelineUrl(timelineId ?? '', graphEventId), {
57-
absolute: true,
58-
skipSearch: true,
59-
});
60-
onInsert(`[${timelineTitle}](${url})`, {
61-
block: false,
62-
});
63-
}}
64-
onClosePopover={onClosePopover}
65-
timelineType={TimelineType.default}
66-
/>
67-
</EuiModalBody>
65+
<>
66+
<EuiModalHeader />
67+
<EuiModalBody>
68+
<SelectableTimeline
69+
hideUntitled={true}
70+
getSelectableOptions={handleGetSelectableOptions}
71+
onTimelineChange={handleTimelineChange}
72+
onClosePopover={onClosePopover}
73+
timelineType={TimelineType.default}
74+
/>
75+
</EuiModalBody>
76+
</>
6877
);
6978
};
7079

x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.tsx

Lines changed: 95 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@ import {
1212
EuiIcon,
1313
EuiTextColor,
1414
EuiSelectableOption,
15-
EuiPortal,
16-
EuiFilterGroup,
15+
EuiSelectableProps,
1716
EuiFilterButton,
1817
} from '@elastic/eui';
1918
import { isEmpty, debounce } from 'lodash/fp';
@@ -45,26 +44,31 @@ const MyEuiFlexGroup = styled(EuiFlexGroup)`
4544
padding 0px 4px;
4645
`;
4746

48-
const EuiSelectableContainer = styled.div<{ isLoading: boolean }>`
49-
.euiSelectable {
50-
.euiFormControlLayout__childrenWrapper {
51-
display: flex;
52-
}
53-
${({ isLoading }) => `${
54-
isLoading
55-
? `
56-
.euiFormControlLayoutIcons {
57-
display: none;
58-
}
59-
.euiFormControlLayoutIcons.euiFormControlLayoutIcons--right {
60-
display: block;
61-
left: 12px;
62-
top: 12px;
63-
}`
64-
: ''
65-
}
66-
`}
67-
}
47+
// const EuiSelectableContainer = styled.div<{ isLoading: boolean }>`
48+
// .euiSelectable {
49+
// .euiFormControlLayout__childrenWrapper {
50+
// display: flex;
51+
// }
52+
// ${({ isLoading }) => `${
53+
// isLoading
54+
// ? `
55+
// .euiFormControlLayoutIcons {
56+
// display: none;
57+
// }
58+
// .euiFormControlLayoutIcons.euiFormControlLayoutIcons--right {
59+
// display: block;
60+
// left: 12px;
61+
// top: 12px;
62+
// }`
63+
// : ''
64+
// }
65+
// `}
66+
// }
67+
// `;
68+
69+
const StyledEuiFilterButton = styled(EuiFilterButton)`
70+
border-top: 0;
71+
border-bottom: 0;
6872
`;
6973

7074
export const ORIGINAL_PAGE_SIZE = 50;
@@ -95,15 +99,6 @@ export interface SelectableTimelineProps {
9599
timelineType: TimelineTypeLiteral;
96100
}
97101

98-
export interface SearchProps {
99-
'data-test-subj'?: string;
100-
isLoading: boolean;
101-
placeholder: string;
102-
onSearch: (arg: string) => void;
103-
incremental: boolean;
104-
inputRef: (arg: HTMLInputElement | null) => void;
105-
}
106-
107102
const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
108103
hideUntitled = false,
109104
getSelectableOptions,
@@ -115,7 +110,6 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
115110
const [heightTrigger, setHeightTrigger] = useState(0);
116111
const [searchTimelineValue, setSearchTimelineValue] = useState<string>('');
117112
const [onlyFavorites, setOnlyFavorites] = useState(false);
118-
const [searchRef, setSearchRef] = useState<HTMLInputElement | null>(null);
119113
const { fetchAllTimeline, timelines, loading, totalCount: timelineCount } = useGetAllTimeline();
120114
const selectableListOuterRef = useRef<HTMLDivElement | null>(null);
121115
const selectableListInnerRef = useRef<HTMLDivElement | null>(null);
@@ -156,8 +150,8 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
156150
[heightTrigger, pageSize]
157151
);
158152

159-
const renderTimelineOption = useCallback((option, searchValue) => {
160-
return (
153+
const renderTimelineOption = useCallback(
154+
(option, searchValue) => (
161155
<EuiFlexGroup
162156
gutterSize="s"
163157
justifyContent="spaceBetween"
@@ -193,8 +187,9 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
193187
/>
194188
</EuiFlexItem>
195189
</EuiFlexGroup>
196-
);
197-
}, []);
190+
),
191+
[]
192+
);
198193

199194
const handleTimelineChange = useCallback(
200195
(options) => {
@@ -215,39 +210,53 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
215210
[onClosePopover, onTimelineChange]
216211
);
217212

218-
const favoritePortal = useMemo(
219-
() =>
220-
searchRef != null ? (
221-
<EuiPortal insert={{ sibling: searchRef, position: 'after' }}>
222-
<MyEuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
223-
<EuiFlexItem grow={false}>
224-
<EuiFilterGroup>
225-
<EuiFilterButton
226-
size="l"
227-
data-test-subj="only-favorites-toggle"
228-
hasActiveFilters={onlyFavorites}
229-
onClick={handleOnToggleOnlyFavorites}
230-
>
231-
{i18nTimeline.ONLY_FAVORITES}
232-
</EuiFilterButton>
233-
</EuiFilterGroup>
234-
</EuiFlexItem>
235-
</MyEuiFlexGroup>
236-
</EuiPortal>
237-
) : null,
238-
[searchRef, onlyFavorites, handleOnToggleOnlyFavorites]
213+
const EuiSelectableContent = useCallback(
214+
(list, search) => (
215+
<>
216+
{search}
217+
{list}
218+
</>
219+
),
220+
[]
239221
);
240222

241-
const searchProps: SearchProps = {
242-
'data-test-subj': 'timeline-super-select-search-box',
243-
isLoading: loading,
244-
placeholder: useMemo(() => i18n.SEARCH_BOX_TIMELINE_PLACEHOLDER(timelineType), [timelineType]),
245-
onSearch: onSearchTimeline,
246-
incremental: true,
247-
inputRef: (node: HTMLInputElement | null) => {
248-
setSearchRef(node);
249-
},
250-
};
223+
const searchProps: EuiSelectableProps['searchProps'] = useMemo(
224+
() => ({
225+
'data-test-subj': 'timeline-super-select-search-box',
226+
placeholder: i18n.SEARCH_BOX_TIMELINE_PLACEHOLDER(timelineType),
227+
onSearch: onSearchTimeline,
228+
incremental: true,
229+
append: (
230+
<StyledEuiFilterButton
231+
size="l"
232+
data-test-subj="only-favorites-toggle"
233+
hasActiveFilters={onlyFavorites}
234+
onClick={handleOnToggleOnlyFavorites}
235+
>
236+
{i18nTimeline.ONLY_FAVORITES}
237+
</StyledEuiFilterButton>
238+
),
239+
}),
240+
[handleOnToggleOnlyFavorites, onSearchTimeline, onlyFavorites, timelineType]
241+
);
242+
243+
const listProps: EuiSelectableProps['listProps'] = useMemo(
244+
() => ({
245+
rowHeight: TIMELINE_ITEM_HEIGHT,
246+
showIcons: false,
247+
windowProps: {
248+
onScroll: ({ scrollOffset }) =>
249+
handleOnScroll(
250+
timelines.filter((t) => !hideUntitled || t.title !== '').length,
251+
timelineCount,
252+
scrollOffset
253+
),
254+
outerRef: selectableListOuterRef,
255+
innerRef: selectableListInnerRef,
256+
},
257+
}),
258+
[handleOnScroll, hideUntitled, timelineCount, timelines]
259+
);
251260

252261
useEffect(() => {
253262
fetchAllTimeline({
@@ -267,46 +276,25 @@ const SelectableTimelineComponent: React.FC<SelectableTimelineProps> = ({
267276
}, [fetchAllTimeline, onlyFavorites, pageSize, searchTimelineValue, timelineType]);
268277

269278
return (
270-
<EuiSelectableContainer isLoading={loading}>
271-
<EuiSelectable
272-
data-test-subj="selectable-input"
273-
height={POPOVER_HEIGHT}
274-
isLoading={loading && timelines.length === 0}
275-
listProps={{
276-
rowHeight: TIMELINE_ITEM_HEIGHT,
277-
showIcons: false,
278-
windowProps: {
279-
onScroll: ({ scrollOffset }) =>
280-
handleOnScroll(
281-
timelines.filter((t) => !hideUntitled || t.title !== '').length,
282-
timelineCount,
283-
scrollOffset
284-
),
285-
outerRef: selectableListOuterRef,
286-
innerRef: selectableListInnerRef,
287-
},
288-
}}
289-
renderOption={renderTimelineOption}
290-
onChange={handleTimelineChange}
291-
searchable
292-
searchProps={searchProps}
293-
singleSelection={true}
294-
options={getSelectableOptions({
295-
timelines,
296-
onlyFavorites,
297-
searchTimelineValue,
298-
timelineType,
299-
})}
300-
>
301-
{(list, search) => (
302-
<>
303-
{search}
304-
{favoritePortal}
305-
{list}
306-
</>
307-
)}
308-
</EuiSelectable>
309-
</EuiSelectableContainer>
279+
<EuiSelectable
280+
data-test-subj="selectable-input"
281+
height={POPOVER_HEIGHT}
282+
isLoading={loading && timelines.length === 0}
283+
listProps={listProps}
284+
renderOption={renderTimelineOption}
285+
onChange={handleTimelineChange}
286+
searchable
287+
searchProps={searchProps}
288+
singleSelection={true}
289+
options={getSelectableOptions({
290+
timelines,
291+
onlyFavorites,
292+
searchTimelineValue,
293+
timelineType,
294+
})}
295+
>
296+
{EuiSelectableContent}
297+
</EuiSelectable>
310298
);
311299
};
312300

x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/overview/__mocks__/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -322,7 +322,7 @@ export const formattedSearchStrategyResponse = {
322322
endgameSecurity: 0,
323323
filebeatSystemModule: 1793,
324324
winlogbeatSecurity: 42,
325-
winlogbeatMWSysmonOperational: null,
325+
winlogbeatMWSysmonOperational: 1781,
326326
},
327327
};
328328

x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/overview/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const hostOverview: SecuritySolutionFactory<HostsQueries.overview> = {
5858
winlogbeatMWSysmonOperational: getOr(
5959
null,
6060
'winlog_module.mwsysmon_operational_event_count.doc_count',
61-
response
61+
aggregations
6262
),
6363
},
6464
};

x-pack/test/api_integration/apis/security_solution/overview_host.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default function ({ getService }: FtrProviderContext) {
3636
endgameSecurity: 4,
3737
filebeatSystemModule: 0,
3838
winlogbeatSecurity: 0,
39-
winlogbeatMWSysmonOperational: null,
39+
winlogbeatMWSysmonOperational: 0,
4040
};
4141

4242
it('Make sure that we get OverviewHost data', async () => {

0 commit comments

Comments
 (0)