diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/pipeline_output.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/pipeline_output.js
index 374240f0c2c6a..71a27e67b963e 100644
--- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/pipeline_output.js
+++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/pipeline_output.js
@@ -9,7 +9,9 @@ app.directive('pipelineOutput', function () {
     restrict: 'E',
     template: pipelineOutputTemplate,
     scope: {
-      pipeline: '='
+      pipeline: '=',
+      samples: '=',
+      sample: '='
     },
     controller: function ($scope) {
       $scope.collapsed = true;
diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/source_data.js b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/source_data.js
index 8251d276a90d7..bbf5f604eb7a7 100644
--- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/source_data.js
+++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/directives/source_data.js
@@ -29,14 +29,14 @@ app.directive('sourceData', function () {
 
       $scope.previousLine = function () {
         let currentIndex = samples.indexOf($scope.selectedSample);
-        if (currentIndex <= 0) return;
+        if (currentIndex <= 0) currentIndex = samples.length;
 
         $scope.selectedSample = samples[currentIndex - 1];
       };
 
       $scope.nextLine = function () {
         let currentIndex = samples.indexOf($scope.selectedSample);
-        if (currentIndex >= samples.length - 1) return;
+        if (currentIndex >= samples.length - 1) currentIndex = -1;
 
         $scope.selectedSample = samples[currentIndex + 1];
       };
diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_pipeline_output.less b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_pipeline_output.less
index 3cb27352985aa..a58f55f162caf 100644
--- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_pipeline_output.less
+++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_pipeline_output.less
@@ -1,3 +1,7 @@
+@import (reference) "~ui/styles/variables";
+@import (reference) "~ui/styles/mixins";
+@import (reference) "~ui/styles/theme";
+
 pipeline-output {
   display: block;
 
@@ -6,6 +10,7 @@ pipeline-output {
 
     label {
       width: 100%;
+      .flex-parent(1 0 auto);
     }
   }
 
diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_source_data.less b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_source_data.less
index c250d9761f836..4f9773387372d 100644
--- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_source_data.less
+++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/styles/_source_data.less
@@ -1,10 +1,14 @@
+@import (reference) "~ui/styles/variables";
+@import (reference) "~ui/styles/mixins";
+@import (reference) "~ui/styles/theme";
+
 source-data {
+  flex: 1 0 auto;
+  display: flex;
+
   button {
+    flex: 0 0 auto;
     width: 40px;
     margin-left: 5px;
   }
-
-  div.controls {
-    display: flex;
-  }
 }
diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/pipeline_output.html b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/pipeline_output.html
index e32b720dc7702..a002a2cb2600c 100644
--- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/pipeline_output.html
+++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/pipeline_output.html
@@ -1,12 +1,9 @@
-<div class="form-group">
-  <div class="header-line">
-    <label>Pipeline Output:</label>
-    <a
-      ng-click="collapsed = false"
-      ng-show="collapsed">expand</a>
-    <a
-      ng-click="collapsed = true"
-      ng-hide="collapsed">collapse</a>
-  </div>
-  <pre class="output" ng-class="{ collapsed: collapsed }">{{ pipeline.output | json }}</pre>
+<div class="header-line">
+  <label>Pipeline Output</label>
+  <source-data
+    sample="sample"
+    samples="samples"
+    disabled="pipeline.hasCompileError">
+  </source-data>
 </div>
+<pre class="output">{{ pipeline.output | json }}</pre>
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 ad79e008b5745..488977e5a023c 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
@@ -1,6 +1,4 @@
-<source-data sample="sample" samples="samples" disabled="pipeline.hasCompileError"></source-data>
-
-<pipeline-output pipeline="pipeline"></pipeline-output>
+<pipeline-output pipeline="pipeline" samples="samples" sample="sample"></pipeline-output>
 
 <div class="form-group">
   <label>Processor Pipeline:</label>
diff --git a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/source_data.html b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/source_data.html
index 7646cbf0ed56e..73e2ddabbc303 100644
--- a/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/source_data.html
+++ b/src/plugins/kibana/public/settings/sections/indices/add_data_steps/pipeline_setup/views/source_data.html
@@ -1,31 +1,20 @@
-<div class="form-group">
-  <label>Current Line:</label>
-  <div class="controls">
-    <select
-      class="form-control"
-      ng-options="sample.message for sample in samples"
-      ng-model="selectedSample"
-      ng-disabled="disabled">
-    </select>
-    <button
-      aria-label="Previous Line"
-      tooltip="Previous Line"
-      tooltip-append-to-body="true"
-      ng-click="previousLine()"
-      type="button"
-      class="btn btn-xs btn-default"
-      ng-disabled="disabled">
-      <i aria-hidden="true" class="fa fa-chevron-left"></i>
-    </button>
-    <button
-      aria-label="Next Line"
-      tooltip="Next Line"
-      tooltip-append-to-body="true"
-      ng-click="nextLine()"
-      type="button"
-      class="btn btn-xs btn-default"
-      ng-disabled="disabled">
-      <i aria-hidden="true" class="fa fa-chevron-right"></i>
-    </button>
-  </div>
-</div>
+<button
+  aria-label="Previous Sample Record"
+  tooltip="Previous Sample Record"
+  tooltip-append-to-body="true"
+  ng-click="previousLine()"
+  type="button"
+  class="btn btn-xs btn-primary"
+  ng-disabled="disabled">
+  <i aria-hidden="true" class="fa fa-caret-left"></i>
+</button>
+<button
+  aria-label="Next Sample Record"
+  tooltip="Next Sample Record"
+  tooltip-append-to-body="true"
+  ng-click="nextLine()"
+  type="button"
+  class="btn btn-xs btn-primary"
+  ng-disabled="disabled">
+  <i aria-hidden="true" class="fa fa-caret-right"></i>
+</button>