Skip to content

[Console] Toward a more reactive data flow model#45627

Merged
jloleysens merged 7 commits intoelastic:masterfrom
jloleysens:refactor_console_app_data_flow
Sep 16, 2019
Merged

[Console] Toward a more reactive data flow model#45627
jloleysens merged 7 commits intoelastic:masterfrom
jloleysens:refactor_console_app_data_flow

Conversation

@jloleysens
Copy link
Copy Markdown
Contributor

Summary

This PR is a continuation of #43346

It specifically focusses on refactoring items that were not included in the initial migration to NP Ready. Specifically:

  • app.js and legacy initialisation
  • input.js initialisation logic
  • output.js initialisation logic

A lot of the logic for managing editor state was still in the quarantined section of the code base. This PR proposes an alternate model where we use React's context to drive UI updates.

How to review

There are two primary ways that this PR should be reviewed:

  1. Does it break any existing user functionality
    • Check that your settings are all still in place
    • Check that your history is still intact
    • Any other UI/UX anomalies around sending requests and UI components not updating
  2. Read through the refactor
    • A lot of the driving logic is still considered legacy but now Editor UI updates are driven through a dispatch model
    • Review what is being done in history.ts service (i.e., is it sensible to opt out of the React model for this more special case or is there another solution?)
    • Editor instances have specifically been moved into a new stateful component called EditorRegistry. This is a stateful singleton where editor instances are stored outside of their respective components. The thinking here is that ace specific APIs should be kept in legacy.
    • Editor state (i.e., text values) are not stored inside of context state. The thinking here is that we would trigger to many unnecessary re-renders. Is this the correct path?

Introduced EditorContext with useReducer pattern (Read & Action)
Refactored old app startup ('./app.js')
Refactored most of input.js
Removed editor instances from services
@jloleysens jloleysens added Feature:Console Dev Tools Console Feature v8.0.0 Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more t// release_note:skip Skip the PR/issue when compiling release notes v7.5.0 labels Sep 13, 2019
@jloleysens jloleysens requested a review from sebelga September 13, 2019 12:13
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/es-ui

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

Copy link
Copy Markdown
Contributor

@sebelga sebelga left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Thanks for making those changes, it already looks much better. I made a few comments in the code. Tested locally and did not see any regression.

onEditorReady({ editor: editorInstanceRef.current, element: editorRef.current! });
editorInstanceRef.current = initializeInput($editor, $actions);

if (previousStateLocation === 'stored') {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure previousStateLocation is yet used, do we need it for now? In which scenario is the loadRemoteState() called?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep it's not being used currently. It has been ported over from pre-existing functionality (where it looks like it was also not used, but has tests written for it).

While still trying to figure out where this was used I would like to keep this for now.

@jloleysens
Copy link
Copy Markdown
Contributor Author

@elasticmachine merge upstream

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

…ole_app_data_flow

* 'master' of github.com:elastic/kibana:
  [Console] Fix leaky mappings subscription (elastic#45646)
  TypeScriptify index_patterns/index_patterns/flatten_hit.js (elastic#45269)

# Conflicts:
#	src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx
#	src/legacy/core_plugins/console/public/quarantined/src/app.js
@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@jloleysens jloleysens merged commit 07a4f27 into elastic:master Sep 16, 2019
@jloleysens jloleysens deleted the refactor_console_app_data_flow branch September 16, 2019 15:23
jloleysens added a commit to jloleysens/kibana that referenced this pull request Sep 30, 2019
* First steps toward editor context (code not working here!)

* WiP, I broke some things

* Initial refactor to more react-like data flow
Introduced EditorContext with useReducer pattern (Read & Action)
Refactored old app startup ('./app.js')
Refactored most of input.js
Removed editor instances from services

* Clean up

* Better naming for es request callback
jloleysens added a commit that referenced this pull request Sep 30, 2019
* First steps toward editor context (code not working here!)

* WiP, I broke some things

* Initial refactor to more react-like data flow
Introduced EditorContext with useReducer pattern (Read & Action)
Refactored old app startup ('./app.js')
Refactored most of input.js
Removed editor instances from services

* Clean up

* Better naming for es request callback
@jloleysens jloleysens mentioned this pull request Dec 11, 2019
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature:Console Dev Tools Console Feature release_note:skip Skip the PR/issue when compiling release notes Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more t// v7.5.0 v8.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants