Skip to content

Commit

Permalink
[SIEM] Detection engine cleanup for rule details/creation/edit page (#…
Browse files Browse the repository at this point in the history
…55069) (#55269)

* update extra action on rule detail to match design

* remove experimental label

* allow pre-package to be deleted + do not allow wrong user to create pre-packages rules

* Additional look back minimum value to 1

* fix flow with edit rule

* add success toaster when rule is created or updated

* Fix Timeline selector loading

* review ben doc + change detectin engine to detection even in url

* Succeeded text size consistency in rule details page

* fix description of threats

* fix test

* fix type

* fix internatinalization

* Update x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/create/translations.ts

Co-Authored-By: Garrett Spong <spong@users.noreply.github.com>

* Update x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/edit/translations.ts

Co-Authored-By: Garrett Spong <spong@users.noreply.github.com>

* Update x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/components/step_schedule_rule/schema.tsx

Co-Authored-By: Garrett Spong <spong@users.noreply.github.com>

* review I

* fix type

Co-authored-by: Garrett Spong <spong@users.noreply.github.com>

Co-authored-by: Garrett Spong <spong@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
  • Loading branch information
3 people authored Jan 18, 2020
1 parent 666eda0 commit be1c35f
Show file tree
Hide file tree
Showing 42 changed files with 301 additions and 195 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const HeaderGlobal = React.memo<HeaderGlobalProps>(({ hideDetectionEngine
display="condensed"
navTabs={
hideDetectionEngine
? pickBy((_, key) => key !== SiemPageName.detectionEngine, navTabs)
? pickBy((_, key) => key !== SiemPageName.detections, navTabs)
: navTabs
}
/>
Expand Down
12 changes: 6 additions & 6 deletions x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,32 +61,32 @@ export const LinkToPage = React.memo<LinkToPageProps>(({ match }) => (
<Route
component={RedirectToDetectionEnginePage}
exact
path={`${match.url}/:pageName(${SiemPageName.detectionEngine})`}
path={`${match.url}/:pageName(${SiemPageName.detections})`}
strict
/>
<Route
component={RedirectToDetectionEnginePage}
exact
path={`${match.url}/:pageName(${SiemPageName.detectionEngine})/:tabName(${DetectionEngineTab.alerts}|${DetectionEngineTab.signals})`}
path={`${match.url}/:pageName(${SiemPageName.detections})/:tabName(${DetectionEngineTab.alerts}|${DetectionEngineTab.signals})`}
strict
/>
<Route
component={RedirectToRulesPage}
exact
path={`${match.url}/:pageName(${SiemPageName.detectionEngine})/rules`}
path={`${match.url}/:pageName(${SiemPageName.detections})/rules`}
/>
<Route
component={RedirectToCreateRulePage}
path={`${match.url}/:pageName(${SiemPageName.detectionEngine})/rules/create-rule`}
path={`${match.url}/:pageName(${SiemPageName.detections})/rules/create-rule`}
/>
<Route
component={RedirectToRuleDetailsPage}
exact
path={`${match.url}/:pageName(${SiemPageName.detectionEngine})/rules/rule-details`}
path={`${match.url}/:pageName(${SiemPageName.detections})/rules/rule-details`}
/>
<Route
component={RedirectToEditRulePage}
path={`${match.url}/:pageName(${SiemPageName.detectionEngine})/rules/rule-details/edit-rule`}
path={`${match.url}/:pageName(${SiemPageName.detections})/rules/rule-details/edit-rule`}
/>
<Route
component={RedirectToTimelinesPage}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export type DetectionEngineComponentProps = RouteComponentProps<{
search: string;
}>;

export const DETECTION_ENGINE_PAGE_NAME = 'detection-engine';
export const DETECTION_ENGINE_PAGE_NAME = 'detections';

export const RedirectToDetectionEnginePage = ({
match: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,12 @@ describe('SIEM Navigation', () => {
expect(setBreadcrumbs).toHaveBeenNthCalledWith(1, {
detailName: undefined,
navTabs: {
'detection-engine': {
detections: {
disabled: false,
href: '#/link-to/detection-engine',
id: 'detection-engine',
name: 'Detection engine',
urlKey: 'detection-engine',
href: '#/link-to/detections',
id: 'detections',
name: 'Detections',
urlKey: 'detections',
},
hosts: {
disabled: false,
Expand Down Expand Up @@ -146,12 +146,12 @@ describe('SIEM Navigation', () => {
detailName: undefined,
filters: [],
navTabs: {
'detection-engine': {
detections: {
disabled: false,
href: '#/link-to/detection-engine',
id: 'detection-engine',
name: 'Detection engine',
urlKey: 'detection-engine',
href: '#/link-to/detections',
id: 'detections',
name: 'Detections',
urlKey: 'detections',
},
hosts: {
disabled: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,25 @@ const MyEuiFlexItem = styled(EuiFlexItem)`
white-space: nowrap;
`;

const EuiSelectableContainer = styled.div`
const EuiSelectableContainer = styled.div<{ loading: boolean }>`
.euiSelectable {
.euiFormControlLayout__childrenWrapper {
display: flex;
}
${({ loading }) => `${
loading
? `
.euiFormControlLayoutIcons {
display: none;
}
.euiFormControlLayoutIcons.euiFormControlLayoutIcons--right {
display: block;
left: 12px;
top: 12px;
}`
: ''
}
`}
}
`;

Expand Down Expand Up @@ -265,7 +279,7 @@ const SearchTimelineSuperSelectComponent: React.FC<SearchTimelineSuperSelectProp
onlyUserFavorite={onlyFavorites}
>
{({ timelines, loading, totalCount }) => (
<EuiSelectableContainer>
<EuiSelectableContainer loading={loading}>
<EuiSelectable
height={POPOVER_HEIGHT}
isLoading={loading && timelines.length === 0}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

export enum CONSTANTS {
appQuery = 'query',
detectionEnginePage = 'detectionEngine.page',
detectionsPage = 'detections.page',
filters = 'filters',
hostsDetails = 'hosts.details',
hostsPage = 'hosts.page',
Expand All @@ -20,4 +20,4 @@ export enum CONSTANTS {
unknown = 'unknown',
}

export type UrlStateType = 'detection-engine' | 'host' | 'network' | 'overview' | 'timeline';
export type UrlStateType = 'detections' | 'host' | 'network' | 'overview' | 'timeline';
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,10 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { navTabs } from '../../pages/home/home_navigations';
import { SiemPageName } from '../../pages/home/types';
import { isKqlForRoute, getTitle } from './helpers';
import { CONSTANTS } from './constants';
import { getTitle } from './helpers';
import { HostsType } from '../../store/hosts/model';

describe('Helpers Url_State', () => {
describe('isKqlForRoute', () => {
test('host page and host page kuery', () => {
const result = isKqlForRoute(SiemPageName.hosts, undefined, CONSTANTS.hostsPage);
expect(result).toBeTruthy();
});
test('host page and host details kuery', () => {
const result = isKqlForRoute(SiemPageName.hosts, undefined, CONSTANTS.hostsDetails);
expect(result).toBeFalsy();
});
test('host details and host details kuery', () => {
const result = isKqlForRoute(SiemPageName.hosts, 'siem-kibana', CONSTANTS.hostsDetails);
expect(result).toBeTruthy();
});
test('host details and host page kuery', () => {
const result = isKqlForRoute(SiemPageName.hosts, 'siem-kibana', CONSTANTS.hostsPage);
expect(result).toBeFalsy();
});
test('network page and network page kuery', () => {
const result = isKqlForRoute(SiemPageName.network, undefined, CONSTANTS.networkPage);
expect(result).toBeTruthy();
});
test('network page and network details kuery', () => {
const result = isKqlForRoute(SiemPageName.network, undefined, CONSTANTS.networkDetails);
expect(result).toBeFalsy();
});
test('network details and network details kuery', () => {
const result = isKqlForRoute(SiemPageName.network, '10.100.7.198', CONSTANTS.networkDetails);
expect(result).toBeTruthy();
});
test('network details and network page kuery', () => {
const result = isKqlForRoute(SiemPageName.network, '123.234.34', CONSTANTS.networkPage);
expect(result).toBeFalsy();
});
});
describe('getTitle', () => {
test('host page name', () => {
const result = getTitle('hosts', undefined, navTabs);
Expand Down
25 changes: 4 additions & 21 deletions x-pack/legacy/plugins/siem/public/components/url_state/helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,8 @@ export const getUrlType = (pageName: string): UrlStateType => {
return 'host';
} else if (pageName === SiemPageName.network) {
return 'network';
} else if (pageName === SiemPageName.detectionEngine) {
return 'detection-engine';
} else if (pageName === SiemPageName.detections) {
return 'detections';
} else if (pageName === SiemPageName.timelines) {
return 'timeline';
}
Expand Down Expand Up @@ -111,31 +111,14 @@ export const getCurrentLocation = (
return CONSTANTS.networkDetails;
}
return CONSTANTS.networkPage;
} else if (pageName === SiemPageName.detectionEngine) {
return CONSTANTS.detectionEnginePage;
} else if (pageName === SiemPageName.detections) {
return CONSTANTS.detectionsPage;
} else if (pageName === SiemPageName.timelines) {
return CONSTANTS.timelinePage;
}
return CONSTANTS.unknown;
};

export const isKqlForRoute = (
pageName: string,
detailName: string | undefined,
queryLocation: LocationTypes | null = null
): boolean => {
const currentLocation = getCurrentLocation(pageName, detailName);
if (
(currentLocation === CONSTANTS.hostsPage && queryLocation === CONSTANTS.hostsPage) ||
(currentLocation === CONSTANTS.networkPage && queryLocation === CONSTANTS.networkPage) ||
(currentLocation === CONSTANTS.hostsDetails && queryLocation === CONSTANTS.hostsDetails) ||
(currentLocation === CONSTANTS.networkDetails && queryLocation === CONSTANTS.networkDetails)
) {
return true;
}
return false;
};

export const makeMapStateToProps = () => {
const getInputsSelector = inputsSelectors.inputsSelector();
const getGlobalQuerySelector = inputsSelectors.globalQuerySelector();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const ALL_URL_STATE_KEYS: KeyUrlState[] = [
];

export const URL_STATE_KEYS: Record<UrlStateType, KeyUrlState[]> = {
'detection-engine': [
detections: [
CONSTANTS.appQuery,
CONSTANTS.filters,
CONSTANTS.savedQuery,
Expand Down Expand Up @@ -56,7 +56,7 @@ export const URL_STATE_KEYS: Record<UrlStateType, KeyUrlState[]> = {
};

export type LocationTypes =
| CONSTANTS.detectionEnginePage
| CONSTANTS.detectionsPage
| CONSTANTS.hostsDetails
| CONSTANTS.hostsPage
| CONSTANTS.networkDetails
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { useEffect, useState } from 'react';

import { createPrepackagedRules } from './api';

type Return = [boolean, boolean | null];

interface UseCreatePackagedRules {
canUserCRUD: boolean | null;
hasIndexManage: boolean | null;
hasManageApiKey: boolean | null;
isAuthenticated: boolean | null;
isSignalIndexExists: boolean | null;
}

/**
* Hook for creating the packages rules
*
* @param canUserCRUD boolean
* @param hasIndexManage boolean
* @param hasManageApiKey boolean
* @param isAuthenticated boolean
* @param isSignalIndexExists boolean
*
* @returns [loading, hasCreatedPackageRules]
*/
export const useCreatePackagedRules = ({
canUserCRUD,
hasIndexManage,
hasManageApiKey,
isAuthenticated,
isSignalIndexExists,
}: UseCreatePackagedRules): Return => {
const [hasCreatedPackageRules, setHasCreatedPackageRules] = useState<boolean | null>(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
let isSubscribed = true;
const abortCtrl = new AbortController();
setLoading(true);

async function createRules() {
try {
await createPrepackagedRules({
signal: abortCtrl.signal,
});

if (isSubscribed) {
setHasCreatedPackageRules(true);
}
} catch (error) {
if (isSubscribed) {
setHasCreatedPackageRules(false);
}
}
if (isSubscribed) {
setLoading(false);
}
}
if (
canUserCRUD &&
hasIndexManage &&
hasManageApiKey &&
isAuthenticated &&
isSignalIndexExists
) {
createRules();
}
return () => {
isSubscribed = false;
abortCtrl.abort();
};
}, [canUserCRUD, hasIndexManage, hasManageApiKey, isAuthenticated, isSignalIndexExists]);

return [loading, hasCreatedPackageRules];
};
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { useEffect, useState, useRef } from 'react';

import { errorToToaster } from '../../../components/ml/api/error_to_toaster';
import { useStateToaster } from '../../../components/toasters';
import { createPrepackagedRules } from '../rules';
import { createSignalIndex, getSignalIndex } from './api';
import * as i18n from './translations';
import { PostSignalError, SignalIndexError } from './types';
Expand Down Expand Up @@ -41,7 +40,6 @@ export const useSignalIndex = (): Return => {
if (isSubscribed && signal != null) {
setSignalIndexName(signal.name);
setSignalIndexExists(true);
createPrepackagedRules({ signal: abortCtrl.signal });
}
} catch (error) {
if (isSubscribed) {
Expand Down
Loading

0 comments on commit be1c35f

Please sign in to comment.