1512 lines
50 KiB
JavaScript
1512 lines
50 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, useMemo, useRef } from 'react';
|
||
import {
|
||
Modal,
|
||
Form,
|
||
Input,
|
||
Select,
|
||
InputNumber,
|
||
Switch,
|
||
Collapse,
|
||
Card,
|
||
Divider,
|
||
Button,
|
||
Typography,
|
||
Space,
|
||
Spin,
|
||
Tag,
|
||
Row,
|
||
Col,
|
||
Tooltip,
|
||
Radio,
|
||
} from '@douyinfe/semi-ui';
|
||
import {
|
||
IconPlus,
|
||
IconMinus,
|
||
IconHelpCircle,
|
||
IconCopy,
|
||
} from '@douyinfe/semi-icons';
|
||
import { API } from '../../../../helpers';
|
||
import { showError, showSuccess, copy } from '../../../../helpers';
|
||
|
||
const { Text, Title } = Typography;
|
||
const { Option } = Select;
|
||
const RadioGroup = Radio.Group;
|
||
|
||
const BUILTIN_IMAGE = 'ollama/ollama:latest';
|
||
const DEFAULT_TRAFFIC_PORT = 11434;
|
||
|
||
const generateRandomKey = () => {
|
||
try {
|
||
if (typeof crypto !== 'undefined' && crypto.randomUUID) {
|
||
return `ionet-${crypto.randomUUID().replace(/-/g, '')}`;
|
||
}
|
||
} catch (error) {
|
||
// ignore
|
||
}
|
||
return `ionet-${Math.random().toString(36).slice(2)}${Math.random()
|
||
.toString(36)
|
||
.slice(2)}`;
|
||
};
|
||
|
||
const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
|
||
const [formApi, setFormApi] = useState(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [submitting, setSubmitting] = useState(false);
|
||
|
||
// Resource data states
|
||
const [hardwareTypes, setHardwareTypes] = useState([]);
|
||
const [hardwareTotalAvailable, setHardwareTotalAvailable] = useState(null);
|
||
const [locations, setLocations] = useState([]);
|
||
const [locationTotalAvailable, setLocationTotalAvailable] = useState(null);
|
||
const [priceEstimation, setPriceEstimation] = useState(null);
|
||
|
||
// UI states
|
||
const [loadingHardware, setLoadingHardware] = useState(false);
|
||
const [loadingReplicas, setLoadingReplicas] = useState(false);
|
||
const [loadingPrice, setLoadingPrice] = useState(false);
|
||
const [showAdvanced, setShowAdvanced] = useState(false);
|
||
const [envVariables, setEnvVariables] = useState([{ key: '', value: '' }]);
|
||
const [secretEnvVariables, setSecretEnvVariables] = useState([
|
||
{ key: '', value: '' },
|
||
]);
|
||
const [entrypoint, setEntrypoint] = useState(['']);
|
||
const [args, setArgs] = useState(['']);
|
||
const [imageMode, setImageMode] = useState('builtin');
|
||
const [autoOllamaKey, setAutoOllamaKey] = useState('');
|
||
const customSecretEnvRef = useRef(null);
|
||
const customEnvRef = useRef(null);
|
||
const customImageRef = useRef('');
|
||
const customTrafficPortRef = useRef(null);
|
||
const prevImageModeRef = useRef('builtin');
|
||
const basicSectionRef = useRef(null);
|
||
const priceSectionRef = useRef(null);
|
||
const advancedSectionRef = useRef(null);
|
||
const replicaRequestIdRef = useRef(0);
|
||
const [formDefaults, setFormDefaults] = useState({
|
||
resource_private_name: '',
|
||
image_url: BUILTIN_IMAGE,
|
||
gpus_per_container: 1,
|
||
replica_count: 1,
|
||
duration_hours: 1,
|
||
traffic_port: DEFAULT_TRAFFIC_PORT,
|
||
location_ids: [],
|
||
});
|
||
const [formKey, setFormKey] = useState(0);
|
||
const [priceCurrency, setPriceCurrency] = useState('usdc');
|
||
const normalizeCurrencyValue = (value) => {
|
||
if (typeof value === 'string') return value.toLowerCase();
|
||
if (value && typeof value === 'object') {
|
||
if (typeof value.value === 'string') return value.value.toLowerCase();
|
||
if (typeof value.target?.value === 'string') {
|
||
return value.target.value.toLowerCase();
|
||
}
|
||
}
|
||
return 'usdc';
|
||
};
|
||
|
||
const handleCurrencyChange = (value) => {
|
||
const normalized = normalizeCurrencyValue(value);
|
||
setPriceCurrency(normalized);
|
||
};
|
||
|
||
const hardwareLabelMap = useMemo(() => {
|
||
const map = {};
|
||
hardwareTypes.forEach((hardware) => {
|
||
const displayName = hardware.brand_name
|
||
? `${hardware.brand_name} ${hardware.name}`.trim()
|
||
: hardware.name;
|
||
map[hardware.id] = displayName;
|
||
});
|
||
return map;
|
||
}, [hardwareTypes]);
|
||
|
||
const locationLabelMap = useMemo(() => {
|
||
const map = {};
|
||
locations.forEach((location) => {
|
||
map[location.id] = location.name;
|
||
});
|
||
return map;
|
||
}, [locations]);
|
||
|
||
const getHardwareMaxGpus = (hardwareId) => {
|
||
if (!hardwareId) return 1;
|
||
const hardware = hardwareTypes.find((h) => h.id === hardwareId);
|
||
const maxGpus = Number(hardware?.max_gpus);
|
||
return Number.isFinite(maxGpus) && maxGpus > 0 ? maxGpus : 1;
|
||
};
|
||
|
||
// Form values for price calculation
|
||
const [selectedHardwareId, setSelectedHardwareId] = useState(null);
|
||
const [selectedLocationIds, setSelectedLocationIds] = useState([]);
|
||
const [gpusPerContainer, setGpusPerContainer] = useState(1);
|
||
const [durationHours, setDurationHours] = useState(1);
|
||
const [replicaCount, setReplicaCount] = useState(1);
|
||
|
||
useEffect(() => {
|
||
if (!selectedHardwareId) {
|
||
return;
|
||
}
|
||
|
||
const nextMaxGpus = getHardwareMaxGpus(selectedHardwareId);
|
||
if (gpusPerContainer !== nextMaxGpus) {
|
||
setGpusPerContainer(nextMaxGpus);
|
||
}
|
||
if (formApi) {
|
||
formApi.setValue('gpus_per_container', nextMaxGpus);
|
||
}
|
||
}, [selectedHardwareId, hardwareTypes, formApi, gpusPerContainer]);
|
||
|
||
// Load initial data when modal opens
|
||
useEffect(() => {
|
||
if (visible) {
|
||
loadHardwareTypes();
|
||
resetFormState();
|
||
}
|
||
}, [visible]);
|
||
|
||
// Load available replicas when hardware or locations change
|
||
useEffect(() => {
|
||
if (!visible) {
|
||
return;
|
||
}
|
||
if (selectedHardwareId && gpusPerContainer > 0) {
|
||
loadAvailableReplicas(selectedHardwareId, gpusPerContainer);
|
||
}
|
||
}, [selectedHardwareId, gpusPerContainer, visible]);
|
||
|
||
// Calculate price when relevant parameters change
|
||
useEffect(() => {
|
||
if (!visible) {
|
||
return;
|
||
}
|
||
if (
|
||
selectedHardwareId &&
|
||
selectedLocationIds.length > 0 &&
|
||
gpusPerContainer > 0 &&
|
||
durationHours > 0 &&
|
||
replicaCount > 0
|
||
) {
|
||
calculatePrice();
|
||
} else {
|
||
setPriceEstimation(null);
|
||
}
|
||
}, [
|
||
selectedHardwareId,
|
||
selectedLocationIds,
|
||
gpusPerContainer,
|
||
durationHours,
|
||
replicaCount,
|
||
priceCurrency,
|
||
visible,
|
||
]);
|
||
|
||
useEffect(() => {
|
||
if (!visible) {
|
||
return;
|
||
}
|
||
const prevMode = prevImageModeRef.current;
|
||
if (prevMode === imageMode) {
|
||
return;
|
||
}
|
||
|
||
if (imageMode === 'builtin') {
|
||
if (prevMode === 'custom') {
|
||
if (formApi) {
|
||
customImageRef.current =
|
||
formApi.getValue('image_url') || customImageRef.current;
|
||
customTrafficPortRef.current =
|
||
formApi.getValue('traffic_port') ?? customTrafficPortRef.current;
|
||
}
|
||
customSecretEnvRef.current = secretEnvVariables.map((item) => ({
|
||
...item,
|
||
}));
|
||
customEnvRef.current = envVariables.map((item) => ({ ...item }));
|
||
}
|
||
const newKey = generateRandomKey();
|
||
setAutoOllamaKey(newKey);
|
||
setSecretEnvVariables([{ key: 'OLLAMA_API_KEY', value: newKey }]);
|
||
setEnvVariables([{ key: '', value: '' }]);
|
||
if (formApi) {
|
||
formApi.setValue('image_url', BUILTIN_IMAGE);
|
||
formApi.setValue('traffic_port', DEFAULT_TRAFFIC_PORT);
|
||
}
|
||
} else {
|
||
const restoredSecrets =
|
||
customSecretEnvRef.current && customSecretEnvRef.current.length > 0
|
||
? customSecretEnvRef.current.map((item) => ({ ...item }))
|
||
: [{ key: '', value: '' }];
|
||
const restoredEnv =
|
||
customEnvRef.current && customEnvRef.current.length > 0
|
||
? customEnvRef.current.map((item) => ({ ...item }))
|
||
: [{ key: '', value: '' }];
|
||
setSecretEnvVariables(restoredSecrets);
|
||
setEnvVariables(restoredEnv);
|
||
if (formApi) {
|
||
const restoredImage = customImageRef.current || '';
|
||
formApi.setValue('image_url', restoredImage);
|
||
if (customTrafficPortRef.current) {
|
||
formApi.setValue('traffic_port', customTrafficPortRef.current);
|
||
}
|
||
}
|
||
}
|
||
|
||
prevImageModeRef.current = imageMode;
|
||
}, [imageMode, visible, secretEnvVariables, envVariables, formApi]);
|
||
|
||
useEffect(() => {
|
||
if (!visible || !formApi) {
|
||
return;
|
||
}
|
||
if (imageMode === 'builtin') {
|
||
formApi.setValue('image_url', BUILTIN_IMAGE);
|
||
}
|
||
}, [formApi, imageMode, visible]);
|
||
|
||
useEffect(() => {
|
||
if (!formApi) {
|
||
return;
|
||
}
|
||
if (selectedHardwareId !== null && selectedHardwareId !== undefined) {
|
||
formApi.setValue('hardware_id', selectedHardwareId);
|
||
}
|
||
}, [formApi, selectedHardwareId]);
|
||
|
||
useEffect(() => {
|
||
if (!formApi) {
|
||
return;
|
||
}
|
||
formApi.setValue('location_ids', selectedLocationIds);
|
||
}, [formApi, selectedLocationIds]);
|
||
|
||
useEffect(() => {
|
||
if (!visible) {
|
||
return;
|
||
}
|
||
if (selectedHardwareId) {
|
||
return;
|
||
} else {
|
||
setLocations([]);
|
||
setSelectedLocationIds([]);
|
||
setLocationTotalAvailable(null);
|
||
setLoadingReplicas(false);
|
||
replicaRequestIdRef.current = 0;
|
||
if (formApi) {
|
||
formApi.setValue('location_ids', []);
|
||
}
|
||
}
|
||
}, [selectedHardwareId, visible, formApi]);
|
||
|
||
const resetFormState = () => {
|
||
const randomName = `deployment-${Math.random().toString(36).slice(2, 8)}`;
|
||
const generatedKey = generateRandomKey();
|
||
|
||
setSelectedHardwareId(null);
|
||
setSelectedLocationIds([]);
|
||
setGpusPerContainer(1);
|
||
setDurationHours(1);
|
||
setReplicaCount(1);
|
||
setPriceEstimation(null);
|
||
setLocations([]);
|
||
setLocationTotalAvailable(null);
|
||
setHardwareTotalAvailable(null);
|
||
setEnvVariables([{ key: '', value: '' }]);
|
||
setSecretEnvVariables([{ key: 'OLLAMA_API_KEY', value: generatedKey }]);
|
||
setEntrypoint(['']);
|
||
setArgs(['']);
|
||
setShowAdvanced(false);
|
||
setImageMode('builtin');
|
||
setAutoOllamaKey(generatedKey);
|
||
customSecretEnvRef.current = null;
|
||
customEnvRef.current = null;
|
||
customImageRef.current = '';
|
||
customTrafficPortRef.current = DEFAULT_TRAFFIC_PORT;
|
||
prevImageModeRef.current = 'builtin';
|
||
setFormDefaults({
|
||
resource_private_name: randomName,
|
||
image_url: BUILTIN_IMAGE,
|
||
gpus_per_container: 1,
|
||
replica_count: 1,
|
||
duration_hours: 1,
|
||
traffic_port: DEFAULT_TRAFFIC_PORT,
|
||
location_ids: [],
|
||
});
|
||
setFormKey((prev) => prev + 1);
|
||
setPriceCurrency('usdc');
|
||
};
|
||
|
||
const arraysEqual = (a = [], b = []) =>
|
||
a.length === b.length && a.every((value, index) => value === b[index]);
|
||
|
||
const loadHardwareTypes = async () => {
|
||
try {
|
||
setLoadingHardware(true);
|
||
const response = await API.get('/api/deployments/hardware-types');
|
||
if (response.data.success) {
|
||
const { hardware_types: hardwareList = [], total_available } =
|
||
response.data.data || {};
|
||
|
||
const normalizedHardware = hardwareList.map((hardware) => {
|
||
const availableCountValue = Number(hardware.available_count);
|
||
const availableCount = Number.isNaN(availableCountValue)
|
||
? 0
|
||
: availableCountValue;
|
||
const availableBool =
|
||
typeof hardware.available === 'boolean'
|
||
? hardware.available
|
||
: availableCount > 0;
|
||
|
||
return {
|
||
...hardware,
|
||
available: availableBool,
|
||
available_count: availableCount,
|
||
};
|
||
});
|
||
|
||
const providedTotal = Number(total_available);
|
||
const fallbackTotal = normalizedHardware.reduce(
|
||
(acc, item) =>
|
||
acc +
|
||
(Number.isNaN(item.available_count) ? 0 : item.available_count),
|
||
0,
|
||
);
|
||
const hasProvidedTotal =
|
||
total_available !== undefined &&
|
||
total_available !== null &&
|
||
total_available !== '' &&
|
||
!Number.isNaN(providedTotal);
|
||
|
||
setHardwareTypes(normalizedHardware);
|
||
setHardwareTotalAvailable(
|
||
hasProvidedTotal ? providedTotal : fallbackTotal,
|
||
);
|
||
} else {
|
||
showError(t('获取硬件类型失败: ') + response.data.message);
|
||
}
|
||
} catch (error) {
|
||
showError(t('获取硬件类型失败: ') + error.message);
|
||
} finally {
|
||
setLoadingHardware(false);
|
||
}
|
||
};
|
||
|
||
const loadAvailableReplicas = async (hardwareId, gpuCount) => {
|
||
if (!hardwareId || !gpuCount) {
|
||
setLocations([]);
|
||
setLocationTotalAvailable(null);
|
||
setLoadingReplicas(false);
|
||
return;
|
||
}
|
||
|
||
const requestId = Date.now();
|
||
replicaRequestIdRef.current = requestId;
|
||
setLoadingReplicas(true);
|
||
setLocations([]);
|
||
setLocationTotalAvailable(null);
|
||
|
||
try {
|
||
const response = await API.get(
|
||
`/api/deployments/available-replicas?hardware_id=${hardwareId}&gpu_count=${gpuCount}`,
|
||
);
|
||
|
||
if (replicaRequestIdRef.current !== requestId) {
|
||
return;
|
||
}
|
||
|
||
if (response.data.success) {
|
||
const replicasList = response.data.data?.replicas || [];
|
||
|
||
const nextLocationsMap = new Map();
|
||
replicasList.forEach((replica) => {
|
||
const rawId = replica?.location_id ?? replica?.location?.id;
|
||
if (rawId === null || rawId === undefined) {
|
||
return;
|
||
}
|
||
const id = rawId;
|
||
const mapKey = String(rawId);
|
||
const existing = nextLocationsMap.get(mapKey) || null;
|
||
|
||
const rawIso2 =
|
||
replica?.iso2 ?? replica?.location_iso2 ?? replica?.location?.iso2;
|
||
const iso2 = rawIso2 ? String(rawIso2).toUpperCase() : '';
|
||
|
||
const name =
|
||
replica?.location_name ??
|
||
replica?.location?.name ??
|
||
replica?.name ??
|
||
id;
|
||
|
||
const available = Number(replica?.available_count) || 0;
|
||
if (existing) {
|
||
existing.available += available;
|
||
return;
|
||
}
|
||
|
||
nextLocationsMap.set(mapKey, {
|
||
id,
|
||
name: String(name),
|
||
iso2,
|
||
region:
|
||
replica?.region ??
|
||
replica?.location_region ??
|
||
replica?.location?.region,
|
||
country:
|
||
replica?.country ??
|
||
replica?.location_country ??
|
||
replica?.location?.country,
|
||
code:
|
||
replica?.code ??
|
||
replica?.location_code ??
|
||
replica?.location?.code,
|
||
available,
|
||
});
|
||
});
|
||
|
||
setLocations(Array.from(nextLocationsMap.values()));
|
||
setLocationTotalAvailable(
|
||
Array.from(nextLocationsMap.values()).reduce(
|
||
(total, location) => total + (location.available || 0),
|
||
0,
|
||
),
|
||
);
|
||
} else {
|
||
showError(t('获取可用资源失败: ') + response.data.message);
|
||
setLocationTotalAvailable(null);
|
||
}
|
||
} catch (error) {
|
||
if (replicaRequestIdRef.current === requestId) {
|
||
console.error('Load available replicas error:', error);
|
||
setLocationTotalAvailable(null);
|
||
}
|
||
} finally {
|
||
if (replicaRequestIdRef.current === requestId) {
|
||
setLoadingReplicas(false);
|
||
}
|
||
}
|
||
};
|
||
|
||
const calculatePrice = async () => {
|
||
try {
|
||
setLoadingPrice(true);
|
||
const requestData = {
|
||
location_ids: selectedLocationIds,
|
||
hardware_id: selectedHardwareId,
|
||
gpus_per_container: gpusPerContainer,
|
||
duration_hours: durationHours,
|
||
replica_count: replicaCount,
|
||
currency: priceCurrency?.toLowerCase?.() || priceCurrency,
|
||
duration_type: 'hour',
|
||
duration_qty: durationHours,
|
||
hardware_qty: gpusPerContainer,
|
||
};
|
||
|
||
const response = await API.post(
|
||
'/api/deployments/price-estimation',
|
||
requestData,
|
||
);
|
||
if (response.data.success) {
|
||
setPriceEstimation(response.data.data);
|
||
} else {
|
||
showError(t('价格计算失败: ') + response.data.message);
|
||
setPriceEstimation(null);
|
||
}
|
||
} catch (error) {
|
||
console.error('Price calculation error:', error);
|
||
setPriceEstimation(null);
|
||
} finally {
|
||
setLoadingPrice(false);
|
||
}
|
||
};
|
||
|
||
const handleSubmit = async (values) => {
|
||
try {
|
||
setSubmitting(true);
|
||
|
||
// Prepare environment variables
|
||
const envVars = {};
|
||
envVariables.forEach((env) => {
|
||
if (env.key && env.value) {
|
||
envVars[env.key] = env.value;
|
||
}
|
||
});
|
||
|
||
const secretEnvVars = {};
|
||
secretEnvVariables.forEach((env) => {
|
||
if (env.key && env.value) {
|
||
secretEnvVars[env.key] = env.value;
|
||
}
|
||
});
|
||
|
||
if (imageMode === 'builtin') {
|
||
if (!secretEnvVars.OLLAMA_API_KEY) {
|
||
const ensuredKey = autoOllamaKey || generateRandomKey();
|
||
secretEnvVars.OLLAMA_API_KEY = ensuredKey;
|
||
setAutoOllamaKey(ensuredKey);
|
||
}
|
||
}
|
||
|
||
// Prepare entrypoint and args
|
||
const cleanEntrypoint = entrypoint.filter((item) => item.trim() !== '');
|
||
const cleanArgs = args.filter((item) => item.trim() !== '');
|
||
|
||
const resolvedImage =
|
||
imageMode === 'builtin' ? BUILTIN_IMAGE : values.image_url;
|
||
const resolvedTrafficPort =
|
||
values.traffic_port ||
|
||
(imageMode === 'builtin' ? DEFAULT_TRAFFIC_PORT : undefined);
|
||
|
||
const requestData = {
|
||
resource_private_name: values.resource_private_name,
|
||
duration_hours: values.duration_hours,
|
||
gpus_per_container: gpusPerContainer,
|
||
hardware_id: values.hardware_id,
|
||
location_ids: values.location_ids,
|
||
container_config: {
|
||
replica_count: values.replica_count,
|
||
env_variables: envVars,
|
||
secret_env_variables: secretEnvVars,
|
||
entrypoint: cleanEntrypoint.length > 0 ? cleanEntrypoint : undefined,
|
||
args: cleanArgs.length > 0 ? cleanArgs : undefined,
|
||
traffic_port: resolvedTrafficPort,
|
||
},
|
||
registry_config: {
|
||
image_url: resolvedImage,
|
||
registry_username: values.registry_username || undefined,
|
||
registry_secret: values.registry_secret || undefined,
|
||
},
|
||
};
|
||
|
||
const response = await API.post('/api/deployments', requestData);
|
||
|
||
if (response.data.success) {
|
||
showSuccess(t('容器创建成功'));
|
||
onSuccess?.(response.data.data);
|
||
onCancel();
|
||
} else {
|
||
showError(t('容器创建失败: ') + response.data.message);
|
||
}
|
||
} catch (error) {
|
||
showError(t('容器创建失败: ') + error.message);
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const handleAddEnvVariable = (type) => {
|
||
if (type === 'env') {
|
||
setEnvVariables([...envVariables, { key: '', value: '' }]);
|
||
} else {
|
||
setSecretEnvVariables([...secretEnvVariables, { key: '', value: '' }]);
|
||
}
|
||
};
|
||
|
||
const handleRemoveEnvVariable = (index, type) => {
|
||
if (type === 'env') {
|
||
const newEnvVars = envVariables.filter((_, i) => i !== index);
|
||
setEnvVariables(
|
||
newEnvVars.length > 0 ? newEnvVars : [{ key: '', value: '' }],
|
||
);
|
||
} else {
|
||
const newSecretEnvVars = secretEnvVariables.filter((_, i) => i !== index);
|
||
setSecretEnvVariables(
|
||
newSecretEnvVars.length > 0
|
||
? newSecretEnvVars
|
||
: [{ key: '', value: '' }],
|
||
);
|
||
}
|
||
};
|
||
|
||
const handleEnvVariableChange = (index, field, value, type) => {
|
||
if (type === 'env') {
|
||
const newEnvVars = [...envVariables];
|
||
newEnvVars[index][field] = value;
|
||
setEnvVariables(newEnvVars);
|
||
} else {
|
||
const newSecretEnvVars = [...secretEnvVariables];
|
||
newSecretEnvVars[index][field] = value;
|
||
setSecretEnvVariables(newSecretEnvVars);
|
||
}
|
||
};
|
||
|
||
const handleArrayFieldChange = (index, value, type) => {
|
||
if (type === 'entrypoint') {
|
||
const newEntrypoint = [...entrypoint];
|
||
newEntrypoint[index] = value;
|
||
setEntrypoint(newEntrypoint);
|
||
} else {
|
||
const newArgs = [...args];
|
||
newArgs[index] = value;
|
||
setArgs(newArgs);
|
||
}
|
||
};
|
||
|
||
const handleAddArrayField = (type) => {
|
||
if (type === 'entrypoint') {
|
||
setEntrypoint([...entrypoint, '']);
|
||
} else {
|
||
setArgs([...args, '']);
|
||
}
|
||
};
|
||
|
||
const handleRemoveArrayField = (index, type) => {
|
||
if (type === 'entrypoint') {
|
||
const newEntrypoint = entrypoint.filter((_, i) => i !== index);
|
||
setEntrypoint(newEntrypoint.length > 0 ? newEntrypoint : ['']);
|
||
} else {
|
||
const newArgs = args.filter((_, i) => i !== index);
|
||
setArgs(newArgs.length > 0 ? newArgs : ['']);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!visible) {
|
||
return;
|
||
}
|
||
|
||
if (!selectedHardwareId) {
|
||
if (selectedLocationIds.length > 0) {
|
||
setSelectedLocationIds([]);
|
||
if (formApi) {
|
||
formApi.setValue('location_ids', []);
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
|
||
const validLocationIds = locations
|
||
.filter((location) => (Number(location.available) || 0) > 0)
|
||
.map((location) => location.id);
|
||
|
||
if (validLocationIds.length === 0) {
|
||
if (selectedLocationIds.length > 0) {
|
||
setSelectedLocationIds([]);
|
||
if (formApi) {
|
||
formApi.setValue('location_ids', []);
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (selectedLocationIds.length === 0) {
|
||
return;
|
||
}
|
||
|
||
const filteredSelection = selectedLocationIds.filter((id) =>
|
||
validLocationIds.includes(id),
|
||
);
|
||
|
||
if (!arraysEqual(selectedLocationIds, filteredSelection)) {
|
||
setSelectedLocationIds(filteredSelection);
|
||
if (formApi) {
|
||
formApi.setValue('location_ids', filteredSelection);
|
||
}
|
||
}
|
||
}, [locations, selectedHardwareId, selectedLocationIds, visible, formApi]);
|
||
|
||
const maxAvailableReplicas = useMemo(() => {
|
||
if (!selectedLocationIds.length) return 0;
|
||
|
||
return locations
|
||
.filter((location) => selectedLocationIds.includes(location.id))
|
||
.reduce((total, location) => {
|
||
const availableValue = Number(location.available);
|
||
return total + (Number.isNaN(availableValue) ? 0 : availableValue);
|
||
}, 0);
|
||
}, [selectedLocationIds, locations]);
|
||
|
||
const isPriceReady = useMemo(
|
||
() =>
|
||
selectedHardwareId &&
|
||
selectedLocationIds.length > 0 &&
|
||
gpusPerContainer > 0 &&
|
||
durationHours > 0 &&
|
||
replicaCount > 0,
|
||
[
|
||
selectedHardwareId,
|
||
selectedLocationIds,
|
||
gpusPerContainer,
|
||
durationHours,
|
||
replicaCount,
|
||
],
|
||
);
|
||
|
||
const currencyLabel = (
|
||
priceEstimation?.currency ||
|
||
priceCurrency ||
|
||
''
|
||
).toUpperCase();
|
||
const selectedHardwareLabel = selectedHardwareId
|
||
? hardwareLabelMap[selectedHardwareId]
|
||
: '';
|
||
const selectedLocationNames = selectedLocationIds
|
||
.map((id) => locationLabelMap[id])
|
||
.filter(Boolean);
|
||
const totalGpuHours =
|
||
Number(gpusPerContainer || 0) *
|
||
Number(replicaCount || 0) *
|
||
Number(durationHours || 0);
|
||
const priceSummaryItems = [
|
||
{
|
||
key: 'hardware',
|
||
label: t('硬件类型'),
|
||
value: selectedHardwareLabel || '--',
|
||
},
|
||
{
|
||
key: 'locations',
|
||
label: t('部署位置'),
|
||
value: selectedLocationNames.length
|
||
? selectedLocationNames.join('、')
|
||
: '--',
|
||
},
|
||
{
|
||
key: 'replicas',
|
||
label: t('副本数量'),
|
||
value: (replicaCount ?? 0).toString(),
|
||
},
|
||
{
|
||
key: 'gpus',
|
||
label: t('最大GPU数量'),
|
||
value: (gpusPerContainer ?? 0).toString(),
|
||
},
|
||
{
|
||
key: 'duration',
|
||
label: t('运行时长（小时）'),
|
||
value: durationHours ? durationHours.toString() : '0',
|
||
},
|
||
{
|
||
key: 'gpu-hours',
|
||
label: t('总 GPU 小时'),
|
||
value: totalGpuHours > 0 ? totalGpuHours.toLocaleString() : '0',
|
||
},
|
||
];
|
||
|
||
const scrollToSection = (ref) => {
|
||
if (ref?.current && typeof ref.current.scrollIntoView === 'function') {
|
||
ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
};
|
||
|
||
const priceUnavailableContent = (
|
||
<div style={{ marginTop: 12 }}>
|
||
{loadingPrice ? (
|
||
<Space spacing={8} align='center'>
|
||
<Spin size='small' />
|
||
<Text size='small' type='tertiary'>
|
||
{t('价格计算中...')}
|
||
</Text>
|
||
</Space>
|
||
) : (
|
||
<Text size='small' type='tertiary'>
|
||
{isPriceReady
|
||
? t('价格暂时不可用，请稍后重试')
|
||
: t('完成硬件类型、部署位置、副本数量等配置后，将自动计算价格')}
|
||
</Text>
|
||
)}
|
||
</div>
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (!visible || !formApi) {
|
||
return;
|
||
}
|
||
if (maxAvailableReplicas > 0 && replicaCount > maxAvailableReplicas) {
|
||
setReplicaCount(maxAvailableReplicas);
|
||
formApi.setValue('replica_count', maxAvailableReplicas);
|
||
}
|
||
}, [maxAvailableReplicas, replicaCount, visible, formApi]);
|
||
|
||
return (
|
||
<Modal
|
||
title={t('新建容器部署')}
|
||
visible={visible}
|
||
onCancel={onCancel}
|
||
onOk={() => formApi?.submitForm()}
|
||
okText={t('创建')}
|
||
cancelText={t('取消')}
|
||
width={800}
|
||
confirmLoading={submitting}
|
||
style={{ top: 20 }}
|
||
>
|
||
<Form
|
||
key={formKey}
|
||
initValues={formDefaults}
|
||
getFormApi={setFormApi}
|
||
onSubmit={handleSubmit}
|
||
style={{ maxHeight: '70vh', overflowY: 'auto' }}
|
||
labelPosition='top'
|
||
>
|
||
<Space
|
||
wrap
|
||
spacing={8}
|
||
style={{ justifyContent: 'flex-end', width: '100%', marginBottom: 8 }}
|
||
>
|
||
<Button
|
||
size='small'
|
||
theme='borderless'
|
||
type='tertiary'
|
||
onClick={() => scrollToSection(basicSectionRef)}
|
||
>
|
||
{t('部署配置')}
|
||
</Button>
|
||
<Button
|
||
size='small'
|
||
theme='borderless'
|
||
type='tertiary'
|
||
onClick={() => scrollToSection(priceSectionRef)}
|
||
>
|
||
{t('价格预估')}
|
||
</Button>
|
||
<Button
|
||
size='small'
|
||
theme='borderless'
|
||
type='tertiary'
|
||
onClick={() => scrollToSection(advancedSectionRef)}
|
||
>
|
||
{t('高级配置')}
|
||
</Button>
|
||
</Space>
|
||
|
||
<div ref={basicSectionRef}>
|
||
<Card className='mb-4'>
|
||
<Title heading={6}>{t('部署配置')}</Title>
|
||
|
||
<Form.Input
|
||
field='resource_private_name'
|
||
label={t('容器名称')}
|
||
placeholder={t('请输入容器名称')}
|
||
rules={[{ required: true, message: t('请输入容器名称') }]}
|
||
/>
|
||
|
||
<div className='mt-2'>
|
||
<Text strong>{t('镜像选择')}</Text>
|
||
<div style={{ marginTop: 8 }}>
|
||
<RadioGroup
|
||
type='button'
|
||
value={imageMode}
|
||
onChange={(value) =>
|
||
setImageMode(value?.target?.value ?? value)
|
||
}
|
||
>
|
||
<Radio value='builtin'>{t('内置 Ollama 镜像')}</Radio>
|
||
<Radio value='custom'>{t('自定义镜像')}</Radio>
|
||
</RadioGroup>
|
||
</div>
|
||
</div>
|
||
|
||
<Form.Input
|
||
field='image_url'
|
||
label={t('镜像地址')}
|
||
placeholder={t('例如：nginx:latest')}
|
||
rules={[{ required: true, message: t('请输入镜像地址') }]}
|
||
disabled={imageMode === 'builtin'}
|
||
onChange={(value) => {
|
||
if (imageMode === 'custom') {
|
||
customImageRef.current = value;
|
||
}
|
||
}}
|
||
/>
|
||
|
||
{imageMode === 'builtin' && (
|
||
<Space align='center' spacing={8} className='mt-2'>
|
||
<Text size='small' type='tertiary'>
|
||
{t('系统已为该部署准备 Ollama 镜像与随机 API Key')}
|
||
</Text>
|
||
<Input
|
||
readOnly
|
||
value={autoOllamaKey}
|
||
size='small'
|
||
style={{ width: 220 }}
|
||
/>
|
||
<Button
|
||
icon={<IconCopy />}
|
||
size='small'
|
||
theme='borderless'
|
||
onClick={async () => {
|
||
if (!autoOllamaKey) {
|
||
return;
|
||
}
|
||
const copied = await copy(autoOllamaKey);
|
||
if (copied) {
|
||
showSuccess(t('已复制自动生成的 API Key'));
|
||
} else {
|
||
showError(t('复制失败，请手动选择文本复制'));
|
||
}
|
||
}}
|
||
>
|
||
{t('复制')}
|
||
</Button>
|
||
</Space>
|
||
)}
|
||
|
||
<Row gutter={16}>
|
||
<Col xs={24} md={12}>
|
||
<Form.Select
|
||
field='hardware_id'
|
||
label={t('硬件类型')}
|
||
placeholder={t('选择硬件类型')}
|
||
loading={loadingHardware}
|
||
rules={[{ required: true, message: t('请选择硬件类型') }]}
|
||
onChange={(value) => {
|
||
const nextMaxGpus = getHardwareMaxGpus(value);
|
||
setSelectedHardwareId(value);
|
||
setGpusPerContainer(nextMaxGpus);
|
||
setSelectedLocationIds([]);
|
||
if (formApi) {
|
||
formApi.setValue('location_ids', []);
|
||
formApi.setValue('gpus_per_container', nextMaxGpus);
|
||
}
|
||
}}
|
||
style={{ width: '100%' }}
|
||
dropdownStyle={{ maxHeight: 360, overflowY: 'auto' }}
|
||
renderSelectedItem={(optionNode) =>
|
||
optionNode
|
||
? hardwareLabelMap[optionNode?.value] ||
|
||
optionNode?.label ||
|
||
optionNode?.value ||
|
||
''
|
||
: ''
|
||
}
|
||
>
|
||
{hardwareTypes.map((hardware) => {
|
||
const displayName = hardware.brand_name
|
||
? `${hardware.brand_name} ${hardware.name}`.trim()
|
||
: hardware.name;
|
||
const availableCount =
|
||
typeof hardware.available_count === 'number'
|
||
? hardware.available_count
|
||
: 0;
|
||
const hasAvailability = availableCount > 0;
|
||
|
||
return (
|
||
<Option key={hardware.id} value={hardware.id}>
|
||
<div className='flex flex-col gap-1'>
|
||
<Text strong>{displayName}</Text>
|
||
<div className='flex items-center gap-2 text-xs text-[var(--semi-color-text-2)]'>
|
||
<span>
|
||
{t('最大GPU数量')}: {hardware.max_gpus}
|
||
</span>
|
||
<Tag
|
||
color={hasAvailability ? 'green' : 'red'}
|
||
size='small'
|
||
>
|
||
{t('可用数量')}: {availableCount}
|
||
</Tag>
|
||
</div>
|
||
</div>
|
||
</Option>
|
||
);
|
||
})}
|
||
</Form.Select>
|
||
</Col>
|
||
<Col xs={24} md={12}>
|
||
<Form.InputNumber
|
||
field='gpus_per_container'
|
||
label={t('最大GPU数量')}
|
||
placeholder={1}
|
||
min={1}
|
||
max={getHardwareMaxGpus(selectedHardwareId)}
|
||
step={1}
|
||
disabled
|
||
style={{ width: '100%' }}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
|
||
{typeof hardwareTotalAvailable === 'number' && (
|
||
<Text size='small' type='tertiary'>
|
||
{t('全部硬件总可用资源')}: {hardwareTotalAvailable}
|
||
</Text>
|
||
)}
|
||
|
||
<Form.Select
|
||
field='location_ids'
|
||
label={
|
||
<Space>
|
||
{t('部署位置')}
|
||
{loadingReplicas && <Spin size='small' />}
|
||
</Space>
|
||
}
|
||
placeholder={
|
||
!selectedHardwareId
|
||
? t('请先选择硬件类型')
|
||
: loadingReplicas
|
||
? t('正在加载可用部署位置...')
|
||
: t('选择部署位置（可多选）')
|
||
}
|
||
multiple
|
||
loading={loadingReplicas}
|
||
disabled={!selectedHardwareId || loadingReplicas}
|
||
rules={[{ required: true, message: t('请选择至少一个部署位置') }]}
|
||
onChange={(value) => setSelectedLocationIds(value)}
|
||
style={{ width: '100%' }}
|
||
dropdownStyle={{ maxHeight: 360, overflowY: 'auto' }}
|
||
renderSelectedItem={(optionNode) => ({
|
||
isRenderInTag: true,
|
||
content: !optionNode
|
||
? ''
|
||
: loadingReplicas
|
||
? t('部署位置加载中...')
|
||
: locationLabelMap[optionNode?.value] ||
|
||
optionNode?.label ||
|
||
optionNode?.value ||
|
||
'',
|
||
})}
|
||
>
|
||
{locations.map((location) => {
|
||
const numeric = Number(location.available);
|
||
const availableCount = Number.isNaN(numeric) ? 0 : numeric;
|
||
const locationLabel =
|
||
location.region ||
|
||
location.country ||
|
||
(location.iso2 ? location.iso2.toUpperCase() : '') ||
|
||
location.code ||
|
||
'';
|
||
const disableOption = availableCount === 0;
|
||
|
||
return (
|
||
<Option
|
||
key={location.id}
|
||
value={location.id}
|
||
disabled={disableOption}
|
||
>
|
||
<div className='flex flex-col gap-1'>
|
||
<div className='flex items-center gap-2'>
|
||
<Text strong>{location.name}</Text>
|
||
{locationLabel && (
|
||
<Tag color='blue' size='small'>
|
||
{locationLabel}
|
||
</Tag>
|
||
)}
|
||
</div>
|
||
<Text
|
||
size='small'
|
||
type={availableCount > 0 ? 'success' : 'danger'}
|
||
>
|
||
{t('可用数量')}: {availableCount}
|
||
</Text>
|
||
</div>
|
||
</Option>
|
||
);
|
||
})}
|
||
</Form.Select>
|
||
|
||
{typeof locationTotalAvailable === 'number' && (
|
||
<Text size='small' type='tertiary'>
|
||
{t('全部地区总可用资源')}: {locationTotalAvailable}
|
||
</Text>
|
||
)}
|
||
|
||
<Row gutter={16}>
|
||
<Col xs={24} md={8}>
|
||
<Form.InputNumber
|
||
field='replica_count'
|
||
label={t('副本数量')}
|
||
placeholder={1}
|
||
min={1}
|
||
max={maxAvailableReplicas || 100}
|
||
rules={[{ required: true, message: t('请输入副本数量') }]}
|
||
onChange={(value) => setReplicaCount(value)}
|
||
style={{ width: '100%' }}
|
||
/>
|
||
{maxAvailableReplicas > 0 && (
|
||
<Text size='small' type='tertiary'>
|
||
{t('最大可用')}: {maxAvailableReplicas}
|
||
</Text>
|
||
)}
|
||
</Col>
|
||
<Col xs={24} md={8}>
|
||
<Form.InputNumber
|
||
field='duration_hours'
|
||
label={t('运行时长（小时）')}
|
||
placeholder={1}
|
||
min={1}
|
||
max={8760} // 1 year
|
||
rules={[{ required: true, message: t('请输入运行时长') }]}
|
||
onChange={(value) => setDurationHours(value)}
|
||
style={{ width: '100%' }}
|
||
/>
|
||
</Col>
|
||
<Col xs={24} md={8}>
|
||
<Form.InputNumber
|
||
field='traffic_port'
|
||
label={
|
||
<Space>
|
||
{t('流量端口')}
|
||
<Tooltip content={t('容器对外服务的端口号，可选')}>
|
||
<IconHelpCircle />
|
||
</Tooltip>
|
||
</Space>
|
||
}
|
||
placeholder={DEFAULT_TRAFFIC_PORT}
|
||
min={1}
|
||
max={65535}
|
||
style={{ width: '100%' }}
|
||
disabled={imageMode === 'builtin'}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
|
||
<div ref={advancedSectionRef}>
|
||
<Collapse className='mt-4'>
|
||
<Collapse.Panel header={t('高级配置')} itemKey='advanced'>
|
||
<Card>
|
||
<Title heading={6}>{t('镜像仓库配置')}</Title>
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Input
|
||
field='registry_username'
|
||
label={t('镜像仓库用户名')}
|
||
placeholder={t('私有镜像仓库的用户名')}
|
||
/>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Input
|
||
field='registry_secret'
|
||
label={t('镜像仓库密码')}
|
||
type='password'
|
||
placeholder={t('私有镜像仓库的密码')}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
</Card>
|
||
|
||
<Divider />
|
||
|
||
<Card>
|
||
<Title heading={6}>{t('容器启动配置')}</Title>
|
||
|
||
<div style={{ marginBottom: 16 }}>
|
||
<Text strong>{t('启动命令 (Entrypoint)')}</Text>
|
||
{entrypoint.map((cmd, index) => (
|
||
<div
|
||
key={index}
|
||
style={{ display: 'flex', marginTop: 8 }}
|
||
>
|
||
<Input
|
||
value={cmd}
|
||
placeholder={t('例如：/bin/bash')}
|
||
onChange={(value) =>
|
||
handleArrayFieldChange(index, value, 'entrypoint')
|
||
}
|
||
style={{ flex: 1, marginRight: 8 }}
|
||
/>
|
||
<Button
|
||
icon={<IconMinus />}
|
||
onClick={() =>
|
||
handleRemoveArrayField(index, 'entrypoint')
|
||
}
|
||
disabled={entrypoint.length === 1}
|
||
/>
|
||
</div>
|
||
))}
|
||
<Button
|
||
icon={<IconPlus />}
|
||
onClick={() => handleAddArrayField('entrypoint')}
|
||
style={{ marginTop: 8 }}
|
||
>
|
||
{t('添加启动命令')}
|
||
</Button>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: 16 }}>
|
||
<Text strong>{t('启动参数 (Args)')}</Text>
|
||
{args.map((arg, index) => (
|
||
<div
|
||
key={index}
|
||
style={{ display: 'flex', marginTop: 8 }}
|
||
>
|
||
<Input
|
||
value={arg}
|
||
placeholder={t('例如：-c')}
|
||
onChange={(value) =>
|
||
handleArrayFieldChange(index, value, 'args')
|
||
}
|
||
style={{ flex: 1, marginRight: 8 }}
|
||
/>
|
||
<Button
|
||
icon={<IconMinus />}
|
||
onClick={() =>
|
||
handleRemoveArrayField(index, 'args')
|
||
}
|
||
disabled={args.length === 1}
|
||
/>
|
||
</div>
|
||
))}
|
||
<Button
|
||
icon={<IconPlus />}
|
||
onClick={() => handleAddArrayField('args')}
|
||
style={{ marginTop: 8 }}
|
||
>
|
||
{t('添加启动参数')}
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
|
||
<Divider />
|
||
|
||
<Card>
|
||
<Title heading={6}>{t('环境变量')}</Title>
|
||
|
||
<div style={{ marginBottom: 16 }}>
|
||
<Text strong>{t('普通环境变量')}</Text>
|
||
{envVariables.map((env, index) => (
|
||
<Row key={index} gutter={8} style={{ marginTop: 8 }}>
|
||
<Col span={10}>
|
||
<Input
|
||
placeholder={t('变量名')}
|
||
value={env.key}
|
||
onChange={(value) =>
|
||
handleEnvVariableChange(
|
||
index,
|
||
'key',
|
||
value,
|
||
'env',
|
||
)
|
||
}
|
||
/>
|
||
</Col>
|
||
<Col span={10}>
|
||
<Input
|
||
placeholder={t('变量值')}
|
||
value={env.value}
|
||
onChange={(value) =>
|
||
handleEnvVariableChange(
|
||
index,
|
||
'value',
|
||
value,
|
||
'env',
|
||
)
|
||
}
|
||
/>
|
||
</Col>
|
||
<Col span={4}>
|
||
<Button
|
||
icon={<IconMinus />}
|
||
onClick={() =>
|
||
handleRemoveEnvVariable(index, 'env')
|
||
}
|
||
disabled={envVariables.length === 1}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
))}
|
||
<Button
|
||
icon={<IconPlus />}
|
||
onClick={() => handleAddEnvVariable('env')}
|
||
style={{ marginTop: 8 }}
|
||
>
|
||
{t('添加环境变量')}
|
||
</Button>
|
||
</div>
|
||
|
||
<div>
|
||
<Text strong>{t('密钥环境变量')}</Text>
|
||
{secretEnvVariables.map((env, index) => {
|
||
const isAutoSecret =
|
||
imageMode === 'builtin' &&
|
||
env.key === 'OLLAMA_API_KEY';
|
||
return (
|
||
<Row key={index} gutter={8} style={{ marginTop: 8 }}>
|
||
<Col span={10}>
|
||
<Input
|
||
placeholder={t('变量名')}
|
||
value={env.key}
|
||
onChange={(value) =>
|
||
handleEnvVariableChange(
|
||
index,
|
||
'key',
|
||
value,
|
||
'secret',
|
||
)
|
||
}
|
||
disabled={isAutoSecret}
|
||
/>
|
||
</Col>
|
||
<Col span={10}>
|
||
<Input
|
||
placeholder={t('变量值')}
|
||
type='password'
|
||
value={env.value}
|
||
onChange={(value) =>
|
||
handleEnvVariableChange(
|
||
index,
|
||
'value',
|
||
value,
|
||
'secret',
|
||
)
|
||
}
|
||
disabled={isAutoSecret}
|
||
/>
|
||
</Col>
|
||
<Col span={4}>
|
||
<Button
|
||
icon={<IconMinus />}
|
||
onClick={() =>
|
||
handleRemoveEnvVariable(index, 'secret')
|
||
}
|
||
disabled={
|
||
secretEnvVariables.length === 1 ||
|
||
isAutoSecret
|
||
}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
);
|
||
})}
|
||
<Button
|
||
icon={<IconPlus />}
|
||
onClick={() => handleAddEnvVariable('secret')}
|
||
style={{ marginTop: 8 }}
|
||
>
|
||
{t('添加密钥环境变量')}
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
</Collapse.Panel>
|
||
</Collapse>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
|
||
<div ref={priceSectionRef}>
|
||
<Card className='mb-4'>
|
||
<div className='flex flex-wrap items-center justify-between gap-3'>
|
||
<Title heading={6} style={{ margin: 0 }}>
|
||
{t('价格预估')}
|
||
</Title>
|
||
<Space align='center' spacing={12} className='flex flex-wrap'>
|
||
<Text type='secondary' size='small'>
|
||
{t('计价币种')}
|
||
</Text>
|
||
<RadioGroup
|
||
type='button'
|
||
value={priceCurrency}
|
||
onChange={handleCurrencyChange}
|
||
>
|
||
<Radio value='usdc'>USDC</Radio>
|
||
<Radio value='iocoin'>IOCOIN</Radio>
|
||
</RadioGroup>
|
||
<Tag size='small' color='blue'>
|
||
{currencyLabel}
|
||
</Tag>
|
||
</Space>
|
||
</div>
|
||
|
||
{priceEstimation ? (
|
||
<div className='mt-4 flex w-full flex-col gap-4'>
|
||
<div className='grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3'>
|
||
<div
|
||
className='flex flex-col gap-1 rounded-md px-4 py-3'
|
||
style={{
|
||
border: '1px solid var(--semi-color-border)',
|
||
backgroundColor: 'var(--semi-color-fill-0)',
|
||
}}
|
||
>
|
||
<Text size='small' type='tertiary'>
|
||
{t('预估总费用')}
|
||
</Text>
|
||
<div
|
||
style={{
|
||
fontSize: 24,
|
||
fontWeight: 600,
|
||
color: 'var(--semi-color-text-0)',
|
||
}}
|
||
>
|
||
{typeof priceEstimation.estimated_cost === 'number'
|
||
? `${priceEstimation.estimated_cost.toFixed(4)} ${currencyLabel}`
|
||
: '--'}
|
||
</div>
|
||
</div>
|
||
<div
|
||
className='flex flex-col gap-1 rounded-md px-4 py-3'
|
||
style={{
|
||
border: '1px solid var(--semi-color-border)',
|
||
backgroundColor: 'var(--semi-color-fill-0)',
|
||
}}
|
||
>
|
||
<Text size='small' type='tertiary'>
|
||
{t('小时费率')}
|
||
</Text>
|
||
<Text strong>
|
||
{typeof priceEstimation.price_breakdown?.hourly_rate ===
|
||
'number'
|
||
? `${priceEstimation.price_breakdown.hourly_rate.toFixed(4)} ${currencyLabel}/h`
|
||
: '--'}
|
||
</Text>
|
||
</div>
|
||
<div
|
||
className='flex flex-col gap-1 rounded-md px-4 py-3'
|
||
style={{
|
||
border: '1px solid var(--semi-color-border)',
|
||
backgroundColor: 'var(--semi-color-fill-0)',
|
||
}}
|
||
>
|
||
<Text size='small' type='tertiary'>
|
||
{t('计算成本')}
|
||
</Text>
|
||
<Text strong>
|
||
{typeof priceEstimation.price_breakdown?.compute_cost ===
|
||
'number'
|
||
? `${priceEstimation.price_breakdown.compute_cost.toFixed(4)} ${currencyLabel}`
|
||
: '--'}
|
||
</Text>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='grid gap-3 sm:grid-cols-2 lg:grid-cols-3'>
|
||
{priceSummaryItems.map((item) => (
|
||
<div
|
||
key={item.key}
|
||
className='flex items-center justify-between gap-3 rounded-md px-3 py-2'
|
||
style={{
|
||
border: '1px solid var(--semi-color-border)',
|
||
backgroundColor: 'var(--semi-color-fill-0)',
|
||
}}
|
||
>
|
||
<Text size='small' type='tertiary'>
|
||
{item.label}
|
||
</Text>
|
||
<Text strong>{item.value}</Text>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
priceUnavailableContent
|
||
)}
|
||
|
||
{priceEstimation && loadingPrice && (
|
||
<Space align='center' spacing={8} style={{ marginTop: 12 }}>
|
||
<Spin size='small' />
|
||
<Text size='small' type='tertiary'>
|
||
{t('价格重新计算中...')}
|
||
</Text>
|
||
</Space>
|
||
)}
|
||
</Card>
|
||
</div>
|
||
</Form>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default CreateDeploymentModal;
|