skyline/src/pages/network/containers/LoadBalancers/LoadBalancerInstance/actions/AssociateFIP.jsx
zhangjingwei 20a309ef83 fix: Fix select table loading in form
Add loading when SelectTable component fetch data

Change-Id: If36411e74304061d305fb61b7954e1e564ce40e1
2021-08-26 14:39:07 +08:00

195 lines
4.8 KiB
JavaScript

// Copyright 2021 99cloud
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { inject, observer } from 'mobx-react';
import globalFloatingIpsStore from 'stores/neutron/floatingIp';
import { ModalAction } from 'containers/Action';
import { getPortsAndReasons } from 'resources/port';
import {
getInterfaceWithReason,
handleFixedIPChange,
} from 'resources/floatingip';
import { getCanReachSubnetIdsWithRouterIdInComponent } from 'resources/router';
@inject('rootStore')
@observer
export default class AssociateFip extends ModalAction {
static id = 'AssociateFip';
static title = t('Associate Floating IP');
init() {
this.getInterfaces();
getCanReachSubnetIdsWithRouterIdInComponent.call(this);
this.state = {
interfaces: [],
fixed_ip: null,
portFixedIPs: [],
canAssociateFloatingIPs: [],
canReachSubnetIdsWithRouterId: [],
portLoading: true,
};
}
static get modalSize() {
return 'large';
}
getModalSize() {
return 'large';
}
get name() {
return t('Associate Floating IP');
}
async getInterfaces() {
const buildInterfaces = [
{
port_id: this.item.vip_port_id,
network_id: this.item.vip_network_id,
fixed_ips: [
{
ip_address: this.item.vip_address,
subnet_id: this.item.vip_subnet_id,
},
],
},
];
const interfaces = await getInterfaceWithReason(buildInterfaces);
this.setState({
interfaces,
portLoading: false,
});
}
get ports() {
const { interfaces, canReachSubnetIdsWithRouterId } = this.state;
return getPortsAndReasons.call(
this,
interfaces,
canReachSubnetIdsWithRouterId
);
}
get defaultValue() {
const { name } = this.item;
const value = {
lb: name,
};
return value;
}
static policy = 'update_floatingip';
handleFixedIPChange = (e) => handleFixedIPChange.call(this, e);
static allowed = (item, containerProps) => {
const { isAdminPage = false } = containerProps;
return Promise.resolve(!isAdminPage && checkStatus(item) && hasNoFip(item));
function checkStatus(i) {
return i.provisioning_status === 'ACTIVE';
}
function hasNoFip(i) {
return i.fip === null || i.fip === undefined;
}
};
get formItems() {
const { canAssociateFloatingIPs, portLoading, fipLoading } = this.state;
return [
{
name: 'lb',
label: t('Load Balancer'),
type: 'label',
iconType: 'instance',
},
{
name: 'fixed_ip',
label: t('Fixed IP'),
type: 'select-table',
required: true,
datas: this.ports,
isLoading: portLoading,
disabledFunc: (record) => !record.available,
onChange: this.handleFixedIPChange,
isMulti: false,
filterParams: [
{
label: t('Ip Address'),
name: 'name',
},
],
columns: [
{
title: t('Ip Address'),
dataIndex: 'name',
},
{
title: t('Subnet ID'),
dataIndex: 'subnet_id',
},
{
title: t('Reason'),
dataIndex: 'reason',
},
],
},
{
name: 'fip',
label: t('Floating Ip Address'),
type: 'select-table',
required: true,
datas: canAssociateFloatingIPs,
isLoading: fipLoading,
isMulti: false,
filterParams: [
{
label: t('Floating Ip Address'),
name: 'name',
},
],
columns: [
{
title: t('Floating Ip Address'),
dataIndex: 'name',
},
{
title: t('Network'),
dataIndex: 'network_name',
},
{
title: t('Created At'),
dataIndex: 'created_at',
valueRender: 'sinceTime',
},
],
},
];
}
onSubmit = (values) => {
const { fixed_ip, fip } = values;
const selectedFixedIP = fixed_ip.selectedRows[0];
const fipId = fip.selectedRowKeys[0];
return globalFloatingIpsStore.associateFip({
id: fipId,
port_id: this.item.vip_port_id,
fixed_ip_address: selectedFixedIP.ip_address,
});
};
}