278 lines
11 KiB
Markdown
278 lines
11 KiB
Markdown
English | [简体中文](../../zh/develop/3-8-ConfirmAction-introduction.md)
|
|
|
|
# Usage
|
|
|
|
|
|
|
|
- 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 `Cancel` 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. (Fill in the policy that complies with the openstack rules here)
|
|
- Take stop instance as an example `src/pages/compute/containers/Instance/actions/Stop.jsx` :
|
|
|
|
```javascript
|
|
policy = 'os_compute_api:servers:stop';
|
|
```
|
|
|
|
- `aliasPolicy`
|
|
- Action permission, if the permission verify failed, the action button will not be displayed on the resource list page. (Fill in the custom policy with module prefix here)
|
|
- Take stop instance as an example `src/pages/compute/containers/Instance/actions/Stop.jsx` :
|
|
|
|
```javascript
|
|
aliasPolicy = 'nova: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`
|
|
- Take reset setting value as an example `src/pages/configuration/containers/Setting/actions/Reset.jsx`
|
|
|
|
```javascript
|
|
get buttonType() {
|
|
return 'primary';
|
|
}
|
|
```
|
|
|
|
- `isDanger`
|
|
- Support boolean `false`, `true`, the default value is `false`
|
|
- 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 isDanger() {
|
|
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`
|