feat: ServerManager 死按钮清理+CSV导出+统计卡片提取; 审批/导航后端拆分; DialogDescription修复; AppRelease重试按钮实现
This commit is contained in:
1 parent
f5bda8b03b
commit
be529c8c36
14 files changed
+615
-576
No files matched your search
@@ -553,6 +553,7 @@ function HostDetailDialog({
|
||||
<Badge className="bg-red-500/15 text-red-400 border border-red-500/30">离线</Badge>
|
||||
)}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="sr-only">查看主机详情和指标趋势</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
|
||||
@@ -535,6 +535,7 @@ const SQLAuditManager: React.FC = () => {
|
||||
<DialogContent className="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>SQL审计详情</DialogTitle>
|
||||
<DialogDescription className="sr-only">查看SQL审计记录详情</DialogDescription>
|
||||
</DialogHeader>
|
||||
{selectedRecord && (
|
||||
<div className="space-y-4">
|
||||
|
||||
@@ -6,6 +6,7 @@ import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
@@ -221,6 +222,7 @@ export function PlatformManager() {
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingItem ? '编辑云平台' : '添加云平台'}</DialogTitle>
|
||||
<DialogDescription className="sr-only">描述</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-2">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
@@ -305,6 +307,7 @@ export function PlatformManager() {
|
||||
<DialogContent className="max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>确认删除</DialogTitle>
|
||||
<DialogDescription className="sr-only">描述</DialogDescription>
|
||||
</DialogHeader>
|
||||
<p className="text-sm text-slate-400">确定删除此云平台?此操作不可撤销。</p>
|
||||
<DialogFooter>
|
||||
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
@@ -318,6 +319,7 @@ export function RegionManager() {
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingItem ? '编辑区域' : '添加区域'}</DialogTitle>
|
||||
<DialogDescription className="sr-only">描述</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-2">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
|
||||
@@ -53,7 +53,6 @@ import {
|
||||
Loader2,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
Terminal,
|
||||
} from 'lucide-react';
|
||||
import { releaseApi } from '@/services/api';
|
||||
import { toast } from 'sonner';
|
||||
@@ -416,7 +415,20 @@ export function AppReleaseManager() {
|
||||
详情
|
||||
</Button>
|
||||
{release.status === 'failed' && (
|
||||
<Button variant="ghost" size="sm" className="h-8 text-slate-400 hover:text-blue-400">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 text-slate-400 hover:text-blue-400"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await releaseApi.deployRelease(release.id);
|
||||
toast.success('已重新触发部署');
|
||||
loadData();
|
||||
} catch {
|
||||
toast.error('重新部署失败');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<RotateCcw className="h-4 w-4 mr-1" />
|
||||
重试
|
||||
</Button>
|
||||
@@ -521,14 +533,26 @@ export function AppReleaseManager() {
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" className="border-slate-700 text-slate-300">
|
||||
<Terminal className="h-4 w-4 mr-2" />
|
||||
查看完整日志
|
||||
</Button>
|
||||
{selectedRelease?.status === 'failed' && (
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
<Button
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white"
|
||||
onClick={async () => {
|
||||
try {
|
||||
setSubmitting(true);
|
||||
await releaseApi.deployRelease(selectedRelease.id);
|
||||
toast.success('已重新触发部署');
|
||||
setSelectedRelease(null);
|
||||
loadData();
|
||||
} catch {
|
||||
toast.error('重新部署失败');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}}
|
||||
disabled={submitting}
|
||||
>
|
||||
<RotateCcw className="h-4 w-4 mr-2" />
|
||||
重新发布
|
||||
重新部署
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
|
||||
@@ -26,6 +26,7 @@ export function AlertDetailDialog({
|
||||
{alert?.title}
|
||||
{alert && getSeverityBadge(alert.severity)}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="sr-only">查看告警详情</DialogDescription>
|
||||
</DialogHeader>
|
||||
{alert && (
|
||||
<div className="space-y-4">
|
||||
|
||||
@@ -502,6 +502,7 @@ const TraceManager: React.FC = () => {
|
||||
Trace详情
|
||||
<span className="font-mono text-sm text-muted-foreground">{selectedTrace?.traceId}</span>
|
||||
</DialogTitle>
|
||||
<DialogDescription className="sr-only">描述</DialogDescription>
|
||||
</DialogHeader>
|
||||
{selectedTrace && (
|
||||
<div className="space-y-4">
|
||||
@@ -550,6 +551,7 @@ const TraceManager: React.FC = () => {
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Span详情</DialogTitle>
|
||||
<DialogDescription className="sr-only">描述</DialogDescription>
|
||||
</DialogHeader>
|
||||
{selectedSpan && (
|
||||
<div className="space-y-4">
|
||||
|
||||
@@ -33,19 +33,17 @@ import {
|
||||
Plus,
|
||||
MoreHorizontal,
|
||||
Terminal,
|
||||
Power,
|
||||
RotateCw,
|
||||
Trash2,
|
||||
Edit,
|
||||
Download,
|
||||
Upload,
|
||||
Server,
|
||||
Activity,
|
||||
Server as ServerIcon,
|
||||
Cloud,
|
||||
FileSpreadsheet,
|
||||
RefreshCw,
|
||||
} from 'lucide-react';
|
||||
import { serverApi } from '@/services/api';
|
||||
import { ServerStatsCards } from './ServerStatsCards';
|
||||
import { useConfirm } from '@/components/ui/confirm-dialog';
|
||||
import { toast } from 'sonner';
|
||||
import type { Server as ServerType } from '@/types';
|
||||
@@ -247,6 +245,32 @@ export function ServerManager() {
|
||||
}
|
||||
};
|
||||
|
||||
// 导出 CSV — 将当前服务器列表导出为 CSV 文件 // Logan.Li
|
||||
const handleExport = () => {
|
||||
if (filteredServers.length === 0) {
|
||||
toast.error('没有可导出的数据');
|
||||
return;
|
||||
}
|
||||
const headers = ['主机名', 'IP地址', '公网IP', '端口', '操作系统', 'CPU(核)', '内存(GB)', '磁盘(GB)', '状态', '标签'];
|
||||
const rows = filteredServers.map((s) => {
|
||||
const memGB = s.memory ? Math.round(s.memory / 1024) : 0;
|
||||
const tags = getTags(s).join(';');
|
||||
return [s.hostname || '', s.ip || '', s.public_ip || '', s.port || 22, s.os || '',
|
||||
s.cpu || 0, memGB, s.disk || 0, s.status || '', tags];
|
||||
});
|
||||
const csv = [headers, ...rows]
|
||||
.map((row) => row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','))
|
||||
.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_${new Date().toISOString().slice(0, 10)}.csv`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
toast.success(`已导出 ${filteredServers.length} 台服务器`);
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: ServerType['status']) => {
|
||||
switch (status) {
|
||||
case 'running':
|
||||
@@ -299,7 +323,11 @@ export function ServerManager() {
|
||||
<RefreshCw className={cn('h-4 w-4 mr-2', loading && 'animate-spin')} />
|
||||
刷新
|
||||
</Button>
|
||||
<Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
|
||||
onClick={handleExport}
|
||||
>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
导出
|
||||
</Button>
|
||||
@@ -342,66 +370,7 @@ export function ServerManager() {
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[var(--dg-text-muted)]">服务器总数</p>
|
||||
<p className="text-2xl font-bold text-[var(--dg-text-primary)]">{servers.length}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-[var(--dg-blue)]/10 text-[var(--dg-blue)]">
|
||||
<Server className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[var(--dg-text-muted)]">运行中</p>
|
||||
<p className="text-2xl font-bold text-emerald-400">
|
||||
{servers.filter((s) => s.status === 'running').length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
|
||||
<Activity className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[var(--dg-text-muted)]">维护中</p>
|
||||
<p className="text-2xl font-bold text-amber-400">
|
||||
{servers.filter((s) => s.status === 'maintenance').length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
|
||||
<RotateCw className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[var(--dg-text-muted)]">已停止</p>
|
||||
<p className="text-2xl font-bold text-[var(--dg-text-muted)]">
|
||||
{servers.filter((s) => s.status === 'stopped').length}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)]">
|
||||
<Power className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<ServerStatsCards servers={servers} />
|
||||
|
||||
{/* Filters & Table */}
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
@@ -434,14 +403,6 @@ export function ServerManager() {
|
||||
{selectedServers.length > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-[var(--dg-text-secondary)]">已选择 {selectedServers.length} 项</span>
|
||||
<Button variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]">
|
||||
<Terminal className="h-4 w-4 mr-2" />
|
||||
批量命令
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]">
|
||||
<RotateCw className="h-4 w-4 mr-2" />
|
||||
重启
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@@ -509,7 +470,7 @@ export function ServerManager() {
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<Server className="h-4 w-4 text-[var(--dg-text-muted)]" />
|
||||
<ServerIcon className="h-4 w-4 text-[var(--dg-text-muted)]" />
|
||||
<div>
|
||||
<p className="font-medium text-[var(--dg-text-primary)]">{server.hostname}</p>
|
||||
<p className="text-xs text-[var(--dg-text-muted)]">{server.os}</p>
|
||||
@@ -609,15 +570,13 @@ export function ServerManager() {
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
编辑
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer" onClick={() => openTerminal(server)}>
|
||||
<DropdownMenuItem className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
|
||||
onClick={() => openTerminal(server)}
|
||||
>
|
||||
<Terminal className="h-4 w-4 mr-2" />
|
||||
终端
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator className="bg-[var(--dg-border)]" />
|
||||
<DropdownMenuItem className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer">
|
||||
<RotateCw className="h-4 w-4 mr-2" />
|
||||
重启
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="text-red-400 focus:bg-[var(--dg-bg-hover)] focus:text-red-400 cursor-pointer"
|
||||
onClick={() => handleDelete(server.id)}
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
// 服务器统计卡片组件 — 从 ServerManager 提取 // Logan.Li
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Server, Activity, RotateCw, Power } from 'lucide-react';
|
||||
|
||||
interface ServerStatsCardsProps {
|
||||
servers: any[];
|
||||
}
|
||||
|
||||
export function ServerStatsCards({ servers }: ServerStatsCardsProps) {
|
||||
const runningCount = servers.filter((s) => s.status === 'running').length;
|
||||
const maintenanceCount = servers.filter((s) => s.status === 'maintenance').length;
|
||||
const stoppedCount = servers.filter((s) => s.status === 'stopped').length;
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[var(--dg-text-muted)]">服务器总数</p>
|
||||
<p className="text-2xl font-bold text-[var(--dg-text-primary)]">{servers.length}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-[var(--dg-blue)]/10 text-[var(--dg-blue)]">
|
||||
<Server className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[var(--dg-text-muted)]">运行中</p>
|
||||
<p className="text-2xl font-bold text-emerald-400">{runningCount}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
|
||||
<Activity className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[var(--dg-text-muted)]">维护中</p>
|
||||
<p className="text-2xl font-bold text-amber-400">{maintenanceCount}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
|
||||
<RotateCw className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[var(--dg-text-muted)]">已停止</p>
|
||||
<p className="text-2xl font-bold text-[var(--dg-text-muted)]">{stoppedCount}</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)]">
|
||||
<Power className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user