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

[RAC] [TGrid] Field browser implemented in EuiDataGrid toolbar #105207

Merged
merged 25 commits into from
Jul 20, 2021
Merged

[RAC] [TGrid] Field browser implemented in EuiDataGrid toolbar #105207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
ab88265
tGid header using EuiDataGrid
semd Jul 12, 2021
5a1f08b
useFetchIndex migrated and column_headers refactor
semd Jul 14, 2021
2a0e52b
removed useless mock
semd Jul 14, 2021
9102d1d
add badges translations
semd Jul 14, 2021
7f43100
i18n translations keys fixed
semd Jul 14, 2021
caf2b0a
code format
semd Jul 14, 2021
ebd472a
filter default columns not present in field browser
semd Jul 14, 2021
8de5d13
Merge branch 'master' into timeline-euidatagrid
kibanamachine Jul 14, 2021
9c02b48
reset button to initial columns
semd Jul 15, 2021
6509b62
cleaning
semd Jul 15, 2021
9262c50
dependencies moved
semd Jul 15, 2021
11dc88b
fix functional test with missing data service
semd Jul 15, 2021
90064dc
remove unused code (unrelated)
semd Jul 16, 2021
0ee2c10
fieldBrowser integration with security solutions timeline
semd Jul 16, 2021
1166a22
Merge remote-tracking branch 'upstream/master' into timeline-euidatagrid
semd Jul 16, 2021
c99842d
Merge branch 'master' into timeline-euidatagrid
kibanamachine Jul 16, 2021
0594c4e
lint and translations cleaned
semd Jul 19, 2021
300a245
Merge remote-tracking branch 'upstream/master' into timeline-euidatagrid
semd Jul 19, 2021
b98ee1a
timeline toolbar removed for merge & some test fixes
semd Jul 19, 2021
834ffa8
Merge branch 'timeline-euidatagrid' of https://github.com/semd/kibana…
semd Jul 19, 2021
68beccc
type fix
semd Jul 19, 2021
0185881
type fixes
semd Jul 19, 2021
3bcc660
timeline static default colums
semd Jul 19, 2021
6726db7
limit size temporary increase
semd Jul 19, 2021
38d5a79
limit size temporary increase
semd Jul 19, 2021
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
2 changes: 1 addition & 1 deletion packages/kbn-optimizer/limits.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ pageLoadAssetSize:
dataVisualizer: 27530
banners: 17946
mapsEms: 26072
timelines: 251886
timelines: 330000
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't like how big this is getting, but between #105941 and #105207 (comment) I understand this is just some debt we're taking on temporarily.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Exactly, thanks

screenshotMode: 17856
visTypePie: 35583
expressionRevealImage: 25675
Expand Down
14 changes: 0 additions & 14 deletions x-pack/plugins/security_solution/cypress/integration/timelines/fields_browser.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
FIELDS_BROWSER_FIELDS_COUNT,
FIELDS_BROWSER_HOST_CATEGORIES_COUNT,
FIELDS_BROWSER_HOST_GEO_CITY_NAME_HEADER,
FIELDS_BROWSER_HOST_GEO_COUNTRY_NAME_HEADER,
FIELDS_BROWSER_HEADER_HOST_GEO_CONTINENT_NAME_HEADER,
FIELDS_BROWSER_MESSAGE_HEADER,
FIELDS_BROWSER_SELECTED_CATEGORY_TITLE,
Expand All @@ -24,7 +23,6 @@ import { cleanKibana } from '../../tasks/common';
import {
addsHostGeoCityNameToTimeline,
addsHostGeoContinentNameToTimeline,
addsHostGeoCountryNameToTimelineDraggingIt,
clearFieldsBrowser,
closeFieldsBrowser,
filterFieldsBrowser,
Expand Down Expand Up @@ -156,18 +154,6 @@ describe('Fields Browser', () => {
cy.get(FIELDS_BROWSER_HOST_GEO_CITY_NAME_HEADER).should('exist');
});

it('adds a field to the timeline when the user drags and drops a field', () => {
const filterInput = 'host.geo.c';

filterFieldsBrowser(filterInput);

cy.get(FIELDS_BROWSER_HOST_GEO_COUNTRY_NAME_HEADER).should('not.exist');

addsHostGeoCountryNameToTimelineDraggingIt();

cy.get(FIELDS_BROWSER_HOST_GEO_COUNTRY_NAME_HEADER).should('exist');
});

it('resets all fields in the timeline when `Reset Fields` is clicked', () => {
const filterInput = 'host.geo.c';

Expand Down
2 changes: 1 addition & 1 deletion ...k/plugins/security_solution/public/common/components/events_viewer/events_viewer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ describe('EventsViewer', () => {
<StatefulEventsViewer {...testProps} />
</TestProviders>
);
expect(wrapper.find(`[data-test-subj="show-field-browser"]`).first().exists()).toBe(true);
expect(wrapper.find(`[data-test-subj="field-browser"]`).first().exists()).toBe(true);
});

test('it renders the footer containing the pagination', () => {
Expand Down
5 changes: 0 additions & 5 deletions x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,11 +181,6 @@ export const getBreadcrumbsForRoute = (
}

if (isAdminRoutes(spyState) && object.navTabs) {
const tempNav: SearchNavTab = { urlKey: 'administration', isDetailPage: false };
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you really wanted to delete that

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, sorry I forgot to explain this change here. It is an unrelated cleaning from this @stephmilovic comment: #103927 (comment)

let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
if (spyState.tabName != null) {
urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
}
return [siemRootBreadcrumb, ...getAdminBreadcrumbs(spyState)];
}

Expand Down
2 changes: 2 additions & 0 deletions x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
import { ISearchStart } from '../../../../../../../src/plugins/data/public';
import { dataPluginMock } from '../../../../../../../src/plugins/data/public/mocks';
import { getTimelineTemplate } from '../../../timelines/containers/api';
import { defaultHeaders } from '../../../timelines/components/timeline/body/column_headers/default_headers';

jest.mock('../../../timelines/containers/api', () => ({
getTimelineTemplate: jest.fn(),
Expand Down Expand Up @@ -139,6 +140,7 @@ describe('alert actions', () => {
initialWidth: 180,
},
],
defaultColumns: defaultHeaders,
dataProviders: [],
dateRange: {
end: '2018-11-05T19:03:25.937Z',
Expand Down
203 changes: 7 additions & 196 deletions x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_items.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,71 +5,21 @@
* 2.0.
*/

import {
EuiCheckbox,
EuiIcon,
EuiToolTip,
EuiFlexGroup,
EuiFlexItem,
EuiScreenReaderOnly,
} from '@elastic/eui';
import { isEmpty, uniqBy } from 'lodash/fp';
import { isEmpty } from 'lodash/fp';
import React, { useCallback, useRef, useState } from 'react';
import { Draggable } from 'react-beautiful-dnd';
import styled from 'styled-components';

import { DRAGGABLE_KEYBOARD_WRAPPER_CLASS_NAME } from '@kbn/securitysolution-t-grid';
import { BrowserField, BrowserFields } from '../../../common/containers/source';
import { DragEffects } from '../../../common/components/drag_and_drop/draggable_wrapper';
import { DroppableWrapper } from '../../../common/components/drag_and_drop/droppable_wrapper';
import {
DRAG_TYPE_FIELD,
DRAGGABLE_KEYBOARD_WRAPPER_CLASS_NAME,
getDraggableFieldId,
getDroppableId,
} from '../../../common/components/drag_and_drop/helpers';
import { DraggableFieldBadge } from '../../../common/components/draggables/field_badge';
import { getEmptyValue } from '../../../common/components/empty_value';
import {
getColumnsWithTimestamp,
getExampleText,
getIconFromType,
} from '../../../common/components/event_details/helpers';
import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers';
import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/constants';
import { OnUpdateColumns } from '../timeline/events';
import { TruncatableText } from '../../../common/components/truncatable_text';
} from '@kbn/securitysolution-t-grid';
import type { BrowserFields } from '../../../common/containers/source';
import { getColumnsWithTimestamp } from '../../../common/components/event_details/helpers';
import type { OnUpdateColumns } from '../timeline/events';
import { FieldName } from './field_name';
import * as i18n from './translations';
import { getAlertColumnHeader } from './helpers';
import { ColumnHeaderOptions } from '../../../../common';
import type { ColumnHeaderOptions } from '../../../../common';
import { useKibana } from '../../../common/lib/kibana';

const TypeIcon = styled(EuiIcon)`
margin: 0 4px;
position: relative;
top: -1px;
`;

TypeIcon.displayName = 'TypeIcon';

export const Description = styled.span`
user-select: text;
width: 400px;
`;

Description.displayName = 'Description';

/**
* An item rendered in the table
*/
export interface FieldItem {
ariaRowindex?: number;
checkbox: React.ReactNode;
description: React.ReactNode;
field: React.ReactNode;
fieldId: string;
}

const DraggableFieldsBrowserFieldComponent = ({
browserFields,
categoryId,
Expand Down Expand Up @@ -191,142 +141,3 @@ const DraggableFieldsBrowserFieldComponent = ({

export const DraggableFieldsBrowserField = React.memo(DraggableFieldsBrowserFieldComponent);
DraggableFieldsBrowserField.displayName = 'DraggableFieldsBrowserFieldComponent';

/**
* Returns the draggable fields, values, and descriptions shown when a user expands an event
*/
export const getFieldItems = ({
browserFields,
category,
categoryId,
columnHeaders,
highlight = '',
onUpdateColumns,
timelineId,
toggleColumn,
}: {
browserFields: BrowserFields;
category: Partial<BrowserField>;
categoryId: string;
columnHeaders: ColumnHeaderOptions[];
highlight?: string;
timelineId: string;
toggleColumn: (column: ColumnHeaderOptions) => void;
onUpdateColumns: OnUpdateColumns;
}): FieldItem[] =>
uniqBy('name', [
...Object.values(category != null && category.fields != null ? category.fields : {}),
]).map((field) => ({
checkbox: (
<EuiToolTip content={i18n.VIEW_COLUMN(field.name ?? '')}>
<EuiCheckbox
aria-label={i18n.VIEW_COLUMN(field.name ?? '')}
checked={columnHeaders.findIndex((c) => c.id === field.name) !== -1}
data-test-subj={`field-${field.name}-checkbox`}
data-colindex={1}
id={field.name ?? ''}
onChange={() =>
toggleColumn({
columnHeaderType: defaultColumnHeaderType,
id: field.name ?? '',
initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
...getAlertColumnHeader(timelineId, field.name ?? ''),
})
}
/>
</EuiToolTip>
),
field: (
<EuiFlexGroup alignItems="center" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiToolTip content={field.type}>
<TypeIcon
data-test-subj={`field-${field.name}-icon`}
type={getIconFromType(field.type ?? null)}
/>
</EuiToolTip>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<DroppableWrapper
droppableId={getDroppableId(
`field-browser-field-items-field-droppable-wrapper-${timelineId}-${categoryId}-${field.name}`
)}
key={`field-browser-field-items-field-droppable-wrapper-${timelineId}-${categoryId}-${field.name}`}
isDropDisabled={true}
type={DRAG_TYPE_FIELD}
renderClone={(provided) => (
<div
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
style={{ ...provided.draggableProps.style, zIndex: 9999 }}
tabIndex={-1}
>
<DragEffects>
<DraggableFieldBadge fieldId={field.name ?? ''} />
</DragEffects>
</div>
)}
>
<DraggableFieldsBrowserField
browserFields={browserFields}
categoryId={categoryId}
fieldName={field.name ?? ''}
fieldCategory={field.category ?? ''}
highlight={highlight}
onUpdateColumns={onUpdateColumns}
timelineId={timelineId}
toggleColumn={toggleColumn}
/>
</DroppableWrapper>
</EuiFlexItem>
</EuiFlexGroup>
),
description: (
<div data-colindex={3} tabIndex={0}>
<EuiToolTip content={field.description}>
<>
<EuiScreenReaderOnly data-test-subj="descriptionForScreenReaderOnly">
<p>{i18n.DESCRIPTION_FOR_FIELD(field.name ?? '')}</p>
</EuiScreenReaderOnly>
<TruncatableText>
<Description data-test-subj={`field-${field.name}-description`}>
{`${field.description ?? getEmptyValue()} ${getExampleText(field.example)}`}
</Description>
</TruncatableText>
</>
</EuiToolTip>
</div>
),
fieldId: field.name ?? '',
}));

/**
* Returns a table column template provided to the `EuiInMemoryTable`'s
* `columns` prop
*/
export const getFieldColumns = () => [
{
field: 'checkbox',
name: '',
render: (checkbox: React.ReactNode, _: FieldItem) => checkbox,
sortable: false,
width: '25px',
},
{
field: 'field',
name: i18n.FIELD,
render: (field: React.ReactNode, _: FieldItem) => field,
sortable: false,
width: '225px',
},
{
field: 'description',
name: i18n.DESCRIPTION,
render: (description: React.ReactNode, _: FieldItem) => description,
sortable: false,
truncateText: true,
width: '400px',
},
];
Loading