[Management] Scripted fields table in React #16604
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,6 @@ | ||
| import _ from 'lodash'; | ||
| import './index_header'; | ||
| import './indexed_fields_table'; | ||
| import './scripted_field_editor'; | ||
| import './source_filters_table'; | ||
| import { KbnUrlProvider } from 'ui/url'; | ||
|
|
@@ -11,6 +10,8 @@ import uiRoutes from 'ui/routes'; | |
| import { uiModules } from 'ui/modules'; | ||
| import template from './edit_index_pattern.html'; | ||
|
|
||
| import { renderScriptedFieldsTable, destroyScriptedFieldsTable } from './scripted_fields_table'; | ||
|
|
||
| uiRoutes | ||
| .when('/management/kibana/indices/:indexPatternId', { | ||
| template, | ||
|
|
@@ -79,6 +80,7 @@ uiModules.get('apps/management') | |
|
|
||
| $scope.changeTab = function (obj) { | ||
| $state.tab = obj.index; | ||
| $scope.tryToRenderScriptedFieldsTable(); | ||
| $state.save(); | ||
| }; | ||
|
|
||
|
|
@@ -140,4 +142,45 @@ uiModules.get('apps/management') | |
| $scope.indexPattern.timeFieldName = field.name; | ||
| return $scope.indexPattern.save(); | ||
| }; | ||
|
|
||
| $scope.tryToRenderScriptedFieldsTable = function () { | ||
| if ($state.tab === 'scriptedFields') { | ||
|
There was a problem hiding this comment. This file and a couple of others are just so bound up in Angular. Since we are supposed to be running away from Angular anyway, I wonder if it makes sense to take this Reactification work farther ? There was a problem hiding this comment. Yea I agree, but I think the focus should be on the tables for now to ensure those can go out sooner rather than later. Once the tables are in, I want to take a pass on the shell part ( There was a problem hiding this comment. I guess I just worry about people looking at these squashed merged changes and taking them as patterns. There was a problem hiding this comment. And maybe there are bugs in all this glue code. Just seems better to get out of this to me. There was a problem hiding this comment. Yea I don't want that to happen, but converting this to React is probably more work than it seems because this is a shell that renders angular directives and getting those to work within a React shell seems complicated too. What if I renamed the variables/functions in here to names that directly state to not use this and it's just a stopgap? |
||
| $scope.$$postDigest($scope.renderScriptedFieldsTable); | ||
| } else { | ||
| destroyScriptedFieldsTable(); | ||
| } | ||
| }; | ||
|
|
||
| $scope.renderScriptedFieldsTable = function () { | ||
|
There was a problem hiding this comment. I think it makes sense to redefine this as a local function instead of a scope method (unless it needs to be on scope, but I don't think it does), and to move the logic from This makes sense to me since it mirrors how this will be structured once we migrate to React. The owner of the So it would be: function renderScriptedFieldsTable() {
const node = document.getElementById(DOM_ELEMENT_ID);
if (!node) {
return;
}
render(
<ScriptedFieldsTable
indexPattern={$scope.indexPattern}
fieldFilter={$scope.fieldFilter}
scriptedFieldLanguageFilter={$scope.scriptedFieldLanguageFilter}
helpers={{
redirectToRoute: (obj, route) => {
$scope.kbnUrl.redirectToRoute(obj, route);
$scope.$apply();
},
getRouteHref: (obj, route) => $scope.kbnUrl.getRouteHref(obj, route),
}}
/>,
node,
);
} |
||
| renderScriptedFieldsTable( | ||
| $scope.indexPattern, | ||
| $scope.fieldFilter, | ||
| $scope.scriptedFieldLanguageFilter, | ||
| { | ||
| redirectToRoute: (obj, route) => { | ||
| $scope.kbnUrl.redirectToRoute(obj, route); | ||
| $scope.$apply(); | ||
| }, | ||
| getRouteHref: (obj, route) => $scope.kbnUrl.getRouteHref(obj, route), | ||
| } | ||
| ); | ||
| }; | ||
|
|
||
| $scope.$watch('fieldFilter', () => { | ||
| if ($scope.fieldFilter !== undefined && $state.tab === 'scriptedFields') { | ||
| $scope.renderScriptedFieldsTable(); | ||
| } | ||
| }); | ||
|
|
||
| $scope.$watch('scriptedFieldLanguageFilter', () => { | ||
| if ($scope.scriptedFieldLanguageFilter !== undefined && $state.tab === 'scriptedFields') { | ||
| $scope.renderScriptedFieldsTable(); | ||
| } | ||
| }); | ||
|
|
||
| $scope.$on('$destory', () => { | ||
| destroyScriptedFieldsTable(); | ||
| }); | ||
|
|
||
| $scope.tryToRenderScriptedFieldsTable(); | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,290 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`ScriptedFieldsTable should filter based on the lang filter 1`] = ` | ||
| <ScriptedFieldsTable | ||
| helpers={ | ||
| Object { | ||
| "getRouteHref": [Function], | ||
| "redirectToRoute": [Function], | ||
| } | ||
| } | ||
| indexPattern={ | ||
| Object { | ||
| "getScriptedFields": [Function], | ||
| } | ||
| } | ||
| scriptedFieldLanguageFilter="painless" | ||
| > | ||
| <div> | ||
| <header /> | ||
| <call-outs | ||
| deprecatedLangsInUse={ | ||
| Array [ | ||
| "somethingElse", | ||
| ] | ||
| } | ||
| painlessDocLink="painlessDocs" | ||
| /> | ||
| <eui-button | ||
| data-test-subj="addScriptedFieldLink" | ||
| href={undefined} | ||
| > | ||
| Add Scripted Field | ||
| </eui-button> | ||
| <eui-spacer | ||
| size="l" | ||
| /> | ||
| <Table | ||
| deleteField={[Function]} | ||
| editField={[Function]} | ||
| indexPattern={ | ||
| Object { | ||
| "getScriptedFields": [Function], | ||
| } | ||
| } | ||
| model={ | ||
| Object { | ||
| "criteria": Object { | ||
| "page": Object { | ||
| "index": 0, | ||
| "size": 10, | ||
| }, | ||
| "sort": Object { | ||
| "direction": "asc", | ||
| "field": "name", | ||
| }, | ||
| }, | ||
| "data": Object { | ||
| "records": Array [ | ||
| Object { | ||
| "lang": "painless", | ||
| "name": "ScriptedField", | ||
| "script": "x++", | ||
| }, | ||
| Object { | ||
| "lang": "painless", | ||
| "name": "JustATest", | ||
| "script": "z++", | ||
| }, | ||
| ], | ||
| "totalRecordCount": 2, | ||
| }, | ||
| } | ||
| } | ||
| onDataCriteriaChange={[Function]} | ||
| > | ||
| table | ||
| </Table> | ||
| </div> | ||
| </ScriptedFieldsTable> | ||
| `; | ||
|
|
||
| exports[`ScriptedFieldsTable should filter based on the query bar 1`] = ` | ||
| <ScriptedFieldsTable | ||
| fieldFilter="Just" | ||
| helpers={ | ||
| Object { | ||
| "getRouteHref": [Function], | ||
| "redirectToRoute": [Function], | ||
| } | ||
| } | ||
| indexPattern={ | ||
| Object { | ||
| "getScriptedFields": [Function], | ||
| } | ||
| } | ||
| > | ||
| <div> | ||
| <header /> | ||
| <call-outs | ||
| deprecatedLangsInUse={Array []} | ||
| painlessDocLink="painlessDocs" | ||
| /> | ||
| <eui-button | ||
| data-test-subj="addScriptedFieldLink" | ||
| href={undefined} | ||
| > | ||
| Add Scripted Field | ||
| </eui-button> | ||
| <eui-spacer | ||
| size="l" | ||
| /> | ||
| <Table | ||
| deleteField={[Function]} | ||
| editField={[Function]} | ||
| indexPattern={ | ||
| Object { | ||
| "getScriptedFields": [Function], | ||
| } | ||
| } | ||
| model={ | ||
| Object { | ||
| "criteria": Object { | ||
| "page": Object { | ||
| "index": 0, | ||
| "size": 10, | ||
| }, | ||
| "sort": Object { | ||
| "direction": "asc", | ||
| "field": "name", | ||
| }, | ||
| }, | ||
| "data": Object { | ||
| "records": Array [ | ||
| Object { | ||
| "lang": "painless", | ||
| "name": "JustATest", | ||
| "script": "z++", | ||
| }, | ||
| ], | ||
| "totalRecordCount": 1, | ||
| }, | ||
| } | ||
| } | ||
| onDataCriteriaChange={[Function]} | ||
| > | ||
| table | ||
| </Table> | ||
| </div> | ||
| </ScriptedFieldsTable> | ||
| `; | ||
|
|
||
| exports[`ScriptedFieldsTable should render normally 1`] = ` | ||
| <ScriptedFieldsTable | ||
| helpers={ | ||
| Object { | ||
| "getRouteHref": [Function], | ||
| "redirectToRoute": [Function], | ||
| } | ||
| } | ||
| indexPattern={ | ||
| Object { | ||
| "getScriptedFields": [Function], | ||
| } | ||
| } | ||
| > | ||
| <div> | ||
| <header /> | ||
| <call-outs | ||
| deprecatedLangsInUse={Array []} | ||
| painlessDocLink="painlessDocs" | ||
| /> | ||
| <eui-button | ||
| data-test-subj="addScriptedFieldLink" | ||
| href={undefined} | ||
| > | ||
| Add Scripted Field | ||
| </eui-button> | ||
| <eui-spacer | ||
| size="l" | ||
| /> | ||
| <Table | ||
| deleteField={[Function]} | ||
| editField={[Function]} | ||
| indexPattern={ | ||
| Object { | ||
| "getScriptedFields": [Function], | ||
| } | ||
| } | ||
| model={ | ||
| Object { | ||
| "criteria": Object { | ||
| "page": Object { | ||
| "index": 0, | ||
| "size": 10, | ||
| }, | ||
| "sort": Object { | ||
| "direction": "asc", | ||
| "field": "name", | ||
| }, | ||
| }, | ||
| "data": Object { | ||
| "records": Array [ | ||
| Object { | ||
| "lang": "painless", | ||
| "name": "ScriptedField", | ||
| "script": "x++", | ||
| }, | ||
| Object { | ||
| "lang": "painless", | ||
| "name": "JustATest", | ||
| "script": "z++", | ||
| }, | ||
| ], | ||
| "totalRecordCount": 2, | ||
| }, | ||
| } | ||
| } | ||
| onDataCriteriaChange={[Function]} | ||
| > | ||
| table | ||
| </Table> | ||
| </div> | ||
| </ScriptedFieldsTable> | ||
| `; | ||
|
|
||
| exports[`ScriptedFieldsTable should show a message if there are no scripted fields 1`] = ` | ||
| <ScriptedFieldsTable | ||
| helpers={ | ||
| Object { | ||
| "getRouteHref": [Function], | ||
| "redirectToRoute": [Function], | ||
| } | ||
| } | ||
| indexPattern={ | ||
| Object { | ||
| "getScriptedFields": [Function], | ||
| } | ||
| } | ||
| > | ||
| <div> | ||
| <header /> | ||
| <call-outs | ||
| deprecatedLangsInUse={Array []} | ||
| painlessDocLink="painlessDocs" | ||
| /> | ||
| <eui-button | ||
| data-test-subj="addScriptedFieldLink" | ||
| href={undefined} | ||
| > | ||
| Add Scripted Field | ||
| </eui-button> | ||
| <eui-spacer | ||
| size="l" | ||
| /> | ||
| <Table | ||
| deleteField={[Function]} | ||
| editField={[Function]} | ||
| indexPattern={ | ||
| Object { | ||
| "getScriptedFields": [Function], | ||
| } | ||
| } | ||
| model={ | ||
| Object { | ||
| "criteria": Object { | ||
| "page": Object { | ||
| "index": 0, | ||
| "size": 10, | ||
| }, | ||
| "sort": Object { | ||
| "direction": "asc", | ||
| "field": "name", | ||
| }, | ||
| }, | ||
| "data": Object { | ||
| "records": Array [], | ||
| "totalRecordCount": 0, | ||
| }, | ||
| } | ||
| } | ||
| onDataCriteriaChange={[Function]} | ||
| > | ||
| table | ||
| </Table> | ||
| <eui-text> | ||
| No scripted fields found. | ||
| </eui-text> | ||
| </div> | ||
| </ScriptedFieldsTable> | ||
| `; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does this need to be a scope method? Can we just make it a local function?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And a minor nit: can we rename it to
updateScriptedFieldsTab? I wasn't sure how to intuit its role from the word "try" in the name.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure, I'll change it