UI Polish for Session viewer frame + buttons #128188

animehart · 2022-03-21T17:33:32Z

Summary

UI Polish/Fixes based on QA Notes

Detail panel

➡️ Link to Figma file

Detail Panels sizing: Min width: 320 px; Max width: 640 px; Default width:w 360 px;
Fix typography in Detail Items
Detail Items height: 32 px
Fix spacing between Items
Fix padding between last Item and next section. Should be 16 px
Add Border-left to Details Panel Border-left box-shadow: 1px 0px 0px 0px #D3DAE6 inset;
Fix button states for Detail Panel ➡️ Toggle button specs in EUI

Toolbar

Change background color to background: #EEF2F7;
Change copy in search field from "Search" to "Find"
Add divider between Toolbar and Session frame: EuiHorizontalRule https://elastic.github.io/eui/#/layout/horizontal-rule

Find results interaction

Highlighted findings specs: Selected state: background: #FEC514;, Default state: background: #FEC51452;
No border-radius for highlight
Jump to findings below the viewport should scroll the session viewer content
There is an issue with a long text in the search field. It overlaps with stepper-control. Text should go under stepper control. Example EuiFieldSearch https://codesandbox.io/s/hz7boq?file=/demo.js

Session viewer frame

Border around the entire session viewer: border: 1px solid #D3DAE6
Fix Expandable badges style. ➡️ Link to Figma file QA
Fix paddings in process line ➡️ Link to Figma file QA
Fix font styles for process lines ➡️ Link to Figma file QA
States for process rows ➡️ Link to Figma file QA
Update icons ➡️ Link to Figma file QA

animehart · 2022-03-21T23:09:22Z

Still WIP:

Details Panel
Find results interaction ??

mitodrummer · 2022-03-22T05:20:27Z

If possible can you link the QA notes.

mitodrummer · 2022-03-22T05:21:07Z

Still WIP:

Details Panel

Find results interaction ??

looks like a rogue ';' got into your tsx somewhere.

x-pack/plugins/session_view/public/components/process_tree_node/use_button_styles.ts

x-pack/plugins/session_view/public/components/session_view/styles.ts

x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx

mitodrummer

Looking great, just a few notes.

x-pack/plugins/session_view/public/components/session_view/styles.ts

opauloh · 2022-03-22T13:06:29Z

x-pack/plugins/session_view/public/components/session_view/index.tsx

+                      fetchNextPage={fetchNextPage}
+                      fetchPreviousPage={fetchPreviousPage}
+                      setSearchResults={setSearchResults}
+                      timeStampOn={displayOptions.timestamp}


note: think on the future we can replace to pass only one property displayOptions={displayOptions} to suit all display options (don't need to do it right now)

…ui-polish-qanotes

animehart · 2022-03-23T00:36:19Z

Still WIP:

Highlight color state for searched object (32% opacity color.warning default, color.warning when chosen)
There's a bug where the Timestamp moved to the left when user search some text

…el, Timestamp bug fix

animehart · 2022-03-23T20:00:27Z

mitodrummer · 2022-03-23T20:06:38Z

Still WIP:

Highlight color state for searched object (32% opacity color.warning default, color.warning when chosen)

There's a bug where the Timestamp moved to the left when user search some text

Yea, I noticed the timestamp is wrapped in a weird way when the command is very long. float: right might not be the best approach. perhaps it should be put inline with the rest of the command line and use flexbox to align it to the right, or have a spacer to push it to the right.

x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx

opauloh

great, only a few notes

x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts

mitodrummer

just the hardcoded font-size, other than that looks good.

opauloh

lgtm!

x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts

x-pack/plugins/session_view/public/components/session_view_search_bar/styles.ts

kibana-ci · 2022-03-29T15:03:22Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`sessionView`	94	95	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`sessionView`	50.3KB	51.5KB	+1.2KB

History

💚 Build #34238 succeeded cb5c471
💚 Build #33836 succeeded ab4a89b
💚 Build #33733 succeeded b872de2
💚 Build #33347 succeeded 5532ea8
💔 Build #33343 failed 07b4422
💔 Build #33324 failed 4de6e08

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

cc @animehart

UI Polish for Session viewer frame + buttons

6793296

animehart linked an issue Mar 21, 2022 that may be closed by this pull request

[Security Solution] Session view UI polish based on the QA notes #127992

Closed

21 tasks

UI Update for Session Viewer + Toolbar

2369576

animehart requested review from mitodrummer, codearos, opauloh and zizhouW March 21, 2022 23:09

added Left Borders on Details panel + Fix Details panel button behaviour

eef4eec

Merge branch 'main' into ui-polish-qanotes

266d7a9

mitodrummer reviewed Mar 22, 2022

View reviewed changes

x-pack/plugins/session_view/public/components/process_tree_node/use_button_styles.ts Show resolved Hide resolved

mitodrummer reviewed Mar 22, 2022

View reviewed changes

x-pack/plugins/session_view/public/components/session_view/styles.ts Outdated Show resolved Hide resolved

mitodrummer reviewed Mar 22, 2022

View reviewed changes

x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx Outdated Show resolved Hide resolved

mitodrummer suggested changes Mar 22, 2022

View reviewed changes

opauloh reviewed Mar 22, 2022

View reviewed changes

x-pack/plugins/session_view/public/components/session_view/styles.ts Outdated Show resolved Hide resolved

opauloh reviewed Mar 22, 2022

View reviewed changes

animehart added 2 commits March 22, 2022 16:14

Details Panel UI Polish + PR Comments

7adad7a

Merge branch 'ui-polish-qanotes' of github.com:animehart/kibana into …

5920826

…ui-polish-qanotes

Find results interaction UI Polish, Def/Min/Max width for details pan…

08d3a6e

…el, Timestamp bug fix

animehart added 4 commits March 23, 2022 17:31

merging with main , fix conflict

f97eb92

more conflict fixes

4de6e08

removed unused variable

07b4422

fix for failed checks on buildkite #1

5532ea8

animehart self-assigned this Mar 24, 2022

animehart added the Team: AWP: Platform Adaptive Workload Protection Platform team from Security Solution label Mar 24, 2022

animehart added release_note:enhancement v8.2.0 backport:skip This commit does not require backporting labels Mar 24, 2022

fix conflict

b872de2

opauloh reviewed Mar 25, 2022

View reviewed changes

x-pack/plugins/session_view/public/components/session_view_search_bar/index.tsx Outdated Show resolved Hide resolved

opauloh requested changes Mar 25, 2022

View reviewed changes

animehart added 2 commits March 27, 2022 19:49

Addressing PR comments

2085602

Merge branch 'master' into ui-polish-qanotes

ab4a89b

mitodrummer reviewed Mar 28, 2022

View reviewed changes

x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts Outdated Show resolved Hide resolved

animehart requested review from mitodrummer and opauloh March 28, 2022 16:24

mitodrummer suggested changes Mar 28, 2022

View reviewed changes

PR Comments + Search bar UI bug fix

cb5c471

animehart requested a review from mitodrummer March 28, 2022 21:04

mitodrummer approved these changes Mar 28, 2022

View reviewed changes

zizhouW approved these changes Mar 29, 2022

View reviewed changes

opauloh approved these changes Mar 29, 2022

View reviewed changes

opauloh reviewed Mar 29, 2022

View reviewed changes

x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts Outdated Show resolved Hide resolved

opauloh reviewed Mar 29, 2022

View reviewed changes

x-pack/plugins/session_view/public/components/session_view_search_bar/styles.ts Outdated Show resolved Hide resolved

pr comments

a0766b7

animehart requested a review from a team March 29, 2022 13:38

animehart merged commit 3bd3eb1 into elastic:main Mar 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI Polish for Session viewer frame + buttons #128188

UI Polish for Session viewer frame + buttons #128188

animehart commented Mar 21, 2022 •

edited by dimadavid

animehart commented Mar 21, 2022

mitodrummer commented Mar 22, 2022

mitodrummer commented Mar 22, 2022

mitodrummer left a comment

opauloh Mar 22, 2022

animehart commented Mar 23, 2022

animehart commented Mar 23, 2022

mitodrummer commented Mar 23, 2022

opauloh left a comment

mitodrummer left a comment

opauloh left a comment

kibana-ci commented Mar 29, 2022

UI Polish for Session viewer frame + buttons #128188

UI Polish for Session viewer frame + buttons #128188

Conversation

animehart commented Mar 21, 2022 • edited by dimadavid

Summary

Detail panel

Toolbar

Find results interaction

Session viewer frame

animehart commented Mar 21, 2022

mitodrummer commented Mar 22, 2022

mitodrummer commented Mar 22, 2022

mitodrummer left a comment

Choose a reason for hiding this comment

opauloh Mar 22, 2022

Choose a reason for hiding this comment

animehart commented Mar 23, 2022

animehart commented Mar 23, 2022

mitodrummer commented Mar 23, 2022

opauloh left a comment

Choose a reason for hiding this comment

mitodrummer left a comment

Choose a reason for hiding this comment

opauloh left a comment

Choose a reason for hiding this comment

kibana-ci commented Mar 29, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

animehart commented Mar 21, 2022 •

edited by dimadavid