fix: AlertCenter崩溃修复——字段名映射+notify_channels安全解析
- AlertRule接口与后端对齐(id:number/notify_channels:string) - 告警事件数据映射(rule_name→title, message→description, target→source) - notify_channels安全解析(JSON.parse+try-catch替代直接.map) - labels/annotations字符串转对象安全处理 - Header tab栏移除(侧边栏导航足够) - SQL审计API改为真实后端调用
This commit is contained in:
attacker committed
1 parent
b9f1e28319
commit
e4958feb1b
3 files changed
+87
-59
No files matched your search
@@ -1,6 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useThemeStore, useTabStore, useNotificationStore, useUserStore } from '@/store';
|
||||
import { useThemeStore, useNotificationStore, useUserStore } from '@/store';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
@@ -17,7 +17,6 @@ import {
|
||||
Search,
|
||||
Bell,
|
||||
Menu,
|
||||
X,
|
||||
Settings,
|
||||
User,
|
||||
LogOut,
|
||||
@@ -33,7 +32,6 @@ import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';
|
||||
|
||||
export function Header() {
|
||||
const { sidebarCollapsed, toggleSidebar } = useThemeStore();
|
||||
const { tabs, activeTab, removeTab, setActiveTab } = useTabStore();
|
||||
const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotificationStore();
|
||||
const { user, logout } = useUserStore();
|
||||
const { theme, setTheme } = useTheme();
|
||||
@@ -226,36 +224,7 @@ export function Header() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
{tabs.length > 0 && (
|
||||
<div className="flex items-center h-9 px-2 bg-slate-950 border-b border-slate-800 overflow-x-auto">
|
||||
{tabs.map((tab) => (
|
||||
<div
|
||||
key={tab.id}
|
||||
className={cn(
|
||||
'group flex items-center gap-2 px-3 py-1.5 text-sm border-r border-slate-800 cursor-pointer transition-colors whitespace-nowrap',
|
||||
activeTab === tab.id
|
||||
? 'bg-slate-900 text-slate-100'
|
||||
: 'text-slate-500 hover:text-slate-300 hover:bg-slate-900/50'
|
||||
)}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
>
|
||||
<span>{tab.title}</span>
|
||||
{tab.closable && (
|
||||
<button
|
||||
className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-slate-700 transition-all"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeTab(tab.id);
|
||||
}}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* Tabs 已移除 — 侧边栏导航已足够，tab 栏多余且遮挡内容 */}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -46,18 +46,23 @@ export interface Alert {
|
||||
annotations: Record<string, string>;
|
||||
}
|
||||
|
||||
// Logan.Li — 字段名与后端 alert.go AlertRule 对齐
|
||||
interface AlertRule {
|
||||
id: string;
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
enabled: boolean;
|
||||
severity: 'critical' | 'warning' | 'info';
|
||||
query: string;
|
||||
duration: string;
|
||||
threshold: number;
|
||||
labels: string[];
|
||||
notificationChannels: string[];
|
||||
lastEvaluated: string;
|
||||
severity: string;
|
||||
type?: string;
|
||||
source?: string;
|
||||
expression?: string;
|
||||
duration?: number;
|
||||
threshold?: number;
|
||||
labels?: string;
|
||||
annotations?: string;
|
||||
notify_channels?: string;
|
||||
created_at?: string;
|
||||
updated_at?: string;
|
||||
}
|
||||
|
||||
interface NotificationChannel {
|
||||
@@ -103,7 +108,24 @@ const AlertCenter: React.FC = () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await alertCenterApi.getAlerts();
|
||||
const data = res.list || [];
|
||||
const raw = (res.list || []) as any[];
|
||||
// Logan.Li — 后端字段映射到前端 Alert 接口
|
||||
const data: Alert[] = raw.map(a => ({
|
||||
id: String(a.id),
|
||||
title: a.rule_name || a.title || `告警 #${a.id}`,
|
||||
description: a.message || a.description || '',
|
||||
severity: a.severity || 'info',
|
||||
status: a.status || 'firing',
|
||||
source: a.target || a.source || '',
|
||||
service: a.service || '',
|
||||
metric: a.metric || '',
|
||||
value: a.value || 0,
|
||||
threshold: a.threshold || 0,
|
||||
startedAt: a.started_at || a.startedAt || a.created_at || new Date().toISOString(),
|
||||
resolvedAt: a.resolved_at || a.resolvedAt,
|
||||
labels: typeof a.labels === 'string' ? (() => { try { return JSON.parse(a.labels || '{}'); } catch { return {}; } })() : (a.labels || {}),
|
||||
annotations: typeof a.annotations === 'string' ? (() => { try { return JSON.parse(a.annotations || '{}'); } catch { return {}; } })() : (a.annotations || {}),
|
||||
}));
|
||||
setAlerts(data);
|
||||
setStats({
|
||||
firing: data.filter((a: Alert) => a.status === 'firing').length,
|
||||
@@ -171,7 +193,7 @@ const AlertCenter: React.FC = () => {
|
||||
const toggleRule = async (ruleId: string, enabled: boolean) => {
|
||||
try {
|
||||
await alertCenterApi.toggleRule(ruleId);
|
||||
setRules(rules.map(r => r.id === ruleId ? { ...r, enabled } : r));
|
||||
setRules(rules.map(r => String(r.id) === ruleId ? { ...r, enabled } : r));
|
||||
toast.success('规则状态已更新');
|
||||
} catch (error) {
|
||||
toast.error('更新失败');
|
||||
@@ -531,20 +553,31 @@ const AlertCenter: React.FC = () => {
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-2">{rule.description}</p>
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<span className="font-mono bg-muted px-2 py-1 rounded">{rule.query}</span>
|
||||
<span>持续 {rule.duration}</span>
|
||||
<span>阈值: {rule.threshold}</span>
|
||||
</div>
|
||||
<div className="flex gap-1 mt-2">
|
||||
{rule.notificationChannels.map(ch => (
|
||||
<Badge key={ch} variant="outline" className="text-xs">{ch}</Badge>
|
||||
))}
|
||||
{rule.expression && (
|
||||
<span className="font-mono bg-muted px-2 py-1 rounded">{rule.expression}</span>
|
||||
)}
|
||||
{rule.duration ? <span>持续 {rule.duration}秒</span> : null}
|
||||
</div>
|
||||
{(() => {
|
||||
let channels: string[] = [];
|
||||
try {
|
||||
const raw = rule.notify_channels;
|
||||
if (raw) channels = Array.isArray(raw) ? raw : JSON.parse(raw);
|
||||
} catch { /* ignore */ }
|
||||
if (!channels.length) return null;
|
||||
return (
|
||||
<div className="flex gap-1 mt-2">
|
||||
{channels.map(ch => (
|
||||
<Badge key={ch} variant="outline" className="text-xs">{ch}</Badge>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={rule.enabled}
|
||||
onCheckedChange={(checked) => toggleRule(rule.id, checked)}
|
||||
onCheckedChange={(checked) => toggleRule(String(rule.id), checked)}
|
||||
/>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Settings className="w-4 h-4" />
|
||||
|
||||
@@ -524,13 +524,39 @@ export const auditApi = {
|
||||
|
||||
// ==================== SQL 审计 API（暂无后端，返回空结果优雅降级） ====================
|
||||
export const sqlAuditApi = {
|
||||
getRecords: async () => ({ data: [], total: 0 }),
|
||||
getRules: async () => ({ data: [], total: 0 }),
|
||||
analyzeSQL: async (_data: { sql: string }) => ({ data: { id: 0, riskLevel: 'low', rules: [] } }),
|
||||
approve: async (_id: string) => ({ success: true }),
|
||||
reject: async (_id: string) => ({ success: true }),
|
||||
execute: async (_id: string) => ({ success: true }),
|
||||
toggleRule: async (_ruleId: string, _enabled: boolean) => ({ success: true }),
|
||||
getRecords: async (params?: Record<string, string>) => {
|
||||
return http.get<ListResponse>('/sql-audit/records', params);
|
||||
},
|
||||
getRules: async () => {
|
||||
return http.get<ListResponse>('/sql-audit/rules');
|
||||
},
|
||||
analyzeSQL: async (data: { sql: string; database_name?: string; application?: string }) => {
|
||||
return http.post('/sql-audit/analyze', data);
|
||||
},
|
||||
approve: async (id: string | number) => {
|
||||
return http.post(`/sql-audit/records/${id}/approve`);
|
||||
},
|
||||
reject: async (id: string | number) => {
|
||||
return http.post(`/sql-audit/records/${id}/reject`);
|
||||
},
|
||||
execute: async (id: string | number) => {
|
||||
return http.post(`/sql-audit/records/${id}/execute`);
|
||||
},
|
||||
deleteRecord: async (id: string | number) => {
|
||||
return http.delete(`/sql-audit/records/${id}`);
|
||||
},
|
||||
createRule: async (data: any) => {
|
||||
return http.post('/sql-audit/rules', data);
|
||||
},
|
||||
updateRule: async (id: string | number, data: any) => {
|
||||
return http.put(`/sql-audit/rules/${id}`, data);
|
||||
},
|
||||
deleteRule: async (id: string | number) => {
|
||||
return http.delete(`/sql-audit/rules/${id}`);
|
||||
},
|
||||
toggleRule: async (ruleId: string | number) => {
|
||||
return http.post(`/sql-audit/rules/${ruleId}/toggle`);
|
||||
},
|
||||
};
|
||||
|
||||
// ==================== Ansible 自动化 API ====================
|
||||
|
||||
Reference in new issue
Block a user