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.

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

Add a welcome screen for new Kibana instances #21353

Merged
merged 22 commits into from
Aug 16, 2018

Conversation

chrisdavies
Copy link
Contributor

@chrisdavies chrisdavies commented Jul 27, 2018

This addresses #18828.

The welcome screen should show when you view #/home, if there are no index patterns. It should allow you to bypass it by heading over to other screens (e.g. #/management). You should also be able to toggle the welcome screen by heading over to #/management/kibana/settings, and toggling Show the welcome screen.

This change introduces a delay to the home screen, as we need to query for the existence of data prior to rendering. One thing we might consider doing is adding a max-timeout for that query, and if it hasn't returned in a reasonable time, just show the normal home page. For poor connections, this should improve the experience.

image

Clicking "I don't need help" should hide the welcome screen forever. This is done on a per-browser basis via localStorage.

Clicking "Play around with sample data" should bring you to the sample data screen.

Fade in

The welcome screen fades in right now, as there doesn't appear to be a good way for us to keep the loading indicator up until the welcome screen has rendered. (A good way to do that is coming in the new platform.) Without the fade in, there is a bad flicker effect.

Flaky tests

This is a potential source of flaky tests. :/ The welcome screen will show up after a delay (after it's queried Elasticsearch to determine whether or not this is a new Kibana instance). This means that any tests that expect the old home screen might pass if they run fast enough to happen before the welcome screen shows up. I'm not sure how to fix this. We could disable the welcome screen by default for test scenarios, and then enable it only for explicit welcome screen tests.

Alternatively, we could hack the UI on the home screen so that the Kibana loading indicator shows up until we've done our query, then we'd show the welcome screen or the home screen, depending on the result of the query. This would have a secondary benefit of avoiding the flash / blink effect caused by the page rendering, then a bit later the welcome screen showing up. I don't know of a good way to accomplish this without resorting to serious hacks, though, as I don't see a good way to tell Kibana to keep the loading screen up until the current app says to remove it.

Global settings

Another note for review is that I'm using a combination of localStorage and the uiSettingsClient to save / load whether or not the welcome screen has been dismissed. This means that if one user dismisses the welcome screen, it's dismissed only for their browser. Incognito or another browser will show the welcome screen again. I'm using a setting in uiSettingsClient to enable the welcome screen to be disabled system-wide. Is uiSettingsClient the right tool for that job?

Testing

  • Spin up a new ELK instance.
  • Load Kibana
  • You should see the welcome screen
  • Try disabling the welcome screen in #/management/kibana/settings
  • Try enabling it again
  • Create sample data by clicking "Play round with sample data" and then clicking "Add" in the sample data card.
  • Confirm that once the data has been generated, you no longer see the welcome screen when hitting the home page
  • Clear elasticsearch (e.g. restart it in dev mode)
  • Reload #/home
  • You should see the welcome screen
  • Create some data node scripts/makelogs
  • Head over to #/management and define an index pattern
  • You should no longer see the welcome screen when you view #/home

@chrisdavies chrisdavies added the WIP Work in progress label Jul 27, 2018
@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@chrisdavies chrisdavies added :Sharing and removed WIP Work in progress labels Jul 30, 2018
@chrisdavies chrisdavies self-assigned this Jul 30, 2018
@chrisdavies chrisdavies changed the title [WIP] Add a welcome screen for new Kibana instances Add a welcome screen for new Kibana instances Jul 30, 2018
@chrisdavies chrisdavies added the WIP Work in progress label Jul 30, 2018
@chrisdavies chrisdavies changed the title Add a welcome screen for new Kibana instances [WIP] Add a welcome screen for new Kibana instances Jul 30, 2018
@elasticmachine
Copy link
Contributor

💔 Build Failed

@chrisdavies chrisdavies changed the title [WIP] Add a welcome screen for new Kibana instances Add a welcome screen for new Kibana instances Jul 30, 2018
@chrisdavies chrisdavies removed the WIP Work in progress label Jul 30, 2018
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@alexfrancoeur
Copy link

alexfrancoeur commented Aug 1, 2018

Looking good @chrisdavies!

I'm wondering if we should explicitly call out Kibana 7 here or instead just say Welcome to Kibana. We may we ant @gchaps input to review the text here anyway. @gchaps, any chance you could provide some suggestions?

screen shot 2018-08-01 at 9 51 08 am

I saw some chatter in the design channel, were you ever able to get any help with icons here?

Skip the tour I know what I'm doing works unless for some reason a user clears cache and opens Kibana up again. Though I seriously doubt that would be the case. We've taken similar approaches storing this type of metadata locally with recently viewed and recent time selections. This works for me.

I'd like to get some more sample data into Kibana for 6.5 so that there are options to choose from. I know in the past @snide had talked about showing the sample data cards as a second navigation within the splash screen vs. dropping them into the Add Data card tabular UI. What are your thoughts here @snide @cchaos? Is the approach Chris is taking fine? The current experience can be seen below:

aug-01-2018 10-06-09

I have no idea why the GIF is being optimized by GitHub but it's ruing the recording. Either way, I just wanted to show the navigation

Also, the fade in does quickly show Kibana, just for a moment. I think it's noted above but is there no way to fade from the loading indicator directly to the splash screen? It's not as bad as a flicker, but it is noticeable

@snide
Copy link
Contributor

snide commented Aug 1, 2018

This is planned for design cleanup and copy changes, we'll jump in when it's close. Couple thoughts from the product side.

The original design assumed we were leading people on some sort of tour. We're no longer doing that and the premise seems to be to simply install sample data. That's fine, but then we might just want to focus this page on that action, listing the sample data (as cards, the same we do in the sample data page) and allowing people to install it directly.

The only other action then is essentially some version of "I don't want sample data" and that should just lead directly to Kibana Home and local_store that decision. A lot of this (including the current sample data list) is pretty awkward when we only have one item to choose from. We should make sure we're committing to providing more if we're going with these layouts.

Agree all the loading is awkward. I wouldn't worry about the fades, this can just be a direct page.

@chrisdavies
Copy link
Contributor Author

@snide What do you mean by "this can just be a direct page"?

Totally agree that we need more sample data.

Regarding the fade in / flicker, I have a few possible workarounds:

  • Wait for the new platform to land before shipping this, as it allows apps to take over the loader
  • Hacky: inject our own loader into the DOM, essentially mimicking the Kibana loader, then hide it when we've rendered the appropriate home screen
  • Don't make the welcome screen a full-screen experience. Instead, render it in the same place as the normal home screen, and make it similar enough visually to the home screen that we can easily transition between them without flicker

All of those are unfortunately complex, though.

@snide
Copy link
Contributor

snide commented Aug 1, 2018

Basically rather than the loading the page as a fade on top of home, load it as its own page outside of the chrome, but it sounds like you can't do that easily.

My opinion is that Kibana has enough hacks. If the new platform can solve your loading issue, then I think we just address then fade then, rather than bridging the gap to fake it till then.

The fade isn't the end of the world. I agree it's weird. You might be able to just do this stuff in a small modal (where the fade would look more natural). But that layout really depends upon how many sample data sets we plan on loading (it wouldn't be able to handle a lot).

I'll leave it to @alexfrancoeur. I can clean up whatever implementation product feels is best.

@alexfrancoeur
Copy link

just checked out the PR, looking great @chrisdavies @ryankeairns!

@ryankeairns
Copy link
Contributor

After checking out the fade in locally, I would reiterate what Dave said in an earlier comment - it's not the end of the world. Is it a little awkward? yeah. Is it worth a hacky solution when (it sounds like) future platform changes will negate it? probably not.

In a somewhat odd way, the copy in the welcome screen sorta informs you why this screen just faded in... we were checking your setup and noticed there was no data. Then, clicking either button quickly returns you to the view that flashed up front. This is me rationalizing, but it feels acceptable.

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💔 Build Failed

@chrisdavies
Copy link
Contributor Author

Jenkins test this. I think the failure is not this PR.

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Copy link
Contributor

@stacey-gammon stacey-gammon left a comment

Choose a reason for hiding this comment

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

code review only for latest changes. lgtm.

@alexfrancoeur
Copy link

:shipit:

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

@chrisdavies chrisdavies merged commit a73a928 into elastic:master Aug 16, 2018
@chrisdavies chrisdavies deleted the home/welcome branch August 16, 2018 17:05
chrisdavies added a commit to chrisdavies/kibana that referenced this pull request Aug 17, 2018
Add a welcome screen to Kibana home if this is a new Kibana instance.
New is determined by whether or not there are any index patterns
defined. Local storage is used to retain the user's decision to hide
the welcome screen.
chrisdavies added a commit that referenced this pull request Aug 17, 2018
Add a welcome screen to Kibana home if this is a new Kibana instance.
New is determined by whether or not there are any index patterns
defined. Local storage is used to retain the user's decision to hide
the welcome screen.
cjcenizal pushed a commit to cjcenizal/kibana that referenced this pull request Aug 21, 2018
Add a welcome screen to Kibana home if this is a new Kibana instance.
New is determined by whether or not there are any index patterns
defined. Local storage is used to retain the user's decision to hide
the welcome screen.
cjcenizal pushed a commit to cjcenizal/kibana that referenced this pull request Aug 23, 2018
Add a welcome screen to Kibana home if this is a new Kibana instance.
New is determined by whether or not there are any index patterns
defined. Local storage is used to retain the user's decision to hide
the welcome screen.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.