Skip to content

Commit

Permalink
[SIEM] Table Styles & Markup Tweaks (#46300) (#47131)
Browse files Browse the repository at this point in the history 
* restore conditional space before AS number

* touchup table widths and text

* adjust datepicker width

* refactor matchMedia; set bp to above mbp rez

* timeline table body refactor, first pass

* TruncatableText: rm “width”, added “truncated”

* cleanup imports

* cleanup styles

* rm size prop

* swap out div? prob need to fix ref

* restore truncation in timeline

* think i have text overflow and tooltips happy now

* light clean up

* single overflow scrolling element

* use polished for hex in rgba needs

* simplify body markup

* events table header poc

* close button fixes

* improve sort indicator position

* drag handle updates

* fix fields browser positioning

* apply aria roles

* fix blown out table width

* localize sorting onClick to header text

* correct key placement

* prevent hover and click for unsortable and add btn

* rm btn for non aggregatable col headers

* change width/height prop names to avoid html attr

* fix loading alignment

* account for action cell width when one action

* clean up trGroup organization

* imports cleanup

* fix types and skeleton rows/cells poc

* new skeleton row comp

* fix column heads not dragging

* supplement row indentation

* move widths out of styled components for perf

* inline dynamic width

* account for inline styles with dnd

* cleanup

* tweak in-page events table styling for consistency

* cleanup

* make compressed for consistency

* cleanup

* update jest tests + change matchMedia to css mq

* fix missing grab cursor in IE11

* fix action td group width in IE11

* fix columns menu positioning in IE11

* fix collapsing notes in timelines table in IE11

* decouple from DroppableWrapper to prevent issues

* update snapshots

* more specific selector

* rm show prop

* add truncate to shouldComponentUpdate

* bulk up `HeaderPanel` unit tests

* correct conditional styles and add some more tests

* improve SkeletonRow unit tests

* change for loop to map

* switch from pure to React.memo

* make SkeletonRow cellCount dynamic

* rm comments

* fix buttons not being draggable for col headers

* fix for safari position sticky + overflow auto bug

* correct type errors

* correct field browser overlap

* missing semicolon
  • Loading branch information
@MichaelMarcialis
MichaelMarcialis authored Oct 2, 2019
1 parent 7cb0ece commit d2cddc9
Show file tree
Hide file tree
Showing 104 changed files with 3,715 additions and 3,930 deletions.
9 changes: 3 additions & 6 deletions x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { MockedProvider } from 'react-apollo/test-utils';
import { mockBrowserFields, mocksSource } from '../../containers/source/mock';
import { TestProviders } from '../../mock';
import { mockDataProviders } from '../timeline/data_providers/mock/mock_data_providers';

import { DragDropContextWrapper } from './drag_drop_context_wrapper';
import { DraggableWrapper } from './draggable_wrapper';

Expand Down Expand Up @@ -50,14 +49,12 @@ describe('DraggableWrapper', () => {
});

describe('text truncation styling', () => {
test('it applies text truncation styling when a width IS specified (implicit: and the user is not dragging)', () => {
const width = '100px';

test('it applies text truncation styling when truncate IS specified (implicit: and the user is not dragging)', () => {
const wrapper = mount(
<TestProviders>
<MockedProvider mocks={mocksSource} addTypename={false}>
<DragDropContextWrapper browserFields={mockBrowserFields}>
<DraggableWrapper dataProvider={dataProvider} width={width} render={() => message} />
<DraggableWrapper dataProvider={dataProvider} render={() => message} truncate />
</DragDropContextWrapper>
</MockedProvider>
</TestProviders>
Expand All @@ -68,7 +65,7 @@ describe('DraggableWrapper', () => {
);
});

test('it does NOT apply text truncation styling when a width is NOT specified', () => {
test('it does NOT apply text truncation styling when truncate is NOT specified', () => {
const wrapper = mount(
<TestProviders>
<MockedProvider mocks={mocksSource} addTypename={false}>
Expand Down
96 changes: 43 additions & 53 deletions x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { dragAndDropActions } from '../../store/drag_and_drop';
import { DataProvider } from '../timeline/data_providers/data_provider';
import { STATEFUL_EVENT_CSS_CLASS_NAME } from '../timeline/helpers';
import { TruncatableText } from '../truncatable_text';

import { getDraggableId, getDroppableId } from './helpers';

// As right now, we do not know what we want there, we will keep it as a placeholder
Expand All @@ -29,41 +28,28 @@ export const DragEffects = styled.div``;
DragEffects.displayName = 'DragEffects';

const Wrapper = styled.div`
.euiPageBody & {
display: inline-block;
}
display: inline-block;
max-width: 100%;
`;

Wrapper.displayName = 'Wrapper';

const ProviderContainer = styled.div<{ isDragging: boolean }>`
${({ theme, isDragging }) => css`
// ALL DRAGGABLES
&,
&::before,
&::after {
transition: background ${theme.eui.euiAnimSpeedFast} ease,
color ${theme.eui.euiAnimSpeedFast} ease;
}
.euiBadge,
.euiBadge__text {
cursor: grab;
}
// PAGE DRAGGABLES
${!isDragging &&
`
.euiPageBody & {
z-index: ${theme.eui.euiZLevel0} !important;
}
{
& {
border-radius: 2px;
padding: 0 4px 0 8px;
position: relative;
z-index: ${theme.eui.euiZLevel0} !important;
&::before {
background-image: linear-gradient(
Expand All @@ -86,6 +72,14 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>`
}
}
&:hover {
&,
& .euiBadge,
& .euiBadge__text {
cursor: move; //Fallback for IE11
cursor: grab;
}
}
.${STATEFUL_EVENT_CSS_CLASS_NAME}:hover &,
tr:hover & {
Expand All @@ -112,7 +106,8 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>`
background-color: ${theme.eui.euiColorPrimary};
&,
& a {
& a,
& a:hover {
color: ${theme.eui.euiColorEmptyShade};
}
Expand All @@ -131,9 +126,10 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>`
${isDragging &&
`
.euiPageBody & {
& {
z-index: ${theme.eui.euiZLevel9} !important;
`}
}
`}
`}
`;

Expand All @@ -147,7 +143,7 @@ interface OwnProps {
provided: DraggableProvided,
state: DraggableStateSnapshot
) => React.ReactNode;
width?: string;
truncate?: boolean;
}

interface DispatchProps {
Expand All @@ -166,10 +162,10 @@ type Props = OwnProps & DispatchProps;
* data provider associated with the item being dropped
*/
class DraggableWrapperComponent extends React.Component<Props> {
public shouldComponentUpdate = ({ dataProvider, render, width }: Props) =>
public shouldComponentUpdate = ({ dataProvider, render, truncate }: Props) =>
isEqual(dataProvider, this.props.dataProvider) &&
render !== this.props.render &&
width === this.props.width
truncate === this.props.truncate
? false
: true;

Expand All @@ -186,7 +182,7 @@ class DraggableWrapperComponent extends React.Component<Props> {
}

public render() {
const { dataProvider, render, width } = this.props;
const { dataProvider, render, truncate } = this.props;

return (
<Wrapper data-test-subj="draggableWrapperDiv">
Expand All @@ -198,34 +194,28 @@ class DraggableWrapperComponent extends React.Component<Props> {
index={0}
key={getDraggableId(dataProvider.id)}
>
{(provided, snapshot) => {
return (
<ProviderContainer
{...provided.draggableProps}
{...provided.dragHandleProps}
innerRef={provided.innerRef}
data-test-subj="providerContainer"
isDragging={snapshot.isDragging}
style={{
...provided.draggableProps.style,
}}
>
{width != null && !snapshot.isDragging ? (
<TruncatableText
data-test-subj="draggable-truncatable-content"
size="xs"
width={width}
>
{render(dataProvider, provided, snapshot)}
</TruncatableText>
) : (
<span data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}>
{render(dataProvider, provided, snapshot)}
</span>
)}
</ProviderContainer>
);
}}
{(provided, snapshot) => (
<ProviderContainer
{...provided.draggableProps}
{...provided.dragHandleProps}
innerRef={provided.innerRef}
data-test-subj="providerContainer"
isDragging={snapshot.isDragging}
style={{
...provided.draggableProps.style,
}}
>
{truncate && !snapshot.isDragging ? (
<TruncatableText data-test-subj="draggable-truncatable-content">
{render(dataProvider, provided, snapshot)}
</TruncatableText>
) : (
<span data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}>
{render(dataProvider, provided, snapshot)}
</span>
)}
</ProviderContainer>
)}
</Draggable>
{droppableProvided.placeholder}
</div>
Expand Down
13 changes: 5 additions & 8 deletions x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { rgba } from 'polished';
import * as React from 'react';
import { Droppable } from 'react-beautiful-dnd';
import { pure } from 'recompose';
import styled from 'styled-components';

import { THIRTY_PERCENT_ALPHA_HEX_SUFFIX, TWENTY_PERCENT_ALPHA_HEX_SUFFIX } from './helpers';

interface Props {
children?: React.ReactNode;
droppableId: string;
Expand All @@ -34,22 +33,22 @@ const ReactDndDropTarget = styled.div<{ isDraggingOver: boolean; height: string
? `
.drop-and-provider-timeline {
&:hover {
background-color: ${props.theme.eui.euiColorSuccess}${THIRTY_PERCENT_ALPHA_HEX_SUFFIX};
background-color: ${rgba(props.theme.eui.euiColorSuccess, 0.3)};
}
}
.drop-and-provider-timeline:hover {
background-color: ${props.theme.eui.euiColorSuccess}${THIRTY_PERCENT_ALPHA_HEX_SUFFIX};
background-color: ${rgba(props.theme.eui.euiColorSuccess, 0.3)};
}
> div.timeline-drop-area-empty {
color: ${props.theme.eui.euiColorSuccess}
background-color: ${props.theme.eui.euiColorSuccess}${TWENTY_PERCENT_ALPHA_HEX_SUFFIX};
background-color: ${rgba(props.theme.eui.euiColorSuccess, 0.2)};
& .euiTextColor--subdued {
color: ${props.theme.eui.euiColorSuccess};
}
}
> div.timeline-drop-area {
background-color: ${props.theme.eui.euiColorSuccess}${TWENTY_PERCENT_ALPHA_HEX_SUFFIX};
background-color: ${rgba(props.theme.eui.euiColorSuccess, 0.2)};
.provider-item-filter-container div:first-child{
// Override dragNdrop beautiful so we do not have our droppable moving around for no good reason
transform: none !important;
Expand Down Expand Up @@ -86,7 +85,6 @@ const ReactDndDropTarget = styled.div<{ isDraggingOver: boolean; height: string
}
}
`;

ReactDndDropTarget.displayName = 'ReactDndDropTarget';

export const DroppableWrapper = pure<Props>(
Expand Down Expand Up @@ -118,5 +116,4 @@ export const DroppableWrapper = pure<Props>(
</Droppable>
)
);

DroppableWrapper.displayName = 'DroppableWrapper';
9 changes: 0 additions & 9 deletions x-pack/legacy/plugins/siem/public/components/drag_and_drop/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,12 +224,3 @@ export const DRAG_TYPE_FIELD = 'drag-type-field';

/** This class is added to the document body while dragging */
export const IS_DRAGGING_CLASS_NAME = 'is-dragging';

/** A hex alpha channel suffix representing 10% for the `AA` in `#RRGGBBAA` */
export const TEN_PERCENT_ALPHA_HEX_SUFFIX = '1A';

/** A hex alpha channel suffix representing 20% for the `AA` in `#RRGGBBAA` */
export const TWENTY_PERCENT_ALPHA_HEX_SUFFIX = '33';

/** A hex alpha channel suffix representing 30% for the `AA` in `#RRGGBBAA` */
export const THIRTY_PERCENT_ALPHA_HEX_SUFFIX = '4d';
67 changes: 25 additions & 42 deletions x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,54 +4,37 @@
* you may not use this file except in compliance with the Elastic License.
*/

import {
EuiBadge,
EuiFlexGroup,
EuiFlexItem,
// @ts-ignore
EuiHighlight,
} from '@elastic/eui';
import { rgba } from 'polished';
import * as React from 'react';
import { pure } from 'recompose';
import styled from 'styled-components';

const FieldBadgeFlexGroup = styled(EuiFlexGroup)`
height: 38px;
`;

FieldBadgeFlexGroup.displayName = 'FieldBadgeFlexGroup';

const FieldBadgeFlexItem = styled(EuiFlexItem)`
font-weight: bold;
`;

FieldBadgeFlexItem.displayName = 'FieldBadgeFlexItem';

/**
* The name of a (draggable) field
*/
export const FieldNameContainer = styled.div`
padding: 5px;
&:hover {
transition: background-color 0.7s ease;
background-color: #000;
color: #fff;
}
import styled, { css } from 'styled-components';

const Field = styled.div`
${({ theme }) => css`
background-color: ${theme.eui.euiColorEmptyShade};
border: ${theme.eui.euiBorderThin};
box-shadow: 0 2px 2px -1px ${rgba(theme.eui.euiColorMediumShade, 0.3)},
0 1px 5px -2px ${rgba(theme.eui.euiColorMediumShade, 0.3)};
font-size: ${theme.eui.euiFontSizeXS};
font-weight: ${theme.eui.euiFontWeightSemiBold};
line-height: ${theme.eui.euiLineHeight};
padding: ${theme.eui.paddingSizes.xs};
`}
`;

FieldNameContainer.displayName = 'FieldNameContainer';
Field.displayName = 'Field';

/**
* Renders a field (e.g. `event.action`) as a draggable badge
*/
export const DraggableFieldBadge = pure<{ fieldId: string }>(({ fieldId }) => (
<EuiBadge color="#000">
<FieldBadgeFlexGroup alignItems="center" justifyContent="center" gutterSize="none">
<FieldBadgeFlexItem data-test-subj="field" grow={false}>
{fieldId}
</FieldBadgeFlexItem>
</FieldBadgeFlexGroup>
</EuiBadge>
));

// Passing the styles directly to the component because the width is
// being calculated and is recommended by Styled Components for performance
// https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
export const DraggableFieldBadge = pure<{ fieldId: string; fieldWidth?: string }>(
({ fieldId, fieldWidth }) => (
<Field data-test-subj="field" style={{ width: fieldWidth }}>
{fieldId}
</Field>
)
);
DraggableFieldBadge.displayName = 'DraggableFieldBadge';
Loading

0 comments on commit d2cddc9

Please sign in to comment.