Ingest UI Pattern Review Screen

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

@@ -1,7 +1,28 @@
-<h2>Pattern review step</h2>
+<div class="wizard-step-title">
+  <h3>Review the index pattern</h3>
+  Here we'll define how and where to store your parsed events. We've made some intellient guesses for you, but most
+  fields can be changed iw we got it wrong!
+</div>
 
-<div>
-  Docs: {{sampleDocs}}
+<div class="pattern-review">
+  <input ng-model="indexPattern.id" class="pattern-input"/>
+  <label>
+    <input ng-model="isTimeBased" type="checkbox"/>
+    time based
+  </label>
+  <label ng-if="isTimeBased" class="time-field-input">
+    Time Field
+    <select ng-model="indexPattern.timeFieldName" name="time_field_name">
+      <option ng-repeat="field in dateFields" value="{{field}}">
+        {{field}}
+      </option>
+    </select>
+  </label>
 </div>
 
-<button ng-click="indexPattern = {id: 'logstash-*', title: 'myFirstIndexPattern'}">Create an index pattern</button>
+<div>
+  <paginated-table
+    columns="columns"
+    rows="rows">
+  </paginated-table>
+</div>

src/plugins/kibana/public/settings/sections/indices/directives/pattern_review_step.js

@@ -1,5 +1,70 @@
 var modules = require('ui/modules');
 var template = require('plugins/kibana/settings/sections/indices/directives/pattern_review_step.html');
+var _ = require('lodash');
+var editFieldTypeHTML = require('plugins/kibana/settings/sections/indices/partials/_edit_field_type.html');
+
+var testData = {
+  message: '11/24/2015 ip=1.1.1.1 bytes=1234',
+  clientip: '1.1.1.1',
+  bytes: 1234,
+  geoip: {
+    lat: 37.3894,
+    lon: 122.0819
+  },
+  location: {
+    lat: 37.3894,
+    lon: 122.0819
+  },
+  '@timestamp': '2015-11-24T00:00:00.000Z',
+  otherdate: '2015-11-24T00:00:00.000Z',
+  codes: [1, 2, 3, 4]
+};
+
+var testPipeline = [
+  {
+    grok: {
+      match_field: 'message',
+      match_pattern: 'foo'
+    }
+  },
+  {
+    geoip: {
+      source_field: 'ip'
+    }
+  },
+  {
+    geoip: {
+      source_field: 'ip',
+      target_field: 'location'
+    }
+  },
+  {
+    date: {
+      match_field: 'initialDate',
+      match_formats: ['dd/MM/yyyy hh:mm:ss']
+    }
+  },
+  {
+    date: {
+      match_field: 'initialDate',
+      match_formats: ['dd/MM/yyyy hh:mm:ss'],
+      target_field: 'otherdate'
+    }
+  }
+];
+
+function pickDefaultTimeFieldName(dateFields) {
+  if (_.isEmpty(dateFields)) {
+    return undefined;
+  }
+
+  let fieldName = dateFields[0];
+  if (_.includes(dateFields, '@timestamp')) {
+    fieldName = '@timestamp';
+  }
+
+  return fieldName;
+}
 
 modules.get('apps/settings')
   .directive('patternReviewStep', function () {
@@ -9,6 +74,76 @@ modules.get('apps/settings')
         sampleDocs: '=',
         indexPattern: '=',
         pipeline: '='
+      },
+      controller: function ($scope, Private) {
+        $scope.sampleDocs = testData;
+        $scope.pipeline = testPipeline;
+
+        if (_.isUndefined($scope.indexPattern)) {
+          $scope.indexPattern = {};
+        }
+
+        const knownFieldTypes = {};
+        $scope.dateFields = [];
+        $scope.pipeline.forEach(function (processor) {
+          if (processor.geoip) {
+            let field = processor.geoip.target_field || 'geoip';
+            knownFieldTypes[field] = 'geo_point';
+          }
+          if (processor.date) {
+            let field = processor.date.target_field || '@timestamp';
+            knownFieldTypes[field] = 'date';
+            $scope.dateFields.push(field);
+          }
+        });
+
+        _.defaults($scope.indexPattern, {
+          id: 'filebeat-*',
+          title: 'filebeat-*',
+          timeFieldName: pickDefaultTimeFieldName($scope.dateFields),
+          fields: _.map($scope.sampleDocs, (value, key) => {
+            let type = knownFieldTypes[key] || typeof value;
+            if (type === 'object' && _.isArray(value) && !_.isEmpty(value)) {
+              type = typeof value[0];
+            }
+            return {name: key, type: type};
+          })
+        });
+
+        $scope.isTimeBased = !!$scope.indexPattern.timeFieldName;
+
+        $scope.$watch('indexPattern.id', function (value) {
+          $scope.indexPattern.title = value;
+        });
+        $scope.$watch('isTimeBased', function (value) {
+          if (value) {
+            $scope.indexPattern.timeFieldName = pickDefaultTimeFieldName($scope.dateFields);
+          }
+          else {
+            delete $scope.indexPattern.timeFieldName;
+          }
+        });
+        $scope.$watch('indexPattern.fields', (fields) => {
+          $scope.dateFields = _.map(_.filter(fields, {type: 'date'}), 'name');
+        }, true);
+
+        $scope.columns = [
+          {title: 'Field'},
+          {title: 'Type'},
+          {title: 'Example', sortable: false}
+        ];
+
+        $scope.rows = _.map($scope.indexPattern.fields, (field) => {
+          const sampleValue = $scope.sampleDocs[field.name];
+          return [
+            field.name,
+            {
+              markup: editFieldTypeHTML,
+              scope: _.assign($scope.$new(), {field: field, knownFieldTypes: knownFieldTypes})
+            },
+            typeof sampleValue === 'object' ? JSON.stringify(sampleValue) : sampleValue
+          ];
+        });
       }
     };
   });

src/plugins/kibana/public/settings/sections/indices/partials/_edit_field_type.html

@@ -0,0 +1,13 @@
+<select ng-if="knownFieldTypes[field.name] !== 'geo_point'" name="field_type" ng-model="field.type">
+  <option value="string">string</option>
+  <option value="number">number</option>
+  <option value="boolean">boolean</option>
+  <option value="date">date</option>
+  <option value="geo_point">geo_point</option>
+  <option value="geo_shape">geo_shape</option>
+  <option value="ip">ip</option>
+</select>
+
+<span ng-if="knownFieldTypes[field.name] === 'geo_point'">
+  geo_point
+</span>

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

@@ -204,3 +204,18 @@ kbn-settings-indices {
     }
   }
 }
+
+.wizard-step-title {
+  padding-bottom: 1em;
+}
+
+.pattern-review {
+  .time-field-input {
+    padding-left: 1em;
+  }
+
+  .pattern-input {
+    width: 300px;
+  }
+}
+