Add Data Paste Sample Logs Screen

src/plugins/kibana/public/settings/sections/indices/add_data_steps/paste_samples_step.html

@@ -1,3 +1,13 @@
-<h2>Paste samples step</h2>
+<div class="wizard-step-title">
+  <h3>Provide some sample logs</h3>
+  Paste in one or more lines from the file you intend to tail. We'll use these samples in the following steps to help
+  you build an ingest pipeline and configure a Kibana index pattern. Log lines can be raw strings or
+  formatted as JSON. If your logs are raw strings but you intend to use
+  <a target="_window" href="https://www.elastic.co/guide/en/beats/filebeat/current/exported-fields.html">Filebeat's metadata</a>,
+  you'll want to paste the JSON as it will come out of Filebeat.
+</div>
+
+<div class="paste-samples">
+  <textarea ng-model="pasteStep.rawSamples" placeholder="Paste your sample log lines here, separated by a newline"></textarea>
+</div>
 
-<button ng-click="samples = 'some sample logs'">Do Stuff</button>

src/plugins/kibana/public/settings/sections/indices/add_data_steps/paste_samples_step.js

@@ -1,12 +1,36 @@
-var modules = require('ui/modules');
-var template = require('plugins/kibana/settings/sections/indices/add_data_steps/paste_samples_step.html');
+const modules = require('ui/modules');
+const template = require('plugins/kibana/settings/sections/indices/add_data_steps/paste_samples_step.html');
+const _ = require('lodash');
 
 modules.get('apps/settings')
   .directive('pasteSamplesStep', function () {
     return {
       template: template,
       scope: {
-        samples: '='
+        samples: '=',
+        rawSamples: '='
+      },
+      bindToController: true,
+      controllerAs: 'pasteStep',
+      controller: function ($scope) {
+        if (_.isUndefined(this.rawSamples)) {
+          this.rawSamples = '';
+        }
+
+        $scope.$watch('pasteStep.rawSamples', (newValue) => {
+          const splitRawSamples = newValue.split('\n');
+
+          try {
+            this.samples = _.map(splitRawSamples, (sample) => {
+              return JSON.parse(sample);
+            });
+          }
+          catch (error) {
+            this.samples = _.map(splitRawSamples, (sample) => {
+              return {message: sample};
+            });
+          }
+        });
       }
     };
   });

src/plugins/kibana/public/settings/sections/indices/filebeat/directives/filebeat_wizard.html

@@ -31,7 +31,7 @@ <h1>Tail a File</h1>
 
   <div ng-switch="wizard.currentStep">
     <div ng-switch-when="0">
-      <paste-samples-step samples="wizard.stepResults.samples"></paste-samples-step>
+      <paste-samples-step samples="wizard.stepResults.samples" raw-samples="wizard.stepResults.rawSamples"></paste-samples-step>
       <div class="nav-buttons">
         <button ng-disabled="!wizard.stepResults.samples" ng-click="wizard.nextStep()">Next</button>
       </div>

src/plugins/kibana/public/settings/styles/main.less

@@ -211,3 +211,14 @@ kbn-settings-indices {
     }
   }
 }
+
+.wizard-step-title {
+  padding-bottom: 1em;
+}
+
+.paste-samples {
+  textarea {
+    width: 100%;
+    height: 250px;
+  }
+}