baha/skyline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix port forwarding display in fip list page

Browse Source 
1. Fix resourceName check
2. Update port fowarding render && stringify

Change-Id: If32652b7b13c3591a4824912b5752ccf324d7c7b
This commit is contained in:
Jingwei.Zhang 2022-07-12 17:17:41 +08:00
parent d55f42c12c
commit 15d5998e11
1 changed files with 71 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/pages/network/containers/FloatingIp/index.jsx
View File

@ -24,7 +24,6 @@ import { emptyActionConfig } from 'utils/constants';
import { Col, Popover, Row } from 'antd';
import { FileTextOutlined } from '@ant-design/icons';
import { qosEndpoint } from 'client/client/constants';
import { enablePFW } from 'resources/neutron/neutron';
import { getOptions } from 'utils';
import styles from './styles.less';
import actionConfigs from './actions';
@ -95,7 +94,6 @@ export class FloatingIps extends Base {
updateFetchParams = (params) => {
if (this.inQosDetail) {
console.log('params', params);
const { id, ...rest } = params;
return {
qos_policy_id: id,
@ -145,6 +143,73 @@ export class FloatingIps extends Base {
return true;
}
getRecordPortForwarding(record) {
return (record.port_forwardings || []).sort(
(a, b) => a.external_port - b.external_port
);
}
getPortForwardingRender(record) {
const data = this.getRecordPortForwarding(record);
if (!data.length) {
return null;
}
return (
<Popover
content={
<Row className={styles['popover-row']} gutter={[8, 8]}>
{data.map((i, idx) => (
<Col span={24} key={`pfw-${idx}`}>
{`${record.floating_ip_address}:${i.external_port} => ${i.internal_ip_address}:${i.internal_port}`}
</Col>
))}
</Row>
}
title={t('Port Forwarding')}
destroyTooltipOnHide
>
{t('{number} port forwarding rules', {
number: data.length,
})}
&nbsp;
<FileTextOutlined />
</Popover>
);
}
getPortForwardingStringify(record) {
const data = this.getRecordPortForwarding(record);
if (!data.length) {
return '';
}
const ret = data.map(
(i) =>
`${record.floating_ip_address}:${i.external_port} => ${i.internal_ip_address}:${i.internal_port}`
);
const total = t('{number} port forwarding rules', {
number: data.length,
});
return [total, ...ret].join('\n');
}
getResourceRender(value, record) {
const hasResource = value ? value !== '-' : false;
if (hasResource) {
return value;
}
const pfsRender = this.getPortForwardingRender(record);
return pfsRender || '-';
}
geResourceStringify(value, record) {
const hasResource = value ? value !== '-' : false;
if (hasResource) {
return value;
}
const portForwarding = this.getPortForwardingStringify(record);
return portForwarding || '-';
}
getColumns() {
return [
{
@ -177,51 +242,11 @@ export class FloatingIps extends Base {
{
title: t('Associated Resource'),
dataIndex: 'resource_name',
render: (resource_name, record) => {
if (
!resource_name &&
enablePFW() &&
record.port_forwardings.length !== 0
) {
return (
<>
{t('{number} port forwarding rules', {
number: record.port_forwardings.length,
})}
&nbsp;
<Popover
content={
<Row className={styles['popover-row']} gutter={[8, 8]}>
{record.port_forwardings
.sort((a, b) => a.external_port - b.external_port)
.map((i, idx) => (
<Col span={24} key={`pfw-${idx}`}>
{`${record.floating_ip_address}:${i.external_port} => ${i.internal_ip_address}:${i.internal_port}`}
</Col>
))}
</Row>
}
title={t('Port Forwarding')}
destroyTooltipOnHide
>
<FileTextOutlined />
</Popover>
</>
);
}
return resource_name || '';
render: (value, record) => {
return this.getResourceRender(value, record);
},
stringify: (resource_name, record) => {
if (!resource_name && (record.port_forwardings || []).length !== 0) {
const ret = record.port_forwardings
.sort((a, b) => a.external_port - b.external_port)
.map(
(i) =>
`${record.floating_ip_address}:${i.external_port} => ${i.internal_ip_address}:${i.internal_port}`
);
return ret.join('\n');
}
return resource_name;
stringify: (value, record) => {
return this.geResourceStringify(value, record);
},
isHideable: true,
sorter: false,