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

package.json

@@ -156,6 +156,7 @@
     "moment": "2.13.0",
     "moment-timezone": "0.5.4",
     "ngreact": "0.5.1",
+    "mustache": "2.3.0",
     "no-ui-slider": "1.2.0",
     "node-fetch": "1.3.2",
     "pegjs": "0.9.0",

src/core_plugins/kibana/common/tutorials/filebeat_cloud_instructions.js

@@ -0,0 +1,40 @@
+export const FILEBEAT_CLOUD_INSTRUCTIONS = {
+  CONFIG: {
+    OSX: {
+      title: 'Edit the configuration',
+      textPre: 'Modify `filebeat.yml` to set the connection information for Elastic Cloud:',
+      commands: [
+        'cloud.id: "{config.cloud.id}"',
+        'cloud.auth: "elastic:<password>"'
+      ],
+      textPost: 'Where `<password>` is the password of the `elastic` user.'
+    },
+    DEB: {
+      title: 'Edit the configuration',
+      textPre: 'Modify `/etc/filebeat/filebeat.yml` to set the connection information for Elastic Cloud:',
+      commands: [
+        'cloud.id: "{config.cloud.id}"',
+        'cloud.auth: "elastic:<password>"'
+      ],
+      textPost: 'Where `<password>` is the password of the `elastic` user.'
+    },
+    RPM: {
+      title: 'Edit the configuration',
+      textPre: 'Modify `/etc/filebeat/filebeat.yml` to set the connection information for Elastic Cloud:',
+      commands: [
+        'cloud.id: "{config.cloud.id}"',
+        'cloud.auth: "elastic:<password>"'
+      ],
+      textPost: 'Where `<password>` is the password of the `elastic` user.'
+    },
+    WINDOWS: {
+      title: 'Edit the configuration',
+      textPre: 'Modify `C:\\Program Files\\Filebeat\\filebeat.yml` to set the connection information for Elastic Cloud:',
+      commands: [
+        'cloud.id: "{config.cloud.id}"',
+        'cloud.auth: "elastic:<password>"'
+      ],
+      textPost: 'Where `<password>` is the password of the `elastic` user.'
+    }
+  }
+};

src/core_plugins/kibana/common/tutorials/filebeat_instructions.js

@@ -0,0 +1,166 @@
+export const FILEBEAT_INSTRUCTIONS = {
+  INSTALL: {
+    OSX: {
+      title: 'Download and install Filebeat',
+      textPre: 'First time using Filebeat? See the [Getting Started Guide]' +
+               '({config.docs.beats.filebeat}/filebeat-getting-started.html).',
+      commands: [
+        'curl -L -O https://artifacts.elastic.co/downloads/beats/filebeat/filebeat-{config.kibana.version}-darwin-x86_64.tar.gz',
+        'tar xzvf filebeat-{config.kibana.version}-darwin-x86_64.tar.gz',
+        'cd filebeat-{config.kibana.version}-darwin-x86_64/',
+      ]
+    },
+    DEB: {
+      title: 'Download and install Filebeat',
+      textPre: 'First time using Filebeat? See the [Getting Started Guide]' +
+               '({config.docs.beats.filebeat}/filebeat-getting-started.html).',
+      commands: [
+        'curl -L -O https://artifacts.elastic.co/downloads/beats/filebeat/filebeat-{config.kibana.version}-amd64.deb',
+        'sudo dpkg -i filebeat-{config.kibana.version}-amd64.deb'
+      ],
+      textPost: 'Looking for the 32 bits packages? See the [Download page](https://www.elastic.co/downloads/beats/filebeat).'
+    },
+    RPM: {
+      title: 'Download and install Filebeat',
+      textPre: 'First time using Filebeat? See the [Getting Started Guide]' +
+               '({config.docs.beats.filebeat}/filebeat-getting-started.html).',
+      commands: [
+        'curl -L -O https://artifacts.elastic.co/downloads/beats/filebeat/filebeat-{config.kibana.version}-x86_64.rpm',
+        'sudo rpm -vi filebeat-{config.kibana.version}-x86_64.rpm'
+      ],
+      textPost: 'Looking for the 32 bits packages? See the [Download page](https://www.elastic.co/downloads/beats/filebeat).'
+    },
+    WINDOWS: {
+      title: 'Download and install Filebeat',
+      textPre: 'First time using Filebeat? See the [Getting Started Guide]' +
+               '({config.docs.beats.filebeat}/filebeat-getting-started.html).\n' +
+               '1. Download the Filebeat Windows zip file from the [downloads](https://www.elastic.co/downloads/beats/filebeat) page.\n' +
+               '2. Extract the contents of the zip file into `C:\\Program Files`.\n' +
+               '3. Rename the `filebeat-{config.kibana.version}-windows` directory to `Filebeat`.\n' +
+               '4. Open a PowerShell prompt as an Administrator (right-click the PowerShell icon and select' +
+               ' Run As Administrator). If you are running Windows XP, you may need to download and install PowerShell.\n' +
+               '5. From the PowerShell prompt, run the following commands to install Filebeat as a Windows service.',
+      commands: [
+        'PS > cd C:\\Program Files\\Filebeat',
+        'PS C:\\Program Files\\Filebeat> .\\install-service-filebeat.ps1'
+      ],
+      textPost: 'Modify the settings under `output.elasticsearch` in the ' +
+                '`C:\\Program Files\\Filebeat\\filebeat.yml` file to point to your Elasticsearch installation.'
+    }
+  },
+  START: {
+    OSX: {
+      title: 'Start Filebeat',
+      textPre: 'The `setup` command loads the Kibana dashboards.' +
+                ' If the dashboards are already set up, omit this command.',
+      commands: [
+        './filebeat setup',
+        './filebeat -e',
+      ]
+    },
+    DEB: {
+      title: 'Start Filebeat',
+      textPre: 'The `setup` command loads the Kibana dashboards. If the dashboards are already set up, ' +
+                'omit this command.',
+      commands: [
+        'sudo filebeat setup',
+        'sudo service filebeat start',
+      ]
+    },
+    RPM: {
+      title: 'Start Filebeat',
+      textPre: 'The `setup` command loads the Kibana dashboards. If the dashboards are already set up, ' +
+                'omit this command.',
+      commands: [
+        'sudo filebeat setup',
+        'sudo service filebeat start',
+      ],
+    },
+    WINDOWS: {
+      title: 'Start Filebeat',
+      textPre: 'The `setup` command loads the Kibana dashboards. If the dashboards are already set up, ' +
+                'omit this command.',
+      commands: [
+        'PS C:\\Program Files\\Filebeat> filebeat.exe setup',
+        'PS C:\\Program Files\\Filebeat> Service-Start filebeat',
+      ]
+    }
+  },
+  CONFIG: {
+    OSX: {
+      title: 'Edit the configuration',
+      textPre: 'Modify `filebeat.yml` to set the connection information:',
+      commands: [
+        'output.elasticsearch:',
+        '  hosts: ["<es_url>"]',
+        '  username: "elastic"',
+        '  password: "<password>"',
+        'setup.kibana:',
+        '  host: "<kibana_url>"'
+      ],
+      textPost: 'Where `<password>` is the password of the `elastic` user, ' +
+                '`<es_url>` is the URL of Elasticsearch, and `<kibana_url>` is the URL of Kibana.'
+    },
+    DEB: {
+      title: 'Edit the configuration',
+      textPre: 'Modify `/etc/filebeat/filebeat.yml` to set the connection information:',
+      commands: [
+        'output.elasticsearch:',
+        '  hosts: ["<es_url>"]',
+        '  username: "elastic"',
+        '  password: "<password>"',
+        'setup.kibana:',
+        '  host: "<kibana_url>"'
+      ],
+      textPost: 'Where `<password>` is the password of the `elastic` user, ' +
+                '`<es_url>` is the URL of Elasticsearch, and `<kibana_url>` is the URL of Kibana.'
+    },
+    RPM: {
+      title: 'Edit the configuration',
+      textPre: 'Modify `/etc/filebeat/filebeat.yml` to set the connection information:',
+      commands: [
+        'output.elasticsearch:',
+        '  hosts: ["<es_url>"]',
+        '  username: "elastic"',
+        '  password: "<password>"',
+        'setup.kibana:',
+        '  host: "<kibana_url>"'
+      ],
+      textPost: 'Where `<password>` is the password of the `elastic` user, ' +
+                '`<es_url>` is the URL of Elasticsearch, and `<kibana_url>` is the URL of Kibana.'
+    },
+    WINDOWS: {
+      title: 'Edit the configuration',
+      textPre: 'Modify `C:\\Program Files\\Filebeat\\filebeat.yml` to set the connection information:',
+      commands: [
+        'output.elasticsearch:',
+        '  hosts: ["<es_url>"]',
+        '  username: "elastic"',
+        '  password: "<password>"',
+        'setup.kibana:',
+        '  host: "<kibana_url>"'
+      ],
+      textPost: 'Where `<password>` is the password of the `elastic` user, ' +
+                '`<es_url>` is the URL of Elasticsearch, and `<kibana_url>` is the URL of Kibana.'
+    }
+  },
+  PLUGINS: {
+    GEOIP_AND_UA: {
+      title: 'Install Elasticsearch GeoIP and user agent plugins',
+      textPre: 'This module requires two Elasticsearch plugins that are not ' +
+               'installed by default.\n\nFrom the Elasticsearch installation folder, run:',
+      commands: [
+        'bin/elasticsearch-plugin install ingest-geoip',
+        'bin/elasticsearch-plugin install ingest-user-agent'
+      ]
+    },
+    GEOIP: {
+      title: 'Install Elasticsearch GeoIP plugin',
+      textPre: 'This module requires an Elasticsearch plugin that is not ' +
+               'installed by default.\n\nFrom the Elasticsearch installation folder, run:',
+      commands: [
+        'bin/elasticsearch-plugin install ingest-geoip'
+      ]
+    }
+  }
+};

src/core_plugins/kibana/common/tutorials/filebeat_onprem_cloud_instructions.js

@@ -0,0 +1,2 @@
+export const FILEBEAT_ONPREM_CLOUD_INSTRUCTIONS = {
+};

src/core_plugins/kibana/common/tutorials/instruction_variant.js

@@ -0,0 +1,34 @@
+export const INSTRUCTION_VARIANT = {
+  OSX: 'osx',
+  DEB: 'deb',
+  RPM: 'rpm',
+  DOCKER: 'docker',
+  WINDOWS: 'windows',
+  NODE: 'node',
+  DJANGO: 'django',
+  FLASK: 'flask'
+};
+
+const DISPLAY_MAP = {
+  [INSTRUCTION_VARIANT.OSX]: 'macOS',
+  [INSTRUCTION_VARIANT.DEB]: 'DEB',
+  [INSTRUCTION_VARIANT.RPM]: 'RPM',
+  [INSTRUCTION_VARIANT.DOCKER]: 'Docker',
+  [INSTRUCTION_VARIANT.WINDOWS]: 'Windows',
+  [INSTRUCTION_VARIANT.NODE]: 'Node.js',
+  [INSTRUCTION_VARIANT.DJANGO]: 'Django',
+  [INSTRUCTION_VARIANT.FLASK]: 'Flask',
+};
+
+/**
+ * Convert instruction variant id into display text.
+ *
+ * @params {String} id - instruction variant id as defined from INSTRUCTION_VARIANT
+ * @return {String} display name
+ */
+export function getDisplayText(id) {
+  if (id in DISPLAY_MAP) {
+    return DISPLAY_MAP[id];
+  }
+  return id;
+}

src/core_plugins/kibana/common/tutorials/logstash_instructions.js

@@ -0,0 +1,27 @@
+export const LOGSTASH_INSTRUCTIONS = {
+  INSTALL: {
+    OSX: [
+      {
+        title: 'Download and install the Java Runtime Environment',
+        textPre: 'Follow the installation instructions [here](https://docs.oracle.com/javase/8/docs/technotes/guides/install/mac_jre.html).'
+      },
+      {
+        title: 'Download and install Logstash',
+        commands: [
+          'curl -L -O https://artifacts.elastic.co/downloads/logstash/logstash-{config.kibana.version}.tar.gz',
+          'tar xzvf logstash-{config.kibana.version}.tar.gz'
+        ]
+      }
+    ],
+    WINDOWS: [
+      {
+        title: 'Download and install the Java runtime environment',
+        textPre: 'Follow the installation instructions [here](https://docs.oracle.com/javase/8/docs/technotes/guides/install/windows_jre_install.html).'
+      },
+      {
+        title: 'Download and install Logstash',
+        textPre: 'Download Logstash from [here](https://artifacts.elastic.co/downloads/logstash/logstash-{config.kibana.version}.zip) and unzip it.'
+      }
+    ],
+  }
+};

src/core_plugins/kibana/common/tutorials/metricbeat_cloud_instructions.js

@@ -0,0 +1,40 @@
+export const METRICBEAT_CLOUD_INSTRUCTIONS = {
+  CONFIG: {
+    OSX: {
+      title: 'Edit the configuration',
+      textPre: 'Modify `metricbeat.yml` to set the connection information for Elastic Cloud:',
+      commands: [
+        'cloud.id: "{config.cloud.id}"',
+        'cloud.auth: "elastic:<password>"'
+      ],
+      textPost: 'Where `<password>` is the password of the `elastic` user.'
+    },
+    DEB: {
+      title: 'Edit the configuration',
+      textPre: 'Modify `/etc/metricbeat/metricbeat.yml` to set the connection information for Elastic Cloud:',
+      commands: [
+        'cloud.id: "{config.cloud.id}"',
+        'cloud.auth: "elastic:<password>"'
+      ],
+      textPost: 'Where `<password>` is the password of the `elastic` user.'
+    },
+    RPM: {
+      title: 'Edit the configuration',
+      textPre: 'Modify `/etc/metricbeat/metricbeat.yml` to set the connection information for Elastic Cloud:',
+      commands: [
+        'cloud.id: "{config.cloud.id}"',
+        'cloud.auth: "elastic:<password>"'
+      ],
+      textPost: 'Where `<password>` is the password of the `elastic` user.'
+    },
+    WINDOWS: {
+      title: 'Edit the configuration',
+      textPre: 'Modify `C:\\Program Files\\Filebeat\\metricbeat.yml` to set the connection information for Elastic Cloud:',
+      commands: [
+        'cloud.id: "{config.cloud.id}"',
+        'cloud.auth: "elastic:<password>"'
+      ],
+      textPost: 'Where `<password>` is the password of the `elastic` user.'
+    }
+  }
+};