/* 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 . 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 ( <> { setSelectedKeys(selectedRows); }, }} empty={ } darkModeImage={ } description={t('搜索无结果')} style={{ padding: 30 }} /> } className='rounded-xl overflow-hidden' size='middle' loading={loading || searching} /> {/* Enhanced Modals */} setShowLogsModal(false)} deployment={selectedDeployment} t={t} /> setShowExtendModal(false)} deployment={selectedDeployment} onSuccess={handleModalSuccess} t={t} /> setShowDetailsModal(false)} deployment={selectedDeployment} t={t} /> setShowConfigModal(false)} deployment={selectedDeployment} onSuccess={handleModalSuccess} t={t} /> setShowConfirmDialog(false)} onConfirm={handleConfirmAction} title={t('确认操作')} type="danger" deployment={selectedDeployment} operation={confirmOperation} t={t} /> ); }; export default DeploymentsTable;