From c109f55b354b14796f9719b2a2ebf4d9aff24e21 Mon Sep 17 00:00:00 2001 From: Kevin Qualters Date: Mon, 13 Apr 2020 12:02:14 -0400 Subject: [PATCH 01/12] Update cli mapping to match endpoint package --- x-pack/plugins/endpoint/scripts/event_mapping.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/endpoint/scripts/event_mapping.json b/x-pack/plugins/endpoint/scripts/event_mapping.json index 59d1ed17852b16..f410edc7abe5ef 100644 --- a/x-pack/plugins/endpoint/scripts/event_mapping.json +++ b/x-pack/plugins/endpoint/scripts/event_mapping.json @@ -386,7 +386,8 @@ "type": "nested" }, "file_extension": { - "type": "long" + "ignore_above": 1024, + "type": "keyword" }, "project_file": { "properties": { From 14ef3cf8257a7baf8016244b387b391b88d1587b Mon Sep 17 00:00:00 2001 From: Kevin Qualters Date: Mon, 13 Apr 2020 12:28:36 -0400 Subject: [PATCH 02/12] Update alert mapping to match --- x-pack/plugins/endpoint/scripts/alert_mapping.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/endpoint/scripts/alert_mapping.json b/x-pack/plugins/endpoint/scripts/alert_mapping.json index a21e48b4bc95fc..2e0041d0af9867 100644 --- a/x-pack/plugins/endpoint/scripts/alert_mapping.json +++ b/x-pack/plugins/endpoint/scripts/alert_mapping.json @@ -394,7 +394,8 @@ "type": "nested" }, "file_extension": { - "type": "long" + "ignore_above": 1024, + "type": "keyword" }, "project_file": { "properties": { From 0985e14dbe25cb1a5c298e4fe3ee47580eb1addd Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Mon, 13 Apr 2020 15:12:14 -0400 Subject: [PATCH 03/12] BACK OUT: changes to make kibana run --- x-pack/plugins/endpoint/scripts/resolver_generator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/endpoint/scripts/resolver_generator.ts b/x-pack/plugins/endpoint/scripts/resolver_generator.ts index 333846bde6ce4f..bdbc9ff506ac24 100644 --- a/x-pack/plugins/endpoint/scripts/resolver_generator.ts +++ b/x-pack/plugins/endpoint/scripts/resolver_generator.ts @@ -29,7 +29,7 @@ async function main() { alertIndex: { alias: 'ai', describe: 'index to store alerts in', - default: '.alerts-endpoint-000001', + default: 'events-endpoint-1', type: 'string', }, eventIndex: { From b759ea60bfc4fc45487a97ed30771d3e5a2df102 Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Tue, 14 Apr 2020 11:34:33 -0400 Subject: [PATCH 04/12] adding two buttons for 75% zoom view --- .../resolver/view/process_event_dot.tsx | 35 +++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx index 10e331ffff02d5..cc3573df6b52d6 100644 --- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx @@ -7,7 +7,13 @@ import React, { useCallback, useMemo } from 'react'; import styled from 'styled-components'; import { i18n } from '@kbn/i18n'; -import { htmlIdGenerator, EuiKeyboardAccessible } from '@elastic/eui'; +import { + htmlIdGenerator, + EuiKeyboardAccessible, + EuiButton, + EuiFlexGroup, + EuiFlexItem, +} from '@elastic/eui'; import { useSelector } from 'react-redux'; import { applyMatrix3 } from '../lib/vector2'; import { Vector2, Matrix3, AdjacentProcessMap, ResolverProcessType } from '../types'; @@ -53,8 +59,24 @@ const nodeAssets = { }, }; +const ChildEventsButton = () => { + return ( + {}} color="ghost" size="s" iconType="arrowDown" iconSide="right"> + Events + + ); +}; + +const RelatedAlertsButton = () => { + return ( + {}} color="ghost" size="s" iconType="arrowDown" iconSide="right"> + Related Alerts + + ); +}; + /** - * A placeholder view for a process node. + * An artefact that represents a process node. */ export const ProcessEventDot = styled( React.memo( @@ -184,6 +206,7 @@ export const ProcessEventDot = styled( }, [animationTarget, dispatch, nodeId] ); + /* eslint-disable jsx-a11y/click-events-have-key-events */ /** * Key event handling (e.g. 'Enter'/'Space') is provisioned by the `EuiKeyboardAccessible` component @@ -298,6 +321,14 @@ export const ProcessEventDot = styled( > {eventModel.eventName(event)} + + + + + + + + From 6222b0001675f270307c1f6236e0caa8c98834bd Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Tue, 14 Apr 2020 12:04:23 -0400 Subject: [PATCH 05/12] change to extra-small gutters --- .../public/embeddables/resolver/view/process_event_dot.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx index cc3573df6b52d6..580910f1343aeb 100644 --- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx @@ -286,6 +286,7 @@ export const ProcessEventDot = styled( color: 'white', fontSize: `${scaledTypeSize}px`, lineHeight: '140%', + backgroundColor: NamedColors.resolverBackground, }} >
{eventModel.eventName(event)}
- + From 208ed9817e30f329b4fbc1905552862314933cc2 Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Tue, 14 Apr 2020 16:18:31 -0400 Subject: [PATCH 06/12] adjusting styles so boxes lay out and scale correctly --- .../resolver/view/process_event_dot.tsx | 43 ++++++++++++------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx index 580910f1343aeb..17a5ed6ea9dbfc 100644 --- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx @@ -69,7 +69,7 @@ const ChildEventsButton = () => { const RelatedAlertsButton = () => { return ( - {}} color="ghost" size="s" iconType="arrowDown" iconSide="right"> + {}} color="ghost" size="s"> Related Alerts ); @@ -279,14 +279,17 @@ export const ProcessEventDot = styled(
- {eventModel.eventName(event)} + + {eventModel.eventName(event)} +
- - - - - - - - + {magFactorX >= 2 && ( + + + + + + + + + )}
From dbc871440ffd20fe394947c40e6d36fb9f8fd07e Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Tue, 14 Apr 2020 17:58:27 -0400 Subject: [PATCH 07/12] adjust palette to match comps --- .../public/embeddables/resolver/view/defs.tsx | 10 +++++++++- .../embeddables/resolver/view/process_event_dot.tsx | 11 ++++++----- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/defs.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/defs.tsx index de9c3c7e8f8f3e..064645019ca34c 100644 --- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/defs.tsx +++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/defs.tsx @@ -54,7 +54,11 @@ type ResolverColorNames = | 'activeNoWarning' | 'activeWarning' | 'fullLabelBackground' - | 'inertDescription'; + | 'inertDescription' + | 'labelBackgroundTerminatedProcess' + | 'labelBackgroundTerminatedTrigger' + | 'labelBackgroundRunningProcess' + | 'labelBackgroundRunningTrigger'; export const NamedColors: Record = { ok: saturate(0.5, resolverPalette.temperatures[0]), @@ -70,6 +74,10 @@ export const NamedColors: Record = { activeNoWarning: '#0078FF', activeWarning: '#C61F38', fullLabelBackground: '#3B3C41', + labelBackgroundTerminatedProcess: '#8A96A8', + labelBackgroundTerminatedTrigger: '#8A96A8', + labelBackgroundRunningProcess: '#8A96A8', + labelBackgroundRunningTrigger: '#8A96A8', inertDescription: '#747474', }; diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx index 17a5ed6ea9dbfc..4a36f68885ce4f 100644 --- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx @@ -27,7 +27,7 @@ import * as selectors from '../store/selectors'; const nodeAssets = { runningProcessCube: { cubeSymbol: `#${SymbolIds.runningProcessCube}`, - labelBackground: NamedColors.fullLabelBackground, + labelBackground: NamedColors.labelBackgroundRunningProcess, descriptionFill: NamedColors.empty, descriptionText: i18n.translate('xpack.endpoint.resolver.runningProcess', { defaultMessage: 'Running Process', @@ -35,7 +35,7 @@ const nodeAssets = { }, runningTriggerCube: { cubeSymbol: `#${SymbolIds.runningTriggerCube}`, - labelBackground: NamedColors.fullLabelBackground, + labelBackground: NamedColors.labelBackgroundRunningTrigger, descriptionFill: NamedColors.empty, descriptionText: i18n.translate('xpack.endpoint.resolver.runningTrigger', { defaultMessage: 'Running Trigger', @@ -43,7 +43,7 @@ const nodeAssets = { }, terminatedProcessCube: { cubeSymbol: `#${SymbolIds.terminatedProcessCube}`, - labelBackground: NamedColors.fullLabelBackground, + labelBackground: NamedColors.labelBackgroundTerminatedProcess, descriptionFill: NamedColors.empty, descriptionText: i18n.translate('xpack.endpoint.resolver.terminatedProcess', { defaultMessage: 'Terminated Process', @@ -51,7 +51,7 @@ const nodeAssets = { }, terminatedTriggerCube: { cubeSymbol: `#${SymbolIds.terminatedTriggerCube}`, - labelBackground: NamedColors.fullLabelBackground, + labelBackground: NamedColors.labelBackgroundTerminatedTrigger, descriptionFill: NamedColors.empty, descriptionText: i18n.translate('xpack.endpoint.resolver.terminatedTrigger', { defaultMessage: 'Terminated Trigger', @@ -285,7 +285,7 @@ export const ProcessEventDot = styled( top: '30%', position: 'absolute', width: '50%', - color: NamedColors.empty, + color: NamedColors.full, fontSize: `${scaledTypeSize}px`, lineHeight: '140%', backgroundColor: NamedColors.resolverBackground, @@ -305,6 +305,7 @@ export const ProcessEventDot = styled( margin: '0', textAlign: 'left', padding: '0', + color: NamedColors.empty, }} > {descriptionText} From 35c2bf58d95d8003bb43be72b386cdbab532e0bc Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Wed, 15 Apr 2020 16:31:52 -0400 Subject: [PATCH 08/12] tabindex and style adjustments --- .../resolver/view/process_event_dot.tsx | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx index 4a36f68885ce4f..7a139e87f499a5 100644 --- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx @@ -61,7 +61,17 @@ const nodeAssets = { const ChildEventsButton = () => { return ( - {}} color="ghost" size="s" iconType="arrowDown" iconSide="right"> + ) => { + clickEvent.preventDefault(); + clickEvent.stopPropagation(); + }} + color="ghost" + size="s" + iconType="arrowDown" + iconSide="right" + tabIndex={-1} + > Events ); @@ -69,7 +79,15 @@ const ChildEventsButton = () => { const RelatedAlertsButton = () => { return ( - {}} color="ghost" size="s"> + ) => { + clickEvent.preventDefault(); + clickEvent.stopPropagation(); + }} + color="ghost" + size="s" + tabIndex={-1} + > Related Alerts ); @@ -361,6 +379,8 @@ export const ProcessEventDot = styled( white-space: nowrap; will-change: left, top, width, height; contain: strict; + min-width: 280px; + min-height: 90px; //dasharray & dashoffset should be equal to "pull" the stroke back //when it is transitioned. From 374296d500b0596f717b902e0a31136d683c3a66 Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Thu, 16 Apr 2020 17:20:48 -0400 Subject: [PATCH 09/12] L. Poli Review: buttons should be type small in 25% view --- .../public/embeddables/resolver/view/process_event_dot.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx index 7a139e87f499a5..e5f728d988fb25 100644 --- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx @@ -329,7 +329,7 @@ export const ProcessEventDot = styled( {descriptionText}
= 2 ? "euiButton" : "euiButton euiButton--small"} data-test-subject="nodeLabel" id={labelId} style={{ From 4245a82aeac8c46e8cada4fdd198c638f42631ea Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Thu, 16 Apr 2020 17:38:54 -0400 Subject: [PATCH 10/12] i18n --- .../embeddables/resolver/view/process_event_dot.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx index e5f728d988fb25..536980cb4cc4a5 100644 --- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx @@ -72,7 +72,9 @@ const ChildEventsButton = () => { iconSide="right" tabIndex={-1} > - Events + {i18n.translate('xpack.endpoint.resolver.relatedEvents', { + defaultMessage: 'Events', + })} ); }; @@ -88,7 +90,9 @@ const RelatedAlertsButton = () => { size="s" tabIndex={-1} > - Related Alerts + {i18n.translate('xpack.endpoint.resolver.relatedAlerts', { + defaultMessage: 'Related Alerts', + })} ); }; @@ -329,14 +333,13 @@ export const ProcessEventDot = styled( {descriptionText}
= 2 ? "euiButton" : "euiButton euiButton--small"} + className={magFactorX >= 2 ? 'euiButton' : 'euiButton euiButton--small'} data-test-subject="nodeLabel" id={labelId} style={{ backgroundColor: labelBackground, padding: '.15rem 0', textAlign: 'center', - width: '100%', maxWidth: '20rem', minWidth: '12rem', overflow: 'hidden', From 5abadc906afd8749c009205d6aec979b3efa05fa Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Thu, 16 Apr 2020 17:50:47 -0400 Subject: [PATCH 11/12] width adjustment to match mocks --- .../public/embeddables/resolver/view/process_event_dot.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx index 536980cb4cc4a5..c8cce4fffb4cdc 100644 --- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx @@ -342,6 +342,7 @@ export const ProcessEventDot = styled( textAlign: 'center', maxWidth: '20rem', minWidth: '12rem', + width: '60%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', From e2de763ada3251b6383fd770bd4a26929dd491fe Mon Sep 17 00:00:00 2001 From: Brent Kimmel Date: Mon, 20 Apr 2020 09:59:32 -0400 Subject: [PATCH 12/12] R. Austin Review: Add memo and useCallback --- .../resolver/view/process_event_dot.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx index c8cce4fffb4cdc..3201e83164dba6 100644 --- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx +++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx @@ -59,13 +59,13 @@ const nodeAssets = { }, }; -const ChildEventsButton = () => { +const ChildEventsButton = React.memo(() => { return ( ) => { + onClick={useCallback((clickEvent: React.MouseEvent) => { clickEvent.preventDefault(); clickEvent.stopPropagation(); - }} + }, [])} color="ghost" size="s" iconType="arrowDown" @@ -77,15 +77,15 @@ const ChildEventsButton = () => { })} ); -}; +}); -const RelatedAlertsButton = () => { +const RelatedAlertsButton = React.memo(() => { return ( ) => { + onClick={useCallback((clickEvent: React.MouseEvent) => { clickEvent.preventDefault(); clickEvent.stopPropagation(); - }} + }, [])} color="ghost" size="s" tabIndex={-1} @@ -95,7 +95,7 @@ const RelatedAlertsButton = () => { })} ); -}; +}); /** * An artefact that represents a process node.