refact: refact list page and detail page, simplify detail routes
Created by: leoendless
What type of PR is this? /kind feature
What this PR does / why we need it:
1. A HOC withList
to make list page simple.
A list page now contains a banner, a table, and actions. Variables such as store, module, and name are required when using with withList
.
@withList({
store: new WorkloadStore('deployments'),
module: 'deployments',
name: 'Workload',
})
export default class Deployments extends React.Component {
...
What withList
does ?
- process banner and table props , then pass them to the wrapped react component.
- fetch list data when componentDidMount.
- subscribe routing change and fetch list data.
- watching resource websocket events if there is one.
- providing tool functions to the wrapped react component to build table columns.
2. Extract resource actions to a global object.
Extract resource actions can reuse code logic between list pages and detail pages. Common actions like resource.baseinfo.edit
, resource.yaml.edit
, resource.delete
can reuse in any k8s resource pages.
Use an object in rootStore to hold the actions, which can be triggered with rootStore.trigger(actionId, props)
.
These changes make convenient to core-plugins system. Plugins can cover actions of core system or other plugins.
3. A detail page refactor to make detail page more flexible.
-
core/containers/Base/Page
providing layout and mobx store provider for detail page. More simple thancore/containers/Base/index
- now detail routes will be in resource folders like
clusters/containers/Workload/Deployments/Detail/routes.js
- Reuse the actions in the list page.