diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html index bb46c2dc9b947cf..0da2528afb115a2 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html @@ -145,7 +145,7 @@ class="fields indexed-fields" > - + > diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/field_controls.html b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/field_controls.html deleted file mode 100644 index 794f1da2a7b79ff..000000000000000 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/field_controls.html +++ /dev/null @@ -1,19 +0,0 @@ -
- - - - - -
diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/indexed_fields_table/indexed_fields_table.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/indexed_fields_table/indexed_fields_table.js index a6c660998bdde0e..2f9cd2871f0ef87 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/indexed_fields_table/indexed_fields_table.js +++ b/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: () => ( +
+ {_.get($scope.indexPattern, ['fieldFormatMap', field.name, 'type', 'title'])} +
+ ), }, { render: renderBooleanForCondition(field.searchable), value: field.searchable @@ -141,21 +144,6 @@ uiModules.get('apps/management') value: excluded }, { render: () => { - let deleteButton; - - if (field.scripted) { - deleteButton = ( - - ); - } - return (
@@ -167,12 +155,9 @@ uiModules.get('apps/management') >
); - }, } ]; diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/scripted_fields_table.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/scripted_fields_table.js index 5887d00556f9365..1a89f53d56d1992 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/scripted_fields_table.js +++ b/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,19 +25,35 @@ 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 @@ -42,73 +61,74 @@ uiModules.get('apps/management') _.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: () => ( +
+ {_.escape(field.name)} +
+ ), + }, { + render: () => ( +
+ {field.lang} +
+ ), + }, { + render: () => ( +
+ {_.escape(field.script)} +
+ ), + }, { + render: () => ( +
+ {_.get($scope.indexPattern, ['fieldFormatMap', field.name, 'type', 'title'])} +
+ ), + }, { + render: () => { + let deleteButton; + + if (field.scripted) { + deleteButton = ( + + ); + } + + return ( +
+
+ + + + {deleteButton} +
+
+ ); + }, } ]; }); } - $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); } }; }); diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/controls.html b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/controls.html deleted file mode 100644 index 8e4cfc6cc33e5cb..000000000000000 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/controls.html +++ /dev/null @@ -1,31 +0,0 @@ -
- - - - - -
diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/filter.html b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/filter.html deleted file mode 100644 index e4817c992051329..000000000000000 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/filter.html +++ /dev/null @@ -1,12 +0,0 @@ -
- {{ filter.value }} - - -
diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/source_filters_table.html b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/source_filters_table.html index 7fdbdcffb429b30..7dcddf331535399 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/source_filters_table.html +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/source_filters_table.html @@ -48,8 +48,8 @@

diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/source_filters_table.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/source_filters_table.js index 959ad244a7fddf7..73e9eac5e3ab672 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/source_filters_table.js +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/source_filters_table.js @@ -1,21 +1,23 @@ +import React from 'react'; import { find, each, escape, invoke, size, without } from 'lodash'; import { uiModules } from 'ui/modules'; import { Notifier } from 'ui/notify/notifier'; import { FieldWildcardProvider } from 'ui/field_wildcard'; -import controlsHtml from './controls.html'; -import filterHtml from './filter.html'; import template from './source_filters_table.html'; import './source_filters_table.less'; +import { + RIGHT_ALIGNMENT, +} from '@elastic/eui'; + const notify = new Notifier(); uiModules.get('kibana') .directive('sourceFiltersTable', function (Private, $filter, confirmModal) { const angularFilter = $filter('filter'); const { fieldWildcardMatcher } = Private(FieldWildcardProvider); - const rowScopes = []; // track row scopes, so they can be destroyed as needed return { restrict: 'E', @@ -33,16 +35,20 @@ uiModules.get('kibana') $scope.perPage = 25; $scope.columns = [ { - title: 'filter' + title: 'filter', + text: 'Filter', }, { title: 'matches', + text: 'Matches', sortable: false, info: 'The source fields that match the filter.' }, { title: 'controls', - sortable: false + text: '', + sortable: false, + align: RIGHT_ALIGNMENT, } ]; @@ -53,9 +59,6 @@ uiModules.get('kibana') this.placeHolder = 'source filter, accepts wildcards (e.g., `user*` to filter fields starting with \'user\')'; $scope.$watchMulti([ '[]indexPattern.sourceFilters', '$parent.fieldFilter' ], () => { - invoke(rowScopes, '$destroy'); - rowScopes.length = 0; - if ($scope.indexPattern.sourceFilters) { $scope.rows = []; each($scope.indexPattern.sourceFilters, (filter) => { @@ -65,19 +68,98 @@ uiModules.get('kibana') if ($scope.$parent.fieldFilter && !angularFilter(matches, $scope.$parent.fieldFilter).length) { return; } - // compute the rows - const rowScope = $scope.$new(); - rowScope.filter = filter; - rowScopes.push(rowScope); + $scope.rows.push([ { - markup: filterHtml, - scope: rowScope - }, - size(matches) ? escape(matches.join(', ')) : 'The source filter doesn\'t match any known fields.', - { - markup: controlsHtml, - scope: rowScope + render: () => { + let content; + console.log('re-render', filter.value) + if (filter === this.editing) { + // TODO: Ensure value changes during onChange. + content = ( + { + console.log(e.target.value) + $scope.$apply(() => { + console.log('apply') + filter.value = e.target.value; + }); + }} + placeholder={this.placeHolder} + type="text" + required + /> + ); + } else { + content = {filter.value}; + } + + return ( +
+ {content} +
+ ); + }, + }, { + render: () => { + return ( +
+ { + size(matches) + ? escape(matches.join(', ')) + : The source filter doesn\'t match any known fields. + } +
+ ); + }, + }, { + render: () => { + let button; + + if (filter === this.editing) { + button = ( + + ); + } else { + // TODO: Are these onClicks handled correctly? Do we depend upon + // $scope.$digest being triggered? + button = ( + + ); + } + + return ( +
+ {button} + + +
+ ); + }, } ]); });