Skip to content

Commit

Permalink
Add Events tab and External alerts tab to the User page and the User …
Browse files Browse the repository at this point in the history
…details page (#127953)

* Add Events tab to the User page and the User details page

* Add External alerts tab to the User page and the User details page

* Add cypress tests

* Add unit test to EventsQueryTabBody

* Memoize navTabs on Users page
  • Loading branch information
machadoum authored Mar 24, 2022
1 parent 968f350 commit f289a5d
Show file tree
Hide file tree
Showing 32 changed files with 472 additions and 79 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,8 @@ export type TimelineWithoutExternalRefs = Omit<SavedTimeline, 'dataViewId' | 'sa
*/

export enum TimelineId {
usersPageEvents = 'users-page-events',
usersPageExternalAlerts = 'users-page-external-alerts',
hostsPageEvents = 'hosts-page-events',
hostsPageExternalAlerts = 'hosts-page-external-alerts',
detectionsRulesDetailsPage = 'detections-rules-details-page',
Expand All @@ -326,6 +328,8 @@ export enum TimelineId {
}

export const TimelineIdLiteralRt = runtimeTypes.union([
runtimeTypes.literal(TimelineId.usersPageEvents),
runtimeTypes.literal(TimelineId.usersPageExternalAlerts),
runtimeTypes.literal(TimelineId.hostsPageEvents),
runtimeTypes.literal(TimelineId.hostsPageExternalAlerts),
runtimeTypes.literal(TimelineId.detectionsRulesDetailsPage),
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/*
* 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 { EVENTS_TAB, EVENTS_TAB_CONTENT } from '../../screens/users/user_events';
import { cleanKibana } from '../../tasks/common';

import { loginAndWaitForPage } from '../../tasks/login';

import { USERS_URL } from '../../urls/navigation';

describe('Users Events tab', () => {
before(() => {
cleanKibana();
loginAndWaitForPage(USERS_URL);
});

it(`renders events tab`, () => {
cy.get(EVENTS_TAB).click();

cy.get(EVENTS_TAB_CONTENT).should('exist');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/*
* 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 {
EXTERNAL_ALERTS_TAB,
EXTERNAL_ALERTS_TAB_CONTENT,
} from '../../screens/users/user_external_alerts';
import { cleanKibana } from '../../tasks/common';

import { loginAndWaitForPage } from '../../tasks/login';

import { USERS_URL } from '../../urls/navigation';

describe('Users external alerts tab', () => {
before(() => {
cleanKibana();
loginAndWaitForPage(USERS_URL);
});

it(`renders external alerts tab`, () => {
cy.get(EXTERNAL_ALERTS_TAB).click();

cy.get(EXTERNAL_ALERTS_TAB_CONTENT).should('exist');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/*
* 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.
*/

export const EVENTS_TAB = '[data-test-subj="navigation-events"]';
export const EVENTS_TAB_CONTENT = '[data-test-subj="events-viewer-panel"]';
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/*
* 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.
*/

export const EXTERNAL_ALERTS_TAB = '[data-test-subj="navigation-externalAlerts"]';
export const EXTERNAL_ALERTS_TAB_CONTENT = '[data-test-subj="events-viewer-panel"]';
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
/*
* 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 { render } from '@testing-library/react';
import React from 'react';
import { TimelineId } from '../../../../common/types';
import { HostsType } from '../../../hosts/store/model';
import { TestProviders } from '../../mock';
import { EventsQueryTabBody, EventsQueryTabBodyComponentProps } from './events_query_tab_body';
import { useGlobalFullScreen } from '../../containers/use_full_screen';
import * as tGridActions from '../../../../../timelines/public/store/t_grid/actions';

jest.mock('../../lib/kibana', () => {
const original = jest.requireActual('../../lib/kibana');

return {
...original,
useKibana: () => ({
services: {
...original.useKibana().services,
cases: {
ui: {
getCasesContext: jest.fn(),
},
},
},
}),
};
});

const FakeStatefulEventsViewer = () => <div>{'MockedStatefulEventsViewer'}</div>;
jest.mock('../events_viewer', () => ({ StatefulEventsViewer: FakeStatefulEventsViewer }));

jest.mock('../../containers/use_full_screen', () => ({
useGlobalFullScreen: jest.fn().mockReturnValue({
globalFullScreen: true,
}),
}));

describe('EventsQueryTabBody', () => {
const commonProps: EventsQueryTabBodyComponentProps = {
indexNames: ['test-index'],
setQuery: jest.fn(),
timelineId: TimelineId.test,
type: HostsType.page,
endDate: new Date('2000').toISOString(),
startDate: new Date('2000').toISOString(),
};

it('renders EventsViewer', () => {
const { queryByText } = render(
<TestProviders>
<EventsQueryTabBody {...commonProps} />
</TestProviders>
);

expect(queryByText('MockedStatefulEventsViewer')).toBeInTheDocument();
});

it('renders the matrix histogram when globalFullScreen is false', () => {
(useGlobalFullScreen as jest.Mock).mockReturnValue({
globalFullScreen: false,
});

const { queryByTestId } = render(
<TestProviders>
<EventsQueryTabBody {...commonProps} />
</TestProviders>
);

expect(queryByTestId('eventsHistogramQueryPanel')).toBeInTheDocument();
});

it("doesn't render the matrix histogram when globalFullScreen is true", () => {
(useGlobalFullScreen as jest.Mock).mockReturnValue({
globalFullScreen: true,
});

const { queryByTestId } = render(
<TestProviders>
<EventsQueryTabBody {...commonProps} />
</TestProviders>
);

expect(queryByTestId('eventsHistogramQueryPanel')).not.toBeInTheDocument();
});

it('deletes query when unmouting', () => {
const mockDeleteQuery = jest.fn();
const { unmount } = render(
<TestProviders>
<EventsQueryTabBody {...commonProps} deleteQuery={mockDeleteQuery} />
</TestProviders>
);
unmount();

expect(mockDeleteQuery).toHaveBeenCalled();
});

it('initializes t-grid', () => {
const spy = jest.spyOn(tGridActions, 'initializeTGridSettings');
render(
<TestProviders>
<EventsQueryTabBody {...commonProps} />
</TestProviders>
);

expect(spy).toHaveBeenCalled();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,28 @@
import React, { useEffect, useMemo } from 'react';
import { useDispatch } from 'react-redux';

import { Filter } from '@kbn/es-query';
import { TimelineId } from '../../../../common/types/timeline';
import { StatefulEventsViewer } from '../../../common/components/events_viewer';
import { StatefulEventsViewer } from '../events_viewer';
import { timelineActions } from '../../../timelines/store/timeline';
import { HostsComponentsQueryProps } from './types';
import { eventsDefaultModel } from '../../../common/components/events_viewer/default_model';
import {
MatrixHistogramOption,
MatrixHistogramConfigs,
} from '../../../common/components/matrix_histogram/types';
import { MatrixHistogram } from '../../../common/components/matrix_histogram';
import { useGlobalFullScreen } from '../../../common/containers/use_full_screen';
import * as i18n from '../translations';
import { eventsDefaultModel } from '../events_viewer/default_model';

import { MatrixHistogram } from '../matrix_histogram';
import { useGlobalFullScreen } from '../../containers/use_full_screen';
import * as i18n from '../../../hosts/pages/translations';
import { MatrixHistogramType } from '../../../../common/search_strategy/security_solution';
import { getDefaultControlColumn } from '../../../timelines/components/timeline/body/control_columns';
import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
import { DefaultCellRenderer } from '../../../timelines/components/timeline/cell_rendering/default_cell_renderer';
import { SourcererScopeName } from '../../../common/store/sourcerer/model';
import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
import { SourcererScopeName } from '../../store/sourcerer/model';
import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
import { DEFAULT_COLUMN_MIN_WIDTH } from '../../../timelines/components/timeline/body/constants';
import { defaultCellActions } from '../../../common/lib/cell_actions/default_cell_actions';
import { getEventsHistogramLensAttributes } from '../../../common/components/visualization_actions/lens_attributes/hosts/events';
import { defaultCellActions } from '../../lib/cell_actions/default_cell_actions';
import { GlobalTimeArgs } from '../../containers/use_global_time';
import { MatrixHistogramConfigs, MatrixHistogramOption } from '../matrix_histogram/types';
import { QueryTabBodyProps as UserQueryTabBodyProps } from '../../../users/pages/navigation/types';
import { QueryTabBodyProps as HostQueryTabBodyProps } from '../../../hosts/pages/navigation/types';

const EVENTS_HISTOGRAM_ID = 'eventsHistogramQuery';

Expand Down Expand Up @@ -61,14 +62,25 @@ export const histogramConfigs: MatrixHistogramConfigs = {
getLensAttributes: getEventsHistogramLensAttributes,
};

const EventsQueryTabBodyComponent: React.FC<HostsComponentsQueryProps> = ({
type QueryTabBodyProps = UserQueryTabBodyProps | HostQueryTabBodyProps;

export type EventsQueryTabBodyComponentProps = QueryTabBodyProps & {
deleteQuery?: GlobalTimeArgs['deleteQuery'];
indexNames: string[];
pageFilters?: Filter[];
setQuery: GlobalTimeArgs['setQuery'];
timelineId: TimelineId;
};

const EventsQueryTabBodyComponent: React.FC<EventsQueryTabBodyComponentProps> = ({
deleteQuery,
endDate,
filterQuery,
indexNames,
pageFilters,
setQuery,
startDate,
timelineId,
}) => {
const dispatch = useDispatch();
const { globalFullScreen } = useGlobalFullScreen();
Expand All @@ -78,7 +90,7 @@ const EventsQueryTabBodyComponent: React.FC<HostsComponentsQueryProps> = ({
useEffect(() => {
dispatch(
timelineActions.initializeTGridSettings({
id: TimelineId.hostsPageEvents,
id: timelineId,
defaultColumns: eventsDefaultModel.columns.map((c) =>
!tGridEnabled && c.initialWidth == null
? {
Expand All @@ -89,7 +101,7 @@ const EventsQueryTabBodyComponent: React.FC<HostsComponentsQueryProps> = ({
),
})
);
}, [dispatch, tGridEnabled]);
}, [dispatch, tGridEnabled, timelineId]);

useEffect(() => {
return () => {
Expand Down Expand Up @@ -119,7 +131,7 @@ const EventsQueryTabBodyComponent: React.FC<HostsComponentsQueryProps> = ({
defaultModel={eventsDefaultModel}
end={endDate}
entityType="events"
id={TimelineId.hostsPageEvents}
id={timelineId}
leadingControlColumns={leadingControlColumns}
pageFilters={pageFilters}
renderCellValue={DefaultCellRenderer}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,6 @@ export const mockGlobalState: State = {
[usersModel.UsersTableType.allUsers]: {
activePage: 0,
limit: 10,
// TODO sort: { field: RiskScoreFields.riskScore, direction: Direction.desc },
},
[usersModel.UsersTableType.anomalies]: null,
[usersModel.UsersTableType.risk]: {
Expand All @@ -215,11 +214,15 @@ export const mockGlobalState: State = {
},
severitySelection: [],
},
[usersModel.UsersTableType.events]: { activePage: 0, limit: 10 },
[usersModel.UsersTableType.alerts]: { activePage: 0, limit: 10 },
},
},
details: {
queries: {
[usersModel.UsersTableType.anomalies]: null,
[usersModel.UsersTableType.events]: { activePage: 0, limit: 10 },
[usersModel.UsersTableType.alerts]: { activePage: 0, limit: 10 },
},
},
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { HostsTableType } from '../../store/model';
import { AnomaliesQueryTabBody } from '../../../common/containers/anomalies/anomalies_query_tab_body';
import { useGlobalTime } from '../../../common/containers/use_global_time';
import { AnomaliesHostTable } from '../../../common/components/ml/tables/anomalies_host_table';
import { EventsQueryTabBody } from '../../../common/components/events_tab/events_query_tab_body';

import { HostDetailsTabsProps } from './types';
import { type } from './utils';
Expand All @@ -23,10 +24,10 @@ import {
HostsQueryTabBody,
AuthenticationsQueryTabBody,
UncommonProcessQueryTabBody,
EventsQueryTabBody,
HostAlertsQueryTabBody,
HostRiskTabBody,
} from '../navigation';
import { TimelineId } from '../../../../common/types';

export const HostDetailsTabs = React.memo<HostDetailsTabsProps>(
({
Expand Down Expand Up @@ -98,7 +99,11 @@ export const HostDetailsTabs = React.memo<HostDetailsTabsProps>(
</Route>

<Route path={`${hostDetailsPagePath}/:tabName(${HostsTableType.events})`}>
<EventsQueryTabBody {...tabProps} pageFilters={pageFilters} />
<EventsQueryTabBody
{...tabProps}
pageFilters={pageFilters}
timelineId={TimelineId.hostsPageEvents}
/>
</Route>
<Route path={`${hostDetailsPagePath}/:tabName(${HostsTableType.alerts})`}>
<HostAlertsQueryTabBody {...tabProps} pageFilters={pageFilters} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,17 @@ import { HostsTableType } from '../store/model';
import { AnomaliesQueryTabBody } from '../../common/containers/anomalies/anomalies_query_tab_body';
import { AnomaliesHostTable } from '../../common/components/ml/tables/anomalies_host_table';
import { UpdateDateRange } from '../../common/components/charts/common';
import { EventsQueryTabBody } from '../../common/components/events_tab/events_query_tab_body';
import { HOSTS_PATH } from '../../../common/constants';

import {
HostsQueryTabBody,
HostRiskScoreQueryTabBody,
AuthenticationsQueryTabBody,
UncommonProcessQueryTabBody,
EventsQueryTabBody,
} from './navigation';
import { HostAlertsQueryTabBody } from './navigation/alerts_query_tab_body';
import { TimelineId } from '../../../common/types';

export const HostsTabs = memo<HostsTabsProps>(
({
Expand Down Expand Up @@ -96,7 +98,7 @@ export const HostsTabs = memo<HostsTabsProps>(
<AnomaliesQueryTabBody {...tabProps} AnomaliesTableComponent={AnomaliesHostTable} />
</Route>
<Route path={`${HOSTS_PATH}/:tabName(${HostsTableType.events})`}>
<EventsQueryTabBody {...tabProps} />
<EventsQueryTabBody {...tabProps} timelineId={TimelineId.hostsPageEvents} />
</Route>
<Route path={`${HOSTS_PATH}/:tabName(${HostsTableType.alerts})`}>
<HostAlertsQueryTabBody {...tabProps} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
*/

export * from './authentications_query_tab_body';
export * from './events_query_tab_body';
export * from './hosts_query_tab_body';
export * from './uncommon_process_query_tab_body';
export * from './alerts_query_tab_body';
Expand Down
Loading

0 comments on commit f289a5d

Please sign in to comment.