Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[SIEM] Adds performance enhancements such by removing wasted renderers and adding incremental DOM rendering #43157

Merged
merged 13 commits into from
Aug 17, 2019
Merged

[SIEM] Adds performance enhancements such by removing wasted renderers and adding incremental DOM rendering #43157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d894adf
Removed extra renderers for super date picker
FrankHassanabad Aug 12, 2019
0f134a0
Optimizations of flyoutbutton
FrankHassanabad Aug 13, 2019
e54651a
left and right property optimization change
FrankHassanabad Aug 13, 2019
20ef8d9
Merge branch 'master' into remove-extra-renderers
FrankHassanabad Aug 13, 2019
6bf7280
Incremental loading through requestIdleCallback which works on Chrome…
FrankHassanabad Aug 14, 2019
d3eba06
Merge branch 'master' into remove-extra-renderers
FrankHassanabad Aug 14, 2019
19725d0
Change over to using React.memo for the events component and removed …
FrankHassanabad Aug 14, 2019
52e4cb0
Changed isLoading to be a non-drill prop for performance reasons and …
FrankHassanabad Aug 16, 2019
5daac1c
Changed another pure to be React.memo
FrankHassanabad Aug 16, 2019
c1ebcda
Merge branch 'master' into remove-extra-renderers
FrankHassanabad Aug 16, 2019
25e4d82
Fixed conflicts and tests and added more displayName
FrankHassanabad Aug 16, 2019
54907bd
Fixed code according to PR feedback
FrankHassanabad Aug 16, 2019
4b05d2a
Minor fix to the Footer to give it a width optimization of it being c…
FrankHassanabad Aug 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion ...cy/plugins/siem/public/components/event_details/__snapshots__/event_details.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 0 additions & 3 deletions x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,15 +65,13 @@ export const getColumns = ({
browserFields,
columnHeaders,
eventId,
isLoading,
onUpdateColumns,
timelineId,
toggleColumn,
}: {
browserFields: BrowserFields;
columnHeaders: ColumnHeader[];
eventId: string;
isLoading: boolean;
onUpdateColumns: OnUpdateColumns;
timelineId: string;
toggleColumn: (column: ColumnHeader) => void;
Expand Down Expand Up @@ -146,7 +144,6 @@ export const getColumns = ({
})}
data-test-subj="field-name"
fieldId={field}
isLoading={isLoading}
onUpdateColumns={onUpdateColumns}
/>
) : (
Expand Down
3 changes: 0 additions & 3 deletions x-pack/legacy/plugins/siem/public/components/event_details/event_details.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ describe('EventDetails', () => {
columnHeaders={defaultHeaders}
data={mockDetailItemData}
id={mockDetailItemDataId}
isLoading={false}
view="table-view"
onUpdateColumns={jest.fn()}
onViewSelected={jest.fn()}
Expand All @@ -48,7 +47,6 @@ describe('EventDetails', () => {
columnHeaders={defaultHeaders}
data={mockDetailItemData}
id={mockDetailItemDataId}
isLoading={false}
view="table-view"
onUpdateColumns={jest.fn()}
onViewSelected={jest.fn()}
Expand All @@ -75,7 +73,6 @@ describe('EventDetails', () => {
columnHeaders={defaultHeaders}
data={mockDetailItemData}
id={mockDetailItemDataId}
isLoading={false}
view="table-view"
onUpdateColumns={jest.fn()}
onViewSelected={jest.fn()}
Expand Down
6 changes: 1 addition & 5 deletions x-pack/legacy/plugins/siem/public/components/event_details/event_details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@

import { EuiTabbedContent, EuiTabbedContentTab } from '@elastic/eui';
import * as React from 'react';
import { pure } from 'recompose';
import styled from 'styled-components';

import { BrowserFields } from '../../containers/source';
Expand All @@ -25,7 +24,6 @@ interface Props {
columnHeaders: ColumnHeader[];
data: DetailItem[];
id: string;
isLoading: boolean;
view: View;
onUpdateColumns: OnUpdateColumns;
onViewSelected: (selected: View) => void;
Expand All @@ -40,13 +38,12 @@ const Details = styled.div`

Details.displayName = 'Details';

export const EventDetails = pure<Props>(
export const EventDetails = React.memo<Props>(
({
browserFields,
columnHeaders,
data,
id,
isLoading,
view,
onUpdateColumns,
onViewSelected,
Expand All @@ -63,7 +60,6 @@ export const EventDetails = pure<Props>(
columnHeaders={columnHeaders}
data={data}
eventId={id}
isLoading={isLoading}
onUpdateColumns={onUpdateColumns}
timelineId={timelineId}
toggleColumn={toggleColumn}
Expand Down
9 changes: 0 additions & 9 deletions x-pack/legacy/plugins/siem/public/components/event_details/event_fields_browser.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ describe('EventFieldsBrowser', () => {
columnHeaders={defaultHeaders}
data={mockDetailItemData}
eventId={mockDetailItemDataId}
isLoading={false}
onUpdateColumns={jest.fn()}
timelineId="test"
toggleColumn={jest.fn()}
Expand All @@ -47,7 +46,6 @@ describe('EventFieldsBrowser', () => {
columnHeaders={defaultHeaders}
data={mockDetailItemData}
eventId={mockDetailItemDataId}
isLoading={false}
onUpdateColumns={jest.fn()}
timelineId="test"
toggleColumn={jest.fn()}
Expand All @@ -74,7 +72,6 @@ describe('EventFieldsBrowser', () => {
columnHeaders={defaultHeaders}
data={mockDetailItemData}
eventId={eventId}
isLoading={false}
onUpdateColumns={jest.fn()}
timelineId="test"
toggleColumn={jest.fn()}
Expand All @@ -100,7 +97,6 @@ describe('EventFieldsBrowser', () => {
columnHeaders={defaultHeaders}
data={mockDetailItemData}
eventId={eventId}
isLoading={false}
onUpdateColumns={jest.fn()}
timelineId="test"
toggleColumn={jest.fn()}
Expand All @@ -127,7 +123,6 @@ describe('EventFieldsBrowser', () => {
columnHeaders={defaultHeaders}
data={mockDetailItemData}
eventId={eventId}
isLoading={false}
onUpdateColumns={jest.fn()}
timelineId="test"
toggleColumn={toggleColumn}
Expand Down Expand Up @@ -161,7 +156,6 @@ describe('EventFieldsBrowser', () => {
columnHeaders={defaultHeaders}
data={mockDetailItemData}
eventId={mockDetailItemDataId}
isLoading={false}
onUpdateColumns={jest.fn()}
timelineId="test"
toggleColumn={jest.fn()}
Expand Down Expand Up @@ -189,7 +183,6 @@ describe('EventFieldsBrowser', () => {
columnHeaders={defaultHeaders}
data={mockDetailItemData}
eventId={mockDetailItemDataId}
isLoading={false}
onUpdateColumns={jest.fn()}
timelineId="test"
toggleColumn={jest.fn()}
Expand All @@ -214,7 +207,6 @@ describe('EventFieldsBrowser', () => {
columnHeaders={defaultHeaders}
data={mockDetailItemData}
eventId={mockDetailItemDataId}
isLoading={false}
onUpdateColumns={jest.fn()}
timelineId="test"
toggleColumn={jest.fn()}
Expand All @@ -239,7 +231,6 @@ describe('EventFieldsBrowser', () => {
columnHeaders={defaultHeaders}
data={mockDetailItemData}
eventId={mockDetailItemDataId}
isLoading={false}
onUpdateColumns={jest.fn()}
timelineId="test"
toggleColumn={jest.fn()}
Expand Down
16 changes: 2 additions & 14 deletions x-pack/legacy/plugins/siem/public/components/event_details/event_fields_browser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
EuiInMemoryTable,
} from '@elastic/eui';
import * as React from 'react';
import { pure } from 'recompose';

import { ColumnHeader } from '../timeline/body/column_headers/column_header';
import { BrowserFields, getAllFieldsByName } from '../../containers/source';
Expand All @@ -25,24 +24,14 @@ interface Props {
columnHeaders: ColumnHeader[];
data: DetailItem[];
eventId: string;
isLoading: boolean;
onUpdateColumns: OnUpdateColumns;
timelineId: string;
toggleColumn: (column: ColumnHeader) => void;
}

/** Renders a table view or JSON view of the `ECS` `data` */
export const EventFieldsBrowser = pure<Props>(
({
browserFields,
columnHeaders,
data,
eventId,
isLoading,
onUpdateColumns,
timelineId,
toggleColumn,
}) => {
export const EventFieldsBrowser = React.memo<Props>(
({ browserFields, columnHeaders, data, eventId, onUpdateColumns, timelineId, toggleColumn }) => {
const fieldsByName = getAllFieldsByName(browserFields);
return (
<EuiInMemoryTable
Expand All @@ -57,7 +46,6 @@ export const EventFieldsBrowser = pure<Props>(
browserFields,
columnHeaders,
eventId,
isLoading,
onUpdateColumns,
timelineId,
toggleColumn,
Expand Down
4 changes: 0 additions & 4 deletions x-pack/legacy/plugins/siem/public/components/event_details/stateful_event_details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ interface Props {
columnHeaders: ColumnHeader[];
data: DetailItem[];
id: string;
isLoading: boolean;
onUpdateColumns: OnUpdateColumns;
timelineId: string;
toggleColumn: (column: ColumnHeader) => void;
Expand All @@ -45,19 +44,16 @@ export class StatefulEventDetails extends React.PureComponent<Props, State> {
columnHeaders,
data,
id,
isLoading,
onUpdateColumns,
timelineId,
toggleColumn,
} = this.props;

return (
<EventDetails
browserFields={browserFields}
columnHeaders={columnHeaders}
data={data}
id={id}
isLoading={isLoading}
view={this.state.view}
onUpdateColumns={onUpdateColumns}
onViewSelected={this.onViewSelected}
Expand Down
2 changes: 0 additions & 2 deletions x-pack/legacy/plugins/siem/public/components/fields_browser/categories_pane.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ describe('CategoriesPane', () => {
browserFields={mockBrowserFields}
filteredBrowserFields={mockBrowserFields}
width={CATEGORY_PANE_WIDTH}
isLoading={false}
onCategorySelected={jest.fn()}
onUpdateColumns={jest.fn()}
selectedCategoryId={''}
Expand All @@ -45,7 +44,6 @@ describe('CategoriesPane', () => {
browserFields={mockBrowserFields}
filteredBrowserFields={{}}
width={CATEGORY_PANE_WIDTH}
isLoading={false}
onCategorySelected={jest.fn()}
onUpdateColumns={jest.fn()}
selectedCategoryId={''}
Expand Down
11 changes: 3 additions & 8 deletions x-pack/legacy/plugins/siem/public/components/fields_browser/categories_pane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@

import { EuiInMemoryTable, EuiTitle } from '@elastic/eui';
import * as React from 'react';
import { pure } from 'recompose';
import styled from 'styled-components';

import { BrowserFields } from '../../containers/source';
Expand Down Expand Up @@ -35,10 +34,7 @@ const Title = styled(EuiTitle)`

Title.displayName = 'Title';

type Props = Pick<
FieldBrowserProps,
'browserFields' | 'isLoading' | 'timelineId' | 'onUpdateColumns'
> & {
type Props = Pick<FieldBrowserProps, 'browserFields' | 'timelineId' | 'onUpdateColumns'> & {
/**
* A map of categoryId -> metadata about the fields in that category,
* filtered such that the name of every field in the category includes
Expand All @@ -55,11 +51,11 @@ type Props = Pick<
/** The width of the categories pane */
width: number;
};
export const CategoriesPane = pure<Props>(

export const CategoriesPane = React.memo<Props>(
({
browserFields,
filteredBrowserFields,
isLoading,
onCategorySelected,
onUpdateColumns,
selectedCategoryId,
Expand All @@ -76,7 +72,6 @@ export const CategoriesPane = pure<Props>(
columns={getCategoryColumns({
browserFields,
filteredBrowserFields,
isLoading,
onCategorySelected,
onUpdateColumns,
selectedCategoryId,
Expand Down
3 changes: 0 additions & 3 deletions x-pack/legacy/plugins/siem/public/components/fields_browser/category.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ describe('Category', () => {
categoryId: selectedCategoryId,
columnHeaders: [],
highlight: '',
isLoading: false,
onUpdateColumns: jest.fn(),
timelineId,
toggleColumn: jest.fn(),
Expand Down Expand Up @@ -66,7 +65,6 @@ describe('Category', () => {
categoryId: selectedCategoryId,
columnHeaders: [],
highlight: '',
isLoading: false,
onUpdateColumns: jest.fn(),
timelineId,
toggleColumn: jest.fn(),
Expand Down Expand Up @@ -99,7 +97,6 @@ describe('Category', () => {
categoryId: selectedCategoryId,
columnHeaders: [],
highlight: '',
isLoading: false,
onUpdateColumns: jest.fn(),
timelineId,
toggleColumn: jest.fn(),
Expand Down
6 changes: 0 additions & 6 deletions x-pack/legacy/plugins/siem/public/components/fields_browser/category_columns.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ describe('getCategoryColumns', () => {
browserFields={mockBrowserFields}
filteredBrowserFields={mockBrowserFields}
width={CATEGORY_PANE_WIDTH}
isLoading={false}
onCategorySelected={jest.fn()}
onUpdateColumns={jest.fn()}
selectedCategoryId={''}
Expand All @@ -50,7 +49,6 @@ describe('getCategoryColumns', () => {
browserFields={mockBrowserFields}
filteredBrowserFields={mockBrowserFields}
width={CATEGORY_PANE_WIDTH}
isLoading={false}
onCategorySelected={jest.fn()}
onUpdateColumns={jest.fn()}
selectedCategoryId={''}
Expand All @@ -75,7 +73,6 @@ describe('getCategoryColumns', () => {
browserFields={mockBrowserFields}
filteredBrowserFields={mockBrowserFields}
width={CATEGORY_PANE_WIDTH}
isLoading={false}
onCategorySelected={jest.fn()}
onUpdateColumns={jest.fn()}
selectedCategoryId={''}
Expand Down Expand Up @@ -103,7 +100,6 @@ describe('getCategoryColumns', () => {
browserFields={mockBrowserFields}
filteredBrowserFields={mockBrowserFields}
width={CATEGORY_PANE_WIDTH}
isLoading={false}
onCategorySelected={jest.fn()}
onUpdateColumns={jest.fn()}
selectedCategoryId={selectedCategoryId}
Expand All @@ -127,7 +123,6 @@ describe('getCategoryColumns', () => {
browserFields={mockBrowserFields}
filteredBrowserFields={mockBrowserFields}
width={CATEGORY_PANE_WIDTH}
isLoading={false}
onCategorySelected={jest.fn()}
onUpdateColumns={jest.fn()}
selectedCategoryId={selectedCategoryId}
Expand All @@ -153,7 +148,6 @@ describe('getCategoryColumns', () => {
browserFields={mockBrowserFields}
filteredBrowserFields={mockBrowserFields}
width={CATEGORY_PANE_WIDTH}
isLoading={false}
onCategorySelected={onCategorySelected}
onUpdateColumns={jest.fn()}
selectedCategoryId={selectedCategoryId}
Expand Down
Loading