Skip to content

[Security Solution][Resolver] Replace Selectable popover with badges #76997

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

Merged
merged 13 commits into from
Sep 10, 2020
Merged

[Security Solution][Resolver] Replace Selectable popover with badges #76997

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
93d584d
WIP replace selectable with badges
Sep 8, 2020
f4c6008
WIP pointer events
Sep 9, 2020
eaad4c0
WIP, button/li styles
Sep 9, 2020
fde32e4
WIP replace test subject & style changes
Sep 10, 2020
bf63cb0
a11y features
Sep 10, 2020
83706a2
Focus states
Sep 10, 2020
76e745f
linted
Sep 10, 2020
f0d0ad9
aria fix
Sep 10, 2020
a8fc00a
R Austin: switch to locale compare
Sep 10, 2020
9d63c46
M Olorunnisola: change component name
Sep 10, 2020
18598d2
M Olorunnisola: Move to styled components
Sep 10, 2020
3895726
Merge branch 'master' into resolver/replace-euiselectable
elasticmachine Sep 10, 2020
e5c3524
J Buttner: remove unnecessary const
Sep 10, 2020
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
4 changes: 3 additions & 1 deletion x-pack/plugins/security_solution/public/resolver/view/assets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ type ResolverColorNames =
| 'resolverBackground'
| 'resolverEdge'
| 'resolverEdgeText'
| 'resolverBreadcrumbBackground';
| 'resolverBreadcrumbBackground'
| 'pillStroke';

type ColorMap = Record<ResolverColorNames, string>;
interface NodeStyleConfig {
Expand Down Expand Up @@ -438,6 +439,7 @@ export const useResolverTheme = (): {
resolverBreadcrumbBackground: theme.euiColorLightestShade,
resolverEdgeText: getThemedOption(theme.euiColorDarkShade, theme.euiColorFullShade),
triggerBackingFill: `${theme.euiColorDanger}${getThemedOption('0F', '1F')}`,
pillStroke: theme.euiColorLightShade,
};

const nodeAssets: NodeStyleMap = {
Expand Down
13 changes: 11 additions & 2 deletions x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const StyledActionsContainer = styled.div<StyledActionsContainer>`
position: absolute;
top: ${(props) => `${props.topPct}%`};
width: auto;
pointer-events: all;
`;

interface StyledDescriptionText {
Expand All @@ -61,6 +62,11 @@ const StyledDescriptionText = styled.div<StyledDescriptionText>`
width: fit-content;
`;

const StyledOuterGroup = styled.g`
Copy link
Contributor Author

@bkimmel bkimmel Sep 10, 2020

Choose a reason for hiding this comment

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

A styled G 💯

Copy link
Contributor

@michaelolo24 michaelolo24 Sep 10, 2020

Choose a reason for hiding this comment

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

Haha, love it 😂

fill: none;
pointer-events: visiblePainted;
`;

/**
* An artifact that represents a process node and the things associated with it in the Resolver
*/
Expand Down Expand Up @@ -329,6 +335,7 @@ const UnstyledProcessEventDot = React.memo(
}
role="img"
aria-labelledby={labelHTMLID}
fill="none"
style={{
display: 'block',
width: '100%',
Expand All @@ -338,9 +345,10 @@ const UnstyledProcessEventDot = React.memo(
left: '0',
outline: 'transparent',
border: 'none',
pointerEvents: 'none',
}}
>
<g>
<StyledOuterGroup>
<use
xlinkHref={`#${SymbolIds.processCubeActiveBacking}`}
fill={backingFill} // Only visible on hover
Expand Down Expand Up @@ -372,7 +380,7 @@ const UnstyledProcessEventDot = React.memo(
ref={animationTarget}
/>
</use>
</g>
</StyledOuterGroup>
</svg>
<StyledActionsContainer
color={colorMap.full}
Expand Down Expand Up @@ -464,6 +472,7 @@ export const ProcessEventDot = styled(UnstyledProcessEventDot)`
min-width: 280px;
min-height: 90px;
overflow-y: visible;
pointer-events: none;

//dasharray & dashoffset should be equal to "pull" the stroke back
//when it is transitioned.
Expand Down
Loading