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

后端改进: - 修复 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 正常
2026-06-14 02:11:10 +08:00
1 parent 97c4207ff8
commit ff0b268984
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -34,9 +34,9 @@ import {
  MessageSquare,
  Phone,
  VolumeX,
+  Loader2,
 } from 'lucide-react';
-import { alertRules, alertEvents } from '@/mocks/data';
-import type { AlertEvent } from '@/types';
+import { alertApi } from '@/services/api';
 import {
  AreaChart,
  Area,
@@ -47,22 +47,59 @@ import {
  ResponsiveContainer,
 } from 'recharts';

+function hasChannel(notifyChannels: any, channel: string): boolean {
+  if (!notifyChannels) return false;
+  if (Array.isArray(notifyChannels)) return notifyChannels.includes(channel);
+  if (typeof notifyChannels === 'string') {
+    try {
+      const parsed = JSON.parse(notifyChannels);
+      return Array.isArray(parsed) ? parsed.includes(channel) : notifyChannels.includes(channel);
+    } catch {
+      return notifyChannels.includes(channel);
+    }
+  }
+  return false;
+}
+
 export function AlertManager() {
  const [activeTab, setActiveTab] = useState('events');
  const [searchQuery, setSearchQuery] = useState('');
  const [severityFilter, setSeverityFilter] = useState<string>('all');
  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [alerts, setAlerts] = useState<any[]>([]);
+  const [rules, setRules] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);

-  const filteredEvents = alertEvents.filter((event) => {
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      const [alertsData, rulesData] = await Promise.all([
+        alertApi.getAlerts(),
+        alertApi.getRules(),
+      ]);
+      setAlerts((alertsData as any)?.list || []);
+      setRules(rulesData || []);
+    } catch (error) {
+      console.error('Failed to load alert data:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const filteredEvents = alerts.filter((event) => {
    const matchesSearch =
-      event.ruleName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      event.target.toLowerCase().includes(searchQuery.toLowerCase());
+      ((event.rule && event.rule.name) || event.message || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (event.target || '').toLowerCase().includes(searchQuery.toLowerCase());
    const matchesSeverity = severityFilter === 'all' || event.severity === severityFilter;
    const matchesStatus = statusFilter === 'all' || event.status === statusFilter;
    return matchesSearch && matchesSeverity && matchesStatus;
  });

-  const getSeverityBadge = (severity: AlertEvent['severity']) => {
+  const getSeverityBadge = (severity: any) => {
    switch (severity) {
      case 'critical':
        return (
@@ -90,7 +127,7 @@ export function AlertManager() {
    }
  };

-  const getStatusBadge = (status: AlertEvent['status']) => {
+  const getStatusBadge = (status: any) => {
    switch (status) {
      case 'firing':
        return (
@@ -109,6 +146,24 @@ export function AlertManager() {
    }
  };

+  const handleAcknowledge = async (id: any) => {
+    try {
+      await alertApi.acknowledge(id);
+      loadData();
+    } catch (error) {
+      console.error('Failed to acknowledge alert:', error);
+    }
+  };
+
+  const handleToggleRule = async (id: any) => {
+    try {
+      await alertApi.toggleRule(id);
+      loadData();
+    } catch (error) {
+      console.error('Failed to toggle rule:', error);
+    }
+  };
+
  // 告警趋势数据
  const alertTrendData = [
    { time: '00:00', critical: 2, warning: 5, info: 8 },
@@ -147,7 +202,7 @@ export function AlertManager() {
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500">告警规则</p>
-                <p className="text-2xl font-bold text-slate-100">{alertRules.length}</p>
+                <p className="text-2xl font-bold text-slate-100">{rules.length}</p>
              </div>
              <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
                <Bell className="h-5 w-5" />
@@ -161,7 +216,7 @@ export function AlertManager() {
              <div>
                <p className="text-sm text-slate-500">触发中</p>
                <p className="text-2xl font-bold text-red-400">
-                  {alertEvents.filter((e) => e.status === 'firing').length}
+                  {alerts.filter((e) => e.status === 'firing').length}
                </p>
              </div>
              <div className="p-3 rounded-lg bg-red-500/10 text-red-400">
@@ -175,7 +230,7 @@ export function AlertManager() {
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500">今日告警</p>
-                <p className="text-2xl font-bold text-amber-400">{alertEvents.length}</p>
+                <p className="text-2xl font-bold text-amber-400">{alerts.length}</p>
              </div>
              <div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
                <Clock className="h-5 w-5" />
@@ -189,7 +244,7 @@ export function AlertManager() {
              <div>
                <p className="text-sm text-slate-500">已恢复</p>
                <p className="text-2xl font-bold text-emerald-400">
-                  {alertEvents.filter((e) => e.status === 'resolved').length}
+                  {alerts.filter((e) => e.status === 'resolved').length}
                </p>
              </div>
              <div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
@@ -318,11 +373,20 @@ export function AlertManager() {
                    </TableRow>
                  </TableHeader>
                  <TableBody>
-                    {filteredEvents.map((event) => (
+                    {loading ? (
+                      <TableRow className="border-slate-800">
+                        <TableCell colSpan={8} className="text-center text-slate-500 py-8">
+                          <Loader2 className="h-5 w-5 animate-spin inline mr-2" />
+                          加载中...
+                        </TableCell>
+                      </TableRow>
+                    ) : filteredEvents.map((event) => (
                      <TableRow key={event.id} className="border-slate-800 hover:bg-slate-800/50">
                        <TableCell>{getSeverityBadge(event.severity)}</TableCell>
                        <TableCell>
-                          <span className="text-sm font-medium text-slate-200">{event.ruleName}</span>
+                          <span className="text-sm font-medium text-slate-200">
+                            {(event.rule && event.rule.name) || event.message}
+                          </span>
                        </TableCell>
                        <TableCell>{getStatusBadge(event.status)}</TableCell>
                        <TableCell>
@@ -336,7 +400,7 @@ export function AlertManager() {
                        </TableCell>
                        <TableCell>
                          <span className="text-sm text-slate-400">
-                            {new Date(event.startedAt).toLocaleString()}
+                            {event.created_at ? new Date(event.created_at).toLocaleString() : '--'}
                          </span>
                        </TableCell>
                        <TableCell className="text-right">
@@ -346,6 +410,7 @@ export function AlertManager() {
                                variant="ghost"
                                size="sm"
                                className="h-8 text-slate-400 hover:text-emerald-400"
+                                onClick={() => handleAcknowledge(event.id)}
                              >
                                <CheckCircle className="h-4 w-4 mr-1" />
                                确认
@@ -380,7 +445,7 @@ export function AlertManager() {
                    </TableRow>
                  </TableHeader>
                  <TableBody>
-                    {alertRules.map((rule) => (
+                    {rules.map((rule) => (
                      <TableRow key={rule.id} className="border-slate-800 hover:bg-slate-800/50">
                        <TableCell>
                          <div>
@@ -414,23 +479,27 @@ export function AlertManager() {
                          )}
                        </TableCell>
                        <TableCell>
-                          <span className="text-sm text-slate-300">{rule.duration / 60}分钟</span>
+                          <span className="text-sm text-slate-300">{(rule.duration || 0) / 60}分钟</span>
                        </TableCell>
                        <TableCell>
                          <div className="flex gap-1">
-                            {rule.notifyChannels.includes('email') && (
+                            {hasChannel(rule.notify_channels, 'email') && (
                              <Mail className="h-4 w-4 text-slate-400" />
                            )}
-                            {rule.notifyChannels.includes('sms') && (
+                            {hasChannel(rule.notify_channels, 'sms') && (
                              <Phone className="h-4 w-4 text-slate-400" />
                            )}
-                            {rule.notifyChannels.includes('dingtalk') && (
+                            {hasChannel(rule.notify_channels, 'dingtalk') && (
                              <MessageSquare className="h-4 w-4 text-slate-400" />
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
-                          <Switch checked={rule.enabled} className="data-[state=checked]:bg-blue-600" />
+                          <Switch
+                            checked={!!rule.enabled}
+                            className="data-[state=checked]:bg-blue-600"
+                            onCheckedChange={() => handleToggleRule(rule.id)}
+                          />
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex items-center justify-end gap-1">