Skip to content

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 than core/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.

合并请求报告

加载中