Skip to content

Commit

Permalink
[6.x] Kibana Home page - phase two (#14749) (#15965)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
nreese authored Jan 10, 2018
1 parent 1dea44c commit ff460a7
Show file tree
Hide file tree
Showing 106 changed files with 4,233 additions and 8 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
@@ -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.'
}
}
};
166 changes: 166 additions & 0 deletions src/core_plugins/kibana/common/tutorials/filebeat_instructions.js
Original file line number Diff line number Diff line change
@@ -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'
]
}
}
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const FILEBEAT_ONPREM_CLOUD_INSTRUCTIONS = {
};
34 changes: 34 additions & 0 deletions src/core_plugins/kibana/common/tutorials/instruction_variant.js
Original file line number Diff line number Diff line change
@@ -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;
}
27 changes: 27 additions & 0 deletions src/core_plugins/kibana/common/tutorials/logstash_instructions.js
Original file line number Diff line number Diff line change
@@ -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.'
}
],
}
};
Original file line number Diff line number Diff line change
@@ -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.'
}
}
};
Loading

0 comments on commit ff460a7

Please sign in to comment.