fix: Fix select table loading in form

Add loading when SelectTable component fetch data

Change-Id: If36411e74304061d305fb61b7954e1e564ce40e1

src/components/FormItem/SelectTable/index.jsx

@@ -125,6 +125,10 @@ export default class SelectTable extends React.Component {
     this.sortOrder = props.defaultSortOrder;
   }
 
+  componentDidMount() {
+    this.getData();
+  }
+
   componentDidUpdate(prevProps, prevState) {
     if (!isEqual(prevProps.backendPageStore, this.props.backendPageStore)) {
       this.getData();

src/pages/compute/containers/Flavor/actions/ManageAccess.jsx

@@ -94,6 +94,7 @@ export default class ManageAccess extends ModalAction {
         type: 'select-table',
         isMulti: true,
         required: true,
+        isLoading: this.projectStore.list.isLoading,
         datas: this.projects,
         ...projectTableOptions,
       },

src/pages/compute/containers/Flavor/actions/StepCreate/AccessTypeSetting.jsx

@@ -72,6 +72,7 @@ export default class AccessTypeSetting extends Base {
         hidden: !showChoose,
         required: showChoose,
         datas: this.projects,
+        isLoading: this.projectStore.list.isLoading,
         ...projectTableOptions,
       },
     ];

src/pages/compute/containers/HostAggregate/Aggregate/actions/ManageHost.jsx

@@ -91,6 +91,7 @@ export default class ManageHost extends ModalAction {
         type: 'select-table',
         isMulti: true,
         datas: this.computeHosts,
+        isLoading: globalComputeHostStore.list.isLoading,
         filterParams: [
           {
             label: t('Host'),

src/pages/compute/containers/Image/actions/Create.jsx

@@ -141,6 +141,7 @@ class CreateForm extends FormAction {
         required: this.isAdminPage,
         hidden: !this.isAdminPage,
         datas: this.projects,
+        isLoading: this.projectStore.list.isLoading,
         ...projectTableOptions,
       },
       {
@@ -207,6 +208,7 @@ class CreateForm extends FormAction {
         isMulti: true,
         hidden: !isShare,
         datas: this.projects,
+        isLoading: this.projectStore.list.isLoading,
         ...projectTableOptions,
       },
       {

src/pages/compute/containers/Image/actions/ManageAccess.jsx

@@ -92,6 +92,7 @@ export default class ManageAccess extends ModalAction {
         isMulti: true,
         required: true,
         datas: this.projects,
+        isLoading: this.projectStore.list.isLoading,
         ...projectTableOptions,
       },
     ];

src/pages/compute/containers/Instance/actions/AssociateFip.jsx

@@ -40,6 +40,7 @@ export default class AssociateFip extends ModalAction {
       canAssociateFloatingIPs: [],
       canReachSubnetIdsWithRouterId: [],
       routerIdWithExternalNetworkInfo: [],
+      portLoading: true,
     };
   }
 
@@ -64,6 +65,7 @@ export default class AssociateFip extends ModalAction {
     const interfaces = await getInterfaceWithReason(instanceInterfaces);
     this.setState({
       interfaces,
+      portLoading: false,
     });
   }
 
@@ -105,7 +107,7 @@ export default class AssociateFip extends ModalAction {
   }
 
   get formItems() {
-    const { fixed_ip, canAssociateFloatingIPs } = this.state;
+    const { canAssociateFloatingIPs, portLoading, fipLoading } = this.state;
     return [
       {
         name: 'instance',
@@ -119,6 +121,7 @@ export default class AssociateFip extends ModalAction {
         type: 'select-table',
         required: true,
         datas: this.ports,
+        isLoading: portLoading,
         isMulti: false,
         filterParams: [
           {
@@ -153,7 +156,7 @@ export default class AssociateFip extends ModalAction {
         type: 'select-table',
         required: true,
         datas: canAssociateFloatingIPs,
-        hidden: !fixed_ip,
+        isLoading: fipLoading,
         isMulti: false,
         filterParams: [
           {

src/pages/compute/containers/Instance/actions/AttachInterface.jsx

@@ -176,6 +176,7 @@ export default class AttachInterface extends ModalAction {
         type: 'select-table',
         required: isManua,
         datas: this.subnets,
+        isLoading: this.subnetStore.list.isLoading,
         hidden: !isManua,
         isMulti: false,
         filterParams: [

src/pages/compute/containers/Instance/actions/CreateIronic/BaseStep/index.jsx

@@ -145,6 +145,10 @@ export default class BaseStep extends Base {
   };
 
   get formItems() {
+    const { image } = this.locationParams;
+    const imageLoading = image
+      ? this.imageStore.isLoading
+      : this.imageStore.list.isLoading;
     return [
       {
         name: 'project',
@@ -187,6 +191,7 @@ export default class BaseStep extends Base {
         label: t('Operating System'),
         type: 'select-table',
         datas: this.images,
+        isLoading: imageLoading,
         isMulti: false,
         filterParams: [
           {

src/pages/compute/containers/Instance/actions/CreateIronic/SystemStep/index.jsx

@@ -98,6 +98,7 @@ export default class SystemStep extends Base {
         label: t('Keypair'),
         type: 'select-table',
         datas: this.keypairs,
+        isLoading: this.keyPairStore.list.isLoading,
         isMulti: false,
         required: !isPassword,
         hidden: isPassword,

src/pages/compute/containers/Instance/actions/DetachInterface.jsx

@@ -29,6 +29,7 @@ export default class DetachInterface extends ModalAction {
   init() {
     this.store = new ServerStore();
     this.getPorts();
+    this.state.portLoading = true;
   }
 
   get name() {
@@ -60,8 +61,11 @@ export default class DetachInterface extends ModalAction {
     return portsMap;
   }
 
-  getPorts() {
+  async getPorts() {
-    this.store.fetchInterfaceList({ id: this.item.id });
+    await this.store.fetchInterfaceList({ id: this.item.id });
+    this.setState({
+      portLoading: false,
+    });
   }
 
   get defaultValue() {
@@ -82,6 +86,7 @@ export default class DetachInterface extends ModalAction {
     );
 
   get formItems() {
+    const { portLoading } = this.state;
     return [
       {
         name: 'instance',
@@ -95,6 +100,7 @@ export default class DetachInterface extends ModalAction {
         type: 'select-table',
         required: true,
         datas: this.ports,
+        isLoading: portLoading,
         isMulti: true,
         filterParams: [
           {

src/pages/compute/containers/Instance/actions/DetachIsoVolume.jsx

@@ -98,6 +98,7 @@ export default class DetachIsoVolume extends ModalAction {
         type: 'select-table',
         required: true,
         datas: this.volumes,
+        isLoading: this.volumeStore.list.isLoading,
         isMulti: true,
         filterParams: [
           {

src/pages/compute/containers/Instance/actions/DetachVolume.jsx

@@ -93,6 +93,7 @@ export default class DetachVolume extends ModalAction {
         type: 'select-table',
         required: true,
         datas: this.volumes,
+        isLoading: this.volumeStore.list.isLoading,
         filterParams: [
           {
             label: t('Name'),

src/pages/compute/containers/Instance/actions/LiveMigrate.jsx

@@ -121,6 +121,9 @@ export default class LiveMigrate extends ModalAction {
         label: t('Target Compute Host'),
         type: 'select-table',
         datas: this.hypervisors,
+        isLoading:
+          this.hypervisorStore.list.isLoading &&
+          globalComputeHostStore.list.isLoading,
         isMulti: false,
         extra: t(
           'If nova-compute on the host is disabled, it will be forbidden to be selected as the target host.'

src/pages/compute/containers/Instance/actions/ManageSecurityGroup.jsx

@@ -142,6 +142,8 @@ export default class ManageSecurityGroup extends ModalAction {
         type: 'select-table',
         required: true,
         datas: this.ports,
+        isLoading:
+          this.portStore.list.isLoading && this.portStoreOrigin.list.isLoading,
         isMulti: false,
         onChange: this.onPortChange,
         filterParams: [

src/pages/compute/containers/Instance/actions/Migrate.jsx

@@ -118,6 +118,9 @@ export default class LiveMigrate extends ModalAction {
         label: t('Target Compute Host'),
         type: 'select-table',
         datas: this.hypervisors,
+        isLoading:
+          this.hypervisorStore.list.isLoading &&
+          globalComputeHostStore.list.isLoading,
         isMulti: false,
         extra: t(
           'If nova-compute on the host is disabled, it will be forbidden to be selected as the target host.'

src/pages/compute/containers/Instance/actions/RebuildSelect.jsx

@@ -144,6 +144,7 @@ export default class Rebuild extends ModalAction {
         label: t('Operating System'),
         type: 'select-table',
         datas: this.images,
+        isLoading: this.imageStore.list.isLoading,
         required: true,
         isMulti: false,
         filterParams: [

src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx

@@ -307,6 +307,10 @@ export default class BaseStep extends Base {
   };
 
   get formItems() {
+    const { image } = this.locationParams;
+    const imageLoading = image
+      ? this.imageStore.isLoading
+      : this.imageStore.list.isLoading;
     return [
       {
         name: 'project',
@@ -359,6 +363,7 @@ export default class BaseStep extends Base {
         label: t('Operating System'),
         type: 'select-table',
         datas: this.images,
+        isLoading: imageLoading,
         required: this.sourceTypeIsImage,
         isMulti: false,
         hidden: !this.sourceTypeIsImage,
@@ -381,6 +386,7 @@ export default class BaseStep extends Base {
         label: t('Bootable Volume'),
         type: 'select-table',
         datas: this.volumes,
+        isLoading: this.volumeStore.list.isLoading,
         required: this.sourceTypeIsVolume,
         isMulti: false,
         hidden: !this.sourceTypeIsVolume,

src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx

@@ -216,6 +216,7 @@ export default class SystemStep extends Base {
         label: t('Keypair'),
         type: 'select-table',
         datas: this.keypairs,
+        isLoading: this.keyPairStore.list.isLoading,
         isMulti: false,
         required: !isPassword,
         hidden: isPassword,
@@ -279,6 +280,7 @@ export default class SystemStep extends Base {
         hidden: !this.hasAdminRole || !more || !isManually,
         required: isManually,
         datas: this.hypervisors,
+        isLoading: this.hypervisorStore.list.isLoading,
         extra: t(
           'You can manually specify a physical node to create an instance.'
         ),
@@ -291,6 +293,7 @@ export default class SystemStep extends Base {
         type: 'select-table',
         hidden: !more,
         datas: this.serverGroups,
+        isLoading: this.serverGroupStore.list.isLoading,
         extra: t(
           'Using server groups, you can create cloud hosts on the same/different physical nodes as much as possible to meet the affinity/non-affinity requirements of business applications.'
         ),

src/pages/compute/containers/Instance/components/FlavorSelectTable.jsx

@@ -332,10 +332,13 @@ export default class FlavorSelectTable extends Component {
 
   render() {
     const { value } = this.props;
+    const isLoading =
+      this.settingStore.list.isLoading && this.flavorStore.list.isLoading;
     const props = {
       columns: this.columns,
       datas: this.flavors,
       tableHeader: this.renderTableHeander(),
+      isLoading,
       filterParams: [
         {
           label: t('Name'),

src/pages/configuration/containers/Metadata/actions/Manage.jsx

@@ -114,6 +114,7 @@ export default class Manage extends ModalAction {
         label: t('Resource Types'),
         type: 'select-table',
         datas: this.resourceTypes,
+        isLoading: this.store.resourceTypeLoading,
         isMulti: true,
         filterParams: [
           {

src/pages/network/containers/FloatingIp/Detail/PortForwarding/actions/Edit.jsx

@@ -59,8 +59,8 @@ export default class Edit extends ModalAction {
   }
 
   async getFipAlreadyUsedPorts() {
-    const detail = await globalPortForwardingStore.getFipAlreadyUsedPorts({
+    const detail = await globalPortForwardingStore.fetchList({
-      fipID: this.item.fip.id,
+      fipId: this.item.fip.id,
     });
     this.setState({
       alreadyUsedPorts: detail || [],
@@ -68,6 +68,9 @@ export default class Edit extends ModalAction {
   }
 
   async getInitialPortFixedIPs() {
+    this.setState({
+      fixedIpLoading: true,
+    });
     const { internal_port_id, internal_ip_address } = this.item;
     const portDetail = await globalPortStore.fetchDetail({
       id: internal_port_id,
@@ -143,6 +146,9 @@ export default class Edit extends ModalAction {
   }
 
   handlePortSelect = async (data) => {
+    this.setState({
+      fixedIpLoading: true,
+    });
     const { canReachSubnetIdsWithRouterId } = this.state;
     const interfacesWithReason = await getInterfaceWithReason(
       data.selectedRows
@@ -156,6 +162,7 @@ export default class Edit extends ModalAction {
     this.setState({
       portFixedIPs,
       fixed_ip_address: undefined,
+      fixedIpLoading: false,
     });
 
     this.formRef.current &&
@@ -181,7 +188,7 @@ export default class Edit extends ModalAction {
     data.internal_port_id = selectedRows[0].id;
     return globalPortForwardingStore.edit(
       {
-        fipID: this.item.fip.id,
+        fipId: this.item.fip.id,
         id: this.item.id,
       },
       data

src/pages/network/containers/FloatingIp/Detail/PortForwarding/index.jsx

@@ -39,7 +39,7 @@ export default class PortForwarding extends Base {
   updateFetchParams = (params) => {
     const { id, all_projects, ...rest } = params;
     return {
-      fipID: id,
+      fipId: id,
       fipInfo: this.props.detail,
       ...rest,
     };

src/pages/network/containers/FloatingIp/actions/Associate.jsx

@@ -116,6 +116,20 @@ export default class Associate extends ModalAction {
   };
 
   handleInstanceSelect = async (data) => {
+    this.setState({
+      instanceLoading: true,
+    });
+    if (data.selectedRows.length === 0) {
+      this.setState({
+        instanceFixedIPs: interfacesWithReasons,
+        instanceLoading: false,
+      });
+      return Promise.resolve().then(() => {
+        this.formRef.current.setFieldsValue({
+          port: null,
+        });
+      });
+    }
     const { id } = data.selectedRows[0];
     // 获取云主机所有的interface
     const instanceInterfaces = await globalServerStore.fetchInterfaceList({
@@ -130,6 +144,7 @@ export default class Associate extends ModalAction {
     );
     this.setState({
       instanceFixedIPs: interfacesWithReasons,
+      instanceLoading: false,
     });
     return Promise.resolve().then(() => {
       this.formRef.current.setFieldsValue({
@@ -139,6 +154,9 @@ export default class Associate extends ModalAction {
   };
 
   handlePortSelect = async (data) => {
+    this.setState({
+      fixedIpLoading: true,
+    });
     const { canReachSubnetIdsWithRouterId } = this.state;
     const interfacesWithReason = await getInterfaceWithReason(
       data.selectedRows
@@ -151,6 +169,7 @@ export default class Associate extends ModalAction {
 
     this.setState({
       portFixedIPs,
+      fixedIpLoading: false,
     });
     return Promise.resolve().then(() => {
       this.formRef.current.setFieldsValue({
@@ -200,7 +219,11 @@ export default class Associate extends ModalAction {
 
   get formItems() {
     // console.log(toJS(this.store.list.data));
-    const { resourceType = 'instance', instanceFixedIPs } = this.state;
+    const {
+      resourceType = 'instance',
+      instanceFixedIPs,
+      instanceLoading,
+    } = this.state;
     const ret = [
       {
         name: 'floatingIp',
@@ -239,6 +262,7 @@ export default class Associate extends ModalAction {
               type: 'select-table',
               required: true,
               datas: instanceFixedIPs,
+              isLoading: instanceLoading,
               isMulti: false,
               filterParams: [
                 {

src/pages/network/containers/FloatingIp/actions/CreateDNAT.jsx

@@ -54,8 +54,8 @@ export default class CreateDNAT extends ModalAction {
   }
 
   async getFipAlreadyUsedPorts() {
-    const detail = await globalPortForwardingStore.getFipAlreadyUsedPorts({
+    const detail = await globalPortForwardingStore.fetchList({
-      fipID: this.item.id,
+      fipId: this.item.id,
     });
     this.setState({
       alreadyUsedPorts: detail || [],
@@ -85,6 +85,9 @@ export default class CreateDNAT extends ModalAction {
   }
 
   handlePortSelect = async (data) => {
+    this.setState({
+      fixedIpLoading: true,
+    });
     const { canReachSubnetIdsWithRouterId } = this.state;
     const interfacesWithReason = await getInterfaceWithReason(
       data.selectedRows
@@ -98,6 +101,7 @@ export default class CreateDNAT extends ModalAction {
     this.setState({
       portFixedIPs,
       fixed_ip_address: undefined,
+      fixedIpLoading: false,
     });
 
     this.formRef.current &&

src/pages/network/containers/LoadBalancers/LoadBalancerInstance/actions/AssociateFIP.jsx

@@ -38,6 +38,7 @@ export default class AssociateFip extends ModalAction {
       portFixedIPs: [],
       canAssociateFloatingIPs: [],
       canReachSubnetIdsWithRouterId: [],
+      portLoading: true,
     };
   }
 
@@ -69,6 +70,7 @@ export default class AssociateFip extends ModalAction {
     const interfaces = await getInterfaceWithReason(buildInterfaces);
     this.setState({
       interfaces,
+      portLoading: false,
     });
   }
 
@@ -107,7 +109,7 @@ export default class AssociateFip extends ModalAction {
   };
 
   get formItems() {
-    const { fixed_ip, canAssociateFloatingIPs } = this.state;
+    const { canAssociateFloatingIPs, portLoading, fipLoading } = this.state;
     return [
       {
         name: 'lb',
@@ -121,6 +123,7 @@ export default class AssociateFip extends ModalAction {
         type: 'select-table',
         required: true,
         datas: this.ports,
+        isLoading: portLoading,
         disabledFunc: (record) => !record.available,
         onChange: this.handleFixedIPChange,
         isMulti: false,
@@ -151,7 +154,7 @@ export default class AssociateFip extends ModalAction {
         type: 'select-table',
         required: true,
         datas: canAssociateFloatingIPs,
-        hidden: !fixed_ip,
+        isLoading: fipLoading,
         isMulti: false,
         filterParams: [
           {

src/pages/network/containers/Router/actions/AssociateFip.jsx

@@ -104,6 +104,7 @@ export default class AssociateFip extends ModalAction {
         type: 'select-table',
         required: true,
         datas: this.fipList,
+        isLoading: this.floatingIpStore.list.isLoading,
         isMulti: false,
         filterParams: [
           {

src/pages/network/containers/Router/actions/ConnectSubnet.jsx

@@ -101,6 +101,7 @@ export default class ConnectSubnet extends ModalAction {
   };
 
   get formItems() {
+    const { networkId } = this.state;
     return [
       {
         name: 'name',
@@ -120,6 +121,7 @@ export default class ConnectSubnet extends ModalAction {
         label: t('Subnet'),
         type: 'select-table',
         datas: this.subnets,
+        isLoading: networkId && this.subnetStore.list.isLoading,
         disabledFunc: this.disabledFuncSubnet,
         required: true,
         filterParams: [

src/pages/network/containers/Router/actions/Create.jsx

@@ -118,6 +118,7 @@ export default class Create extends ModalAction {
         label: t('Availability Zone Hints'),
         type: 'select-table',
         datas: this.aZones,
+        isLoading: globalNeutronStore.zoneLoading,
         isMulti: true,
         filterParams: [
           {

src/pages/network/containers/Router/actions/DisconnectSubnet.jsx

@@ -33,6 +33,7 @@ export default class DisconnectSubnet extends ModalAction {
     this.subnetStore = globalSubnetStore;
     this.portStore = new PortStore();
     this.getSubnetList();
+    this.state.subnetLoading = true;
   }
 
   static policy = 'remove_router_interface';
@@ -83,13 +84,14 @@ export default class DisconnectSubnet extends ModalAction {
     });
     this.setState({
       subnets: subnets.map((it) => toJS(it)),
+      subnetLoading: false,
     });
   }
 
   static allowed = () => Promise.resolve(true);
 
   get formItems() {
-    const { subnets = [] } = this.state;
+    const { subnets = [], subnetLoading } = this.state;
     return [
       {
         name: 'name',
@@ -102,6 +104,7 @@ export default class DisconnectSubnet extends ModalAction {
         label: t('Subnet'),
         type: 'select-table',
         datas: subnets,
+        isLoading: subnetLoading,
         required: true,
         filterParams: [
           {

src/pages/network/containers/VPN/EndpointGroup/actions/Create.js

@@ -54,12 +54,16 @@ export default class Create extends ModalAction {
     this.state = {
       subnets: [],
       type: 'subnet',
+      subnetLoading: true,
     };
     this.getAllSubnets();
   }
 
   async getAllSubnets() {
     this.allSubnets = await this.subnetStore.pureFetchList();
+    this.setState({
+      subnetLoading: false,
+    });
   }
 
   get defaultValue() {
@@ -87,18 +91,22 @@ export default class Create extends ModalAction {
   };
 
   handleRouterChange = async (value) => {
+    this.setState({
+      subnetLoading: true,
+    });
     const ports = await getPortsWithFixedIPs();
     const allSubnets = getSubnetToRouter(ports, value.selectedRows, false);
     this.setState({
       subnets: this.allSubnets.filter((item) => {
         return allSubnets.findIndex((i) => i.subnet_id === item.id) > -1;
       }),
+      subnetLoading: false,
     });
     this.formRef.current.resetFields(['subnet_id']);
   };
 
   get formItems() {
-    const { subnets, type } = this.state;
+    const { subnets, type, subnetLoading } = this.state;
     const isLocal = type === 'subnet';
 
     return [
@@ -151,6 +159,7 @@ export default class Create extends ModalAction {
         label: t('Subnet'),
         type: 'select-table',
         datas: subnets,
+        isLoading: subnetLoading,
         isMulti: true,
         columns: [
           {

src/pages/network/containers/VirtualAdapter/actions/AssociateFIP.jsx

@@ -38,6 +38,7 @@ export default class AssociateFip extends ModalAction {
       fixed_ip: null,
       canAssociateFloatingIPs: [],
       canReachSubnetIdsWithRouterId: [],
+      portLoading: true,
     };
   }
 
@@ -46,6 +47,7 @@ export default class AssociateFip extends ModalAction {
     const interfaces = await getInterfaceWithReason(buildInterfaces);
     this.setState({
       interfaces,
+      portLoading: false,
     });
   }
 
@@ -104,7 +106,7 @@ export default class AssociateFip extends ModalAction {
   };
 
   get formItems() {
-    const { fixed_ip, canAssociateFloatingIPs } = this.state;
+    const { canAssociateFloatingIPs, portLoading, fipLoading } = this.state;
     return [
       {
         name: 'virtualAdapter',
@@ -118,6 +120,7 @@ export default class AssociateFip extends ModalAction {
         type: 'select-table',
         required: true,
         datas: this.ports,
+        isLoading: portLoading,
         disabledFunc: (record) => !record.available,
         onChange: this.handleFixedIPChange,
         isMulti: false,
@@ -148,7 +151,7 @@ export default class AssociateFip extends ModalAction {
         type: 'select-table',
         required: true,
         datas: canAssociateFloatingIPs,
-        hidden: !fixed_ip,
+        isLoading: fipLoading,
         isMulti: false,
         filterParams: [
           {

src/pages/network/containers/VirtualAdapter/actions/Create.jsx

@@ -265,6 +265,7 @@ export default class CreateAction extends ModalAction {
           'The security group is similar to the firewall function for setting up network access control, or you can go to the console and create a new security group. (Note: The security group you selected will work on all virtual LANS on the instances.)'
         ),
         datas: this.securityGroups,
+        isLoading: this.securityGroupStore.list.isLoading,
         extraParams: { project_id: this.currentProjectId },
         backendPageStore: this.securityGroupStore,
         isMulti: true,

src/pages/storage/containers/Volume/actions/Create/index.jsx

@@ -361,6 +361,7 @@ export default class Create extends FormAction {
         label: t('Operating System'),
         type: 'select-table',
         datas: this.images,
+        isLoading: this.imageStore.list.isLoading,
         required: this.sourceTypeIsImage,
         isMulti: false,
         hidden: !this.sourceTypeIsImage,
@@ -434,6 +435,7 @@ export default class Create extends FormAction {
         ),
         ...volumeTypeSelectProps,
         datas: this.volumeTypes,
+        isLoading: this.volumeTypeStore.list.isLoading,
         required: true,
         extra: this.getVolumeTypeExtra(),
         onChange: this.onVolumeTypeChange,

src/pages/storage/containers/Volume/actions/Migrate.jsx

@@ -30,7 +30,7 @@ export default class Migrate extends ModalAction {
     return 'large';
   }
 
-  get modalSize() {
+  getModalSize() {
     return 'large';
   }
 
@@ -89,6 +89,7 @@ export default class Migrate extends ModalAction {
         type: 'select-table',
         required: true,
         datas: this.pools,
+        isLoading: this.poolStore.list.isLoading,
         disabledFunc: this.disableFunc,
         rowKey: 'name',
         columns: poolColumns,

src/pages/storage/containers/VolumeType/VolumeType/actions/Create.jsx

@@ -148,6 +148,7 @@ export default class Create extends ModalAction {
         isMulti: true,
         hidden: isPublic,
         datas: this.projects,
+        isLoading: this.projectStore.list.isLoading,
         ...projectTableOptions,
       },
     ];

src/pages/storage/containers/VolumeType/VolumeType/actions/ManageAccess.jsx

@@ -113,6 +113,7 @@ export default class ManageAccess extends ModalAction {
         isMulti: true,
         hidden: isPublic,
         datas: this.projects,
+        isLoading: this.projectStore.list.isLoading,
         ...projectTableOptions,
       },
     ];

src/pages/storage/containers/VolumeType/VolumeType/actions/ManageQos.jsx

@@ -79,6 +79,7 @@ export default class ManageQos extends ModalAction {
         type: 'select-table',
         required: false,
         datas: this.QosMap,
+        isLoading: this.store.list.isLoading,
         isMulti: false,
         filterParams: [
           {

src/resources/floatingip.js

@@ -258,7 +258,17 @@ export async function getFipsFromRouterId(router) {
 }
 
 export async function handleFixedIPChange(e) {
+  this.setState({
+    fipLoading: true,
+  });
   const { canReachSubnetIdsWithRouterId } = this.state;
+  if (!e.selectedRows.length) {
+    this.setState({
+      fixed_ip: null,
+      canAssociateFloatingIPs: [],
+      fipLoading: false,
+    });
+  }
   const item = e.selectedRows[0];
   const totalFips = [];
   // 考虑单subnet连接多个路由，并且路由开启了不同的公网网关。
@@ -280,5 +290,6 @@ export async function handleFixedIPChange(e) {
   this.setState({
     fixed_ip: item,
     canAssociateFloatingIPs: norepeatFips,
+    fipLoading: false,
   });
 }

src/resources/port.jsx

@@ -84,7 +84,7 @@ export function getPortsAndReasons(
 }
 
 export function getPortFormItem(device_owner) {
-  const { portFixedIPs } = this.state;
+  const { portFixedIPs, fixedIpLoading } = this.state;
   return [
     {
       name: 'virtual_adapter',
@@ -151,6 +151,7 @@ export function getPortFormItem(device_owner) {
       rowKey: 'fixed_ip_address',
       required: true,
       datas: portFixedIPs,
+      isLoading: fixedIpLoading,
       isMulti: false,
       filterParams: [
         {