Skip to content

Commit 59e0a1c

Browse files
XavierMXavierM
authored
[SIEM] Detection engine placeholders (#50220)
* attempt at getting nav working * fix detection-engine href redirect issue * rough out basic page routing * kql placeholder * update page and panel headers * rough out card table poc styles * change HeaderPanel to HeaderSection * cleanup and unit test updates * rough out utilityBar poc * clean up UtilityBar naming and styles * support popovers in utility bar * refactor icon side * UtilityBar unit tests * remove page tests for now * adjust routes * add comment * cleanup chart * open/closed signals content toggle * remove EuiFilterButton icons * fix misaligned popover button * add split prop for HeaderSection * fleshing out activity monitor table * update global header to include logo * fix tests * correct table types; thanks Garrett! * LinkIcon comp poc * fix bugs, errors, tests * rm import * table cleanup * correct merge errors * switch All Rules to EuiBasicTable * expand table types and values * fleshing out all rules table * rough out rule details * move chart to separate comp * update supplement layout * example rule fail * switch to new discover-style search * add ProgressInline comp * update unit tests and snapshots * cleanup * correct merge weirdness * move text styles to all subtitle items * correct invalid nav markup; update tests; cleanup * fix console errors * add empty page * change to EuiButtonEmpty in HeaderGlobal * overflow popover * rough out edit layout * new WrapperPage comp POC * cleanup * var for timeline gutter * tests and snapshots update * fix type + review + re-arrange code * adding feature flag + fix route issue * fix type with unit test * Removing unused translation
1 parent 9c38e3e commit 59e0a1c

File tree

98 files changed

+4909
-844
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+4909
-844
lines changed

‎x-pack/legacy/plugins/siem/cypress/integration/lib/navigation/selectors.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55
*/
66

77
/** Top-level (global) navigation link to the `Hosts` page */
8-
export const NAVIGATION_HOSTS = '[data-test-subj="navigation-link-hosts"]';
8+
export const NAVIGATION_HOSTS = '[data-test-subj="navigation-hosts"]';
99

1010
/** Top-level (global) navigation link to the `Network` page */
11-
export const NAVIGATION_NETWORK = '[data-test-subj="navigation-link-network"]';
11+
export const NAVIGATION_NETWORK = '[data-test-subj="navigation-network"]';
1212

1313
/** Top-level (global) navigation link to the `Overview` page */
14-
export const NAVIGATION_OVERVIEW = '[data-test-subj="navigation-link-overview"]';
14+
export const NAVIGATION_OVERVIEW = '[data-test-subj="navigation-overview"]';
1515

1616
/** Top-level (global) navigation link to the `Timelines` page */
17-
export const NAVIGATION_TIMELINES = '[data-test-subj="navigation-link-timelines"]';
17+
export const NAVIGATION_TIMELINES = '[data-test-subj="navigation-timelines"]';
1818

1919
export const HOSTS_PAGE_TABS = {
2020
allHosts: '[data-test-subj="navigation-allHosts"]',

‎x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar.test.tsx.snap‎

Lines changed: 36 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/components/detection_engine/utility_bar/__snapshots__/utility_bar_action.test.tsx.snap‎

Lines changed: 11 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/components/detection_engine/utility_bar/__snapshots__/utility_bar_group.test.tsx.snap‎

Lines changed: 11 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/components/detection_engine/utility_bar/__snapshots__/utility_bar_section.test.tsx.snap‎

Lines changed: 13 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/components/detection_engine/utility_bar/__snapshots__/utility_bar_text.test.tsx.snap‎

Lines changed: 9 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/components/detection_engine/utility_bar/index.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
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+
export { UtilityBar } from './utility_bar';
8+
export { UtilityBarAction } from './utility_bar_action';
9+
export { UtilityBarGroup } from './utility_bar_group';
10+
export { UtilityBarSection } from './utility_bar_section';
11+
export { UtilityBarText } from './utility_bar_text';

‎x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/styles.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
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 styled, { css } from 'styled-components';
8+
9+
/**
10+
* UTILITY BAR
11+
*/
12+
13+
export interface BarProps {
14+
border?: boolean;
15+
}
16+
17+
export const Bar = styled.aside.attrs({
18+
className: 'siemUtilityBar',
19+
})<BarProps>`
20+
${({ border, theme }) => css`
21+
${border &&
22+
css`
23+
border-bottom: ${theme.eui.euiBorderThin};
24+
padding-bottom: ${theme.eui.paddingSizes.s};
25+
`}
26+
27+
@media only screen and (min-width: ${theme.eui.euiBreakpoints.l}) {
28+
display: flex;
29+
justify-content: space-between;
30+
}
31+
`}
32+
`;
33+
Bar.displayName = 'Bar';
34+
35+
export const BarSection = styled.div.attrs({
36+
className: 'siemUtilityBar__section',
37+
})`
38+
${({ theme }) => css`
39+
& + & {
40+
margin-top: ${theme.eui.euiSizeS};
41+
}
42+
43+
@media only screen and (min-width: ${theme.eui.euiBreakpoints.m}) {
44+
display: flex;
45+
flex-wrap: wrap;
46+
}
47+
48+
@media only screen and (min-width: ${theme.eui.euiBreakpoints.l}) {
49+
& + & {
50+
margin-top: 0;
51+
margin-left: ${theme.eui.euiSize};
52+
}
53+
}
54+
`}
55+
`;
56+
BarSection.displayName = 'BarSection';
57+
58+
export const BarGroup = styled.div.attrs({
59+
className: 'siemUtilityBar__group',
60+
})`
61+
${({ theme }) => css`
62+
align-items: flex-start;
63+
display: flex;
64+
flex-wrap: wrap;
65+
66+
& + & {
67+
margin-top: ${theme.eui.euiSizeS};
68+
}
69+
70+
@media only screen and (min-width: ${theme.eui.euiBreakpoints.m}) {
71+
border-right: ${theme.eui.euiBorderThin};
72+
flex-wrap: nowrap;
73+
margin-right: ${theme.eui.paddingSizes.m};
74+
padding-right: ${theme.eui.paddingSizes.m};
75+
76+
& + & {
77+
margin-top: 0;
78+
}
79+
80+
&:last-child {
81+
border-right: none;
82+
margin-right: 0;
83+
padding-right: 0;
84+
}
85+
}
86+
87+
& > * {
88+
margin-right: ${theme.eui.euiSize};
89+
90+
&:last-child {
91+
margin-right: 0;
92+
}
93+
}
94+
`}
95+
`;
96+
BarGroup.displayName = 'BarGroup';
97+
98+
export const BarText = styled.p.attrs({
99+
className: 'siemUtilityBar__text',
100+
})`
101+
${({ theme }) => css`
102+
color: ${theme.eui.textColors.subdued};
103+
font-size: ${theme.eui.euiFontSizeXS};
104+
line-height: ${theme.eui.euiLineHeight};
105+
white-space: nowrap;
106+
`}
107+
`;
108+
BarText.displayName = 'BarText';
109+
110+
export const BarAction = styled.div.attrs({
111+
className: 'siemUtilityBar__action',
112+
})`
113+
${({ theme }) => css`
114+
font-size: ${theme.eui.euiFontSizeXS};
115+
line-height: ${theme.eui.euiLineHeight};
116+
`}
117+
`;
118+
BarAction.displayName = 'BarAction';

‎x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.test.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
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 euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
8+
import { mount, shallow } from 'enzyme';
9+
import toJson from 'enzyme-to-json';
10+
import 'jest-styled-components';
11+
import React from 'react';
12+
13+
import '../../../mock/ui_settings';
14+
import { TestProviders } from '../../../mock';
15+
import {
16+
UtilityBar,
17+
UtilityBarAction,
18+
UtilityBarGroup,
19+
UtilityBarSection,
20+
UtilityBarText,
21+
} from './index';
22+
23+
jest.mock('../../../lib/settings/use_kibana_ui_setting');
24+
25+
describe('UtilityBar', () => {
26+
test('it renders', () => {
27+
const wrapper = shallow(
28+
<TestProviders>
29+
<UtilityBar>
30+
<UtilityBarSection>
31+
<UtilityBarGroup>
32+
<UtilityBarText>{'Test text'}</UtilityBarText>
33+
</UtilityBarGroup>
34+
35+
<UtilityBarGroup>
36+
<UtilityBarAction iconType="" popoverContent={<p>{'Test popover'}</p>}>
37+
{'Test action'}
38+
</UtilityBarAction>
39+
</UtilityBarGroup>
40+
</UtilityBarSection>
41+
42+
<UtilityBarSection>
43+
<UtilityBarGroup>
44+
<UtilityBarAction iconType="cross">{'Test action'}</UtilityBarAction>
45+
</UtilityBarGroup>
46+
</UtilityBarSection>
47+
</UtilityBar>
48+
</TestProviders>
49+
);
50+
51+
expect(toJson(wrapper)).toMatchSnapshot();
52+
});
53+
54+
test('it applies border styles when border is true', () => {
55+
const wrapper = mount(
56+
<TestProviders>
57+
<UtilityBar border>
58+
<UtilityBarSection>
59+
<UtilityBarGroup>
60+
<UtilityBarText>{'Test text'}</UtilityBarText>
61+
</UtilityBarGroup>
62+
63+
<UtilityBarGroup>
64+
<UtilityBarAction iconType="" popoverContent={<p>{'Test popover'}</p>}>
65+
{'Test action'}
66+
</UtilityBarAction>
67+
</UtilityBarGroup>
68+
</UtilityBarSection>
69+
70+
<UtilityBarSection>
71+
<UtilityBarGroup>
72+
<UtilityBarAction iconType="cross">{'Test action'}</UtilityBarAction>
73+
</UtilityBarGroup>
74+
</UtilityBarSection>
75+
</UtilityBar>
76+
</TestProviders>
77+
);
78+
const siemUtilityBar = wrapper.find('.siemUtilityBar').first();
79+
80+
expect(siemUtilityBar).toHaveStyleRule('border-bottom', euiDarkVars.euiBorderThin);
81+
expect(siemUtilityBar).toHaveStyleRule('padding-bottom', euiDarkVars.paddingSizes.s);
82+
});
83+
84+
test('it DOES NOT apply border styles when border is false', () => {
85+
const wrapper = mount(
86+
<TestProviders>
87+
<UtilityBar>
88+
<UtilityBarSection>
89+
<UtilityBarGroup>
90+
<UtilityBarText>{'Test text'}</UtilityBarText>
91+
</UtilityBarGroup>
92+
93+
<UtilityBarGroup>
94+
<UtilityBarAction iconType="" popoverContent={<p>{'Test popover'}</p>}>
95+
{'Test action'}
96+
</UtilityBarAction>
97+
</UtilityBarGroup>
98+
</UtilityBarSection>
99+
100+
<UtilityBarSection>
101+
<UtilityBarGroup>
102+
<UtilityBarAction iconType="cross">{'Test action'}</UtilityBarAction>
103+
</UtilityBarGroup>
104+
</UtilityBarSection>
105+
</UtilityBar>
106+
</TestProviders>
107+
);
108+
const siemUtilityBar = wrapper.find('.siemUtilityBar').first();
109+
110+
expect(siemUtilityBar).not.toHaveStyleRule('border-bottom', euiDarkVars.euiBorderThin);
111+
expect(siemUtilityBar).not.toHaveStyleRule('padding-bottom', euiDarkVars.paddingSizes.s);
112+
});
113+
});

‎x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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 React from 'react';
8+
9+
import { Bar, BarProps } from './styles';
10+
11+
export interface UtilityBarProps extends BarProps {
12+
children: React.ReactNode;
13+
}
14+
15+
export const UtilityBar = React.memo<UtilityBarProps>(({ border, children }) => (
16+
<Bar border={border}>{children}</Bar>
17+
));
18+
UtilityBar.displayName = 'UtilityBar';

0 commit comments

Comments
 (0)