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

michaelolo24 merged 5 commits into elastic:master from michaelolo24:analyzed-event-styling

Sep 14, 2020

Contributor

michaelolo24 commented Sep 9, 2020

Summary

1. Adds styling for the node that was selected from the timeline for Analysis.

2. Selection outline for nodes are now all the same (i.e. running and terminated nodes have same darker blue outline)

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
This was checked for cross-browser compatibility

michaelolo24 added v8.0.0 release_note:skip Team:Endpoint Data Visibility Feature:Resolver v7.10.0 labels

michaelolo24 requested a review from monina-n

September 9, 2020 20:48

michaelolo24 requested review from a team as code owners

September 9, 2020 20:48

Contributor

elasticmachine commented Sep 9, 2020

Pinging @elastic/endpoint-app-team (Feature:Resolver)

Contributor

elasticmachine commented Sep 9, 2020

Pinging @elastic/endpoint-data-visibility-team (Team:Endpoint Data Visibility)

michaelolo24 commented

View reviewed changes

x-pack/plugins/security_solution/public/resolver/view/assets.tsx

@@ @@ -475,7 +475,7 @@ export const useResolverTheme = (): { @@
                     ),
                     isLabelFilled: false,
                     labelButtonFill: 'primary',
-                    strokeColor: `${theme.euiColorPrimary}33`, // 33 = 20% opacity

Contributor Author

michaelolo24 Sep 9, 2020

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

michaelolo24 commented

View reviewed changes

x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx

@@ @@ -351,6 +358,20 @@ const UnstyledProcessEventDot = React.memo( @@
                             height={markerSize * 1.5}
                             className="backing"
                           />
+                          {isOrigin && (

Contributor Author

michaelolo24 Sep 9, 2020

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.

monina-n approved these changes

View reviewed changes

bkimmel reviewed

View reviewed changes

x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx

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

Contributor

bkimmel Sep 10, 2020

ℹ️ 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/

Contributor

bkimmel Sep 10, 2020

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

bkimmel reviewed

View reviewed changes

x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx Outdated Show resolved Hide resolved

bkimmel approved these changes

View reviewed changes

Contributor

bkimmel left a comment

Nice!

Contributor Author

michaelolo24 commented Sep 10, 2020

@elasticmachine merge upstream

jonathan-buttner approved these changes

View reviewed changes

x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx Outdated

@@ @@ -99,7 +100,9 @@ const UnstyledProcessEventDot = React.memo( @@
                    */
                   timeAtRender: number;
                 }) => {
-                  const resolverComponentInstanceID = useSelector(selectors.resolverComponentInstanceID);
+                  const resolverComponentInstanceID = useSelector((state: ResolverState) =>

Contributor

jonathan-buttner Sep 10, 2020

For my own edification, what's the difference with using the arrow function vs just passing in selectors.resolverComponentInstanceID? Does it not pass the state by default?

Contributor Author

michaelolo24 Sep 10, 2020 •

edited

Thanks, it doesn't change anything actually. I just thought some of these weren't updated based on some other useSelector changes I remembered seeing, but those changes were primarily due to how useSelector handles thunks, but these aren't thunks so it was an unnecessary change. I reverted it 😄

michaelolo24 force-pushed the analyzed-event-styling branch from 2c2273c to 12fd862 Compare

September 10, 2020 16:23

oatkiller reviewed

View reviewed changes

x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx Outdated

@@ @@ -384,6 +401,15 @@ const UnstyledProcessEventDot = React.memo( @@
                           color={colorMap.descriptionText}
                           isDisplaying={isShowingDescriptionText}
                         >
+                          {isOrigin && (
+                            <>

Contributor

oatkiller Sep 10, 2020

Maybe put the 'analyzed event' text, the dot, and the descriptionText into a single formatted message. This will allow translators to, for example, swap out the dot with something locale specific, or reverse the order.

Contributor Author

michaelolo24 Sep 10, 2020

Yea, makes sense. I've updated it

michaelolo24 force-pushed the analyzed-event-styling branch from 4f6ae90 to fb249df Compare

September 10, 2020 18:30

michaelolo24 added 5 commits

September 14, 2020 10:59


          changed cube outline pattern

608adce


          layer cube backing

57210a9


          removed unnecessary pattern

bf968e1


          move all text into formatted message

595c484


          updated text format

eabe8c1

michaelolo24 force-pushed the analyzed-event-styling branch from fb249df to eabe8c1 Compare

September 14, 2020 14:59

Contributor

kibanamachine commented Sep 14, 2020

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: eabe8c1

Build metrics

async chunks size

id	value	diff	baseline
securitySolution	10.0MB	+1.4KB	10.0MB

History

💔 Build #73825 failed fb249df
💔 Build #73787 failed 12fd862
💚 Build #73721 succeeded 2c2273c
💚 Build #73534 succeeded b808ad0

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

michaelolo24 merged commit 5c457d1 into elastic:master

michaelolo24 deleted the analyzed-event-styling branch

September 14, 2020 16:56

michaelolo24 mentioned this pull request

[7.x] [Security Solution][Resolver] Analyzed event styling (#77115) #77375

Merged

michaelolo24 added a commit to michaelolo24/kibana that referenced this pull request


          [Security Solution][Resolver] Analyzed event styling (elastic#77115)

77b9a54

gmmorris added a commit to gmmorris/kibana that referenced this pull request


          Merge branch 'master' into actions/test-connector

91ea9c5

* master: (65 commits)
  [Security Solution][Resolver] Analyzed event styling (elastic#77115)
  filter invalid SOs from the searc hresults in Task Manager (elastic#76891)
  [RUM Dashboard] Visitors by region map (elastic#77135)
  [Security Solution][Endpoint][Admin] Task/endpoint list actions (elastic#76555)
  [Ingest pipelines] Forms for processors T-U (elastic#76710)
  updating datatable type (elastic#77320)
  [ML] Fix custom URLs processing for security app (elastic#76957)
  [telemetry] add schema guideline + schema_check new check for --path config (elastic#75747)
  [ML] Transforms: API schemas and integration tests (elastic#75164)
  [Mappings editor] Add support for wildcard field type (elastic#76574)
  [Ingest Manager] Fix flyout instruction selection (elastic#77071)
  [Telemetry Tools] update lodash to 4.17 (elastic#77317)
  [APM] Service inventory redesign (elastic#76744)
  Hide management sections based on cluster/index privileges (elastic#67791)
  [Snapshot Restore] Disable steps when form is invalid (elastic#76540)
  [Mappings editor] Add support for positive_score_impact to rank_feature (elastic#76824)
  Update apm.ts (elastic#77310)
  [OBS] Remove beta badge, change news feed size and add external icon to news feed link (elastic#77164)
  [Discover] Convert legacy sort to be compatible with multi sort (elastic#76986)
  [APM] API Snapshot Testing (elastic#77229)
  ...

gmmorris added a commit to gmmorris/kibana that referenced this pull request


          Merge branch 'master' into alerts/improve-find-pref

b4729a4

* master: (65 commits)
  [Security Solution][Resolver] Analyzed event styling (elastic#77115)
  filter invalid SOs from the searc hresults in Task Manager (elastic#76891)
  [RUM Dashboard] Visitors by region map (elastic#77135)
  [Security Solution][Endpoint][Admin] Task/endpoint list actions (elastic#76555)
  [Ingest pipelines] Forms for processors T-U (elastic#76710)
  updating datatable type (elastic#77320)
  [ML] Fix custom URLs processing for security app (elastic#76957)
  [telemetry] add schema guideline + schema_check new check for --path config (elastic#75747)
  [ML] Transforms: API schemas and integration tests (elastic#75164)
  [Mappings editor] Add support for wildcard field type (elastic#76574)
  [Ingest Manager] Fix flyout instruction selection (elastic#77071)
  [Telemetry Tools] update lodash to 4.17 (elastic#77317)
  [APM] Service inventory redesign (elastic#76744)
  Hide management sections based on cluster/index privileges (elastic#67791)
  [Snapshot Restore] Disable steps when form is invalid (elastic#76540)
  [Mappings editor] Add support for positive_score_impact to rank_feature (elastic#76824)
  Update apm.ts (elastic#77310)
  [OBS] Remove beta badge, change news feed size and add external icon to news feed link (elastic#77164)
  [Discover] Convert legacy sort to be compatible with multi sort (elastic#76986)
  [APM] API Snapshot Testing (elastic#77229)
  ...

michaelolo24 added a commit that referenced this pull request


          [7.x] [Security Solution][Resolver] Analyzed event styling (#77115) (#…

9310afc

…77375)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment