Skip to content

Commit

Permalink
[Security Solution] [RAC] Add alerts count table to Security Solution…
Browse files Browse the repository at this point in the history
…s alerts page (#106358)

* Add alerts count table to Security Solutions alerts page

* Refactor alerts_histogram_panel to reuse logic on alerts_count

* Improve AlertsCount mobile layout
  • Loading branch information
machadoum authored Jul 29, 2021
1 parent e994d14 commit 12271f3
Show file tree
Hide file tree
Showing 36 changed files with 1,104 additions and 400 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@
*/

import * as t from 'io-ts';
import { PositiveIntegerGreaterThanZero } from '@kbn/securitysolution-io-ts-types';
import { PositiveInteger } from '@kbn/securitysolution-io-ts-types';

export const querySignalsSchema = t.exact(
t.partial({
query: t.object,
aggs: t.object,
size: PositiveIntegerGreaterThanZero,
size: PositiveInteger,
track_total_hits: t.boolean,
_source: t.array(t.string),
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import { CELL_TEXT, JSON_LINES, TABLE_ROWS } from '../../screens/alerts_details';
import { ALERT_FLYOUT, CELL_TEXT, JSON_LINES, TABLE_ROWS } from '../../screens/alerts_details';

import {
expandFirstAlert,
Expand Down Expand Up @@ -41,12 +41,14 @@ describe('Alert details with unmapped fields', () => {
openJsonView();
scrollJsonViewToBottom();

cy.get(JSON_LINES).then((elements) => {
const length = elements.length;
cy.wrap(elements)
.eq(length - expectedUnmappedField.line)
.should('have.text', expectedUnmappedField.text);
});
cy.get(ALERT_FLYOUT)
.find(JSON_LINES)
.then((elements) => {
const length = elements.length;
cy.wrap(elements)
.eq(length - expectedUnmappedField.line)
.should('have.text', expectedUnmappedField.text);
});
});

it('Displays the unmapped field on the table', () => {
Expand All @@ -57,8 +59,8 @@ describe('Alert details with unmapped fields', () => {
};

openTable();

cy.get(TABLE_ROWS)
cy.get(ALERT_FLYOUT)
.find(TABLE_ROWS)
.eq(expectedUnmmappedField.row)
.within(() => {
cy.get(CELL_TEXT).eq(2).should('have.text', expectedUnmmappedField.field);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
* 2.0.
*/

export const ALERT_FLYOUT = '[data-test-subj="timeline:details-panel:flyout"]';

export const CELL_TEXT = '.euiText';

export const JSON_CONTENT = '[data-test-subj="jsonView"]';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export interface HeaderSectionProps extends HeaderProps {
tooltip?: string;
growLeftSplit?: boolean;
inspectMultiple?: boolean;
hideSubtitle?: boolean;
}

const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
Expand All @@ -64,6 +65,7 @@ const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
tooltip,
growLeftSplit = true,
inspectMultiple = false,
hideSubtitle = false,
}) => (
<Header data-test-subj="header-section" border={border} height={height}>
<EuiFlexGroup alignItems="center">
Expand All @@ -82,7 +84,9 @@ const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
</h2>
</EuiTitle>

<Subtitle data-test-subj="header-section-subtitle" items={subtitle} />
{!hideSubtitle && (
<Subtitle data-test-subj="header-section-subtitle" items={subtitle} />
)}
</EuiFlexItem>

{id && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { combineQueries } from '../../../timelines/components/timeline/helpers';
import { getOptions } from './helpers';
import { TopN } from './top_n';
import { TimelineId, TimelineTabs } from '../../../../common/types/timeline';
import { AlertsStackByField } from '../../../detections/components/alerts_kpis/common/types';

const EMPTY_FILTERS: Filter[] = [];
const EMPTY_QUERY: Query = { query: '', language: 'kuery' };
Expand Down Expand Up @@ -153,7 +154,7 @@ const StatefulTopNComponent: React.FC<Props> = ({
data-test-subj="top-n"
defaultView={defaultView}
deleteQuery={timelineId === TimelineId.active ? undefined : deleteQuery}
field={field}
field={field as AlertsStackByField}
filters={timelineId === TimelineId.active ? EMPTY_FILTERS : globalFilters}
from={timelineId === TimelineId.active ? activeTimelineFrom : from}
indexPattern={indexPattern}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ jest.mock('uuid', () => {
};
});

const field = 'process.name';
const field = 'host.name';
const value = 'nice';
const combinedQueries = {
bool: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { TopNOption } from './helpers';
import * as i18n from './translations';
import { getIndicesSelector, IndicesSelector } from './selectors';
import { State } from '../../store';
import { AlertsStackByField } from '../../../detections/components/alerts_kpis/common/types';

const TopNContainer = styled.div`
width: 600px;
Expand Down Expand Up @@ -50,7 +51,7 @@ const TopNContent = styled.div`
export interface Props extends Pick<GlobalTimeArgs, 'from' | 'to' | 'deleteQuery' | 'setQuery'> {
combinedQueries?: string;
defaultView: TimelineEventsType;
field: string;
field: AlertsStackByField;
filters: Filter[];
indexPattern: IIndexPattern;
options: TopNOption[];
Expand Down Expand Up @@ -137,14 +138,11 @@ const TopNComponent: React.FC<Props> = ({
<SignalsByCategory
combinedQueries={combinedQueries}
filters={filters}
from={from}
headerChildren={headerChildren}
onlyField={field}
query={query}
setAbsoluteRangeDatePickerTarget={setAbsoluteRangeDatePickerTarget}
setQuery={setQuery}
timelineId={timelineId}
to={to}
/>
)}
</TopNContent>
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React from 'react';
import { shallow, mount } from 'enzyme';

import { AlertsCount } from './alerts_count';
import { AlertSearchResponse } from '../../../containers/detection_engine/alerts/types';
import { TestProviders } from '../../../../common/mock';
import { DragDropContextWrapper } from '../../../../common/components/drag_and_drop/drag_drop_context_wrapper';
import { mockBrowserFields } from '../../../../common/containers/source/mock';
import { AlertsCountAggregation } from './types';

jest.mock('../../../../common/lib/kibana');
const mockDispatch = jest.fn();

jest.mock('react-redux', () => {
const original = jest.requireActual('react-redux');
return {
...original,
useDispatch: () => mockDispatch,
};
});

describe('AlertsCount', () => {
it('renders correctly', () => {
const wrapper = shallow(
<AlertsCount
data={{} as AlertSearchResponse<{}, AlertsCountAggregation>}
loading={false}
selectedStackByOption={'test_selected_field'}
/>
);

expect(wrapper.find('[data-test-subj="alertsCountTable"]').exists()).toBeTruthy();
});

it('renders the given alert item', () => {
const alertFiedlKey = 'test_stack_by_test_key';
const alertFiedlCount = 999;
const alertData = {
took: 0,
timeout: false,
hits: {
hits: [],
sequences: [],
events: [],
total: {
relation: 'eq',
value: 0,
},
},
_shards: {
failed: 0,
skipped: 0,
successful: 1,
total: 1,
},
aggregations: {
alertsByGroupingCount: {
buckets: [
{
key: alertFiedlKey,
doc_count: alertFiedlCount,
},
],
},
alertsByGrouping: { buckets: [] },
},
} as AlertSearchResponse<unknown, AlertsCountAggregation>;

const wrapper = mount(
<TestProviders>
<DragDropContextWrapper browserFields={mockBrowserFields}>
<AlertsCount
data={alertData}
loading={false}
selectedStackByOption={'test_selected_field'}
/>
</DragDropContextWrapper>
</TestProviders>
);

expect(wrapper.text()).toContain(alertFiedlKey);
expect(wrapper.text()).toContain(alertFiedlCount);
});
});
Loading

0 comments on commit 12271f3

Please sign in to comment.