github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security Solution][Detection Alerts] Fixes alert page refresh issues (#111042)

Browse source 
Co-authored-by: Xavier Mouligneau <189600+XavierM@users.noreply.github.com>
This commit is contained in:
Davis Plumlee 2021-09-13 20:41:06 -04:00 • committed by GitHub
parent a8f9468fe8
commit 8a9ce5a1ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 460 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

19
x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
View file

@ -87,6 +87,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
entityType,
excludedRowRendererIds,
filters,
globalQuery,
id,
isLive,
itemsPerPage,
@ -102,6 +103,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
scopeId,
showCheckboxes,
sort,
timelineQuery,
utilityBar,
additionalFilters,
// If truthy, the graph viewer (Resolver) is showing
@ -157,6 +159,18 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
[dispatch, id]
);
const refetchQuery = (newQueries: inputsModel.GlobalQuery[]) => {
newQueries.forEach((q) => q.refetch && (q.refetch as inputsModel.Refetch)());
};
const onAlertStatusActionSuccess = useCallback(() => {
if (id === TimelineId.active) {
refetchQuery([timelineQuery]);
} else {
refetchQuery(globalQuery);
}
}, [id, timelineQuery, globalQuery]);
const bulkActions = useMemo(() => ({ onAlertStatusActionSuccess }), [onAlertStatusActionSuccess]);
return (
<>
<FullScreenContainer $isFullScreen={globalFullScreen}>
@ -166,6 +180,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
id,
type: 'embedded',
browserFields,
bulkActions,
columns,
dataProviders: dataProviders!,
defaultCellActions,
@ -245,6 +260,8 @@ const makeMapStateToProps = () => {
const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
const getGlobalFiltersQuerySelector = inputsSelectors.globalFiltersQuerySelector();
const getTimeline = timelineSelectors.getTimelineByIdSelector();
const getGlobalQueries = inputsSelectors.globalQuery();
const getTimelineQuery = inputsSelectors.timelineQueryByIdSelector();
const mapStateToProps = (state: State, { id, defaultModel }: OwnProps) => {
const input: inputsModel.InputsRange = getInputsTimeline(state);
const timeline: TimelineModel = getTimeline(state, id) ?? defaultModel;
@ -280,6 +297,8 @@ const makeMapStateToProps = () => {
// Used to determine whether the footer should show (since it is hidden if the graph is showing.)
// `getTimeline` actually returns `TimelineModel | undefined`
graphEventId,
globalQuery: getGlobalQueries(state),
timelineQuery: getTimelineQuery(state, id),
};
};
return mapStateToProps;

2
x-pack/plugins/security_solution/public/common/store/inputs/selectors.ts
View file

@ -57,7 +57,7 @@ export const globalTimeRangeSelector = createSelector(selectGlobal, (global) =>
export const globalPolicySelector = createSelector(selectGlobal, (global) => global.policy);
export const globalQuery = createSelector(selectGlobal, (global) => global.queries);
export const globalQuery = () => createSelector(selectGlobal, (global) => global.queries);
export const globalQueryByIdSelector = () => createSelector(selectGlobalQuery, (query) => query);

2
x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx
View file

@ -172,6 +172,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
title = i18n.OPENED_ALERT_SUCCESS_TOAST(updated);
break;
case 'acknowledged':
case 'in-progress':
title = i18n.ACKNOWLEDGED_ALERT_SUCCESS_TOAST(updated);
}
displaySuccessToast(title, dispatchToaster);
@ -191,6 +192,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
title = i18n.OPENED_ALERT_FAILED_TOAST;
break;
case 'acknowledged':
case 'in-progress':
title = i18n.ACKNOWLEDGED_ALERT_FAILED_TOAST;
}
displayErrorToast(title, [error.message], dispatchToaster);

43
x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx
View file

@ -9,7 +9,7 @@ import React, { useCallback, useMemo, useState } from 'react';
import { EuiButtonIcon, EuiContextMenuPanel, EuiPopover, EuiToolTip } from '@elastic/eui';
import { indexOf } from 'lodash';
import { connect, ConnectedProps } from 'react-redux';
import { ExceptionListType } from '@kbn/securitysolution-io-ts-list-types';
import { get } from 'lodash/fp';
import { buildGetAlertByIdQuery } from '../../../../common/components/exceptions/helpers';
@ -21,7 +21,8 @@ import {
AddExceptionModalProps,
} from '../../../../common/components/exceptions/add_exception_modal';
import * as i18n from '../translations';
import { inputsModel } from '../../../../common/store';
import { inputsModel, inputsSelectors, State } from '../../../../common/store';
import { TimelineId } from '../../../../../common';
import { AlertData, EcsHit } from '../../../../common/components/exceptions/types';
import { useQueryAlerts } from '../../../containers/detection_engine/alerts/use_query';
import { useSignalIndex } from '../../../containers/detection_engine/alerts/use_signal_index';
@ -49,7 +50,7 @@ interface AlertContextMenuProps {
timelineId: string;
}
const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
const AlertContextMenuComponent: React.FC<AlertContextMenuProps & PropsFromRedux> = ({
ariaLabel = i18n.MORE_ACTIONS,
ariaRowindex,
columnValues,
@ -58,6 +59,8 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
refetch,
onRuleChange,
timelineId,
globalQuery,
timelineQuery,
}) => {
const [isPopoverOpen, setPopover] = useState(false);
@ -102,6 +105,18 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
);
}, [disabled, onButtonClick, ariaLabel]);
const refetchQuery = (newQueries: inputsModel.GlobalQuery[]) => {
newQueries.forEach((q) => q.refetch && (q.refetch as inputsModel.Refetch)());
};
const refetchAll = useCallback(() => {
if (timelineId === TimelineId.active) {
refetchQuery([timelineQuery]);
} else {
refetchQuery(globalQuery);
}
}, [timelineId, globalQuery, timelineQuery]);
const {
exceptionModalType,
onAddExceptionCancel,
@ -110,7 +125,7 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
ruleIndices,
} = useExceptionModal({
ruleIndex: ecsRowData?.signal?.rule?.index,
refetch,
refetch: refetchAll,
timelineId,
});
@ -125,7 +140,7 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
eventId: ecsRowData?._id,
indexName: ecsRowData?._index ?? '',
timelineId,
refetch,
refetch: refetchAll,
closePopover,
});
@ -218,7 +233,23 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
);
};
export const AlertContextMenu = React.memo(AlertContextMenuComponent);
const makeMapStateToProps = () => {
const getGlobalQueries = inputsSelectors.globalQuery();
const getTimelineQuery = inputsSelectors.timelineQueryByIdSelector();
const mapStateToProps = (state: State, { timelineId }: AlertContextMenuProps) => {
return {
globalQuery: getGlobalQueries(state),
timelineQuery: getTimelineQuery(state, timelineId),
};
};
return mapStateToProps;
};
const connector = connect(makeMapStateToProps);
type PropsFromRedux = ConnectedProps<typeof connector>;
export const AlertContextMenu = connector(React.memo(AlertContextMenuComponent));
type AddExceptionModalWrapperProps = Omit<
AddExceptionModalProps,

42
x-pack/plugins/security_solution/public/detections/components/take_action_dropdown/index.tsx
View file

@ -9,7 +9,8 @@ import React, { useState, useCallback, useMemo } from 'react';
import { EuiContextMenuPanel, EuiButton, EuiPopover } from '@elastic/eui';
import type { ExceptionListType } from '@kbn/securitysolution-io-ts-list-types';
import { isEmpty } from 'lodash/fp';
import { TimelineEventsDetailsItem } from '../../../../common';
import { connect, ConnectedProps } from 'react-redux';
import { TimelineEventsDetailsItem, TimelineId } from '../../../../common';
import { TAKE_ACTION } from '../alerts_table/alerts_utility_bar/translations';
import { useExceptionActions } from '../alerts_table/timeline_actions/use_add_exception_actions';
import { useAlertsActions } from '../alerts_table/timeline_actions/use_alerts_actions';
@ -23,6 +24,7 @@ import { Status } from '../../../../common/detection_engine/schemas/common/schem
import { isAlertFromEndpointAlert } from '../../../common/utils/endpoint_alert_check';
import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
import { useAddToCaseActions } from '../alerts_table/timeline_actions/use_add_to_case_actions';
import { inputsModel, inputsSelectors, State } from '../../../common/store';
interface ActionsData {
alertStatus: Status;
@ -46,7 +48,7 @@ export interface TakeActionDropdownProps {
timelineId: string;
}
export const TakeActionDropdown = React.memo(
export const TakeActionDropdownComponent = React.memo(
({
detailsData,
ecsData,
@ -59,7 +61,9 @@ export const TakeActionDropdown = React.memo(
onAddIsolationStatusClick,
refetch,
timelineId,
}: TakeActionDropdownProps) => {
globalQuery,
timelineQuery,
}: TakeActionDropdownProps & PropsFromRedux) => {
const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@ -141,12 +145,24 @@ export const TakeActionDropdown = React.memo(
closePopoverHandler();
}, [closePopoverHandler]);
const refetchQuery = (newQueries: inputsModel.GlobalQuery[]) => {
newQueries.forEach((q) => q.refetch && (q.refetch as inputsModel.Refetch)());
};
const refetchAll = useCallback(() => {
if (timelineId === TimelineId.active) {
refetchQuery([timelineQuery]);
} else {
refetchQuery(globalQuery);
}
}, [timelineId, globalQuery, timelineQuery]);
const { actionItems: statusActionItems } = useAlertsActions({
alertStatus: actionsData.alertStatus,
closePopover: closePopoverAndFlyout,
eventId: actionsData.eventId,
indexName,
refetch,
refetch: refetchAll,
timelineId,
});
@ -216,3 +232,21 @@ export const TakeActionDropdown = React.memo(
) : null;
}
);
const makeMapStateToProps = () => {
const getGlobalQueries = inputsSelectors.globalQuery();
const getTimelineQuery = inputsSelectors.timelineQueryByIdSelector();
const mapStateToProps = (state: State, { timelineId }: TakeActionDropdownProps) => {
return {
globalQuery: getGlobalQueries(state),
timelineQuery: getTimelineQuery(state, timelineId),
};
};
return mapStateToProps;
};
const connector = connect(makeMapStateToProps);
type PropsFromRedux = ConnectedProps<typeof connector>;
export const TakeActionDropdown = connector(React.memo(TakeActionDropdownComponent));

358
x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap generated
View file

@ -1233,7 +1233,7 @@ Array [
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<Memo()
<Connect(Component)
detailsData={null}
ecsData={
Object {
@ -1394,7 +1394,182 @@ Array [
onAddExceptionTypeClick={[Function]}
onAddIsolationStatusClick={[Function]}
timelineId="test"
/>
>
<Memo()
detailsData={null}
dispatch={[Function]}
ecsData={
Object {
"_id": "1",
"destination": Object {
"ip": Array [
"192.168.0.3",
],
"port": Array [
6343,
],
},
"event": Object {
"action": Array [
"Action",
],
"category": Array [
"Access",
],
"id": Array [
"1",
],
"module": Array [
"nginx",
],
"severity": Array [
3,
],
},
"geo": Object {
"country_iso_code": Array [
"xx",
],
"region_name": Array [
"xx",
],
},
"host": Object {
"ip": Array [
"192.168.0.1",
],
"name": Array [
"apache",
],
},
"signal": Object {
"rule": Object {
"created_at": Array [
"2020-01-10T21:11:45.839Z",
],
"created_by": Array [
"elastic",
],
"description": Array [
"24/7",
],
"enabled": Array [
true,
],
"false_positives": Array [
"test-1",
],
"filters": Array [],
"from": Array [
"now-300s",
],
"id": Array [
"b5ba41ab-aaf3-4f43-971b-bdf9434ce0ea",
],
"immutable": Array [
false,
],
"index": Array [
"auditbeat-*",
],
"interval": Array [
"5m",
],
"language": Array [
"kuery",
],
"max_signals": Array [
100,
],
"note": Array [
"# this is some markdown documentation",
],
"output_index": Array [
".siem-signals-default",
],
"query": Array [
"user.name: root or user.name: admin",
],
"references": Array [
"www.test.co",
],
"risk_score": Array [
"21",
],
"rule_id": Array [
"rule-id-1",
],
"saved_id": Array [
"Garrett's IP",
],
"severity": Array [
"low",
],
"tags": Array [],
"threat": Array [],
"timeline_id": Array [
"1234-2136-11ea-9864-ebc8cc1cb8c2",
],
"timeline_title": Array [
"Untitled timeline",
],
"to": Array [
"now",
],
"type": Array [
"saved_query",
],
"updated_at": Array [
"2020-01-10T21:11:45.839Z",
],
"updated_by": Array [
"elastic",
],
"version": Array [
"1",
],
},
},
"source": Object {
"ip": Array [
"192.168.0.1",
],
"port": Array [
80,
],
},
"timestamp": "2018-11-05T19:03:25.937Z",
"user": Object {
"id": Array [
"1",
],
"name": Array [
"john.dee",
],
},
}
}
globalQuery={Array []}
handleOnEventClosed={[Function]}
indexName="my-index"
isHostIsolationPanelOpen={false}
loadingEventDetails={true}
onAddEventFilterClick={[Function]}
onAddExceptionTypeClick={[Function]}
onAddIsolationStatusClick={[Function]}
timelineId="test"
timelineQuery={
Object {
"id": "",
"inspect": null,
"isInspected": false,
"loading": false,
"refetch": null,
"selectedInspectIndex": 0,
}
}
/>
</Connect(Component)>
</div>
</EuiFlexItem>
</div>
@ -2094,7 +2269,7 @@ Array [
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<Memo()
<Connect(Component)
detailsData={null}
ecsData={
Object {
@ -2255,7 +2430,182 @@ Array [
onAddExceptionTypeClick={[Function]}
onAddIsolationStatusClick={[Function]}
timelineId="test"
/>
>
<Memo()
detailsData={null}
dispatch={[Function]}
ecsData={
Object {
"_id": "1",
"destination": Object {
"ip": Array [
"192.168.0.3",
],
"port": Array [
6343,
],
},
"event": Object {
"action": Array [
"Action",
],
"category": Array [
"Access",
],
"id": Array [
"1",
],
"module": Array [
"nginx",
],
"severity": Array [
3,
],
},
"geo": Object {
"country_iso_code": Array [
"xx",
],
"region_name": Array [
"xx",
],
},
"host": Object {
"ip": Array [
"192.168.0.1",
],
"name": Array [
"apache",
],
},
"signal": Object {
"rule": Object {
"created_at": Array [
"2020-01-10T21:11:45.839Z",
],
"created_by": Array [
"elastic",
],
"description": Array [
"24/7",
],
"enabled": Array [
true,
],
"false_positives": Array [
"test-1",
],
"filters": Array [],
"from": Array [
"now-300s",
],
"id": Array [
"b5ba41ab-aaf3-4f43-971b-bdf9434ce0ea",
],
"immutable": Array [
false,
],
"index": Array [
"auditbeat-*",
],
"interval": Array [
"5m",
],
"language": Array [
"kuery",
],
"max_signals": Array [
100,
],
"note": Array [
"# this is some markdown documentation",
],
"output_index": Array [
".siem-signals-default",
],
"query": Array [
"user.name: root or user.name: admin",
],
"references": Array [
"www.test.co",
],
"risk_score": Array [
"21",
],
"rule_id": Array [
"rule-id-1",
],
"saved_id": Array [
"Garrett's IP",
],
"severity": Array [
"low",
],
"tags": Array [],
"threat": Array [],
"timeline_id": Array [
"1234-2136-11ea-9864-ebc8cc1cb8c2",
],
"timeline_title": Array [
"Untitled timeline",
],
"to": Array [
"now",
],
"type": Array [
"saved_query",
],
"updated_at": Array [
"2020-01-10T21:11:45.839Z",
],
"updated_by": Array [
"elastic",
],
"version": Array [
"1",
],
},
},
"source": Object {
"ip": Array [
"192.168.0.1",
],
"port": Array [
80,
],
},
"timestamp": "2018-11-05T19:03:25.937Z",
"user": Object {
"id": Array [
"1",
],
"name": Array [
"john.dee",
],
},
}
}
globalQuery={Array []}
handleOnEventClosed={[Function]}
indexName="my-index"
isHostIsolationPanelOpen={false}
loadingEventDetails={true}
onAddEventFilterClick={[Function]}
onAddExceptionTypeClick={[Function]}
onAddIsolationStatusClick={[Function]}
timelineId="test"
timelineQuery={
Object {
"id": "",
"inspect": null,
"isInspected": false,
"loading": false,
"refetch": null,
"selectedInspectIndex": 0,
}
}
/>
</Connect(Component)>
</div>
</EuiFlexItem>
</div>

10
x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx
View file

@ -19,7 +19,12 @@ import { Direction, EntityType } from '../../../../common/search_strategy';
import type { DocValueFields } from '../../../../common/search_strategy';
import type { CoreStart } from '../../../../../../../src/core/public';
import type { BrowserFields } from '../../../../common/search_strategy/index_fields';
import { TGridCellAction, TimelineId, TimelineTabs } from '../../../../common/types/timeline';
import {
BulkActionsProp,
TGridCellAction,
TimelineId,
TimelineTabs,
} from '../../../../common/types/timeline';
import type {
CellValueElementProps,
@ -95,6 +100,7 @@ const SECURITY_ALERTS_CONSUMERS = [AlertConsumers.SIEM];
export interface TGridIntegratedProps {
additionalFilters: React.ReactNode;
browserFields: BrowserFields;
bulkActions?: BulkActionsProp;
columns: ColumnHeaderOptions[];
data?: DataPublicPluginStart;
dataProviders: DataProvider[];
@ -135,6 +141,7 @@ export interface TGridIntegratedProps {
const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
additionalFilters,
browserFields,
bulkActions = true,
columns,
data,
dataProviders,
@ -334,6 +341,7 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
hasAlertsCrud={hasAlertsCrud}
activePage={pageInfo.activePage}
browserFields={browserFields}
bulkActions={bulkActions}
filterQuery={filterQuery}
data={nonDeletedEvents}
defaultCellActions={defaultCellActions}