Kibana Home page - phase two #14749

nreese · 2017-11-03T14:20:28Z

Add Data section on kibana home page.

On the server-side, the PR adds a new hapi mixin for registering tutorials. The tutorials are made available via new API endpoint /api/kibana/home/tutorials.

alexfrancoeur · 2017-11-05T15:04:36Z

@nreese looks great! I'll provide some more detailed feedback later but one of the first things I noticed is that we are using "data sources" terminology. Unfortunately, we're not going to be able to use this for the new UI and will need to use a description that is a bit more generic. Let's sync on Monday.

alexfrancoeur · 2017-11-05T15:05:26Z

also as discussed with @monicasarbu and @tsg, we're going to remove the select index pattern option from the list UI

alexfrancoeur · 2017-11-05T15:07:17Z

For anyone interested in the progress Nathan has made, screenshots below.

timroes · 2017-11-07T09:46:20Z

src/core_plugins/kibana/public/home/tutorials/apache/index.js

+                  '    -E output.elasticsearch.hosts=[localhost:9200]',
+                  '    -E output.elasticsearch.username=elastic',
+                  '    -E output.elasticsearch.password=<elastic_password>',
+                  '    -E setup.kibana.host=localhsot:5601'


localhsot -> localhost

tsg · 2017-11-09T12:44:55Z

@nreese What would be a good way of defining variables that can be used in Mustache? What I want is to define something like this:

docs.base_url="https://www.elastic.co/guide/en/"
docs.version = <current docs branch> // can we get that from Kibana? If not, we can use major.minor based on the version.
metricbeat.docs.url= docs.base_url  + "beats/metricbeat/" + docs.version + "/"

Then define links like this:

      textPre: 'Skip this step if Metricbeat is already installed.' +
               ' First time using Metricbeat? See the [Getting Started Guide]' +
               '({metricbeat.docs.url}/metricbeat-getting-started.html).',

Does that make sense?

Also, could we have the links from the tutorial open in a new window?

nreese · 2017-11-09T13:04:47Z

We can add these variables.

{config.docs.base_url} which will resolve to https://www.elastic.co/
{config.docs.beats. metricbeat} which will resolve to https://www.elastic.co/guide/en/beats/metricbeat
{config.docs.beats. filebeat} which will resolve to https://www.elastic.co/guide/en/beats/filebeat
{config.docs.version} which will resolve to master for master branch and <major>.<minor> for tagged releases.

Does that work?

tsg · 2017-11-09T13:16:57Z

Sounds great, but I'd prefer to have {config.docs.beats.metricbeat} include the version. Never mind, I think that's what the commit does :) Thanks!

nreese · 2017-11-09T13:17:34Z

@tsg Checkout out commit 9333e3e. It addes the variables you requested. I included the document version in the filebeat and metricbeat links so you don't have to worry about that part.

tsg · 2017-11-09T23:01:45Z

src/ui/public/documentation_links/documentation_links.js

@@ -13,6 +14,9 @@ export const documentationLinks = {
    startup: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-starting.html`,
    exportedFields: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/exported-fields.html`
  },
+  metricbeat: {
+    base: `${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/`


Can we have these without the trailing /? That composes nicer, for example: {config.docs.beats.filebeat}/metricbeat-getting-started.html versus {config.docs.beats.filebeat}metricbeat-getting-started.html. It's also more consistent with how we do it in the asciidocs (at least in Beats).

It's also more consistent with how we do it in the asciidocs (at least in Beats).

Unfortunately, that's going to change at some point because we are standardizing on shared attributes in asciidoc. We'll need to clean up Beats to use https://github.com/elastic/docs/blob/master/shared/attributes.asciidoc... It's just not high on the priority list atm.

Ok, but those are still without the / from what I see, right?

ycombinator · 2017-11-10T17:07:00Z

@nreese Minor comment: The spacing between the commands block and the textPost block in the UI looks a little small to me, smaller than the space between the textPre block and the commands block. Any way we could make these two spaces consistent (I personally like the spacing between the textPre block and the commands block)?

ycombinator · 2017-11-10T17:09:44Z

@nreese Similar to the variables you exposed for Beats docs in 9333e3e, could you expose {config.docs.logstash} pointing to https://www.elastic.co/guide/en/logstash? Thanks!

ycombinator · 2017-11-10T20:29:25Z

src/ui/public/documentation_links/documentation_links.js

@@ -17,6 +17,9 @@ export const documentationLinks = {
  metricbeat: {
    base: `${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}`
  },
+  logstash: {
+    base: `${ELASTIC_WEBSITE_URL}guide/en/beats/logstash/${DOC_LINK_VERSION}`


@nreese Not sure beats should be in here :)

tsg · 2017-11-17T14:57:48Z

@nreese What are the requirements on the preview images? The spec says 16:9, but that doesn't seem to be the case for the apache one that we currently have, and it works fine. Should we stick to 16:9 or go more liberal?

In any case, my preference would be to have the screenshots somehow larger, currently they are too small to be "read".

Also, how do we stand on logos? The spec says required, but that's going to be hard to get for all modules, so perhaps we can have some sort of placeholder?

nreese · 2017-11-17T14:59:49Z

Stick with 16:9. The view will just limit the height to around 200 pixels so it will not distort images but having the proper ratio will make the pages look the best

Maybe logos should be optional? I think that is better than a default (meaningless) logo.

ycombinator · 2017-11-17T15:05:33Z

@nreese I noticed that the config.docs.logstash variable is slightly broken, in that it contains beats as one of the URL segments:

tsg · 2017-11-17T15:15:03Z

Thanks, I'm thinking to take all screenshots at 1280x720. Does that sound good?

ycombinator · 2017-11-17T15:37:10Z

@nreese Turns out that Logstash's first instruction step will be to install a JRE. For certain platforms (variants) this is a specific command (e.g. for Debian-based systems the command is apt-get install default-jre) but for certain other platforms like Mac OSX the steps involve a point-and-click GUI.

For the latter types of platforms I would like to simply link the user to the installation instructions, e.g. to https://docs.oracle.com/javase/8/docs/technotes/guides/install/mac_jre.html. In such cases there will be no commands array present. Currently this is a required element in the spec. Could we make it optional?

nreese · 2017-11-17T15:45:21Z

@tsg sounds great

@ycombinator sounds good to make the commands optional. Feel free to edit the Joi schema

ycombinator · 2017-11-17T16:00:58Z

Thanks @nreese; created nreese#9 for making commands optional. Apparently the spec already had them defined as optional so no changes there.

nreese · 2017-11-17T16:26:47Z

@ycombinator Thanks. PR is merged

* Updated Nginx module * Updated MySQL logs module * Updated system logs module * Correct the on_prem_cloud enable steps * Updated the Nginx metrics tutorial and added screenshot * Updated the Apache metrics module + screenshot * Updated the MySQL metrics module + screenshot * Updated the system metrics module + screenshot

* [Netflow tutorial] Adding onPrem instructions for Windows * Removing unrelated/superfluous instructions * Adding Windows instructions for onPremElasticCloud and elasticCloud

nreese · 2018-01-08T16:01:48Z

Thanks @elastic/kibana-design for EuiImage component. This is a big improvement for the tutorial page and makes the images clickable for full screen viewing

cjcenizal · 2018-01-08T16:55:28Z

src/core_plugins/kibana/public/home/components/tutorial/introduction.js

+        hasShadow
+        allowFullScreen
+        title="screenshot of primary dashboard."
+        url={previewUrl}


FYI you can use fullScreenIconColor="dark" to specify a dark icon which might stand out better against some of these images.

And title should be alt ;)

@cchaos Maybe the EuiImage examples need to be updated? This is the example I copied from Eui. Should title be set to alt here as well?

<EuiImage size="l" hasShadow allowFullScreen caption="Click me to see full screen" title="Accessible image title goes here" url="https://i.imgur.com/4qx7HhE.jpg" /> );

@cchaos Never mind - looks like I had an old version of EuiImage component

…en command block and instruction text

alexfrancoeur

@nreese Looking good! The new EUI component for screenshots is fantastic. I had a couple of comments, most of which are visual / UX at this point and are not blockers.

@snide & @gchaps may be able to chime in here, but is there a better way to surface instructions that are not code? Visually, seem to blend in with the title a bit more than I'd expect but this may just be a bit nitpicky on my part.

I'm assuming this is because the Add Data view is centered, but it seems odd to me that the breadcrumb is in the center of the page rather than the top left.

vs.

I've mentioned this a few times, but if we were able to open any links from this tutorial I think it'd make a much cleaner experience if it was a new tab vs. a redirect. That way you don't lose context of the instructions or redirect away from Kibana.

Are we still providing links to the assets / dashboard installed at the end of the instructions?

Last but not least, I know @formgeist is working on some icons. We should have those shortly for the list and tutorial views.

nreese · 2018-01-09T18:42:48Z

@kobelb @alexfrancoeur @elastic/kibana-design @ycombinator @tsg I would like to merge this PR tomorrow morning. Are there any blockers to merging?

ycombinator · 2018-01-09T18:45:03Z

I would like to merge this PR tomorrow morning. Are there any blockers to merging?

None from my side. There will always be more tutorial content and that should come in follow up PRs.

cjcenizal · 2018-01-09T18:49:30Z

@nreese None from me but I haven't done a code review. Do you want one?

tsg · 2018-01-09T19:24:02Z

No objections from my side either.

alexfrancoeur · 2018-01-09T19:39:20Z

No objections, I'd like to open another issue to address some of my UI/UX observations in my previous comment. The design team have put together some icons that we'll need to add in as well, ideally before 6.2. I think it makes sense to get this PR and address the other two topics after the fact. I'll open issues for both of these separately.

kobelb

LGTM

alexfrancoeur · 2018-01-10T14:22:20Z

ayeeee!!! Nice @nreese! great work 😄 🍾 🏆

formgeist · 2018-01-10T14:24:07Z

Really nice work @nreese

ycombinator · 2018-01-10T14:26:03Z

Well done, @nreese. Congratulations! 🎉 🍾

* add tutorial directory and home promo section * tutorial components * use KuiCodeEditor for displaying instruction code * move spec files to server so joi can be used. Fetch via rest API * Adding more tutorials (#4) * More edits on the Apache logs tutorial * Added nginx, mysql, and sytem modules for FB * Moved apache to apacheLogs and added an apacheMetrics tutorial * Added mysqlMetrics, nginxMetrics, systemMetrics tutorials * Reduce duplication in the tutorials This uses common objects for the install and start steps for Filebeat. Same can be done for MB. * fix windows path for config file * add markdown parsing * use mustache to replace config.kibana.version with kibana version * add image preview to tutorial introduction * fix css class name * add param types constants * add docs variables * [WIP] Logstash Netflow module tutorial (#5) * First draft of Logstash Netflow module tutorial * Incorporated writing style suggestions * pass params to template replace logic * parameter inputs * use isReadOnly flag from ui-framework for KuiCodeEditor * dedemorton commits on netflow * remove trailing slash from base links * add config.docs.logstash and fix vertical spacing between Content component and commands * Use logstash docs config variable * Starting to add Deb instructions * Fix Logstash documentation link * Make commands optional * Refactor: extract common LS instructions * Edits for the existing tutorials * change schema to support three instruction types * [Netflow tutorial] Simplify OSX instructions * replace axios with fetch * pass credentials to tutorial fetch * display cloud instructions when cloud set * RadioButtonGroup component * update copy * add tutorial component jest tests * content component test * load isCloudEnabled in home_app * add functional test ensuring add data tutorials are fetch and displayed * rename card btns to 'Add data', fix type in tutorial directory tab, remove 'Set up index pattern from tutorial directory' * move parameters form to right of instruction set title * add copy snippet button, remove line numbers from command block * add breadcrumb to tutorial view * update tutorial jest snapshot * use componentDidMount and ignore async results if componenent has been unmounted * define shape of prop for instructionVariants and params. Create NumberParameter and StringParameter components * add bread crumb to add data directory page * Add cloud version of the apache_logs tutorial (#16) * Add cloud version of the apache_logs tutorial * Added onprem-cloud version as well * fix styling broken by EUI rebase * add artifacts to tutorial schema * fix styling for code block * [Tutorials] Netflow: instructions for onPremCloud (#18) * Extract common on-prem cloud instructions so LS and Beats can share them * Extracting common instructions; adding onPremCloud instructions * fix copy bug where copy would only contain previously selected text * make string parameter input type be text * Implementing Elastic Cloud tutorial for Netflow module (#19) * More tutorial edits (#20) * More tutorial edits This updates the on prem instructions with a step that installs the GeoIP and UA plugins in ES. It also makes the on-prem steps more consistent with the cloud instructions which results in less redundancy in the code. * Show config step for all variants * More DRY in the tutorial content * Updated screenshot for apache_logs * wrap markdown content in markdown-body class * use EuiFlexGroup to remove wasted space with 'copy snippet' button and instruction text * change OSX to macOS, use Computed property names for instruction_variant DISPLAY_MAP, replace /app/kibana with kbnBaseUrl, remove unneeded if check in copy_to_clippboard, put getTutorials mixin on server instead of request * capitilize 'C' in Elastic Cloud * remove try/catch from copy_to_clipboard * Removing unrelated instructions * Copy editing fixes * Multiply edits to the Beats tutorials (#21) * Updated Nginx module * Updated MySQL logs module * Updated system logs module * Correct the on_prem_cloud enable steps * Updated the Nginx metrics tutorial and added screenshot * Updated the Apache metrics module + screenshot * Updated the MySQL metrics module + screenshot * Updated the system metrics module + screenshot * prevent 'Copy snippet' button text from wrapping * [Netflow tutorial] Windows instructions (#22) * [Netflow tutorial] Adding onPrem instructions for Windows * Removing unrelated/superfluous instructions * Adding Windows instructions for onPremElasticCloud and elasticCloud * use EuiImage so tutorial images are clickable to view in full screen * fix jest tests * set fullScreenIconColor and alt options for EuiImage, add space between command block and instruction text

* Kibana Home page - phase two (#14749) * add tutorial directory and home promo section * tutorial components * use KuiCodeEditor for displaying instruction code * move spec files to server so joi can be used. Fetch via rest API * Adding more tutorials (#4) * More edits on the Apache logs tutorial * Added nginx, mysql, and sytem modules for FB * Moved apache to apacheLogs and added an apacheMetrics tutorial * Added mysqlMetrics, nginxMetrics, systemMetrics tutorials * Reduce duplication in the tutorials This uses common objects for the install and start steps for Filebeat. Same can be done for MB. * fix windows path for config file * add markdown parsing * use mustache to replace config.kibana.version with kibana version * add image preview to tutorial introduction * fix css class name * add param types constants * add docs variables * [WIP] Logstash Netflow module tutorial (#5) * First draft of Logstash Netflow module tutorial * Incorporated writing style suggestions * pass params to template replace logic * parameter inputs * use isReadOnly flag from ui-framework for KuiCodeEditor * dedemorton commits on netflow * remove trailing slash from base links * add config.docs.logstash and fix vertical spacing between Content component and commands * Use logstash docs config variable * Starting to add Deb instructions * Fix Logstash documentation link * Make commands optional * Refactor: extract common LS instructions * Edits for the existing tutorials * change schema to support three instruction types * [Netflow tutorial] Simplify OSX instructions * replace axios with fetch * pass credentials to tutorial fetch * display cloud instructions when cloud set * RadioButtonGroup component * update copy * add tutorial component jest tests * content component test * load isCloudEnabled in home_app * add functional test ensuring add data tutorials are fetch and displayed * rename card btns to 'Add data', fix type in tutorial directory tab, remove 'Set up index pattern from tutorial directory' * move parameters form to right of instruction set title * add copy snippet button, remove line numbers from command block * add breadcrumb to tutorial view * update tutorial jest snapshot * use componentDidMount and ignore async results if componenent has been unmounted * define shape of prop for instructionVariants and params. Create NumberParameter and StringParameter components * add bread crumb to add data directory page * Add cloud version of the apache_logs tutorial (#16) * Add cloud version of the apache_logs tutorial * Added onprem-cloud version as well * fix styling broken by EUI rebase * add artifacts to tutorial schema * fix styling for code block * [Tutorials] Netflow: instructions for onPremCloud (#18) * Extract common on-prem cloud instructions so LS and Beats can share them * Extracting common instructions; adding onPremCloud instructions * fix copy bug where copy would only contain previously selected text * make string parameter input type be text * Implementing Elastic Cloud tutorial for Netflow module (#19) * More tutorial edits (#20) * More tutorial edits This updates the on prem instructions with a step that installs the GeoIP and UA plugins in ES. It also makes the on-prem steps more consistent with the cloud instructions which results in less redundancy in the code. * Show config step for all variants * More DRY in the tutorial content * Updated screenshot for apache_logs * wrap markdown content in markdown-body class * use EuiFlexGroup to remove wasted space with 'copy snippet' button and instruction text * change OSX to macOS, use Computed property names for instruction_variant DISPLAY_MAP, replace /app/kibana with kbnBaseUrl, remove unneeded if check in copy_to_clippboard, put getTutorials mixin on server instead of request * capitilize 'C' in Elastic Cloud * remove try/catch from copy_to_clipboard * Removing unrelated instructions * Copy editing fixes * Multiply edits to the Beats tutorials (#21) * Updated Nginx module * Updated MySQL logs module * Updated system logs module * Correct the on_prem_cloud enable steps * Updated the Nginx metrics tutorial and added screenshot * Updated the Apache metrics module + screenshot * Updated the MySQL metrics module + screenshot * Updated the system metrics module + screenshot * prevent 'Copy snippet' button text from wrapping * [Netflow tutorial] Windows instructions (#22) * [Netflow tutorial] Adding onPrem instructions for Windows * Removing unrelated/superfluous instructions * Adding Windows instructions for onPremElasticCloud and elasticCloud * use EuiImage so tutorial images are clickable to view in full screen * fix jest tests * set fullScreenIconColor and alt options for EuiImage, add space between command block and instruction text * fix broken depenencies (#15960) * update yarn.lock

monicasarbu · 2018-01-10T21:20:39Z

Congratulations everyone for merging Kibana Home!

nreese mentioned this pull request Nov 3, 2017

[WIP] Kibana Home page #14431

Closed

timroes self-requested a review November 3, 2017 15:47

timroes reviewed Nov 7, 2017

View reviewed changes

nreese force-pushed the home_phase_two branch from cc45e74 to 4893423 Compare November 7, 2017 19:43

nreese force-pushed the home_phase_two branch from 13e5b00 to 9171513 Compare November 9, 2017 17:44

nreese mentioned this pull request Nov 9, 2017

[WIP] Logstash Netflow module tutorial nreese/kibana#5

Merged

1 task

tsg reviewed Nov 9, 2017

View reviewed changes

nreese force-pushed the home_phase_two branch from 7755aba to 5fd0359 Compare November 10, 2017 17:12

ycombinator reviewed Nov 10, 2017

View reviewed changes

nreese added :Sharing v6.2.0 v7.0.0 labels Nov 21, 2017

nreese force-pushed the home_phase_two branch from a2e5452 to 90fdb09 Compare November 27, 2017 15:36

tsg and others added 3 commits January 8, 2018 08:34

prevent 'Copy snippet' button text from wrapping

d4c65e4

[Netflow tutorial] Windows instructions (#22)

abb1935

* [Netflow tutorial] Adding onPrem instructions for Windows * Removing unrelated/superfluous instructions * Adding Windows instructions for onPremElasticCloud and elasticCloud

nreese force-pushed the home_phase_two branch from ccf9e62 to abb1935 Compare January 8, 2018 15:34

nreese added 2 commits January 8, 2018 08:49

use EuiImage so tutorial images are clickable to view in full screen

76c1638

fix jest tests

214eaf2

cjcenizal reviewed Jan 8, 2018

View reviewed changes

set fullScreenIconColor and alt options for EuiImage, add space betwe…

ac9e4c6

…en command block and instruction text

alexfrancoeur reviewed Jan 8, 2018

View reviewed changes

kobelb approved these changes Jan 9, 2018

View reviewed changes

nreese merged commit 57dfdd5 into elastic:master Jan 10, 2018

alexfrancoeur mentioned this pull request Jan 10, 2018

UI/UX Tweaks for the Add Data UI #15961

Closed

This was referenced Jan 10, 2018

[6.x] Kibana Home page - phase two (#14749) #15962

Closed

[6.x] Kibana Home page - phase two (#14749) #15965

Merged

cchaos mentioned this pull request Jan 10, 2018

Steps component needs style for substeps elastic/eui#275

Closed

alexfrancoeur mentioned this pull request Jan 11, 2018

Add Data UI Text Review #16003

Closed

cchaos mentioned this pull request Feb 9, 2018

Horizontal & Complex Steps elastic/eui#375

Merged

4 tasks

nreese deleted the home_phase_two branch February 13, 2018 19:31

Kibana Home page - phase two #14749

Kibana Home page - phase two #14749

Conversation

nreese commented Nov 3, 2017 • edited Loading

alexfrancoeur commented Nov 5, 2017

alexfrancoeur commented Nov 5, 2017

alexfrancoeur commented Nov 5, 2017

Choose a reason for hiding this comment

tsg commented Nov 9, 2017 • edited Loading

nreese commented Nov 9, 2017 • edited Loading

tsg commented Nov 9, 2017

nreese commented Nov 9, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ycombinator commented Nov 10, 2017

ycombinator commented Nov 10, 2017

Choose a reason for hiding this comment

tsg commented Nov 17, 2017

nreese commented Nov 17, 2017 • edited Loading

ycombinator commented Nov 17, 2017

tsg commented Nov 17, 2017

ycombinator commented Nov 17, 2017 • edited Loading

nreese commented Nov 17, 2017

ycombinator commented Nov 17, 2017

nreese commented Nov 17, 2017

nreese commented Jan 8, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexfrancoeur left a comment

Choose a reason for hiding this comment

nreese commented Jan 9, 2018

ycombinator commented Jan 9, 2018

cjcenizal commented Jan 9, 2018

tsg commented Jan 9, 2018

alexfrancoeur commented Jan 9, 2018

kobelb left a comment

Choose a reason for hiding this comment

alexfrancoeur commented Jan 10, 2018

formgeist commented Jan 10, 2018

ycombinator commented Jan 10, 2018

monicasarbu commented Jan 10, 2018

nreese commented Nov 3, 2017 •

edited

Loading

tsg commented Nov 9, 2017 •

edited

Loading

nreese commented Nov 9, 2017 •

edited

Loading

nreese commented Nov 17, 2017 •

edited

Loading

ycombinator commented Nov 17, 2017 •

edited

Loading