feat: 端口管理页面添加网卡功能和服务器背板可视化
- 在端口管理页面添加网卡管理功能，与3D可视化页面同步 - 新增 ServerBackplanePanel 组件，按真实服务器背板布局展示网卡和端口 - 支持板载网卡、管理口、PCIe扩展插槽的可视化展示 - 添加网卡-端口层级展示，点击网卡可查看端口详情 - 更新 VirtualDeviceList 组件，集成服务器背板视图
This commit is contained in:
zhang1106
@@ -0,0 +1,590 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { Badge, Space, Typography, Spin, Empty, Button, Tooltip, Tag, Modal } from 'antd';
|
||||
import {
|
||||
CloudServerOutlined,
|
||||
PlusOutlined,
|
||||
ReloadOutlined,
|
||||
ApiOutlined,
|
||||
ThunderboltOutlined,
|
||||
DesktopOutlined,
|
||||
UsbOutlined,
|
||||
MonitorOutlined,
|
||||
SettingOutlined
|
||||
} from '@ant-design/icons';
|
||||
import PortPanel from './PortPanel';
|
||||
import axios from 'axios';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const designTokens = {
|
||||
colors: {
|
||||
primary: { main: '#667eea', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
|
||||
success: '#10b981',
|
||||
error: '#ef4444',
|
||||
warning: '#f59e0b',
|
||||
metal: { light: '#9ca3af', DEFAULT: '#6b7280', dark: '#4b5563' },
|
||||
slot: { empty: '#d1d5db', occupied: '#3b82f6' }
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 服务器背板可视化组件
|
||||
* 按照真实服务器背板布局展示网卡和端口
|
||||
*
|
||||
* @param {string} deviceId - 设备ID
|
||||
* @param {string} deviceName - 设备名称
|
||||
* @param {Object[]} cables - 接线列表
|
||||
* @param {Object[]} allDevices - 所有设备列表
|
||||
* @param {Function} onPortClick - 端口点击回调
|
||||
* @param {Function} onManageNetworkCards - 网卡管理回调
|
||||
*/
|
||||
const ServerBackplanePanel = ({
|
||||
deviceId,
|
||||
deviceName,
|
||||
cables,
|
||||
allDevices,
|
||||
onPortClick,
|
||||
onManageNetworkCards
|
||||
}) => {
|
||||
const [cards, setCards] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedSlot, setSelectedSlot] = useState(null);
|
||||
|
||||
// 获取网卡及端口数据
|
||||
const fetchData = useCallback(async () => {
|
||||
if (!deviceId) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.get(`/api/network-cards/device/${deviceId}/with-ports`);
|
||||
const cardsData = response.data || [];
|
||||
setCards(cardsData);
|
||||
} catch (error) {
|
||||
console.error('获取网卡数据失败:', error);
|
||||
setCards([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [deviceId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
// 按类型和槽位号对网卡进行分类
|
||||
const categorizeCards = () => {
|
||||
const onboard = []; // 板载网卡
|
||||
const management = []; // 管理口
|
||||
const expansionSlots = []; // 扩展插槽
|
||||
|
||||
cards.forEach(card => {
|
||||
const slotNum = card.slotNumber;
|
||||
const name = (card.name || '').toLowerCase();
|
||||
|
||||
// 判断网卡类型
|
||||
if (name.includes('idrac') || name.includes('ilo') || name.includes('bmc') || name.includes('mgmt') || name.includes('管理')) {
|
||||
management.push({ ...card, type: 'management' });
|
||||
} else if (slotNum === 0 || name.includes('onboard') || name.includes('板载') || name.includes('内置')) {
|
||||
onboard.push({ ...card, type: 'onboard' });
|
||||
} else {
|
||||
expansionSlots.push({ ...card, type: 'expansion', slotIndex: slotNum });
|
||||
}
|
||||
});
|
||||
|
||||
// 按槽位号排序扩展插槽
|
||||
expansionSlots.sort((a, b) => (a.slotNumber || 0) - (b.slotNumber || 0));
|
||||
|
||||
return { onboard, management, expansionSlots };
|
||||
};
|
||||
|
||||
const { onboard, management, expansionSlots } = categorizeCards();
|
||||
|
||||
// 渲染管理口区域（左侧）
|
||||
const renderManagementArea = () => {
|
||||
const mgmtCard = management[0];
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '80px',
|
||||
background: 'linear-gradient(180deg, #374151 0%, #1f2937 100%)',
|
||||
borderRadius: '4px',
|
||||
padding: '8px 4px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
border: '2px solid #4b5563',
|
||||
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)'
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '10px', color: '#9ca3af', fontWeight: 600 }}>MGMT</div>
|
||||
{mgmtCard ? (
|
||||
<div
|
||||
onClick={() => setSelectedSlot(mgmtCard)}
|
||||
style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
background: 'linear-gradient(145deg, #1f2937 0%, #111827 100%)',
|
||||
borderRadius: '4px',
|
||||
border: `2px solid ${mgmtCard.ports?.length > 0 ? designTokens.colors.success : '#6b7280'}`,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.3)'
|
||||
}}
|
||||
>
|
||||
<SettingOutlined style={{ fontSize: 16, color: '#10b981' }} />
|
||||
<span style={{ fontSize: '9px', color: '#9ca3af', marginTop: 2 }}>
|
||||
{mgmtCard.ports?.length || 0}口
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
background: '#374151',
|
||||
borderRadius: '4px',
|
||||
border: '2px dashed #6b7280',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<PlusOutlined style={{ fontSize: 14, color: '#6b7280' }} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 其他接口占位 */}
|
||||
<div style={{ width: '48px', height: '24px', background: '#1f2937', borderRadius: '2px', border: '1px solid #4b5563' }}>
|
||||
<Text style={{ fontSize: '8px', color: '#6b7280', display: 'block', textAlign: 'center', lineHeight: '22px' }}>VGA</Text>
|
||||
</div>
|
||||
<div style={{ width: '48px', height: '16px', background: '#1f2937', borderRadius: '2px', border: '1px solid #4b5563' }}>
|
||||
<Text style={{ fontSize: '8px', color: '#6b7280', display: 'block', textAlign: 'center', lineHeight: '14px' }}>USB</Text>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染板载网卡区域
|
||||
const renderOnboardArea = () => {
|
||||
const onboardCard = onboard[0];
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
background: 'linear-gradient(180deg, #4b5563 0%, #374151 100%)',
|
||||
borderRadius: '4px',
|
||||
padding: '12px',
|
||||
border: '2px solid #6b7280',
|
||||
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)'
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
|
||||
<Text style={{ fontSize: '11px', color: '#d1d5db', fontWeight: 600 }}>板载网卡 (Onboard)</Text>
|
||||
{onboardCard && (
|
||||
<Badge
|
||||
count={onboardCard.ports?.length || 0}
|
||||
style={{ backgroundColor: designTokens.colors.primary.main }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{onboardCard ? (
|
||||
<div
|
||||
onClick={() => setSelectedSlot(onboardCard)}
|
||||
style={{
|
||||
background: 'linear-gradient(145deg, #1f2937 0%, #111827 100%)',
|
||||
borderRadius: '6px',
|
||||
padding: '12px',
|
||||
border: `2px solid ${onboardCard.ports?.length > 0 ? designTokens.colors.primary.main : '#6b7280'}`,
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s'
|
||||
}}
|
||||
>
|
||||
{/* 4个RJ45端口布局 */}
|
||||
<div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
|
||||
{[0, 1, 2, 3].map((idx) => {
|
||||
const port = onboardCard.ports?.[idx];
|
||||
const hasPort = !!port;
|
||||
const isOccupied = hasPort && port.status === 'occupied';
|
||||
|
||||
return (
|
||||
<Tooltip key={idx} title={hasPort ? `${port.portName} - ${port.status}` : '未配置'}>
|
||||
<div
|
||||
style={{
|
||||
width: '40px',
|
||||
height: '32px',
|
||||
background: hasPort
|
||||
? 'linear-gradient(180deg, #374151 0%, #1f2937 100%)'
|
||||
: '#374151',
|
||||
borderRadius: '4px',
|
||||
border: `2px solid ${hasPort
|
||||
? (isOccupied ? designTokens.colors.success : designTokens.colors.metal.light)
|
||||
: '#4b5563'
|
||||
}`,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
{/* LED指示灯 */}
|
||||
<div
|
||||
style={{
|
||||
width: '4px',
|
||||
height: '4px',
|
||||
borderRadius: '50%',
|
||||
background: hasPort
|
||||
? (isOccupied ? '#10b981' : '#6b7280')
|
||||
: '#374151',
|
||||
position: 'absolute',
|
||||
top: '2px',
|
||||
right: '2px',
|
||||
boxShadow: isOccupied ? '0 0 4px #10b981' : 'none'
|
||||
}}
|
||||
/>
|
||||
<span style={{ fontSize: '8px', color: '#9ca3af' }}>⬡</span>
|
||||
<span style={{ fontSize: '7px', color: '#6b7280', marginTop: '1px' }}>
|
||||
{hasPort ? idx + 1 : '-'}
|
||||
</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
onClick={onManageNetworkCards}
|
||||
style={{
|
||||
background: '#374151',
|
||||
borderRadius: '6px',
|
||||
padding: '20px',
|
||||
border: '2px dashed #6b7280',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
gap: '8px'
|
||||
}}
|
||||
>
|
||||
<PlusOutlined style={{ fontSize: 20, color: '#6b7280' }} />
|
||||
<Text style={{ fontSize: '11px', color: '#9ca3af' }}>添加板载网卡</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染扩展插槽区域
|
||||
const renderExpansionSlots = () => {
|
||||
// 标准2U服务器通常有4-8个PCIe插槽
|
||||
const totalSlots = 6;
|
||||
const slots = [];
|
||||
|
||||
for (let i = 1; i <= totalSlots; i++) {
|
||||
const card = expansionSlots.find(c => c.slotNumber === i);
|
||||
slots.push({ slotNumber: i, card });
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
flex: 1.5,
|
||||
background: 'linear-gradient(180deg, #4b5563 0%, #374151 100%)',
|
||||
borderRadius: '4px',
|
||||
padding: '12px',
|
||||
border: '2px solid #6b7280',
|
||||
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.1)'
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
|
||||
<Text style={{ fontSize: '11px', color: '#d1d5db', fontWeight: 600 }}>PCIe 扩展插槽</Text>
|
||||
<Space size={4}>
|
||||
<Badge count={expansionSlots.length} style={{ backgroundColor: designTokens.colors.primary.main }} />
|
||||
<Text style={{ fontSize: '10px', color: '#9ca3af' }}>/{totalSlots}</Text>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||||
{slots.map(({ slotNumber, card }) => (
|
||||
<Tooltip
|
||||
key={slotNumber}
|
||||
title={card ? `${card.name} (${card.ports?.length || 0}口)` : `插槽 ${slotNumber} (空闲)`}
|
||||
>
|
||||
<div
|
||||
onClick={() => card && setSelectedSlot(card)}
|
||||
style={{
|
||||
width: '70px',
|
||||
height: '90px',
|
||||
background: card
|
||||
? 'linear-gradient(145deg, #1f2937 0%, #111827 100%)'
|
||||
: '#374151',
|
||||
borderRadius: '4px',
|
||||
border: `2px solid ${card ? designTokens.colors.slot.occupied : designTokens.colors.slot.empty}`,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '6px',
|
||||
cursor: card ? 'pointer' : 'default',
|
||||
transition: 'all 0.2s',
|
||||
boxShadow: card ? '0 2px 8px rgba(59, 130, 246, 0.3)' : 'none'
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: '9px', color: '#6b7280', fontWeight: 600 }}>Slot {slotNumber}</Text>
|
||||
|
||||
{card ? (
|
||||
<>
|
||||
<CloudServerOutlined style={{ fontSize: 20, color: '#3b82f6' }} />
|
||||
<div style={{ display: 'flex', gap: '2px', flexWrap: 'wrap', justifyContent: 'center' }}>
|
||||
{card.ports?.slice(0, 4).map((port, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '1px',
|
||||
background: port.status === 'occupied' ? '#10b981' : '#6b7280',
|
||||
boxShadow: port.status === 'occupied' ? '0 0 2px #10b981' : 'none'
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
{card.ports?.length > 4 && (
|
||||
<Text style={{ fontSize: '8px', color: '#9ca3af' }}>+{card.ports.length - 4}</Text>
|
||||
)}
|
||||
</div>
|
||||
<Text style={{ fontSize: '8px', color: '#9ca3af' }}>{card.ports?.length || 0}口</Text>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ width: '40px', height: '40px', border: '2px dashed #4b5563', borderRadius: '4px' }} />
|
||||
<Text style={{ fontSize: '8px', color: '#6b7280' }}>空闲</Text>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染电源区域（右侧）
|
||||
const renderPowerArea = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '100px',
|
||||
background: 'linear-gradient(180deg, #374151 0%, #1f2937 100%)',
|
||||
borderRadius: '4px',
|
||||
padding: '8px',
|
||||
border: '2px solid #4b5563',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '8px'
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: '10px', color: '#9ca3af', fontWeight: 600, textAlign: 'center' }}>电源</Text>
|
||||
{[1, 2].map((psu) => (
|
||||
<div
|
||||
key={psu}
|
||||
style={{
|
||||
flex: 1,
|
||||
background: 'linear-gradient(145deg, #1f2937 0%, #111827 100%)',
|
||||
borderRadius: '4px',
|
||||
border: '2px solid #10b981',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '4px'
|
||||
}}
|
||||
>
|
||||
<ThunderboltOutlined style={{ fontSize: 20, color: '#10b981' }} />
|
||||
<Text style={{ fontSize: '9px', color: '#10b981' }}>PSU {psu}</Text>
|
||||
<div
|
||||
style={{
|
||||
width: '6px',
|
||||
height: '6px',
|
||||
borderRadius: '50%',
|
||||
background: '#10b981',
|
||||
boxShadow: '0 0 6px #10b981'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '40px' }}>
|
||||
<Spin size="large" tip="加载背板数据中..." />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||
{/* 工具栏 */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '8px 12px',
|
||||
background: '#f8fafc',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #e2e8f0'
|
||||
}}
|
||||
>
|
||||
<Space>
|
||||
<Badge count={cards.filter(c => !c.isUngrouped).length} style={{ backgroundColor: designTokens.colors.primary.main }} />
|
||||
<Text type="secondary" style={{ fontSize: '13px' }}>个网卡</Text>
|
||||
<Badge
|
||||
count={cards.reduce((acc, card) => acc + (card.ports?.length || 0), 0)}
|
||||
style={{ backgroundColor: '#667eea' }}
|
||||
/>
|
||||
<Text type="secondary" style={{ fontSize: '13px' }}>个端口</Text>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button size="small" icon={<ReloadOutlined />} onClick={fetchData}>
|
||||
刷新
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={<CloudServerOutlined />}
|
||||
onClick={onManageNetworkCards}
|
||||
style={{ background: designTokens.colors.primary.gradient, border: 'none' }}
|
||||
>
|
||||
网卡管理
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{/* 服务器背板主体 */}
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(180deg, #6b7280 0%, #4b5563 100%)',
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
border: '3px solid #374151',
|
||||
boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.3)'
|
||||
}}
|
||||
>
|
||||
{/* 服务器标识 */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '12px',
|
||||
padding: '6px 12px',
|
||||
background: 'rgba(0,0,0,0.3)',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
>
|
||||
<DesktopOutlined style={{ fontSize: 14, color: '#9ca3af', marginRight: 8 }} />
|
||||
<Text style={{ fontSize: '12px', color: '#d1d5db', fontWeight: 600 }}>
|
||||
{deviceName || '服务器'} - 背板视图
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* 背板布局 */}
|
||||
<div style={{ display: 'flex', gap: '12px', alignItems: 'stretch' }}>
|
||||
{/* 左侧：管理口区域 */}
|
||||
{renderManagementArea()}
|
||||
|
||||
{/* 中间左：板载网卡 */}
|
||||
{renderOnboardArea()}
|
||||
|
||||
{/* 中间：扩展插槽 */}
|
||||
{renderExpansionSlots()}
|
||||
|
||||
{/* 右侧：电源 */}
|
||||
{renderPowerArea()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 选中插槽的端口详情模态框 */}
|
||||
<Modal
|
||||
title={
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<CloudServerOutlined style={{ color: '#667eea' }} />
|
||||
<span>
|
||||
{selectedSlot?.name}
|
||||
{selectedSlot?.slotNumber > 0 && ` (Slot ${selectedSlot.slotNumber})`}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
open={!!selectedSlot}
|
||||
onCancel={() => setSelectedSlot(null)}
|
||||
footer={null}
|
||||
width={700}
|
||||
destroyOnClose
|
||||
>
|
||||
{selectedSlot && (
|
||||
<div>
|
||||
<div style={{ marginBottom: '16px', padding: '12px', background: '#f8fafc', borderRadius: '8px' }}>
|
||||
<Space direction="vertical" size={4} style={{ width: '100%' }}>
|
||||
<Text type="secondary">类型: {selectedSlot.type === 'onboard' ? '板载网卡' : selectedSlot.type === 'management' ? '管理口' : '扩展网卡'}</Text>
|
||||
{selectedSlot.description && <Text type="secondary">描述: {selectedSlot.description}</Text>}
|
||||
<div>
|
||||
<Text type="secondary">端口统计: </Text>
|
||||
<Space size={8}>
|
||||
<Tag color="success">空闲: {selectedSlot.stats?.free || 0}</Tag>
|
||||
<Tag color="processing">占用: {selectedSlot.stats?.occupied || 0}</Tag>
|
||||
{selectedSlot.stats?.fault > 0 && <Tag color="error">故障: {selectedSlot.stats.fault}</Tag>}
|
||||
<Tag color="blue">总计: {selectedSlot.ports?.length || 0}</Tag>
|
||||
</Space>
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{selectedSlot.ports && selectedSlot.ports.length > 0 ? (
|
||||
<PortPanel
|
||||
ports={selectedSlot.ports}
|
||||
deviceName={deviceName}
|
||||
deviceId={deviceId}
|
||||
cables={cables}
|
||||
devices={allDevices}
|
||||
onPortClick={onPortClick}
|
||||
compact={true}
|
||||
/>
|
||||
) : (
|
||||
<Empty
|
||||
description={
|
||||
<span>
|
||||
该网卡暂无端口
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={onManageNetworkCards}
|
||||
style={{ padding: 0, marginTop: 8 }}
|
||||
>
|
||||
前往网卡管理添加端口
|
||||
</Button>
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServerBackplanePanel;
|
||||
Reference in New Issue
Block a user