-
Notifications
You must be signed in to change notification settings - Fork 8.3k
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
Getting Started page #11673
Getting Started page #11673
Conversation
I've only read the PR description so far, but I just want to say this description is amazing. Thanks for outlining everything so clearly, especially steps for testing. We should put a reference to this PR in the |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Such an incredible change, and really great, readable code. Now please change all of it! JK.
<p class="kuiText kuiSubduedText"> | ||
<a | ||
kbn-href="#/management" | ||
ng-click="gettingStarted.recordOptOut()" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we set class="kuiLink"
on this and the other anchor tags on this page?
</div> | ||
|
||
<div class="kuiCard__footer"> | ||
<p class="kuiText">Pull in data from the <a href="">Elasticsearch API</a>, <a href="">Beats</a>, <a href="">Logstash</a>. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are the blank href
attributes intentional here? Are we waiting on the URLs?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Crap, no, they are not intentional 😄 I will add the URLs. Thanks for catching!
<div class="kuiCard__descriptionText gettingStartedCard__descriptionText"> | ||
<div class="gettingStartedLogoRow"> | ||
<img src="{{ gettingStarted.imageUrls.beatsLogo }}" /> | ||
<img src="{{ gettingStarted.imageUrls.logstashLogo }}" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For each img
, we need to add an alt
attribute which describes the image for screen readers. Something as simple as alt="Logstash logo"
will work.
</div> | ||
|
||
<div class="kuiFieldGroupSection"> | ||
<button class="kuiButton kuiButton--primary"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing an ng-click
handler here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@cjcenizal When the user clicks on this button we want to open demo.elastic.co in a new tab. This is easy to do with an anchor element, using target="_blank"
. So I'm thinking of replacing the button
tags here with a
tags. Thoughts?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds like a great idea, the kuiButton classes are designed to support that use case.
controllerAs: 'gettingStarted', | ||
controller: class GettingStartedController { | ||
constructor() { | ||
if (this.hasOptedOut) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's a flash of content when you first load the getting started page. If you log uiChrome.getVisible()
before this condition, it will be true
. I think this is what's causing it.
I tested out a solution, and it seems to work. We just need to change https://github.com/elastic/kibana/blob/master/src/ui/public/chrome/directives/kbn_chrome.js#L40 to this:
// Hide the chrome by default, so it doesn't interfere with the Getting Started page.
// Otherwise, show it if Kibana hasn't been embedded.
const isChromeVisible =
$location.search().embed === undefined
? false
: !$location.search().embed;
internals.setVisibleDefault(isChromeVisible);
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After talking with @ycombinator this solution doesn't work either because it means when you open another app, e.g. Timelion, the chrome defaults to hidden.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@spalger Perhaps you have some idea of how to pull off what we are trying here?
We want to not show the left nav when the Getting Started page (introduced in this PR) is shown to the user. Right now, there's a flash of the left nav before it gets hidden. Any way we could avoid that?
const isGettingStartedOptedOut = localStorageService.get(GETTING_STARTED_OPT_OUT) || false; | ||
const isOnGettingStartedPage = get(currentRoute, 'originalPath') === GETTING_STARTED_ROUTE; | ||
|
||
// If index patterns exist |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure we need this particular comment, but the rest are par excellence.
config.set('defaultIndex', defaultIndexPattern); | ||
} | ||
|
||
// At this point, we have a default index pattern and ar all set! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Typo: are
if (!defaultRequiredToasts) defaultRequiredToasts = []; | ||
else defaultRequiredToasts.push(notify.error(err)); | ||
} | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job removing this and replacing it with clearer and commented logic!
* @param {string} message Message string | ||
* @return {string} And ID for the message that was added. This can be used later to remove the message. | ||
*/ | ||
addManageAndMonitorMessagesMessage = (message) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can be changed to addManageAndMonitorMessage
export class GettingStartedRegistry { | ||
constructor() { | ||
this.topMessage = null; | ||
this._manageAndMonitorMessages = []; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good spot for a comment:
// These are the messages in the Manage and Monitor section of the Getting Started page.
@ycombinator Looks awesome, but I'm getting the getting started page after I delete my only index pattern, which probably shouldn't happen. Also, why not just accept |
Good catch. I'll make the logic smarter (and actually simpler, if I'm thinking about this correctly).
That's because the optional third box is intended for Management and monitoring messages. If we make it more generic than that, we'll need a way to set its title and icon/logo image as well. Then the question becomes, who is responsible for setting those, keeping in mind that each of the items in By naming the integration point |
@BigFunger @cjcenizal This PR is ready for re-review. A few things to note since we last discussed this PR:
|
class="kuiLink" | ||
target="_blank" | ||
>Beats</a>, | ||
<a |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"or "?
@ycombinator I'm running into a problem.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👏 One minor suggestion, but otherwise LGTM!
<div class="kuiFieldGroupSection"> | ||
<a | ||
class="kuiButton kuiButton--primary" | ||
href="{{ gettingStarted.documentationLinks.demoSite }}" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It probably doesn't matter, but you might want to consider making this
ng-href="gettingStarted.documentationLinks.demoSite"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, it should be, or else there's a small time window where the expression will not be replaced. Good catch. Thanks!
// Compile topMessageHtml and inject it into the DOM | ||
const topMessage = getTopMessage(); | ||
if (topMessage) { | ||
const topMessageContainer = document.getElementById('gettingStartedTopMessageContainer'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, this is deliberate because topMessage
can contain an angular expression, e.g. a directive. Injecting that the normal way (as just a variable on the scope) doesn't cause Angular to reevaulate the template and render any new Angular expressions.
AFAIK, this is the only way to achieve what we want but I might be missing something and will gladly consider a more intuitive approach.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We actually do this in the top nav, with navbar extensions. You can simply inject a directive and it will render it correctly, with its own scope. I don't recall exactly how to use it, but you can chase it down. IIRC, it uses the render directive
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cool, let me try to find that usage and implement it here. Thanks!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I looked at the top nav code and it doesn't seem to use the render directive. It seems to be taking the $compile
approach.
Also, looking into the definition of the render
directive, it appears to expect a directive definition, not just any arbitrary text (that may or may not contain a directive). This is too constraining for the use case here on the Getting Started page.
Given these considerations, I'm going to stick with the $compile
approach for the Getting Started page. However, since it wasn't obvious why we were using it here, I'll add some comments explaining the intent. Thanks!
@@ -0,0 +1,78 @@ | |||
import uuid from 'node-uuid'; | |||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks like a job for ui/registry
. Nothing in here seems to warrant maintaining another registry.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The registry here contains two properties: a topMessage
(which is a single message) and manageAndMonitorMessages
(which is an array of messages). I'm happy to reuse ui/registry
if it can somehow accommodate both those properties.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Chatted about this with @w33ble and @BigFunger out-of-PR. The decisions were:
- to allow multiple top messages, that way we don't have to worry about the single one getting clobbered. They will be concatenated and rendered just like the manage-and-monitor messages.
- replace the
getting_started/registry
module with two separateui/registry
s - one for top messages and one for manage-and-monitor messages.
@BigFunger @cjcenizal @w33ble I've addressed all the feedback from the last round of reviews. This is ready for your 👀 again. Thanks! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
fe85bf8
to
6532f0a
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
* Initial code * Renaming files/folders * Notes and changes from HTML/CSS review * CSS changes * Fixing transform units * Fleshing out logo circle * Adding logos * Un-nesting styles * Adding kuiText class on <p> elements * Making shield icon 404 go away * Using trustAsHtml filter; using registry * Adding code for registry * Adding images * Hooking up the opt-out link * Fixing linter issues * Fix issue with refresh bringing back nav * Removing load_default module * Use GETTING_STARTED_ROUTE constant * Allow topMessage to be a directive * Adding kuiLink CSS class to anchor elements * Adding alt text to images * Replace getters with regular methods * Remove leftover comment * Removing unnecessary comment * Fixing typo in comment * Adding comments for message properties * Fixing typo in method name * Defining custom CSS class * Fixing method call * Creating custom CSS classes * Adding documentation links * Use a instead of button for demo link * Allow directives in manage and monitor messages * Refactoring shared code into single ui/public/getting_started folder * Adding README * Fixing whitespace in/around links * Trim messages before setting them * Decorate in-app links with opt-out attribute * Opt out of the Getting Started page if the user already has index patterns * Adding more commentary around expectations of setTopMessage use * Using ng-src and ng-href attributes where attr values are angular expressions * Importing the directive before using it * Using ui/registry for message registries * Renaming service => helpers to clarify intent * Adding explanatory comment * Adding "or" * Fixing div id * Breaks out the inject logic into another directive * Adding Getting Started page object for functional tests * Consolidate into one registry * Fixes incorrect classes * Changes how styles are applied to injected-items items * Modifying class name per CSS style guide * Adding getting started doc link * Removing unused import
Backported to:
|
This reverts commit 211b3d4. This was breaking builds, so we revert until we figure out why.
@ycombinator I pulled the enhancement/roadmap label off of this one since it was reverted. When you open a new one with these changes, please copy over the excellent details you included in this PR. |
* Initial code * Renaming files/folders * Notes and changes from HTML/CSS review * CSS changes * Fixing transform units * Fleshing out logo circle * Adding logos * Un-nesting styles * Adding kuiText class on <p> elements * Making shield icon 404 go away * Using trustAsHtml filter; using registry * Adding code for registry * Adding images * Hooking up the opt-out link * Fixing linter issues * Fix issue with refresh bringing back nav * Removing load_default module * Use GETTING_STARTED_ROUTE constant * Allow topMessage to be a directive * Adding kuiLink CSS class to anchor elements * Adding alt text to images * Replace getters with regular methods * Remove leftover comment * Removing unnecessary comment * Fixing typo in comment * Adding comments for message properties * Fixing typo in method name * Defining custom CSS class * Fixing method call * Creating custom CSS classes * Adding documentation links * Use a instead of button for demo link * Allow directives in manage and monitor messages * Refactoring shared code into single ui/public/getting_started folder * Adding README * Fixing whitespace in/around links * Trim messages before setting them * Decorate in-app links with opt-out attribute * Opt out of the Getting Started page if the user already has index patterns * Adding more commentary around expectations of setTopMessage use * Using ng-src and ng-href attributes where attr values are angular expressions * Importing the directive before using it * Using ui/registry for message registries * Renaming service => helpers to clarify intent * Adding explanatory comment * Adding "or" * Fixing div id * Breaks out the inject logic into another directive * Adding Getting Started page object for functional tests * Consolidate into one registry * Fixes incorrect classes * Changes how styles are applied to injected-items items * Modifying class name per CSS style guide * Adding getting started doc link * Removing unused import
* Initial code * Renaming files/folders * Notes and changes from HTML/CSS review * CSS changes * Fixing transform units * Fleshing out logo circle * Adding logos * Un-nesting styles * Adding kuiText class on <p> elements * Making shield icon 404 go away * Using trustAsHtml filter; using registry * Adding code for registry * Adding images * Hooking up the opt-out link * Fixing linter issues * Fix issue with refresh bringing back nav * Removing load_default module * Use GETTING_STARTED_ROUTE constant * Allow topMessage to be a directive * Adding kuiLink CSS class to anchor elements * Adding alt text to images * Replace getters with regular methods * Remove leftover comment * Removing unnecessary comment * Fixing typo in comment * Adding comments for message properties * Fixing typo in method name * Defining custom CSS class * Fixing method call * Creating custom CSS classes * Adding documentation links * Use a instead of button for demo link * Allow directives in manage and monitor messages * Refactoring shared code into single ui/public/getting_started folder * Adding README * Fixing whitespace in/around links * Trim messages before setting them * Decorate in-app links with opt-out attribute * Opt out of the Getting Started page if the user already has index patterns * Adding more commentary around expectations of setTopMessage use * Using ng-src and ng-href attributes where attr values are angular expressions * Importing the directive before using it * Using ui/registry for message registries * Renaming service => helpers to clarify intent * Adding explanatory comment * Adding "or" * Fixing div id * Breaks out the inject logic into another directive * Adding Getting Started page object for functional tests * Consolidate into one registry * Fixes incorrect classes * Changes how styles are applied to injected-items items * Modifying class name per CSS style guide * Adding getting started doc link * Removing unused import
* Initial code * Renaming files/folders * Notes and changes from HTML/CSS review * CSS changes * Fixing transform units * Fleshing out logo circle * Adding logos * Un-nesting styles * Adding kuiText class on <p> elements * Making shield icon 404 go away * Using trustAsHtml filter; using registry * Adding code for registry * Adding images * Hooking up the opt-out link * Fixing linter issues * Fix issue with refresh bringing back nav * Removing load_default module * Use GETTING_STARTED_ROUTE constant * Allow topMessage to be a directive * Adding kuiLink CSS class to anchor elements * Adding alt text to images * Replace getters with regular methods * Remove leftover comment * Removing unnecessary comment * Fixing typo in comment * Adding comments for message properties * Fixing typo in method name * Defining custom CSS class * Fixing method call * Creating custom CSS classes * Adding documentation links * Use a instead of button for demo link * Allow directives in manage and monitor messages * Refactoring shared code into single ui/public/getting_started folder * Adding README * Fixing whitespace in/around links * Trim messages before setting them * Decorate in-app links with opt-out attribute * Opt out of the Getting Started page if the user already has index patterns * Adding more commentary around expectations of setTopMessage use * Using ng-src and ng-href attributes where attr values are angular expressions * Importing the directive before using it * Using ui/registry for message registries * Renaming service => helpers to clarify intent * Adding explanatory comment * Adding "or" * Fixing div id * Breaks out the inject logic into another directive * Adding Getting Started page object for functional tests * Consolidate into one registry * Fixes incorrect classes * Changes how styles are applied to injected-items items * Modifying class name per CSS style guide * Adding getting started doc link * Removing unused import
* Getting Started page (#11673) * Initial code * Renaming files/folders * Notes and changes from HTML/CSS review * CSS changes * Fixing transform units * Fleshing out logo circle * Adding logos * Un-nesting styles * Adding kuiText class on <p> elements * Making shield icon 404 go away * Using trustAsHtml filter; using registry * Adding code for registry * Adding images * Hooking up the opt-out link * Fixing linter issues * Fix issue with refresh bringing back nav * Removing load_default module * Use GETTING_STARTED_ROUTE constant * Allow topMessage to be a directive * Adding kuiLink CSS class to anchor elements * Adding alt text to images * Replace getters with regular methods * Remove leftover comment * Removing unnecessary comment * Fixing typo in comment * Adding comments for message properties * Fixing typo in method name * Defining custom CSS class * Fixing method call * Creating custom CSS classes * Adding documentation links * Use a instead of button for demo link * Allow directives in manage and monitor messages * Refactoring shared code into single ui/public/getting_started folder * Adding README * Fixing whitespace in/around links * Trim messages before setting them * Decorate in-app links with opt-out attribute * Opt out of the Getting Started page if the user already has index patterns * Adding more commentary around expectations of setTopMessage use * Using ng-src and ng-href attributes where attr values are angular expressions * Importing the directive before using it * Using ui/registry for message registries * Renaming service => helpers to clarify intent * Adding explanatory comment * Adding "or" * Fixing div id * Breaks out the inject logic into another directive * Adding Getting Started page object for functional tests * Consolidate into one registry * Fixes incorrect classes * Changes how styles are applied to injected-items items * Modifying class name per CSS style guide * Adding getting started doc link * Removing unused import * Attempting to fix breaking build Apparently the Getting Started page is preventing access to Console (Dev Tools, really) so the functional tests for Console are failing. This commit opts the user out of the Getting Started page before attempting to navigate to Console. * Cleanup on aisle testbed! (#11765) * Navigate to getting started page so we can opt out of it
* Getting Started page (#11673) * Initial code * Renaming files/folders * Notes and changes from HTML/CSS review * CSS changes * Fixing transform units * Fleshing out logo circle * Adding logos * Un-nesting styles * Adding kuiText class on <p> elements * Making shield icon 404 go away * Using trustAsHtml filter; using registry * Adding code for registry * Adding images * Hooking up the opt-out link * Fixing linter issues * Fix issue with refresh bringing back nav * Removing load_default module * Use GETTING_STARTED_ROUTE constant * Allow topMessage to be a directive * Adding kuiLink CSS class to anchor elements * Adding alt text to images * Replace getters with regular methods * Remove leftover comment * Removing unnecessary comment * Fixing typo in comment * Adding comments for message properties * Fixing typo in method name * Defining custom CSS class * Fixing method call * Creating custom CSS classes * Adding documentation links * Use a instead of button for demo link * Allow directives in manage and monitor messages * Refactoring shared code into single ui/public/getting_started folder * Adding README * Fixing whitespace in/around links * Trim messages before setting them * Decorate in-app links with opt-out attribute * Opt out of the Getting Started page if the user already has index patterns * Adding more commentary around expectations of setTopMessage use * Using ng-src and ng-href attributes where attr values are angular expressions * Importing the directive before using it * Using ui/registry for message registries * Renaming service => helpers to clarify intent * Adding explanatory comment * Adding "or" * Fixing div id * Breaks out the inject logic into another directive * Adding Getting Started page object for functional tests * Consolidate into one registry * Fixes incorrect classes * Changes how styles are applied to injected-items items * Modifying class name per CSS style guide * Adding getting started doc link * Removing unused import * Attempting to fix breaking build Apparently the Getting Started page is preventing access to Console (Dev Tools, really) so the functional tests for Console are failing. This commit opts the user out of the Getting Started page before attempting to navigate to Console. * Cleanup on aisle testbed! (#11765) * Navigate to getting started page so we can opt out of it
* Initial code * Renaming files/folders * Notes and changes from HTML/CSS review * CSS changes * Fixing transform units * Fleshing out logo circle * Adding logos * Un-nesting styles * Adding kuiText class on <p> elements * Making shield icon 404 go away * Using trustAsHtml filter; using registry * Adding code for registry * Adding images * Hooking up the opt-out link * Fixing linter issues * Fix issue with refresh bringing back nav * Removing load_default module * Use GETTING_STARTED_ROUTE constant * Allow topMessage to be a directive * Adding kuiLink CSS class to anchor elements * Adding alt text to images * Replace getters with regular methods * Remove leftover comment * Removing unnecessary comment * Fixing typo in comment * Adding comments for message properties * Fixing typo in method name * Defining custom CSS class * Fixing method call * Creating custom CSS classes * Adding documentation links * Use a instead of button for demo link * Allow directives in manage and monitor messages * Refactoring shared code into single ui/public/getting_started folder * Adding README * Fixing whitespace in/around links * Trim messages before setting them * Decorate in-app links with opt-out attribute * Opt out of the Getting Started page if the user already has index patterns * Adding more commentary around expectations of setTopMessage use * Using ng-src and ng-href attributes where attr values are angular expressions * Importing the directive before using it * Using ui/registry for message registries * Renaming service => helpers to clarify intent * Adding explanatory comment * Adding "or" * Fixing div id * Breaks out the inject logic into another directive * Adding Getting Started page object for functional tests * Consolidate into one registry * Fixes incorrect classes * Changes how styles are applied to injected-items items * Modifying class name per CSS style guide * Adding getting started doc link * Removing unused import
This reverts commit 211b3d4. This was breaking builds, so we revert until we figure out why.
* Getting Started page (elastic#11673) * Initial code * Renaming files/folders * Notes and changes from HTML/CSS review * CSS changes * Fixing transform units * Fleshing out logo circle * Adding logos * Un-nesting styles * Adding kuiText class on <p> elements * Making shield icon 404 go away * Using trustAsHtml filter; using registry * Adding code for registry * Adding images * Hooking up the opt-out link * Fixing linter issues * Fix issue with refresh bringing back nav * Removing load_default module * Use GETTING_STARTED_ROUTE constant * Allow topMessage to be a directive * Adding kuiLink CSS class to anchor elements * Adding alt text to images * Replace getters with regular methods * Remove leftover comment * Removing unnecessary comment * Fixing typo in comment * Adding comments for message properties * Fixing typo in method name * Defining custom CSS class * Fixing method call * Creating custom CSS classes * Adding documentation links * Use a instead of button for demo link * Allow directives in manage and monitor messages * Refactoring shared code into single ui/public/getting_started folder * Adding README * Fixing whitespace in/around links * Trim messages before setting them * Decorate in-app links with opt-out attribute * Opt out of the Getting Started page if the user already has index patterns * Adding more commentary around expectations of setTopMessage use * Using ng-src and ng-href attributes where attr values are angular expressions * Importing the directive before using it * Using ui/registry for message registries * Renaming service => helpers to clarify intent * Adding explanatory comment * Adding "or" * Fixing div id * Breaks out the inject logic into another directive * Adding Getting Started page object for functional tests * Consolidate into one registry * Fixes incorrect classes * Changes how styles are applied to injected-items items * Modifying class name per CSS style guide * Adding getting started doc link * Removing unused import * Attempting to fix breaking build Apparently the Getting Started page is preventing access to Console (Dev Tools, really) so the functional tests for Console are failing. This commit opts the user out of the Getting Started page before attempting to navigate to Console. * Cleanup on aisle testbed! (elastic#11765) * Navigate to getting started page so we can opt out of it
This PR implements a Getting Started page for first-time users of Kibana.
Why is this important
First-run Kibana experience is increasingly the first time the user interacts with the Elastic stack. The current out of the box experience in Kibana is to land on the index pattern creation page, when there are no existing index patterns, and that page is really unfriendly (see here).
What does this page look like
This page can be accessed under two scenarios, and looks slightly different under each scenario:
When the user has never defined any index patterns defined AND the user has not explicitly opted out of the Getting Started page. The user must be shown the Getting Started page by default, regardless of which Kibana app they try and visit (manually, because the navigation is hidden from view).
Screenshot:
When there are index patterns defined OR the user has explicitly opted out of the Getting Started page. In this case the user can perform business as usual around Kibana. However, they may re-visit the Getting Started page if they like from Management > Kibana > Getting Started.
Screenshot:
Additionally, orthogonal to the two scenarios described above, the page has a couple of optional sections as well, that may be populated dynamically. The two sections are:
Screenshot showing both optional sections populated:
What's in the box
This PR:
Implements a new core plugin called
getting_started
, that implements the controller and template of the Getting Started page, along with the routing and logic on when the page should be shown to the user.Provides a registry for dynamically populating the two optional sections in the Getting Started page.
Provides an attribute directive,
kbnGettingStartedOptOut
that clickable elements (links, buttons) on the Getting Started Page can use to opt users out of the Getting Started page as they navigate away.Consolidates logic for defining default index patterns into the logic for showing the Getting Started page under Scenario 1 (described above). Without this consolidation there was a race condition which would cause the Getting Started page to be displayed along with a Notifier message about no default index pattern being defined if the user tried to visit a Kibana app (e.g. Discover).
Includes SVG images for various logos.
What to test
Delete all index patterns (by directly manipulating the
.kibana
index, and not via the Index Patterns UI), then load up Kibana. You should see the Getting Started page as described under Scenario 1 above. Attempting to visit another Kibana app (e.g. Discover) should bring you back to the Getting Started page.Opt out of the Getting Started page by clicking the link in the top right. This decision is recorded in localStorage in the key,
kibana.isGettingStartedOptedOut
. You should see the nav again and be able to visit other Kibana apps. However, visiting a Kibana app that requires an index pattern (i.e. Discover, Visualize, or Dashboard) should take you to the index patterns page with a Notifier about there being no default index pattern (same as before this PR).Delete the localStorage key
kibana.isGettingStartedOptedOut
. Refresh Kibana. You should be back in Scenario 1. Now click on the link in the "Visualize and explore" box on the Getting Started page. This should opt you out of the Getting Started page.Once you have opted out of the Getting Started page or index patterns exist, try visiting the Getting Started page via Management > Kibana > Getting Started. Check that it looks and functions as described in Scenario 2 above.
Try dynamically registering content for both optional sections on the Getting Started page and ensure that it shows up as expected. The code to do this is:
/cc @tbragin @skearns64 @alexfrancoeur
For Release Notes
Summary: Introduces a Getting Started page in Kibana for first-time users. Previously we would drop first-time users onto the Index Patterns page, without providing much context for why they were there or good instructions on what to do next. The Getting Started page provides a short introduction to Kibana and a link to the Index Patterns page along with some context around when and why to use it.