mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-05-03 05:48:24 +00:00
22d0b73d21
* fix: fix model deployment style issues, lint problems, and i18n gaps. * fix: adjust the key not to be displayed on the frontend, tested via the backend. * fix: adjust the sidebar configuration logic to use the default configuration items if they are not defined.
602 lines
21 KiB
JavaScript
602 lines
21 KiB
JavaScript
/*
|
|
Copyright (C) 2025 QuantumNous
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
For commercial licensing, please contact support@quantumnous.com
|
|
*/
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
Modal,
|
|
Typography,
|
|
Card,
|
|
Tag,
|
|
Progress,
|
|
Descriptions,
|
|
Spin,
|
|
Empty,
|
|
Button,
|
|
Badge,
|
|
Tooltip,
|
|
} from '@douyinfe/semi-ui';
|
|
import {
|
|
FaInfoCircle,
|
|
FaServer,
|
|
FaClock,
|
|
FaMapMarkerAlt,
|
|
FaDocker,
|
|
FaMoneyBillWave,
|
|
FaChartLine,
|
|
FaCopy,
|
|
FaLink,
|
|
} from 'react-icons/fa';
|
|
import { IconRefresh } from '@douyinfe/semi-icons';
|
|
import {
|
|
API,
|
|
showError,
|
|
showSuccess,
|
|
timestamp2string,
|
|
} from '../../../../helpers';
|
|
|
|
const { Text, Title } = Typography;
|
|
|
|
const ViewDetailsModal = ({ visible, onCancel, deployment, t }) => {
|
|
const [details, setDetails] = useState(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [containers, setContainers] = useState([]);
|
|
const [containersLoading, setContainersLoading] = useState(false);
|
|
|
|
const fetchDetails = async () => {
|
|
if (!deployment?.id) return;
|
|
|
|
setLoading(true);
|
|
try {
|
|
const response = await API.get(`/api/deployments/${deployment.id}`);
|
|
if (response.data.success) {
|
|
setDetails(response.data.data);
|
|
}
|
|
} catch (error) {
|
|
showError(
|
|
t('获取详情失败') +
|
|
': ' +
|
|
(error.response?.data?.message || error.message),
|
|
);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchContainers = async () => {
|
|
if (!deployment?.id) return;
|
|
|
|
setContainersLoading(true);
|
|
try {
|
|
const response = await API.get(
|
|
`/api/deployments/${deployment.id}/containers`,
|
|
);
|
|
if (response.data.success) {
|
|
setContainers(response.data.data?.containers || []);
|
|
}
|
|
} catch (error) {
|
|
showError(
|
|
t('获取容器信息失败') +
|
|
': ' +
|
|
(error.response?.data?.message || error.message),
|
|
);
|
|
} finally {
|
|
setContainersLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (visible && deployment?.id) {
|
|
fetchDetails();
|
|
fetchContainers();
|
|
} else if (!visible) {
|
|
setDetails(null);
|
|
setContainers([]);
|
|
}
|
|
}, [visible, deployment?.id]);
|
|
|
|
const handleCopyId = () => {
|
|
navigator.clipboard.writeText(deployment?.id);
|
|
showSuccess(t('已复制 ID 到剪贴板'));
|
|
};
|
|
|
|
const handleRefresh = () => {
|
|
fetchDetails();
|
|
fetchContainers();
|
|
};
|
|
|
|
const getStatusConfig = (status) => {
|
|
const statusConfig = {
|
|
running: { color: 'green', text: '运行中', icon: '🟢' },
|
|
completed: { color: 'green', text: '已完成', icon: '✅' },
|
|
'deployment requested': { color: 'blue', text: '部署请求中', icon: '🔄' },
|
|
'termination requested': {
|
|
color: 'orange',
|
|
text: '终止请求中',
|
|
icon: '⏸️',
|
|
},
|
|
destroyed: { color: 'red', text: '已销毁', icon: '🔴' },
|
|
failed: { color: 'red', text: '失败', icon: '❌' },
|
|
};
|
|
return statusConfig[status] || { color: 'grey', text: status, icon: '❓' };
|
|
};
|
|
|
|
const statusConfig = getStatusConfig(deployment?.status);
|
|
|
|
return (
|
|
<Modal
|
|
title={
|
|
<div className='flex items-center gap-2'>
|
|
<FaInfoCircle className='text-blue-500' />
|
|
<span>{t('容器详情')}</span>
|
|
</div>
|
|
}
|
|
visible={visible}
|
|
onCancel={onCancel}
|
|
footer={
|
|
<div className='flex justify-between'>
|
|
<Button
|
|
icon={<IconRefresh />}
|
|
onClick={handleRefresh}
|
|
loading={loading || containersLoading}
|
|
theme='borderless'
|
|
>
|
|
{t('刷新')}
|
|
</Button>
|
|
<Button onClick={onCancel}>{t('关闭')}</Button>
|
|
</div>
|
|
}
|
|
width={800}
|
|
className='deployment-details-modal'
|
|
>
|
|
{loading && !details ? (
|
|
<div className='flex items-center justify-center py-12'>
|
|
<Spin size='large' tip={t('加载详情中...')} />
|
|
</div>
|
|
) : details ? (
|
|
<div className='space-y-4 max-h-[600px] overflow-y-auto'>
|
|
{/* Basic Info */}
|
|
<Card
|
|
title={
|
|
<div className='flex items-center gap-2'>
|
|
<FaServer className='text-blue-500' />
|
|
<span>{t('基本信息')}</span>
|
|
</div>
|
|
}
|
|
className='border-0 shadow-sm'
|
|
>
|
|
<Descriptions
|
|
data={[
|
|
{
|
|
key: t('容器名称'),
|
|
value: (
|
|
<div className='flex items-center gap-2'>
|
|
<Text strong className='text-base'>
|
|
{details.deployment_name || details.id}
|
|
</Text>
|
|
<Button
|
|
size='small'
|
|
theme='borderless'
|
|
icon={<FaCopy />}
|
|
onClick={handleCopyId}
|
|
className='opacity-70 hover:opacity-100'
|
|
/>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: t('容器ID'),
|
|
value: (
|
|
<Text type='secondary' className='font-mono text-sm'>
|
|
{details.id}
|
|
</Text>
|
|
),
|
|
},
|
|
{
|
|
key: t('状态'),
|
|
value: (
|
|
<div className='flex items-center gap-2'>
|
|
<span>{statusConfig.icon}</span>
|
|
<Tag color={statusConfig.color}>
|
|
{t(statusConfig.text)}
|
|
</Tag>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: t('创建时间'),
|
|
value: timestamp2string(details.created_at),
|
|
},
|
|
]}
|
|
/>
|
|
</Card>
|
|
|
|
{/* Hardware & Performance */}
|
|
<Card
|
|
title={
|
|
<div className='flex items-center gap-2'>
|
|
<FaChartLine className='text-green-500' />
|
|
<span>{t('硬件与性能')}</span>
|
|
</div>
|
|
}
|
|
className='border-0 shadow-sm'
|
|
>
|
|
<div className='space-y-4'>
|
|
<Descriptions
|
|
data={[
|
|
{
|
|
key: t('硬件类型'),
|
|
value: (
|
|
<div className='flex items-center gap-2'>
|
|
<Tag color='blue'>{details.brand_name}</Tag>
|
|
<Text strong>{details.hardware_name}</Text>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: t('GPU数量'),
|
|
value: (
|
|
<div className='flex items-center gap-2'>
|
|
<Badge
|
|
count={details.total_gpus}
|
|
theme='solid'
|
|
type='primary'
|
|
>
|
|
<FaServer className='text-purple-500' />
|
|
</Badge>
|
|
<Text>
|
|
{t('总计')} {details.total_gpus} {t('个GPU')}
|
|
</Text>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: t('容器配置'),
|
|
value: (
|
|
<div className='space-y-1'>
|
|
<div>
|
|
{t('每容器GPU数')}: {details.gpus_per_container}
|
|
</div>
|
|
<div>
|
|
{t('容器总数')}: {details.total_containers}
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
|
|
{/* Progress Bar */}
|
|
<div className='space-y-2'>
|
|
<div className='flex items-center justify-between'>
|
|
<Text strong>{t('完成进度')}</Text>
|
|
<Text>{details.completed_percent}%</Text>
|
|
</div>
|
|
<Progress
|
|
percent={details.completed_percent}
|
|
status={
|
|
details.completed_percent === 100 ? 'success' : 'normal'
|
|
}
|
|
strokeWidth={8}
|
|
showInfo={false}
|
|
/>
|
|
<div className='flex justify-between text-xs text-gray-500'>
|
|
<span>
|
|
{t('已服务')}: {details.compute_minutes_served} {t('分钟')}
|
|
</span>
|
|
<span>
|
|
{t('剩余')}: {details.compute_minutes_remaining} {t('分钟')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Container Configuration */}
|
|
{details.container_config && (
|
|
<Card
|
|
title={
|
|
<div className='flex items-center gap-2'>
|
|
<FaDocker className='text-blue-600' />
|
|
<span>{t('容器配置')}</span>
|
|
</div>
|
|
}
|
|
className='border-0 shadow-sm'
|
|
>
|
|
<div className='space-y-3'>
|
|
<Descriptions
|
|
data={[
|
|
{
|
|
key: t('镜像地址'),
|
|
value: (
|
|
<Text className='font-mono text-sm break-all'>
|
|
{details.container_config.image_url || 'N/A'}
|
|
</Text>
|
|
),
|
|
},
|
|
{
|
|
key: t('流量端口'),
|
|
value: details.container_config.traffic_port || 'N/A',
|
|
},
|
|
{
|
|
key: t('启动命令'),
|
|
value: (
|
|
<Text className='font-mono text-sm'>
|
|
{details.container_config.entrypoint
|
|
? details.container_config.entrypoint.join(' ')
|
|
: 'N/A'}
|
|
</Text>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
|
|
{/* Environment Variables */}
|
|
{details.container_config.env_variables &&
|
|
Object.keys(details.container_config.env_variables).length >
|
|
0 && (
|
|
<div className='mt-4'>
|
|
<Text strong className='block mb-2'>
|
|
{t('环境变量')}:
|
|
</Text>
|
|
<div className='bg-gray-50 p-3 rounded-lg max-h-32 overflow-y-auto'>
|
|
{Object.entries(
|
|
details.container_config.env_variables,
|
|
).map(([key, value]) => (
|
|
<div
|
|
key={key}
|
|
className='flex gap-2 text-sm font-mono mb-1'
|
|
>
|
|
<span className='text-blue-600 font-medium'>
|
|
{key}=
|
|
</span>
|
|
<span className='text-gray-700 break-all'>
|
|
{String(value)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Containers List */}
|
|
<Card
|
|
title={
|
|
<div className='flex items-center gap-2'>
|
|
<FaServer className='text-indigo-500' />
|
|
<span>{t('容器实例')}</span>
|
|
</div>
|
|
}
|
|
className='border-0 shadow-sm'
|
|
>
|
|
{containersLoading ? (
|
|
<div className='flex items-center justify-center py-6'>
|
|
<Spin tip={t('加载容器信息中...')} />
|
|
</div>
|
|
) : containers.length === 0 ? (
|
|
<Empty
|
|
description={t('暂无容器信息')}
|
|
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
|
/>
|
|
) : (
|
|
<div className='space-y-3'>
|
|
{containers.map((ctr) => (
|
|
<Card
|
|
key={ctr.container_id}
|
|
className='bg-gray-50 border border-gray-100'
|
|
bodyStyle={{ padding: '12px 16px' }}
|
|
>
|
|
<div className='flex flex-wrap items-center justify-between gap-3'>
|
|
<div className='flex flex-col gap-1'>
|
|
<Text strong className='font-mono text-sm'>
|
|
{ctr.container_id}
|
|
</Text>
|
|
<Text size='small' type='secondary'>
|
|
{t('设备')} {ctr.device_id || '--'} · {t('状态')}{' '}
|
|
{ctr.status || '--'}
|
|
</Text>
|
|
<Text size='small' type='secondary'>
|
|
{t('创建时间')}:{' '}
|
|
{ctr.created_at
|
|
? timestamp2string(ctr.created_at)
|
|
: '--'}
|
|
</Text>
|
|
</div>
|
|
<div className='flex flex-col items-end gap-2'>
|
|
<Tag color='blue' size='small'>
|
|
{t('GPU/容器')}: {ctr.gpus_per_container ?? '--'}
|
|
</Tag>
|
|
{ctr.public_url && (
|
|
<Tooltip content={ctr.public_url}>
|
|
<Button
|
|
icon={<FaLink />}
|
|
size='small'
|
|
theme='light'
|
|
onClick={() =>
|
|
window.open(
|
|
ctr.public_url,
|
|
'_blank',
|
|
'noopener,noreferrer',
|
|
)
|
|
}
|
|
>
|
|
{t('访问容器')}
|
|
</Button>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{ctr.events && ctr.events.length > 0 && (
|
|
<div className='mt-3 bg-white rounded-md border border-gray-100 p-3'>
|
|
<Text
|
|
size='small'
|
|
type='secondary'
|
|
className='block mb-2'
|
|
>
|
|
{t('最近事件')}
|
|
</Text>
|
|
<div className='space-y-2 max-h-32 overflow-y-auto'>
|
|
{ctr.events.map((event, index) => (
|
|
<div
|
|
key={`${ctr.container_id}-${event.time}-${index}`}
|
|
className='flex gap-3 text-xs font-mono'
|
|
>
|
|
<span className='text-gray-500 min-w-[140px]'>
|
|
{event.time
|
|
? timestamp2string(event.time)
|
|
: '--'}
|
|
</span>
|
|
<span className='text-gray-700 break-all flex-1'>
|
|
{event.message || '--'}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Location Information */}
|
|
{details.locations && details.locations.length > 0 && (
|
|
<Card
|
|
title={
|
|
<div className='flex items-center gap-2'>
|
|
<FaMapMarkerAlt className='text-orange-500' />
|
|
<span>{t('部署位置')}</span>
|
|
</div>
|
|
}
|
|
className='border-0 shadow-sm'
|
|
>
|
|
<div className='flex flex-wrap gap-2'>
|
|
{details.locations.map((location) => (
|
|
<Tag key={location.id} color='orange' size='large'>
|
|
<div className='flex items-center gap-1'>
|
|
<span>🌍</span>
|
|
<span>
|
|
{location.name} ({location.iso2})
|
|
</span>
|
|
</div>
|
|
</Tag>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Cost Information */}
|
|
<Card
|
|
title={
|
|
<div className='flex items-center gap-2'>
|
|
<FaMoneyBillWave className='text-green-500' />
|
|
<span>{t('费用信息')}</span>
|
|
</div>
|
|
}
|
|
className='border-0 shadow-sm'
|
|
>
|
|
<div className='space-y-3'>
|
|
<div className='flex items-center justify-between p-3 bg-green-50 rounded-lg'>
|
|
<Text>{t('已支付金额')}</Text>
|
|
<Text strong className='text-lg text-green-600'>
|
|
$
|
|
{details.amount_paid
|
|
? details.amount_paid.toFixed(2)
|
|
: '0.00'}{' '}
|
|
USDC
|
|
</Text>
|
|
</div>
|
|
|
|
<div className='grid grid-cols-2 gap-4 text-sm'>
|
|
<div className='flex justify-between'>
|
|
<Text type='secondary'>{t('计费开始')}:</Text>
|
|
<Text>
|
|
{details.started_at
|
|
? timestamp2string(details.started_at)
|
|
: 'N/A'}
|
|
</Text>
|
|
</div>
|
|
<div className='flex justify-between'>
|
|
<Text type='secondary'>{t('预计结束')}:</Text>
|
|
<Text>
|
|
{details.finished_at
|
|
? timestamp2string(details.finished_at)
|
|
: 'N/A'}
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Time Information */}
|
|
<Card
|
|
title={
|
|
<div className='flex items-center gap-2'>
|
|
<FaClock className='text-purple-500' />
|
|
<span>{t('时间信息')}</span>
|
|
</div>
|
|
}
|
|
className='border-0 shadow-sm'
|
|
>
|
|
<div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
|
|
<div className='space-y-2'>
|
|
<div className='flex items-center justify-between'>
|
|
<Text type='secondary'>{t('已运行时间')}:</Text>
|
|
<Text strong>
|
|
{Math.floor(details.compute_minutes_served / 60)}h{' '}
|
|
{details.compute_minutes_served % 60}m
|
|
</Text>
|
|
</div>
|
|
<div className='flex items-center justify-between'>
|
|
<Text type='secondary'>{t('剩余时间')}:</Text>
|
|
<Text strong className='text-orange-600'>
|
|
{Math.floor(details.compute_minutes_remaining / 60)}h{' '}
|
|
{details.compute_minutes_remaining % 60}m
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
<div className='space-y-2'>
|
|
<div className='flex items-center justify-between'>
|
|
<Text type='secondary'>{t('创建时间')}:</Text>
|
|
<Text>{timestamp2string(details.created_at)}</Text>
|
|
</div>
|
|
<div className='flex items-center justify-between'>
|
|
<Text type='secondary'>{t('最后更新')}:</Text>
|
|
<Text>{timestamp2string(details.updated_at)}</Text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
) : (
|
|
<Empty
|
|
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
|
description={t('无法获取容器详情')}
|
|
/>
|
|
)}
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default ViewDetailsModal;
|