Skip to content
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

Merged

Conversation

weltenwort
Copy link
Member

@weltenwort weltenwort commented Aug 17, 2018

⚠️ This PR contains commits of prior unmerged PRs.

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 the logs 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 and remote slices. The local slice manages state that relates to the local ui state of the application while the remote slice manages state that is fetched from the server.

Each slice can export (through its index.ts file) a combination of

  • state type
  • initial state
  • a reducer
  • action creators
  • selectors
  • an epic

These are hierarchically composed in the store's actions.ts, epics.ts, reducer.ts and selectors.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-L16

Selectors 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 the logs directory. They have been reorganized to roughly correspond to the slices.

Local/Remote state cleanup

The remaining local visibleLogPosition state has been moved from logEntries to the local 'logPositionslice. Similarly, the visible log summary state has also been moved from the remotelogSummary slice to the local 'logPosition slice. Other configuration state from logSummary has been moved to the local logMinimap slice.

Initialization and cleanup via containers

The asChildFunctionRenderer helper, used in the creation of containers, has gained the onInitialize and onCleanup 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.

@weltenwort weltenwort added WIP Work in progress :Ingest UI Feature:Metrics UI Metrics UI feature loe:medium Medium Level of Effort labels Aug 17, 2018
@weltenwort weltenwort self-assigned this Aug 17, 2018
@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💔 Build Failed

@weltenwort weltenwort force-pushed the infra-ui-refactor-redux-store branch from e42e3e0 to a9dd5e5 Compare August 18, 2018 17:56
@elasticmachine
Copy link
Contributor

💔 Build Failed

@elasticmachine
Copy link
Contributor

💔 Build Failed

@weltenwort weltenwort added review and removed WIP Work in progress labels Aug 20, 2018
@weltenwort weltenwort requested a review from skh August 20, 2018 18:10
@elasticmachine
Copy link
Contributor

💔 Build Failed

@weltenwort weltenwort changed the title [Infra UI] [WIP] Make Redux store available for the whole app [Infra UI] [needs rebase] Make Redux store available for the whole app Aug 21, 2018
@weltenwort weltenwort force-pushed the infra-ui-refactor-redux-store branch from 284717e to 792f662 Compare August 21, 2018 11:02
@elasticmachine
Copy link
Contributor

💔 Build Failed

Copy link
Contributor

@skh skh left a 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<

Copy link
Contributor

Choose a reason for hiding this comment

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

If I'm not mistaken this results in a prefix x-pack/infra/remote/entries on actions related to log entries. Can we make it log_entries?

image

Copy link
Member Author

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

Copy link
Contributor

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<

Copy link
Contributor

Choose a reason for hiding this comment

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

See previous comments, I believe this results in a prefix x-pack/infra/remote/summary on action names, can we use log_summary?

image

@elasticmachine
Copy link
Contributor

💔 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).
@weltenwort weltenwort force-pushed the infra-ui-refactor-redux-store branch from 5f7d008 to 53c7c1b Compare August 22, 2018 15:18
@weltenwort weltenwort changed the title [Infra UI] [needs rebase] Make Redux store available for the whole app [Infra UI] Make Redux store available for the whole app Aug 22, 2018
@weltenwort weltenwort merged commit aede4da into elastic:feature-infra-ui Aug 22, 2018
@elasticmachine
Copy link
Contributor

💔 Build Failed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Metrics UI Metrics UI feature loe:medium Medium Level of Effort review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants