From 93d584d4e507d0f50603a648bb5d52479ab62095 Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Tue, 8 Sep 2020 18:39:26 -0400 Subject: [PATCH 01/12] WIP replace selectable with badges --- .../public/resolver/view/submenu.tsx | 189 ++++++------------ 1 file changed, 61 insertions(+), 128 deletions(-) diff --git a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx index 14d6470c9520..0bac8993cdb5 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx @@ -9,17 +9,14 @@ /* eslint-disable react/display-name */ import { i18n } from '@kbn/i18n'; -import React, { useState, useMemo, useCallback, useRef, useLayoutEffect } from 'react'; +import React, { useState, useCallback, useRef, useLayoutEffect } from 'react'; import { EuiI18nNumber, - EuiSelectable, EuiButton, EuiPopover, ButtonColor, - htmlIdGenerator, } from '@elastic/eui'; import styled from 'styled-components'; -import { EuiSelectableOption } from '@elastic/eui'; import { Matrix3 } from '../types'; /** @@ -43,7 +40,7 @@ export const subMenuAssets = { }), }, }; -const idGenerator = htmlIdGenerator(); + interface ResolverSubmenuOption { optionTitle: string; action: () => unknown; @@ -52,76 +49,28 @@ interface ResolverSubmenuOption { export type ResolverSubmenuOptionList = ResolverSubmenuOption[] | string; -const OptionListItem = styled.div` - width: 175px; -`; - -const OptionList = React.memo( - ({ - subMenuOptions, - isLoading, - }: { - subMenuOptions: ResolverSubmenuOptionList; - isLoading: boolean; - }) => { - const [options, setOptions] = useState(() => - typeof subMenuOptions !== 'object' - ? [] - : subMenuOptions.map((option: ResolverSubmenuOption) => { - const dataTestSubj = 'resolver:map:node-submenu-item'; - return option.prefix - ? { - label: option.optionTitle, - prepend: {option.prefix} , - 'data-test-subj': dataTestSubj, - } - : { - label: option.optionTitle, - prepend: , - 'data-test-subj': dataTestSubj, - }; - }) - ); - - const actionsByLabel: Record unknown> = useMemo(() => { - if (typeof subMenuOptions !== 'object') { - return {}; - } - return subMenuOptions.reduce((titleActionRecord, opt) => { - const { optionTitle, action } = opt; - return { ...titleActionRecord, [optionTitle]: action }; - }, {}); - }, [subMenuOptions]); - - const selectableProps = useMemo(() => { - return { - listProps: { showIcons: true, bordered: true }, - onChange: (newOptions: EuiSelectableOption[]) => { - const selectedOption = newOptions.find((opt) => opt.checked === 'on'); - if (selectedOption) { - const { label } = selectedOption; - const actionToTake = actionsByLabel[label]; - if (typeof actionToTake === 'function') { - actionToTake(); - } - } - setOptions(newOptions); - }, - }; - }, [actionsByLabel]); - - return ( - - {(list) => {list}} - - ); - } -); +/** + * This will be the "host button" that displays the "total number of related events" and opens + * the sumbmenu (with counts by category) when clicked. + */ +const DetailHostButton = React.memo(({hasMenu, menuIsOpen, action, count, title, buttonBorderColor, nodeID}: {hasMenu: boolean, menuIsOpen?: boolean, action: (evt: React.MouseEvent)=>void, count?: number, title: string, buttonBorderColor: ButtonColor, nodeID: string})=>{ + const hasIcon = hasMenu ?? false; + const iconType = menuIsOpen === true ? 'arrowUp' : 'arrowDown'; + return ( + + {count ? : ''} {title} + + ) +}) /** * A Submenu to be displayed in one of two forms: @@ -177,11 +126,6 @@ const NodeSubMenuComponents = React.memo( [menuAction] ); - const closePopover = useCallback(() => setMenuOpen(false), []); - const popoverId = idGenerator('submenu-popover'); - - const isMenuLoading = optionsWithActions === 'waitingForRelatedEventData'; - // The last projection matrix that was used to position the popover const projectionMatrixAtLastRender = useRef(); @@ -222,44 +166,28 @@ const NodeSubMenuComponents = React.memo( ); } - /** - * When called with a set of `optionsWithActions`: - * Render with a panel of options that appear when the menu host button is clicked - */ - - const submenuPopoverButton = ( - - {count ? : ''} {menuTitle} - - ); + + if(typeof optionsWithActions === 'string') { + return (<>) + } return ( -
- - {menuIsOpen && typeof optionsWithActions === 'object' && ( - - )} - -
+ <> + +
    + { optionsWithActions.map((opt)=>{ + return (
  • {opt.optionTitle}
    • ) + })} +
+ ); } ); @@ -271,6 +199,23 @@ export const NodeSubMenu = styled(NodeSubMenuComponents)` display: flex; flex-flow: column; + &.options { + font-size: .8em; + display: flex; + flex-flow: row wrap; + background: transparent; + position: absolute; + top: 6em; + } + + &.options .item { + margin: .25ch .35ch .35ch 0; + padding: .25em; + outline: 1px solid red; + height: min-content; + line-height: .8; + } + & .euiButton { background-color: ${(props) => props.buttonFill}; border-color: ${(props) => props.buttonBorderColor}; @@ -283,16 +228,4 @@ export const NodeSubMenu = styled(NodeSubMenuComponents)` background-color: ${(props) => props.buttonFill}; } } - - & .euiPopover__anchor { - display: flex; - } - - &.is-open .euiButton { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - &.is-open .euiSelectableListItem__prepend { - color: white; - } `; From f4c60084e1c8c0d20c1c456fec31b49a1e894d64 Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Tue, 8 Sep 2020 23:51:48 -0400 Subject: [PATCH 02/12] WIP pointer events --- .../resolver/view/process_event_dot.tsx | 6 +++++- .../public/resolver/view/submenu.tsx | 20 +++++++++++++++---- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx index 2aacc5f9176c..b4acf52951f2 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx @@ -38,6 +38,7 @@ const StyledActionsContainer = styled.div` position: absolute; top: ${(props) => `${props.topPct}%`}; width: auto; + pointer-events: all; `; interface StyledDescriptionText { @@ -329,6 +330,7 @@ const UnstyledProcessEventDot = React.memo( } role="img" aria-labelledby={labelHTMLID} + fill="none" style={{ display: 'block', width: '100%', @@ -338,9 +340,10 @@ const UnstyledProcessEventDot = React.memo( left: '0', outline: 'transparent', border: 'none', + pointerEvents: 'none', }} > - +
    - { optionsWithActions.map((opt)=>{ - return (
  • {opt.optionTitle}
    • ) + { optionsWithActions.sort((opta, optb)=>{ return opta.optionTitle < optb.optionTitle ? -1 : 1 }).map((opt)=>{ + return (
    • ) })}
@@ -206,13 +206,25 @@ export const NodeSubMenu = styled(NodeSubMenuComponents)` background: transparent; position: absolute; top: 6em; + contain: content; + width: 13em; + z-index: 2; } &.options .item { margin: .25ch .35ch .35ch 0; padding: .25em; - outline: 1px solid red; - height: min-content; + border: 1px solid red; + height: fit-content; + width: fit-content; + line-height: .8; + background-color: ${(props) => props.buttonFill}; + } + + &.options .item button { + appearance: none; + height: fit-content; + width: fit-content; line-height: .8; } From eaad4c0c5b2a3bdaf086d4dba18ac99de1915720 Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Wed, 9 Sep 2020 09:37:53 -0400 Subject: [PATCH 03/12] WIP, button/li styles --- .../public/resolver/view/submenu.tsx | 31 ++++++++++++------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx index c3825ab3c255..7404d619bf0f 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx @@ -9,7 +9,7 @@ /* eslint-disable react/display-name */ import { i18n } from '@kbn/i18n'; -import React, { useState, useCallback, useRef, useLayoutEffect } from 'react'; +import React, { useState, useCallback, useRef, useLayoutEffect, useMemo } from 'react'; import { EuiI18nNumber, EuiButton, @@ -18,6 +18,7 @@ import { } from '@elastic/eui'; import styled from 'styled-components'; import { Matrix3 } from '../types'; +import { useResolverTheme } from './assets'; /** * i18n-translated titles for submenus and identifiers for display of states: @@ -55,12 +56,14 @@ export type ResolverSubmenuOptionList = ResolverSubmenuOption[] | string; */ const DetailHostButton = React.memo(({hasMenu, menuIsOpen, action, count, title, buttonBorderColor, nodeID}: {hasMenu: boolean, menuIsOpen?: boolean, action: (evt: React.MouseEvent)=>void, count?: number, title: string, buttonBorderColor: ButtonColor, nodeID: string})=>{ const hasIcon = hasMenu ?? false; - const iconType = menuIsOpen === true ? 'arrowUp' : 'arrowDown'; + const iconType = menuIsOpen === true ? 'minusInCircleFilled' : 'plusInCircleFilled'; return ( { + return { + border: `1px solid ${pillBorderStroke}`, + backgroundColor: pillFill, + } + },[pillBorderStroke, pillFill]); + if (!optionsWithActions) { /** * When called with a `menuAction` @@ -182,11 +193,11 @@ const NodeSubMenuComponents = React.memo( buttonBorderColor={buttonBorderColor} nodeID={nodeID} /> -
    + {menuIsOpen ? (
      { optionsWithActions.sort((opta, optb)=>{ return opta.optionTitle < optb.optionTitle ? -1 : 1 }).map((opt)=>{ - return (
      • ) + return (
      • ) })} -
    +
) : null} ); } @@ -200,25 +211,23 @@ export const NodeSubMenu = styled(NodeSubMenuComponents)` flex-flow: column; &.options { - font-size: .8em; + font-size: .8rem; display: flex; flex-flow: row wrap; background: transparent; position: absolute; - top: 6em; + top: 6.5em; contain: content; - width: 13em; + width: 12em; z-index: 2; } &.options .item { margin: .25ch .35ch .35ch 0; padding: .25em; - border: 1px solid red; height: fit-content; width: fit-content; line-height: .8; - background-color: ${(props) => props.buttonFill}; } &.options .item button { From fde32e45f4f6e1cd7581d06327e2e613d327e998 Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Thu, 10 Sep 2020 09:50:03 -0400 Subject: [PATCH 04/12] WIP replace test subject & style changes --- .../public/resolver/view/assets.tsx | 6 ++++-- .../public/resolver/view/submenu.tsx | 15 ++++++++------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/security_solution/public/resolver/view/assets.tsx b/x-pack/plugins/security_solution/public/resolver/view/assets.tsx index 6962d300f707..29843a43a9b8 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/assets.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/assets.tsx @@ -24,7 +24,8 @@ type ResolverColorNames = | 'resolverBackground' | 'resolverEdge' | 'resolverEdgeText' - | 'resolverBreadcrumbBackground'; + | 'resolverBreadcrumbBackground' + | 'pillStroke'; type ColorMap = Record; interface NodeStyleConfig { @@ -438,8 +439,9 @@ export const useResolverTheme = (): { resolverBreadcrumbBackground: theme.euiColorLightestShade, resolverEdgeText: getThemedOption(theme.euiColorDarkShade, theme.euiColorFullShade), triggerBackingFill: `${theme.euiColorDanger}${getThemedOption('0F', '1F')}`, + pillStroke: theme.euiColorLightShade, }; - + const nodeAssets: NodeStyleMap = { runningProcessCube: { backingFill: colorMap.processBackingFill, diff --git a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx index 7404d619bf0f..bb2f134b7f5e 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx @@ -56,13 +56,13 @@ export type ResolverSubmenuOptionList = ResolverSubmenuOption[] | string; */ const DetailHostButton = React.memo(({hasMenu, menuIsOpen, action, count, title, buttonBorderColor, nodeID}: {hasMenu: boolean, menuIsOpen?: boolean, action: (evt: React.MouseEvent)=>void, count?: number, title: string, buttonBorderColor: ButtonColor, nodeID: string})=>{ const hasIcon = hasMenu ?? false; - const iconType = menuIsOpen === true ? 'minusInCircleFilled' : 'plusInCircleFilled'; + const iconType = menuIsOpen === true ? 'arrowUp' : 'arrowDown'; return ( { return { - border: `1px solid ${pillBorderStroke}`, + border: `1.5px solid ${pillBorderStroke}`, backgroundColor: pillFill, } },[pillBorderStroke, pillFill]); @@ -195,7 +195,7 @@ const NodeSubMenuComponents = React.memo( /> {menuIsOpen ? (
    { optionsWithActions.sort((opta, optb)=>{ return opta.optionTitle < optb.optionTitle ? -1 : 1 }).map((opt)=>{ - return (
    • ) + return (
    • ) })}
) : null} @@ -224,9 +224,10 @@ export const NodeSubMenu = styled(NodeSubMenuComponents)` &.options .item { margin: .25ch .35ch .35ch 0; - padding: .25em; + padding: .35em .5em; height: fit-content; width: fit-content; + border-radius: 2px; line-height: .8; } From bf63cb05a5fc5958bd767887169ce5a9412c07ff Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Thu, 10 Sep 2020 10:23:02 -0400 Subject: [PATCH 05/12] a11y features --- .../security_solution/public/resolver/view/submenu.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx index bb2f134b7f5e..7731ab8bec8c 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx @@ -69,6 +69,7 @@ const DetailHostButton = React.memo(({hasMenu, menuIsOpen, action, count, title, tabIndex={-1} data-test-subj="resolver:submenu:button" data-test-resolver-node-id={nodeID} + id={nodeID} > {count ? : ''} {title} @@ -193,9 +194,9 @@ const NodeSubMenuComponents = React.memo( buttonBorderColor={buttonBorderColor} nodeID={nodeID} /> - {menuIsOpen ? (
    + {menuIsOpen ? (
      { optionsWithActions.sort((opta, optb)=>{ return opta.optionTitle < optb.optionTitle ? -1 : 1 }).map((opt)=>{ - return (
      • ) + return (
      • ) })}
    ) : null} From 83706a2df276705a2004a626fb0273ac368a6888 Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Thu, 10 Sep 2020 11:05:13 -0400 Subject: [PATCH 06/12] Focus states --- .../public/resolver/view/submenu.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx index 7731ab8bec8c..2cdfa9176086 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx @@ -196,7 +196,7 @@ const NodeSubMenuComponents = React.memo( /> {menuIsOpen ? (
      { optionsWithActions.sort((opta, optb)=>{ return opta.optionTitle < optb.optionTitle ? -1 : 1 }).map((opt)=>{ - return (
      • ) + return (
      • ) })}
    ) : null} @@ -237,6 +237,20 @@ export const NodeSubMenu = styled(NodeSubMenuComponents)` height: fit-content; width: fit-content; line-height: .8; + outline-style: none; + border-color: transparent; + box-shadow: none; + } + + &.options .item button:focus { + outline-style: none; + border-color: transparent; + box-shadow: none; + text-decoration: underline; + } + + &.options .item button:active { + transform: scale(.95); } & .euiButton { From 76e745f9294b786f45740219e5805f6380a06448 Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Thu, 10 Sep 2020 11:22:41 -0400 Subject: [PATCH 07/12] linted --- .../public/resolver/view/assets.tsx | 2 +- .../resolver/view/process_event_dot.tsx | 2 +- .../public/resolver/view/submenu.tsx | 132 +++++++++++------- 3 files changed, 85 insertions(+), 51 deletions(-) diff --git a/x-pack/plugins/security_solution/public/resolver/view/assets.tsx b/x-pack/plugins/security_solution/public/resolver/view/assets.tsx index 29843a43a9b8..1317c0ee94b6 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/assets.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/assets.tsx @@ -441,7 +441,7 @@ export const useResolverTheme = (): { triggerBackingFill: `${theme.euiColorDanger}${getThemedOption('0F', '1F')}`, pillStroke: theme.euiColorLightShade, }; - + const nodeAssets: NodeStyleMap = { runningProcessCube: { backingFill: colorMap.processBackingFill, diff --git a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx index b4acf52951f2..98e400b79760 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx @@ -343,7 +343,7 @@ const UnstyledProcessEventDot = React.memo( pointerEvents: 'none', }} > - + )=>void, count?: number, title: string, buttonBorderColor: ButtonColor, nodeID: string})=>{ - const hasIcon = hasMenu ?? false; - const iconType = menuIsOpen === true ? 'arrowUp' : 'arrowDown'; - return ( - - {count ? : ''} {title} - - ) -}) +const DetailHostButton = React.memo( + ({ + hasMenu, + menuIsOpen, + action, + count, + title, + buttonBorderColor, + nodeID, + }: { + hasMenu: boolean; + menuIsOpen?: boolean; + action: (evt: React.MouseEvent) => void; + count?: number; + title: string; + buttonBorderColor: ButtonColor; + nodeID: string; + }) => { + const hasIcon = hasMenu ?? false; + const iconType = menuIsOpen === true ? 'arrowUp' : 'arrowDown'; + return ( + + {count ? : ''} {title} + + ); + } +); /** * A Submenu to be displayed in one of two forms: @@ -152,13 +163,15 @@ const NodeSubMenuComponents = React.memo( projectionMatrixAtLastRender.current = projectionMatrix; }, [projectionMatrixAtLastRender, projectionMatrix]); - const { colorMap: {pillStroke: pillBorderStroke, resolverBackground: pillFill} } = useResolverTheme(); - const listStylesFromTheme = useMemo(()=>{ + const { + colorMap: { pillStroke: pillBorderStroke, resolverBackground: pillFill }, + } = useResolverTheme(); + const listStylesFromTheme = useMemo(() => { return { border: `1.5px solid ${pillBorderStroke}`, backgroundColor: pillFill, - } - },[pillBorderStroke, pillFill]); + }; + }, [pillBorderStroke, pillFill]); if (!optionsWithActions) { /** @@ -178,27 +191,48 @@ const NodeSubMenuComponents = React.memo( ); } - - if(typeof optionsWithActions === 'string') { - return (<>) + + if (typeof optionsWithActions === 'string') { + return <>; } return ( <> - {menuIsOpen ? (
      - { optionsWithActions.sort((opta, optb)=>{ return opta.optionTitle < optb.optionTitle ? -1 : 1 }).map((opt)=>{ - return (
      • ) - })} -
    ) : null} + {menuIsOpen ? ( +
      + {optionsWithActions + .sort((opta, optb) => { + return opta.optionTitle < optb.optionTitle ? -1 : 1; + }) + .map((opt) => { + return ( +
    • + +
      • + ); + })} +
    + ) : null} ); } @@ -212,7 +246,7 @@ export const NodeSubMenu = styled(NodeSubMenuComponents)` flex-flow: column; &.options { - font-size: .8rem; + font-size: 0.8rem; display: flex; flex-flow: row wrap; background: transparent; @@ -224,19 +258,19 @@ export const NodeSubMenu = styled(NodeSubMenuComponents)` } &.options .item { - margin: .25ch .35ch .35ch 0; - padding: .35em .5em; + margin: 0.25ch 0.35ch 0.35ch 0; + padding: 0.35em 0.5em; height: fit-content; width: fit-content; border-radius: 2px; - line-height: .8; + line-height: 0.8; } &.options .item button { appearance: none; height: fit-content; width: fit-content; - line-height: .8; + line-height: 0.8; outline-style: none; border-color: transparent; box-shadow: none; @@ -250,7 +284,7 @@ export const NodeSubMenu = styled(NodeSubMenuComponents)` } &.options .item button:active { - transform: scale(.95); + transform: scale(0.95); } & .euiButton { From f0d0ad987da028a2abbaf29414512afbb5f6a6ba Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Thu, 10 Sep 2020 12:11:15 -0400 Subject: [PATCH 08/12] aria fix --- .../plugins/security_solution/public/resolver/view/submenu.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx index e9f3925e26a1..ef9150c917b6 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx @@ -211,7 +211,6 @@ const NodeSubMenuComponents = React.memo(
      {optionsWithActions From a8fc00a505521d061ab27e6b4e206d795f04cc40 Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Thu, 10 Sep 2020 13:29:17 -0400 Subject: [PATCH 09/12] R Austin: switch to locale compare --- .../plugins/security_solution/public/resolver/view/submenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx index ef9150c917b6..c53c5d2965b4 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx @@ -215,7 +215,7 @@ const NodeSubMenuComponents = React.memo( > {optionsWithActions .sort((opta, optb) => { - return opta.optionTitle < optb.optionTitle ? -1 : 1; + return opta.optionTitle.localeCompare(optb.optionTitle); }) .map((opt) => { return ( From 9d63c4626182a06d18af7e96062aee770b92d58b Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Thu, 10 Sep 2020 13:33:02 -0400 Subject: [PATCH 10/12] M Olorunnisola: change component name --- .../security_solution/public/resolver/view/submenu.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx index c53c5d2965b4..fb0425044492 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx @@ -47,14 +47,13 @@ export type ResolverSubmenuOptionList = ResolverSubmenuOption[] | string; * This will be the "host button" that displays the "total number of related events" and opens * the sumbmenu (with counts by category) when clicked. */ -const DetailHostButton = React.memo( +const SubButton = React.memo( ({ hasMenu, menuIsOpen, action, count, title, - buttonBorderColor, nodeID, }: { hasMenu: boolean; @@ -62,7 +61,6 @@ const DetailHostButton = React.memo( action: (evt: React.MouseEvent) => void; count?: number; title: string; - buttonBorderColor: ButtonColor; nodeID: string; }) => { const hasIcon = hasMenu ?? false; @@ -198,13 +196,12 @@ const NodeSubMenuComponents = React.memo( return ( <> - {menuIsOpen ? ( From 18598d28d605b666e981e91ad8962ac5f6b640e2 Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Thu, 10 Sep 2020 13:48:18 -0400 Subject: [PATCH 11/12] M Olorunnisola: Move to styled components --- .../public/resolver/view/process_event_dot.tsx | 9 +++++++-- .../public/resolver/view/submenu.tsx | 14 +++++++++++--- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx index 98e400b79760..5d7112dd1547 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx @@ -62,6 +62,11 @@ const StyledDescriptionText = styled.div` width: fit-content; `; +const StyledOuterGroup = styled.g` + fill: none; + pointer-events: visiblePainted; +`; + /** * An artifact that represents a process node and the things associated with it in the Resolver */ @@ -343,7 +348,7 @@ const UnstyledProcessEventDot = React.memo( pointerEvents: 'none', }} > - + - + {count ? : ''} {title} - + ); } ); From e5c35247840bef3d7a9deb95504b668a909d747b Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Thu, 10 Sep 2020 16:02:54 -0400 Subject: [PATCH 12/12] J Buttner: remove unnecessary const --- .../plugins/security_solution/public/resolver/view/submenu.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx index b012da2b7764..adff11ee94cf 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/submenu.tsx @@ -72,12 +72,11 @@ const SubButton = React.memo( title: string; nodeID: string; }) => { - const hasIcon = hasMenu ?? false; const iconType = menuIsOpen === true ? 'arrowUp' : 'arrowDown'; return (