feat: ionet integrate (#2105)
* wip ionet integrate * wip ionet integrate * wip ionet integrate * ollama wip * wip * feat: ionet integration & ollama manage * fix merge conflict * wip * fix: test conn cors * wip * fix ionet * fix ionet * wip * fix model select * refactor: Remove `pkg/ionet` test files and update related Go source and web UI model deployment components. * feat: Enhance model deployment UI with styling improvements, updated text, and a new description component. * Revert "feat: Enhance model deployment UI with styling improvements, updated text, and a new description component." This reverts commit 8b75cb5bf0d1a534b339df8c033be9a6c7df7964.
This commit is contained in:
Seefs
@@ -35,7 +35,7 @@ import {
|
||||
} from '../../constants';
|
||||
import { useIsMobile } from '../common/useIsMobile';
|
||||
import { useTableCompactMode } from '../common/useTableCompactMode';
|
||||
import { Modal } from '@douyinfe/semi-ui';
|
||||
import { Modal, Button } from '@douyinfe/semi-ui';
|
||||
|
||||
export const useChannelsData = () => {
|
||||
const { t } = useTranslation();
|
||||
@@ -775,6 +775,67 @@ export const useChannelsData = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const checkOllamaVersion = async (record) => {
|
||||
try {
|
||||
const res = await API.get(`/api/channel/ollama/version/${record.id}`);
|
||||
const { success, message, data } = res.data;
|
||||
|
||||
if (success) {
|
||||
const version = data?.version || '-';
|
||||
const infoMessage = t('当前 Ollama 版本为 ${version}').replace(
|
||||
'${version}',
|
||||
version,
|
||||
);
|
||||
|
||||
const handleCopyVersion = async () => {
|
||||
if (!version || version === '-') {
|
||||
showInfo(t('暂无可复制的版本信息'));
|
||||
return;
|
||||
}
|
||||
|
||||
const copied = await copy(version);
|
||||
if (copied) {
|
||||
showSuccess(t('已复制版本号'));
|
||||
} else {
|
||||
showError(t('复制失败，请手动复制'));
|
||||
}
|
||||
};
|
||||
|
||||
Modal.info({
|
||||
title: t('Ollama 版本信息'),
|
||||
content: infoMessage,
|
||||
centered: true,
|
||||
footer: (
|
||||
<div className='flex justify-end gap-2'>
|
||||
<Button type='tertiary' onClick={handleCopyVersion}>
|
||||
{t('复制版本号')}
|
||||
</Button>
|
||||
<Button
|
||||
type='primary'
|
||||
theme='solid'
|
||||
onClick={() => Modal.destroyAll()}
|
||||
>
|
||||
{t('关闭')}
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
hasCancel: false,
|
||||
hasOk: false,
|
||||
closable: true,
|
||||
maskClosable: true,
|
||||
});
|
||||
} else {
|
||||
showError(message || t('获取 Ollama 版本失败'));
|
||||
}
|
||||
} catch (error) {
|
||||
const errMsg =
|
||||
error?.response?.data?.message ||
|
||||
error?.message ||
|
||||
t('获取 Ollama 版本失败');
|
||||
showError(errMsg);
|
||||
}
|
||||
};
|
||||
|
||||
// Test channel - 单个模型测试，参考旧版实现
|
||||
const testChannel = async (record, model, endpointType = '') => {
|
||||
const testKey = `${record.id}-${model}`;
|
||||
@@ -1132,6 +1193,7 @@ export const useChannelsData = () => {
|
||||
updateAllChannelsBalance,
|
||||
updateChannelBalance,
|
||||
fixChannelsAbilities,
|
||||
checkOllamaVersion,
|
||||
testChannel,
|
||||
batchTestModels,
|
||||
handleCloseModal,
|
||||
|
||||
@@ -61,6 +61,7 @@ export const useSidebar = () => {
|
||||
enabled: true,
|
||||
channel: true,
|
||||
models: true,
|
||||
deployment: true,
|
||||
redemption: true,
|
||||
user: true,
|
||||
setting: true,
|
||||
|
||||
266
web/src/hooks/model-deployments/useDeploymentResources.js
Normal file
266
web/src/hooks/model-deployments/useDeploymentResources.js
Normal file
@@ -0,0 +1,266 @@
|
||||
/*
|
||||
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 { useState, useCallback } from 'react';
|
||||
import { API } from '../../helpers';
|
||||
import { showError } from '../../helpers';
|
||||
|
||||
export const useDeploymentResources = () => {
|
||||
const [hardwareTypes, setHardwareTypes] = useState([]);
|
||||
const [hardwareTotalAvailable, setHardwareTotalAvailable] = useState(0);
|
||||
const [locations, setLocations] = useState([]);
|
||||
const [locationsTotalAvailable, setLocationsTotalAvailable] = useState(0);
|
||||
const [availableReplicas, setAvailableReplicas] = useState([]);
|
||||
const [priceEstimation, setPriceEstimation] = useState(null);
|
||||
|
||||
const [loadingHardware, setLoadingHardware] = useState(false);
|
||||
const [loadingLocations, setLoadingLocations] = useState(false);
|
||||
const [loadingReplicas, setLoadingReplicas] = useState(false);
|
||||
const [loadingPrice, setLoadingPrice] = useState(false);
|
||||
|
||||
const fetchHardwareTypes = useCallback(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,
|
||||
);
|
||||
return normalizedHardware;
|
||||
} else {
|
||||
showError('获取硬件类型失败: ' + response.data.message);
|
||||
setHardwareTotalAvailable(0);
|
||||
return [];
|
||||
}
|
||||
} catch (error) {
|
||||
showError('获取硬件类型失败: ' + error.message);
|
||||
setHardwareTotalAvailable(0);
|
||||
return [];
|
||||
} finally {
|
||||
setLoadingHardware(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchLocations = useCallback(async () => {
|
||||
try {
|
||||
setLoadingLocations(true);
|
||||
const response = await API.get('/api/deployments/locations');
|
||||
if (response.data.success) {
|
||||
const { locations: locationsList = [], total } = response.data.data || {};
|
||||
const normalizedLocations = locationsList.map((location) => {
|
||||
const iso2 = (location.iso2 || '').toString().toUpperCase();
|
||||
const availableValue = Number(location.available);
|
||||
const available = Number.isNaN(availableValue) ? 0 : availableValue;
|
||||
|
||||
return {
|
||||
...location,
|
||||
iso2,
|
||||
available,
|
||||
};
|
||||
});
|
||||
const providedTotal = Number(total);
|
||||
const fallbackTotal = normalizedLocations.reduce(
|
||||
(acc, item) => acc + (Number.isNaN(item.available) ? 0 : item.available),
|
||||
0,
|
||||
);
|
||||
const hasProvidedTotal =
|
||||
total !== undefined &&
|
||||
total !== null &&
|
||||
total !== '' &&
|
||||
!Number.isNaN(providedTotal);
|
||||
|
||||
setLocations(normalizedLocations);
|
||||
setLocationsTotalAvailable(
|
||||
hasProvidedTotal ? providedTotal : fallbackTotal,
|
||||
);
|
||||
return normalizedLocations;
|
||||
} else {
|
||||
showError('获取部署位置失败: ' + response.data.message);
|
||||
setLocationsTotalAvailable(0);
|
||||
return [];
|
||||
}
|
||||
} catch (error) {
|
||||
showError('获取部署位置失败: ' + error.message);
|
||||
setLocationsTotalAvailable(0);
|
||||
return [];
|
||||
} finally {
|
||||
setLoadingLocations(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchAvailableReplicas = useCallback(async (hardwareId, gpuCount = 1) => {
|
||||
if (!hardwareId) {
|
||||
setAvailableReplicas([]);
|
||||
return [];
|
||||
}
|
||||
|
||||
try {
|
||||
setLoadingReplicas(true);
|
||||
const response = await API.get(
|
||||
`/api/deployments/available-replicas?hardware_id=${hardwareId}&gpu_count=${gpuCount}`
|
||||
);
|
||||
if (response.data.success) {
|
||||
const replicas = response.data.data.replicas || [];
|
||||
setAvailableReplicas(replicas);
|
||||
return replicas;
|
||||
} else {
|
||||
showError('获取可用资源失败: ' + response.data.message);
|
||||
setAvailableReplicas([]);
|
||||
return [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Load available replicas error:', error);
|
||||
setAvailableReplicas([]);
|
||||
return [];
|
||||
} finally {
|
||||
setLoadingReplicas(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const calculatePrice = useCallback(async (params) => {
|
||||
const {
|
||||
locationIds,
|
||||
hardwareId,
|
||||
gpusPerContainer,
|
||||
durationHours,
|
||||
replicaCount
|
||||
} = params;
|
||||
|
||||
if (!locationIds?.length || !hardwareId || !gpusPerContainer || !durationHours || !replicaCount) {
|
||||
setPriceEstimation(null);
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoadingPrice(true);
|
||||
const requestData = {
|
||||
location_ids: locationIds,
|
||||
hardware_id: hardwareId,
|
||||
gpus_per_container: gpusPerContainer,
|
||||
duration_hours: durationHours,
|
||||
replica_count: replicaCount,
|
||||
};
|
||||
|
||||
const response = await API.post('/api/deployments/price-estimation', requestData);
|
||||
if (response.data.success) {
|
||||
const estimation = response.data.data;
|
||||
setPriceEstimation(estimation);
|
||||
return estimation;
|
||||
} else {
|
||||
showError('价格计算失败: ' + response.data.message);
|
||||
setPriceEstimation(null);
|
||||
return null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Price calculation error:', error);
|
||||
setPriceEstimation(null);
|
||||
return null;
|
||||
} finally {
|
||||
setLoadingPrice(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const checkClusterNameAvailability = useCallback(async (name) => {
|
||||
if (!name?.trim()) return false;
|
||||
|
||||
try {
|
||||
const response = await API.get(`/api/deployments/check-name?name=${encodeURIComponent(name.trim())}`);
|
||||
if (response.data.success) {
|
||||
return response.data.data.available;
|
||||
} else {
|
||||
showError('检查名称可用性失败: ' + response.data.message);
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Check cluster name availability error:', error);
|
||||
return false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const createDeployment = useCallback(async (deploymentData) => {
|
||||
try {
|
||||
const response = await API.post('/api/deployments', deploymentData);
|
||||
if (response.data.success) {
|
||||
return response.data.data;
|
||||
} else {
|
||||
throw new Error(response.data.message || '创建部署失败');
|
||||
}
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}, []);
|
||||
|
||||
return {
|
||||
// Data
|
||||
hardwareTypes,
|
||||
hardwareTotalAvailable,
|
||||
locations,
|
||||
locationsTotalAvailable,
|
||||
availableReplicas,
|
||||
priceEstimation,
|
||||
|
||||
// Loading states
|
||||
loadingHardware,
|
||||
loadingLocations,
|
||||
loadingReplicas,
|
||||
loadingPrice,
|
||||
|
||||
// Functions
|
||||
fetchHardwareTypes,
|
||||
fetchLocations,
|
||||
fetchAvailableReplicas,
|
||||
calculatePrice,
|
||||
checkClusterNameAvailability,
|
||||
createDeployment,
|
||||
|
||||
// Clear functions
|
||||
clearPriceEstimation: () => setPriceEstimation(null),
|
||||
clearAvailableReplicas: () => setAvailableReplicas([]),
|
||||
};
|
||||
};
|
||||
|
||||
export default useDeploymentResources;
|
||||
507
web/src/hooks/model-deployments/useDeploymentsData.jsx
Normal file
507
web/src/hooks/model-deployments/useDeploymentsData.jsx
Normal file
@@ -0,0 +1,507 @@
|
||||
/*
|
||||
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 { useState, useEffect, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { API, showError, showSuccess } from '../../helpers';
|
||||
import { ITEMS_PER_PAGE } from '../../constants';
|
||||
import { useTableCompactMode } from '../common/useTableCompactMode';
|
||||
|
||||
export const useDeploymentsData = () => {
|
||||
const { t } = useTranslation();
|
||||
const [compactMode, setCompactMode] = useTableCompactMode('deployments');
|
||||
|
||||
// State management
|
||||
const [deployments, setDeployments] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [activePage, setActivePage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [deploymentCount, setDeploymentCount] = useState(0);
|
||||
|
||||
// Modal states
|
||||
const [showEdit, setShowEdit] = useState(false);
|
||||
const [editingDeployment, setEditingDeployment] = useState({
|
||||
id: undefined,
|
||||
});
|
||||
|
||||
// Row selection
|
||||
const [selectedKeys, setSelectedKeys] = useState([]);
|
||||
const rowSelection = {
|
||||
getCheckboxProps: (record) => ({
|
||||
name: record.deployment_name,
|
||||
}),
|
||||
selectedRowKeys: selectedKeys.map((deployment) => deployment.id),
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
setSelectedKeys(selectedRows);
|
||||
},
|
||||
};
|
||||
|
||||
// Form initial values
|
||||
const formInitValues = {
|
||||
searchKeyword: '',
|
||||
searchStatus: '',
|
||||
};
|
||||
|
||||
// ---------- helpers ----------
|
||||
// Safely extract array items from API payload
|
||||
const extractItems = (payload) => {
|
||||
const items = payload?.items || payload || [];
|
||||
return Array.isArray(items) ? items : [];
|
||||
};
|
||||
|
||||
// Form API reference
|
||||
const [formApi, setFormApi] = useState(null);
|
||||
|
||||
// Get form values helper function
|
||||
const getFormValues = () => formApi?.getValues() || formInitValues;
|
||||
|
||||
// Close edit modal
|
||||
const closeEdit = () => {
|
||||
setShowEdit(false);
|
||||
setTimeout(() => {
|
||||
setEditingDeployment({ id: undefined });
|
||||
}, 500);
|
||||
};
|
||||
|
||||
// Set deployment format with key field
|
||||
const setDeploymentFormat = (deployments) => {
|
||||
for (let i = 0; i < deployments.length; i++) {
|
||||
deployments[i].key = deployments[i].id;
|
||||
}
|
||||
setDeployments(deployments);
|
||||
};
|
||||
|
||||
// Status tabs
|
||||
const [activeStatusKey, setActiveStatusKey] = useState('all');
|
||||
const [statusCounts, setStatusCounts] = useState({});
|
||||
|
||||
// Column visibility
|
||||
const COLUMN_KEYS = useMemo(
|
||||
() => ({
|
||||
id: 'id',
|
||||
status: 'status',
|
||||
provider: 'provider',
|
||||
container_name: 'container_name',
|
||||
time_remaining: 'time_remaining',
|
||||
hardware_info: 'hardware_info',
|
||||
created_at: 'created_at',
|
||||
actions: 'actions',
|
||||
// Legacy keys for compatibility
|
||||
deployment_name: 'deployment_name',
|
||||
model_name: 'model_name',
|
||||
instance_count: 'instance_count',
|
||||
resource_config: 'resource_config',
|
||||
updated_at: 'updated_at',
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
const ensureRequiredColumns = (columns = {}) => {
|
||||
const normalized = {
|
||||
...columns,
|
||||
[COLUMN_KEYS.container_name]: true,
|
||||
[COLUMN_KEYS.actions]: true,
|
||||
};
|
||||
|
||||
if (normalized[COLUMN_KEYS.provider] === undefined) {
|
||||
normalized[COLUMN_KEYS.provider] = true;
|
||||
}
|
||||
|
||||
return normalized;
|
||||
};
|
||||
|
||||
const [visibleColumns, setVisibleColumnsState] = useState(() => {
|
||||
const saved = localStorage.getItem('deployments_visible_columns');
|
||||
if (saved) {
|
||||
try {
|
||||
const parsed = JSON.parse(saved);
|
||||
return ensureRequiredColumns(parsed);
|
||||
} catch (e) {
|
||||
console.error('Failed to parse saved column visibility:', e);
|
||||
}
|
||||
}
|
||||
return ensureRequiredColumns({
|
||||
[COLUMN_KEYS.container_name]: true,
|
||||
[COLUMN_KEYS.status]: true,
|
||||
[COLUMN_KEYS.provider]: true,
|
||||
[COLUMN_KEYS.time_remaining]: true,
|
||||
[COLUMN_KEYS.hardware_info]: true,
|
||||
[COLUMN_KEYS.created_at]: true,
|
||||
[COLUMN_KEYS.actions]: true,
|
||||
// Legacy columns (hidden by default)
|
||||
[COLUMN_KEYS.deployment_name]: false,
|
||||
[COLUMN_KEYS.model_name]: false,
|
||||
[COLUMN_KEYS.instance_count]: false,
|
||||
[COLUMN_KEYS.resource_config]: false,
|
||||
[COLUMN_KEYS.updated_at]: false,
|
||||
});
|
||||
});
|
||||
|
||||
// Column selector modal
|
||||
const [showColumnSelector, setShowColumnSelector] = useState(false);
|
||||
|
||||
// Save column visibility to localStorage
|
||||
const saveColumnVisibility = (newVisibleColumns) => {
|
||||
const normalized = ensureRequiredColumns(newVisibleColumns);
|
||||
localStorage.setItem('deployments_visible_columns', JSON.stringify(normalized));
|
||||
setVisibleColumnsState(normalized);
|
||||
};
|
||||
|
||||
// Load deployments data
|
||||
const loadDeployments = async (
|
||||
page = 1,
|
||||
size = pageSize,
|
||||
statusKey = activeStatusKey,
|
||||
) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
let url = `/api/deployments/?p=${page}&page_size=${size}`;
|
||||
if (statusKey && statusKey !== 'all') {
|
||||
url = `/api/deployments/search?status=${statusKey}&p=${page}&page_size=${size}`;
|
||||
}
|
||||
|
||||
const res = await API.get(url);
|
||||
const { success, message, data } = res.data;
|
||||
if (success) {
|
||||
const newPageData = extractItems(data);
|
||||
setActivePage(data.page || page);
|
||||
setDeploymentCount(data.total || newPageData.length);
|
||||
setDeploymentFormat(newPageData);
|
||||
|
||||
if (data.status_counts) {
|
||||
const sumAll = Object.values(data.status_counts).reduce(
|
||||
(acc, v) => acc + v,
|
||||
0,
|
||||
);
|
||||
setStatusCounts({ ...data.status_counts, all: sumAll });
|
||||
}
|
||||
} else {
|
||||
showError(message);
|
||||
setDeployments([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
showError(t('获取部署列表失败'));
|
||||
setDeployments([]);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
// Search deployments
|
||||
const searchDeployments = async (searchTerms) => {
|
||||
setSearching(true);
|
||||
try {
|
||||
const { searchKeyword, searchStatus } = searchTerms;
|
||||
const params = new URLSearchParams({
|
||||
p: '1',
|
||||
page_size: pageSize.toString(),
|
||||
});
|
||||
|
||||
if (searchKeyword?.trim()) {
|
||||
params.append('keyword', searchKeyword.trim());
|
||||
}
|
||||
if (searchStatus && searchStatus !== 'all') {
|
||||
params.append('status', searchStatus);
|
||||
}
|
||||
|
||||
const res = await API.get(`/api/deployments/search?${params}`);
|
||||
const { success, message, data } = res.data;
|
||||
|
||||
if (success) {
|
||||
const items = extractItems(data);
|
||||
setActivePage(1);
|
||||
setDeploymentCount(data.total || items.length);
|
||||
setDeploymentFormat(items);
|
||||
} else {
|
||||
showError(message);
|
||||
setDeployments([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Search error:', error);
|
||||
showError(t('搜索失败'));
|
||||
setDeployments([]);
|
||||
}
|
||||
setSearching(false);
|
||||
};
|
||||
|
||||
// Refresh data
|
||||
const refresh = async (page = activePage) => {
|
||||
await loadDeployments(page, pageSize);
|
||||
};
|
||||
|
||||
// Handle page change
|
||||
const handlePageChange = (page) => {
|
||||
setActivePage(page);
|
||||
if (!searching) {
|
||||
loadDeployments(page, pageSize);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle page size change
|
||||
const handlePageSizeChange = (size) => {
|
||||
setPageSize(size);
|
||||
setActivePage(1);
|
||||
if (!searching) {
|
||||
loadDeployments(1, size);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle tab change
|
||||
const handleTabChange = (statusKey) => {
|
||||
setActiveStatusKey(statusKey);
|
||||
setActivePage(1);
|
||||
loadDeployments(1, pageSize, statusKey);
|
||||
};
|
||||
|
||||
// Deployment operations
|
||||
const startDeployment = async (deploymentId) => {
|
||||
try {
|
||||
const res = await API.post(`/api/deployments/${deploymentId}/start`);
|
||||
if (res.data.success) {
|
||||
showSuccess(t('部署启动成功'));
|
||||
await refresh();
|
||||
} else {
|
||||
showError(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
showError(t('启动部署失败'));
|
||||
}
|
||||
};
|
||||
|
||||
const restartDeployment = async (deploymentId) => {
|
||||
try {
|
||||
const res = await API.post(`/api/deployments/${deploymentId}/restart`);
|
||||
if (res.data.success) {
|
||||
showSuccess(t('部署重启成功'));
|
||||
await refresh();
|
||||
} else {
|
||||
showError(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
showError(t('重启部署失败'));
|
||||
}
|
||||
};
|
||||
|
||||
const deleteDeployment = async (deploymentId) => {
|
||||
try {
|
||||
const res = await API.delete(`/api/deployments/${deploymentId}`);
|
||||
if (res.data.success) {
|
||||
showSuccess(t('部署删除成功'));
|
||||
await refresh();
|
||||
} else {
|
||||
showError(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
showError(t('删除部署失败'));
|
||||
}
|
||||
};
|
||||
|
||||
const syncDeploymentToChannel = async (deployment) => {
|
||||
if (!deployment?.id) {
|
||||
showError(t('同步渠道失败：缺少部署信息'));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const containersResp = await API.get(`/api/deployments/${deployment.id}/containers`);
|
||||
if (!containersResp.data?.success) {
|
||||
showError(containersResp.data?.message || t('获取容器信息失败'));
|
||||
return;
|
||||
}
|
||||
|
||||
const containers = containersResp.data?.data?.containers || [];
|
||||
const activeContainer = containers.find((ctr) => ctr?.public_url);
|
||||
|
||||
if (!activeContainer?.public_url) {
|
||||
showError(t('未找到可用的容器访问地址'));
|
||||
return;
|
||||
}
|
||||
|
||||
const rawUrl = String(activeContainer.public_url).trim();
|
||||
const baseUrl = rawUrl.replace(/\/+$/, '');
|
||||
if (!baseUrl) {
|
||||
showError(t('容器访问地址无效'));
|
||||
return;
|
||||
}
|
||||
|
||||
const baseName = deployment.container_name || deployment.deployment_name || deployment.name || deployment.id;
|
||||
const safeName = String(baseName || 'ionet').slice(0, 60);
|
||||
const channelName = `[IO.NET] ${safeName}`;
|
||||
|
||||
let randomKey;
|
||||
try {
|
||||
randomKey = (typeof crypto !== 'undefined' && crypto.randomUUID)
|
||||
? `ionet-${crypto.randomUUID().replace(/-/g, '')}`
|
||||
: null;
|
||||
} catch (err) {
|
||||
randomKey = null;
|
||||
}
|
||||
if (!randomKey) {
|
||||
randomKey = `ionet-${Math.random().toString(36).slice(2)}${Math.random().toString(36).slice(2)}`;
|
||||
}
|
||||
|
||||
const otherInfo = {
|
||||
source: 'ionet',
|
||||
deployment_id: deployment.id,
|
||||
deployment_name: safeName,
|
||||
container_id: activeContainer.container_id || null,
|
||||
public_url: baseUrl,
|
||||
};
|
||||
|
||||
const payload = {
|
||||
mode: 'single',
|
||||
channel: {
|
||||
name: channelName,
|
||||
type: 4,
|
||||
key: randomKey,
|
||||
base_url: baseUrl,
|
||||
group: 'default',
|
||||
tag: 'ionet',
|
||||
remark: `[IO.NET] Auto-synced from deployment ${deployment.id}`,
|
||||
other_info: JSON.stringify(otherInfo),
|
||||
},
|
||||
};
|
||||
|
||||
const createResp = await API.post('/api/channel/', payload);
|
||||
if (createResp.data?.success) {
|
||||
showSuccess(t('已同步到渠道'));
|
||||
} else {
|
||||
showError(createResp.data?.message || t('同步渠道失败'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
showError(t('同步渠道失败'));
|
||||
}
|
||||
};
|
||||
|
||||
const updateDeploymentName = async (deploymentId, newName) => {
|
||||
try {
|
||||
const res = await API.put(`/api/deployments/${deploymentId}/name`, { name: newName });
|
||||
if (res.data.success) {
|
||||
showSuccess(t('部署名称更新成功'));
|
||||
await refresh();
|
||||
return true;
|
||||
} else {
|
||||
showError(res.data.message);
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
showError(t('更新部署名称失败'));
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// Batch operations
|
||||
const batchDeleteDeployments = async () => {
|
||||
if (selectedKeys.length === 0) return;
|
||||
|
||||
try {
|
||||
const ids = selectedKeys.map(deployment => deployment.id);
|
||||
const res = await API.post('/api/deployments/batch_delete', { ids });
|
||||
if (res.data.success) {
|
||||
showSuccess(t('批量删除成功'));
|
||||
setSelectedKeys([]);
|
||||
await refresh();
|
||||
} else {
|
||||
showError(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
showError(t('批量删除失败'));
|
||||
}
|
||||
};
|
||||
|
||||
// Table row click handler
|
||||
const handleRow = (record) => ({
|
||||
onClick: () => {
|
||||
// Handle row click if needed
|
||||
},
|
||||
});
|
||||
|
||||
// Initial load
|
||||
useEffect(() => {
|
||||
loadDeployments();
|
||||
}, []);
|
||||
|
||||
return {
|
||||
// Data
|
||||
deployments,
|
||||
loading,
|
||||
searching,
|
||||
activePage,
|
||||
pageSize,
|
||||
deploymentCount,
|
||||
statusCounts,
|
||||
activeStatusKey,
|
||||
compactMode,
|
||||
setCompactMode,
|
||||
|
||||
// Selection
|
||||
selectedKeys,
|
||||
setSelectedKeys,
|
||||
rowSelection,
|
||||
|
||||
// Modals
|
||||
showEdit,
|
||||
setShowEdit,
|
||||
editingDeployment,
|
||||
setEditingDeployment,
|
||||
closeEdit,
|
||||
|
||||
// Column visibility
|
||||
visibleColumns,
|
||||
setVisibleColumns: saveColumnVisibility,
|
||||
showColumnSelector,
|
||||
setShowColumnSelector,
|
||||
COLUMN_KEYS,
|
||||
|
||||
// Form
|
||||
formInitValues,
|
||||
formApi,
|
||||
setFormApi,
|
||||
getFormValues,
|
||||
|
||||
// Operations
|
||||
loadDeployments,
|
||||
searchDeployments,
|
||||
refresh,
|
||||
handlePageChange,
|
||||
handlePageSizeChange,
|
||||
handleTabChange,
|
||||
handleRow,
|
||||
|
||||
// Deployment operations
|
||||
startDeployment,
|
||||
restartDeployment,
|
||||
deleteDeployment,
|
||||
updateDeploymentName,
|
||||
syncDeploymentToChannel,
|
||||
|
||||
// Batch operations
|
||||
batchDeleteDeployments,
|
||||
|
||||
// Translation
|
||||
t,
|
||||
};
|
||||
};
|
||||
249
web/src/hooks/model-deployments/useEnhancedDeploymentActions.jsx
Normal file
249
web/src/hooks/model-deployments/useEnhancedDeploymentActions.jsx
Normal file
@@ -0,0 +1,249 @@
|
||||
/*
|
||||
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 { useState } from 'react';
|
||||
import { API, showError, showSuccess } from '../../helpers';
|
||||
|
||||
export const useEnhancedDeploymentActions = (t) => {
|
||||
const [loading, setLoading] = useState({});
|
||||
|
||||
// Set loading state for specific operation
|
||||
const setOperationLoading = (operation, deploymentId, isLoading) => {
|
||||
setLoading(prev => ({
|
||||
...prev,
|
||||
[`${operation}_${deploymentId}`]: isLoading
|
||||
}));
|
||||
};
|
||||
|
||||
// Get loading state for specific operation
|
||||
const isOperationLoading = (operation, deploymentId) => {
|
||||
return loading[`${operation}_${deploymentId}`] || false;
|
||||
};
|
||||
|
||||
// Extend deployment duration
|
||||
const extendDeployment = async (deploymentId, durationHours) => {
|
||||
const operationKey = `extend_${deploymentId}`;
|
||||
try {
|
||||
setOperationLoading('extend', deploymentId, true);
|
||||
|
||||
const response = await API.post(`/api/deployments/${deploymentId}/extend`, {
|
||||
duration_hours: durationHours
|
||||
});
|
||||
|
||||
if (response.data.success) {
|
||||
showSuccess(t('容器时长延长成功'));
|
||||
return response.data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
showError(t('延长时长失败') + ': ' + (error.response?.data?.message || error.message));
|
||||
throw error;
|
||||
} finally {
|
||||
setOperationLoading('extend', deploymentId, false);
|
||||
}
|
||||
};
|
||||
|
||||
// Get deployment details
|
||||
const getDeploymentDetails = async (deploymentId) => {
|
||||
try {
|
||||
setOperationLoading('details', deploymentId, true);
|
||||
|
||||
const response = await API.get(`/api/deployments/${deploymentId}`);
|
||||
|
||||
if (response.data.success) {
|
||||
return response.data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
showError(t('获取详情失败') + ': ' + (error.response?.data?.message || error.message));
|
||||
throw error;
|
||||
} finally {
|
||||
setOperationLoading('details', deploymentId, false);
|
||||
}
|
||||
};
|
||||
|
||||
// Get deployment logs
|
||||
const getDeploymentLogs = async (deploymentId, options = {}) => {
|
||||
try {
|
||||
setOperationLoading('logs', deploymentId, true);
|
||||
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (options.containerId) params.append('container_id', options.containerId);
|
||||
if (options.level) params.append('level', options.level);
|
||||
if (options.limit) params.append('limit', options.limit.toString());
|
||||
if (options.cursor) params.append('cursor', options.cursor);
|
||||
if (options.follow) params.append('follow', 'true');
|
||||
if (options.startTime) params.append('start_time', options.startTime);
|
||||
if (options.endTime) params.append('end_time', options.endTime);
|
||||
|
||||
const response = await API.get(`/api/deployments/${deploymentId}/logs?${params}`);
|
||||
|
||||
if (response.data.success) {
|
||||
return response.data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
showError(t('获取日志失败') + ': ' + (error.response?.data?.message || error.message));
|
||||
throw error;
|
||||
} finally {
|
||||
setOperationLoading('logs', deploymentId, false);
|
||||
}
|
||||
};
|
||||
|
||||
// Update deployment configuration
|
||||
const updateDeploymentConfig = async (deploymentId, config) => {
|
||||
try {
|
||||
setOperationLoading('config', deploymentId, true);
|
||||
|
||||
const response = await API.put(`/api/deployments/${deploymentId}`, config);
|
||||
|
||||
if (response.data.success) {
|
||||
showSuccess(t('容器配置更新成功'));
|
||||
return response.data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
showError(t('更新配置失败') + ': ' + (error.response?.data?.message || error.message));
|
||||
throw error;
|
||||
} finally {
|
||||
setOperationLoading('config', deploymentId, false);
|
||||
}
|
||||
};
|
||||
|
||||
// Delete (destroy) deployment
|
||||
const deleteDeployment = async (deploymentId) => {
|
||||
try {
|
||||
setOperationLoading('delete', deploymentId, true);
|
||||
|
||||
const response = await API.delete(`/api/deployments/${deploymentId}`);
|
||||
|
||||
if (response.data.success) {
|
||||
showSuccess(t('容器销毁请求已提交'));
|
||||
return response.data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
showError(t('销毁容器失败') + ': ' + (error.response?.data?.message || error.message));
|
||||
throw error;
|
||||
} finally {
|
||||
setOperationLoading('delete', deploymentId, false);
|
||||
}
|
||||
};
|
||||
|
||||
// Update deployment name
|
||||
const updateDeploymentName = async (deploymentId, newName) => {
|
||||
try {
|
||||
setOperationLoading('rename', deploymentId, true);
|
||||
|
||||
const response = await API.put(`/api/deployments/${deploymentId}/name`, {
|
||||
name: newName
|
||||
});
|
||||
|
||||
if (response.data.success) {
|
||||
showSuccess(t('容器名称更新成功'));
|
||||
return response.data.data;
|
||||
}
|
||||
} catch (error) {
|
||||
showError(t('更新名称失败') + ': ' + (error.response?.data?.message || error.message));
|
||||
throw error;
|
||||
} finally {
|
||||
setOperationLoading('rename', deploymentId, false);
|
||||
}
|
||||
};
|
||||
|
||||
// Batch operations
|
||||
const batchDelete = async (deploymentIds) => {
|
||||
try {
|
||||
setOperationLoading('batch_delete', 'all', true);
|
||||
|
||||
const results = await Promise.allSettled(
|
||||
deploymentIds.map(id => deleteDeployment(id))
|
||||
);
|
||||
|
||||
const successful = results.filter(r => r.status === 'fulfilled').length;
|
||||
const failed = results.filter(r => r.status === 'rejected').length;
|
||||
|
||||
if (successful > 0) {
|
||||
showSuccess(t('批量操作完成: {{success}}个成功, {{failed}}个失败', {
|
||||
success: successful,
|
||||
failed: failed
|
||||
}));
|
||||
}
|
||||
|
||||
return { successful, failed };
|
||||
} catch (error) {
|
||||
showError(t('批量操作失败') + ': ' + error.message);
|
||||
throw error;
|
||||
} finally {
|
||||
setOperationLoading('batch_delete', 'all', false);
|
||||
}
|
||||
};
|
||||
|
||||
// Export logs
|
||||
const exportLogs = async (deploymentId, options = {}) => {
|
||||
try {
|
||||
setOperationLoading('export_logs', deploymentId, true);
|
||||
|
||||
const logs = await getDeploymentLogs(deploymentId, {
|
||||
...options,
|
||||
limit: 10000 // Get more logs for export
|
||||
});
|
||||
|
||||
if (logs && logs.logs) {
|
||||
const logText = logs.logs.map(log =>
|
||||
`[${new Date(log.timestamp).toISOString()}] [${log.level}] ${log.source ? `[${log.source}] ` : ''}${log.message}`
|
||||
).join('\n');
|
||||
|
||||
const blob = new Blob([logText], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `deployment-${deploymentId}-logs-${new Date().toISOString().split('T')[0]}.txt`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
showSuccess(t('日志导出成功'));
|
||||
}
|
||||
} catch (error) {
|
||||
showError(t('导出日志失败') + ': ' + error.message);
|
||||
throw error;
|
||||
} finally {
|
||||
setOperationLoading('export_logs', deploymentId, false);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
// Actions
|
||||
extendDeployment,
|
||||
getDeploymentDetails,
|
||||
getDeploymentLogs,
|
||||
updateDeploymentConfig,
|
||||
deleteDeployment,
|
||||
updateDeploymentName,
|
||||
batchDelete,
|
||||
exportLogs,
|
||||
|
||||
// Loading states
|
||||
isOperationLoading,
|
||||
loading,
|
||||
|
||||
// Utility
|
||||
setOperationLoading
|
||||
};
|
||||
};
|
||||
|
||||
export default useEnhancedDeploymentActions;
|
||||
143
web/src/hooks/model-deployments/useModelDeploymentSettings.js
Normal file
143
web/src/hooks/model-deployments/useModelDeploymentSettings.js
Normal file
@@ -0,0 +1,143 @@
|
||||
/*
|
||||
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 { useCallback, useEffect, useState } from 'react';
|
||||
import { API, toBoolean } from '../../helpers';
|
||||
|
||||
export const useModelDeploymentSettings = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [settings, setSettings] = useState({
|
||||
'model_deployment.ionet.enabled': false,
|
||||
'model_deployment.ionet.api_key': '',
|
||||
});
|
||||
const [connectionState, setConnectionState] = useState({
|
||||
loading: false,
|
||||
ok: null,
|
||||
error: null,
|
||||
});
|
||||
|
||||
const getSettings = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await API.get('/api/option/');
|
||||
const { success, data } = res.data;
|
||||
|
||||
if (success) {
|
||||
const newSettings = {
|
||||
'model_deployment.ionet.enabled': false,
|
||||
'model_deployment.ionet.api_key': '',
|
||||
};
|
||||
|
||||
data.forEach((item) => {
|
||||
if (item.key.endsWith('enabled')) {
|
||||
newSettings[item.key] = toBoolean(item.value);
|
||||
} else if (newSettings.hasOwnProperty(item.key)) {
|
||||
newSettings[item.key] = item.value || '';
|
||||
}
|
||||
});
|
||||
|
||||
setSettings(newSettings);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to get model deployment settings:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getSettings();
|
||||
}, []);
|
||||
|
||||
const apiKey = settings['model_deployment.ionet.api_key'];
|
||||
const isIoNetEnabled = settings['model_deployment.ionet.enabled'] &&
|
||||
apiKey &&
|
||||
apiKey.trim() !== '';
|
||||
|
||||
const buildConnectionError = (rawMessage, fallbackMessage = 'Connection failed') => {
|
||||
const message = (rawMessage || fallbackMessage).trim();
|
||||
const normalized = message.toLowerCase();
|
||||
if (normalized.includes('expired') || normalized.includes('expire')) {
|
||||
return { type: 'expired', message };
|
||||
}
|
||||
if (normalized.includes('invalid') || normalized.includes('unauthorized') || normalized.includes('api key')) {
|
||||
return { type: 'invalid', message };
|
||||
}
|
||||
if (normalized.includes('network') || normalized.includes('timeout')) {
|
||||
return { type: 'network', message };
|
||||
}
|
||||
return { type: 'unknown', message };
|
||||
};
|
||||
|
||||
const testConnection = useCallback(async (apiKey) => {
|
||||
const key = (apiKey || '').trim();
|
||||
if (key === '') {
|
||||
setConnectionState({ loading: false, ok: null, error: null });
|
||||
return;
|
||||
}
|
||||
|
||||
setConnectionState({ loading: true, ok: null, error: null });
|
||||
try {
|
||||
const response = await API.post(
|
||||
'/api/deployments/test-connection',
|
||||
{ api_key: key },
|
||||
{ skipErrorHandler: true },
|
||||
);
|
||||
|
||||
if (response?.data?.success) {
|
||||
setConnectionState({ loading: false, ok: true, error: null });
|
||||
return;
|
||||
}
|
||||
|
||||
const message = response?.data?.message || 'Connection failed';
|
||||
setConnectionState({ loading: false, ok: false, error: buildConnectionError(message) });
|
||||
} catch (error) {
|
||||
if (error?.code === 'ERR_NETWORK') {
|
||||
setConnectionState({
|
||||
loading: false,
|
||||
ok: false,
|
||||
error: { type: 'network', message: 'Network connection failed' },
|
||||
});
|
||||
return;
|
||||
}
|
||||
const rawMessage = error?.response?.data?.message || error?.message || 'Unknown error';
|
||||
setConnectionState({ loading: false, ok: false, error: buildConnectionError(rawMessage, 'Connection failed') });
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && isIoNetEnabled) {
|
||||
testConnection(apiKey);
|
||||
return;
|
||||
}
|
||||
setConnectionState({ loading: false, ok: null, error: null });
|
||||
}, [loading, isIoNetEnabled, apiKey, testConnection]);
|
||||
|
||||
return {
|
||||
loading,
|
||||
settings,
|
||||
apiKey,
|
||||
isIoNetEnabled,
|
||||
refresh: getSettings,
|
||||
connectionLoading: connectionState.loading,
|
||||
connectionOk: connectionState.ok,
|
||||
connectionError: connectionState.error,
|
||||
testConnection,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user