WIP

src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html

@@ -145,7 +145,7 @@
           class="fields indexed-fields"
         ></indexed-fields-table>
 
-        <!--<scripted-fields-table
+        <scripted-fields-table
           ng-show="state.tab == 'scriptedFields'"
           class="fields scripted-fields"
         ></scripted-fields-table>
@@ -154,7 +154,7 @@
           ng-show="state.tab == 'sourceFilters'"
           index-pattern="indexPattern"
           class="fields source-filters"
-        ></source-filters-table>-->
+        ></source-filters-table>
       </div>
     </div>
   </kbn-management-indices>

src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/indexed_fields_table/indexed_fields_table.js

@@ -34,26 +34,26 @@ uiModules.get('apps/management')
       $scope.columns = [
         {
           title: 'name',
-          text: 'Name', },
-        {
+          text: 'Name',
+        }, {
           title: 'type',
-          text: 'Type', },
-        {
+          text: 'Type',
+        }, {
           title: 'format',
-          text: 'Format', },
-        {
+          text: 'Format',
+        }, {
           title: 'searchable',
           text: 'Searchable',
-          info: 'These fields can be used in the filter bar' },
-        {
+          info: 'These fields can be used in the filter bar'
+        }, {
           title: 'aggregatable',
           ext: 'Aggregatable',
-          info: 'These fields can be used in visualization aggregations' },
-        {
+          info: 'These fields can be used in visualization aggregations'
+        }, {
           title: 'excluded',
           text: 'Excluded',
-          info: 'Fields that are excluded from _source when it is fetched' },
-        {
+          info: 'Fields that are excluded from _source when it is fetched'
+        }, {
           title: 'controls',
           text: '',
           sortable: false,
@@ -128,8 +128,11 @@ uiModules.get('apps/management')
               value: field.type,
             }, {
               // TODO: What is this?
-              // _.get($scope.indexPattern, ['fieldFormatMap', field.name, 'type', 'title']),
-              render: () => '',
+              render: () => (
+                <div>
+                  {_.get($scope.indexPattern, ['fieldFormatMap', field.name, 'type', 'title'])}
+                </div>
+              ),
             }, {
               render: renderBooleanForCondition(field.searchable),
               value: field.searchable
@@ -141,21 +144,6 @@ uiModules.get('apps/management')
               value: excluded
             }, {
               render: () => {
-                let deleteButton;
-
-                if (field.scripted) {
-                  deleteButton = (
-                    <button
-                      ng-if=""
-                      onClick="remove(field)"
-                      className="kuiButton kuiButton--danger kuiButton--small"
-                      aria-label="Delete"
-                    >
-                      <span aria-hidden="true" className="kuiIcon fa-trash" />
-                    </button>
-                  );
-                }
-
                 return (
                   <div>
                     <div className="actions">
@@ -167,12 +155,9 @@ uiModules.get('apps/management')
                       >
                         <span aria-hidden="true" className="kuiIcon fa-pencil" />
                       </a>
-
-                      {deleteButton}
                     </div>
                   </div>
                 );
-
               },
             }
           ];

src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/scripted_fields_table.js

@@ -1,12 +1,15 @@
+import React from 'react';
 import _ from 'lodash';
-import fieldControlsHtml from '../field_controls.html';
 import { dateScripts } from './date_scripts';
 import { uiModules } from 'ui/modules';
 import template from './scripted_fields_table.html';
 
+import {
+ RIGHT_ALIGNMENT,
+} from '@elastic/eui';
+
 uiModules.get('apps/management')
-.directive('scriptedFieldsTable', function (kbnUrl, Notifier, $filter, confirmModal) {
-  const rowScopes = []; // track row scopes, so they can be destroyed as needed
+.directive('scriptedFieldsTable', function (kbnUrl, Notifier, $filter, confirmModal, chrome) {
   const filter = $filter('filter');
 
   const notify = new Notifier();
@@ -22,93 +25,110 @@ uiModules.get('apps/management')
 
       $scope.perPage = 25;
       $scope.columns = [
-        { title: 'name' },
-        { title: 'lang' },
-        { title: 'script' },
-        { title: 'format' },
-        { title: 'controls', sortable: false }
+        {
+          title: 'name',
+          text: 'Name',
+        }, {
+          title: 'lang',
+          text: 'Lang',
+        }, {
+          title: 'script',
+          text: 'Script',
+        }, {
+          title: 'format',
+          text: 'Format',
+        }, {
+          title: 'controls',
+          text: '',
+          sortable: false,
+          align: RIGHT_ALIGNMENT,
+        },
       ];
 
-      $scope.$watchMulti(['[]indexPattern.fields', 'fieldFilter', 'scriptedFieldLanguageFilter'], refreshRows);
+      const remove = field => {
+        const confirmModalOptions = {
+          confirmButtonText: 'Delete field',
+          onConfirm: () => { $scope.indexPattern.removeScriptedField(field.name); }
+        };
+        confirmModal(`Are you sure want to delete ${field.name}? This action is irreversible!`, confirmModalOptions);
+      };
 
       function refreshRows() {
-        _.invoke(rowScopes, '$destroy');
-        rowScopes.length = 0;
-
         const fields = filter($scope.indexPattern.getScriptedFields(), {
           name: $scope.fieldFilter,
           lang: $scope.scriptedFieldLanguageFilter
         });
         _.find($scope.editSections, { index: 'scriptedFields' }).count = fields.length; // Update the tab count
 
         $scope.rows = fields.map(function (field) {
-          const rowScope = $scope.$new();
-          rowScope.field = field;
-          rowScopes.push(rowScope);
-
           return [
-            _.escape(field.name),
-            {
-              markup: field.lang,
-              attr: {
-                'data-test-subj': 'scriptedFieldLang'
-              }
-            },
-            _.escape(field.script),
-            _.get($scope.indexPattern, ['fieldFormatMap', field.name, 'type', 'title']),
             {
-              markup: fieldControlsHtml,
-              scope: rowScope
+              render: () => (
+                <div>
+                  {_.escape(field.name)}
+                </div>
+              ),
+            }, {
+              render: () => (
+                <div data-test-subj="scriptedFieldLang">
+                  {field.lang}
+                </div>
+              ),
+            }, {
+              render: () => (
+                <div>
+                  {_.escape(field.script)}
+                </div>
+              ),
+            }, {
+              render: () => (
+                <div>
+                  {_.get($scope.indexPattern, ['fieldFormatMap', field.name, 'type', 'title'])}
+                </div>
+              ),
+            }, {
+              render: () => {
+                let deleteButton;
+
+                if (field.scripted) {
+                  deleteButton = (
+                    <button
+                      onClick={() => { remove(field); }}
+                      className="kuiButton kuiButton--danger kuiButton--small"
+                      aria-label="Delete"
+                    >
+                      <span aria-hidden="true" className="kuiIcon fa-trash" />
+                    </button>
+                  );
+                }
+
+                return (
+                  <div>
+                    <div className="actions">
+                      <a
+                        data-test-subj="indexPatternFieldEditButton"
+                        href={chrome.addBasePath(kbnUrl.getRouteHref(field, 'edit'))}
+                        aria-label="Edit"
+                        className="kuiButton kuiButton--basic kuiButton--small"
+                      >
+                        <span aria-hidden="true" className="kuiIcon fa-pencil" />
+                      </a>
+
+                      {deleteButton}
+                    </div>
+                  </div>
+                );
+              },
             }
           ];
         });
       }
 
-      $scope.addDateScripts = function () {
-        const conflictFields = [];
-        let fieldsAdded = 0;
-        _.each(dateScripts($scope.indexPattern), function (script, field) {
-          try {
-            $scope.indexPattern.addScriptedField(field, script, 'number');
-            fieldsAdded++;
-          } catch (e) {
-            conflictFields.push(field);
-          }
-        });
-
-        if (fieldsAdded > 0) {
-          notify.info(fieldsAdded + ' script fields created');
-        }
-
-        if (conflictFields.length > 0) {
-          notify.info('Not adding ' + conflictFields.length + ' duplicate fields: ' + conflictFields.join(', '));
-        }
-      };
-
-      $scope.create = function () {
-        const params = {
-          indexPattern: $scope.indexPattern.id
-        };
-
-        kbnUrl.change(fieldCreatorPath, params);
-      };
-
-      $scope.edit = function (field) {
-        const params = {
-          indexPattern: $scope.indexPattern.id,
-          fieldName: field.name
-        };
-
-        kbnUrl.change(fieldEditorPath, params);
-      };
-
-      $scope.remove = function (field) {
-        const confirmModalOptions = {
-          confirmButtonText: 'Delete field',
-          onConfirm: () => { $scope.indexPattern.removeScriptedField(field.name); }
-        };
-        confirmModal(`Are you sure want to delete ${field.name}? This action is irreversible!`, confirmModalOptions);
-      };
+      $scope.$watchMulti([
+        '[]indexPattern.fields',
+        'fieldFilter',
+        'scriptedFieldLanguageFilter',
+      ], refreshRows);
     }
   };
 });

src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/source_filters_table.html

@@ -48,8 +48,8 @@ <h3 class="kuiTextTitle kuiVerticalRhythm">
     <paginated-table
       columns="columns"
       rows="rows"
-      link-to-top="true"
       per-page="perPage"
+      link-to-top="true"
       show-blank-rows="false"
     ></paginated-table>
   </div>