From 15a47a73eb82468221beb770fd20bea85adf261d Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 20 Nov 2017 12:21:48 -0800 Subject: [PATCH] Update Scripted Fields and Source Filters tables to use new paginated table. Deleted a bunch of stuff which may actually be important. --- .../edit_index_pattern.html | 4 +- .../edit_index_pattern/field_controls.html | 19 -- .../indexed_fields_table.js | 49 ++--- .../scripted_fields_table/date_scripts.js | 26 --- .../scripted_fields_table.js | 171 ++++++++++-------- .../source_filters_table/controls.html | 31 ---- .../source_filters_table/filter.html | 12 -- .../source_filters_table.html | 2 +- .../source_filters_table.js | 119 ++++++++++-- .../public/paginated_table/paginated_table.js | 1 + 10 files changed, 212 insertions(+), 222 deletions(-) delete mode 100644 src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/field_controls.html delete mode 100644 src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/date_scripts.js delete mode 100644 src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/controls.html delete mode 100644 src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/source_filters_table/filter.html 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 bb46c2dc9b947..0da2528afb115 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 794f1da2a7b79..0000000000000 --- 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 a6c660998bdde..2f9cd2871f0ef 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/date_scripts.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/date_scripts.js deleted file mode 100644 index 559bb2a31a806..0000000000000 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/date_scripts.js +++ /dev/null @@ -1,26 +0,0 @@ -import _ from 'lodash'; - -export function dateScripts(indexPattern) { - const dateScripts = {}; - const scripts = { - __dayOfMonth: 'dayOfMonth', - __dayOfWeek: 'dayOfWeek', - __dayOfYear: 'dayOfYear', - __hourOfDay: 'hourOfDay', - __minuteOfDay: 'minuteOfDay', - __minuteOfHour: 'minuteOfHour', - __monthOfYear: 'monthOfYear', - __weekOfYear: 'weekOfWeekyear', - __year: 'year' - }; - - _.each(indexPattern.fields.byType.date, function (field) { - if (field.indexed) { - _.each(scripts, function (value, key) { - dateScripts[field.name + '.' + key] = 'doc["' + field.name + '"].date.' + value; - }); - } - }); - - return dateScripts; -} 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 5887d00556f93..8ba4fad55e73c 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,40 +1,52 @@ +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, $filter, confirmModal, chrome) { const filter = $filter('filter'); - const notify = new Notifier(); - return { restrict: 'E', template, scope: true, link: function ($scope) { - - const fieldCreatorPath = '/management/kibana/indices/{{ indexPattern }}/scriptedField'; - const fieldEditorPath = fieldCreatorPath + '/{{ fieldName }}'; - $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 +54,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 8e4cfc6cc33e5..0000000000000 --- 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 e4817c9920513..0000000000000 --- 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 7fdbdcffb429b..7dcddf3315353 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 959ad244a7fdd..fcc67f4a07311 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 { find, each, escape, invoke, size, without } from 'lodash'; +import React from 'react'; +import { find, each, escape, 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,95 @@ 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; + if (filter === this.editing) { + // TODO: Ensure value changes during onChange. + content = ( + { + $scope.$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} + + +
+ ); + }, } ]); }); diff --git a/src/ui/public/paginated_table/paginated_table.js b/src/ui/public/paginated_table/paginated_table.js index af1708795649c..40eea692c0ef7 100644 --- a/src/ui/public/paginated_table/paginated_table.js +++ b/src/ui/public/paginated_table/paginated_table.js @@ -260,6 +260,7 @@ export class PaginatedTable extends Component { isOpen={this.state.isPageSizePopoverOpen} closePopover={this.closePageSizePopover} panelPaddingSize="none" + anchorPosition="upLeft" withTitle >