From 6c2ec8756f682acd31920d3d04dbd079936624c1 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Tue, 13 Feb 2018 10:31:19 -0700
Subject: [PATCH] Add icons to Add Data list and tutorial view (#16592)

* add icons for home tutorials

* add test for Synopsis component
---
 .../common/tutorials/tutorial_schema.js       |   2 +-
 .../__snapshots__/synopsis.test.js.snap       | 149 +++++++++++++++
 .../kibana/public/home/components/synopsis.js |  15 +-
 .../public/home/components/synopsis.test.js   |  35 ++++
 .../__snapshots__/introduction.test.js.snap   | 171 ++++++++++++++++++
 .../__snapshots__/tutorial.test.js.snap       |   2 +
 .../home/components/tutorial/introduction.js  |  35 +++-
 .../components/tutorial/introduction.test.js  |  41 +++++
 .../home/components/tutorial/tutorial.js      |   1 +
 .../home/components/tutorial/tutorial.test.js |   1 +
 .../home/components/tutorial_directory.js     |   1 +
 .../server/tutorials/apache_logs/index.js     |   2 +-
 .../server/tutorials/apache_metrics/index.js  |   2 +-
 .../kibana/server/tutorials/apm/index.js      |   1 +
 .../server/tutorials/docker_metrics/index.js  |   2 +-
 .../tutorials/kubernetes_metrics/index.js     |   2 +-
 .../server/tutorials/mysql_logs/index.js      |   2 +-
 .../server/tutorials/mysql_metrics/index.js   |   2 +-
 .../kibana/server/tutorials/netflow/index.js  |   1 -
 .../server/tutorials/nginx_logs/index.js      |   2 +-
 .../server/tutorials/nginx_metrics/index.js   |   2 +-
 .../server/tutorials/redis_logs/index.js      |   2 +-
 .../server/tutorials/redis_metrics/index.js   |   2 +-
 .../server/tutorials/system_logs/index.js     |   1 -
 .../server/tutorials/system_metrics/index.js  |   1 -
 25 files changed, 452 insertions(+), 25 deletions(-)
 create mode 100644 src/core_plugins/kibana/public/home/components/__snapshots__/synopsis.test.js.snap
 create mode 100644 src/core_plugins/kibana/public/home/components/synopsis.test.js
 create mode 100644 src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap
 create mode 100644 src/core_plugins/kibana/public/home/components/tutorial/introduction.test.js

diff --git a/src/core_plugins/kibana/common/tutorials/tutorial_schema.js b/src/core_plugins/kibana/common/tutorials/tutorial_schema.js
index 5501170c5e8b7..5f468f46e92b8 100644
--- a/src/core_plugins/kibana/common/tutorials/tutorial_schema.js
+++ b/src/core_plugins/kibana/common/tutorials/tutorial_schema.js
@@ -56,7 +56,7 @@ export const tutorialSchema = {
   category: Joi.string().valid(Object.values(TUTORIAL_CATEGORY)).required(),
   name: Joi.string().required(),
   shortDescription: Joi.string().required(),
-  iconPath: Joi.string(),
+  euiIconType: Joi.string(), //EUI icon type string, one of https://elastic.github.io/eui/#/icons
   longDescription: Joi.string().required(),
   completionTimeMinutes: Joi.number().integer(),
   previewImagePath: Joi.string(),
diff --git a/src/core_plugins/kibana/public/home/components/__snapshots__/synopsis.test.js.snap b/src/core_plugins/kibana/public/home/components/__snapshots__/synopsis.test.js.snap
new file mode 100644
index 0000000000000..473e79ceee721
--- /dev/null
+++ b/src/core_plugins/kibana/public/home/components/__snapshots__/synopsis.test.js.snap
@@ -0,0 +1,149 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`props iconType 1`] = `
+<a
+  className="euiLink synopsis"
+  data-test-subj="homeSynopsisLinkgreat tutorial"
+  href="link_to_item"
+>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    gutterSize="l"
+    justifyContent="flexStart"
+    responsive={true}
+    wrap={false}
+  >
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <EuiIcon
+        size="xl"
+        type="logoApache"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem
+      className="synopsisContent"
+      component="div"
+      grow={true}
+    >
+      <EuiTitle
+        className="synopsisTitle"
+        size="s"
+      >
+        <h4>
+          Great tutorial
+        </h4>
+      </EuiTitle>
+      <EuiText
+        className="synopsisBody"
+      >
+        <p>
+          <EuiTextColor
+            color="subdued"
+          >
+            this is a great tutorial about...
+          </EuiTextColor>
+        </p>
+      </EuiText>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</a>
+`;
+
+exports[`props iconUrl 1`] = `
+<a
+  className="euiLink synopsis"
+  data-test-subj="homeSynopsisLinkgreat tutorial"
+  href="link_to_item"
+>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    gutterSize="l"
+    justifyContent="flexStart"
+    responsive={true}
+    wrap={false}
+  >
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <img
+        alt=""
+        className="synopsisIcon"
+        src="icon_url"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem
+      className="synopsisContent"
+      component="div"
+      grow={true}
+    >
+      <EuiTitle
+        className="synopsisTitle"
+        size="s"
+      >
+        <h4>
+          Great tutorial
+        </h4>
+      </EuiTitle>
+      <EuiText
+        className="synopsisBody"
+      >
+        <p>
+          <EuiTextColor
+            color="subdued"
+          >
+            this is a great tutorial about...
+          </EuiTextColor>
+        </p>
+      </EuiText>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</a>
+`;
+
+exports[`render 1`] = `
+<a
+  className="euiLink synopsis"
+  data-test-subj="homeSynopsisLinkgreat tutorial"
+  href="link_to_item"
+>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    gutterSize="l"
+    justifyContent="flexStart"
+    responsive={true}
+    wrap={false}
+  >
+    <EuiFlexItem
+      className="synopsisContent"
+      component="div"
+      grow={true}
+    >
+      <EuiTitle
+        className="synopsisTitle"
+        size="s"
+      >
+        <h4>
+          Great tutorial
+        </h4>
+      </EuiTitle>
+      <EuiText
+        className="synopsisBody"
+      >
+        <p>
+          <EuiTextColor
+            color="subdued"
+          >
+            this is a great tutorial about...
+          </EuiTextColor>
+        </p>
+      </EuiText>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</a>
+`;
diff --git a/src/core_plugins/kibana/public/home/components/synopsis.js b/src/core_plugins/kibana/public/home/components/synopsis.js
index 0c2bda748d616..80522f1dfc414 100644
--- a/src/core_plugins/kibana/public/home/components/synopsis.js
+++ b/src/core_plugins/kibana/public/home/components/synopsis.js
@@ -8,9 +8,10 @@ import {
   EuiTitle,
   EuiText,
   EuiTextColor,
+  EuiIcon,
 } from '@elastic/eui';
 
-export function Synopsis({ description, iconUrl, title, url, wrapInPanel }) {
+export function Synopsis({ description, iconUrl, iconType, title, url, wrapInPanel }) {
   let optionalImg;
   if (iconUrl) {
     optionalImg = (
@@ -22,6 +23,15 @@ export function Synopsis({ description, iconUrl, title, url, wrapInPanel }) {
         />
       </EuiFlexItem>
     );
+  } else if (iconType) {
+    optionalImg = (
+      <EuiFlexItem grow={false}>
+        <EuiIcon
+          type={iconType}
+          size="xl"
+        />
+      </EuiFlexItem>
+    );
   }
 
   const content = (
@@ -53,8 +63,6 @@ export function Synopsis({ description, iconUrl, title, url, wrapInPanel }) {
     );
   }
 
-
-
   return (
     <a
       href={url}
@@ -69,6 +77,7 @@ export function Synopsis({ description, iconUrl, title, url, wrapInPanel }) {
 Synopsis.propTypes = {
   description: PropTypes.string.isRequired,
   iconUrl: PropTypes.string,
+  iconType: PropTypes.string,
   title: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired
 };
diff --git a/src/core_plugins/kibana/public/home/components/synopsis.test.js b/src/core_plugins/kibana/public/home/components/synopsis.test.js
new file mode 100644
index 0000000000000..089d9a971a06b
--- /dev/null
+++ b/src/core_plugins/kibana/public/home/components/synopsis.test.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Synopsis } from './synopsis';
+
+test('render', () => {
+  const component = shallow(<Synopsis
+    description="this is a great tutorial about..."
+    title="Great tutorial"
+    url="link_to_item"
+  />);
+  expect(component).toMatchSnapshot(); // eslint-disable-line
+});
+
+describe('props', () => {
+  test('iconType', () => {
+    const component = shallow(<Synopsis
+      description="this is a great tutorial about..."
+      title="Great tutorial"
+      url="link_to_item"
+      iconType="logoApache"
+    />);
+    expect(component).toMatchSnapshot(); // eslint-disable-line
+  });
+
+  test('iconUrl', () => {
+    const component = shallow(<Synopsis
+      description="this is a great tutorial about..."
+      title="Great tutorial"
+      url="link_to_item"
+      iconUrl="icon_url"
+    />);
+    expect(component).toMatchSnapshot(); // eslint-disable-line
+  });
+});
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap
new file mode 100644
index 0000000000000..dbf80a28aacb7
--- /dev/null
+++ b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/introduction.test.js.snap
@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`props exportedFieldsUrl 1`] = `
+<EuiFlexGroup
+  alignItems="stretch"
+  component="div"
+  gutterSize="l"
+  justifyContent="flexStart"
+  responsive={true}
+  wrap={false}
+>
+  <EuiFlexItem
+    component="div"
+    grow={true}
+  >
+    <EuiTitle
+      size="l"
+    >
+      <h2>
+        Great tutorial
+      </h2>
+    </EuiTitle>
+    <EuiSpacer
+      size="l"
+    />
+    <Content
+      text="this is a great tutorial about..."
+    />
+    <div>
+      <EuiSpacer
+        size="l"
+      />
+      <EuiButton
+        color="primary"
+        fill={false}
+        href="exported_fields_url"
+        iconSide="left"
+        rel="noopener noreferrer"
+        target="_blank"
+        type="button"
+      >
+        View exported fields
+      </EuiButton>
+    </div>
+  </EuiFlexItem>
+  <EuiFlexItem
+    component="div"
+    grow={false}
+  />
+</EuiFlexGroup>
+`;
+
+exports[`props iconType 1`] = `
+<EuiFlexGroup
+  alignItems="stretch"
+  component="div"
+  gutterSize="l"
+  justifyContent="flexStart"
+  responsive={true}
+  wrap={false}
+>
+  <EuiFlexItem
+    component="div"
+    grow={true}
+  >
+    <EuiTitle
+      size="l"
+    >
+      <h2>
+        <EuiIcon
+          size="xl"
+          style={
+            Object {
+              "marginRight": 16,
+            }
+          }
+          type="logoElastic"
+        />
+        Great tutorial
+      </h2>
+    </EuiTitle>
+    <EuiSpacer
+      size="l"
+    />
+    <Content
+      text="this is a great tutorial about..."
+    />
+  </EuiFlexItem>
+  <EuiFlexItem
+    component="div"
+    grow={false}
+  />
+</EuiFlexGroup>
+`;
+
+exports[`props previewUrl 1`] = `
+<EuiFlexGroup
+  alignItems="stretch"
+  component="div"
+  gutterSize="l"
+  justifyContent="flexStart"
+  responsive={true}
+  wrap={false}
+>
+  <EuiFlexItem
+    component="div"
+    grow={true}
+  >
+    <EuiTitle
+      size="l"
+    >
+      <h2>
+        Great tutorial
+      </h2>
+    </EuiTitle>
+    <EuiSpacer
+      size="l"
+    />
+    <Content
+      text="this is a great tutorial about..."
+    />
+  </EuiFlexItem>
+  <EuiFlexItem
+    component="div"
+    grow={false}
+  >
+    <EuiImage
+      allowFullScreen={true}
+      alt="screenshot of primary dashboard."
+      fullScreenIconColor="dark"
+      hasShadow={true}
+      size="l"
+      url="preview_image_url"
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+`;
+
+exports[`render 1`] = `
+<EuiFlexGroup
+  alignItems="stretch"
+  component="div"
+  gutterSize="l"
+  justifyContent="flexStart"
+  responsive={true}
+  wrap={false}
+>
+  <EuiFlexItem
+    component="div"
+    grow={true}
+  >
+    <EuiTitle
+      size="l"
+    >
+      <h2>
+        Great tutorial
+      </h2>
+    </EuiTitle>
+    <EuiSpacer
+      size="l"
+    />
+    <Content
+      text="this is a great tutorial about..."
+    />
+  </EuiFlexItem>
+  <EuiFlexItem
+    component="div"
+    grow={false}
+  />
+</EuiFlexGroup>
+`;
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap
index f8c62ed720795..b70f6d6882c8e 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/tutorial.test.js.snap
@@ -91,6 +91,7 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
   <div>
     <Introduction
       description="tutorial used to drive jest tests"
+      iconType="logoApache"
       title="jest test tutorial"
     />
     <EuiSpacer
@@ -175,6 +176,7 @@ exports[`should render ELASTIC_CLOUD instructions when isCloudEnabled is true 1`
   <div>
     <Introduction
       description="tutorial used to drive jest tests"
+      iconType="logoApache"
       title="jest test tutorial"
     />
     <EuiSpacer
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/introduction.js b/src/core_plugins/kibana/public/home/components/tutorial/introduction.js
index c5ed87312dcdb..a6698f4ad5801 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/introduction.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/introduction.js
@@ -1,12 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Content } from './content';
-import { EuiTitle, EuiFlexItem, EuiFlexGroup, EuiSpacer, EuiImage } from '@elastic/eui';
 import {
-  KuiLinkButton,
-} from 'ui_framework/components';
+  EuiTitle,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiSpacer,
+  EuiImage,
+  EuiButton,
+  EuiIcon,
+} from '@elastic/eui';
 
-export function Introduction({ description, previewUrl, title, exportedFieldsUrl }) {
+export function Introduction({ description, previewUrl, title, exportedFieldsUrl, iconType }) {
   let img;
   if (previewUrl) {
     img = (
@@ -25,22 +30,35 @@ export function Introduction({ description, previewUrl, title, exportedFieldsUrl
     exportedFields = (
       <div>
         <EuiSpacer />
-        <KuiLinkButton
-          buttonType="secondary"
+        <EuiButton
           href={exportedFieldsUrl}
           target="_blank"
           rel="noopener noreferrer"
         >
           View exported fields
-        </KuiLinkButton>
+        </EuiButton>
       </div>
     );
   }
+  let icon;
+  if (iconType) {
+    icon = (
+      <EuiIcon
+        type={iconType}
+        size="xl"
+        style={{ marginRight: 16 }}
+      />
+    );
+  }
   return (
     <EuiFlexGroup>
+
       <EuiFlexItem>
         <EuiTitle size="l">
-          <h2>{title}</h2>
+          <h2>
+            {icon}
+            {title}
+          </h2>
         </EuiTitle>
         <EuiSpacer />
         <Content text={description} />
@@ -58,4 +76,5 @@ Introduction.propTypes = {
   title: PropTypes.string.isRequired,
   previewUrl: PropTypes.string,
   exportedFieldsUrl: PropTypes.string,
+  iconType: PropTypes.string,
 };
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/introduction.test.js b/src/core_plugins/kibana/public/home/components/tutorial/introduction.test.js
new file mode 100644
index 0000000000000..8741efc67c2fa
--- /dev/null
+++ b/src/core_plugins/kibana/public/home/components/tutorial/introduction.test.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Introduction } from './introduction';
+
+test('render', () => {
+  const component = shallow(<Introduction
+    description="this is a great tutorial about..."
+    title="Great tutorial"
+  />);
+  expect(component).toMatchSnapshot(); // eslint-disable-line
+});
+
+describe('props', () => {
+  test('iconType', () => {
+    const component = shallow(<Introduction
+      description="this is a great tutorial about..."
+      title="Great tutorial"
+      iconType="logoElastic"
+    />);
+    expect(component).toMatchSnapshot(); // eslint-disable-line
+  });
+
+  test('exportedFieldsUrl', () => {
+    const component = shallow(<Introduction
+      description="this is a great tutorial about..."
+      title="Great tutorial"
+      exportedFieldsUrl="exported_fields_url"
+    />);
+    expect(component).toMatchSnapshot(); // eslint-disable-line
+  });
+
+  test('previewUrl', () => {
+    const component = shallow(<Introduction
+      description="this is a great tutorial about..."
+      title="Great tutorial"
+      previewUrl="preview_image_url"
+    />);
+    expect(component).toMatchSnapshot(); // eslint-disable-line
+  });
+});
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js
index 36287bf864dad..4f86688087e07 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js
@@ -194,6 +194,7 @@ export class Tutorial extends React.Component {
             description={this.props.replaceTemplateStrings(this.state.tutorial.longDescription)}
             previewUrl={previewUrl}
             exportedFieldsUrl={exportedFieldsUrl}
+            iconType={this.state.tutorial.euiIconType}
           />
 
           <EuiSpacer />
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.test.js b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.test.js
index 240be93bf0588..3d7de5c9888a8 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.test.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.test.js
@@ -28,6 +28,7 @@ function buildInstructionSet(type) {
 const tutorial = {
   name: 'jest test tutorial',
   longDescription: 'tutorial used to drive jest tests',
+  euiIconType: 'logoApache',
   elasticCloud: buildInstructionSet('elasticCloud'),
   onPrem: buildInstructionSet('onPrem'),
   onPremElasticCloud: buildInstructionSet('onPremElasticCloud')
diff --git a/src/core_plugins/kibana/public/home/components/tutorial_directory.js b/src/core_plugins/kibana/public/home/components/tutorial_directory.js
index cfb9fbd80982c..dda342b7e51aa 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial_directory.js
+++ b/src/core_plugins/kibana/public/home/components/tutorial_directory.js
@@ -93,6 +93,7 @@ export class TutorialDirectory extends React.Component {
         return (
           <EuiFlexItem key={tutorial.name}>
             <Synopsis
+              iconType={tutorial.euiIconType}
               description={tutorial.shortDescription}
               title={tutorial.name}
               wrapInPanel
diff --git a/src/core_plugins/kibana/server/tutorials/apache_logs/index.js b/src/core_plugins/kibana/server/tutorials/apache_logs/index.js
index 06ac32ef836b2..eba15f4959871 100644
--- a/src/core_plugins/kibana/server/tutorials/apache_logs/index.js
+++ b/src/core_plugins/kibana/server/tutorials/apache_logs/index.js
@@ -11,7 +11,7 @@ export function apacheLogsSpecProvider() {
     shortDescription: 'Collect and parse access and error logs created by the Apache HTTP server.',
     longDescription: 'The apache2 Filebeat module parses access and error logs created by the Apache 2 HTTP server.' +
                      ' [Learn more]({config.docs.beats.filebeat}/filebeat-module-apache2.html).',
-    //iconPath: '', TODO
+    euiIconType: 'logoApache',
     artifacts: {
       dashboards: [
         {
diff --git a/src/core_plugins/kibana/server/tutorials/apache_metrics/index.js b/src/core_plugins/kibana/server/tutorials/apache_metrics/index.js
index d05797cfc96a3..97e4d46d86f79 100644
--- a/src/core_plugins/kibana/server/tutorials/apache_metrics/index.js
+++ b/src/core_plugins/kibana/server/tutorials/apache_metrics/index.js
@@ -11,7 +11,7 @@ export function apacheMetricsSpecProvider() {
     shortDescription: 'Fetch internal metrics from the Apache 2 HTTP server.',
     longDescription: 'The `apache` Metricbeat module fetches internal metrics from the Apache 2 HTTP server.' +
                      ' [Learn more]({config.docs.beats.metricbeat}/metricbeat-module-apache.html).',
-    //iconPath: '', TODO
+    euiIconType: 'logoApache',
     artifacts: {
       dashboards: [
         {
diff --git a/src/core_plugins/kibana/server/tutorials/apm/index.js b/src/core_plugins/kibana/server/tutorials/apm/index.js
index 3198854558888..c877cf1da5009 100644
--- a/src/core_plugins/kibana/server/tutorials/apm/index.js
+++ b/src/core_plugins/kibana/server/tutorials/apm/index.js
@@ -13,6 +13,7 @@ export function apmSpecProvider() {
       ' performance metrics and errors from inside your application.' +
       ' It allows you to monitor the performance of thousands of applications in real time.' +
       ' [Learn more]({config.docs.base_url}guide/en/apm/get-started/{config.docs.version}/index.html).',
+    euiIconType: 'apmApp',
     artifacts: {
       dashboards: [
         {
diff --git a/src/core_plugins/kibana/server/tutorials/docker_metrics/index.js b/src/core_plugins/kibana/server/tutorials/docker_metrics/index.js
index 899bf9090786e..539334f2ac6d7 100644
--- a/src/core_plugins/kibana/server/tutorials/docker_metrics/index.js
+++ b/src/core_plugins/kibana/server/tutorials/docker_metrics/index.js
@@ -11,7 +11,7 @@ export function dockerMetricsSpecProvider() {
     shortDescription: 'Fetch metrics about your Docker containers.',
     longDescription: 'The `docker` Metricbeat module fetches metrics from the Docker server.' +
                      ' [Learn more]({config.docs.beats.metricbeat}/metricbeat-module-docker.html).',
-    //iconPath: '', TODO
+    euiIconType: 'logoDocker',
     artifacts: {
       dashboards: [
         {
diff --git a/src/core_plugins/kibana/server/tutorials/kubernetes_metrics/index.js b/src/core_plugins/kibana/server/tutorials/kubernetes_metrics/index.js
index 66d5631f758e2..fe1325e4ee012 100644
--- a/src/core_plugins/kibana/server/tutorials/kubernetes_metrics/index.js
+++ b/src/core_plugins/kibana/server/tutorials/kubernetes_metrics/index.js
@@ -11,7 +11,7 @@ export function kubernetesMetricsSpecProvider() {
     shortDescription: 'Fetch metrics from your Kubernetes installation.',
     longDescription: 'The `kubernetes` Metricbeat module fetches metrics from the Kubernetes APIs.' +
                      ' [Learn more]({config.docs.beats.metricbeat}/metricbeat-module-kubernetes.html).',
-    //iconPath: '', TODO
+    euiIconType: 'logoKubernetes',
     artifacts: {
       dashboards: [
         {
diff --git a/src/core_plugins/kibana/server/tutorials/mysql_logs/index.js b/src/core_plugins/kibana/server/tutorials/mysql_logs/index.js
index 7c2d749f3fa04..3c5f4328da53c 100644
--- a/src/core_plugins/kibana/server/tutorials/mysql_logs/index.js
+++ b/src/core_plugins/kibana/server/tutorials/mysql_logs/index.js
@@ -11,7 +11,7 @@ export function mysqlLogsSpecProvider() {
     shortDescription: 'Collect and parse error and slow logs created by MySQL.',
     longDescription: 'The `mysql` Filebeat module parses error and slow logs created by MySQL.' +
                      ' [Learn more]({config.docs.beats.filebeat}/filebeat-module-mysql.html).',
-    //iconPath: '', TODO
+    euiIconType: 'logoMySQL',
     artifacts: {
       dashboards: [
         {
diff --git a/src/core_plugins/kibana/server/tutorials/mysql_metrics/index.js b/src/core_plugins/kibana/server/tutorials/mysql_metrics/index.js
index 95c0cc95efbc6..a21f1014d1617 100644
--- a/src/core_plugins/kibana/server/tutorials/mysql_metrics/index.js
+++ b/src/core_plugins/kibana/server/tutorials/mysql_metrics/index.js
@@ -11,7 +11,7 @@ export function mysqlMetricsSpecProvider() {
     shortDescription: 'Fetch internal metrics from MySQL.',
     longDescription: 'The `mysql` Metricbeat module fetches internal metrics from the MySQL server.' +
                      ' [Learn more]({config.docs.beats.metricbeat}/metricbeat-module-mysql.html).',
-    //iconPath: '', TODO
+    euiIconType: 'logoMySQL',
     artifacts: {
       dashboards: [
         {
diff --git a/src/core_plugins/kibana/server/tutorials/netflow/index.js b/src/core_plugins/kibana/server/tutorials/netflow/index.js
index 2668865cdaf16..a346a986f7423 100644
--- a/src/core_plugins/kibana/server/tutorials/netflow/index.js
+++ b/src/core_plugins/kibana/server/tutorials/netflow/index.js
@@ -13,7 +13,6 @@ export function netflowSpecProvider() {
       ' indexes the events into Elasticsearch, and installs a suite of Kibana dashboards.' +
       ' This module support Netflow Version 5 and 9.' +
       ' [Learn more]({config.docs.logstash}/netflow-module.html).',
-    //iconPath: '', TODO
     completionTimeMinutes: 10,
     //previewImagePath: 'kibana-apache.png', TODO
     onPrem: ON_PREM_INSTRUCTIONS,
diff --git a/src/core_plugins/kibana/server/tutorials/nginx_logs/index.js b/src/core_plugins/kibana/server/tutorials/nginx_logs/index.js
index 8a76417f8f9a6..bf99369a9f908 100644
--- a/src/core_plugins/kibana/server/tutorials/nginx_logs/index.js
+++ b/src/core_plugins/kibana/server/tutorials/nginx_logs/index.js
@@ -11,7 +11,7 @@ export function nginxLogsSpecProvider() {
     shortDescription: 'Collect and parse access and error logs created by the Nginx HTTP server.',
     longDescription: 'The `nginx` Filebeat module parses access and error logs created by the Nginx HTTP server.' +
                      ' [Learn more]({config.docs.beats.filebeat}/filebeat-module-nginx.html).',
-    //iconPath: '', TODO
+    euiIconType: 'logoNginx',
     artifacts: {
       dashboards: [
         {
diff --git a/src/core_plugins/kibana/server/tutorials/nginx_metrics/index.js b/src/core_plugins/kibana/server/tutorials/nginx_metrics/index.js
index 2708ab3e15504..9eeb1e64cead2 100644
--- a/src/core_plugins/kibana/server/tutorials/nginx_metrics/index.js
+++ b/src/core_plugins/kibana/server/tutorials/nginx_metrics/index.js
@@ -14,7 +14,7 @@ export function nginxMetricsSpecProvider() {
                      ' [ngx_http_stub_status_module](http://nginx.org/en/docs/http/ngx_http_stub_status_module.html),' +
                      '  which must be enabled in your Nginx installation.' +
                      ' [Learn more]({config.docs.beats.metricbeat}/metricbeat-module-nginx.html).',
-    //iconPath: '', TODO
+    euiIconType: 'logoNginx',
     artifacts: {
       dashboards: [
         {
diff --git a/src/core_plugins/kibana/server/tutorials/redis_logs/index.js b/src/core_plugins/kibana/server/tutorials/redis_logs/index.js
index a965215db3b9c..39e7d00b41eda 100644
--- a/src/core_plugins/kibana/server/tutorials/redis_logs/index.js
+++ b/src/core_plugins/kibana/server/tutorials/redis_logs/index.js
@@ -17,7 +17,7 @@ export function redisLogsSpecProvider() {
                      ' option is set.' +
                      ' Note that the `slowlog` fileset is experimental.' +
                      ' [Learn more]({config.docs.beats.filebeat}/filebeat-module-redis.html).',
-    //iconPath: '', TODO
+    euiIconType: 'logoRedis',
     artifacts: {
       dashboards: [
         {
diff --git a/src/core_plugins/kibana/server/tutorials/redis_metrics/index.js b/src/core_plugins/kibana/server/tutorials/redis_metrics/index.js
index 9580579631780..9282620c44743 100644
--- a/src/core_plugins/kibana/server/tutorials/redis_metrics/index.js
+++ b/src/core_plugins/kibana/server/tutorials/redis_metrics/index.js
@@ -11,7 +11,7 @@ export function redisMetricsSpecProvider() {
     shortDescription: 'Fetch internal metrics from Redis.',
     longDescription: 'The `redis` Metricbeat module fetches internal metrics from the Redis server.' +
                      ' [Learn more]({config.docs.beats.metricbeat}/metricbeat-module-redis.html).',
-    //iconPath: '', TODO
+    euiIconType: 'logoRedis',
     artifacts: {
       dashboards: [
         {
diff --git a/src/core_plugins/kibana/server/tutorials/system_logs/index.js b/src/core_plugins/kibana/server/tutorials/system_logs/index.js
index a68153d315932..09e86ee6a73e2 100644
--- a/src/core_plugins/kibana/server/tutorials/system_logs/index.js
+++ b/src/core_plugins/kibana/server/tutorials/system_logs/index.js
@@ -12,7 +12,6 @@ export function systemLogsSpecProvider() {
     longDescription: 'The `system` Filebeat module collects and parses logs created by the system logging service of common ' +
                      ' Unix/Linux based distributions. This module is not available on Windows.' +
                      ' [Learn more]({config.docs.beats.filebeat}/filebeat-module-system.html).',
-    //iconPath: '', TODO
     artifacts: {
       dashboards: [
         {
diff --git a/src/core_plugins/kibana/server/tutorials/system_metrics/index.js b/src/core_plugins/kibana/server/tutorials/system_metrics/index.js
index 1e40599a990ce..2cff15dcd8ae0 100644
--- a/src/core_plugins/kibana/server/tutorials/system_metrics/index.js
+++ b/src/core_plugins/kibana/server/tutorials/system_metrics/index.js
@@ -12,7 +12,6 @@ export function systemMetricsSpecProvider() {
     longDescription: 'The `system` Metricbeat module collects CPU, memory, network, and disk statistics from the host.' +
                      ' It collects system wide statistics and statistics per process and filesystem.' +
                      ' [Learn more]({config.docs.beats.metricbeat}/metricbeat-module-system.html).',
-    //iconPath: '', TODO
     artifacts: {
       dashboards: [
         {