[Search Session] Revamp search session indicator UI and tour. #89703

Dosant · 2021-01-29T11:58:28Z

Summary

Doing a small search session indicator UI closer to recent figma + adding a Tour like functionality when can auto-opens in the first run.

This pr also removes the "refresh" button from the canceled/completed/restored state because it added complexity and was doing the same thing as "refresh" from the query bar.

Please note, out of scope in this PR comparing to Figma:

x Session name display
x Session name editing
x Dates/timestamps display

To enable feature in kibana and to kibana.yml:

xpack.data_enhanced.search.sessions.enabled: true

To play in the storybook:

yarn storybook data_enhanced

Tour

As per figma we agreed instead of a separate tour just-auto open the popover in the following cases:

In loading state search take longer than 10 seconds
first time when navigated to restored state

Popover is auto-opened once and info about whether it was opened is persisted in local storage.

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
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

because removed debounce when switching to NONE state

elasticmachine · 2021-01-29T21:11:41Z

Pinging @elastic/kibana-app-services (Team:AppServices)

Dosant · 2021-02-01T07:12:23Z

@elasticmachine merge upstream

…i-revamp

… dev/session/ui-revamp

Dosant · 2021-02-01T17:55:14Z

@elasticmachine merge upstream

mdefazio · 2021-02-01T22:24:18Z

After discussing with @gchaps , here is where we ended up with the copy.

Data loading New icon:

Your search is taking a while...
Save your session, continue your work, and return to completed results.

Data complete:

Search session complete
Save your session and return to it later.

Session saved that is in progress:

Saved session in progress. 
You can return to completed results from Management.

Session saved that was complete:

Search session saved
You can return to these results from Management.

Saved Session complete:

Saved session complete. 
You can return to these results from Management.

Session restored New icon:

Saved session restored
You are viewing cached data from a specific time range. Changing the time range or filters will re-run the session.```

Session canceled:

Search session stopped
You are viewing incomplete data.

I am introducing 2 new icons that are slight variants to current icons. My hope is that these help introduce these new concepts, but aren't using icons that are potentially known for other things in Kibana. In regards to the loading / clock icon, this will make more sense when we introduce the time stamp. However, I think they still work without it. I know I'm suggesting a departure from the restored state icon, but I still think it's important to have that continuity from management with a green checkmark, so the dashboard with a green checkmark. This is why I did a slight variation on this to suggest the subtle difference between this view, compared to the view if I stay on the page and it completes.

If we think the restored state does not provide enough indication that the time range is set to absolute, I would suggest using the tour component for this and highlighting the date picker. Example below: This is not final copy

lizozom · 2021-02-02T09:11:36Z

...d/public/search/ui/connected_search_session_indicator/connected_search_session_indicator.tsx

 }: SearchSessionIndicatorDeps): React.FC => {
  const isAutoRefreshEnabled = () => !timeFilter.getRefreshInterval().pause;
  const isAutoRefreshEnabled$ = timeFilter
    .getRefreshIntervalUpdate$()
    .pipe(map(isAutoRefreshEnabled), distinctUntilChanged());

+  const debouncedSessionServiceState$ = sessionService.state$.pipe(


Couldn't you listen to the appId$ change instead?

No, for example: navigating from a dashboard page to a dashboard listing page

Dosant · 2021-02-02T16:01:21Z

@mdefazio,

I think it might also make sense to use 'Search session saved' as opposed to 'Saved session complete' if we have to merge these 2 states.

Done!

Testing this in dark mode and in Amsterdam: It looks like because the session indicator icon is in the breadcrumbs, it's breaking the height of the breadcrumbs. Also, due to the color of the current page, it makes the icon nearly unreadable.

Created an issue, will prioritize and work in separate pr: #90028
Since this isn't introduced in this pr but is also in master, I wouldn't block this pr.

Dosant · 2021-02-02T20:14:59Z

@elasticmachine merge upstream

mdefazio · 2021-02-02T21:19:04Z

@gchaps and I were trying to finalize the copy for the tour component, but we had a few questions.

Is a search session will be accessible to anyone in that space? So the person viewing this (for the first time) might not be the person who saved the session?
Will we know if the time range was previously relative (but is now absolute)? And so will this show regardless if it was relative or absolute?
Is the primary purpose of this to forewarn them about changing filters/time since it will likely be a long-running session? Or is it about changing from relative time to absolute time?

Gail, let me know if I missed any of our questions.

And let me know if this is not the right issue for this discussion.

Dosant · 2021-02-03T08:28:41Z

@mdefazio, I created an issue for the time range change tour: #90130, let's continue the discussion there

…i-revamp # Conflicts: # x-pack/test/send_search_to_background_integration/services/search_sessions.ts # x-pack/test/send_search_to_background_integration/tests/apps/management/search_sessions/sessions_management.ts

dmlemeshko

kibana-qa changes LGTM

Dosant · 2021-02-03T14:07:04Z

@elasticmachine merge upstream

mdefazio

Looks good! Thanks for working through all the last minute design edits!

ThomThomson

Tiny Dashboard change LGTM. Code only review.

The new designs are looking awesome, can't wait to see them in master!

kertal · 2021-02-03T17:43:50Z

ACK, code LGTM, will test tomorrow morning

kertal · 2021-02-04T05:56:10Z

@elasticmachine merge upstream

kertal

KibanaApp owned code LGTM, tested locally in Chrome, works and looks as beautiful as expected 👍

…i-revamp

kibanamachine · 2021-02-04T13:07:26Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 30d976d

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`dataEnhanced`	93	95	+2

Async chunks

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

id	before	after	diff
`dashboard`	176.4KB	176.4KB	-31.0B
`dataEnhanced`	150.6KB	147.7KB	-2.9KB
`discover`	417.1KB	416.9KB	-159.0B
total			-3.1KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`data`	797.9KB	797.7KB	-202.0B
`dataEnhanced`	33.6KB	36.1KB	+2.6KB
total			+2.4KB

History

💔 Build #103716 failed 24f2916
💔 Build #103689 failed d4bb5a2
💚 Build #103409 succeeded 5aa414d
💚 Build #103320 succeeded d75eaca
💚 Build #103168 succeeded 900c4f6

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

…#89703)

…#90277)

Dosant added 2 commits January 29, 2021 12:52

ui revamp

8edc6fa

test

80660c8

Dosant mentioned this pull request Jan 29, 2021

[Search Session] Revamp search session indicator UI and tour. (Restore -> Completed) #89740

Closed

9 tasks

Dosant added 2 commits January 29, 2021 18:52

close popover on rerun

540b217

because removed debounce when switching to NONE state

fix ts

d73cc13

Dosant added Feature:Search Querying infrastructure in Kibana Team:AppServices v7.12.0 v8.0.0 release_note:skip Skip the PR/issue when compiling release notes labels Jan 29, 2021

Dosant marked this pull request as ready for review January 29, 2021 21:11

Dosant requested review from a team as code owners January 29, 2021 21:11

Dosant requested review from mdefazio, gchaps and lizozom January 29, 2021 21:11

kibanamachine and others added 4 commits February 1, 2021 02:12

Merge branch 'master' into dev/session/ui-revamp

1ee95e4

Merge branch 'master' of github.com:elastic/kibana into dev/session/u…

09d8218

…i-revamp

Merge branch 'dev/session/ui-revamp' of github.com:Dosant/kibana into…

36def9d

… dev/session/ui-revamp

remove onRefresh from session service

c08c5ec

Dosant requested a review from a team February 1, 2021 14:54

Dosant requested a review from a team as a code owner February 1, 2021 14:54

fix build

8eeca77

Merge branch 'master' into dev/session/ui-revamp

57a184f

lizozom reviewed Feb 2, 2021

View reviewed changes

fix tests

ae9c98a

Dosant mentioned this pull request Feb 2, 2021

[Search Sessions] Search session indicator in Amsterdam theme #90028

Closed

Dosant requested a review from mdefazio February 2, 2021 16:02

Dosant added 3 commits February 2, 2021 17:35

fix

3cd9b50

fix tests

e7cbd20

fix tour test

46a0af6

Merge branch 'master' into dev/session/ui-revamp

900c4f6

Dosant mentioned this pull request Feb 3, 2021

[Search Sessions] Time range change tour #90130

Closed

dmlemeshko approved these changes Feb 3, 2021

View reviewed changes

Merge branch 'master' into dev/session/ui-revamp

5aa414d

mdefazio approved these changes Feb 3, 2021

View reviewed changes

ThomThomson approved these changes Feb 3, 2021

View reviewed changes

Merge branch 'master' into dev/session/ui-revamp

d4bb5a2

kertal approved these changes Feb 4, 2021

View reviewed changes

Dosant added 3 commits February 4, 2021 08:51

fix tour

24f2916

Merge branch 'master' of github.com:elastic/kibana into dev/session/u…

19fd9c9

…i-revamp

fix restored tour

30d976d

Dosant merged commit e82bbcf into elastic:master Feb 4, 2021

Dosant added a commit to Dosant/kibana that referenced this pull request Feb 4, 2021

[Search Session] Revamp search session indicator UI and tour (elastic…

9bcea49

…#89703)

Dosant mentioned this pull request Feb 4, 2021

[7.x] [Search Session] Revamp search session indicator UI and tour (#89703) #90277

Merged

Dosant added a commit that referenced this pull request Feb 4, 2021

[Search Session] Revamp search session indicator UI and tour (#89703) (…

012d453

…#90277)

Dosant mentioned this pull request Feb 22, 2021

[Search Sessions] Fix completed session icon #92206

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Search Session] Revamp search session indicator UI and tour. #89703

[Search Session] Revamp search session indicator UI and tour. #89703

Dosant commented Jan 29, 2021 •

edited

Loading

elasticmachine commented Jan 29, 2021

Dosant commented Feb 1, 2021

Dosant commented Feb 1, 2021

mdefazio commented Feb 1, 2021

lizozom Feb 2, 2021

Dosant Feb 2, 2021

Dosant commented Feb 2, 2021 •

edited

Loading

Dosant commented Feb 2, 2021

mdefazio commented Feb 2, 2021

Dosant commented Feb 3, 2021

dmlemeshko left a comment

Dosant commented Feb 3, 2021

mdefazio left a comment

ThomThomson left a comment

kertal commented Feb 3, 2021

kertal commented Feb 4, 2021

kertal left a comment

kibanamachine commented Feb 4, 2021

[Search Session] Revamp search session indicator UI and tour. #89703

[Search Session] Revamp search session indicator UI and tour. #89703

Conversation

Dosant commented Jan 29, 2021 • edited Loading

Summary

Tour

Checklist

For maintainers

elasticmachine commented Jan 29, 2021

Dosant commented Feb 1, 2021

Dosant commented Feb 1, 2021

mdefazio commented Feb 1, 2021

lizozom Feb 2, 2021

Choose a reason for hiding this comment

Dosant Feb 2, 2021

Choose a reason for hiding this comment

Dosant commented Feb 2, 2021 • edited Loading

Dosant commented Feb 2, 2021

mdefazio commented Feb 2, 2021

Dosant commented Feb 3, 2021

dmlemeshko left a comment

Choose a reason for hiding this comment

Dosant commented Feb 3, 2021

mdefazio left a comment

Choose a reason for hiding this comment

ThomThomson left a comment

Choose a reason for hiding this comment

kertal commented Feb 3, 2021

kertal commented Feb 4, 2021

kertal left a comment

Choose a reason for hiding this comment

kibanamachine commented Feb 4, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Dosant commented Jan 29, 2021 •

edited

Loading

Dosant commented Feb 2, 2021 •

edited

Loading