[Styles] Update the paste, review, and install filebeat screen styles

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

@@ -0,0 +1,84 @@
+<h2><em>Follow these instructions to install Filebeat.</em>
+Now that you've got a fresh pipeline and index pattern, let's throw some data at it!
+</h2>
+
+<div class="install-filebeat">
+  <ol>
+    <li>
+      <span>
+        <strong>Install Filebeat</strong> on all servers on which you want to tail logs &nbsp;
+        <a target="_blank" href="https://www.elastic.co/guide/en/beats/filebeat/master/filebeat-installation.html">
+            <i aria-hidden="true" class="fa fa-info-circle"></i> instructions
+        </a>
+      </span>
+    </li>
+
+    <li>
+      <span>
+        <strong>Point Filebeat</strong> at the log files you want to tail &nbsp;
+        <a target="_blank" href="https://www.elastic.co/guide/en/beats/filebeat/master/filebeat-configuration.html">
+          <i aria-hidden="true" class="fa fa-info-circle"></i> instructions
+        </a>
+      </span>
+    </li>
+
+    <li ng-if="installStep.results.pipeline.processors.length">
+      <span>
+        <strong>Configure Filebeat</strong> to send data through your new Elasticsearch pipeline &nbsp;
+        <a target="_blank" href="https://www.elastic.co/guide/en/beats/filebeat/master/elasticsearch-output.html">
+          <i aria-hidden="true" class="fa fa-info-circle"></i> instructions
+        </a><br/>
+        At minimum you'll need to configure Filebeat's Elasticsearch output with a hostname, an index name, and a
+        <a target="_blank"
+           href="https://www.elastic.co/guide/en/beats/filebeat/master/elasticsearch-output.html#_parameters">
+          <i aria-hidden="true" class="fa fa-info-circle"></i> paramaters
+        </a> block. Your config should end up looking something like this:<br/>
+      <pre>
+output:
+ elasticsearch:
+   hosts: ["your-elasticsearch-host"]
+   index: "your-base-index-name"
+   parameters:
+     pipeline: "{{installStep.pipelineId}}"</pre>
+        <em>NOTE</em>: The Filebeat config takes a base index name and automatically rotates the target index by appending "-{date}"
+        to the end, so if your pattern was "filebeat-*" you would make the index name "filebeat" in filebeat.yml.<br />
+      </span>
+    </li>
+
+
+    <li ng-if="!installStep.results.pipeline.processors.length">
+      <span>
+        <strong>Configure Filebeat</strong> to send data to Elasticsearch &nbsp;
+        <a target="_blank" href="https://www.elastic.co/guide/en/beats/filebeat/master/elasticsearch-output.html">
+          <i aria-hidden="true" class="fa fa-info-circle"></i> instructions
+        </a><br/>
+        At minimum you'll need to configure Filebeat's Elasticsearch output with a hostname and an index name.
+        Your config should end up looking something like this:<br />
+        <pre>
+output:
+ elasticsearch:
+   hosts: ["your-elasticsearch-host"]
+   index: "your-base-index-name"</pre>
+      <em>NOTE</em>: The Filebeat config takes a base index name and automatically rotates the target index by appending "-{date}"
+      to the end, so if your pattern was "filebeat-*" you would make the index name "filebeat" in filebeat.yml.<br />
+      </span>
+    </li>
+
+    <li>
+      <span>
+        <strong>Run Filebeat</strong> on each server &nbsp;
+        <a target="_blank" href="https://www.elastic.co/guide/en/beats/filebeat/master/_step_5_starting_filebeat.html">
+          <i aria-hidden="true" class="fa fa-info-circle"></i> instructions
+        </a>
+      </span>
+    </li>
+    <li>
+      <span>
+        <strong>Verify your filebeat installation below.</strong> We'll poll your new index pattern for documents and let you know when
+        they show up. If you'd like to skip this step, simply click Done now.
+      </span>
+    </li>
+  </ol>
+</div>
+
+<pattern-checker pattern="installStep.results.indexPattern.id"/>

src/plugins/kibana/public/settings/sections/indices/add_data_steps/install_filebeat_step.js → src/plugins/kibana/public/settings/sections/indices/add_data_steps/install_filebeat_step/install_filebeat_step.js

@@ -1,7 +1,8 @@
 import modules from 'ui/modules';
-import template from 'plugins/kibana/settings/sections/indices/add_data_steps/install_filebeat_step.html';
+import template from './install_filebeat_step.html';
 import 'ui/pattern_checker';
-import { patternToIngest } from '../../../../../common/lib/convert_pattern_and_ingest_name';
+import { patternToIngest } from '../../../../../../common/lib/convert_pattern_and_ingest_name';
+import './styles/_add_data_install_filebeat_step.less';
 
 modules.get('apps/settings')
   .directive('installFilebeatStep', function () {

src/plugins/kibana/public/settings/sections/indices/add_data_steps/install_filebeat_step/styles/_add_data_install_filebeat_step.less

@@ -0,0 +1,22 @@
+install-filebeat-step {
+
+  .install-filebeat {
+    > ol {
+      padding-left: 1em;
+
+      > li {
+        padding: 4px 0;
+        font-weight: bold;
+
+        > span {
+          font-weight: normal;
+
+          > pre {
+            margin: 7px 0;
+          }
+        }
+      }
+    }
+  }
+
+}

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

@@ -0,0 +1,11 @@
+<h2><em>Provide some sample logs.</em>
+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.
+</h2>
+
+<div class="paste-samples form-group">
+  <textarea class="form-control" ng-model="pasteStep.rawSamples" placeholder="Paste your sample log lines here, separated by a newline"></textarea>
+</div>

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

@@ -1,5 +1,5 @@
 import modules from 'ui/modules';
-import template from 'plugins/kibana/settings/sections/indices/add_data_steps/paste_samples_step.html';
+import template from './paste_samples_step.html';
 import _ from 'lodash';
 
 modules.get('apps/settings')

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

@@ -0,0 +1,29 @@
+<h2><em>Review the index pattern.</em>
+  Here we'll define how and where to store your parsed events. We've made some intelligent guesses for you, but most
+  fields can be changed if we got it wrong!
+</h2>
+
+<div class="pattern-review form-inline">
+  <label>Index name or pattern</label>
+  <span id="pattern-help" class="help-block">Patterns allow you to define dynamic index names using * as a wildcard. Example: filebeat-*</span>
+  <input ng-model="reviewStep.indexPattern.id" class="pattern-input form-control" aria-describedby="pattern-help"/>
+  <label>
+    <input ng-model="reviewStep.isTimeBased" type="checkbox"/>
+    time based
+  </label>
+  <label ng-if="reviewStep.isTimeBased" class="time-field-input">
+    Time Field
+    <select ng-model="reviewStep.indexPattern.timeFieldName" name="time_field_name" class="form-control">
+      <option ng-repeat="field in reviewStep.dateFields" value="{{field}}">
+        {{field}}
+      </option>
+    </select>
+  </label>
+</div>
+
+<paginated-table
+  class="pattern-review-field-table"
+  columns="reviewStep.columns"
+  rows="reviewStep.rows"
+  per-page="10">
+</paginated-table>

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pattern_review_step.js → src/plugins/kibana/public/settings/sections/indices/add_data_steps/pattern_review_step/pattern_review_step.js

@@ -1,7 +1,8 @@
 import modules from 'ui/modules';
-import template from 'plugins/kibana/settings/sections/indices/add_data_steps/pattern_review_step.html';
+import template from './pattern_review_step.html';
 import _ from 'lodash';
 import editFieldTypeHTML from 'plugins/kibana/settings/sections/indices/partials/_edit_field_type.html';
+import './styles/_add_data_pattern_review_step.less';
 
 function pickDefaultTimeFieldName(dateFields) {
   if (_.isEmpty(dateFields)) {

src/plugins/kibana/public/settings/sections/indices/add_data_steps/pattern_review_step/styles/_add_data_pattern_review_step.less

@@ -0,0 +1,71 @@
+@import (reference) "../../../styles/_add_data_wizard";
+
+pattern-review-step {
+  margin-bottom: 14px;
+
+  .pattern-review {
+    margin-bottom: 15px;
+
+    label {
+      margin-bottom: 0;
+    }
+
+  .time-field-input {
+    padding-left: 14px;
+    margin-bottom: 0;
+  }
+
+  .pattern-input {
+    width: 300px;
+    margin-right: 7px;
+  }
+
+    > .help-block {
+      margin-top: 0;
+    }
+  }
+
+  paginated-table.pattern-review-field-table {
+    table {
+      border-bottom: 3px solid @settings-filebeat-wizard-panel-bg;
+
+      tr {
+        .form-group;
+      }
+
+      th {
+        border-bottom: 0;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        background-color: @settings-filebeat-wizard-panel-bg;
+        font-weight: normal;
+      }
+
+      td {
+        border-top: 3px solid @settings-filebeat-wizard-panel-bg;
+        vertical-align: middle;
+        padding-right: 14px;
+      }
+
+      select {
+        .form-control;
+        .wizard-container.form-control;
+
+        min-width: 105px;
+      }
+    }
+
+    paginate-controls {
+      position: relative;
+
+      ul > li > a {
+        background-color: @settings-filebeat-wizard-panel-bg;
+      }
+
+      form.pagination-size {
+        position: absolute;
+        right: 0;
+      }
+    }
+  }
+}

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

@@ -50,14 +50,6 @@ pipeline-setup {
     }
   }
 
-  pre {
-    border: none;
-    background-color: @settings-filebeat-wizard-panel-bg;
-    border-radius: 0px;
-    white-space: pre-wrap;
-    margin: 0px;
-  }
-
   .add-processor {
     padding:10px;
     margin-bottom: 10px;
@@ -67,7 +59,7 @@ pipeline-setup {
       justify-content: flex-start;
       align-items: center;
 
-      select {
+      select.form-control {
         background-color: @settings-filebeat-wizard-processor-select-bg;
         border: none;
         width: auto;