add constants for categry and instruction variant ids

src/core_plugins/kibana/public/home/components/instruction_set.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  KuiTabs,
+  KuiTab
+} from 'ui_framework/components';
+import { getDisplayText } from '../instruction_variant';
+
+export class InstructionSet extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.tabs = props.instructionSet.instructionVariants.map((variant) => {
+      return {
+        id: variant.id,
+        name: getDisplayText(variant.id)
+      };
+    });
+
+    if (this.tabs.length > 0) {
+      this.state = {
+        selectedTabId: this.tabs[0].id
+      };
+    }
+  }
+
+  onSelectedTabChanged = id => {
+    this.setState({
+      selectedTabId: id,
+    });
+  };
+
+  renderTabs = () => {
+    return this.tabs.map((tab, index) => (
+      <KuiTab
+        onClick={() => this.onSelectedTabChanged(tab.id)}
+        isSelected={tab.id === this.state.selectedTabId}
+        key={index}
+      >
+        {tab.name}
+      </KuiTab>
+    ));
+  }
+
+  render() {
+    let title;
+    if (this.props.instructionSet.title) {
+      title = (
+        <h2 className="kuiTitle">
+          {this.props.instructionSet.title}
+        </h2>
+      );
+    }
+
+    return (
+      <div>
+        {title}
+
+        <KuiTabs>
+          {this.renderTabs()}
+        </KuiTabs>
+
+      </div>
+    );
+  }
+}
+
+InstructionSet.propTypes = {
+  instructionSet: PropTypes.object.isRequired
+};

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

@@ -1,43 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  KuiTabs,
-  KuiTab
-} from 'ui_framework/components';
+import { InstructionSet } from './instruction_set';
 
 export class Tutorial extends React.Component {
 
   constructor(props) {
     super(props);
-
-    this.tabs = props.tutorial.instructionPlatforms.map((platform) => {
-      return {
-        id: platform.id
-      };
-    });
-
-    if (this.tabs.length > 0) {
-      this.state = {
-        selectedTabId: this.tabs[0].id
-      };
-    }
   }
 
-  onSelectedTabChanged = id => {
-    this.setState({
-      selectedTabId: id,
-    });
-  };
-
-  renderTabs = () => {
-    return this.tabs.map((tab,index) => (
-      <KuiTab
-        onClick={() => this.onSelectedTabChanged(tab.id)}
-        isSelected={tab.id === this.state.selectedTabId}
+  renderInstructionSets = () => {
+    return this.props.tutorial.instructionSets.map((instructionSet, index) => (
+      <InstructionSet
+        instructionSet={instructionSet}
         key={index}
-      >
-        {tab.id}
-      </KuiTab>
+      />
     ));
   }
 
@@ -54,9 +30,7 @@ export class Tutorial extends React.Component {
             {this.props.tutorial.longDescription}
           </p>
 
-          <KuiTabs>
-            {this.renderTabs()}
-          </KuiTabs>
+          {this.renderInstructionSets()}
         </div>
       </div>
     );

src/core_plugins/kibana/public/home/instruction_variant.js

@@ -0,0 +1,33 @@
+export const INSTRUCTION_VARIANT = {
+  OSX: 'osx',
+  DEB: 'deb',
+  RPM: 'rpm',
+  DOCKER: 'docker',
+  WINDOWS: 'windows',
+  NODE: 'node',
+  DJANGO: 'django',
+  FLASK: 'flask'
+};
+
+const DISPLAY_MAP = {};
+DISPLAY_MAP[INSTRUCTION_VARIANT.OSX] = 'OSX';
+DISPLAY_MAP[INSTRUCTION_VARIANT.DEB] = 'DEB';
+DISPLAY_MAP[INSTRUCTION_VARIANT.RPM] = 'RPM';
+DISPLAY_MAP[INSTRUCTION_VARIANT.DOCKER] = 'Docker';
+DISPLAY_MAP[INSTRUCTION_VARIANT.WINDOWS] = 'Windows';
+DISPLAY_MAP[INSTRUCTION_VARIANT.NODE] = 'Node.js';
+DISPLAY_MAP[INSTRUCTION_VARIANT.DJANGO] = 'Django';
+DISPLAY_MAP[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/public/home/tutorial_category.js

@@ -0,0 +1,5 @@
+export const TUTORIAL_CATEGORY = {
+  LOGGING: 'logging',
+  SECURITY: 'security',
+  METRICS: 'metrics'
+};

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

@@ -0,0 +1,47 @@
+import { registerTutorial } from '../../register_tutorial';
+import { TUTORIAL_CATEGORY } from '../../tutorial_category';
+import { INSTRUCTION_VARIANT } from '../../instruction_variant';
+
+registerTutorial(() => {
+  return {
+    id: 'apache',
+    name: 'Apache',
+    category: TUTORIAL_CATEGORY.LOGGING,
+    shortDescription: 'Some descriptive text about this application that will make you want to click on it',
+    longDescription: `This module periodically fetches metrics from Apache HTTPD servers.
+The Apache status metricset collects data from the Apache mod_status module.
+It scrapes the server status data from the web page generated by mod_status.`,
+    instructionSets: [
+      {
+        title: 'Getting Started',
+        instructionVariants: [
+          {
+            id: INSTRUCTION_VARIANT.OSX,
+            instructions: [
+            ]
+          },
+          {
+            id: INSTRUCTION_VARIANT.DEB,
+            instructions: [
+            ]
+          },
+          {
+            id: INSTRUCTION_VARIANT.RPM,
+            instructions: [
+            ]
+          },
+          {
+            id: INSTRUCTION_VARIANT.DOCKER,
+            instructions: [
+            ]
+          },
+          {
+            id: INSTRUCTION_VARIANT.WINDOWS,
+            instructions: [
+            ]
+          }
+        ]
+      }
+    ]
+  };
+});

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

@@ -1 +1 @@
-import './apache';
+import './apache/index';