diff --git a/package.json b/package.json index 9249600018f1c0..a480b09ad408ff 100644 --- a/package.json +++ b/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", diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pattern_review_step/styles/_add_data_pattern_review_step.less b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pattern_review_step/styles/_add_data_pattern_review_step.less index 3b9d7279404cc7..4bc3a51590f62e 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pattern_review_step/styles/_add_data_pattern_review_step.less +++ b/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 { diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/pipeline_setup.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/pipeline_setup.js index 667849fa7aa50c..8a902fd66ebe9c 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/pipeline_setup.js +++ b/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); diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/processor_select.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/processor_select.js new file mode 100644 index 00000000000000..cb0d4686980f3e --- /dev/null +++ b/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: '' }; + } + }); + } + }; +}); diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/append/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/append/view_model.js index a0a9711367a429..e5feeb2c946f3e 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/append/view_model.js +++ b/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 = []; } diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/base/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/base/view_model.js index ed04ef321aa5c1..ba4abd807a922b 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/base/view_model.js +++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/base/view_model.js @@ -1,5 +1,5 @@ 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.'); } @@ -7,6 +7,7 @@ export default class Processor { this.processorId = processorId; this.title = title; this.typeId = typeId; + this.helpText = helpText; this.collapsed = false; this.parent = undefined; this.inputObject = undefined; diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/convert/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/convert/view_model.js index ada158dc34454f..7077b0e737b064 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/convert/view_model.js +++ b/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'; diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/date/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/date/view_model.js index 0186675e3e2295..0ab03c34e54a72 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/date/view_model.js +++ b/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 = []; diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/geoip/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/geoip/view_model.js index 7041b92cb4a44d..74524e048d9dff 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/geoip/view_model.js +++ b/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 = ''; diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/grok/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/grok/view_model.js index 548b2d52f2a2ff..fb016fb9dbf344 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/grok/view_model.js +++ b/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 = ''; } diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/gsub/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/gsub/view_model.js index 32559f9d8ea59b..ee75c1d1225d10 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/gsub/view_model.js +++ b/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 = ''; diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/join/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/join/view_model.js index a480b749d8680d..b56c7a040adb37 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/join/view_model.js +++ b/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 = ''; } diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/lowercase/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/lowercase/view_model.js index 4cc12cd0437df8..4348855ffa2930 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/lowercase/view_model.js +++ b/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 = ''; } diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/remove/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/remove/view_model.js index fb33cfc5e4cef7..f865f51f90eb36 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/remove/view_model.js +++ b/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 = ''; } diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/rename/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/rename/view_model.js index 1899fcfc3c2a9b..2cea328f5d1ed2 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/rename/view_model.js +++ b/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 = ''; } diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/set/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/set/view_model.js index 4c7f31352c2d9a..312b691761eb2f 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/set/view_model.js +++ b/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 = ''; } diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/split/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/split/view_model.js index 30e7c8d81473c8..c73ae84fee3e59 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/split/view_model.js +++ b/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 = ''; } diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/trim/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/trim/view_model.js index c0a52f2a899fcf..6ef74f7231844a 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/trim/view_model.js +++ b/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 = ''; } diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/uppercase/view_model.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/uppercase/view_model.js index ce831ab40028cd..b34927469b1c8d 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/processors/uppercase/view_model.js +++ b/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 = ''; } diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_output_preview.less b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_output_preview.less index f58c658b9ae9ac..01449f197d0c96 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_output_preview.less +++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_output_preview.less @@ -5,7 +5,7 @@ output-preview { .visual { border: none; - background-color: @settings-filebeat-wizard-panel-bg; + background-color: @settings-add-data-wizard-panel-bg; border-radius: 0; overflow-x: auto; } diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_pipeline_setup.less b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_pipeline_setup.less index dc93652a124dfe..2dba3b512bb0d9 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_pipeline_setup.less +++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_pipeline_setup.less @@ -32,7 +32,7 @@ pipeline-setup { .pipeline { min-height: 450px; - background-color: @settings-filebeat-wizard-panel-bg; + background-color: @settings-add-data-wizard-panel-bg; } } @@ -53,19 +53,6 @@ pipeline-setup { .add-processor { padding:10px; margin-bottom: 10px; - - &-dropdown { - display: flex; - justify-content: flex-start; - align-items: center; - - select.form-control { - background-color: @settings-filebeat-wizard-processor-select-bg; - border: none; - width: auto; - margin-right: 5px; - } - } } textarea.form-control { diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_processor_select.less b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_processor_select.less new file mode 100644 index 00000000000000..cddae4ad453ce9 --- /dev/null +++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_processor_select.less @@ -0,0 +1,78 @@ +@import (reference) "~ui/styles/variables"; +@import (reference) "~ui/styles/mixins"; +@import (reference) "~ui/styles/theme"; + +processor-select { + 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-add-data-wizard-processor-select-active-bg; + } + } + + // Temporary bug fix - https://github.com/angular-ui/ui-select/issues/1575 + .ui-select-search { + width: 100% !important; + } + + .ui-select-container { + display: inline-block; + width: 450px; + + .dropdown-menu { + .box-shadow(0 2px 4px rgba(0,0,0,0.175)); + } + + .form-control { + background-color: @settings-add-data-wizard-processor-select-bg; + } + + .form-control:active { + background-color: @settings-add-data-wizard-processor-select-active-bg; + } + + .ui-select-choices-row { + &>a { + padding: 6px 12px; + white-space: normal; + } + + border-bottom: solid 1px; + border-bottom-color: @settings-add-data-wizard-processor-select-choices-border; + + label { + margin-bottom: 0; + } + + .processor-help-text { + color: @settings-add-data-wizard-processor-select-choices-helptext-color; + font-size: 0.9em; + } + + &.active { + .processor-help-text { + color: @settings-add-data-wizard-processor-select-choices-helptext-active-color; + } + } + } + + .ui-select-placeholder { + color: @settings-add-data-wizard-processor-select-placeholder-color; + } + + .ui-select-search { + color: @settings-add-data-wizard-processor-select-active-color; + + &::placeholder { + color: @settings-add-data-wizard-processor-select-placeholder-active-color; + } + } + } +} diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_processor_ui_container.less b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_processor_ui_container.less index 9d47774a55eb17..5e2016b51bf9e2 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_processor_ui_container.less +++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_processor_ui_container.less @@ -26,7 +26,7 @@ processor-ui-container { left: -5000px; width: 10000px; height: 10000px; - background-color: @settings-filebeat-wizard-processor-container-overlay-bg; + background-color: @settings-add-data-wizard-processor-container-overlay-bg; } &.locked { diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_processor_ui_container_header.less b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_processor_ui_container_header.less index 47dbc49de7d0c5..0c93be11324b1a 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_processor_ui_container_header.less +++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_processor_ui_container_header.less @@ -7,7 +7,7 @@ processor-ui-container-header { display: flex; align-items: center; flex: 1 0 auto; - background-color: @settings-filebeat-wizard-panel-bg; + background-color: @settings-add-data-wizard-panel-bg; border: none; padding: 10px; diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/pipeline_select.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/pipeline_select.js new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/pipeline_setup.html b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/pipeline_setup.html index aafc8cb3c0d908..9edaa8ecc0ae58 100644 --- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/pipeline_setup.html +++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/pipeline_setup.html @@ -32,14 +32,9 @@

Your pipeline is currently empty. Add a processor to get started! +
- +
diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/processor_select.html b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/processor_select.html new file mode 100644 index 00000000000000..357fe12a4e9ddc --- /dev/null +++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/processor_select.html @@ -0,0 +1,12 @@ + + + + + + +
+ +
+ + diff --git a/src/plugins/kibana/public/settings/sections/indices/styles/_add_data_wizard.less b/src/plugins/kibana/public/settings/sections/indices/styles/_add_data_wizard.less index e8354811ae026b..2ed9440fff22fb 100644 --- a/src/plugins/kibana/public/settings/sections/indices/styles/_add_data_wizard.less +++ b/src/plugins/kibana/public/settings/sections/indices/styles/_add_data_wizard.less @@ -121,7 +121,7 @@ pre { border: none; - background-color: @settings-filebeat-wizard-panel-bg; + background-color: @settings-add-data-wizard-panel-bg; border-radius: 0px; white-space: pre-wrap; margin: 0px; diff --git a/src/ui/public/styles/variables/for-theme.less b/src/ui/public/styles/variables/for-theme.less index 90a8e5f2ef5d79..be8d5330965670 100644 --- a/src/ui/public/styles/variables/for-theme.less +++ b/src/ui/public/styles/variables/for-theme.less @@ -121,6 +121,8 @@ @settings-indices-active-color: @btn-success-bg; // Settings - Add Data Wizard +@settings-add-data-wizard-panel-bg: @kibanaGray6; + @settings-add-data-wizard-step-heading-active-bg: @kibanaYellow2; @settings-add-data-wizard-step-heading-complete-bg: @kibanaBlue5; @settings-add-data-wizard-step-heading-incomplete-bg: @kibanaGray5; @@ -132,11 +134,22 @@ @settings-add-data-wizard-form-control-bg: @kibanaBlue6; @settings-add-data-wizard-form-control-border: @kibanaBlue3; + // Settings - Add Data Wizard - Pipeline Setup ================================= -@settings-filebeat-wizard-panel-bg: @kibanaGray6; -@settings-filebeat-wizard-processor-select-bg: @kibanaBlue5; +@settings-add-data-wizard-processor-select-bg: @kibanaBlue5; + +@settings-add-data-wizard-processor-select-active-bg: @kibanaBlue6; +@settings-add-data-wizard-processor-select-active-border: @kibanaBlue3; +@settings-add-data-wizard-processor-select-active-color: @kibanaGray1; +@settings-add-data-wizard-processor-select-placeholder-active-color: @kibanaGray3; + +@settings-add-data-wizard-processor-select-choices-border: @kibanaBlue5; +@settings-add-data-wizard-processor-select-choices-helptext-color: @kibanaGray3; +@settings-add-data-wizard-processor-select-choices-helptext-active-color: @white; +@settings-add-data-wizard-processor-select-placeholder-color: @kibanaGray1; + +@settings-add-data-wizard-processor-container-overlay-bg: fade(#000, 10%); -@settings-filebeat-wizard-processor-container-overlay-bg: fade(#000, 10%); // Visualize =================================================================== @visualize-show-spy-border: @gray-lighter; diff --git a/webpackShims/ui-select.js b/webpackShims/ui-select.js new file mode 100644 index 00000000000000..94b06ec53ec7fe --- /dev/null +++ b/webpackShims/ui-select.js @@ -0,0 +1,7 @@ +require('jquery'); +require('angular'); +require('angular-sanitize'); +require('node_modules/ui-select/dist/select'); +require('node_modules/ui-select/dist/select.css'); + +require('ui/modules').get('kibana', ['ui.select', 'ngSanitize']);