Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[SIEM] Adds actions and selection to Signals Table #53101

Merged
merged 13 commits into from
Dec 19, 2019
Merged

[SIEM] Adds actions and selection to Signals Table #53101

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
bc62b91
Adds actions and selection to Signals Table
spong Dec 16, 2019
97eabcc
Merge branch 'master' of github.com:elastic/kibana into de-signals-ac…
spong Dec 17, 2019
86e6fb6
Merge branch 'master' of github.com:elastic/kibana into de-signals-ac…
spong Dec 17, 2019
98e61be
Moving back to default signals index and clarified todos
spong Dec 17, 2019
2f70563
Merge branch 'master' of github.com:elastic/kibana into de-signals-ac…
spong Dec 17, 2019
88765e4
Fixes from comments, hoists defaultFilters and to/from from SignalsTa…
spong Dec 18, 2019
c587651
Merge branch 'master' of github.com:elastic/kibana into de-signals-ac…
spong Dec 18, 2019
b1fec53
Reverting back to default signals constant
spong Dec 18, 2019
681f002
Merge branch 'master' of github.com:elastic/kibana into de-signals-ac…
spong Dec 18, 2019
b540d32
Merge branch 'master' of github.com:elastic/kibana into de-signals-ac…
spong Dec 18, 2019
8ed22de
Fixes from merge with alerts table
spong Dec 18, 2019
a3f2ca1
Fixing how filters prop is passed in events_viewer
spong Dec 18, 2019
29cdb09
Removing unused import
spong Dec 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions x-pack/legacy/plugins/siem/common/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const DEFAULT_DATE_FORMAT = 'dateFormat';
export const DEFAULT_DATE_FORMAT_TZ = 'dateFormat:tz';
export const DEFAULT_DARK_MODE = 'theme:darkMode';
export const DEFAULT_INDEX_KEY = 'siem:defaultIndex';
export const DEFAULT_NUMBER_FORMAT = 'format:number:defaultPattern';
export const DEFAULT_TIME_RANGE = 'timepicker:timeDefaults';
export const DEFAULT_REFRESH_RATE_INTERVAL = 'timepicker:refreshIntervalDefaults';
export const DEFAULT_SIEM_TIME_RANGE = 'siem:timeDefaults';
Expand Down
145 changes: 81 additions & 64 deletions x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

import { EuiPanel } from '@elastic/eui';
import { getOr, isEmpty, isEqual } from 'lodash/fp';
import { getOr, isEmpty, isEqual, union } from 'lodash/fp';
import React from 'react';
import styled from 'styled-components';

Expand Down Expand Up @@ -46,6 +46,7 @@ interface Props {
browserFields: BrowserFields;
columns: ColumnHeader[];
dataProviders: DataProvider[];
deletedEventIds: Readonly<string[]>;
end: number;
filters: esFilters.Filter[];
headerFilterGroup?: React.ReactNode;
Expand All @@ -71,6 +72,7 @@ export const EventsViewer = React.memo<Props>(
browserFields,
columns,
dataProviders,
deletedEventIds,
end,
filters,
headerFilterGroup,
Expand Down Expand Up @@ -104,6 +106,10 @@ export const EventsViewer = React.memo<Props>(
end,
isEventViewer: true,
});
const queryFields = union(
spong marked this conversation as resolved.
Show resolved Hide resolved
columnsHeader.map(c => c.id),
timelineTypeContext.queryFields ?? []
);

return (
<EuiPanel data-test-subj="events-viewer-panel" grow={false}>
Expand All @@ -119,7 +125,7 @@ export const EventsViewer = React.memo<Props>(

{combinedQueries != null ? (
<TimelineQuery
fields={columnsHeader.map(c => c.id)}
fields={queryFields}
filterQuery={combinedQueries.filterQuery}
id={id}
indexPattern={indexPattern}
Expand All @@ -139,73 +145,81 @@ export const EventsViewer = React.memo<Props>(
pageInfo,
refetch,
totalCount = 0,
}) => (
<>
<HeaderSection
id={id}
showInspect={showInspect}
subtitle={
utilityBar
? undefined
: `${i18n.SHOWING}: ${totalCount.toLocaleString()} ${i18n.UNIT(
totalCount
)}`
}
title={timelineTypeContext?.title ?? i18n.EVENTS}
>
{headerFilterGroup}
</HeaderSection>
}) => {
const totalCountMinusDeleted =
totalCount > 0 ? totalCount - deletedEventIds.length : 0;

// TODO: Reset eventDeletedIds/eventLoadingIds on refresh/loadmore (getUpdatedAt)
Comment on lines +153 to +156
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe TimelineQuery can take care of that if you passed the parameter and default it.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect! I was hesitant to move that logic into TimelineQuery and wanted to chat with you first -- this will work out well.

return (
<>
<HeaderSection
id={id}
showInspect={showInspect}
subtitle={
utilityBar
? undefined
: `${
i18n.SHOWING
}: ${totalCountMinusDeleted.toLocaleString()} ${i18n.UNIT(
totalCountMinusDeleted
)}`
}
title={timelineTypeContext?.title ?? i18n.EVENTS}
>
{headerFilterGroup}
</HeaderSection>

{utilityBar?.(totalCount)}
{utilityBar?.(totalCountMinusDeleted)}

<div
data-test-subj={`events-container-loading-${loading}`}
style={{ width: `${width}px` }}
>
<ManageTimelineContext
loading={loading}
width={width}
type={timelineTypeContext}
<div
data-test-subj={`events-container-loading-${loading}`}
style={{ width: `${width}px` }}
>
<TimelineRefetch
id={id}
inputId="global"
inspect={inspect}
<ManageTimelineContext
loading={loading}
refetch={refetch}
/>
width={width}
type={timelineTypeContext}
>
<TimelineRefetch
id={id}
inputId="global"
inspect={inspect}
loading={loading}
refetch={refetch}
/>

<StatefulBody
browserFields={browserFields}
data={events}
id={id}
isEventViewer={true}
height={height}
sort={sort}
toggleColumn={toggleColumn}
/>
<StatefulBody
browserFields={browserFields}
data={events.filter(e => !deletedEventIds.includes(e._id))}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really do think that TimelineQuery need to take care of that because that will cause re-rendering

id={id}
isEventViewer={true}
height={height}
sort={sort}
toggleColumn={toggleColumn}
/>

<Footer
compact={isCompactFooter(width)}
getUpdatedAt={getUpdatedAt}
hasNextPage={getOr(false, 'hasNextPage', pageInfo)!}
height={footerHeight}
isEventViewer={true}
isLive={isLive}
isLoading={loading}
itemsCount={events.length}
itemsPerPage={itemsPerPage}
itemsPerPageOptions={itemsPerPageOptions}
onChangeItemsPerPage={onChangeItemsPerPage}
onLoadMore={loadMore}
nextCursor={getOr(null, 'endCursor.value', pageInfo)!}
serverSideEventCount={totalCount}
tieBreaker={getOr(null, 'endCursor.tiebreaker', pageInfo)}
/>
</ManageTimelineContext>
</div>
</>
)}
<Footer
compact={isCompactFooter(width)}
getUpdatedAt={getUpdatedAt}
hasNextPage={getOr(false, 'hasNextPage', pageInfo)!}
height={footerHeight}
isEventViewer={true}
isLive={isLive}
isLoading={loading}
itemsCount={events.length}
itemsPerPage={itemsPerPage}
itemsPerPageOptions={itemsPerPageOptions}
onChangeItemsPerPage={onChangeItemsPerPage}
onLoadMore={loadMore}
nextCursor={getOr(null, 'endCursor.value', pageInfo)!}
serverSideEventCount={totalCountMinusDeleted}
tieBreaker={getOr(null, 'endCursor.tiebreaker', pageInfo)}
/>
</ManageTimelineContext>
</div>
</>
);
}}
</TimelineQuery>
) : null}
</>
Expand All @@ -218,6 +232,7 @@ export const EventsViewer = React.memo<Props>(
prevProps.browserFields === nextProps.browserFields &&
prevProps.columns === nextProps.columns &&
prevProps.dataProviders === nextProps.dataProviders &&
prevProps.deletedEventIds === nextProps.deletedEventIds &&
prevProps.end === nextProps.end &&
isEqual(prevProps.filters, nextProps.filters) &&
prevProps.height === nextProps.height &&
Expand All @@ -230,6 +245,8 @@ export const EventsViewer = React.memo<Props>(
isEqual(prevProps.query, nextProps.query) &&
prevProps.showInspect === nextProps.showInspect &&
prevProps.start === nextProps.start &&
prevProps.sort === nextProps.sort
prevProps.sort === nextProps.sort &&
isEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) &&
prevProps.utilityBar === nextProps.utilityBar
);
EventsViewer.displayName = 'EventsViewer';
37 changes: 32 additions & 5 deletions x-pack/legacy/plugins/siem/public/components/events_viewer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 * as i18n from './translations';

export interface OwnProps {
defaultIndices?: string[];
Expand All @@ -45,9 +46,12 @@ interface StateReduxProps {
itemsPerPage?: number;
itemsPerPageOptions?: number[];
kqlMode: KqlMode;
deletedEventIds: Readonly<string[]>;
query: Query;
pageCount?: number;
sort?: Sort;
showCheckboxes: boolean;
showRowRenderers: boolean;
}

interface DispatchProps {
Expand All @@ -56,6 +60,8 @@ interface DispatchProps {
columns: ColumnHeader[];
itemsPerPage?: number;
sort?: Sort;
showCheckboxes?: boolean;
showRowRenderers?: boolean;
}>;
deleteEventQuery: ActionCreator<{
id: string;
Expand Down Expand Up @@ -85,6 +91,7 @@ const StatefulEventsViewerComponent = React.memo<Props>(
dataProviders,
defaultFilters = [],
defaultModel,
deletedEventIds,
defaultIndices,
deleteEventQuery,
end,
Expand All @@ -98,10 +105,11 @@ const StatefulEventsViewerComponent = React.memo<Props>(
query,
removeColumn,
start,
showCheckboxes,
showRowRenderers,
sort,
timelineTypeContext = {
showCheckboxes: false,
showRowRenderers: true,
loadingText: i18n.LOADING_EVENTS,
},
updateItemsPerPage,
upsertColumn,
Expand All @@ -114,7 +122,7 @@ const StatefulEventsViewerComponent = React.memo<Props>(

useEffect(() => {
if (createTimeline != null) {
createTimeline({ id, columns, sort, itemsPerPage });
createTimeline({ id, columns, sort, itemsPerPage, showCheckboxes, showRowRenderers });
}
return () => {
deleteEventQuery({ id, inputId: 'global' });
Expand Down Expand Up @@ -158,6 +166,7 @@ const StatefulEventsViewerComponent = React.memo<Props>(
columns={columns}
id={id}
dataProviders={dataProviders!}
deletedEventIds={deletedEventIds}
end={end}
filters={[...filters, ...defaultFilters]}
headerFilterGroup={headerFilterGroup}
Expand All @@ -183,6 +192,7 @@ const StatefulEventsViewerComponent = React.memo<Props>(
prevProps.activePage === nextProps.activePage &&
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 &&
Expand All @@ -192,7 +202,11 @@ const StatefulEventsViewerComponent = React.memo<Props>(
isEqual(prevProps.query, nextProps.query) &&
prevProps.pageCount === nextProps.pageCount &&
isEqual(prevProps.sort, nextProps.sort) &&
prevProps.start === nextProps.start
prevProps.showCheckboxes === nextProps.showCheckboxes &&
prevProps.showRowRenderers === nextProps.showRowRenderers &&
prevProps.start === nextProps.start &&
isEqual(prevProps.timelineTypeContext, nextProps.timelineTypeContext) &&
prevProps.utilityBar === nextProps.utilityBar
);

StatefulEventsViewerComponent.displayName = 'StatefulEventsViewerComponent';
Expand All @@ -205,11 +219,22 @@ const makeMapStateToProps = () => {
const mapStateToProps = (state: State, { id, defaultFilters = [], defaultModel }: OwnProps) => {
const input: inputsModel.InputsRange = getInputsTimeline(state);
const events: TimelineModel = getEvents(state, id) ?? defaultModel;
const { columns, dataProviders, itemsPerPage, itemsPerPageOptions, kqlMode, sort } = events;
const {
columns,
dataProviders,
deletedEventIds,
itemsPerPage,
itemsPerPageOptions,
kqlMode,
sort,
showCheckboxes,
showRowRenderers,
} = events;

return {
columns,
dataProviders,
deletedEventIds,
filters: [...getGlobalFiltersQuerySelector(state), ...defaultFilters],
id,
isLive: input.policy.kind === 'interval',
Expand All @@ -218,6 +243,8 @@ const makeMapStateToProps = () => {
kqlMode,
query: getGlobalQuerySelector(state),
sort,
showCheckboxes,
showRowRenderers,
};
};
return mapStateToProps;
Expand Down
7 changes: 7 additions & 0 deletions x-pack/legacy/plugins/siem/public/components/events_viewer/translations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,13 @@ export const EVENTS = i18n.translate('xpack.siem.eventsViewer.eventsLabel', {
defaultMessage: 'Events',
});

export const LOADING_EVENTS = i18n.translate(
'xpack.siem.eventsViewer.footer.loadingEventsDataLabel',
{
defaultMessage: 'Loading Events',
}
);

export const UNIT = (totalCount: number) =>
i18n.translate('xpack.siem.eventsViewer.unit', {
values: { totalCount },
Expand Down