Skip to content

Commit 4a86aa3

Browse files
MadameSheemaMadameSheema
authored
[SIEM] Fields browser readable (#56000) (#56108)
* extracts methods to tasks * uses cypress api for assertions * refactor * removes tag
1 parent ba588fd commit 4a86aa3

File tree

8 files changed

+227
-92
lines changed

8 files changed

+227
-92
lines changed

‎x-pack/legacy/plugins/siem/cypress/integration/lib/fields_browser/helpers.ts‎

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

7-
import {
8-
FIELDS_BROWSER_CONTAINER,
9-
FIELDS_BROWSER_FILTER_INPUT,
10-
TIMELINE_FIELDS_BUTTON,
11-
} from './selectors';
7+
import { FIELDS_BROWSER_CONTAINER, FIELDS_BROWSER_FILTER_INPUT } from './selectors';
128
import {
139
assertAtLeastOneEventMatchesSearch,
1410
executeKQL,
1511
hostExistsQuery,
1612
toggleTimelineVisibility,
1713
} from '../timeline/helpers';
18-
import { TIMELINE_DATA_PROVIDERS } from '../timeline/selectors';
14+
import { TIMELINE_DATA_PROVIDERS, TIMELINE_FIELDS_BUTTON } from '../timeline/selectors';
1915

2016
/** Opens the timeline's Field Browser */
2117
export const openTimelineFieldsBrowser = () => {

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
/** A data provider rendered in the timeline's data providers drop area */
88
export const DATA_PROVIDER = '[data-test-subj="providerContainer"]';
99

10+
export const TIMELINE_FIELDS_BUTTON =
11+
'[data-test-subj="timeline"] [data-test-subj="show-field-browser"]';
12+
1013
/** Data providers are dropped and rendered in this area of the timeline */
1114
export const TIMELINE_DATA_PROVIDERS = '[data-test-subj="dataProviders"]';
1215

‎x-pack/legacy/plugins/siem/cypress/integration/smoke_tests/fields_browser/fields_browser.spec.ts‎

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

7-
import { drag, drop } from '../../lib/drag_n_drop/helpers';
8-
import {
9-
clearFieldsBrowser,
10-
clickOutsideFieldsBrowser,
11-
openTimelineFieldsBrowser,
12-
populateTimeline,
13-
filterFieldsBrowser,
14-
} from '../../lib/fields_browser/helpers';
7+
import { HOSTS_PAGE } from '../../lib/urls';
8+
9+
import { loginAndWaitForPage, DEFAULT_TIMEOUT } from '../../../tasks/login';
10+
1511
import {
12+
FIELDS_BROWSER_TITLE,
13+
FIELDS_BROWSER_SELECTED_CATEGORY_TITLE,
14+
FIELDS_BROWSER_SELECTED_CATEGORY_COUNT,
1615
FIELDS_BROWSER_CATEGORIES_COUNT,
17-
FIELDS_BROWSER_CONTAINER,
18-
FIELDS_BROWSER_FIELDS_COUNT,
19-
FIELDS_BROWSER_FILTER_INPUT,
2016
FIELDS_BROWSER_HOST_CATEGORIES_COUNT,
21-
FIELDS_BROWSER_SELECTED_CATEGORY_COUNT,
22-
FIELDS_BROWSER_SELECTED_CATEGORY_TITLE,
2317
FIELDS_BROWSER_SYSTEM_CATEGORIES_COUNT,
24-
FIELDS_BROWSER_TITLE,
25-
} from '../../lib/fields_browser/selectors';
26-
import { HOSTS_PAGE } from '../../lib/urls';
27-
import { loginAndWaitForPage, DEFAULT_TIMEOUT } from '../../lib/util/helpers';
18+
FIELDS_BROWSER_FIELDS_COUNT,
19+
FIELDS_BROWSER_MESSAGE_HEADER,
20+
FIELDS_BROWSER_HOST_GEO_CITY_NAME_HEADER,
21+
FIELDS_BROWSER_HOST_GEO_COUNTRY_NAME_HEADER,
22+
FIELDS_BROWSER_HEADER_HOST_GEO_CONTINENT_NAME_HEADER,
23+
} from '../../../screens/timeline/fields_browser';
24+
25+
import {
26+
openTimeline,
27+
populateTimeline,
28+
openTimelineFieldsBrowser,
29+
} from '../../../tasks/timeline/main';
30+
31+
import {
32+
clearFieldsBrowser,
33+
filterFieldsBrowser,
34+
closeFieldsBrowser,
35+
removesMessageField,
36+
addsHostGeoCityNameToTimeline,
37+
addsHostGeoCountryNameToTimelineDraggingIt,
38+
addsHostGeoContinentNameToTimeline,
39+
resetFields,
40+
} from '../../../tasks/timeline/fields_browser';
2841

2942
const defaultHeaders = [
3043
{ id: '@timestamp' },
@@ -41,6 +54,7 @@ describe('Fields Browser', () => {
4154
context('Fields Browser rendering', () => {
4255
before(() => {
4356
loginAndWaitForPage(HOSTS_PAGE);
57+
openTimeline();
4458
populateTimeline();
4559
openTimelineFieldsBrowser();
4660
});
@@ -78,7 +92,7 @@ describe('Fields Browser', () => {
7892

7993
filterFieldsBrowser(filterInput);
8094

81-
cy.get(FIELDS_BROWSER_CATEGORIES_COUNT)
95+
cy.get(FIELDS_BROWSER_CATEGORIES_COUNT, { timeout: DEFAULT_TIMEOUT })
8296
.invoke('text')
8397
.should('eq', '2 categories');
8498
});
@@ -88,18 +102,13 @@ describe('Fields Browser', () => {
88102

89103
filterFieldsBrowser(filterInput);
90104

91-
cy.get(FIELDS_BROWSER_FILTER_INPUT, { timeout: DEFAULT_TIMEOUT }).should(
92-
'not.have.class',
93-
'euiFieldSearch-isLoading'
94-
);
95-
96105
cy.get(FIELDS_BROWSER_HOST_CATEGORIES_COUNT)
97106
.invoke('text')
98107
.then(hostCategoriesCount => {
99108
cy.get(FIELDS_BROWSER_SYSTEM_CATEGORIES_COUNT)
100109
.invoke('text')
101110
.then(systemCategoriesCount => {
102-
cy.get(FIELDS_BROWSER_FIELDS_COUNT)
111+
cy.get(FIELDS_BROWSER_FIELDS_COUNT, { timeout: DEFAULT_TIMEOUT })
103112
.invoke('text')
104113
.should('eq', `${+hostCategoriesCount + +systemCategoriesCount} fields`);
105114
});
@@ -120,6 +129,7 @@ describe('Fields Browser', () => {
120129
context('Editing the timeline', () => {
121130
before(() => {
122131
loginAndWaitForPage(HOSTS_PAGE);
132+
openTimeline();
123133
populateTimeline();
124134
openTimelineFieldsBrowser();
125135
});
@@ -130,31 +140,17 @@ describe('Fields Browser', () => {
130140
});
131141

132142
it('removes the message field from the timeline when the user un-checks the field', () => {
133-
const toggleField = 'message';
134-
135-
cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`).should(
136-
'exist'
137-
);
143+
cy.get(FIELDS_BROWSER_MESSAGE_HEADER).should('exist');
138144

139-
cy.get(
140-
`[data-test-subj="timeline"] [data-test-subj="field-${toggleField}-checkbox"]`
141-
).uncheck({
142-
force: true,
143-
});
145+
removesMessageField();
146+
closeFieldsBrowser();
144147

145-
clickOutsideFieldsBrowser();
146-
147-
cy.get(FIELDS_BROWSER_CONTAINER).should('not.exist');
148-
149-
cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`).should(
150-
'not.exist'
151-
);
148+
cy.get(FIELDS_BROWSER_MESSAGE_HEADER).should('not.exist');
152149
});
153150

154151
it('selects a search results label with the expected count of categories matching the filter input', () => {
155152
const category = 'host';
156-
157-
filterFieldsBrowser(`${category}.`);
153+
filterFieldsBrowser(category);
158154

159155
cy.get(FIELDS_BROWSER_SELECTED_CATEGORY_TITLE)
160156
.invoke('text')
@@ -163,75 +159,47 @@ describe('Fields Browser', () => {
163159

164160
it('adds a field to the timeline when the user clicks the checkbox', () => {
165161
const filterInput = 'host.geo.c';
166-
const toggleField = 'host.geo.city_name';
167162

168163
filterFieldsBrowser(filterInput);
164+
cy.get(FIELDS_BROWSER_HOST_GEO_CITY_NAME_HEADER).should('not.exist');
165+
addsHostGeoCityNameToTimeline();
166+
closeFieldsBrowser();
169167

170-
cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`).should(
171-
'not.exist'
172-
);
173-
174-
cy.get(`[data-test-subj="timeline"] [data-test-subj="field-${toggleField}-checkbox"]`).check({
175-
force: true,
176-
});
177-
178-
clickOutsideFieldsBrowser();
179-
180-
cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`, {
168+
cy.get(FIELDS_BROWSER_HOST_GEO_CITY_NAME_HEADER, {
181169
timeout: DEFAULT_TIMEOUT,
182170
}).should('exist');
183171
});
184172

185173
it('adds a field to the timeline when the user drags and drops a field', () => {
186174
const filterInput = 'host.geo.c';
187-
const toggleField = 'host.geo.country_name';
188175

189176
filterFieldsBrowser(filterInput);
190177

191-
cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`).should(
192-
'not.exist'
193-
);
194-
195-
cy.get(
196-
`[data-test-subj="timeline"] [data-test-subj="field-name-${toggleField}"]`
197-
).then(field => drag(field));
178+
cy.get(FIELDS_BROWSER_HOST_GEO_COUNTRY_NAME_HEADER).should('not.exist');
198179

199-
cy.get(`[data-test-subj="timeline"] [data-test-subj="headers-group"]`).then(headersDropArea =>
200-
drop(headersDropArea)
201-
);
180+
addsHostGeoCountryNameToTimelineDraggingIt();
202181

203-
cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`, {
182+
cy.get(FIELDS_BROWSER_HOST_GEO_COUNTRY_NAME_HEADER, {
204183
timeout: DEFAULT_TIMEOUT,
205184
}).should('exist');
206185
});
207186

208187
it('resets all fields in the timeline when `Reset Fields` is clicked', () => {
209188
const filterInput = 'host.geo.c';
210-
const toggleField = 'host.geo.continent_name';
211189

212190
filterFieldsBrowser(filterInput);
213191

214-
cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`).should(
215-
'not.exist'
216-
);
217-
218-
cy.get(`[data-test-subj="timeline"] [data-test-subj="field-${toggleField}-checkbox"]`).check({
219-
force: true,
220-
});
192+
cy.get(FIELDS_BROWSER_HEADER_HOST_GEO_CONTINENT_NAME_HEADER).should('not.exist');
221193

222-
clickOutsideFieldsBrowser();
194+
addsHostGeoContinentNameToTimeline();
195+
closeFieldsBrowser();
223196

224-
cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`).should(
225-
'exist'
226-
);
197+
cy.get(FIELDS_BROWSER_HEADER_HOST_GEO_CONTINENT_NAME_HEADER).should('exist');
227198

228199
openTimelineFieldsBrowser();
200+
resetFields();
229201

230-
cy.get('[data-test-subj="timeline"] [data-test-subj="reset-fields"]').click({ force: true });
231-
232-
cy.get(`[data-test-subj="timeline"] [data-test-subj="header-text-${toggleField}"]`).should(
233-
'not.exist'
234-
);
202+
cy.get(FIELDS_BROWSER_HEADER_HOST_GEO_CONTINENT_NAME_HEADER).should('not.exist');
235203
});
236204
});
237205
});

‎x-pack/legacy/plugins/siem/cypress/screens/hosts/fields_browser.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55
*/
66

77
/** Clicking this button in the timeline opens the Fields browser */
8-
export const TIMELINE_FIELDS_BUTTON =
9-
'[data-test-subj="timeline"] [data-test-subj="show-field-browser"]';
108

119
/** The title displayed in the fields browser (i.e. Customize Columns) */
1210
export const FIELDS_BROWSER_TITLE = '[data-test-subj="field-browser-title"]';

‎x-pack/legacy/plugins/siem/cypress/screens/timeline/fields_browser.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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 const FIELDS_BROWSER_TITLE = '[data-test-subj="field-browser-title"]';
8+
9+
/** Typing in this input filters the Field Browser */
10+
export const FIELDS_BROWSER_FILTER_INPUT = '[data-test-subj="field-search"]';
11+
12+
/** The title of the selected category in the right-hand side of the fields browser */
13+
export const FIELDS_BROWSER_SELECTED_CATEGORY_TITLE = '[data-test-subj="selected-category-title"]';
14+
15+
export const FIELDS_BROWSER_SELECTED_CATEGORY_COUNT =
16+
'[data-test-subj="selected-category-count-badge"]';
17+
18+
export const FIELDS_BROWSER_CATEGORIES_COUNT = '[data-test-subj="categories-count"]';
19+
20+
export const FIELDS_BROWSER_HOST_CATEGORIES_COUNT = '[data-test-subj="host-category-count"]';
21+
22+
export const FIELDS_BROWSER_SYSTEM_CATEGORIES_COUNT = '[data-test-subj="system-category-count"]';
23+
24+
export const FIELDS_BROWSER_FIELDS_COUNT = '[data-test-subj="fields-count"]';
25+
26+
/** Contains the body of the fields browser */
27+
export const FIELDS_BROWSER_CONTAINER = '[data-test-subj="fields-browser-container"]';
28+
29+
export const FIELDS_BROWSER_MESSAGE_HEADER =
30+
'[data-test-subj="timeline"] [data-test-subj="header-text-message"]';
31+
32+
export const FIELDS_BROWSER_MESSAGE_CHECKBOX =
33+
'[data-test-subj="timeline"] [data-test-subj="field-message-checkbox"]';
34+
35+
export const FIELDS_BROWSER_HOST_GEO_COUNTRY_NAME_HEADER =
36+
'[data-test-subj="header-text-host.geo.country_name"]';
37+
38+
export const FIELDS_BROWSER_HOST_GEO_COUNTRY_NAME_CHECKBOX =
39+
'[data-test-subj="field-host.geo.country_name-checkbox"]';
40+
41+
export const FIELDS_BROWSER_DRAGGABLE_HOST_GEO_COUNTRY_NAME_HEADER =
42+
'[data-test-subj="timeline"] [data-test-subj="field-name-host.geo.country_name"]';
43+
44+
export const FIELDS_BROWSER_HOST_GEO_CITY_NAME_HEADER =
45+
'[data-test-subj="header-text-host.geo.city_name"]';
46+
47+
export const FIELDS_BROWSER_HOST_GEO_CITY_NAME_CHECKBOX =
48+
'[data-test-subj="field-host.geo.city_name-checkbox"]';
49+
50+
export const FIELDS_BROWSER_HEADER_DROP_AREA =
51+
'[data-test-subj="timeline"] [data-test-subj="headers-group"]';
52+
53+
export const FIELDS_BROWSER_HEADER_HOST_GEO_CONTINENT_NAME_HEADER =
54+
'[data-test-subj="header-text-host.geo.continent_name"]';
55+
56+
export const FIELDS_BROWSER_HOST_GEO_CONTINENT_NAME_CHECKBOX =
57+
'[data-test-subj="field-host.geo.continent_name-checkbox"]';
58+
59+
export const FIELDS_BROWSER_RESET_FIELDS =
60+
'[data-test-subj="timeline"] [data-test-subj="reset-fields"]';

‎x-pack/legacy/plugins/siem/cypress/screens/timeline/main.ts‎

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+
/** The `Timeline ^` button that toggles visibility of the Timeline */
8+
export const TIMELINE_TOGGLE_BUTTON = '[data-test-subj="flyoutOverlay"]';
9+
10+
/** Contains the KQL bar for searching or filtering in the timeline */
11+
export const SEARCH_OR_FILTER_CONTAINER =
12+
'[data-test-subj="timeline-search-or-filter-search-container"]';
13+
14+
export const TIMELINE_FIELDS_BUTTON =
15+
'[data-test-subj="timeline"] [data-test-subj="show-field-browser"]';
16+
17+
/** The total server-side count of the events matching the timeline's search criteria */
18+
export const SERVER_SIDE_EVENT_COUNT = '[data-test-subj="server-side-event-count"]';

0 commit comments

Comments
 (0)