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 :
```
get id() {
  return 'stop';
}
```
title
- Resource action title
- Take stop instance as an example src/pages/compute/containers/Instance/actions/Stop.jsx :
```
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 :
```
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 :
```
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 :
```
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:
```
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.
```
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 :
```
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.
```
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
```
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 :
```
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 :
```
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 :
```
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 }".

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 :
```
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 :
```
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}?
```
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

11 KiB Raw Permalink Blame History

Usage

ConfirmAction code file

ConfirmAction attribute and function definitions introduction

The attributes and functions that must be override

The attributes and functions that override in need

The attributes and functions that do not need to be override

The basic functions in the parent class

11 KiB

Raw Permalink Blame History