550 lines
21 KiB
TypeScript
550 lines
21 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { toast } from 'sonner';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Input } from '@/components/ui/input';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
} from '@/components/ui/dialog';
|
|
import {
|
|
Download,
|
|
Upload,
|
|
FileSpreadsheet,
|
|
Check,
|
|
X,
|
|
AlertCircle,
|
|
ChevronRight,
|
|
ChevronLeft,
|
|
Loader2,
|
|
} from 'lucide-react';
|
|
import { regionApi, serverApi } from '@/services/api';
|
|
|
|
interface RegionOption {
|
|
id: string;
|
|
name: string;
|
|
code: string;
|
|
}
|
|
|
|
interface ExcelServerImportProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const connectionMethods = [
|
|
{ id: 'password', name: '密码认证', description: '使用用户名密码连接' },
|
|
{ id: 'key', name: '密钥认证', description: '使用SSH密钥连接' },
|
|
];
|
|
|
|
type PreviewRow = {
|
|
row: number; hostname: string; ip: string; port: number;
|
|
username: string; os: string; cpu: number; memory: number; disk: number; tags: string;
|
|
status: string; message: string;
|
|
};
|
|
|
|
// 解析单行 CSV（支持引号包裹与转义） // Logan.Li
|
|
function parseCSVLine(line: string): string[] {
|
|
const result: string[] = [];
|
|
let current = '';
|
|
let inQuotes = false;
|
|
for (let i = 0; i < line.length; i++) {
|
|
const ch = line[i];
|
|
if (inQuotes) {
|
|
if (ch === '"') {
|
|
if (line[i + 1] === '"') { current += '"'; i++; }
|
|
else inQuotes = false;
|
|
} else {
|
|
current += ch;
|
|
}
|
|
} else if (ch === '"') {
|
|
inQuotes = true;
|
|
} else if (ch === ',') {
|
|
result.push(current);
|
|
current = '';
|
|
} else {
|
|
current += ch;
|
|
}
|
|
}
|
|
result.push(current);
|
|
return result.map((s) => s.trim());
|
|
}
|
|
|
|
// 解析整个 CSV 文本为对象数组（首行为表头） // Logan.Li
|
|
function parseCSV(text: string): Record<string, string>[] {
|
|
const lines = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n').filter((l) => l.trim());
|
|
if (lines.length < 2) return [];
|
|
const headers = parseCSVLine(lines[0]).map((h) => h.toLowerCase());
|
|
const rows: Record<string, string>[] = [];
|
|
for (let i = 1; i < lines.length; i++) {
|
|
const cols = parseCSVLine(lines[i]);
|
|
const row: Record<string, string> = {};
|
|
headers.forEach((h, idx) => { row[h] = cols[idx] ?? ''; });
|
|
rows.push(row);
|
|
}
|
|
return rows;
|
|
}
|
|
|
|
// IPv4 格式校验 // Logan.Li
|
|
function isValidIP(ip: string): boolean {
|
|
return /^(\d{1,3}\.){3}\d{1,3}$/.test(ip) && ip.split('.').every((o) => Number(o) >= 0 && Number(o) <= 255);
|
|
}
|
|
|
|
// 下载 CSV 导入模板 // Logan.Li
|
|
function downloadTemplate() {
|
|
const csv = [
|
|
'hostname,ip,port,username,os,cpu,memory,disk,tags',
|
|
'web-01,192.168.1.10,22,root,CentOS 7,4,8,100,"web,prod"',
|
|
'db-01,192.168.1.20,22,root,Ubuntu 22.04,8,16,200,"db,prod"',
|
|
].join('\n');
|
|
const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'servers-template.csv';
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
export function ExcelServerImport({ open, onClose }: ExcelServerImportProps) {
|
|
const [step, setStep] = useState(1);
|
|
const [selectedRegion, setSelectedRegion] = useState<string>('');
|
|
const [connectionMethod, setConnectionMethod] = useState<string>('password');
|
|
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
|
const [isUploading, setIsUploading] = useState(false);
|
|
const [previewData, setPreviewData] = useState<PreviewRow[]>([]);
|
|
const [regions, setRegions] = useState<RegionOption[]>([]);
|
|
const [isImporting, setIsImporting] = useState(false);
|
|
|
|
// 对话框打开时拉取区域列表 // Logan.Li
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
let cancelled = false;
|
|
(async () => {
|
|
try {
|
|
const resp = await regionApi.list();
|
|
if (cancelled) return;
|
|
const list = resp?.list ?? [];
|
|
setRegions(
|
|
list.map((r: any) => ({
|
|
id: String(r.id ?? ''),
|
|
name: r.name ?? '',
|
|
code: r.code ?? '',
|
|
}))
|
|
);
|
|
} catch {
|
|
if (!cancelled) setRegions([]);
|
|
}
|
|
})();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [open]);
|
|
|
|
const handleNext = async () => {
|
|
if (step === 2 && selectedFile) {
|
|
setIsUploading(true);
|
|
try {
|
|
const text = await selectedFile.text();
|
|
const rows = parseCSV(text);
|
|
if (rows.length === 0) {
|
|
toast.error('文件无有效数据，请使用模板格式（首行为表头）');
|
|
setIsUploading(false);
|
|
return;
|
|
}
|
|
const seen = new Set<string>();
|
|
const preview: PreviewRow[] = rows.map((r, idx) => {
|
|
const hostname = (r.hostname ?? '').trim();
|
|
const ip = (r.ip ?? '').trim();
|
|
const row: PreviewRow = {
|
|
row: idx + 2,
|
|
hostname,
|
|
ip,
|
|
port: Number(r.port) || 22,
|
|
username: (r.username ?? '').trim() || 'root',
|
|
os: r.os ?? '',
|
|
cpu: Number(r.cpu) || 0,
|
|
memory: Number(r.memory) || 0,
|
|
disk: Number(r.disk) || 0,
|
|
tags: r.tags ?? '',
|
|
status: 'valid',
|
|
message: '有效',
|
|
};
|
|
const errs: string[] = [];
|
|
if (!hostname) errs.push('主机名缺失');
|
|
if (!ip) errs.push('IP缺失');
|
|
else if (!isValidIP(ip)) errs.push('IP格式错误');
|
|
const key = `${hostname}|${ip}`;
|
|
if (hostname && ip && seen.has(key)) errs.push('重复行');
|
|
else seen.add(key);
|
|
if (errs.length > 0) {
|
|
row.status = 'error';
|
|
row.message = errs.join('、');
|
|
}
|
|
return row;
|
|
});
|
|
setPreviewData(preview);
|
|
setStep(step + 1);
|
|
} catch {
|
|
toast.error('文件解析失败，请确认是 CSV 格式');
|
|
} finally {
|
|
setIsUploading(false);
|
|
}
|
|
} else {
|
|
setStep(step + 1);
|
|
}
|
|
};
|
|
|
|
const handleBack = () => {
|
|
if (step > 1) {
|
|
setStep(step - 1);
|
|
}
|
|
};
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (e.target.files && e.target.files[0]) {
|
|
setSelectedFile(e.target.files[0]);
|
|
}
|
|
};
|
|
|
|
const resetState = () => {
|
|
setStep(1);
|
|
setSelectedRegion('');
|
|
setConnectionMethod('password');
|
|
setSelectedFile(null);
|
|
setPreviewData([]);
|
|
};
|
|
|
|
const handleImport = async () => {
|
|
const valid = previewData.filter((d) => d.status === 'valid');
|
|
if (valid.length === 0) return;
|
|
setIsImporting(true);
|
|
try {
|
|
const servers = valid.map((d) => ({
|
|
hostname: d.hostname,
|
|
ip: d.ip,
|
|
port: d.port,
|
|
username: d.username,
|
|
os: d.os,
|
|
cpu: d.cpu,
|
|
memory: d.memory,
|
|
disk: d.disk,
|
|
tags: d.tags,
|
|
}));
|
|
const resp: any = await serverApi.batchCreate({
|
|
servers,
|
|
region_id: selectedRegion || undefined,
|
|
auth_type: connectionMethod,
|
|
});
|
|
const r = resp ?? {};
|
|
const success = r.success ?? 0;
|
|
const skipped = r.skipped ?? 0;
|
|
const failed = r.failed ?? 0;
|
|
toast.success(`导入完成：成功 ${success}，跳过 ${skipped}，失败 ${failed}`);
|
|
resetState();
|
|
onClose();
|
|
} catch (e: any) {
|
|
toast.error(e?.message || '导入失败，请重试');
|
|
} finally {
|
|
setIsImporting(false);
|
|
}
|
|
};
|
|
|
|
const handleClose = () => {
|
|
onClose();
|
|
resetState();
|
|
};
|
|
|
|
const validCount = previewData.filter(d => d.status === 'valid').length;
|
|
const warningCount = previewData.filter(d => d.status === 'warning').length;
|
|
const errorCount = previewData.filter(d => d.status === 'error').length;
|
|
|
|
const steps = [
|
|
{ id: 1, title: '配置' },
|
|
{ id: 2, title: '上传' },
|
|
{ id: 3, title: '确认' },
|
|
];
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={handleClose}>
|
|
<DialogContent className="max-w-3xl bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl">Excel导入服务器</DialogTitle>
|
|
<DialogDescription className="sr-only">通过 CSV 文件批量导入服务器资产</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
{/* Step Indicator */}
|
|
<div className="flex items-center justify-center mb-6">
|
|
{steps.map((s, index) => (
|
|
<div key={s.id} className="flex items-center">
|
|
<div className={`flex items-center justify-center w-8 h-8 rounded-full ${
|
|
step === s.id
|
|
? 'bg-blue-600 text-white'
|
|
: step > s.id
|
|
? 'bg-emerald-600 text-white'
|
|
: 'bg-[var(--dg-bg-secondary)] text-[var(--dg-text-muted)]'
|
|
}`}>
|
|
{step > s.id ? <Check className="h-4 w-4" /> : s.id}
|
|
</div>
|
|
<span className={`ml-2 text-sm ${step === s.id ? 'text-[var(--dg-text-primary)]' : 'text-[var(--dg-text-muted)]'}`}>
|
|
{s.title}
|
|
</span>
|
|
{index < steps.length - 1 && (
|
|
<div className="w-12 h-0.5 bg-[var(--dg-border)] mx-3" />
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Step 1: Configuration */}
|
|
{step === 1 && (
|
|
<div className="space-y-6">
|
|
{/* Download Template */}
|
|
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center">
|
|
<FileSpreadsheet className="h-5 w-5 text-emerald-400" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-[var(--dg-text-primary)]">主机导入模板</p>
|
|
<p className="text-xs text-[var(--dg-text-muted)]">下载Excel模板，填写服务器信息后上传</p>
|
|
</div>
|
|
</div>
|
|
<Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={downloadTemplate}>
|
|
<Download className="h-4 w-4 mr-2" />
|
|
下载模板
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Region Selection */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--dg-text-secondary)] mb-2">选择区域</label>
|
|
<select
|
|
value={selectedRegion}
|
|
onChange={(e) => setSelectedRegion(e.target.value)}
|
|
className="w-full px-3 py-2 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-md text-[var(--dg-text-primary)] text-sm"
|
|
>
|
|
<option value="">请选择区域</option>
|
|
{regions.map((region) => (
|
|
<option key={region.id} value={region.id}>
|
|
{region.name} ({region.code})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Connection Method */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--dg-text-secondary)] mb-2">连接方式</label>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{connectionMethods.map((method) => (
|
|
<Card
|
|
key={method.id}
|
|
className={`cursor-pointer transition-all ${
|
|
connectionMethod === method.id
|
|
? 'border-blue-500 ring-1 ring-blue-500/30 bg-[var(--dg-bg-secondary)]'
|
|
: 'border-[var(--dg-border)] hover:border-blue-500 bg-[var(--dg-bg-secondary)]'
|
|
}`}
|
|
onClick={() => setConnectionMethod(method.id)}
|
|
>
|
|
<CardContent className="p-3">
|
|
<p className="font-medium text-[var(--dg-text-primary)]">{method.name}</p>
|
|
<p className="text-xs text-[var(--dg-text-muted)]">{method.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 2: Upload */}
|
|
{step === 2 && (
|
|
<div className="space-y-6">
|
|
<div
|
|
className="border-2 border-dashed border-[var(--dg-border)] rounded-lg p-8 text-center hover:border-blue-500/50 transition-colors"
|
|
>
|
|
<Upload className="h-12 w-12 mx-auto mb-4 text-[var(--dg-text-muted)]" />
|
|
<p className="text-[var(--dg-text-secondary)] mb-2">点击或拖拽文件到此处上传</p>
|
|
<p className="text-xs text-[var(--dg-text-muted)] mb-4">支持 CSV 格式文件（可点击左侧"下载模板"获取）</p>
|
|
<Input
|
|
type="file"
|
|
accept=".csv,text/csv"
|
|
onChange={handleFileChange}
|
|
className="hidden"
|
|
id="excel-upload"
|
|
/>
|
|
<label htmlFor="excel-upload">
|
|
<Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" asChild>
|
|
<span>选择文件</span>
|
|
</Button>
|
|
</label>
|
|
</div>
|
|
|
|
{selectedFile && (
|
|
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<CardContent className="p-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<FileSpreadsheet className="h-8 w-8 text-emerald-400" />
|
|
<div>
|
|
<p className="text-sm text-[var(--dg-text-primary)]">{selectedFile.name}</p>
|
|
<p className="text-xs text-[var(--dg-text-muted)]">{(selectedFile.size / 1024).toFixed(2)} KB</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-[var(--dg-text-muted)] hover:text-red-400"
|
|
onClick={() => setSelectedFile(null)}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{isUploading && (
|
|
<div className="text-center py-4">
|
|
<div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-2" />
|
|
<p className="text-[var(--dg-text-secondary)] text-sm">正在解析文件...</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 3: Preview & Confirm */}
|
|
{step === 3 && (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-[var(--dg-text-secondary)] text-sm">数据预览</p>
|
|
<div className="flex items-center gap-2">
|
|
<Badge className="bg-emerald-500/20 text-emerald-400 border-0">
|
|
<Check className="h-3 w-3 mr-1" />
|
|
{validCount} 有效
|
|
</Badge>
|
|
{warningCount > 0 && (
|
|
<Badge className="bg-amber-500/20 text-amber-400 border-0">
|
|
<AlertCircle className="h-3 w-3 mr-1" />
|
|
{warningCount} 警告
|
|
</Badge>
|
|
)}
|
|
{errorCount > 0 && (
|
|
<Badge className="bg-red-500/20 text-red-400 border-0">
|
|
<X className="h-3 w-3 mr-1" />
|
|
{errorCount} 错误
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border rounded-lg border-[var(--dg-border)] overflow-hidden max-h-[350px] overflow-y-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-[var(--dg-bg-secondary)] sticky top-0">
|
|
<tr>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">行号</th>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">主机名</th>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">IP地址</th>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">端口</th>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">用户名</th>
|
|
<th className="px-3 py-2 text-left text-xs font-medium text-[var(--dg-text-secondary)]">状态</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-[var(--dg-border)]">
|
|
{previewData.map((row) => (
|
|
<tr key={row.row} className="hover:bg-[var(--dg-bg-hover)]">
|
|
<td className="px-3 py-2 text-sm text-[var(--dg-text-muted)]">{row.row}</td>
|
|
<td className="px-3 py-2 text-sm text-[var(--dg-text-primary)]">{row.hostname || '-'}</td>
|
|
<td className="px-3 py-2 text-sm text-[var(--dg-text-secondary)]">{row.ip}</td>
|
|
<td className="px-3 py-2 text-sm text-[var(--dg-text-secondary)]">{row.port}</td>
|
|
<td className="px-3 py-2 text-sm text-[var(--dg-text-secondary)]">{row.username}</td>
|
|
<td className="px-3 py-2">
|
|
<div className="flex items-center gap-1">
|
|
{row.status === 'valid' && (
|
|
<Badge className="bg-emerald-500/20 text-emerald-400 border-0 text-xs">
|
|
<Check className="h-3 w-3 mr-1" />
|
|
{row.message}
|
|
</Badge>
|
|
)}
|
|
{row.status === 'warning' && (
|
|
<Badge className="bg-amber-500/20 text-amber-400 border-0 text-xs">
|
|
<AlertCircle className="h-3 w-3 mr-1" />
|
|
{row.message}
|
|
</Badge>
|
|
)}
|
|
{row.status === 'error' && (
|
|
<Badge className="bg-red-500/20 text-red-400 border-0 text-xs">
|
|
<X className="h-3 w-3 mr-1" />
|
|
{row.message}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{errorCount > 0 && (
|
|
<div className="p-3 rounded-lg bg-red-500/10 border border-red-500/30">
|
|
<div className="flex items-center gap-2 text-red-400">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<span className="text-sm">存在 {errorCount} 条错误数据，请修正后重新上传</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer */}
|
|
<DialogFooter className="flex justify-between items-center">
|
|
<div>
|
|
{step > 1 && (
|
|
<Button variant="outline" onClick={handleBack} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
|
|
<ChevronLeft className="h-4 w-4 mr-1" />
|
|
上一步
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={handleClose} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
|
|
取消
|
|
</Button>
|
|
{step < 3 ? (
|
|
<Button
|
|
onClick={handleNext}
|
|
disabled={(step === 1 && !selectedRegion) || (step === 2 && !selectedFile)}
|
|
className="bg-blue-600 hover:bg-blue-700"
|
|
>
|
|
下一步
|
|
<ChevronRight className="h-4 w-4 ml-1" />
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
onClick={handleImport}
|
|
disabled={isImporting || errorCount > 0 || validCount === 0}
|
|
className="bg-emerald-600 hover:bg-emerald-700"
|
|
>
|
|
{isImporting ? (
|
|
<Loader2 className="h-4 w-4 mr-1 animate-spin" />
|
|
) : (
|
|
<Check className="h-4 w-4 mr-1" />
|
|
)}
|
|
{isImporting ? '导入中...' : `确认导入 (${validCount})`}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|