[add data] advanced processor dropdown

package.json

@@ -81,6 +81,8 @@
     "angular-bootstrap-colorpicker": "3.0.19",
     "angular-elastic": "2.5.0",
     "angular-route": "1.4.7",
+    "angular-sanitize": "1.5.5",
+    "angular-ui-select": "0.12.100",
     "ansicolors": "0.3.2",
     "autoprefixer": "5.1.1",
     "autoprefixer-loader": "2.0.0",

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

@@ -9,6 +9,7 @@ import './pipeline_output';
 import './source_data';
 import './processor_ui_container';
 import '../processors';
+import 'angular-ui-select';
 import pipelineSetupTemplate from '../views/pipeline_setup.html';
 
 const app = uiModules.get('kibana');
@@ -20,6 +21,7 @@ function buildProcessorTypeList(enabledProcessorTypeIds) {
       return {
         typeId: instance.typeId,
         title: instance.title,
+        helpText: instance.helpText,
         Type
       };
     })
@@ -79,11 +81,12 @@ app.directive('pipelineSetup', function () {
         pipeline.updateParents();
       });
 
-      $scope.$watch('processorType', (newVal) => {
+      $scope.processorType = { value: '' };
+      $scope.$watch('processorType.value', (newVal) => {
         if (!newVal) return;
 
         pipeline.add(newVal.Type);
-        $scope.processorType = '';
+        $scope.processorType.value = '';
       });
 
       $scope.$watch('pipeline.dirty', simulatePipeline);

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 = '';
   }
 

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

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

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_pipeline_setup.less

@@ -58,12 +58,67 @@ pipeline-setup {
       display: flex;
       justify-content: flex-start;
       align-items: center;
+    }
+  }
+
+
+  .ui-select-bootstrap > .ui-select-choices {
+    max-height: 350px;
+  }
+
+  .ui-select-container.open {
+    .form-control {
+      background-color: @settings-filebeat-wizard-processor-select-active-bg;
+    }
+  }
+
+  .ui-select-container {
+    display: inline-block;
+    width: 450px;
+
+    .form-control {
+      background-color: @settings-filebeat-wizard-processor-select-bg;
+      border: none;
+    }
+
+    .form-control:active {
+      background-color: @settings-filebeat-wizard-processor-select-active-bg;
+    }
+
+    .ui-select-choices-row {
+      &>a {
+        padding: 6px 12px;
+        white-space: normal;
+      }
+
+      border-bottom: solid 1px;
+      border-bottom-color: @settings-filebeat-wizard-processor-select-choices-border;
+
+      label {
+        margin-bottom: 0;
+      }
+
+      .processor-help-text {
+        color: @settings-filebeat-wizard-processor-select-choices-helptext-color;
+        font-size: 0.9em;
+      }
+
+      &.active {
+        .processor-help-text {
+          color: @settings-filebeat-wizard-processor-select-choices-helptext-active-color;
+        }
+      }
+    }
+
+    .ui-select-placeholder {
+      color:  @settings-filebeat-wizard-processor-select-placeholder-color;
+    }
+
+    .ui-select-search {
+      color: @settings-filebeat-wizard-processor-select-active-color;
 
-      select.form-control {
-        background-color: @settings-filebeat-wizard-processor-select-bg;
-        border: none;
-        width: auto;
-        margin-right: 5px;
+      &::placeholder {
+        color: @settings-filebeat-wizard-processor-select-placeholder-active-color;
       }
     }
   }

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/pipeline_setup.html

@@ -33,13 +33,18 @@ <h2>
           </label>
         </div>
         <div class="add-processor-dropdown">
-          <select
-            class="form-control"
-            ng-options="processorType.title for processorType in processorTypes"
-            ng-model="processorType"
-            ng-disabled="pipeline.hasCompileError">
-            <option value="">Select a Processor...</option>
-          </select>
+          <ui-select ng-model="processorType.value">
+            <ui-select-match placeholder="Select a Processor...">
+              <span ng-bind="$select.selected.title"></span>
+            </ui-select-match>
+            <ui-select-choices
+              repeat="processorType in (processorTypes | filter: $select.search) track by processorType.typeId">
+              <label ng-bind="processorType.title"></label>
+              <div class="processor-help-text">
+                <span ng-bind="processorType.helpText"></span>
+              </div>
+            </ui-select-choices>
+          </ui-select>
         </div>
       </div>
     </div>

src/plugins/kibana/public/settings/sections/indices/index.html

@@ -13,6 +13,13 @@ <h4>
       <div>
         Pick this option if you already have data in Elasticsearch.
       </div>
+
+      <h4>
+        <a href="#/settings/indices/create/filebeat">Tail a File</a>
+      </h4>
+      <div>
+        Pick this option if you have log file data you'd like to send to Elasticsearch.
+      </div>
     </div>
   </kbn-settings-indices>
 </kbn-settings-app>

src/ui/public/styles/variables/for-theme.less

@@ -135,6 +135,14 @@
 // Settings - Add Data Wizard - Pipeline Setup =================================
 @settings-filebeat-wizard-panel-bg: @kibanaGray6;
 @settings-filebeat-wizard-processor-select-bg: @kibanaBlue5;
+@settings-filebeat-wizard-processor-select-active-bg: @kibanaBlue3;
+@settings-filebeat-wizard-processor-select-choices-border: @kibanaBlue5;
+@settings-filebeat-wizard-processor-select-choices-helptext-color: @kibanaGray3;
+@settings-filebeat-wizard-processor-select-choices-helptext-active-color: @white;
+@settings-filebeat-wizard-processor-select-placeholder-color: @kibanaGray1;
+
+@settings-filebeat-wizard-processor-select-placeholder-active-color: @white;
+@settings-filebeat-wizard-processor-select-active-color: @white;
 
 @settings-filebeat-wizard-processor-container-overlay-bg: fade(#000, 10%);
 

webpackShims/angular-ui-select.js

@@ -0,0 +1,7 @@
+require('jquery');
+require('angular');
+require('angular-sanitize');
+require('../node_modules/angular-ui-select/select');
+require('../node_modules/angular-ui-select/select.css');
+
+require('ui/modules').get('kibana', ['ui.select', 'ngSanitize']);