|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import React from 'react'; |
|
|
import { Button, Popconfirm } from '@douyinfe/semi-ui'; |
|
|
import CompactModeToggle from '../../common/ui/CompactModeToggle'; |
|
|
|
|
|
const DeploymentsActions = ({ |
|
|
selectedKeys, |
|
|
setSelectedKeys, |
|
|
setEditingDeployment, |
|
|
setShowEdit, |
|
|
batchDeleteDeployments, |
|
|
compactMode, |
|
|
setCompactMode, |
|
|
showCreateModal, |
|
|
setShowCreateModal, |
|
|
t, |
|
|
}) => { |
|
|
const hasSelected = selectedKeys.length > 0; |
|
|
|
|
|
const handleAddDeployment = () => { |
|
|
if (setShowCreateModal) { |
|
|
setShowCreateModal(true); |
|
|
} else { |
|
|
|
|
|
setEditingDeployment({ id: undefined }); |
|
|
setShowEdit(true); |
|
|
} |
|
|
}; |
|
|
|
|
|
const handleBatchDelete = () => { |
|
|
batchDeleteDeployments(); |
|
|
}; |
|
|
|
|
|
const handleDeselectAll = () => { |
|
|
setSelectedKeys([]); |
|
|
}; |
|
|
|
|
|
|
|
|
return ( |
|
|
<div className='flex flex-wrap gap-2 w-full md:w-auto order-2 md:order-1'> |
|
|
<Button |
|
|
type='primary' |
|
|
className='flex-1 md:flex-initial' |
|
|
onClick={handleAddDeployment} |
|
|
size='small' |
|
|
> |
|
|
{t('新建容器')} |
|
|
</Button> |
|
|
|
|
|
{hasSelected && ( |
|
|
<> |
|
|
<Popconfirm |
|
|
title={t('确认删除')} |
|
|
content={`${t('确定要删除选中的')} ${selectedKeys.length} ${t('个部署吗?此操作不可逆。')}`} |
|
|
okText={t('删除')} |
|
|
cancelText={t('取消')} |
|
|
okType='danger' |
|
|
onConfirm={handleBatchDelete} |
|
|
> |
|
|
<Button |
|
|
type='danger' |
|
|
className='flex-1 md:flex-initial' |
|
|
disabled={selectedKeys.length === 0} |
|
|
size='small' |
|
|
> |
|
|
{t('批量删除')} ({selectedKeys.length}) |
|
|
</Button> |
|
|
</Popconfirm> |
|
|
|
|
|
<Button |
|
|
type='tertiary' |
|
|
className='flex-1 md:flex-initial' |
|
|
onClick={handleDeselectAll} |
|
|
size='small' |
|
|
> |
|
|
{t('取消选择')} |
|
|
</Button> |
|
|
</> |
|
|
)} |
|
|
|
|
|
{} |
|
|
<CompactModeToggle |
|
|
compactMode={compactMode} |
|
|
setCompactMode={setCompactMode} |
|
|
t={t} |
|
|
/> |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
export default DeploymentsActions; |
|
|
|