57a17b83d2
1. Update Label component to support floating ip's icon 2. Update the floating ip display in the associate fip form 3. Update the floating ip display in the create port forwarding form 4. Update the floating ip display in the edit port forwarding form Change-Id: I38ee2354c387d213cdd574f966be96afb8fcd433
119 lines
3.0 KiB
JavaScript
119 lines
3.0 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 React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import imageSvg from 'asset/image/image.svg';
|
|
import securityImg from 'asset/image/security-group.svg';
|
|
import lbImg from 'asset/image/load-balancer.png';
|
|
|
|
import {
|
|
DesktopOutlined,
|
|
BorderOuterOutlined,
|
|
SecurityScanOutlined,
|
|
InboxOutlined,
|
|
GlobalOutlined,
|
|
GatewayOutlined,
|
|
UserOutlined,
|
|
CameraOutlined,
|
|
SaveOutlined,
|
|
KeyOutlined,
|
|
ClusterOutlined,
|
|
TagOutlined,
|
|
HddOutlined,
|
|
CloudServerOutlined,
|
|
LoadingOutlined,
|
|
TeamOutlined,
|
|
ProjectOutlined,
|
|
AimOutlined,
|
|
} from '@ant-design/icons';
|
|
import styles from './index.less';
|
|
|
|
const ImageIcon = (
|
|
<img src={imageSvg} alt="image_icon" style={{ width: '12px' }} />
|
|
);
|
|
|
|
const SecurityIcon = (
|
|
<img src={securityImg} alt="security_icon" style={{ width: '12px' }} />
|
|
);
|
|
|
|
const LBIcon = <img src={lbImg} alt="lb_icon" style={{ width: '12px' }} />;
|
|
|
|
const iconTypeMap = {
|
|
instance: <DesktopOutlined />,
|
|
router: <BorderOuterOutlined />,
|
|
externalNetwork: <GlobalOutlined />,
|
|
network: <GlobalOutlined />,
|
|
firewall: <SecurityScanOutlined />,
|
|
volume: <InboxOutlined />,
|
|
gateway: <GatewayOutlined />,
|
|
user: <UserOutlined />,
|
|
snapshot: <CameraOutlined />,
|
|
backup: <SaveOutlined />,
|
|
keypair: <KeyOutlined />,
|
|
image: ImageIcon,
|
|
aggregate: <ClusterOutlined />,
|
|
metadata: <TagOutlined />,
|
|
flavor: <HddOutlined />,
|
|
host: <CloudServerOutlined />,
|
|
security: SecurityIcon,
|
|
lb: LBIcon,
|
|
group: <TeamOutlined />,
|
|
project: <ProjectOutlined />,
|
|
floatingIp: <AimOutlined />,
|
|
};
|
|
|
|
export default class index extends Component {
|
|
static propTypes = {
|
|
content: PropTypes.any,
|
|
value: PropTypes.any,
|
|
icon: PropTypes.node,
|
|
iconType: PropTypes.string,
|
|
};
|
|
|
|
static defaultProps = {
|
|
icon: null,
|
|
iconType: '',
|
|
content: '',
|
|
value: null,
|
|
};
|
|
|
|
renderIcon() {
|
|
const { icon, iconType } = this.props;
|
|
if (iconType) {
|
|
const iconComp = iconTypeMap[iconType] || null;
|
|
return <span className={styles.icon}>{iconComp}</span>;
|
|
}
|
|
return <span className={styles.icon}>{icon || null}</span>;
|
|
}
|
|
|
|
render() {
|
|
const { content, value, iconType, showLoading, ...rest } = this.props;
|
|
const failValues = [undefined, null, ''];
|
|
if (content) {
|
|
return content;
|
|
}
|
|
return (
|
|
<span {...rest}>
|
|
{this.renderIcon()}
|
|
{showLoading && failValues.includes(value) ? (
|
|
<LoadingOutlined />
|
|
) : (
|
|
value
|
|
)}
|
|
</span>
|
|
);
|
|
}
|
|
}
|