baha/skyline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Add en docs

Browse Source 
Add en docs

Change-Id: I7c83339b1000f09a2b1812a5150c4a173180b488
This commit is contained in:
zhuyue 2021-07-05 10:15:34 +08:00
parent 781d751722
commit 5b4d3c6fa1
14 changed files with 2368 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1047
docs/en/develop/3-10-FormItem-introduction.md Normal file
View File

File diff suppressed because it is too large Load Diff

141
docs/en/develop/3-11-Action-introduction.md Normal file
View File

@ -0,0 +1,141 @@
English | [简体中文](/docs/zh/develop/3-11-Action-introduction.md)
# Usage
- Configure all the actions corresponding to resources
![Action](/docs/zh/develop/images/form/action.png)
- After writing the corresponding configuration, the action button will be displayed in the corresponding position of resource list page.
# Code location
- `pages/xxxx/containers/XXXX/actions/index.jsx`
# How to use
- Return an object, includes `primaryAction`, `batchAction`, `rowAction`
- Take network as an example `src/pages/network/containers/Network/actions/index.jsx` :
- The primary action is `CreateNetwork`
- The batch action is `DeleteAction`
- The row actions are `Edit`, `CreateSubnet`, `DeleteAction`
```javascript
import CreateNetwork from './CreateNetwork';
import CreateSubnet from './CreateSubnet';
import DeleteAction from './Delete';
import Edit from './Edit';
const actionConfigs = {
rowActions: {
firstAction: Edit,
moreActions: [
{
action: CreateSubnet,
},
{
action: DeleteAction,
},
],
},
batchActions: [DeleteAction],
primaryActions: [CreateNetwork],
};
export default actionConfigs;
```
- Configure the `actionConfigs` in the resource list page.
- Take network as an example `src/pages/network/containers/Network/ProjectNetwork.jsx` :
```javascript
import actionConfigs from './actions';
get actionConfigs() {
return actionConfigs;
}
```
## `primaryActions` button configuration
- Return a list of components
- If there is no primary button, you can set it to `null` or` [] `
- If it is not operational(For example, insufficient permissions), it will automatically hide
## `batchActions` button configuration
- Return a list of components
- If there is no batch button, you can set it to `null` or` [] `
- If it is not operational(For example, insufficient permissions), it will automatically hide
## `rowActions` button configuration
- Return an object, includes the components that `firstAction`/`moreActions` correspond to.
- It can return `{}`
- `firstAction` is the first action button in row.
- If not operational, will be disabled.
- It can be a component.
- It can be `null`,
- Take `SystemInfo - network` as an example `src/pages/configuration/containers/SystemInfo/NeutronAgent/actions/index.jsx` :
```javascript
import Enable from './Enable';
import Disable from './Disable';
const actionConfigs = {
rowActions: {
firstAction: null,
moreActions: [
{
action: Enable,
},
{
action: Disable,
},
],
},
batchActions: [],
primaryActions: [],
};
export default actionConfigs;
```
- `moreActions`
- The component under `more` action button
- Action list
- If the action is not operational, it will be hidden
- Supports two types of configurations, corresponding to different display schemes
- Each item is an object include `action` attribute
![volume-action](/docs/zh/develop/images/form/volume-action.png)
- Each item is an object include `title`, `actions` attributes
![instance-action](/docs/zh/develop/images/form/instance-action.png)
- Take instance actions as an example `src/pages/compute/containers/Instance/actions/index.jsx` :
```javascript
const statusActions = [
StartAction,
StopAction,
LockAction,
UnlockAction,
RebootAction,
SoftRebootAction,
SuspendAction,
ResumeAction,
PauseAction,
UnpauseAction,
Shelve,
Unshelve,
];
const actionConfigs = {
rowActions: {
firstAction: Console,
moreActions: [
{
title: t('Instance Status'),
actions: statusActions,
},...}}
```

110
docs/en/develop/3-12-Menu-introduction.md Normal file
View File

@ -0,0 +1,110 @@
English | [简体中文](/docs/zh/develop/3-12-Menu-introduction.md)
# Usage
- Jump to the corresponding page after click
- Configuration of menu item on the left side of the console platform
![console-platform](/docs/zh/develop/images/menu/console-menu.png)
- Configuration of menu item on the left side of the management platform
![management-platform](/docs/zh/develop/images/menu/admin-menu.png)
- Support first-level menu with icon
- Support secondary menu expand
- Support menu item selected automatically switch after route change
- Support for automatic processing of breadcrumbs in the right side
# Code location
- Console platform menu configuration `src/layouts/menu.jsx`
- Management platform menu configuration `src/layouts/admin-menu.jsx`
# How to use
- The menu configuration in console and management platform are the same structure
- Return a `renderMenu` function which return a configuration list
## first-level menu configuration
- `path`
- URL
- `name`
- Name of route
- Name of menu item in menu list
- Name corresponding to the first level menu in breadcrumbs
- `key`
- ID of the route
- Unique
- `icon`
- the icon of menu
- When the menu is fully expanded, the icon and name are displayed.
- When the menu is folded, only the icon is displayed.
- `hasBreadcrumb`
- Whether to show breadcrumbs
- Default is `true`
- Take `home page` as an example: `hasBreadcrumb: false`
- `hasChildren`
- Whether the first-level menu contains a submenu
- Default is `true`
- First-level menu may not contain a submenu. For example `home page`.
```javascript
{
path: '/base/overview',
name: t('Home'),
key: '/home',
icon: <HomeOutlined />,
hasBreadcrumb: false,
hasChildren: false,
}
```
- First-level menu default contains submenu. For example `compute page`.
```javascript
{
path: '/compute',
name: t('Compute'),
key: '/compute',
icon: <DesktopOutlined />,
children: [...]
}
```
## Submenu configuration
- Submenu is configured in the `children` of first-level menu.
- Pages that do not need to be displayed in the menu, such as detail page, create page, are configured in the `children` of the submenu.
- Take flavor as an example
```javascript
{
path: '/compute/flavor',
name: t('Flavor'),
key: '/compute/flavor',
level: 1,
children: [
{
path: /^\/compute\/flavor\/detail\/.[^/]+$/,
name: t('Flavor Detail'),
key: 'flavor-detail',
level: 2,
},
],
},
```
- `path`
- Route corresponding to the menu
- `name`
- name of menu
- Name of menu item in menu list
- Name in breadcrumbs
- `key`
- ID of menu
- Unique
- `level`
- submenu correspond to `level=1`
- `children` in submenu correspond to `level=2`

72
docs/en/develop/3-13-Route-introduction.md Normal file
View File

@ -0,0 +1,72 @@
English | [简体中文](/docs/zh/develop/3-13-Route-introduction.md)
# Usage
- Pages that need to display independently should configure route
- According to the needs of the product, the page under submenu needs to display in page, for example `compute - instance`.
- Resource list page
- For example, instance list page.
- Note that the relevant resource listings under the details page does not need to be configured
- Resource detail page
- For example, instance detail page.
- Form that need whole page to show
- For example, create instance page.
- Some menus have only first-level page, such as `Home`, you also need to configure routing
# How to use
## The submenu corresponds to the route
- According to the requirements in the [catalog introduction](2-catalog-introduction.md), each first-level menu page has a separate folder under `pages`, the `containers` folder in it is used to place the submenu page code, `routes` folder is used to configure the route.
- Configuration is in `pages/xxxx/routes/index.js`
- The route configuration needs to follow a fixed format, see `src/pages/compute/routes/index.js`
- List
- Each child in the list, should follow:
- `path`, first-level menu corresponding name, for example nova compute use `compute`.
- `component`, layout components
- Pages about `auth`, for example `login`, use `src/layouts/User/index.jsx`
- Pages show after login, for example `instance`, use `src/layouts/Base/index.jsx`
- The layout automatically handles the display of the `menu item`, the right side of the content `header`, `breadcrumber`, etc.
- `routes`, The main content of the configuration is an array.
- Take compute route as an example `src/pages/compute/routes/index.js` :
```javascript
{ path: `${PATH}/instance`, component: Instance, exact: true },
```
- `path`, Path corresponding to each full page, for example `compute/instance`
- `component`, the component corresponding to page, such as component under `containers`
- For resource-type pages, generally configured
- List page, details page, complex creat page in console platform (simple creation generally uses modal)
- List page, detail page in management platform (with `-admin`/`_admin` in path)
- For detail page, we recommend using `id`
- Take instance as an example `src/pages/compute/routes/index.js`
```javascript
{ path: `${PATH}/instance`, component: Instance, exact: true },
{ path: `${PATH}/instance-admin`, component: Instance, exact: true },
{
path: `${PATH}/instance/detail/:id`,
component: InstanceDetail,
exact: true,
},
{
path: `${PATH}/instance-admin/detail/:id`,
component: InstanceDetail,
exact: true,
},
{ path: `${PATH}/instance/create`, component: StepCreate, exact: true },
```
## The route corresponding to the first-level menu
- First-level menu should add in `src/core/routes.js`
- Take compute as an example
```javascript
{
path: '/compute',
component: Compute,
},
```

42
docs/en/develop/3-14-I18n-introduction.md Normal file
View File

@ -0,0 +1,42 @@
English | [简体中文](/docs/zh/develop/3-14-I18n-introduction.md)
# Usage
- Framework supports internationalization, default support in English, Chinese
![i18n](/docs/zh/develop/images/i18n/i18n.png)
![english](/docs/zh/develop/images/i18n/english.png)
# Code location
- `src/locales/index.js`
- English: `src/locales/en.json`
- Chinese: `src/locales/zh.json`
# How to use
- The strings that need to be displayed internationally in the code are all in English, after using cli to complete string collection, generally, there is no need to update `en.json`, only need to modify the corresponding Chinese in `zh.json` to complete the internationalization operation
- Use function `t` to translate the string
- Take `instance` as an example, Corresponding international writing is `t('instance')`
- Note that English is case relevant
- Function `T` supports strings with parameters
- Params use `{}` to mark, for example :
```javascript
confirmContext = () =>
t('Are you sure to { action }?', {
action: this.actionName || this.title,
});
```
- Collect
```shell
yarn run i18n
```
- After colleced, `en.json` and `zh.json` will automatically update.
- Update Chinese
- After colleced, just update directly in `zh.json`.

388
docs/en/develop/3-7-ModalAction-introduction.md Normal file
View File

@ -0,0 +1,388 @@
English | [简体中文](/docs/zh/develop/3-7-ModalAction-introduction.md)
# Usage
![Modal Form](/docs/zh/develop/images/form/modal.png)
- After click the action button, the form modal will display.
- After click the `Confirm` button, the `loading` status will be displayed according to the status of request.
- After click the `Cancle` button, the modal form will disappear.
- If the request is sent successfully, a prompt message of successful action will be displayed in the upper right corner, and it will automatically disappear after a few seconds.
- If the request fails, an error message will be displayed in the upper right corner of the form page, which can only disappear after clicking the close button.
- Support batch action, after selecting multiple items in the table, you can click the action button above the table to perform batch action.
# ModalAction code file
- `src/containers/Action/ModalAction/index.jsx`
# ModalAction attribute and function definitions introduction
- Modal forms are all inherited from `ModalAction` component
- Code location: `pages/xxxx/containers/XXXX/actions/xxx.jsx`
- For the case where the form item is relatively less, the modal form is usually used
- Only need to override some functions and the development of page will be completed
- Attributes and functions are divided into the following four types:
- The attributes and functions that must be override, mainly include:
- Action ID
- Action title
- Action permissions
- Judgment whether to disable the action button
- Form Item config
- Function to send request
- The attributes and functions that override in need, mainly include:
- Form default value
- Form size
- Form's label & content layout
- Whether it is an asynchronous action
- Resource name
- Whether to display the resource name in the prompt of the request result
- Action button text
- The attributes and functions that do not need to be override, mainly include:
- Whether the current page is a admin page
- The basic functions in the parent class, mainly include:
- Render page
- Display of request status
- Display of request results
- See below for a more detailed and comprehensive introduction
## The attributes and functions that must be override
- `id`
- Static
- Resource action ID
- Need to be unique, only for all actions in the `actions` of the resource to be unique
- Must be override
- Take attach volume as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx` :
```javascript
static id = 'attach-volume';
```
- `title`
- Static
- Resource action title
- Take attach volume as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx` :
```javascript
static title = t('Attach Volume');
```
- `name`
- Resource action name
- Use the name in the prompt after the request
- Take attach volume as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx` :
```javascript
get name() {
return t('Attach volume');
}
```
- `policy`
- Static
- Action permission, if the permission verify failed, the action button will not be displayed on the resource list page
- Take attach volume as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx` :
```javascript
static policy = 'os_compute_api:os-volumes-attachments:create';
```
- `allowed`
- Static
- Determine whether the action button needs to be disabled
- Return `Promise`
- Button that no need to be disabled, write directly:
```javascript
static allowed() {
return Promise.resolve(true);
}
```
- Param `item`, the item data in the resource list is generally used to determine the action of the item in the resource list.
- Param `containerProps`, parent container's (That is, the resource list page where the button is located) `props` attribute, generally used to determine the action of related resources under the details page.
- Take attach volume as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx` :
- The admin page does not display the action button
- The button will show when the server is not: active / deleting / locked / ironic
```javascript
static allowed = (item, containerProps) => {
const { isAdminPage } = containerProps;
return Promise.resolve(
!isAdminPage &&
isActive(item) &&
isNotDeleting(item) &&
isNotLocked(item) &&
!isIronicInstance(item)
);
};
```
- `formItems`
- The form item configuration list corresponding to the action
- The configuration of each form item can be referred to [3-10-FormItem introduction](3-10-FormItem-introduction.md)
- Take attach volume as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx` :
- Form items includes: instance name label, volume selector
```javascript
get formItems() {
return [
{
name: 'instance',
label: t('Instance'),
type: 'label',
iconType: 'instance',
},
{
name: 'volume',
label: t('Volume'),
type: 'volume-select-table',
tip: multiTip,
isMulti: false,
required: true,
serverId: this.item.id,
disabledFunc: (record) => {
const diskFormat = _get(
record,
'origin_data.volume_image_metadata.disk_format'
);
return diskFormat === 'iso';
},
},
];
}
```
- `onSubmit`
- The request function of the action
- After the action request is successful, the modal will disappear, and a successful prompt will be displayed, and the prompt will disappear after a few seconds
- After the action fails, the modal will disappear and an error message will be displayed. You need to close the prompt manually before the prompt disappears.
- Return `Promise`.
- Return the function in the `store` that corresponding to the form.
- Take attach volume as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx` :
```javascript
onSubmit = (values) => {
const { volume } = values;
const { id } = this.item;
const volumeId = volume.selectedRowKeys[0];
const body = {
volumeAttachment: {
volumeId,
},
};
return this.store.attachVolume({ id, body });
};
```
## The attributes and functions that override in need
- `init`
- Initial operation
- Defines `this.store` in it, `loading` status is based on `this.store.isSubmitting`
- Call the function to obtain other data required by the form in it
- Update attributes in `this.state` .
- Take attach volume as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx` :
- Defines the corresponding `store` for the action
```javascript
init() {
this.store = globalServerStore;
}
```
- `defaultValue`
- The initial value of the form
- Default value is `{}`
- Take attach volume as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx`为例
- Set the initial value of the server name in the form
```javascript
get defaultValue() {
const { name } = this.item;
const value = {
instance: name,
};
return value;
}
```
- `nameForStateUpdate`
- Update key-value into `this.state` when form item value changed
- The key-value stored in `this.state` often affect the display of form items, generally need to be used with `get formItems`
- Such as expand and hide more configuration items
- Such as the `required` attribute change of some form items
- By default, the change of form item which `type` is `radio` or `more` will automaticly save to `this.state`
- Take attach interface to instance as an example `src/pages/compute/containers/Instance/actions/AttachInterface.jsx` :
- After selecte network in the form, the content of the subnet list will be updated
- However, after select the subnet in the form, the judgment of the input IP will be updated, etc.
```javascript
get nameForStateUpdate() {
return ['network', 'ipType', 'subnet'];
}
```
- `instanceName`
- After the request is sent, the resource name in the prompt message
- Default is `this.values.name`
- Take edit fip as an example `src/pages/network/containers/FloatingIp/actions/Edit.jsx` :
- The prompt name is the address of the floating IP
```javascript
get instanceName() {
return this.item.floating_ip_address;
}
```
- `isAsyncAction`
- Whether the current action is an asynchronous action
- Default is `false`
- If is asynchronous action, the prompt will be : `The xxx instruction has been issued, instance: xxx. \n You can wait for a few seconds to follow the changes of the list data or manually refresh the data to get the final display result.`
- If is synchronous action, the prompt will be : `xxx successfully, instance: xxx.`
- Take attach volume as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx` :
```javascript
get isAsyncAction() {
return true;
}
```
- `messageHasItemName`
- Whether to include the instance name in the prompt of the request result
- Default is `true`
- For some resources without `name` attribute, you can set the value `false`
- Take create snat as an example `src/pages/network/containers/Router/Snat/actions/Create.jsx` :
```javascript
get messageHasItemName() {
return false;
}
```
- `buttonText`
- Static
- When the text on the action button is inconsistent with the title of the modal, this attribute needs to be override
- Take edit image as an example `src/pages/compute/containers/Image/actions/Edit.jsx` ：
```javascript
static buttonText = t('Edit');
```
- `buttonType`
- Static
- The type of button, support `primary`, `danger`
- When the button is to emphasize the risk of action, the button or the text on the button is generally red, use `danger`
- As the example of disable cinder service`src/pages/configuration/containers/SystemInfo/CinderService/actions/Disable.jsx` :
```javascript
static buttonType = 'danger';
```
- `modalSize`
- Static
- Identifies the width of the modal: the value is`small`、`middle`、`large`
- The correspondence between value and width is :
- `small`: 520
- `middle`: 720
- `large`: 1200
- Use with `getModalSize`
- Default is `small`, means the width of modal is 520px
```javascript
static get modalSize() {
return 'small';
}
```
- Take attach volume as an example `src/pages/compute/containers/Instance/actions/AttachVolume.jsx` :
- the size of modal is `large`
```javascript
static get modalSize() {
return 'large';
}
getModalSize() {
return 'large';
}
```
- `getModalSize`
- Identifies the width of the modal
- The value is`small`、`middle`、`large`
- `labelCol`
- Configure the layout of the labels on the left side of the form
- Default is :
```javascript
get labelCol() {
const size = this.getModalSize();
if (size === 'large') {
return {
xs: { span: 6 },
sm: { span: 4 },
};
}
return {
xs: { span: 8 },
sm: { span: 6 },
};
}
```
- Take edit domain as an example `src/pages/identity/containers/Domain/actions/Edit.jsx` :
```javascript
get labelCol() {
return {
xs: { span: 6 },
sm: { span: 5 },
};
}
```
- `wrapperCol`
- Configure the layout of the content on the right side of the form
- Default is :
```javascript
get wrapperCol() {
return {
xs: { span: 16 },
sm: { span: 16 },
};
}
```
- Take manage metadata of flavor as an example `src/pages/compute/containers/Flavor/actions/ManageMetadata.jsx` :
```javascript
get wrapperCol() {
return {
xs: { span: 18 },
sm: { span: 20 },
};
}
```
## The attributes and functions that do not need to be override
- `isAdminPage`
- Whether current page is a "management platform" page
- `successText`
- Successful prompt generated after the request
- `errorText`
- Error prompt generated after the request fails
- `containerProps`
- Get the `props` of the father component of the button
- `item`
- Get the data of the item that the action corresponding to
- `items`
- Get the data corresponding to the batch action
## The basic functions in the parent class
- `ModalAction` extends `BaseForm`
- Recommend to see `src/components/Form/index.jsx`

259
docs/en/develop/3-8-ConfirmAction-introduction.md Normal file
View File

@ -0,0 +1,259 @@
English | [简体中文](/docs/zh/develop/3-8-ConfirmAction-introduction.md)
# Usage
![Confirm](/docs/zh/develop/images/form/confirm.png)
- After click the action button, the confirm modal will display.
- After click the `Confirm` button, the `loading` status will be displayed according to the status of request.
- After click the `Cancle` button, the modal form will disappear.
- If the request is sent successfully, a prompt message of successful action will be displayed in the upper right corner, and it will automatically disappear after a few seconds.
- If the request fails, an error message will be displayed in the upper right corner of the form page, which can only disappear after clicking the close button.
- Support batch action, after selecting multiple items in the table, you can click the action button above the table to perform batch action.
- When using batch action, the resources that do not meet the action conditions among the resources selected in batch will be prompted.
# ConfirmAction code file
- `src/containers/Action/ConfirmAction/index.jsx`
# ConfirmAction attribute and function definitions introduction
- ConfirmAction are all inherited from `ModalAction` component
- Code location: `pages/xxxx/containers/XXXX/actions/xxx.jsx`
- For some action, it it only need to confirm again, user don't need to input more information. ConfirmAction can be used at this time, such as: shut down the instance.
- Only need to override some functions and the development of page will be completed
- Attributes and functions are divided into the following four types:
- The attributes and functions that must be override, mainly include:
- Action ID
- Action title
- Action permissions
- Judgment whether to disable the action button
- Function to send request
- The attributes and functions that override in need, mainly include:
- Resource name
- Whether to display the resource name in the prompt of the request result
- Whether it is an asynchronous action
- Action button text
- The attributes and functions that do not need to be override, mainly include:
- Whether the current page is a admin page
- The basic functions in the parent class, mainly include:
- Render page
- Display of request status
- Display of request results
- See below for a more detailed and comprehensive introduction
## The attributes and functions that must be override
- `id`
- Resource action ID
- Need to be unique, only for all actions in the `actions` of the resource to be unique
- Must be override
- Take stop instance as an example `src/pages/compute/containers/Instance/actions/Stop.jsx` :
```javascript
get id() {
return 'stop';
}
```
- `title`
- Resource action title
- Take stop instance as an example `src/pages/compute/containers/Instance/actions/Stop.jsx` :
```javascript
get title() {
return t('Stop Instance');
}
```
- `actionName`
- The action name
- Use the name in the prompt after the request
- Take stop instance as an example `src/pages/compute/containers/Instance/actions/Stop.jsx` :
```javascript
get actionName() {
return t('stop instance');
}
```
- `policy`
- Action permission, if the permission verify failed, the action button will not be displayed on the resource list page.
- Take stop instance as an example `src/pages/compute/containers/Instance/actions/Stop.jsx` :
```javascript
policy = 'os_compute_api:servers:stop';
```
- `allowedCheckFunc`
- Determine whether the action button needs to be disabled
- Return `Boolean`
- Button that no need to be disabled, write directly:
```javascript
allowedCheckFunc = () => true;
```
- Param `item`, the data corresponding to the action.
- Take stop instance as an example `src/pages/compute/containers/Instance/actions/Stop.jsx` :
- The action button will be shown when the instance is running and is not lock in console or is under admin page.
```javascript
allowedCheckFunc = (item) => {
if (!item) {
return true;
}
return isNotLockedOrAdmin(item, this.isAdminPage) && this.isRunning(item);
};
```
- `onSubmit`
- The request function of the action
- After the action request is successful, the modal will disappear, and a successful prompt will be displayed, and the prompt will disappear after a few seconds
- After the action fails, the modal will disappear and an error message will be displayed. You need to close the prompt manually before the prompt disappears.
- Return `Promise`.
- Return the function in the `store` that corresponding to the form.
- Take stop instance as an example `src/pages/compute/containers/Instance/actions/Stop.jsx` :
```javascript
onSubmit = (item) => {
const { id } = item || this.item;
return globalServerStore.stop({ id });
};
```
## The attributes and functions that override in need
- `buttonText`
- When the text on the action button is inconsistent with the title of the modal, this attribute needs to be override
- Take stop instance as an example `src/pages/compute/containers/Instance/actions/Stop.jsx` :
- The title of modal is `stop instance`, the text on button is `stop`.
```javascript
get buttonText() {
return t('Stop');
}
```
- `buttonType`
- The type of button, support `primary`, `danger`, `default`
- Default is `default`
- When the button is to emphasize the risk of action, the button or the text on the button is generally red, use `danger`
- Take stop instance as an example `src/pages/compute/containers/Instance/actions/Stop.jsx` :
```javascript
get buttonType() {
return 'danger';
}
```
- `passiveAction`
- In batch action, if a resource does not meet the conditions, the prompt will be displayed before the request is sent. If the prompt needs to be in a passive voice, this attribute needs to be set.
- Take stop instance as an example `src/pages/compute/containers/Instance/actions/Stop.jsx` :
```javascript
get passiveAction() {
return t('be stopped');
}
```
- `isAsyncAction`
- Whether the current action is an asynchronous action
- Default is `false`
- If is asynchronous action, the prompt will be : `The xxx instruction has been issued, instance: xxx. \n You can wait for a few seconds to follow the changes of the list data or manually refresh the data to get the final display result.`
- If is synchronous action, the prompt will be : `xxx successfully, instance: xxx.`
- Take stop instance as an example `src/pages/compute/containers/Instance/actions/Stop.jsx` :
```javascript
get isAsyncAction() {
return true;
}
```
- `messageHasItemName`
- Whether to include the instance name in the prompt of the request result
- Default is `true`
- For some resources without `name` attribute, you can set the value `false`
- `performErrorMsg`
- In batch action, if a resource does not meet the conditions, a prompt will be displayed before the request is sent
- Default is `Unable to xxx, instance: xxx.`
- Take stop instance as an example `src/pages/compute/containers/Instance/actions/Stop.jsx` :
- If the instance selected is not running, it will prompt `Instance "{ name }" status is not in active or suspended, can not stop it.`
- If the instance selected is locked, it will prompt `Instance "{ name }" is locked, can not stop it.`
- Other case, will all prompt `You are not allowed to stop instance "{ name }".`
```javascript
performErrorMsg = (failedItems) => {
const instance = isArray(failedItems) ? failedItems[0] : failedItems;
let errorMsg = t('You are not allowed to stop instance "{ name }".', {
name: instance.name,
});
if (!this.isRunning(instance)) {
errorMsg = t(
'Instance "{ name }" status is not in active or suspended, can not stop it.',
{ name: instance.name }
);
} else if (!isNotLockedOrAdmin(instance, this.isAdminPage)) {
errorMsg = t('Instance "{ name }" is locked, can not stop it.', {
name: instance.name,
});
}
return errorMsg;
};
```
- `getNameOne`
- The instance name in the prompt
- Default is :
```javascript
getNameOne = (data) => data.name;`
```
- Param `data` is the resource that the action corresponding to
- Take release fip as an example `src/pages/network/containers/FloatingIp/actions/Release.jsx` :
```javascript
getNameOne = (data) => data.floating_ip_address;
```
- `getName`
- It is not recommended to override this function
- It is recommended to override `getNameOne`
- `confirmContext`
- The prompt in the confirm modal
- Default is `Are you sure to {action} (instance: {name})?`
- Take delete flavor as an example `src/pages/compute/containers/Flavor/actions/Delete.jsx` :
- Prompt `If an instance is using this flavor, deleting it will cause the instance's flavor data to be missing. Are you sure to delete {name}?`
```javascript
confirmContext = (data) => {
const name = this.getName(data);
return t(
"If an instance is using this flavor, deleting it will cause the instance's flavor data to be missing. Are you sure to delete {name}?",
{ name }
);
};
```
- `submitErrorMsg`
- Error message after action failed
- Generally do not need to override
- Default is `Unable to {action}, instance: {name}.`
## The attributes and functions that do not need to be override
- `isAdminPage`
- Whether current page is a "management platform" page
- `submitSuccessMsg`
- Successful prompt generated after the request
- `submitErrorMsgBatch`
- The error prompt after batch action request
- `perform`
- In batch action, determine whether the selected data is operable, and if it is not operable, give corresponding prompts
## The basic functions in the parent class
- Recommend to see `src/containers/Action/ConfirmAction/index.jsx`

296
docs/en/develop/3-9-StepAction-introduction.md Normal file
View File

@ -0,0 +1,296 @@
English | [简体中文](/docs/zh/develop/3-9-StepAction-introduction.md)
# Usage
![StepForm](/docs/zh/develop/images/form/step.png)
- After click the action button, the step modal will display.
- Has it own route to visit
- Generally used to create resources, or form with lots of form items
- Support `Next Step`, `Previous Step` action button
- After click the `Cancle` button, will automatically jump to the corresponding resource list page
- If the request is sent successfully, a prompt message of successful action will be displayed in the upper right corner, and it will automatically disappear after a few seconds.
![FormOneStep](/docs/zh/develop/images/form/create-success.png)
- If the request fails, an error message will be displayed in the upper right corner of the form page, which can only disappear after clicking the close button.
# StepAction code file
- `src/containers/Action/StepAction/index.jsx`
# StepAction attribute and function definitions introduction
- Step forms are all inherited from `StepAction` component
- Code location: `pages/xxxx/containers/XXXX/actions/xxx/index.jsx`
- Only need to override some functions and the development of page will be completed
- Need to write every step of the Form
- Attributes and functions are divided into the following four types:
- The attributes and functions that must be override, mainly include:
- Action ID
- Action title
- The page's location
- The corresponding resource page location
- Action permissions
- Judgment whether to disable the action button
- Form Item config
- Function to send request
- Configuration of each step
- The attributes and functions that override in need, mainly include:
- Whether there is a confirmation page
- Prompt after successful request
- Prompt after failed request
- Rendering of the data on the bottom left of the page
- The attributes and functions that do not need to be override, mainly include:
- Whether the current page is a admin page
- The basic functions in the parent class, mainly include:
- Render page
- Display of request status
- Display of request results
- See below for a more detailed and comprehensive introduction
## The attributes and functions that must be override
- `id`
- Static
- Resource action ID
- Need to be unique, only for all actions in the `actions` of the resource to be unique
- Must be override
- Take create instance as an example `src/pages/compute/containers/Instance/actions/StepCreate/index.jsx` :
```javascript
static id = 'instance-create';
```
- `title`
- Static
- Resource action title
- Take create instance as an example `src/pages/compute/containers/Instance/actions/StepCreate/index.jsx` :
```javascript
static title = t('Create Instance');
```
- `path`
- Thr corresponding route for resource action
- Static attribute or function
- When it is static function, here are the params
- Param `item`, the item data in the resource page
- Param `containerProps`, the `props` of the father component. (That is, the resource list page where the button is located)
- Take create instance as an example `src/pages/compute/containers/Instance/actions/StepCreate/index.jsx` :
- Click the `Create instance` button in the instance list page, the page will jump to `/compute/instance/create`
- Click the `Create instance` button in the instance group list page, the page will jump to `/compute/instance/create?servergroup=${detail.id}`
```javascript
static path = (_, containerProps) => {
const { detail, match } = containerProps || {};
if (!detail || isEmpty(detail)) {
return '/compute/instance/create';
}
if (match.path.indexOf('/compute/server') >= 0) {
return `/compute/instance/create?servergroup=${detail.id}`;
}
};
```
- Static attribute, Take create flavor as an example `src/pages/compute/containers/Flavor/actions/StepCreate/index.jsx` :
```javascript
static path = '/compute/flavor-admin/create';
```
- `policy`
- Static attribute
- The permission corresponding to the page, if the permission verification fails, the action button will not be displayed on the resource list page
- Take create instance as an example `src/pages/compute/containers/Instance/actions/StepCreate/index.jsx` :
```javascript
static policy = [
'os_compute_api:servers:create',
'os_compute_api:os-availability-zone:list',
];
```
- `allowed`
- Static
- Determine whether the action button needs to be disabled
- Return `Promise`
- Button that no need to be disabled, write directly:
```javascript
static allowed() {
return Promise.resolve(true);
}
```
- `name`
- The name of the action
- Use the name in the prompt after the request
- Take create instance as an example `src/pages/compute/containers/Instance/actions/StepCreate/index.jsx` :
```javascript
get name() {
return t('Create instance');
}
```
- `listUrl`
- The resource list page corresponding to the action
- After the operation request is successful, it will automatically jump to the resource list page
- Take create instance as an example `src/pages/compute/containers/Instance/actions/StepCreate/index.jsx` :
- In the action column of the image list page, click Create a instance and successfully create, will return to the image list page
- In the action column of the volume list page, click Create a instance and successfully create, will return to the volume list page
- In the instance group detail page, click Create a instance and successfully create, will return to the instance group detail page
- In the instance list page, click Create a instance and successfully create, will return to the instance list page
```javascript
get listUrl() {
const { image, volume, servergroup } = this.locationParams;
if (image) {
return '/compute/image';
}
if (volume) {
return '/storage/volume';
}
if (servergroup) {
return `/compute/server-group/detail/${servergroup}`;
}
return '/compute/instance';
}
```
- `steps`
- Configuration of each step
- Each configuration item
- `title`, title of each step
- `component`, every step form the corresponding components, inherit from `BaseForm`(`src/components/Form`)
- Take create instance as an example `src/pages/compute/containers/Instance/actions/StepCreate/index.jsx` :
- Includes 4 steps: Base configuration, Network configuration, System configuration, Confirm configuration
```javascript
get steps() {
return [
{
title: t('Base Config'),
component: BaseStep,
},
{
title: t('Network Config'),
component: NetworkStep,
},
{
title: t('System Config'),
component: SystemStep,
},
{
title: t('Confirm Config'),
component: ConfirmStep,
},
];
}
```
- `onSubmit`
- The request function of the action
- After the action request is successful, will automatically jump to the resource list page
- After the action fails, will display error prompts in the form page
- Return `Promise`.
- Return the function in the `store` that corresponding to the form.
## The attributes and functions that override in need
- `init`
- Initial operation
- Defines `this.store` in it, `loading` status is based on `this.store.isSubmitting`
- Call the function to obtain other data required by the form in it
- Update attributes in `this.state` .
- Take create instance as an example `src/pages/compute/containers/Instance/actions/StepCreate/index.jsx` :
- Get quota information
```javascript
init() {
this.store = globalServerStore;
this.projectStore = globalProjectStore;
this.getQuota();
}
```
- `instanceName`
- After the request is sent, the resource name in the prompt message
- Default is `this.values.name`
- Take create instance as an example `src/pages/compute/containers/Instance/actions/StepCreate/index.jsx` :
- If is batch create instance, will display name in form of `${name}-${index + 1}`
```javascript
get instanceName() {
const { name, count = 1 } = this.values || {};
if (count === 1) {
return this.unescape(name);
}
return this.unescape(
new Array(count)
.fill(count)
.map((_, index) => `${name}-${index + 1}`)
.join(', ')
);
}
```
- `renderFooterLeft`
- Rendering of internal left side of the bottom of the form
- Default return `null`
- src/pages/compute/containers/Instance/actions/StepCreate/index.jsx
- Show the number of batch create
- Based on the number of inputs and the remaining quota, determines if the current form is correct
```javascript
renderFooterLeft() {
const { data } = this.state;
const { count = 1, source: { value: sourceValue } = {} } = data;
const configs = {
min: 1,
max: sourceValue === 'bootableVolume' ? 1 : 100,
precision: 0,
onChange: this.onCountChange,
formatter: (value) => `$ ${value}`.replace(/\D/g, ''),
};
return (
<div>
<span>{t('Count')}</span>
<InputNumber
{...configs}
value={count}
className={classnames(styles.input, 'instance-count')}
/>
{this.renderBadge()}
</div>
);
}
```
- `successText`
- Successful prompt generated after the request
- `errorText`
- Error prompt generated after the request fails
- Generally do not need replication
- `renderFooterLeft`
- Rendering function on the left side of the table
## The attributes and functions that do not need to be override
- `values`
- After the form is verified successfully, use this value to update form value.
- `isAdminPage`
- Whether current page is a "management platform" page
- `getUrl`
- Generate function of page URL
- Such as: need to provide a ability of jump to the associated resource, use this function, you can jump to the corresponding address of the `console platform` in the `console platform`, and jump to the corresponding address of the `management platform` in the `management platform`.
## The basic functions in the parent class
- `StepAction` extends `StepForm`
- Recommend to see `src/components/StepForm/index.jsx`

2
docs/zh/develop/3-10-FormItem-introduction.md
View File

@ -518,7 +518,6 @@
- `isImage`，以镜像支持的格式验证名称
- `isInstance`，以云主机支持的格式验证名称
- 以创建云主机输入名称`src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx`为例
- 输入密码，确认密码，并要验证密码格式，以及两次输入数据的一致性
```javascript
{
@ -844,7 +843,6 @@
- 带有读取文件功能的多行文本输入框
- 选择文件后，会将文件的内容读取到文本输入框中
- 以创建密钥输入公钥信息`src/pages/compute/containers/Keypair/actions/Create.jsx`为例
- 配置 公有、受保护的 属性
```javascript
{

8
docs/zh/develop/3-11-Action-introduction.md
View File

@ -64,13 +64,12 @@
## 批量操作按钮配置`batchActions`
- 返回组件的列表
- 如果没有主按钮，可以设置为`null`或`[]`
- 如果没有批量按钮，可以设置为`null`或`[]`
- 如果不可操作（比如权限不够），将自动隐藏
## 行操作按钮配置`rowActions`
- 返回一个对象，内含`firstAction`, `moreActions`对应的组件
- 批量操作按钮如果被禁用（比如）
- 可以返回一个空对象`{}`
- `firstAction`，行操作对应的第一个按钮
- 如果不可操作，按钮灰掉
@ -101,7 +100,8 @@
export default actionConfigs;
```
- `moreActions`，`更多`按钮下对应的操作组件
- `moreActions`
- `更多`按钮下对应的操作组件
- 操作的数组
- 其内的操作如果不可用，将直接隐藏该操作按钮
- 支持两种格式的配置，对应了不同的展示方案
@ -109,7 +109,7 @@
![云硬盘操作](/docs/zh/develop/images/form/volume-action.png)
- 每个元数是个含有`title`、`actions`属性的对象
- 每个元素是个含有`title`、`actions`属性的对象
![云主机操作](/docs/zh/develop/images/form/instance-action.png)

2
docs/zh/develop/3-12-Menu-introduction.md
View File

@ -7,7 +7,7 @@
![控制台](/docs/zh/develop/images/menu/console-menu.png)
- 配置管理平台的左右菜单项
- 配置管理平台的左侧菜单项
![管理平台](/docs/zh/develop/images/menu/admin-menu.png)

7
docs/zh/develop/3-7-ModalAction-introduction.md
View File

@ -209,7 +209,7 @@
- `nameForStateUpdate`
- 表单项内容变动时，更新到`this.state`中的表单键值对
- 这些存储到`this.store`中的键值对往往会影响表单项的展示，需要配合`get formItems`中的代码使用
- 这些存储到`this.state`中的键值对往往会影响表单项的展示，需要配合`get formItems`中的代码使用
- 如展开、隐藏更多配置项
- 如某些表单项必填性的变动
- 默认对`radio`, `more`类型的表单项的变动保存到`this.state`中
@ -252,7 +252,7 @@
- 请求结果的提示语中，是否要包含实例名称
- 默认值为`true`
- 有些资源，不存在名称，则可设置该值为`false`
- 以裸机节点创建端口``为例
- 以创建 `SNAT` `src/pages/network/containers/Router/Snat/actions/Create.jsx` 为例
```javascript
get messageHasItemName() {
@ -309,8 +309,9 @@
```
- `getModalSize`
- 配置表单左侧标题的布局
- 标识弹出框的宽度
- 值为`small`、`middle`、`large`
- `labelCol`
- 配置表单左侧标签的布局
- 默认值为

6
docs/zh/develop/3-8-ConfirmAction-introduction.md
View File

@ -16,9 +16,9 @@
- `src/containers/Action/ConfirmAction/index.jsx`
# ModalAction 属性与函数定义介绍
# ConfirmAction 属性与函数定义介绍
- 弹窗型表单都继承于 ModalAction 组件
- 确认型表单都继承于 ModalAction 组件
- 代码位置：`pages/xxxx/containers/XXXX/actions/xxx.jsx`
- 某些操作，只需要再次确认，无需用户输入更多内容即可，此时可使用该类型的组件，如：关闭云主机
- 只需要复写部分函数即可完成页面的开发
@ -174,6 +174,7 @@
- 请求结果的提示语中，是否要包含实例名称
- 默认值为`true`
- 有些资源，不存在名称，则可设置该值为`false`
- `performErrorMsg`
- 批量操作时，如果某个资源不符合条件，会在发送请求前展示提示语
- 默认值为`无法xxx， 实例名称：xxxx。`
@ -220,6 +221,7 @@
- `getName`
- 不建议复写该函数
- 建议复写`getNameOne`
- `confirmContext`
- 确认弹窗中的提示语
- 默认为`确认{ action }（实例名称：{name}）？`

1
docs/zh/develop/3-9-StepAction-introduction.md
View File

@ -140,7 +140,6 @@
- 以创建云主机`src/pages/compute/containers/Instance/actions/StepCreate/index.jsx`为例
- 在镜像列表页的条目操作中，点击创建云主机并操作成功后，返回到镜像列表页
- 在云硬盘列表页的条目操作中，点击创建云主机并操作成功后，返回到云硬盘列表页
- 在云硬盘列表页的条目操作中，点击创建云主机并操作成功后，返回到云硬盘列表页
- 在云主机组详情页，点击创建云主机并操作成功后，返回到云主机详情页中
- 在云主机列表页中，点击创建云主机并操作成功后，返回到云主机列表页