[Styles] Updates review screen styles

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

@@ -67,7 +67,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;

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

@@ -36,17 +36,6 @@ processor-ui-container {
     }
   }
 
-  .form-group {
-    margin-bottom: 5px;
-  }
-
-  .form-control {
-    background-color: #f5fafb;
-    border-color: #86bbcb;
-    border-width: 1px;
-    border-radius: 4px;
-  }
-
   label {
     font-weight: normal;
   }

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

@@ -25,7 +25,7 @@
   <div ng-switch="wizard.currentStep">
     <div ng-switch-when="0">
       <paste-samples-step samples="wizard.stepResults.samples" raw-samples="wizard.stepResults.rawSamples"></paste-samples-step>
-      <div class="filebeat-wizard-buttons">
+      <div class="wizard-nav-buttons">
         <div></div>
         <div>
           <button
@@ -45,7 +45,7 @@
         samples="wizard.stepResults.samples">
       </pipeline-setup>
 
-      <div class="filebeat-wizard-buttons">
+      <div class="wizard-nav-buttons">
         <div>
           <button
             class="btn btn-secondary"
@@ -72,7 +72,7 @@
         sample-doc="wizard.stepResults.pipeline.output">
       </pattern-review-step>
 
-      <div class="filebeat-wizard-buttons">
+      <div class="wizard-nav-buttons">
         <div>
           <button
             class="btn btn-secondary"

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

@@ -5,6 +5,7 @@ import 'plugins/kibana/settings/sections/indices/add_data_steps/pattern_review_s
 import 'plugins/kibana/settings/sections/indices/add_data_steps/paste_samples_step';
 import 'plugins/kibana/settings/sections/indices/add_data_steps/pipeline_setup';
 import 'plugins/kibana/settings/sections/indices/add_data_steps/install_filebeat_step';
+import '../../styles/_add_data_wizard.less';
 import '../styles/_filebeat_wizard.less';
 
 // wrapper directive, which sets up the breadcrumb for all filebeat steps

src/plugins/kibana/public/settings/sections/indices/filebeat/styles/_filebeat_wizard.less

@@ -52,31 +52,6 @@ filebeat-wizard {
   }
   //************* Common Styles? *********************//
 
-  .nav-buttons {
-    float: right;
-  }
-
-  .filebeat-wizard-buttons {
-    display: flex;
-    float: none;
-
-    div {
-      width:100px;
-      flex: 1 1 auto;
-      display: flex;
-    }
-
-    :nth-child(1) {
-      justify-content: flex-start;
-    }
-    :nth-child(2) {
-      justify-content: center;
-    }
-    :nth-child(3) {
-      justify-content: flex-end;
-    }
-  }
-
   .install-filebeat {
     padding-bottom: 1em;
   }

src/plugins/kibana/public/settings/sections/indices/styles/_add_data_wizard.less

@@ -0,0 +1,84 @@
+@import (reference) "~ui/styles/variables";
+@import (reference) "~ui/styles/mixins";
+@import (reference) "~ui/styles/theme";
+
+.wizard-container {
+  padding: 0 10px;
+
+  .form-group {
+    margin-bottom: 5px;
+  }
+
+  .form-control {
+    background-color: #f5fafb;
+    border-color: @kibanaBlue3;
+    border-width: 1px;
+    border-radius: 4px;
+  }
+}
+
+.wizard-step-headings{
+  padding-top: 14px;
+
+  .wizard-step-heading {
+    font-size: 1.3em;
+    padding: 6px 18px;
+    margin: 0 2px;
+    background-color: @settings-add-data-wizard-step-heading-complete-background;
+    color: @settings-add-data-wizard-step-heading-complete-color;
+
+    &.active {
+      cursor: default;
+      background-color: @settings-add-data-wizard-step-heading-active-background;
+      color: @settings-add-data-wizard-step-heading-active-color;
+    }
+    &.aheadActive {
+      cursor: default;
+      background-color: @settings-add-data-wizard-step-heading-incomplete-background;
+      color: @settings-add-data-wizard-step-heading-incomplete-color;
+    }
+  }
+
+  &.complete {
+    .wizard-step-heading:not(.active) {
+      cursor: default;
+    }
+  }
+}
+
+.wizard-step-title {
+  padding-bottom: 14px;
+}
+
+.nav-buttons {
+  float: right;
+}
+
+.wizard-nav-buttons {
+  display: flex;
+  float: none;
+  margin-top: 14px;
+
+  div {
+    width:100px;
+    flex: 1 1 auto;
+    display: flex;
+  }
+
+  :nth-child(1) {
+    justify-content: flex-start;
+  }
+  :nth-child(2) {
+    justify-content: center;
+  }
+  :nth-child(3) {
+    justify-content: flex-end;
+  }
+}
+
+.paste-samples {
+  textarea {
+    width: 100%;
+    height: 250px;
+  }
+}