liumangmang
227 lines
10 KiB
TypeScript
227 lines
10 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react'
|
|
import { CheckCircle2, Clock, Command, Copy, Play, RefreshCw, Server, Terminal, XCircle } from 'lucide-react'
|
|
import Modal from './Modal'
|
|
import { executeBatchCommand } from '../services/connections'
|
|
import type { BatchCommandResult, Connection, ConnectionReachabilityStatus, ConnectionStatusItem } from '../types'
|
|
|
|
const reachabilityCopy: Record<ConnectionReachabilityStatus, { dot: string; label: string; text: string }> = {
|
|
unknown: { dot: 'bg-slate-500', label: '未检测', text: 'text-slate-500' },
|
|
checking: { dot: 'bg-amber-400', label: '检测中', text: 'text-amber-300' },
|
|
online: { dot: 'bg-emerald-500 shadow-[0_0_4px_rgba(16,185,129,0.5)]', label: '在线', text: 'text-emerald-500/80' },
|
|
offline: { dot: 'bg-slate-500', label: '离线', text: 'text-slate-500' },
|
|
}
|
|
|
|
export default function BatchCommandModal({
|
|
open,
|
|
connections,
|
|
connectionStatuses,
|
|
connectionStatusDetails,
|
|
onRefreshStatuses,
|
|
statusError,
|
|
statusLoading,
|
|
onClose,
|
|
}: {
|
|
open: boolean
|
|
connections: Connection[]
|
|
connectionStatuses: Record<number, ConnectionReachabilityStatus>
|
|
connectionStatusDetails: Record<number, ConnectionStatusItem>
|
|
onRefreshStatuses: () => Promise<void>
|
|
statusError: string | null
|
|
statusLoading: boolean
|
|
onClose: () => void
|
|
}) {
|
|
const [selectedIds, setSelectedIds] = useState<number[]>(() => connections.slice(0, 2).map((item) => item.id))
|
|
const [command, setCommand] = useState('df -h\nfree -m')
|
|
const [running, setRunning] = useState(false)
|
|
const [results, setResults] = useState<BatchCommandResult[]>([])
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const summary = useMemo(
|
|
() => ({
|
|
total: selectedIds.length,
|
|
success: results.filter((item) => item.success).length,
|
|
failure: results.filter((item) => !item.success).length,
|
|
}),
|
|
[results, selectedIds.length],
|
|
)
|
|
|
|
const onlineIds = useMemo(
|
|
() => connections.filter((item) => connectionStatuses[item.id] === 'online').map((item) => item.id),
|
|
[connectionStatuses, connections],
|
|
)
|
|
|
|
const offlineCount = useMemo(
|
|
() => connections.filter((item) => connectionStatuses[item.id] === 'offline').length,
|
|
[connectionStatuses, connections],
|
|
)
|
|
|
|
useEffect(() => {
|
|
setSelectedIds((prev) =>
|
|
prev.filter(
|
|
(id) =>
|
|
connections.some((item) => item.id === id) &&
|
|
connectionStatuses[id] === 'online',
|
|
),
|
|
)
|
|
}, [connectionStatuses, connections])
|
|
|
|
if (!open) return null
|
|
|
|
async function handleRun() {
|
|
const runnableIds = selectedIds.filter((id) => connectionStatuses[id] === 'online')
|
|
if (!runnableIds.length || !command.trim()) return
|
|
setRunning(true)
|
|
setError(null)
|
|
try {
|
|
const response = await executeBatchCommand(runnableIds, command)
|
|
setResults(response.data.results)
|
|
} catch (err) {
|
|
const message =
|
|
(err as { response?: { data?: { message?: string; error?: string } } }).response?.data?.message || '批量执行失败'
|
|
setError(message)
|
|
} finally {
|
|
setRunning(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal title="批量执行命令" onClose={onClose} maxWidth="max-w-6xl">
|
|
<div className="flex h-[70vh] overflow-hidden rounded-2xl border border-slate-800 bg-[#0d1117]">
|
|
<div className="flex w-72 shrink-0 flex-col border-r border-slate-800 bg-slate-900/70">
|
|
<div className="flex items-center justify-between border-b border-slate-800 px-4 py-3 text-sm text-slate-300">
|
|
<span>目标主机 ({selectedIds.length})</span>
|
|
<div className="flex gap-3 text-xs">
|
|
<button className="text-blue-400 disabled:text-slate-600" disabled={statusLoading} onClick={() => setSelectedIds(onlineIds)}>
|
|
全选
|
|
</button>
|
|
<button className="text-slate-400" onClick={() => setSelectedIds([])}>
|
|
清空
|
|
</button>
|
|
<button
|
|
className="flex items-center gap-1 text-slate-400 transition hover:text-slate-200 disabled:text-slate-600"
|
|
disabled={statusLoading || connections.length === 0}
|
|
onClick={() => {
|
|
void onRefreshStatuses().catch(() => undefined)
|
|
}}
|
|
>
|
|
<RefreshCw size={12} className={statusLoading ? 'animate-spin' : ''} />
|
|
刷新
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="border-b border-slate-800 px-4 py-2 text-xs text-slate-500">
|
|
在线 {onlineIds.length} / 离线 {offlineCount} / 总数 {connections.length}
|
|
</div>
|
|
<div className="flex-1 space-y-1 overflow-auto p-2">
|
|
{connections.map((connection) => {
|
|
const checked = selectedIds.includes(connection.id)
|
|
const reachability = connectionStatuses[connection.id] ?? 'unknown'
|
|
const reachabilityMeta = reachabilityCopy[reachability]
|
|
const statusDetail = connectionStatusDetails[connection.id]
|
|
const disabled = reachability !== 'online'
|
|
return (
|
|
<label
|
|
key={connection.id}
|
|
title={statusDetail?.message || reachabilityMeta.label}
|
|
className={`flex items-center gap-2 rounded-xl px-3 py-2 transition ${
|
|
disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-slate-800'
|
|
}`}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
disabled={disabled}
|
|
checked={checked}
|
|
onChange={() =>
|
|
setSelectedIds((prev) =>
|
|
checked ? prev.filter((item) => item !== connection.id) : [...prev, connection.id],
|
|
)
|
|
}
|
|
/>
|
|
<div className="relative shrink-0">
|
|
<Server size={14} className={checked && !disabled ? 'text-blue-400' : 'text-slate-500'} />
|
|
<span className={`absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full border border-slate-900 ${reachabilityMeta.dot}`} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="truncate text-sm text-slate-300">{connection.name}</div>
|
|
<div className={`text-[10px] ${reachabilityMeta.text}`}>{reachabilityMeta.label}</div>
|
|
</div>
|
|
</label>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-1 flex-col">
|
|
<div className="border-b border-slate-800 bg-slate-900 px-4 py-4">
|
|
<div className="flex items-end gap-4">
|
|
<div className="flex-1 space-y-2">
|
|
<label className="flex items-center gap-2 text-sm text-slate-300">
|
|
<Terminal size={14} className="text-emerald-400" />
|
|
批量执行脚本
|
|
</label>
|
|
<textarea
|
|
rows={5}
|
|
className="w-full resize-none rounded-2xl border border-slate-700 bg-black px-4 py-3 font-mono text-sm text-emerald-300 outline-none focus:border-blue-500"
|
|
value={command}
|
|
onChange={(event) => setCommand(event.target.value)}
|
|
/>
|
|
</div>
|
|
<button
|
|
className="flex h-[46px] items-center gap-2 rounded-xl bg-blue-600 px-6 text-white transition hover:bg-blue-500 disabled:opacity-60"
|
|
disabled={running || statusLoading || selectedIds.filter((id) => connectionStatuses[id] === 'online').length === 0}
|
|
onClick={() => void handleRun()}
|
|
>
|
|
{running ? <RefreshCw size={16} className="animate-spin" /> : <Play size={16} fill="currentColor" />}
|
|
{running ? '执行中...' : '开始执行'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-6 border-b border-slate-800 bg-slate-800/60 px-4 py-2 text-sm">
|
|
<span className="text-slate-300">总数: {summary.total}</span>
|
|
<span className="font-medium text-emerald-400">成功: {summary.success}</span>
|
|
<span className="font-medium text-red-400">失败: {summary.failure}</span>
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-4 overflow-auto p-4">
|
|
{statusError ? <div className="rounded-xl border border-amber-500/20 bg-amber-500/10 px-4 py-3 text-sm text-amber-200">{statusError}</div> : null}
|
|
{error ? <div className="rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-300">{error}</div> : null}
|
|
{!results.length && !error ? (
|
|
<div className="flex h-full flex-col items-center justify-center text-slate-500">
|
|
<Command size={48} className="mb-3 text-slate-700" />
|
|
<p>{statusLoading ? '正在检测主机状态...' : '请在上方输入命令并点击执行'}</p>
|
|
</div>
|
|
) : null}
|
|
{results.map((result) => (
|
|
<div key={result.connectionId} className="overflow-hidden rounded-2xl border border-slate-700 bg-slate-900">
|
|
<div className="flex items-center justify-between border-b border-slate-800 bg-slate-800/80 px-4 py-3">
|
|
<div className="flex items-center gap-3">
|
|
{result.success ? <CheckCircle2 size={16} className="text-emerald-500" /> : <XCircle size={16} className="text-red-500" />}
|
|
<span className="text-sm font-medium text-slate-100">{result.connectionName}</span>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-xs text-slate-500">
|
|
<span className="flex items-center gap-1">
|
|
<Clock size={12} />
|
|
{result.durationMs}ms
|
|
</span>
|
|
<button
|
|
className="flex items-center gap-1 transition hover:text-slate-300"
|
|
onClick={() => navigator.clipboard.writeText(result.output || result.error || '')}
|
|
>
|
|
<Copy size={12} />
|
|
复制输出
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<pre className={`overflow-auto bg-black p-4 text-xs leading-relaxed ${result.success ? 'text-slate-300' : 'text-red-400'}`}>
|
|
{result.output || result.error || ''}
|
|
</pre>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|