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

Add sub-menus to Resolver node (for 75% zoom) #63476

Merged
merged 13 commits into from
Apr 20, 2020
Merged

Add sub-menus to Resolver node (for 75% zoom) #63476

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c109f55
Update cli mapping to match endpoint package
kqualters-elastic Apr 13, 2020
14ef3cf
Update alert mapping to match
kqualters-elastic Apr 13, 2020
0985e14
BACK OUT: changes to make kibana run
Apr 13, 2020
b759ea6
adding two buttons for 75% zoom view
Apr 14, 2020
6222b00
change to extra-small gutters
Apr 14, 2020
208ed98
adjusting styles so boxes lay out and scale correctly
Apr 14, 2020
dbc8714
adjust palette to match comps
Apr 14, 2020
35c2bf5
tabindex and style adjustments
Apr 15, 2020
374296d
L. Poli Review: buttons should be type small in 25% view
Apr 16, 2020
4245a82
i18n
Apr 16, 2020
5abadc9
width adjustment to match mocks
Apr 16, 2020
e2de763
R. Austin Review: Add memo and useCallback
Apr 20, 2020
ed4f4fb
Merge remote-tracking branch 'upstream/master' into resolver/add-node…
Apr 20, 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
10 changes: 9 additions & 1 deletion x-pack/plugins/endpoint/public/embeddables/resolver/view/defs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,11 @@ type ResolverColorNames =
| 'activeNoWarning'
| 'activeWarning'
| 'fullLabelBackground'
| 'inertDescription';
| 'inertDescription'
| 'labelBackgroundTerminatedProcess'
| 'labelBackgroundTerminatedTrigger'
| 'labelBackgroundRunningProcess'
| 'labelBackgroundRunningTrigger';

export const NamedColors: Record<ResolverColorNames, string> = {
ok: saturate(0.5, resolverPalette.temperatures[0]),
Expand All @@ -70,6 +74,10 @@ export const NamedColors: Record<ResolverColorNames, string> = {
activeNoWarning: '#0078FF',
activeWarning: '#C61F38',
fullLabelBackground: '#3B3C41',
labelBackgroundTerminatedProcess: '#8A96A8',
labelBackgroundTerminatedTrigger: '#8A96A8',
labelBackgroundRunningProcess: '#8A96A8',
labelBackgroundRunningTrigger: '#8A96A8',
inertDescription: '#747474',
};

Expand Down
94 changes: 81 additions & 13 deletions x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -21,40 +27,78 @@ 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',
}),
},
runningTriggerCube: {
cubeSymbol: `#${SymbolIds.runningTriggerCube}`,
labelBackground: NamedColors.fullLabelBackground,
labelBackground: NamedColors.labelBackgroundRunningTrigger,
descriptionFill: NamedColors.empty,
descriptionText: i18n.translate('xpack.endpoint.resolver.runningTrigger', {
defaultMessage: 'Running Trigger',
}),
},
terminatedProcessCube: {
cubeSymbol: `#${SymbolIds.terminatedProcessCube}`,
labelBackground: NamedColors.fullLabelBackground,
labelBackground: NamedColors.labelBackgroundTerminatedProcess,
descriptionFill: NamedColors.empty,
descriptionText: i18n.translate('xpack.endpoint.resolver.terminatedProcess', {
defaultMessage: 'Terminated Process',
}),
},
terminatedTriggerCube: {
cubeSymbol: `#${SymbolIds.terminatedTriggerCube}`,
labelBackground: NamedColors.fullLabelBackground,
labelBackground: NamedColors.labelBackgroundTerminatedTrigger,
descriptionFill: NamedColors.empty,
descriptionText: i18n.translate('xpack.endpoint.resolver.terminatedTrigger', {
defaultMessage: 'Terminated Trigger',
}),
},
};

const ChildEventsButton = () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Not sure if it's useful but should we add the data-test-subj to any of these buttons? @achuguy @IgorGuz2000

Copy link
Contributor

Choose a reason for hiding this comment

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

we should add data-test-subj attributes in the PR where they are used.

Copy link
Contributor

Choose a reason for hiding this comment

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

you can wrap these new components in
React.memo if ya want:

https://reactjs.org/docs/react-api.html#reactmemo

return (
<EuiButton
onClick={(clickEvent: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

same thing as below, but could you wrap the function in useCallback

clickEvent.preventDefault();
clickEvent.stopPropagation();
}}
color="ghost"
size="s"
iconType="arrowDown"
iconSide="right"
tabIndex={-1}
>
{i18n.translate('xpack.endpoint.resolver.relatedEvents', {
defaultMessage: 'Events',
})}
</EuiButton>
);
};

const RelatedAlertsButton = () => {
return (
<EuiButton
onClick={(clickEvent: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
Copy link
Contributor

@oatkiller oatkiller Apr 17, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

can you wrap the functions in useCallback, this way EuiButton will get the same function reference each time RelatedAlertsButton is rendered, and EuiButton won't necessarily have to rerender just because its parent did.

<EuiButton
  onClick={useCallback((clickEvent: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    clickEvent.preventDefault();
    clickEvent.stopPropagation();
  }, [])}

clickEvent.preventDefault();
clickEvent.stopPropagation();
}}
color="ghost"
size="s"
tabIndex={-1}
>
{i18n.translate('xpack.endpoint.resolver.relatedAlerts', {
defaultMessage: 'Related Alerts',
})}
</EuiButton>
);
};

/**
* A placeholder view for a process node.
* An artefact that represents a process node.
*/
export const ProcessEventDot = styled(
React.memo(
Expand Down Expand Up @@ -184,6 +228,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
Expand Down Expand Up @@ -256,13 +301,17 @@ export const ProcessEventDot = styled(
</svg>
<div
style={{
display: 'flex',
flexFlow: 'column',
left: '25%',
top: '30%',
position: 'absolute',
width: '50%',
color: 'white',
color: NamedColors.full,
fontSize: `${scaledTypeSize}px`,
lineHeight: '140%',
backgroundColor: NamedColors.resolverBackground,
padding: '.25rem',
}}
>
<div
Expand All @@ -271,33 +320,50 @@ export const ProcessEventDot = styled(
textTransform: 'uppercase',
letterSpacing: '-0.01px',
backgroundColor: NamedColors.resolverBackground,
lineHeight: '1.2',
lineHeight: '1',
fontWeight: 'bold',
fontSize: '.5em',
fontSize: '0.8rem',
width: '100%',
margin: '0 0 .05em 0',
margin: '0',
textAlign: 'left',
padding: '0',
color: NamedColors.empty,
}}
>
{descriptionText}
</div>
<div
className={magFactorX >= 2 ? 'euiButton' : 'euiButton euiButton--small'}
data-test-subject="nodeLabel"
id={labelId}
style={{
backgroundColor: labelBackground,
padding: '.15em 0',
padding: '.15rem 0',
textAlign: 'center',
maxWidth: '100%',
maxWidth: '20rem',
minWidth: '12rem',
width: '60%',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
contain: 'content',
margin: '.25rem 0 .35rem 0',
}}
>
{eventModel.eventName(event)}
<span className="euiButton__content">
<span className="euiButton__text">{eventModel.eventName(event)}</span>
</span>
</div>
{magFactorX >= 2 && (
bkimmel marked this conversation as resolved.
Show resolved Hide resolved
<EuiFlexGroup justifyContent="flexStart" gutterSize="xs">
<EuiFlexItem grow={false}>
<RelatedAlertsButton />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ChildEventsButton />
</EuiFlexItem>
</EuiFlexGroup>
)}
</div>
</div>
</EuiKeyboardAccessible>
Expand All @@ -317,6 +383,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.
Expand Down
3 changes: 2 additions & 1 deletion x-pack/plugins/endpoint/scripts/alert_mapping.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -394,7 +394,8 @@
"type": "nested"
},
"file_extension": {
"type": "long"
"ignore_above": 1024,
bkimmel marked this conversation as resolved.
Show resolved Hide resolved
"type": "keyword"
},
"project_file": {
"properties": {
Expand Down
3 changes: 2 additions & 1 deletion x-pack/plugins/endpoint/scripts/event_mapping.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,7 +386,8 @@
"type": "nested"
},
"file_extension": {
"type": "long"
"ignore_above": 1024,
"type": "keyword"
},
"project_file": {
"properties": {
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/endpoint/scripts/resolver_generator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ async function main() {
alertIndex: {
alias: 'ai',
describe: 'index to store alerts in',
default: '.alerts-endpoint-000001',
default: 'events-endpoint-1',
Copy link
Contributor

Choose a reason for hiding this comment

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

@bkimmel I agree that we should probably keep this as events-endpoint-1 since that's what the app is looking for in master.

@elastic/endpoint-response are you ok with this?

type: 'string',
},
eventIndex: {
Expand Down