base changes for active/current node styling#62007
Merged
bkimmel merged 17 commits intoelastic:masterfrom Apr 3, 2020
bkimmel:resolver/active-desc-styling
Merged
base changes for active/current node styling#62007bkimmel merged 17 commits intoelastic:masterfrom bkimmel:resolver/active-desc-styling
bkimmel merged 17 commits intoelastic:masterfrom
bkimmel:resolver/active-desc-styling
Conversation
added 10 commits
March 31, 2020 11:38
…ver/active-desc-styling
Contributor
Author
|
Up next: I'm putting in the backing behind the label as shown here to match comps. |
bkimmel
commented
Apr 2, 2020
| height={markerSize * 1.5} | ||
| className="backing" | ||
| /> | ||
| <rect x="7" y="-12.75" width="15" height="10" fill={NamedColors.resolverBackground} /> |
Contributor
Author
There was a problem hiding this comment.
Positioning with constants here to make the upstream merge with Robert's work easier later
Contributor
There was a problem hiding this comment.
either way it'll be a one line change when merging in his changes, not sure how much easier it is to wait
bkimmel
commented
Apr 2, 2020
| import { ResolverState, ResolverAction, ResolverUIState } from '../types'; | ||
|
|
||
| const uiReducer: Reducer<ResolverUIState, ResolverAction> = ( | ||
| uiState = { activeDescendentId: null }, |
Contributor
Author
There was a problem hiding this comment.
ℹ️ Fun fact: "descendant" and "descendent" (at least in en-US) have slightly different meanings. "descendant" with a "a" is defined as a noun meaning a person, plant, or animal that is descended from a particular ancestor and "descendent" with an adjective "e" meaning descending from an ancestor. Given that many other ARIA attributes are also adjectives ("required","relevant") and a document element is difficult to classify as a "person, plant or animal" I would have suggested "descendent" as the better term, but 🤷♂
Contributor
|
Pinging @elastic/endpoint-app-team (Feature:Resolver) |
marrasherrier
approved these changes
Apr 2, 2020
jonathan-buttner
approved these changes
Apr 2, 2020
Contributor
jonathan-buttner
left a comment
There was a problem hiding this comment.
Looks fine to me but might want to wait for a 👍 from Kevin or Rob
bkimmel
commented
Apr 3, 2020
| ...uiState, | ||
| selectedDescendantId: action.payload.nodeId, | ||
| }; | ||
| } else if (action.type === 'userBroughtProcessIntoView') { |
bkimmel
commented
Apr 3, 2020
| import { ResolverState, ResolverAction, ResolverUIState } from '../types'; | ||
| import { uniquePidForProcess } from '../models/process_event'; | ||
|
|
||
| const resolverNodeIdGenerator = htmlIdGenerator('resolverNode'); |
Contributor
Author
There was a problem hiding this comment.
todo: comment re: deterministic ID behavior
oatkiller
reviewed
Apr 3, 2020
| const labelId = useMemo(() => resolverNodeIdGenerator(), [resolverNodeIdGenerator]); | ||
| const descriptionId = useMemo(() => resolverNodeIdGenerator(), [resolverNodeIdGenerator]); | ||
|
|
||
| const isActiveDescendant = useMemo(() => { |
Contributor
There was a problem hiding this comment.
consider removing useMemo
oatkiller
reviewed
Apr 3, 2020
| will-change: left, top, width, height; | ||
| contain: strict; | ||
|
|
||
| & .backing { |
Contributor
There was a problem hiding this comment.
could you add a comment explaining that this enables the animated stroke when a node becomes active, and explain that dasharray and dashoffset should be the same value, and that the value should be larger than the length of the path?
kqualters-elastic
approved these changes
Apr 3, 2020
| height={markerSize * 1.5} | ||
| className="backing" | ||
| /> | ||
| <rect x="7" y="-12.75" width="15" height="10" fill={NamedColors.resolverBackground} /> |
Contributor
There was a problem hiding this comment.
either way it'll be a one line change when merging in his changes, not sure how much easier it is to wait
Contributor
💛 Build succeeded, but was flaky
Test FailuresKibana Pipeline / kibana-xpack-agent / Chrome X-Pack UI Functional Tests.x-pack/test/functional/apps/security/management·js.security app Management Security navigation Clicking save in create role section brings user back to listingStandard OutStack TraceHistory
To update your PR or re-run it, just comment with: |
gmmorris
added a commit
to gmmorris/kibana
that referenced
this pull request
Apr 6, 2020
…into event-log/query-support * 'event-log/query-support' of github.com:gmmorris/kibana: (41 commits) [jenkins] refer to sizes in most pipeline code (elastic#62082) skip flaky suite (elastic#60470) [Discover] Fix flaky FT in field visualize (elastic#62418) [ML] Data Frame Analytics: Fix feature importance (elastic#61761) [Reporting] Use a shim for server config (elastic#62086) [Reporting] Fix reporting for non-default spaces (elastic#62226) Fix bug that coerced empty scaled float value to 0 (elastic#62251) [SIEM] [Detection Engine] Remove has manage api keys requireme… (elastic#62446) [Maps] Safely handle empty string and invalid strings from EuiColorPicker (elastic#62507) Reporting/bug more blacklisted headers (elastic#62389) [SIEM] Prevent undefined behavior in our ML popover (elastic#62498) [SIEM] [Detection Engine] remove all unknowns from all rules t… (elastic#62327) base changes for active/current node styling (elastic#62007) [kbn/ui-shared-deps] expand and split (elastic#62364) [ML] DF Analytics - ensure destination index pattern created (elastic#62450) Mark rule run as failure if there was an error (elastic#62383) Add docs for metric explorer alerts (elastic#62314) skip flaky suite (elastic#62281) [SIEM][Detection Engine] Fixes export of single rule and the icons fixes flakiness (elastic#62406) ...
Contributor
|
Friendly reminder: Looks like this PR hasn’t been backported yet. |
Contributor
|
Friendly reminder: Looks like this PR hasn’t been backported yet. |
bkimmel
added a commit
that referenced
this pull request
Apr 10, 2020
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
8 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
We're implementing the "active state" (unselected) style on nodes as provided by Security Design / UX ( @marrasherrier / @lindseypoli ). To keep "active" separate from "current", a locus and reducer was added to the Resolver UI state ( https://github.com/elastic/kibana/pull/62007/files#diff-118fa940615495cf306a955b1341de5bR13 ). The "encircling" effect is created by adding a shape identical to the outline of the "cube" it surrounds ( https://github.com/elastic/kibana/pull/62007/files#diff-b18117271821fdd985eed1e1c4fd749fR212 )
and animated when the node takes the "current" state by applying an offset to its
stroke-dasharray( https://github.com/elastic/kibana/pull/62007/files#diff-b18117271821fdd985eed1e1c4fd749fR308 )edit: late change - updated the reducer to activate the node that the panel pans to on icon click (
https://github.com/elastic/kibana/pull/62007/files#diff-118fa940615495cf306a955b1341de5bR31
)
Screenshot:
late change - sync with panel:
FF:
Adds "active-descendant/selected" style to Resolver nodes per mocks depicted here:
##Comp from D/UX: For comparison to screenshot above
Please note, this is the mock from security design, not a screenshot
Please note, this is the mock from security design, not a screenshot
Checklist
Delete any items that are not applicable to this PR.
For maintainers