Skip to content

Commit aee1ee4

Browse files
author
oatkiller
committed
dont pass pushToQueryParams to components
1 parent 94d171d commit aee1ee4

File tree

8 files changed

+86
-104
lines changed

8 files changed

+86
-104
lines changed

‎x-pack/plugins/security_solution/public/resolver/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export interface ResolverUIState {
5959
/**
6060
* An ID that is used to differentiate this Resolver instance from others concurrently running on the same page.
6161
*/
62-
readonly resolverComponentInstanceID: string;
62+
readonly resolverComponentInstanceID?: string;
6363
}
6464

6565
/**

‎x-pack/plugins/security_solution/public/resolver/view/panels/event_counts_for_process.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { StyledBreadcrumbs } from './panel_content_utilities';
1212

1313
import * as event from '../../../../common/endpoint/models/event';
1414
import { ResolverEvent, ResolverNodeStats } from '../../../../common/endpoint/types';
15-
import { CrumbInfo } from '../../types';
15+
import { useReplaceBreadcrumbParameters } from '../use_replace_breadcrumb_parameters';
1616

1717
/**
1818
* This view gives counts for all the related events of a process grouped by related event type.
@@ -27,11 +27,9 @@ import { CrumbInfo } from '../../types';
2727
*/
2828
export const EventCountsForProcess = memo(function EventCountsForProcess({
2929
processEvent,
30-
pushToQueryParams,
3130
relatedStats,
3231
}: {
3332
processEvent: ResolverEvent;
34-
pushToQueryParams: (queryStringKeyValuePair: CrumbInfo) => unknown;
3533
relatedStats: ResolverNodeStats;
3634
}) {
3735
interface EventCountsTableView {
@@ -62,6 +60,7 @@ export const EventCountsForProcess = memo(function EventCountsForProcess({
6260
defaultMessage: 'Events',
6361
}
6462
);
63+
const pushToQueryParams = useReplaceBreadcrumbParameters();
6564
const crumbs = useMemo(() => {
6665
return [
6766
{

‎x-pack/plugins/security_solution/public/resolver/view/panels/index.tsx‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import { EventCountsForProcess } from './event_counts_for_process';
1717
import { ProcessDetails } from './process_details';
1818
import { ProcessListWithCounts } from './process_list_with_counts';
1919
import { RelatedEventDetail } from './related_event_detail';
20-
import { useReplaceBreadcrumbParameters } from '../use_replace_breadcrumb_parameters';
2120

2221
/**
2322
* The team decided to use this table to determine which breadcrumbs/view to display:
@@ -41,8 +40,6 @@ const PanelContent = memo(function PanelContent() {
4140

4241
const queryParams = useSelector(selectors.breadcrumbParameters);
4342

44-
const pushToQueryParams = useReplaceBreadcrumbParameters();
45-
4643
const graphableProcesses = useSelector(selectors.graphableProcesses);
4744
const graphableProcessEntityIds = useMemo(() => {
4845
return new Set(graphableProcesses.map(event.entityId));
@@ -166,16 +163,13 @@ const PanelContent = memo(function PanelContent() {
166163

167164
const panelInstance = useMemo(() => {
168165
if (panelToShow === 'processDetails') {
169-
return (
170-
<ProcessDetails processEvent={uiSelectedEvent!} pushToQueryParams={pushToQueryParams} />
171-
);
166+
return <ProcessDetails processEvent={uiSelectedEvent!} />;
172167
}
173168

174169
if (panelToShow === 'eventCountsForProcess') {
175170
return (
176171
<EventCountsForProcess
177172
processEvent={uiSelectedEvent!}
178-
pushToQueryParams={pushToQueryParams}
179173
relatedStats={relatedStatsForIdFromParams!}
180174
/>
181175
);
@@ -185,7 +179,6 @@ const PanelContent = memo(function PanelContent() {
185179
return (
186180
<ProcessEventList
187181
processEvent={uiSelectedEvent!}
188-
pushToQueryParams={pushToQueryParams}
189182
relatedStats={relatedStatsForIdFromParams!}
190183
eventType={crumbEvent}
191184
/>
@@ -200,21 +193,13 @@ const PanelContent = memo(function PanelContent() {
200193
<RelatedEventDetail
201194
relatedEventId={crumbId}
202195
parentEvent={uiSelectedEvent!}
203-
pushToQueryParams={pushToQueryParams}
204196
countForParent={parentCount}
205197
/>
206198
);
207199
}
208200
// The default 'Event List' / 'List of all processes' view
209-
return <ProcessListWithCounts pushToQueryParams={pushToQueryParams} />;
210-
}, [
211-
uiSelectedEvent,
212-
crumbEvent,
213-
crumbId,
214-
pushToQueryParams,
215-
relatedStatsForIdFromParams,
216-
panelToShow,
217-
]);
201+
return <ProcessListWithCounts />;
202+
}, [uiSelectedEvent, crumbEvent, crumbId, relatedStatsForIdFromParams, panelToShow]);
218203

219204
return <>{panelInstance}</>;
220205
});

‎x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_error.tsx‎

Lines changed: 61 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,61 @@
1-
/*
2-
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3-
* or more contributor license agreements. Licensed under the Elastic License;
4-
* you may not use this file except in compliance with the Elastic License.
5-
*/
6-
7-
import { i18n } from '@kbn/i18n';
8-
import { EuiSpacer, EuiText, EuiButtonEmpty } from '@elastic/eui';
9-
import React, { memo, useMemo } from 'react';
10-
import { StyledBreadcrumbs } from './panel_content_utilities';
11-
import { CrumbInfo } from '../../types';
12-
13-
/**
14-
* Display an error in the panel when something goes wrong and give the user a way to "retreat" back to a default state.
15-
*
16-
* @param {function} pushToQueryparams A function to update the hash value in the URL to control panel state
17-
* @param {string} translatedErrorMessage The message to display in the panel when something goes wrong
18-
*/
19-
export const PanelContentError = memo(function ({
20-
translatedErrorMessage,
21-
pushToQueryParams,
22-
}: {
23-
translatedErrorMessage: string;
24-
pushToQueryParams: (arg0: CrumbInfo) => unknown;
25-
}) {
26-
const crumbs = useMemo(() => {
27-
return [
28-
{
29-
text: i18n.translate('xpack.securitySolution.endpoint.resolver.panel.error.events', {
30-
defaultMessage: 'Events',
31-
}),
32-
onClick: () => {
33-
pushToQueryParams({ crumbId: '', crumbEvent: '' });
34-
},
35-
},
36-
{
37-
text: i18n.translate('xpack.securitySolution.endpoint.resolver.panel.error.error', {
38-
defaultMessage: 'Error',
39-
}),
40-
onClick: () => {},
41-
},
42-
];
43-
}, [pushToQueryParams]);
44-
return (
45-
<>
46-
<StyledBreadcrumbs breadcrumbs={crumbs} />
47-
<EuiSpacer size="l" />
48-
<EuiText textAlign="center">{translatedErrorMessage}</EuiText>
49-
<EuiSpacer size="l" />
50-
<EuiButtonEmpty
51-
onClick={() => {
52-
pushToQueryParams({ crumbId: '', crumbEvent: '' });
53-
}}
54-
>
55-
{i18n.translate('xpack.securitySolution.endpoint.resolver.panel.error.goBack', {
56-
defaultMessage: 'Click this link to return to the list of all processes.',
57-
})}
58-
</EuiButtonEmpty>
59-
</>
60-
);
61-
});
62-
PanelContentError.displayName = 'TableServiceError';
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import { i18n } from '@kbn/i18n';
8+
import { EuiSpacer, EuiText, EuiButtonEmpty } from '@elastic/eui';
9+
import React, { memo, useMemo } from 'react';
10+
import { StyledBreadcrumbs } from './panel_content_utilities';
11+
import { useReplaceBreadcrumbParameters } from '../use_replace_breadcrumb_parameters';
12+
13+
/**
14+
* Display an error in the panel when something goes wrong and give the user a way to "retreat" back to a default state.
15+
*
16+
* @param {function} pushToQueryparams A function to update the hash value in the URL to control panel state
17+
* @param {string} translatedErrorMessage The message to display in the panel when something goes wrong
18+
*/
19+
export const PanelContentError = memo(function ({
20+
translatedErrorMessage,
21+
}: {
22+
translatedErrorMessage: string;
23+
}) {
24+
const pushToQueryParams = useReplaceBreadcrumbParameters();
25+
const crumbs = useMemo(() => {
26+
return [
27+
{
28+
text: i18n.translate('xpack.securitySolution.endpoint.resolver.panel.error.events', {
29+
defaultMessage: 'Events',
30+
}),
31+
onClick: () => {
32+
pushToQueryParams({ crumbId: '', crumbEvent: '' });
33+
},
34+
},
35+
{
36+
text: i18n.translate('xpack.securitySolution.endpoint.resolver.panel.error.error', {
37+
defaultMessage: 'Error',
38+
}),
39+
onClick: () => {},
40+
},
41+
];
42+
}, [pushToQueryParams]);
43+
return (
44+
<>
45+
<StyledBreadcrumbs breadcrumbs={crumbs} />
46+
<EuiSpacer size="l" />
47+
<EuiText textAlign="center">{translatedErrorMessage}</EuiText>
48+
<EuiSpacer size="l" />
49+
<EuiButtonEmpty
50+
onClick={() => {
51+
pushToQueryParams({ crumbId: '', crumbEvent: '' });
52+
}}
53+
>
54+
{i18n.translate('xpack.securitySolution.endpoint.resolver.panel.error.goBack', {
55+
defaultMessage: 'Click this link to return to the list of all processes.',
56+
})}
57+
</EuiButtonEmpty>
58+
</>
59+
);
60+
});
61+
PanelContentError.displayName = 'TableServiceError';

‎x-pack/plugins/security_solution/public/resolver/view/panels/process_details.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ import {
3131
import { CubeForProcess } from './cube_for_process';
3232
import { ResolverEvent } from '../../../../common/endpoint/types';
3333
import { useResolverTheme } from '../assets';
34-
import { CrumbInfo, ResolverState } from '../../types';
34+
import { ResolverState } from '../../types';
35+
import { useReplaceBreadcrumbParameters } from '../use_replace_breadcrumb_parameters';
3536

3637
const StyledDescriptionList = styled(EuiDescriptionList)`
3738
&.euiDescriptionList.euiDescriptionList--column dt.euiDescriptionList__title.desc-title {
@@ -49,10 +50,8 @@ const StyledTitle = styled('h4')`
4950
*/
5051
export const ProcessDetails = memo(function ProcessDetails({
5152
processEvent,
52-
pushToQueryParams,
5353
}: {
5454
processEvent: ResolverEvent;
55-
pushToQueryParams: (queryStringKeyValuePair: CrumbInfo) => unknown;
5655
}) {
5756
const processName = event.eventName(processEvent);
5857
const entityId = event.entityId(processEvent);
@@ -127,6 +126,8 @@ export const ProcessDetails = memo(function ProcessDetails({
127126
return processDescriptionListData;
128127
}, [processEvent]);
129128

129+
const pushToQueryParams = useReplaceBreadcrumbParameters();
130+
130131
const crumbs = useMemo(() => {
131132
return [
132133
{

‎x-pack/plugins/security_solution/public/resolver/view/panels/process_event_list.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { ResolverEvent, ResolverNodeStats } from '../../../../common/endpoint/ty
1616
import * as selectors from '../../store/selectors';
1717
import { useResolverDispatch } from '../use_resolver_dispatch';
1818
import { RelatedEventLimitWarning } from '../limit_warnings';
19-
import { CrumbInfo } from '../../types';
19+
import { useReplaceBreadcrumbParameters } from '../use_replace_breadcrumb_parameters';
2020

2121
/**
2222
* This view presents a list of related events of a given type for a given process.
@@ -129,10 +129,8 @@ export const ProcessEventList = memo(function ProcessEventList({
129129
processEvent,
130130
eventType,
131131
relatedStats,
132-
pushToQueryParams,
133132
}: {
134133
processEvent: ResolverEvent;
135-
pushToQueryParams: (arg0: CrumbInfo) => unknown;
136134
eventType: string;
137135
relatedStats: ResolverNodeStats;
138136
}) {
@@ -169,6 +167,8 @@ export const ProcessEventList = memo(function ProcessEventList({
169167
}
170168
}, [relatedsReady, dispatch, processEntityId]);
171169

170+
const pushToQueryParams = useReplaceBreadcrumbParameters();
171+
172172
const waitCrumbs = useMemo(() => {
173173
return [
174174
{

‎x-pack/plugins/security_solution/public/resolver/view/panels/process_list_with_counts.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
* or more contributor license agreements. Licensed under the Elastic License;
44
* you may not use this file except in compliance with the Elastic License.
55
*/
6+
7+
/* eslint-disable react/display-name */
8+
69
import React, { memo, useContext, useCallback, useMemo } from 'react';
710
import {
811
EuiBasicTableColumn,
@@ -23,6 +26,7 @@ import { CubeForProcess } from './cube_for_process';
2326
import { SafeResolverEvent } from '../../../../common/endpoint/types';
2427
import { LimitWarning } from '../limit_warnings';
2528
import { CrumbInfo } from '../../types';
29+
import { useReplaceBreadcrumbParameters } from '../use_replace_breadcrumb_parameters';
2630

2731
const StyledLimitWarning = styled(LimitWarning)`
2832
flex-flow: row wrap;
@@ -46,14 +50,8 @@ const StyledLimitWarning = styled(LimitWarning)`
4650

4751
/**
4852
* The "default" view for the panel: A list of all the processes currently in the graph.
49-
*
50-
* @param {function} pushToQueryparams A function to update the hash value in the URL to control panel state
5153
*/
52-
export const ProcessListWithCounts = memo(function ProcessListWithCounts({
53-
pushToQueryParams,
54-
}: {
55-
pushToQueryParams: (queryStringKeyValuePair: CrumbInfo) => unknown;
56-
}) {
54+
export const ProcessListWithCounts = memo(() => {
5755
interface ProcessTableView {
5856
name?: string;
5957
timestamp?: Date;
@@ -63,6 +61,7 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({
6361
const dispatch = useResolverDispatch();
6462
const { timestamp } = useContext(SideEffectContext);
6563
const isProcessTerminated = useSelector(selectors.isProcessTerminated);
64+
const pushToQueryParams = useReplaceBreadcrumbParameters();
6665
const handleBringIntoViewClick = useCallback(
6766
(processTableViewItem) => {
6867
dispatch({

‎x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import { ResolverEvent } from '../../../../common/endpoint/types';
1616
import * as selectors from '../../store/selectors';
1717
import { useResolverDispatch } from '../use_resolver_dispatch';
1818
import { PanelContentError } from './panel_content_error';
19-
import { CrumbInfo, ResolverState } from '../../types';
19+
import { ResolverState } from '../../types';
20+
import { useReplaceBreadcrumbParameters } from '../use_replace_breadcrumb_parameters';
2021

2122
// Adding some styles to prevent horizontal scrollbars, per request from UX review
2223
const StyledDescriptionList = memo(styled(EuiDescriptionList)`
@@ -76,15 +77,13 @@ function entriesForDisplay(entries: Array<{ title: string; description: string }
7677
* This view presents a detailed view of all the available data for a related event, split and titled by the "section"
7778
* it appears in the underlying ResolverEvent
7879
*/
79-
export const RelatedEventDetail = memo(function RelatedEventDetail({
80+
export const RelatedEventDetail = memo(function ({
8081
relatedEventId,
8182
parentEvent,
82-
pushToQueryParams,
8383
countForParent,
8484
}: {
8585
relatedEventId: string;
8686
parentEvent: ResolverEvent;
87-
pushToQueryParams: (queryStringKeyValuePair: CrumbInfo) => unknown;
8887
countForParent: number | undefined;
8988
}) {
9089
const processName = (parentEvent && event.eventName(parentEvent)) || '*';
@@ -130,6 +129,8 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({
130129
selectors.relatedEventDisplayInfoByEntityAndSelfId(state)(processEntityId, relatedEventId)
131130
);
132131

132+
const pushToQueryParams = useReplaceBreadcrumbParameters();
133+
133134
const waitCrumbs = useMemo(() => {
134135
return [
135136
{
@@ -247,9 +248,7 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({
247248
defaultMessage: 'Related event not found.',
248249
}
249250
);
250-
return (
251-
<PanelContentError translatedErrorMessage={errString} pushToQueryParams={pushToQueryParams} />
252-
);
251+
return <PanelContentError translatedErrorMessage={errString} />;
253252
}
254253

255254
return (

0 commit comments

Comments
 (0)