[add data] Source record UI changes

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;

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];
       };

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);
     }
   }
 

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;
-  }
 }

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>

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>

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>