[Security] Add Timeline improvements (#71506)
This commit is contained in:
parent
35fc222bdc
commit
831e427682
|
@ -27,6 +27,8 @@ import {
|
|||
|
||||
import { drag, drop } from '../tasks/common';
|
||||
|
||||
export const hostExistsQuery = 'host.name: *';
|
||||
|
||||
export const addDescriptionToTimeline = (description: string) => {
|
||||
cy.get(TIMELINE_DESCRIPTION).type(`${description}{enter}`);
|
||||
cy.get(DATE_PICKER_APPLY_BUTTON_TIMELINE).click().invoke('text').should('not.equal', 'Updating');
|
||||
|
@ -77,6 +79,7 @@ export const openTimelineSettings = () => {
|
|||
};
|
||||
|
||||
export const populateTimeline = () => {
|
||||
executeTimelineKQL(hostExistsQuery);
|
||||
cy.get(SERVER_SIDE_EVENT_COUNT)
|
||||
.invoke('text')
|
||||
.then((strCount) => {
|
||||
|
|
|
@ -9,10 +9,11 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
|
|||
<Styled(EuiFlexItem)
|
||||
grow={false}
|
||||
>
|
||||
<styled.div>
|
||||
<AddDataProviderPopover
|
||||
browserFields={Object {}}
|
||||
timelineId="foo"
|
||||
<styled.div
|
||||
hideBadge={true}
|
||||
>
|
||||
<AndOrBadge
|
||||
type="or"
|
||||
/>
|
||||
</styled.div>
|
||||
</Styled(EuiFlexItem)>
|
||||
|
@ -58,7 +59,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
|
|||
<Styled(EuiFlexItem)
|
||||
grow={false}
|
||||
>
|
||||
<styled.div>
|
||||
<styled.div
|
||||
hideBadge={false}
|
||||
>
|
||||
<AndOrBadge
|
||||
type="or"
|
||||
/>
|
||||
|
@ -106,7 +109,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
|
|||
<Styled(EuiFlexItem)
|
||||
grow={false}
|
||||
>
|
||||
<styled.div>
|
||||
<styled.div
|
||||
hideBadge={false}
|
||||
>
|
||||
<AndOrBadge
|
||||
type="or"
|
||||
/>
|
||||
|
@ -154,7 +159,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
|
|||
<Styled(EuiFlexItem)
|
||||
grow={false}
|
||||
>
|
||||
<styled.div>
|
||||
<styled.div
|
||||
hideBadge={false}
|
||||
>
|
||||
<AndOrBadge
|
||||
type="or"
|
||||
/>
|
||||
|
@ -202,7 +209,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
|
|||
<Styled(EuiFlexItem)
|
||||
grow={false}
|
||||
>
|
||||
<styled.div>
|
||||
<styled.div
|
||||
hideBadge={false}
|
||||
>
|
||||
<AndOrBadge
|
||||
type="or"
|
||||
/>
|
||||
|
@ -250,7 +259,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
|
|||
<Styled(EuiFlexItem)
|
||||
grow={false}
|
||||
>
|
||||
<styled.div>
|
||||
<styled.div
|
||||
hideBadge={false}
|
||||
>
|
||||
<AndOrBadge
|
||||
type="or"
|
||||
/>
|
||||
|
@ -298,7 +309,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
|
|||
<Styled(EuiFlexItem)
|
||||
grow={false}
|
||||
>
|
||||
<styled.div>
|
||||
<styled.div
|
||||
hideBadge={false}
|
||||
>
|
||||
<AndOrBadge
|
||||
type="or"
|
||||
/>
|
||||
|
@ -346,7 +359,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
|
|||
<Styled(EuiFlexItem)
|
||||
grow={false}
|
||||
>
|
||||
<styled.div>
|
||||
<styled.div
|
||||
hideBadge={false}
|
||||
>
|
||||
<AndOrBadge
|
||||
type="or"
|
||||
/>
|
||||
|
@ -394,7 +409,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
|
|||
<Styled(EuiFlexItem)
|
||||
grow={false}
|
||||
>
|
||||
<styled.div>
|
||||
<styled.div
|
||||
hideBadge={false}
|
||||
>
|
||||
<AndOrBadge
|
||||
type="or"
|
||||
/>
|
||||
|
@ -442,7 +459,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
|
|||
<Styled(EuiFlexItem)
|
||||
grow={false}
|
||||
>
|
||||
<styled.div>
|
||||
<styled.div
|
||||
hideBadge={false}
|
||||
>
|
||||
<AndOrBadge
|
||||
type="or"
|
||||
/>
|
||||
|
@ -490,7 +509,9 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
|
|||
<Styled(EuiFlexItem)
|
||||
grow={false}
|
||||
>
|
||||
<styled.div>
|
||||
<styled.div
|
||||
hideBadge={false}
|
||||
>
|
||||
<AndOrBadge
|
||||
type="or"
|
||||
/>
|
||||
|
@ -527,6 +548,10 @@ exports[`Providers rendering renders correctly against snapshot 1`] = `
|
|||
)
|
||||
</styled.span>
|
||||
</Styled(EuiFlexItem)>
|
||||
<AddDataProviderPopover
|
||||
browserFields={Object {}}
|
||||
timelineId="foo"
|
||||
/>
|
||||
</EuiFlexGroup>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import {
|
||||
EuiButton,
|
||||
EuiButtonEmpty,
|
||||
EuiContextMenu,
|
||||
EuiText,
|
||||
EuiPopover,
|
||||
|
@ -139,21 +140,33 @@ const AddDataProviderPopoverComponent: React.FC<AddDataProviderPopoverProps> = (
|
|||
[browserFields, handleDataProviderEdited, timelineId, timelineType]
|
||||
);
|
||||
|
||||
const button = useMemo(
|
||||
() => (
|
||||
<EuiButton
|
||||
const button = useMemo(() => {
|
||||
if (timelineType === TimelineType.template) {
|
||||
return (
|
||||
<EuiButton
|
||||
size="s"
|
||||
onClick={handleOpenPopover}
|
||||
data-test-subj="addFilter"
|
||||
iconType="arrowDown"
|
||||
fill
|
||||
iconSide="right"
|
||||
>
|
||||
<EuiText size="s">{ADD_FIELD_LABEL}</EuiText>
|
||||
</EuiButton>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<EuiButtonEmpty
|
||||
size="s"
|
||||
onClick={handleOpenPopover}
|
||||
data-test-subj="addFilter"
|
||||
iconType="arrowDown"
|
||||
fill
|
||||
iconSide="right"
|
||||
>
|
||||
<EuiText size="s">{ADD_FIELD_LABEL}</EuiText>
|
||||
</EuiButton>
|
||||
),
|
||||
[handleOpenPopover]
|
||||
);
|
||||
<EuiText size="s">{`+ ${ADD_FIELD_LABEL}`}</EuiText>
|
||||
</EuiButtonEmpty>
|
||||
);
|
||||
}, [handleOpenPopover, timelineType]);
|
||||
|
||||
const content = useMemo(() => {
|
||||
if (timelineType === TimelineType.template) {
|
||||
|
|
|
@ -82,10 +82,10 @@ const Parens = styled.span`
|
|||
`}
|
||||
`;
|
||||
|
||||
const AndOrBadgeContainer = styled.div`
|
||||
width: 121px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
const AndOrBadgeContainer = styled.div<{ hideBadge: boolean }>`
|
||||
span {
|
||||
visibility: ${({ hideBadge }) => (hideBadge ? 'hidden' : 'inherit')};
|
||||
}
|
||||
`;
|
||||
|
||||
const LastAndOrBadgeInGroup = styled.div`
|
||||
|
@ -113,10 +113,6 @@ const ParensContainer = styled(EuiFlexItem)`
|
|||
align-self: center;
|
||||
`;
|
||||
|
||||
const AddDataProviderContainer = styled.div`
|
||||
padding-right: 9px;
|
||||
`;
|
||||
|
||||
const getDataProviderValue = (dataProvider: DataProvidersAnd) =>
|
||||
dataProvider.queryMatch.displayValue ?? dataProvider.queryMatch.value;
|
||||
|
||||
|
@ -152,15 +148,9 @@ export const Providers = React.memo<Props>(
|
|||
|
||||
<EuiFlexGroup alignItems="center" gutterSize="none">
|
||||
<OrFlexItem grow={false}>
|
||||
{groupIndex === 0 ? (
|
||||
<AddDataProviderContainer>
|
||||
<AddDataProviderPopover browserFields={browserFields} timelineId={timelineId} />
|
||||
</AddDataProviderContainer>
|
||||
) : (
|
||||
<AndOrBadgeContainer>
|
||||
<AndOrBadge type="or" />
|
||||
</AndOrBadgeContainer>
|
||||
)}
|
||||
<AndOrBadgeContainer hideBadge={groupIndex === 0}>
|
||||
<AndOrBadge type="or" />
|
||||
</AndOrBadgeContainer>
|
||||
</OrFlexItem>
|
||||
<ParensContainer grow={false}>
|
||||
<Parens>{'('}</Parens>
|
||||
|
@ -300,6 +290,9 @@ export const Providers = React.memo<Props>(
|
|||
<ParensContainer grow={false}>
|
||||
<Parens>{')'}</Parens>
|
||||
</ParensContainer>
|
||||
{groupIndex === dataProviderGroups.length - 1 && (
|
||||
<AddDataProviderPopover browserFields={browserFields} timelineId={timelineId} />
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
</Fragment>
|
||||
))}
|
||||
|
|
|
@ -266,7 +266,9 @@ const makeMapStateToProps = () => {
|
|||
|
||||
// return events on empty search
|
||||
const kqlQueryExpression =
|
||||
isEmpty(dataProviders) && isEmpty(kqlQueryTimeline) ? ' ' : kqlQueryTimeline;
|
||||
isEmpty(dataProviders) && isEmpty(kqlQueryTimeline) && timelineType === 'template'
|
||||
? ' '
|
||||
: kqlQueryTimeline;
|
||||
return {
|
||||
columns,
|
||||
dataProviders,
|
||||
|
|
Loading…
Reference in a new issue