Introduce redux into dashboard #14518
Merged
Conversation
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
stacey-gammon
changed the title
stacey-gammon
added
Feature:Dashboard
w33ble
reviewed
Oct 23, 2017
| embeddables, | ||
| }); | ||
|
|
||
| export const getPanels = state => state.panels; |
There was a problem hiding this comment.
Management is doing this too, putting selectors in reducer files. Is that the plan going forward? Any reason you don't separate the two?
There was a problem hiding this comment.
I actually think we should split them out because I ran into a circular reference error, but didn't want to make that decision in this PR.
There was a problem hiding this comment.
Alright. We split it out in Canvas, but I think Cloud might not. It would probably be good to get consensus on the organization, but not something we need in this PR.
|
Tests are failing due to #14503 but otherwise seem to be passing. |
… loaded - we don't want a panel id from a different dashboard in the state tree on a fresh open.
discover was not returning a promise
…d loading results
…still use selectors
stacey-gammon
force-pushed
the
chore/dashboard-redux-clean-commits
branch
from
e49e710 to
1c4dbd5
Compare
|
Merging since tests passed and the original PR had two LGTMS and nothing was changed here, just the commits copied over. |
stacey-gammon
added a commit
to stacey-gammon/kibana
that referenced
this pull request
Oct 23, 2017
* Initial check in of introducing redux in dashboard * Use redux-actions and redux-thunks to reduce boilerplate * Make sure all panels are minimized from the start when a dashboard is loaded - we don't want a panel id from a different dashboard in the state tree on a fresh open. * Remove unused file * use classnames dependency instead of manual logic * First pass on selectors, handleActions, and more segmented reducers. * Fix bugs with selectors and reducers and add tests that would have caught them. * Fix issue plus tests discover was not returning a promise * Make expanding a panel purely a css modification which avoids all re-renders * Found another bug with initial state not being set correctly on a hard refresh * Remove check for change handlers now that the event handler bug is fixed * rename dashboardState => dashboard for reducers and redux state tree * Remove unnecessary top level describe in jest tests * Navigate back to landing page at the end of the newly added test suite * Fix lint errors * Stabilize flaky tests by waiting until saved object search is finished loading results * Don't leak subscriptions to the store. * use selectors to grab dashboard panel off state. * Remove use of getState in dispatcher to avoid circular reference and still use selectors * use spread over object.assign * No need to pass second param in when the input is simply returned as-is.
stacey-gammon
added a commit
that referenced
this pull request
Oct 24, 2017
* Initial check in of introducing redux in dashboard * Use redux-actions and redux-thunks to reduce boilerplate * Make sure all panels are minimized from the start when a dashboard is loaded - we don't want a panel id from a different dashboard in the state tree on a fresh open. * Remove unused file * use classnames dependency instead of manual logic * First pass on selectors, handleActions, and more segmented reducers. * Fix bugs with selectors and reducers and add tests that would have caught them. * Fix issue plus tests discover was not returning a promise * Make expanding a panel purely a css modification which avoids all re-renders * Found another bug with initial state not being set correctly on a hard refresh * Remove check for change handlers now that the event handler bug is fixed * rename dashboardState => dashboard for reducers and redux state tree * Remove unnecessary top level describe in jest tests * Navigate back to landing page at the end of the newly added test suite * Fix lint errors * Stabilize flaky tests by waiting until saved object search is finished loading results * Don't leak subscriptions to the store. * use selectors to grab dashboard panel off state. * Remove use of getState in dispatcher to avoid circular reference and still use selectors * use spread over object.assign * No need to pass second param in when the input is simply returned as-is.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
I pulled all the commits out of #14199 and into this new PR. Somewhere along the way I must have had a bad merge and updates on master were not getting pushed to my PR, so that the final change was showing unrelated flot/visualization updates.
Only way I could think of resolving this was to start fresh and copy the commits over.
From original PR description:
Introduces Redux state management for the react portion of dashboard, the "dashboard viewport". The top portion of dashboard - nav panels, filter bar, query, etc, are still all in angular. Eventually the goal is to replace all of those portions with react as well, and expand the state stored in redux.
Because there is still a large portion stored in angular, and dashboard currently uses AppState to manage that, as well as handle url changes, the DashboardStateManager handles keeping the redux store and the angular AppState in sync.
Unfortunately this does diminish the benefit of redux’s “single source of truth”. I think this can be handled once more of dashboard is in react, and with the introduction of react routing to handle URL changes. I decided for a first step, this was already a large PR, so did not want to take it any further.
I think this gives us a good way forward and provides benefits of clear state management, at least from the viewport downward.
Here is a diagram of how the new redux/angular state management interacts. It's still messy but at least the interaction is explainable.