From 62c10ea3550b7891fa2eb97d4834ebd713a8da1a Mon Sep 17 00:00:00 2001 From: Jim Unger Date: Tue, 24 May 2016 13:59:05 -0500 Subject: [PATCH 1/6] [add data pipeline] implements advanced dropdown using selectize --- package.json | 2 + .../styles/_add_data_pattern_review_step.less | 8 +-- .../directives/pipeline_setup.js | 7 +- .../processors/append/view_model.js | 10 ++- .../processors/base/view_model.js | 3 +- .../processors/convert/view_model.js | 9 ++- .../processors/date/view_model.js | 7 +- .../processors/geoip/view_model.js | 8 ++- .../processors/grok/view_model.js | 10 ++- .../processors/gsub/view_model.js | 7 +- .../processors/join/view_model.js | 8 ++- .../processors/lowercase/view_model.js | 7 +- .../processors/remove/view_model.js | 7 +- .../processors/rename/view_model.js | 7 +- .../processors/set/view_model.js | 8 ++- .../processors/split/view_model.js | 7 +- .../processors/trim/view_model.js | 7 +- .../processors/uppercase/view_model.js | 7 +- .../styles/_output_preview.less | 2 +- .../styles/_pipeline_setup.less | 69 +++++++++++++++++-- .../styles/_processor_ui_container.less | 2 +- .../_processor_ui_container_header.less | 2 +- .../pipeline_setup/views/pipeline_setup.html | 19 +++-- .../indices/styles/_add_data_wizard.less | 2 +- src/ui/public/styles/variables/for-theme.less | 19 ++++- webpackShims/angular-ui-select.js | 7 ++ 26 files changed, 210 insertions(+), 41 deletions(-) create mode 100644 webpackShims/angular-ui-select.js diff --git a/package.json b/package.json index 9249600018f1c0..aac1100678f6b1 100644 --- a/package.json +++ b/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", 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..d09c3679dcef81 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 @@ -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); 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..40b2db04557836 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; } } @@ -58,12 +58,69 @@ 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-add-data-wizard-processor-select-active-bg; + } + } + + .ui-select-container { + display: inline-block; + width: 450px; + + .dropdown-menu { + position: static; + } + + .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; - select.form-control { - background-color: @settings-filebeat-wizard-processor-select-bg; - border: none; - width: auto; - margin-right: 5px; + &::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/views/pipeline_setup.html b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/pipeline_setup.html index aafc8cb3c0d908..768c55e4718142 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 @@ -33,13 +33,18 @@

- + + + + + + +
+ +
+ +
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/angular-ui-select.js b/webpackShims/angular-ui-select.js new file mode 100644 index 00000000000000..85c17c9625afb9 --- /dev/null +++ b/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']); From efad62ce29965b2419e96cdc8df358b2d6119d46 Mon Sep 17 00:00:00 2001 From: Jim Unger Date: Tue, 24 May 2016 14:39:44 -0500 Subject: [PATCH 2/6] [add data pipeline] moves processor select into a separate directive --- .../directives/pipeline_setup.js | 40 ++--------- .../directives/processor_select.js | 55 +++++++++++++++ .../styles/_pipeline_setup.less | 70 ------------------- .../styles/_processor_select.less | 69 ++++++++++++++++++ .../pipeline_setup/styles/pipeline_select.js | 0 .../pipeline_setup/views/pipeline_setup.html | 14 +--- .../views/processor_select.html | 12 ++++ 7 files changed, 144 insertions(+), 116 deletions(-) create mode 100644 src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/processor_select.js create mode 100644 src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_processor_select.less create mode 100644 src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/pipeline_select.js create mode 100644 src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/processor_select.html 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 d09c3679dcef81..ac95acac79f090 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,39 +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 'angular-ui-select'; -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, - helpText: instance.helpText, - 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: '=' @@ -44,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 @@ -81,12 +56,9 @@ app.directive('pipelineSetup', function () { pipeline.updateParents(); }); - $scope.processorType = { value: '' }; - $scope.$watch('processorType.value', (newVal) => { - if (!newVal) return; - - pipeline.add(newVal.Type); - $scope.processorType.value = ''; + $scope.$watch('processorType', processorType => { + if (!processorType) return; + pipeline.add(processorType); }); $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..66b0d933ee2f00 --- /dev/null +++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/processor_select.js @@ -0,0 +1,55 @@ +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 'angular-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.selectedItem = { value: '' }; + $scope.$watch('selectedItem.value', (newVal) => { + if (!newVal) return; + + $scope.processorType = newVal.Type; + $scope.selectedItem.value = ''; + }); + } + }; +}); 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 40b2db04557836..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 @@ -53,76 +53,6 @@ pipeline-setup { .add-processor { padding:10px; margin-bottom: 10px; - - &-dropdown { - 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; - } - } - - .ui-select-container { - display: inline-block; - width: 450px; - - .dropdown-menu { - position: static; - } - - .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; - } - } } 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..a7c4a019bb9fe2 --- /dev/null +++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_processor_select.less @@ -0,0 +1,69 @@ +@import (reference) "~ui/styles/variables"; +@import (reference) "~ui/styles/mixins"; +@import (reference) "~ui/styles/theme"; + +processor-select { + .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; + } + } + + .ui-select-container { + display: inline-block; + width: 450px; + + .dropdown-menu { + position: static; + } + + .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/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 768c55e4718142..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,19 +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 @@ + + + + + + +
+ +
+ + From 5b4c9e984a9a13124c0ec4fe579ae494e618720a Mon Sep 17 00:00:00 2001 From: Jim Unger Date: Tue, 24 May 2016 15:13:23 -0500 Subject: [PATCH 3/6] [add data pipeline] trying to fix safari bug --- .../pipeline_setup/directives/pipeline_setup.js | 1 + .../pipeline_setup/directives/processor_select.js | 8 ++++++-- .../pipeline_setup/styles/_processor_select.less | 6 +++++- 3 files changed, 12 insertions(+), 3 deletions(-) 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 ac95acac79f090..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 @@ -59,6 +59,7 @@ app.directive('pipelineSetup', function () { $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 index 66b0d933ee2f00..1a3f6086c12822 100644 --- 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 @@ -43,12 +43,16 @@ app.directive('processorSelect', function () { }) .catch(notify.error); - $scope.selectedItem = { value: '' }; $scope.$watch('selectedItem.value', (newVal) => { if (!newVal) return; $scope.processorType = newVal.Type; - $scope.selectedItem.value = ''; + }); + + $scope.$watch('processorType', processorType => { + if (!processorType) { + $scope.selectedItem = { value: '' }; + } }); } }; 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 index a7c4a019bb9fe2..b4025ce9ce2d31 100644 --- 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 @@ -3,6 +3,10 @@ @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; } @@ -18,7 +22,7 @@ processor-select { width: 450px; .dropdown-menu { - position: static; + //position: relative; } .form-control { From 9a7acd7deafcc08d1872efbc5907e99ff3829949 Mon Sep 17 00:00:00 2001 From: Jim Unger Date: Tue, 24 May 2016 16:43:28 -0500 Subject: [PATCH 4/6] [add data pipeline] applies a smaller box-shadow to fix safari bug --- .../add_data_steps/pipeline_setup/styles/_processor_select.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index b4025ce9ce2d31..c9bdcd320a8b9a 100644 --- 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 @@ -22,7 +22,7 @@ processor-select { width: 450px; .dropdown-menu { - //position: relative; + .box-shadow(0 2px 4px rgba(0,0,0,0.175)); } .form-control { From 6d2fe7b4b3f7a0e14abde2fc6aa64251addef677 Mon Sep 17 00:00:00 2001 From: Jim Unger Date: Tue, 31 May 2016 13:11:34 -0500 Subject: [PATCH 5/6] Updated dependency to use ui-select instead of angular-ui-select --- package.json | 2 +- .../pipeline_setup/directives/processor_select.js | 2 +- webpackShims/{angular-ui-select.js => ui-select.js} | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) rename webpackShims/{angular-ui-select.js => ui-select.js} (56%) diff --git a/package.json b/package.json index aac1100678f6b1..a480b09ad408ff 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,6 @@ "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", @@ -143,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/pipeline_setup/directives/processor_select.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/processor_select.js index 1a3f6086c12822..cb0d4686980f3e 100644 --- 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 @@ -4,7 +4,7 @@ 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 'angular-ui-select'; +import 'ui-select'; const app = uiModules.get('kibana'); diff --git a/webpackShims/angular-ui-select.js b/webpackShims/ui-select.js similarity index 56% rename from webpackShims/angular-ui-select.js rename to webpackShims/ui-select.js index 85c17c9625afb9..94b06ec53ec7fe 100644 --- a/webpackShims/angular-ui-select.js +++ b/webpackShims/ui-select.js @@ -1,7 +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('node_modules/ui-select/dist/select'); +require('node_modules/ui-select/dist/select.css'); require('ui/modules').get('kibana', ['ui.select', 'ngSanitize']); From c9e11e419ca2fdb5bc4473ada4816de599ee9cb5 Mon Sep 17 00:00:00 2001 From: Jim Unger Date: Tue, 31 May 2016 14:27:30 -0500 Subject: [PATCH 6/6] [add data] added bugfix hack to address ui-select screen resize bug --- .../pipeline_setup/styles/_processor_select.less | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) 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 index c9bdcd320a8b9a..cddae4ad453ce9 100644 --- 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 @@ -3,9 +3,9 @@ @import (reference) "~ui/styles/theme"; processor-select { - // display: flex; - // justify-content: flex-start; - // align-items: center; + display: flex; + justify-content: flex-start; + align-items: center; .ui-select-bootstrap > .ui-select-choices { max-height: 350px; @@ -17,6 +17,11 @@ processor-select { } } + // 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;