-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Infra UI] Make Redux store available for the whole app #22169
[Infra UI] Make Redux store available for the whole app #22169
Conversation
💔 Build Failed |
💔 Build Failed |
e42e3e0
to
a9dd5e5
Compare
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
284717e
to
792f662
Compare
💔 Build Failed |
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.
Looks good & works as expected, just a tiny comment about naming in the action prefixes. This doesn't necessarily have to be changed now.
@@ -22,7 +22,7 @@ export const loadEntriesActionCreators = createGraphqlOperationActionCreators< | |||
|
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.
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.
Indeed, good catch! I'll fix that and the other ones below.
@@ -27,7 +27,7 @@ export const loadMoreEntriesActionCreators = createGraphqlOperationActionCreator | |||
|
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.
See previous comments, can we use log_entries
?
@@ -22,7 +22,7 @@ export const loadSummaryActionCreators = createGraphqlOperationActionCreators< | |||
|
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.
💔 Build Failed |
The redux store and its slices now live in `public/store`. It contains two top-level entries `local` and `remote`. The `local` slice holds all the slices that represent local application state while the `remote` slice holds all the slices that contain data fetched from remote sources with their associated metadata (e.g. loading state).
5f7d008
to
53c7c1b
Compare
💔 Build Failed |
fixes #21850
New redux store location
The redux store is now located in
x-pack/plugin/infra/public/state
. It is not provided locally to just thelogs
page, but injected at the very top of the React hierarchy:https://github.com/elastic/kibana/blob/284717e7b4f6a4d7d702919d527beaf403510521/x-pack/plugins/infra/public/apps/start_app.tsx#L32-L38
New redux store structure
The store has been partitioned into
local
andremote
slices. Thelocal
slice manages state that relates to the local ui state of the application while theremote
slice manages state that is fetched from the server.Each slice can export (through its
index.ts
file) a combination ofThese are hierarchically composed in the store's
actions.ts
,epics.ts
,reducer.ts
andselectors.ts
. Slices must not know about their location in the store. Action creators and reducers are limited to their slice.Selectors are lifted to the parent hierarchy level (using 'globalizeSelectors()
) in the parent slice's
selectors.ts' file, e.g. https://github.com/elastic/kibana/blob/284717e7b4f6a4d7d702919d527beaf403510521/x-pack/plugins/infra/public/store/local/selectors.ts#L13-L16Selectors that span multiple slices can be implemented as shared selectors in a common ancestor of all depended upon slices, e.g.
https://github.com/elastic/kibana/blob/284717e7b4f6a4d7d702919d527beaf403510521/x-pack/plugins/infra/public/store/selectors.ts#L47-L66
Epics are only allowed to access the state via selectors declared in the dependency argument. The combined set of selectors that satisfies the dependencies of all composed epics is injected at the store root: https://github.com/elastic/kibana/blob/284717e7b4f6a4d7d702919d527beaf403510521/x-pack/plugins/infra/public/store/store.ts#L36-L45
Container Reorganization
Along with the store slice changes, the containers have been moved from the
logging_legacy
to thelogs
directory. They have been reorganized to roughly correspond to the slices.Local/Remote state cleanup
The remaining local
visibleLogPosition
state has been moved fromlogEntries
to the local 'logPositionslice. Similarly, the visible log summary state has also been moved from the remote
logSummaryslice to the local 'logPosition
slice. Other configuration state fromlogSummary
has been moved to the locallogMinimap
slice.Initialization and cleanup via containers
The
asChildFunctionRenderer
helper, used in the creation of containers, has gained theonInitialize
andonCleanup
handlers in its options. They allow for easy dispatching of actions as part of the containers lifecycle:https://github.com/elastic/kibana/blob/284717e7b4f6a4d7d702919d527beaf403510521/x-pack/plugins/infra/public/containers/logs/with_log_position.ts#L32-L34
This will become useful as more remote state needs to fetched and cleaned up on-demand. I expect this to gain a few more features as the app grows.