scripted fields preview and validate script before saving#20746
scripted fields preview and validate script before saving#20746nreese merged 19 commits intoelastic:masterfrom
Conversation
💔 Build Failed |
* Move previewed results into flyout. Execute script as soon as the tab is selected. * Format error in a danger callout.
💔 Build Failed |
💔 Build Failed |
|
This also fixes #5088 |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
|
This also partially fixes #14546 |
💔 Build Failed |
💔 Build Failed |
💚 Build Succeeded |
| <h3>Preview results</h3> | ||
| <p> | ||
| Run your script to preview the first 10 results. You can also select some | ||
| additional fields to include in your results to gain more context. |
There was a problem hiding this comment.
would be nice to clarify this a little bit. initially, I thought that adding additional fields somehow affected my actual script, but they are only shown as part of the preview.
not sure if there's value, but maybe we can also add a "Show query" link that displays the request, which will include the additional _source fields
There was a problem hiding this comment.
How about this:
Run your script to preview the first 10 results. You can also select some
additional fields to include in each result to help tell your results apart.
|
How did you produce those console warnings? I am unable to re-create them |
|
@nreese Click 'Edit' on an existing field (regular field, not scripted field). You should see the console errors right away. If not, refresh the edit page. I should have tried to replicate with my original review, since it took me a little while to find it again 😄 |
💚 Build Succeeded |
| isVisible={field.scripted && showScriptingHelp} | ||
| onClose={this.hideScriptingHelp} | ||
| /> | ||
| {scriptDisabledCallout} |
There was a problem hiding this comment.
I'd love to see this moved out to a separate renderScriptingPanels() method or similar, which can then check field.scripted and return these components, or null. then this render method can avoid the let vars and use {this.renderScriptingPanels()}
💔 Build Failed |
| const { field, hasScriptError } = this.state; | ||
| const isInvalid = !field.script || !field.script.trim() || hasScriptError; | ||
| const errorMsg = hasScriptError | ||
| ? 'Script is invalid. View script preview for details' |
There was a problem hiding this comment.
You can wrap this in a span with a test subject selector for use in tests:
<span data-test-subj="invalidScriptError">Script is invalid. View script preview for details.</span>| await PageObjects.settings.setScriptedFieldScript(`doc['iHaveNoClosingTick].value`); | ||
| await PageObjects.settings.clickSaveScriptedField(); | ||
| await retry.try(async () => { | ||
| const formErrorExists = await find.existsByDisplayedByCssSelector('.euiFormErrorText'); |
There was a problem hiding this comment.
Then we can find the error with the test subject selector instead of the className.
| <EuiFormRow | ||
| label="Script" | ||
| helpText={(<EuiLink onClick={this.showScriptingHelp}>Scripting help</EuiLink>)} | ||
| helpText={( |
There was a problem hiding this comment.
We can remove this and instead have renderScript return the help as a paragraph, to give it a bit more visual prominence:
return field.scripted ? (
<Fragment>
<EuiFormRow
label="Script"
isInvalid={isInvalid}
error={isInvalid ? errorMsg : null}
>
<EuiTextArea
value={field.script}
data-test-subj="editorFieldScript"
onChange={this.onScriptChange}
isInvalid={isInvalid}
/>
</EuiFormRow>
<EuiFormRow>
<EuiText>
Access fields with <code>doc['some_field'].value</code>. You can also{' '}
<a onClick={this.showScriptingHelp} data-test-subj="scriptedFieldsHelpLink">
get help with the syntax and preview the results of your script
</a>.
</EuiText>
</EuiFormRow>
</Fragment>
) : null;There was a problem hiding this comment.
Unfortunately EuiText makes that link keyboard-inaccessible. Here's new code which will make the link keyboard-accessible.
return field.scripted ? (
<Fragment>
<EuiFormRow
label="Script"
isInvalid={isInvalid}
error={isInvalid ? errorMsg : null}
>
<EuiTextArea
value={field.script}
data-test-subj="editorFieldScript"
onChange={this.onScriptChange}
isInvalid={isInvalid}
/>
</EuiFormRow>
<EuiFormRow>
<Fragment>
<EuiText>Access fields with <code>doc['some_field'].value</code>.</EuiText>
<br />
<EuiLink onClick={this.showScriptingHelp} data-test-subj="scriptedFieldsHelpLink">
Get help with the syntax and preview the results of your script.
</EuiLink>
</Fragment>
</EuiFormRow>
</Fragment>
) : null;It does affect the formatting though.
💚 Build Succeeded |
|
jenkins, test this |
💚 Build Succeeded |
|
I would love to take advantage of this feature, but the index I'm using includes several log files, and running on the first 10 entries doesn't get to the log file I need. It would be great if I could add a filter so I can test on the right log entries. |
|
@malcolmm83 There is a community PR open that adds filtering to scripted fields preview, #44220. |




fixes #19504, #11804
This PR adds the ability to run scripted fields in the script edit view that allows the user to view the results and see if the script works as intended. Users can select additional fields to view in the preview to provide document value context.
And the request generated to preview the results