skyline-console/docs/en/develop/3-7-ModalAction-introduction.md

English | 简体中文

Usage

• 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 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.

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 :

    static id = 'attach-volume';
    

• title

  • Static

  • Resource action title

  • Take attach volume as an example src/pages/compute/containers/Instance/actions/AttachVolume.jsx :

    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 :

    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 :

    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:

    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

    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

  • Take attach volume as an example src/pages/compute/containers/Instance/actions/AttachVolume.jsx :

    • Form items includes: instance name label, volume selector

    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 :

    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

    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

    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 select 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.

    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

    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 :

    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 :

    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 ：

    static buttonText = t('Edit');
    

• buttonType

  • Static
  • The type of button, support primary, default, link

• isDanger

  • Static

  • 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 true

  • As the example of disable cinder servicesrc/pages/configuration/containers/SystemInfo/CinderService/actions/Disable.jsx :

    static isDanger = true;
    

• modalSize

  • Static

  • Identifies the width of the modal: the value issmall、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

    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

    static get modalSize() {
      return 'large';
    }
    
    getModalSize() {
      return 'large';
    }
    

• getModalSize

  • Identifies the width of the modal
  • The value issmall、middle、large

• labelCol

  • Configure the layout of the labels on the left side of the form

  • Default is :

    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 :

    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 :

    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 :

    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