diff --git a/lib/components/vm/VmListTable.tsx b/lib/components/vm/VmListTable.tsx index 8a4c6f8..8b1132f 100644 --- a/lib/components/vm/VmListTable.tsx +++ b/lib/components/vm/VmListTable.tsx @@ -1,7 +1,8 @@ -import { LoadingOutlined } from "@ant-design/icons"; +import { LoadingOutlined, DownOutlined } from "@ant-design/icons"; import { ProColumns, ProDescriptions, ProTable } from "@ant-design/pro-components"; import { useRequest } from "ahooks"; -import { Button, Modal, Popconfirm, Space, Typography, Input } from "antd"; +import type { MenuProps } from 'antd'; +import { Button, Modal, Popconfirm, Space, Typography, Input, Dropdown, Menu } from "antd"; import { useState, ChangeEvent, useEffect, useRef } from "react"; import { CreateVmApplyResponse, ExperimentResponse, VirtualMachine, VmNetInfo } from "../../cloudapi-client"; import { cloudapiClient } from "../../utils/cloudapi"; @@ -202,46 +203,103 @@ export function VmListTable(props: Props) { title: '操作', key: 'option', valueType: 'option', + width: 120, render: (_, record) => { + const menuItems: MenuProps['items'] = [ + { + key: 'poweron', + disabled: record.state !== 'stopped', + label: ( + { + cloudapiClient.patchVmVmIdPower(record.vm.id, "poweron") + messageInfo('成功提交开机任务') + vmListReq.run() + }} + >开机 + ) + }, + { + key: 'poweroff', + disabled: record.state !== 'running', + label: ( + { + cloudapiClient.patchVmVmIdPower(record.vm.id, "poweroff") + messageInfo('成功提交关机任务') + vmListReq.run() + }} + >关机 + ) + }, + { + key: 'console', + disabled: record.state !== 'running', + label: ( + { + cloudapiClient.postVmVmIdTicket(record.vm.uuid || "").then(res => { + setConsoleProps({ + host: res.data.host, + ticket: res.data.ticket + }); + setShowConsole(true); + }) + }} + >打开控制台 + ) + }, + { + key: 'template', + disabled: record.state !== 'stopped', + label: ( + { + cloudapiClient.postVmTemplate({uuid: record.vm.uuid, name: record.name}) + messageInfo('转换虚拟机模板成功') + vmListReq.run() + }} + okText="确认" + cancelText="取消" + > + + 转换为模板 + + + ) + }, + { + type: 'divider', + }, + { + key: 'delete', + label: ( + { + await cloudapiClient.deleteVmVmId(record.vm.id) + }} + okText="是" + cancelText="否" + > + 删除 + + ) + } + ]; + return <> { setCurrentVm(record) setIsVmDetailModalOpen(true) }}>详情 - { - cloudapiClient.patchVmVmIdPower(record.vm.id, "poweron") - messageInfo('成功提交开机任务') - vmListReq.run() - }} - >开机 - { - cloudapiClient.patchVmVmIdPower(record.vm.id, "poweroff") - messageInfo('成功提交关机任务') - vmListReq.run() - }}>关机 - { - cloudapiClient.postVmVmIdTicket(record.vm.uuid || "").then(res => { - setConsoleProps({ - host: res.data.host, - ticket: res.data.ticket - }); - setShowConsole(true); - }) - }}>打开控制台 - { - await cloudapiClient.deleteVmVmId(record.vm.id) - }} - okText="是" - cancelText="否" - >删除 - + + 更多 + }