Scripted fields interface

src/kibana/components/index_patterns/_index_pattern.js

@@ -73,6 +73,7 @@ define(function (require) {
                 return self.refreshFields();
               } else {
                 setIndexedValue('fields');
+                setIndexedValue('scriptedFields');
               }
             }
 
@@ -116,6 +117,22 @@ define(function (require) {
         });
       }
 
+      self.addScriptedField = function (name, script) {
+        var scriptedField = self.scriptedFields.push({
+          name: name,
+          script: script
+        });
+        self.save();
+      };
+
+      self.removeScriptedField = function (name) {
+        var index = _.findIndex(self.scriptedFields, { name: name });
+        if (index !== -1) {
+          self.scriptedFields.splice(index, 1);
+          self.save();
+        }
+      };
+
       self.popularizeField = function (fieldName, unit) {
         if (_.isUndefined(unit)) unit = 1;
         if (!(self.fields.byName && self.fields.byName[fieldName])) return;
@@ -170,7 +187,7 @@ define(function (require) {
         return mapper.clearCache(self)
         .then(function () {
           return self._fetchFields()
-          .then(self._fetchScriptedFields)
+          .then(self._setScriptedFields)
           .then(self.save);
         });
       };
@@ -182,8 +199,10 @@ define(function (require) {
         });
       };
 
-      self._fetchScriptedFields = function () {
-        setIndexedValue('scriptedFields', []);
+      self._setScriptedFields = function () {
+        if (!self.scriptedFields) {
+          self.scriptedFields = [];
+        }
       };
 
       self.toJSON = function () {

src/kibana/components/paginated_table/paginated_table.html

@@ -14,6 +14,7 @@
             <span bo-text="col.title"></span>
             <kbn-info ng-if="col.info" info="{{ col.info }}" placement="top"></kbn-info>
             <i
+              ng-if="col.sortable !== false"
               class="fa"
               ng-class="{
                 'fa-sort-asc': paginatedTable.sort.columnName === col.title && paginatedTable.sort.direction === 'asc',

src/kibana/components/paginated_table/paginated_table.js

@@ -25,6 +25,7 @@ define(function (require) {
         };
 
         self.sortColumn = function (col) {
+          if (col.sortable === false) return;
           var sortDirection;
           var cols = _.pluck($scope.columns, 'title');
           var index = cols.indexOf(col.title);

src/kibana/plugins/settings/sections/indices/_edit.html

@@ -53,17 +53,9 @@ <h1>
         </li>
       </ul>
 
-      <div ng-show="state.tab == 'fields'" class="fields">
-        <paginated-table
-          columns="fieldColumns"
-          rows="fieldRows"
-          per-page="perPage">
-        </paginated-table>
-      </div>
+      <indexed-fields ng-show="state.tab == 'fields'" class="fields"></indexed-fields>
 
-      <div ng-show="state.tab == 'scriptedFields'" class="scripted-fields">
-        No scripted fields defined
-      </div>
+      <scripted-fields ng-show="state.tab == 'scriptedFields'" class="scripted-fields"></scripted-fields>
 
     </div>
   </kbn-settings-indices>

src/kibana/plugins/settings/sections/indices/_edit.js

@@ -1,6 +1,7 @@
 define(function (require) {
   var _ = require('lodash');
-  require('components/paginated_table/paginated_table');
+  require('plugins/settings/sections/indices/_indexed_fields');
+  require('plugins/settings/sections/indices/_scripted_fields');
 
   require('routes')
   .when('/settings/indices/:id', {
@@ -14,10 +15,8 @@ define(function (require) {
   });
 
   require('modules').get('apps/settings')
-  .controller('settingsIndicesEdit', function ($scope, $location, $route, $compile,
-    config, courier, Notifier, Private, AppState) {
+  .controller('settingsIndicesEdit', function ($scope, $location, $route, config, courier, Notifier, Private, AppState) {
 
-    var rowScopes = []; // track row scopes, so they can be destroyed as needed
     var notify = new Notifier();
     var $state = $scope.state = new AppState();
     var popularityHtml = require('text!plugins/settings/sections/indices/_popularity.html');
@@ -28,50 +27,6 @@ define(function (require) {
 
     $scope.fieldTypes = Private(require('plugins/settings/sections/indices/_field_types'));
 
-    $scope.fieldColumns = [{
-      title: 'name'
-    }, {
-      title: 'type'
-    }, {
-      title: 'analyzed',
-      info: 'Analyzed fields may require extra memory to visualize'
-    }, {
-      title: 'indexed',
-      info: 'Fields that are not indexed are unavailable for search'
-    }, {
-      title: 'popularity',
-      info: 'A gauge of how often this field is used',
-    }];
-
-    $scope.showPopularityControls = function (field) {
-      $scope.popularityHoverState = (field) ? field : null;
-    };
-
-    $scope.$watchCollection('indexPattern.fields', function () {
-      _.invoke(rowScopes, '$destroy');
-
-      $scope.fieldRows = $scope.indexPattern.fields.map(function (field) {
-        var childScope = $scope.$new();
-        rowScopes.push(childScope);
-        childScope.field = field;
-
-        // update the active field via object comparison
-        if (_.isEqual(field, $scope.popularityHoverState)) {
-          $scope.showPopularityControls(field);
-        }
-
-        return [field.name, field.type, field.analyzed, field.indexed,
-          {
-            markup: $compile(popularityHtml)(childScope),
-            value: field.count
-          }
-        ];
-      });
-    });
-
-
-    $scope.perPage = 25;
-
     $scope.changeTab = function (obj) {
       $state.tab = obj.index;
       $state.save();

src/kibana/plugins/settings/sections/indices/_indexed_fields.html

@@ -0,0 +1,5 @@
+<paginated-table
+  columns="columns"
+  rows="rows"
+  per-page="perPage">
+</paginated-table>

src/kibana/plugins/settings/sections/indices/_indexed_fields.js

@@ -0,0 +1,60 @@
+define(function (require) {
+  var _ = require('lodash');
+  require('components/paginated_table/paginated_table');
+
+  require('modules').get('apps/settings')
+  .directive('indexedFields', function ($compile) {
+    var popularityHtml = require('text!plugins/settings/sections/indices/_popularity.html');
+
+    return {
+      restrict: 'E',
+      template: require('text!plugins/settings/sections/indices/_indexed_fields.html'),
+      scope: true,
+      link: function ($scope, $el, attr) {
+        var rowScopes = []; // track row scopes, so they can be destroyed as needed
+        $scope.perPage = 25;
+
+        $scope.columns = [{
+          title: 'name'
+        }, {
+          title: 'type'
+        }, {
+          title: 'analyzed',
+          info: 'Analyzed fields may require extra memory to visualize'
+        }, {
+          title: 'indexed',
+          info: 'Fields that are not indexed are unavailable for search'
+        }, {
+          title: 'popularity',
+          info: 'A gauge of how often this field is used',
+        }];
+
+        $scope.showPopularityControls = function (field) {
+          $scope.popularityHoverState = (field) ? field : null;
+        };
+
+        $scope.$watchCollection('indexPattern.fields', function () {
+          _.invoke(rowScopes, '$destroy');
+
+          $scope.rows = $scope.indexPattern.fields.map(function (field) {
+            var childScope = $scope.$new();
+            rowScopes.push(childScope);
+            childScope.field = field;
+
+            // update the active field via object comparison
+            if (_.isEqual(field, $scope.popularityHoverState)) {
+              $scope.showPopularityControls(field);
+            }
+
+            return [field.name, field.type, field.analyzed, field.indexed,
+              {
+                markup: $compile(popularityHtml)(childScope),
+                value: field.count
+              }
+            ];
+          });
+        });
+      }
+    };
+  });
+});

src/kibana/plugins/settings/sections/indices/_scripted_field_controls.html

@@ -0,0 +1,12 @@
+<div class="actions pull-right">
+  <button ng-click="edit(field)" class="btn btn-xs btn-default">
+    <i class="fa fa-pencil"></i>
+  </button>
+
+  <button
+    confirm-click="remove(field)"
+    confirmation="Are you sure want to delete '{{field.name}}'? This action is irreversible!"
+      class="btn btn-xs btn-danger">
+    <i class="fa fa-trash"></i>
+  </button>
+</div>

src/kibana/plugins/settings/sections/indices/_scripted_fields.html

@@ -0,0 +1,14 @@
+<header>
+  <button ng-click="create()" class="btn btn-info">
+    <i class="fa fa-plus"></i>
+    Add Scripted Field
+  </button>
+</header>
+
+<paginated-table
+  columns="columns"
+  rows="rows"
+  per-page="perPage">
+</paginated-table>
+
+<div ng-if="rows.length === 0">No scripted fields</div>

src/kibana/plugins/settings/sections/indices/_scripted_fields.js

@@ -0,0 +1,68 @@
+define(function (require) {
+  var _ = require('lodash');
+  require('components/paginated_table/paginated_table');
+
+  require('modules').get('apps/settings')
+  .directive('scriptedFields', function ($compile, kbnUrl) {
+    var rowScopes = []; // track row scopes, so they can be destroyed as needed
+    var controlsHtml = require('text!plugins/settings/sections/indices/_scripted_field_controls.html');
+
+    return {
+      restrict: 'E',
+      template: require('text!plugins/settings/sections/indices/_scripted_fields.html'),
+      scope: true,
+      link: function ($scope, $el, attr) {
+        var fieldEditorPath = '/settings/indices/{{ indexPattern }}/scriptedField';
+        $scope.perPage = 25;
+
+        $scope.columns = [{
+          title: 'name'
+        }, {
+          title: 'script'
+        }, {
+          title: 'controls',
+          class: 'pull-right',
+          sortable: false
+        }];
+
+        $scope.$watch('indexPattern.scriptedFields', function () {
+          _.invoke(rowScopes, '$destroy');
+
+          $scope.rows = $scope.indexPattern.scriptedFields.map(function (field, i) {
+            var rowScope = $scope.$new();
+            var columns = [field.name, field.script];
+            rowScope.field = field;
+            rowScopes.push(rowScope);
+
+            columns.push({
+              markup: $compile(controlsHtml)(rowScope)
+            });
+
+            return columns;
+          });
+        });
+
+        $scope.create = function () {
+          var params = {
+            indexPattern: $scope.indexPattern.id
+          };
+
+          kbnUrl.change(fieldEditorPath, params);
+        };
+
+        $scope.edit = function (field) {
+          var params = {
+            indexPattern: $scope.indexPattern.id,
+            fieldName: field.name
+          };
+
+          kbnUrl.change(fieldEditorPath + '/{{ fieldName }}', params);
+        };
+
+        $scope.remove = function (field) {
+          $scope.indexPattern.removeScriptedField(field.name);
+        };
+      }
+    };
+  });
+});

src/kibana/plugins/settings/sections/indices/index.html

@@ -32,4 +32,5 @@ <h5>
     </ul>
   </div>
 </div>
+
 <div class="col-md-10" ng-transclude></div>

src/kibana/plugins/settings/sections/indices/index.js

@@ -1,6 +1,7 @@
 define(function (require) {
   var _ = require('lodash');
 
+  require('plugins/settings/sections/indices/scripted_fields/index');
   require('plugins/settings/sections/indices/_create');
   require('plugins/settings/sections/indices/_edit');
 

src/kibana/plugins/settings/sections/indices/scripted_fields/index.html

@@ -0,0 +1,29 @@
+<kbn-settings-app section="indices">
+  <kbn-settings-indices>
+
+    <div ng-controller="scriptedFieldsEdit">
+      <h1>{{ action }} Scripted Field</h1>
+
+      <form name="scriptedFieldForm" ng-submit="submit()">
+        <div class="form-group">
+          <label>Name</label>
+          <input type="text" ng-model="scriptedField.name" class="form-control span12">
+        </div>
+        <div class="form-group">
+          <label>Script</label>
+          <textarea class="form-control span12" ng-model="scriptedField.script"></textarea>
+        </div>
+      </form>
+      <div ng-if="namingConflict" class="alert alert-danger">
+        You already have a field with the name {{ scriptedField.name }}. Naming your scripted
+        field with the same name means you won't be able to query both fields at the same time.
+      </div>
+      <div class="form-group">
+        <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
+        <button class="btn btn-success" ng-click="submit()" ng-disabled="scriptedFieldForm.$invalid">
+          Save Scripted Field
+        </button>
+      </div>
+    </div>
+  </kbn-settings-indices>
+</kbn-settings-app>