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

[Security Solution][Resolver] Analyzed event styling #77115

Merged
merged 5 commits into from
Sep 14, 2020
Merged

[Security Solution][Resolver] Analyzed event styling #77115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
608adce
changed cube outline pattern
michaelolo24 Sep 9, 2020
57210a9
layer cube backing
michaelolo24 Sep 9, 2020
bf968e1
removed unnecessary pattern
michaelolo24 Sep 10, 2020
595c484
move all text into formatted message
michaelolo24 Sep 10, 2020
eabe8c1
updated text format
michaelolo24 Sep 14, 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: 2 additions & 2 deletions 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 @@ -477,7 +477,7 @@ export const useResolverTheme = (): {
),
isLabelFilled: false,
labelButtonFill: 'primary',
strokeColor: `${theme.euiColorPrimary}33`, // 33 = 20% opacity
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Maintaining the same outline color since the more translucent outline now signifies the analyzed event

strokeColor: theme.euiColorPrimary,
},
terminatedTriggerCube: {
backingFill: colorMap.triggerBackingFill,
Expand All @@ -491,7 +491,7 @@ export const useResolverTheme = (): {
),
isLabelFilled: false,
labelButtonFill: 'danger',
strokeColor: `${theme.euiColorDanger}33`,
strokeColor: theme.euiColorDanger,
},
};

Expand Down
26 changes: 25 additions & 1 deletion 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 @@ -10,6 +10,7 @@ import React, { useCallback, useMemo } from 'react';
import styled from 'styled-components';
import { htmlIdGenerator, EuiButton, EuiI18nNumber, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { useSelector } from 'react-redux';
import { FormattedMessage } from '@kbn/i18n/react';
import { NodeSubMenu, subMenuAssets } from './submenu';
import { applyMatrix3 } from '../models/vector2';
import { Vector2, Matrix3, ResolverState } from '../types';
Expand Down Expand Up @@ -119,6 +120,7 @@ const UnstyledProcessEventDot = React.memo(
// Node (html id=) IDs
const ariaActiveDescendant = useSelector(selectors.ariaActiveDescendant);
const selectedNode = useSelector(selectors.selectedNode);
const originID = useSelector(selectors.originID);
const nodeID: string | undefined = eventModel.entityIDSafeVersion(event);
if (nodeID === undefined) {
// NB: this component should be taking nodeID as a `string` instead of handling this logic here
Expand Down Expand Up @@ -231,6 +233,7 @@ const UnstyledProcessEventDot = React.memo(

const isAriaCurrent = nodeID === ariaActiveDescendant;
const isAriaSelected = nodeID === selectedNode;
const isOrigin = nodeID === originID;

const dispatch = useResolverDispatch();

Expand Down Expand Up @@ -359,6 +362,20 @@ const UnstyledProcessEventDot = React.memo(
height={markerSize * 1.5}
className="backing"
/>
{isOrigin && (
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added a second backing layer for the origin rather than modifying the existing one to maintain the outline effect on top of the more translucent line. If there is a better way to do this lmk.

<use
xlinkHref={`#${SymbolIds.processCubeActiveBacking}`}
fill="transparent" // Transparent so we don't double up on the default hover
Copy link
Contributor

Choose a reason for hiding this comment

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

ℹ️ Does this make it through the use shadow boundary? This is something I have to look up again and again every time it comes up: https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah, so I guess the fill does get through the boundary using the presentation attribute on the outer use.

x={-15.35}
y={-15.35}
stroke={strokeColor}
strokeOpacity={0.35}
strokeDashoffset={0}
width={markerSize * 1.5}
height={markerSize * 1.5}
className="origin"
/>
)}
<use
role="presentation"
xlinkHref={cubeSymbol}
Expand Down Expand Up @@ -392,7 +409,14 @@ const UnstyledProcessEventDot = React.memo(
color={colorMap.descriptionText}
isDisplaying={isShowingDescriptionText}
>
{descriptionText}
<FormattedMessage
id="xpack.securitySolution.endpoint.resolver.processDescription"
defaultMessage="{originText}{descriptionText}"
values={{
originText: isOrigin ? 'Analyzed Event · ' : '',
descriptionText,
}}
/>
</StyledDescriptionText>
<div
className={xScale >= 2 ? 'euiButton' : 'euiButton euiButton--small'}
Expand Down