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
247
web/src/components/table/model-deployments/DeploymentsTable.jsx
Normal file
247
web/src/components/table/model-deployments/DeploymentsTable.jsx
Normal file
@@ -0,0 +1,247 @@
|
||||
/*
|
||||
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, { useMemo, useState } from 'react';
|
||||
import { Empty } from '@douyinfe/semi-ui';
|
||||
import CardTable from '../../common/ui/CardTable';
|
||||
import {
|
||||
IllustrationNoResult,
|
||||
IllustrationNoResultDark,
|
||||
} from '@douyinfe/semi-illustrations';
|
||||
import { getDeploymentsColumns } from './DeploymentsColumnDefs';
|
||||
|
||||
// Import all the new modals
|
||||
import ViewLogsModal from './modals/ViewLogsModal';
|
||||
import ExtendDurationModal from './modals/ExtendDurationModal';
|
||||
import ViewDetailsModal from './modals/ViewDetailsModal';
|
||||
import UpdateConfigModal from './modals/UpdateConfigModal';
|
||||
import ConfirmationDialog from './modals/ConfirmationDialog';
|
||||
|
||||
const DeploymentsTable = (deploymentsData) => {
|
||||
const {
|
||||
deployments,
|
||||
loading,
|
||||
searching,
|
||||
activePage,
|
||||
pageSize,
|
||||
deploymentCount,
|
||||
compactMode,
|
||||
visibleColumns,
|
||||
setSelectedKeys,
|
||||
handlePageChange,
|
||||
handlePageSizeChange,
|
||||
handleRow,
|
||||
t,
|
||||
COLUMN_KEYS,
|
||||
// Column functions and data
|
||||
startDeployment,
|
||||
restartDeployment,
|
||||
deleteDeployment,
|
||||
syncDeploymentToChannel,
|
||||
setEditingDeployment,
|
||||
setShowEdit,
|
||||
refresh,
|
||||
} = deploymentsData;
|
||||
|
||||
// Modal states
|
||||
const [selectedDeployment, setSelectedDeployment] = useState(null);
|
||||
const [showLogsModal, setShowLogsModal] = useState(false);
|
||||
const [showExtendModal, setShowExtendModal] = useState(false);
|
||||
const [showDetailsModal, setShowDetailsModal] = useState(false);
|
||||
const [showConfigModal, setShowConfigModal] = useState(false);
|
||||
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
|
||||
const [confirmOperation, setConfirmOperation] = useState('delete');
|
||||
|
||||
// Enhanced modal handlers
|
||||
const handleViewLogs = (deployment) => {
|
||||
setSelectedDeployment(deployment);
|
||||
setShowLogsModal(true);
|
||||
};
|
||||
|
||||
const handleExtendDuration = (deployment) => {
|
||||
setSelectedDeployment(deployment);
|
||||
setShowExtendModal(true);
|
||||
};
|
||||
|
||||
const handleViewDetails = (deployment) => {
|
||||
setSelectedDeployment(deployment);
|
||||
setShowDetailsModal(true);
|
||||
};
|
||||
|
||||
const handleUpdateConfig = (deployment, operation = 'update') => {
|
||||
setSelectedDeployment(deployment);
|
||||
if (operation === 'delete' || operation === 'destroy') {
|
||||
setConfirmOperation(operation);
|
||||
setShowConfirmDialog(true);
|
||||
} else {
|
||||
setShowConfigModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirmAction = () => {
|
||||
if (selectedDeployment && confirmOperation === 'delete') {
|
||||
deleteDeployment(selectedDeployment.id);
|
||||
}
|
||||
setShowConfirmDialog(false);
|
||||
setSelectedDeployment(null);
|
||||
};
|
||||
|
||||
const handleModalSuccess = (updatedDeployment) => {
|
||||
// Refresh the deployments list
|
||||
refresh?.();
|
||||
};
|
||||
|
||||
// Get all columns
|
||||
const allColumns = useMemo(() => {
|
||||
return getDeploymentsColumns({
|
||||
t,
|
||||
COLUMN_KEYS,
|
||||
startDeployment,
|
||||
restartDeployment,
|
||||
deleteDeployment,
|
||||
setEditingDeployment,
|
||||
setShowEdit,
|
||||
refresh,
|
||||
activePage,
|
||||
deployments,
|
||||
// Enhanced handlers
|
||||
onViewLogs: handleViewLogs,
|
||||
onExtendDuration: handleExtendDuration,
|
||||
onViewDetails: handleViewDetails,
|
||||
onUpdateConfig: handleUpdateConfig,
|
||||
onSyncToChannel: syncDeploymentToChannel,
|
||||
});
|
||||
}, [
|
||||
t,
|
||||
COLUMN_KEYS,
|
||||
startDeployment,
|
||||
restartDeployment,
|
||||
deleteDeployment,
|
||||
syncDeploymentToChannel,
|
||||
setEditingDeployment,
|
||||
setShowEdit,
|
||||
refresh,
|
||||
activePage,
|
||||
deployments,
|
||||
]);
|
||||
|
||||
// Filter columns based on visibility settings
|
||||
const getVisibleColumns = () => {
|
||||
return allColumns.filter((column) => visibleColumns[column.key]);
|
||||
};
|
||||
|
||||
const visibleColumnsList = useMemo(() => {
|
||||
return getVisibleColumns();
|
||||
}, [visibleColumns, allColumns]);
|
||||
|
||||
const tableColumns = useMemo(() => {
|
||||
if (compactMode) {
|
||||
// In compact mode, remove fixed columns and adjust widths
|
||||
return visibleColumnsList.map(({ fixed, width, ...rest }) => ({
|
||||
...rest,
|
||||
width: width ? Math.max(width * 0.8, 80) : undefined, // Reduce width by 20% but keep minimum
|
||||
}));
|
||||
}
|
||||
return visibleColumnsList;
|
||||
}, [compactMode, visibleColumnsList]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<CardTable
|
||||
columns={tableColumns}
|
||||
dataSource={deployments}
|
||||
scroll={compactMode ? { x: 800 } : { x: 1200 }}
|
||||
pagination={{
|
||||
currentPage: activePage,
|
||||
pageSize: pageSize,
|
||||
total: deploymentCount,
|
||||
pageSizeOpts: [10, 20, 50, 100],
|
||||
showSizeChanger: true,
|
||||
onPageSizeChange: handlePageSizeChange,
|
||||
onPageChange: handlePageChange,
|
||||
}}
|
||||
hidePagination={true}
|
||||
expandAllRows={false}
|
||||
onRow={handleRow}
|
||||
rowSelection={{
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
setSelectedKeys(selectedRows);
|
||||
},
|
||||
}}
|
||||
empty={
|
||||
<Empty
|
||||
image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
|
||||
darkModeImage={
|
||||
<IllustrationNoResultDark style={{ width: 150, height: 150 }} />
|
||||
}
|
||||
description={t('搜索无结果')}
|
||||
style={{ padding: 30 }}
|
||||
/>
|
||||
}
|
||||
className='rounded-xl overflow-hidden'
|
||||
size='middle'
|
||||
loading={loading || searching}
|
||||
/>
|
||||
|
||||
{/* Enhanced Modals */}
|
||||
<ViewLogsModal
|
||||
visible={showLogsModal}
|
||||
onCancel={() => setShowLogsModal(false)}
|
||||
deployment={selectedDeployment}
|
||||
t={t}
|
||||
/>
|
||||
|
||||
<ExtendDurationModal
|
||||
visible={showExtendModal}
|
||||
onCancel={() => setShowExtendModal(false)}
|
||||
deployment={selectedDeployment}
|
||||
onSuccess={handleModalSuccess}
|
||||
t={t}
|
||||
/>
|
||||
|
||||
<ViewDetailsModal
|
||||
visible={showDetailsModal}
|
||||
onCancel={() => setShowDetailsModal(false)}
|
||||
deployment={selectedDeployment}
|
||||
t={t}
|
||||
/>
|
||||
|
||||
<UpdateConfigModal
|
||||
visible={showConfigModal}
|
||||
onCancel={() => setShowConfigModal(false)}
|
||||
deployment={selectedDeployment}
|
||||
onSuccess={handleModalSuccess}
|
||||
t={t}
|
||||
/>
|
||||
|
||||
<ConfirmationDialog
|
||||
visible={showConfirmDialog}
|
||||
onCancel={() => setShowConfirmDialog(false)}
|
||||
onConfirm={handleConfirmAction}
|
||||
title={t('确认操作')}
|
||||
type="danger"
|
||||
deployment={selectedDeployment}
|
||||
operation={confirmOperation}
|
||||
t={t}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeploymentsTable;
|
||||
Reference in New Issue
Block a user