Merge pull request #7340 from BigFunger/ingest-pipeline-feature-angul…

…ar-forms

[add data] Suppress processor error messages until user dirties the form

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

@@ -11,12 +11,11 @@ app.directive('outputPreview', function () {
     restrict: 'E',
     template: outputPreviewTemplate,
     scope: {
-      oldObject: '=',
-      newObject: '=',
-      error: '='
+      processor: '='
     },
     link: function ($scope, $el) {
       const div = $el.find('.visual')[0];
+      const processor = $scope.processor;
 
       $scope.diffpatch = jsondiffpatch.create({
         arrays: {
@@ -28,12 +27,10 @@ app.directive('outputPreview', function () {
       });
 
       $scope.updateUi = function () {
-        let left = $scope.oldObject;
-        let right = $scope.newObject;
-        let delta = $scope.diffpatch.diff(left, right);
-        if (!delta || $scope.error) delta = {};
+        let delta = $scope.diffpatch.diff(processor.inputObject, processor.outputObject);
+        if (!delta || processor.error || processor.new) delta = {};
 
-        div.innerHTML = htmlFormat(delta, left);
+        div.innerHTML = htmlFormat(delta, processor.inputObject);
       };
     },
     controller: function ($scope, debounce) {
@@ -43,8 +40,8 @@ app.directive('outputPreview', function () {
         $scope.updateUi();
       }, 200);
 
-      $scope.$watch('oldObject', updateOutput);
-      $scope.$watch('newObject', updateOutput);
+      $scope.$watch('processor.outputObject', updateOutput);
+      $scope.$watch('processor.inputObject', updateOutput);
     }
   };
 });

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

@@ -1,4 +1,5 @@
 import uiModules from 'ui/modules';
+import angular from 'angular';
 import _ from 'lodash';
 import '../styles/_processor_ui_container.less';
 import './output_preview';
@@ -26,9 +27,16 @@ app.directive('processorUiContainer', function ($compile) {
       newScope.processor = processor;
 
       const template = `<processor-ui-${typeId}></processor-ui-${typeId}>`;
-      const $innerEl = $compile(template)(newScope);
+      const $innerEl = angular.element(template);
+      const postLink = $compile($innerEl);
+      $container.append($innerEl);
+      postLink(newScope);
 
-      $innerEl.appendTo($container);
+      $scope.$watch('processorForm.$pristine', (pristine) => {
+        if (!pristine) {
+          processor.new = false;
+        }
+      });
     }
   };
 });

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/lib/__tests__/pipeline.js

@@ -391,9 +391,12 @@ describe('processor pipeline', function () {
       pipeline.input = { bar: 'baz' };
       pipeline.add(processorTypes.Set);
 
+      pipeline.processors[0].new = false;
       pipeline.processors[0].outputObject = { field1: 'value1' };
       pipeline.processors[0].error = {}; //define an error
 
+      _.map(pipeline.processors, (processor) => { processor.new = false; });
+
       pipeline.updateOutput();
       expect(pipeline.output).to.be(pipeline.input);
     });
@@ -408,6 +411,8 @@ describe('processor pipeline', function () {
       pipeline.processors[1].outputObject = { field1: 'value2' };
       pipeline.processors[2].outputObject = { field1: 'value3' };
 
+      _.map(pipeline.processors, (processor) => { processor.new = false; });
+
       pipeline.updateOutput();
       expect(pipeline.output).to.eql({ field1: 'value3' });
 
@@ -429,6 +434,8 @@ describe('processor pipeline', function () {
       pipeline.processors[1].outputObject = { field1: 'value2' };
       pipeline.processors[2].outputObject = { field1: 'value3' };
 
+      _.map(pipeline.processors, (processor) => { processor.new = false; });
+
       pipeline.updateOutput();
       expect(pipeline.output).to.eql({ field1: 'value3' });
 
@@ -451,6 +458,8 @@ describe('processor pipeline', function () {
       const expected = { foo: 'bar' };
       pipeline.processors[0].outputObject = expected;
 
+      _.map(pipeline.processors, (processor) => { processor.new = false; });
+
       pipeline.updateOutput();
       expect(pipeline.output).to.be(expected);
     });
@@ -463,6 +472,25 @@ describe('processor pipeline', function () {
       expect(pipeline.output).to.be(pipeline.input);
     });
 
+    it('should ignore new processors', function () {
+      const pipeline = new Pipeline();
+      pipeline.input = { bar: 'baz' };
+      pipeline.add(processorTypes.Set);
+
+      pipeline.updateOutput();
+      expect(pipeline.output).to.be(pipeline.input);
+
+      const expected = { field1: 'value1' };
+      pipeline.processors[0].new = false;
+      pipeline.processors[0].outputObject = expected;
+
+      pipeline.add(processorTypes.Set);
+      pipeline.processors[1].outputObject = { field1: 'value2' };
+
+      pipeline.updateOutput();
+      expect(pipeline.output).to.be(expected);
+    });
+
     it('should set pipeline.dirty', function () {
       const pipeline = new Pipeline();
       pipeline.updateParents();

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

@@ -4,8 +4,10 @@ function updateProcessorOutputs(pipeline, simulateResults) {
   simulateResults.forEach((result) => {
     const processor = pipeline.getProcessorById(result.processorId);
 
-    processor.outputObject = _.get(result, 'output');
-    processor.error = _.get(result, 'error');
+    if (!processor.new) {
+      processor.outputObject = _.get(result, 'output');
+      processor.error = _.get(result, 'error');
+    }
   });
 }
 
@@ -155,7 +157,7 @@ export default class Pipeline {
   }
 
   updateOutput() {
-    const processors = this.processors;
+    const processors = _.reject(this.processors, { new: true });
 
     const errorIndex = _.findIndex(processors, 'error');
     const goodProcessor = errorIndex === -1 ? _.last(processors) : processors[errorIndex - 1];

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

@@ -13,6 +13,7 @@ export default class Processor {
     this.inputObject = undefined;
     this.outputObject = undefined;
     this.error = undefined;
+    this.new = true;
   }
 
   setParent(newParent) {

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

@@ -39,4 +39,9 @@ processor-ui-container {
   label {
     font-weight: normal;
   }
+
+  .alert {
+    margin-top: 10px;
+    margin-bottom: 0px;
+  }
 }

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

@@ -1,25 +1,26 @@
-<processor-ui-container-header
-  processor="processor"
-  field="sourceField"
-  pipeline="pipeline">
-</processor-ui-container-header>
-<div
-  class="processor-ui-container-body"
-  ng-class="{locked: processor.locked}">
+<form name="processorForm">
+  <processor-ui-container-header
+    processor="processor"
+    field="sourceField"
+    pipeline="pipeline">
+  </processor-ui-container-header>
   <div
-    class="processor-ui-container-body-content"
-    ng-hide="processor.collapsed">
+    class="processor-ui-container-body"
+    ng-class="{locked: processor.locked}">
     <div
-      ng-show="processor.error"
-      class="alert alert-danger">
-      {{processor.error.message}}
+      class="processor-ui-container-body-content"
+      ng-hide="processor.collapsed">
+      <div class="processor-ui-content"></div>
+      <div
+        ng-show="processor.error"
+        class="alert alert-danger">
+        {{processor.error.message}}
+      </div>
+      <output-preview
+        ng-hide="processor.error"
+        processor="processor">
+      </output-preview>
     </div>
-    <div class="processor-ui-content"></div>
-    <output-preview
-      new-object="processor.outputObject"
-      old-object="processor.inputObject"
-      error="processor.error">
-    </output-preview>
+    <div class="overlay"></div>
   </div>
-  <div class="overlay"></div>
-</div>
+</form>