Skip to content

Latest commit

 

History

History
401 lines (339 loc) · 13.5 KB

3-7-ModalAction-introduction.md

File metadata and controls

401 lines (339 loc) · 13.5 KB
Raw

English | 简体中文

Usage

Modal Form

  • 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 (Fill in the policy that complies with the openstack rules here)

    • 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';

  • aliasPolicy

    • Static (Fill in the custom policy with module prefix here)

    • 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 aliasPolicy = 'nova: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