Skip to content

Commit 7c97988

Browse files
patrykkopycinskipatrykkopycinski
committed
[SIEM] Add tabbed sub-navigation to Network page (#47556)
1 parent e664ddb commit 7c97988

20 files changed

Lines changed: 885 additions & 463 deletions

‎x-pack/legacy/plugins/siem/public/components/ml/permissions/ml_capabilities_provider.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,25 @@ import { DEFAULT_KBN_VERSION } from '../../../../common/constants';
1616

1717
import * as i18n from './translations';
1818

19-
export const MlCapabilitiesContext = React.createContext<MlCapabilities>(emptyMlCapabilities);
19+
interface MlCapabilitiesProvider extends MlCapabilities {
20+
capabilitiesFetched: boolean;
21+
}
22+
23+
const emptyMlCapabilitiesProvider = {
24+
...emptyMlCapabilities,
25+
capabilitiesFetched: false,
26+
};
27+
28+
export const MlCapabilitiesContext = React.createContext<MlCapabilitiesProvider>(
29+
emptyMlCapabilitiesProvider
30+
);
2031

2132
MlCapabilitiesContext.displayName = 'MlCapabilitiesContext';
2233

2334
export const MlCapabilitiesProvider = React.memo<{ children: JSX.Element }>(({ children }) => {
24-
const [capabilities, setCapabilities] = useState<MlCapabilities>(emptyMlCapabilities);
35+
const [capabilities, setCapabilities] = useState<MlCapabilitiesProvider>(
36+
emptyMlCapabilitiesProvider
37+
);
2538
const [, dispatchToaster] = useStateToaster();
2639
const [kbnVersion] = useKibanaUiSetting(DEFAULT_KBN_VERSION);
2740

@@ -36,7 +49,7 @@ export const MlCapabilitiesProvider = React.memo<{ children: JSX.Element }>(({ c
3649
abortCtrl.signal
3750
);
3851
if (isSubscribed) {
39-
setCapabilities(mlCapabilities);
52+
setCapabilities({ ...mlCapabilities, capabilitiesFetched: true });
4053
}
4154
} catch (error) {
4255
if (isSubscribed) {

‎x-pack/legacy/plugins/siem/public/components/navigation/tab_navigation/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@ export const TabNavigation = React.memo<TabNavigationProps>(props => {
5151
if (currentTabSelected !== selectedTabId) {
5252
setSelectedTabId(currentTabSelected);
5353
}
54-
}, [pageName, tabName]);
54+
55+
// we do need navTabs in case the selectedTabId appears after initial load (ex. checking permissions for anomalies)
56+
}, [pageName, tabName, navTabs]);
5557

5658
const renderTabs = (): JSX.Element[] =>
5759
Object.values(navTabs).map(tab => (

‎x-pack/legacy/plugins/siem/public/pages/network/__snapshots__/ip_details.test.tsx.snap‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎x-pack/legacy/plugins/siem/public/pages/network/index.tsx‎

Lines changed: 64 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,77 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7-
import React from 'react';
7+
import React, { useContext } from 'react';
88
import { Redirect, Route, Switch, RouteComponentProps } from 'react-router-dom';
99

10+
import { MlCapabilitiesContext } from '../../components/ml/permissions/ml_capabilities_provider';
11+
import { hasMlUserPermissions } from '../../components/ml/permissions/has_ml_user_permissions';
12+
1013
import { IPDetails } from './ip_details';
1114
import { Network } from './network';
12-
13-
const networkPath = `/:pageName(network)`;
15+
import { GlobalTime } from '../../containers/global_time';
16+
import { getNetworkRoutePath } from './navigation';
17+
import { NetworkRouteType } from './navigation/types';
1418

1519
type Props = Partial<RouteComponentProps<{}>> & { url: string };
1620

17-
export const NetworkContainer = React.memo<Props>(() => (
18-
<Switch>
19-
<Route strict exact path={networkPath} render={() => <Network />} />
20-
<Route
21-
path={`${networkPath}/ip/:detailName`}
22-
render={({
23-
match: {
24-
params: { detailName },
25-
},
26-
}) => <IPDetails detailName={detailName} />}
27-
/>
28-
<Route
29-
path="/network/"
30-
render={({ location: { search = '' } }) => (
31-
<Redirect from="/network/" to={`/network${search}`} />
21+
const networkPagePath = `/:pageName(network)`;
22+
const ipDetailsPagePath = `${networkPagePath}/ip/:detailName`;
23+
24+
export const NetworkContainer = React.memo<Props>(() => {
25+
const capabilities = useContext(MlCapabilitiesContext);
26+
27+
return (
28+
<GlobalTime>
29+
{({ to, from, setQuery, deleteQuery, isInitializing }) => (
30+
<Switch>
31+
<Route
32+
strict
33+
path={getNetworkRoutePath(
34+
networkPagePath,
35+
capabilities.capabilitiesFetched,
36+
hasMlUserPermissions(capabilities)
37+
)}
38+
render={() => (
39+
<Network
40+
networkPagePath={networkPagePath}
41+
to={to}
42+
from={from}
43+
setQuery={setQuery}
44+
deleteQuery={deleteQuery}
45+
isInitializing={isInitializing}
46+
capabilitiesFetched={capabilities.capabilitiesFetched}
47+
hasMlUserPermissions={hasMlUserPermissions(capabilities)}
48+
/>
49+
)}
50+
/>
51+
<Route
52+
path={ipDetailsPagePath}
53+
render={({
54+
match: {
55+
params: { detailName },
56+
},
57+
}) => (
58+
<IPDetails
59+
detailName={detailName}
60+
to={to}
61+
from={from}
62+
setQuery={setQuery}
63+
deleteQuery={deleteQuery}
64+
isInitializing={isInitializing}
65+
/>
66+
)}
67+
/>
68+
<Route
69+
path="/network/"
70+
render={({ location: { search = '' } }) => (
71+
<Redirect from="/network/" to={`/network/${NetworkRouteType.ips}${search}`} />
72+
)}
73+
/>
74+
</Switch>
3275
)}
33-
/>
34-
</Switch>
35-
));
76+
</GlobalTime>
77+
);
78+
});
3679

3780
NetworkContainer.displayName = 'NetworkContainer';

‎x-pack/legacy/plugins/siem/public/pages/network/ip_details.test.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,14 @@ const getMockHistory = (ip: string) => ({
6060
listen: jest.fn(),
6161
});
6262

63+
const to = new Date('2018-03-23T18:49:23.132Z').valueOf();
64+
const from = new Date('2018-03-24T03:33:52.253Z').valueOf();
65+
6366
const getMockProps = (ip: string) => ({
67+
to,
68+
from,
69+
isInitializing: false,
70+
setQuery: jest.fn(),
6471
filterQuery: 'coolQueryhuh?',
6572
flowTarget: FlowTarget.source,
6673
history: getMockHistory(ip),

0 commit comments

Comments
 (0)