Ingest pipeline feature processor dropdown

package.json

@@ -81,6 +81,7 @@
     "angular-bootstrap-colorpicker": "3.0.19",
     "angular-elastic": "2.5.0",
     "angular-route": "1.4.7",
+    "angular-sanitize": "1.5.5",
     "ansicolors": "0.3.2",
     "autoprefixer": "5.1.1",
     "autoprefixer-loader": "2.0.0",
@@ -141,6 +142,7 @@
     "semver": "5.1.0",
     "style-loader": "0.12.3",
     "tar": "2.2.0",
+    "ui-select": "0.17.1",
     "url-loader": "0.5.6",
     "validate-npm-package-name": "2.2.2",
     "webpack": "1.12.1",

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pattern_review_step/styles/_add_data_pattern_review_step.less

@@ -27,7 +27,7 @@ pattern-review-step {
 
   paginated-table.pattern-review-field-table {
     table {
-      border-bottom: 3px solid @settings-filebeat-wizard-panel-bg;
+      border-bottom: 3px solid @settings-add-data-wizard-panel-bg;
 
       tr {
         .form-group;
@@ -37,12 +37,12 @@ pattern-review-step {
         border-bottom: 0;
         padding-top: 10px;
         padding-bottom: 10px;
-        background-color: @settings-filebeat-wizard-panel-bg;
+        background-color: @settings-add-data-wizard-panel-bg;
         font-weight: normal;
       }
 
       td {
-        border-top: 3px solid @settings-filebeat-wizard-panel-bg;
+        border-top: 3px solid @settings-add-data-wizard-panel-bg;
         vertical-align: middle;
         padding-right: 14px;
       }
@@ -59,7 +59,7 @@ pattern-review-step {
       position: relative;
 
       ul > li > a {
-        background-color: @settings-filebeat-wizard-panel-bg;
+        background-color: @settings-add-data-wizard-panel-bg;
       }
 
       form.pagination-size {

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/pipeline_setup.js

@@ -2,37 +2,21 @@ import uiModules from 'ui/modules';
 import _ from 'lodash';
 import Pipeline from '../lib/pipeline';
 import angular from 'angular';
-import * as ProcessorTypes from '../processors/view_models';
 import IngestProvider from 'ui/ingest';
 import '../styles/_pipeline_setup.less';
 import './pipeline_output';
 import './source_data';
 import './processor_ui_container';
+import './processor_select';
 import '../processors';
-import pipelineSetupTemplate from '../views/pipeline_setup.html';
+import template from '../views/pipeline_setup.html';
 
 const app = uiModules.get('kibana');
 
-function buildProcessorTypeList(enabledProcessorTypeIds) {
-  return _(ProcessorTypes)
-    .map(Type => {
-      const instance = new Type();
-      return {
-        typeId: instance.typeId,
-        title: instance.title,
-        Type
-      };
-    })
-    .compact()
-    .filter((processorType) => enabledProcessorTypeIds.includes(processorType.typeId))
-    .sortBy('title')
-    .value();
-}
-
 app.directive('pipelineSetup', function () {
   return {
     restrict: 'E',
-    template: pipelineSetupTemplate,
+    template: template,
     scope: {
       samples: '=',
       pipeline: '='
@@ -42,13 +26,6 @@ app.directive('pipelineSetup', function () {
       const notify = new Notifier({ location: `Ingest Pipeline Setup` });
       $scope.sample = {};
 
-      //determines which processors are available on the cluster
-      ingest.getProcessors()
-      .then((enabledProcessorTypeIds) => {
-        $scope.processorTypes = buildProcessorTypeList(enabledProcessorTypeIds);
-      })
-      .catch(notify.error);
-
       const pipeline = new Pipeline();
       // Loads pre-existing pipeline which will exist if the user returns from
       // a later step in the wizard
@@ -79,11 +56,10 @@ app.directive('pipelineSetup', function () {
         pipeline.updateParents();
       });
 
-      $scope.$watch('processorType', (newVal) => {
-        if (!newVal) return;
-
-        pipeline.add(newVal.Type);
-        $scope.processorType = '';
+      $scope.$watch('processorType', processorType => {
+        if (!processorType) return;
+        pipeline.add(processorType);
+        $scope.processorType = null;
       });
 
       $scope.$watch('pipeline.dirty', simulatePipeline);

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/processor_select.js

@@ -0,0 +1,59 @@
+import uiModules from 'ui/modules';
+import _ from 'lodash';
+import '../styles/_processor_select.less';
+import template from '../views/processor_select.html';
+import * as ProcessorTypes from '../processors/view_models';
+import IngestProvider from 'ui/ingest';
+import 'ui-select';
+
+const app = uiModules.get('kibana');
+
+function buildProcessorTypeList(enabledProcessorTypeIds) {
+  return _(ProcessorTypes)
+    .map(Type => {
+      const instance = new Type();
+      return {
+        typeId: instance.typeId,
+        title: instance.title,
+        helpText: instance.helpText,
+        Type
+      };
+    })
+    .compact()
+    .filter((processorType) => enabledProcessorTypeIds.includes(processorType.typeId))
+    .sortBy('title')
+    .value();
+}
+
+app.directive('processorSelect', function () {
+  return {
+    restrict: 'E',
+    template: template,
+    scope: {
+      processorType: '='
+    },
+    controller: function ($scope, Private, Notifier) {
+      const ingest = Private(IngestProvider);
+      const notify = new Notifier({ location: `Ingest Pipeline Setup` });
+
+      //determines which processors are available on the cluster
+      ingest.getProcessors()
+      .then((enabledProcessorTypeIds) => {
+        $scope.processorTypes = buildProcessorTypeList(enabledProcessorTypeIds);
+      })
+      .catch(notify.error);
+
+      $scope.$watch('selectedItem.value', (newVal) => {
+        if (!newVal) return;
+
+        $scope.processorType = newVal.Type;
+      });
+
+      $scope.$watch('processorType', processorType => {
+        if (!processorType) {
+          $scope.selectedItem = { value: '' };
+        }
+      });
+    }
+  };
+});

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/append/view_model.js

@@ -2,7 +2,15 @@ import Processor from '../base/view_model';
 
 export class Append extends Processor {
   constructor(processorId) {
-    super(processorId, 'append', 'Append');
+    super(
+      processorId,
+      'append',
+      'Append',
+      `Appends one or more values to an existing array if the field already exists
+and it is an array. Converts a scalar to an array and appends one or more
+values to it if the field exists and it is a scalar. Creates an array
+containing the provided values if the field doesn’t exist.`
+    );
     this.targetField = '';
     this.values = [];
   }

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/base/view_model.js

@@ -1,12 +1,13 @@
 export default class Processor {
-  constructor(processorId, typeId, title) {
+  constructor(processorId, typeId, title, helpText) {
     if (!typeId || !title) {
       throw new Error('Cannot instantiate the base Processor class.');
     }
 
     this.processorId = processorId;
     this.title = title;
     this.typeId = typeId;
+    this.helpText = helpText;
     this.collapsed = false;
     this.parent = undefined;
     this.inputObject = undefined;

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/convert/view_model.js

@@ -3,7 +3,14 @@ import Processor from '../base/view_model';
 
 export class Convert extends Processor {
   constructor(processorId) {
-    super(processorId, 'convert', 'Convert');
+    super(
+      processorId,
+      'convert',
+      'Convert',
+      `Converts an existing field’s value to a different type, such as converting
+a string to an integer. If the field value is an array, all members will be
+converted.`
+    );
     this.sourceField = '';
     this.targetField = '';
     this.type = 'auto';

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/date/view_model.js

@@ -2,7 +2,12 @@ import Processor from '../base/view_model';
 
 export class Date extends Processor {
   constructor(processorId) {
-    super(processorId, 'date', 'Date');
+    super(
+      processorId,
+      'date',
+      'Date',
+      `Parses dates from fields.`
+    );
     this.sourceField = '';
     this.targetField = '@timestamp';
     this.formats = [];

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/geoip/view_model.js

@@ -2,7 +2,13 @@ import Processor from '../base/view_model';
 
 export class GeoIp extends Processor {
   constructor(processorId) {
-    super(processorId, 'geoip', 'Geo IP');
+    super(
+      processorId,
+      'geoip',
+      'Geo IP',
+      `Adds information about the geographical location of IP addresses,
+based on data from the Maxmind database.`
+    );
     this.sourceField = '';
     this.targetField = '';
     this.databaseFile = '';

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/grok/view_model.js

@@ -4,7 +4,15 @@ import Processor from '../base/view_model';
 
 export class Grok extends Processor {
   constructor(processorId) {
-    super(processorId, 'grok', 'Grok');
+    super(
+      processorId,
+      'grok',
+      'Grok',
+      `Extracts structured fields out of a single text field within a document.
+You choose which field to extract matched fields from, as well as the
+grok pattern you expect will match. A grok pattern is like a regular
+expression that supports aliased expressions that can be reused.`
+    );
     this.sourceField = '';
     this.pattern = '';
   }

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/gsub/view_model.js

@@ -2,7 +2,12 @@ import Processor from '../base/view_model';
 
 export class Gsub extends Processor {
   constructor(processorId) {
-    super(processorId, 'gsub', 'Gsub');
+    super(
+      processorId,
+      'gsub',
+      'Gsub',
+      `Converts a string field by applying a regular expression and a replacement.`
+    );
     this.sourceField = '';
     this.pattern = '';
     this.replacement = '';

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/join/view_model.js

@@ -2,7 +2,13 @@ import Processor from '../base/view_model';
 
 export class Join extends Processor {
   constructor(processorId) {
-    super(processorId, 'join', 'Join');
+    super(
+      processorId,
+      'join',
+      'Join',
+      `Joins each element of an array into a single string using a
+separator character between each element. `
+    );
     this.sourceField = '';
     this.separator = '';
   }

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/lowercase/view_model.js

@@ -2,7 +2,12 @@ import Processor from '../base/view_model';
 
 export class Lowercase extends Processor {
   constructor(processorId) {
-    super(processorId, 'lowercase', 'Lowercase');
+    super(
+      processorId,
+      'lowercase',
+      'Lowercase',
+      `Converts a string to its lowercase equivalent.`
+    );
     this.sourceField = '';
   }
 

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/remove/view_model.js

@@ -2,7 +2,12 @@ import Processor from '../base/view_model';
 
 export class Remove extends Processor {
   constructor(processorId) {
-    super(processorId, 'remove', 'Remove');
+    super(
+      processorId,
+      'remove',
+      'Remove',
+      `Removes an existing field.`
+    );
     this.sourceField = '';
   }
 

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/rename/view_model.js

@@ -2,7 +2,12 @@ import Processor from '../base/view_model';
 
 export class Rename extends Processor {
   constructor(processorId) {
-    super(processorId, 'rename', 'Rename');
+    super(
+      processorId,
+      'rename',
+      'Rename',
+      `Renames an existing field.`
+    );
     this.sourceField = '';
     this.targetField = '';
   }

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/set/view_model.js

@@ -2,7 +2,13 @@ import Processor from '../base/view_model';
 
 export class Set extends Processor {
   constructor(processorId) {
-    super(processorId, 'set', 'Set');
+    super(
+      processorId,
+      'set',
+      'Set',
+      `Sets one field and associates it with the specified value. If the field
+already exists, its value will be replaced with the provided one.`
+    );
     this.targetField = '';
     this.value = '';
   }

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/split/view_model.js

@@ -2,7 +2,12 @@ import Processor from '../base/view_model';
 
 export class Split extends Processor {
   constructor(processorId) {
-    super(processorId, 'split', 'Split');
+    super(
+      processorId,
+      'split',
+      'Split',
+      `Splits a field into an array using a separator character.`
+    );
     this.sourceField = '';
     this.separator = '';
   }

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/trim/view_model.js

@@ -2,7 +2,12 @@ import Processor from '../base/view_model';
 
 export class Trim extends Processor {
   constructor(processorId) {
-    super(processorId, 'trim', 'Trim');
+    super(
+      processorId,
+      'trim',
+      'Trim',
+      `Trims whitespace from field.`
+    );
     this.sourceField = '';
   }