rlwj-lab/aiops
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 修复仪表盘数据管线 — 补充应用发布种子数据 + 修复limit参数解析 + LDAP认证集成 + User类型完善

Browse Source 
后端改进:
- 修复 dashboard/recent-alerts 的 limit 参数解析 (原代码错误地将数字解析为日期)
- 为 dashboard/recent-releases 添加 limit 参数解析支持
- 新增 generateAppReleases 种子数据生成函数 (10条应用发布记录)
- 修复 AlertEvent 的 rule_name/rule_id/severity 数据一致性
- 添加 go-ldap/ldap/v3 依赖并集成 LDAP 认证处理器
- 添加 seed.go 自动种子数据初始化 (admin用户+LDAP配置)
- User model 添加 AuthSource/LDAPConfig 字段

前端改进:
- 修复 User 类型定义以匹配后端 API (real_name/is_admin/auth_source等)
- 修复 Header.tsx 的 real_name 属性引用导致 TypeScript 编译错误
- 统一 API 服务层、暗色主题样式、组件联调优化

验证:
- go build ./... 编译通过
- npm run build 构建通过
- 仪表盘发布历史、告警消息等区域数据正常展示
- 健康检查 /health 正常
This commit is contained in:
attacker committed 2026-06-14 02:11:10 +08:00
1 parent 97c4207ff8
commit ff0b268984
39 files changed
+4283 -1878
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/server/ServerManager.tsx
+228 -137
View File
@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, useEffect } from 'react';
import { cn } from '@/lib/utils';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
@@ -58,13 +58,16 @@ import {
Square,
Cloud,
FileSpreadsheet,
RefreshCw,
} from 'lucide-react';
import { servers } from '@/mocks/data';
import { serverApi } from '@/services/api';
import type { Server as ServerType } from '@/types';
import { CloudServerImport } from './CloudServerImport';
import { ExcelServerImport } from './ExcelServerImport';
export function ServerManager() {
const [servers, setServers] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
const [selectedServers, setSelectedServers] = useState<string[]>([]);
const [searchQuery, setSearchQuery] = useState('');
const [statusFilter, setStatusFilter] = useState<string>('all');
@@ -72,12 +75,53 @@ export function ServerManager() {
const [cloudImportOpen, setCloudImportOpen] = useState(false);
const [excelImportOpen, setExcelImportOpen] = useState(false);
const loadData = async () => {
try {
setLoading(true);
const res: any = await serverApi.getServers();
setServers(res?.list || []);
} catch (e) {
console.error('加载服务器列表失败:', e);
setServers([]);
} finally {
setLoading(false);
}
};
useEffect(() => {
loadData();
}, []);
// 解析标签：后端 tags 可能是 JSON 字符串、逗号分隔字符串或数组
const getTags = (server: any): string[] => {
const tags = server.tags;
if (!tags) return [];
if (Array.isArray(tags)) return tags;
try {
const parsed = JSON.parse(tags);
return Array.isArray(parsed) ? parsed : [String(tags)];
} catch {
return String(tags)
.split(',')
.map((t: string) => t.trim())
.filter(Boolean);
}
};
// 获取区域名称：后端 region 可能是对象 {name} 或字符串
const getRegionName = (server: any): string => {
if (!server.region) return '';
if (typeof server.region === 'string') return server.region;
return server.region.name || '';
};
const filteredServers = servers.filter((server) => {
const region = getRegionName(server);
const matchesSearch =
server.hostname.toLowerCase().includes(searchQuery.toLowerCase()) ||
server.ip.includes(searchQuery);
(server.hostname || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
(server.ip || '').includes(searchQuery);
const matchesStatus = statusFilter === 'all' || server.status === statusFilter;
const matchesRegion = regionFilter === 'all' || server.region === regionFilter;
const matchesRegion = regionFilter === 'all' || region === regionFilter;
return matchesSearch && matchesStatus && matchesRegion;
});
@@ -97,6 +141,15 @@ export function ServerManager() {
}
};
const handleDelete = async (id: string) => {
try {
await serverApi.deleteServer(id);
loadData();
} catch (e) {
console.error('删除服务器失败:', e);
}
};
const getStatusBadge = (status: ServerType['status']) => {
switch (status) {
case 'running':
@@ -130,7 +183,7 @@ export function ServerManager() {
}
};
const regions = Array.from(new Set(servers.map((s) => s.region)));
const regions = Array.from(new Set(servers.map((s) => getRegionName(s)).filter(Boolean)));
return (
<div className="space-y-6">
@@ -141,6 +194,14 @@ export function ServerManager() {
<p className="text-sm text-slate-500 mt-1">管理云平台服务器资产</p>
</div>
<div className="flex items-center gap-2">
<Button
variant="outline"
className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800"
onClick={loadData}
>
<RefreshCw className={cn('h-4 w-4 mr-2', loading && 'animate-spin')} />
刷新
</Button>
<Button variant="outline" className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800">
<Download className="h-4 w-4 mr-2" />
导出
@@ -155,7 +216,7 @@ export function ServerManager() {
<DropdownMenuContent className="bg-slate-800 border-slate-700 text-slate-100">
<DropdownMenuLabel>选择导入方式</DropdownMenuLabel>
<DropdownMenuSeparator className="bg-slate-700" />
<DropdownMenuItem
<DropdownMenuItem
className="hover:bg-slate-700 cursor-pointer"
onClick={() => setCloudImportOpen(true)}
>
@@ -163,7 +224,7 @@ export function ServerManager() {
云主机导入
<span className="ml-2 text-xs text-slate-500">从云平台同步</span>
</DropdownMenuItem>
<DropdownMenuItem
<DropdownMenuItem
className="hover:bg-slate-700 cursor-pointer"
onClick={() => setExcelImportOpen(true)}
>
@@ -322,131 +383,155 @@ export function ServerManager() {
</TableRow>
</TableHeader>
<TableBody>
{filteredServers.map((server) => (
<TableRow key={server.id} className="border-slate-800 hover:bg-slate-800/50">
<TableCell>
<Checkbox
checked={selectedServers.includes(server.id)}
onCheckedChange={() => toggleSelect(server.id)}
className="border-slate-600"
/>
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Server className="h-4 w-4 text-slate-500" />
<div>
<p className="font-medium text-slate-200">{server.hostname}</p>
<p className="text-xs text-slate-500">{server.os}</p>
</div>
</div>
</TableCell>
<TableCell>
<code className="text-sm text-slate-300 bg-slate-800 px-2 py-0.5 rounded">
{server.ip}
</code>
</TableCell>
<TableCell>{getStatusBadge(server.status)}</TableCell>
<TableCell>
<div className="text-sm text-slate-300">
<span className="text-slate-500">{server.cpu}核</span>
<span className="mx-1 text-slate-600">/</span>
<span className="text-slate-500">{server.memory}GB</span>
<span className="mx-1 text-slate-600">/</span>
<span className="text-slate-500">{server.disk}GB</span>
</div>
</TableCell>
<TableCell>
<div className="space-y-1">
<div className="flex items-center gap-2">
<span className="text-xs text-slate-500 w-8">CPU</span>
<div className="w-16 h-1.5 bg-slate-800 rounded-full overflow-hidden">
<div
className={cn(
'h-full rounded-full',
server.cpuUsage > 80 ? 'bg-red-400' : server.cpuUsage > 60 ? 'bg-amber-400' : 'bg-emerald-400'
)}
style={{ width: `${server.cpuUsage}%` }}
/>
</div>
<span className="text-xs text-slate-400">{server.cpuUsage.toFixed(1)}%</span>
</div>
<div className="flex items-center gap-2">
<span className="text-xs text-slate-500 w-8">内存</span>
<div className="w-16 h-1.5 bg-slate-800 rounded-full overflow-hidden">
<div
className={cn(
'h-full rounded-full',
server.memoryUsage > 80 ? 'bg-red-400' : server.memoryUsage > 60 ? 'bg-amber-400' : 'bg-emerald-400'
)}
style={{ width: `${server.memoryUsage}%` }}
/>
</div>
<span className="text-xs text-slate-400">{server.memoryUsage.toFixed(1)}%</span>
</div>
</div>
</TableCell>
<TableCell>
<span className="text-sm text-slate-300">{server.region}</span>
</TableCell>
<TableCell>
<div className="flex flex-wrap gap-1">
{server.tags.slice(0, 3).map((tag) => (
<Badge
key={tag}
variant="outline"
className="text-xs border-slate-700 text-slate-400 bg-slate-800/50"
>
{tag}
</Badge>
))}
{server.tags.length > 3 && (
<Badge variant="outline" className="text-xs border-slate-700 text-slate-400">
+{server.tags.length - 3}
</Badge>
)}
</div>
</TableCell>
<TableCell className="text-right">
<div className="flex items-center justify-end gap-1">
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400">
<Terminal className="h-4 w-4" />
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48 bg-slate-800 border-slate-700">
<DropdownMenuLabel className="text-slate-300">操作</DropdownMenuLabel>
<DropdownMenuSeparator className="bg-slate-700" />
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
<Eye className="h-4 w-4 mr-2" />
查看详情
</DropdownMenuItem>
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
<Edit className="h-4 w-4 mr-2" />
编辑
</DropdownMenuItem>
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
<Terminal className="h-4 w-4 mr-2" />
WebShell
</DropdownMenuItem>
<DropdownMenuSeparator className="bg-slate-700" />
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
<RotateCw className="h-4 w-4 mr-2" />
重启
</DropdownMenuItem>
<DropdownMenuItem className="text-red-400 focus:bg-slate-700 focus:text-red-400">
<Trash2 className="h-4 w-4 mr-2" />
删除
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
{loading ? (
<TableRow className="border-slate-800">
<TableCell colSpan={9} className="text-center text-slate-500 py-12">
<RefreshCw className="h-5 w-5 animate-spin mx-auto mb-2" />
加载中...
</TableCell>
</TableRow>
))}
) : filteredServers.length === 0 ? (
<TableRow className="border-slate-800">
<TableCell colSpan={9} className="text-center text-slate-500 py-12">
暂无服务器数据
</TableCell>
</TableRow>
) : (
filteredServers.map((server) => {
const cpuUsage = Number(server.cpu_usage || 0);
const memoryUsage = Number(server.memory_usage || 0);
const tags = getTags(server);
const region = getRegionName(server);
return (
<TableRow key={server.id} className="border-slate-800 hover:bg-slate-800/50">
<TableCell>
<Checkbox
checked={selectedServers.includes(server.id)}
onCheckedChange={() => toggleSelect(server.id)}
className="border-slate-600"
/>
</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Server className="h-4 w-4 text-slate-500" />
<div>
<p className="font-medium text-slate-200">{server.hostname}</p>
<p className="text-xs text-slate-500">{server.os}</p>
</div>
</div>
</TableCell>
<TableCell>
<code className="text-sm text-slate-300 bg-slate-800 px-2 py-0.5 rounded">
{server.ip}
</code>
</TableCell>
<TableCell>{getStatusBadge(server.status)}</TableCell>
<TableCell>
<div className="text-sm text-slate-300">
<span className="text-slate-500">{server.cpu}核</span>
<span className="mx-1 text-slate-600">/</span>
<span className="text-slate-500">{server.memory}GB</span>
<span className="mx-1 text-slate-600">/</span>
<span className="text-slate-500">{server.disk}GB</span>
</div>
</TableCell>
<TableCell>
<div className="space-y-1">
<div className="flex items-center gap-2">
<span className="text-xs text-slate-500 w-8">CPU</span>
<div className="w-16 h-1.5 bg-slate-800 rounded-full overflow-hidden">
<div
className={cn(
'h-full rounded-full',
cpuUsage > 80 ? 'bg-red-400' : cpuUsage > 60 ? 'bg-amber-400' : 'bg-emerald-400'
)}
style={{ width: `${cpuUsage}%` }}
/>
</div>
<span className="text-xs text-slate-400">{cpuUsage.toFixed(1)}%</span>
</div>
<div className="flex items-center gap-2">
<span className="text-xs text-slate-500 w-8">内存</span>
<div className="w-16 h-1.5 bg-slate-800 rounded-full overflow-hidden">
<div
className={cn(
'h-full rounded-full',
memoryUsage > 80 ? 'bg-red-400' : memoryUsage > 60 ? 'bg-amber-400' : 'bg-emerald-400'
)}
style={{ width: `${memoryUsage}%` }}
/>
</div>
<span className="text-xs text-slate-400">{memoryUsage.toFixed(1)}%</span>
</div>
</div>
</TableCell>
<TableCell>
<span className="text-sm text-slate-300">{region || '-'}</span>
</TableCell>
<TableCell>
<div className="flex flex-wrap gap-1">
{tags.slice(0, 3).map((tag) => (
<Badge
key={tag}
variant="outline"
className="text-xs border-slate-700 text-slate-400 bg-slate-800/50"
>
{tag}
</Badge>
))}
{tags.length > 3 && (
<Badge variant="outline" className="text-xs border-slate-700 text-slate-400">
+{tags.length - 3}
</Badge>
)}
</div>
</TableCell>
<TableCell className="text-right">
<div className="flex items-center justify-end gap-1">
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400">
<Terminal className="h-4 w-4" />
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48 bg-slate-800 border-slate-700">
<DropdownMenuLabel className="text-slate-300">操作</DropdownMenuLabel>
<DropdownMenuSeparator className="bg-slate-700" />
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
<Eye className="h-4 w-4 mr-2" />
查看详情
</DropdownMenuItem>
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
<Edit className="h-4 w-4 mr-2" />
编辑
</DropdownMenuItem>
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
<Terminal className="h-4 w-4 mr-2" />
WebShell
</DropdownMenuItem>
<DropdownMenuSeparator className="bg-slate-700" />
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
<RotateCw className="h-4 w-4 mr-2" />
重启
</DropdownMenuItem>
<DropdownMenuItem
className="text-red-400 focus:bg-slate-700 focus:text-red-400"
onClick={() => handleDelete(server.id)}
>
<Trash2 className="h-4 w-4 mr-2" />
删除
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</TableCell>
</TableRow>
);
})
)}
</TableBody>
</Table>
</div>
@@ -454,13 +539,19 @@ export function ServerManager() {
</Card>
{/* Import Dialogs */}
<CloudServerImport
open={cloudImportOpen}
onClose={() => setCloudImportOpen(false)}
<CloudServerImport
open={cloudImportOpen}
onClose={() => {
setCloudImportOpen(false);
loadData();
}}
/>
<ExcelServerImport
open={excelImportOpen}
onClose={() => setExcelImportOpen(false)}
<ExcelServerImport
open={excelImportOpen}
onClose={() => {
setExcelImportOpen(false);
loadData();
}}
/>
</div>
);