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 { cn } from '@/lib/utils';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -52,25 +52,42 @@ import {
  ArrowRight,
  Terminal,
 } from 'lucide-react';
-import { appReleases } from '@/mocks/data';
-import type { AppRelease } from '@/types';
+import { releaseApi } from '@/services/api';

 export function AppReleaseManager() {
  const [searchQuery, setSearchQuery] = useState('');
  const [envFilter, setEnvFilter] = useState<string>('all');
  const [statusFilter, setStatusFilter] = useState<string>('all');
-  const [selectedRelease, setSelectedRelease] = useState<AppRelease | null>(null);
+  const [releases, setReleases] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedRelease, setSelectedRelease] = useState<any | null>(null);

-  const filteredReleases = appReleases.filter((release) => {
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      const data = await releaseApi.getReleases();
+      setReleases(data.list || []);
+    } catch (error) {
+      console.error('Failed to load releases:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const filteredReleases = releases.filter((release) => {
    const matchesSearch =
-      release.appName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      release.version.includes(searchQuery);
+      (release.app_name || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (release.version || '').includes(searchQuery);
    const matchesEnv = envFilter === 'all' || release.environment === envFilter;
    const matchesStatus = statusFilter === 'all' || release.status === statusFilter;
    return matchesSearch && matchesEnv && matchesStatus;
  });

-  const getStatusBadge = (status: AppRelease['status']) => {
+  const getStatusBadge = (status: any) => {
    switch (status) {
      case 'success':
        return (
@@ -119,26 +136,35 @@ export function AppReleaseManager() {
    }
  };

-  const getEnvBadge = (env: AppRelease['environment']) => {
-    const colors = {
+  const getEnvBadge = (env: any) => {
+    const colors: Record<string, string> = {
      dev: 'border-slate-500/30 text-slate-400 bg-slate-500/10',
      test: 'border-blue-500/30 text-blue-400 bg-blue-500/10',
      staging: 'border-amber-500/30 text-amber-400 bg-amber-500/10',
      prod: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10',
    };
-    const labels = {
+    const labels: Record<string, string> = {
      dev: '开发环境',
      test: '测试环境',
      staging: '预发布',
      prod: '生产环境',
    };
    return (
-      <Badge variant="outline" className={colors[env]}>
-        {labels[env]}
+      <Badge variant="outline" className={colors[env] || colors.dev}>
+        {labels[env] || env}
      </Badge>
    );
  };

+  const handleRollback = async (id: any) => {
+    try {
+      await releaseApi.rollbackRelease(id);
+      loadData();
+    } catch (error) {
+      console.error('Failed to rollback release:', error);
+    }
+  };
+
  // 模拟流水线步骤
  const pipelineSteps = [
    { name: '代码检出', status: 'success', duration: '15s' },
@@ -178,7 +204,7 @@ export function AppReleaseManager() {
            <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">12</p>
+                <p className="text-2xl font-bold text-slate-100">{releases.length}</p>
              </div>
              <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
                <Rocket className="h-5 w-5" />
@@ -191,7 +217,9 @@ export function AppReleaseManager() {
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500">发布成功</p>
-                <p className="text-2xl font-bold text-emerald-400">10</p>
+                <p className="text-2xl font-bold text-emerald-400">
+                  {releases.filter((r) => r.status === 'success').length}
+                </p>
              </div>
              <div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
                <CheckCircle className="h-5 w-5" />
@@ -204,7 +232,9 @@ export function AppReleaseManager() {
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500">发布失败</p>
-                <p className="text-2xl font-bold text-red-400">1</p>
+                <p className="text-2xl font-bold text-red-400">
+                  {releases.filter((r) => r.status === 'failed').length}
+                </p>
              </div>
              <div className="p-3 rounded-lg bg-red-500/10 text-red-400">
                <XCircle className="h-5 w-5" />
@@ -217,7 +247,11 @@ export function AppReleaseManager() {
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-slate-500">成功率</p>
-                <p className="text-2xl font-bold text-blue-400">83.3%</p>
+                <p className="text-2xl font-bold text-blue-400">
+                  {releases.length > 0
+                    ? `${Math.round((releases.filter((r) => r.status === 'success').length / releases.length) * 100)}%`
+                    : '0%'}
+                </p>
              </div>
              <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
                <History className="h-5 w-5" />
@@ -278,17 +312,23 @@ export function AppReleaseManager() {
                  <TableHead className="text-slate-400">代码</TableHead>
                  <TableHead className="text-slate-400">发布人</TableHead>
                  <TableHead className="text-slate-400">开始时间</TableHead>
-                  <TableHead className="text-slate-400">耗时</TableHead>
                  <TableHead className="text-slate-400 text-right">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
-                {filteredReleases.map((release) => (
+                {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>
+                ) : filteredReleases.map((release) => (
                  <TableRow key={release.id} className="border-slate-800 hover:bg-slate-800/50">
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <Rocket className="h-4 w-4 text-slate-500" />
-                        <span className="text-sm font-medium text-slate-200">{release.appName}</span>
+                        <span className="text-sm font-medium text-slate-200">{release.app_name}</span>
                      </div>
                    </TableCell>
                    <TableCell>
@@ -304,7 +344,7 @@ export function AppReleaseManager() {
                        <span>{release.branch}</span>
                        <span className="mx-1">·</span>
                        <GitCommit className="h-3 w-3" />
-                        <span>{release.commitId}</span>
+                        <span>{release.commit_id}</span>
                      </div>
                    </TableCell>
                    <TableCell>
@@ -312,12 +352,7 @@ export function AppReleaseManager() {
                    </TableCell>
                    <TableCell>
                      <span className="text-sm text-slate-400">
-                        {new Date(release.startedAt).toLocaleString()}
-                      </span>
-                    </TableCell>
-                    <TableCell>
-                      <span className="text-sm text-slate-400">
-                        {release.duration ? `${Math.floor(release.duration / 60)}m ${release.duration % 60}s` : '--'}
+                        {release.created_at ? new Date(release.created_at).toLocaleString() : '--'}
                      </span>
                    </TableCell>
                    <TableCell className="text-right">
@@ -338,7 +373,12 @@ export function AppReleaseManager() {
                          </Button>
                        )}
                        {release.status === 'success' && (
-                          <Button variant="ghost" size="sm" className="h-8 text-slate-400 hover:text-amber-400">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 text-slate-400 hover:text-amber-400"
+                            onClick={() => handleRollback(release.id)}
+                          >
                            <RotateCcw className="h-4 w-4 mr-1" />
                            回滚
                          </Button>
@@ -359,13 +399,13 @@ export function AppReleaseManager() {
          <DialogHeader>
            <DialogTitle className="text-slate-100 flex items-center gap-2">
              <Rocket className="h-5 w-5 text-blue-400" />
-              {selectedRelease?.appName}
+              {selectedRelease?.app_name}
              <Badge variant="outline" className="border-slate-700 text-slate-400">
                {selectedRelease?.version}
              </Badge>
            </DialogTitle>
            <DialogDescription className="text-slate-500">
-              流水线: {selectedRelease?.pipeline}
+              环境: {selectedRelease?.environment}
            </DialogDescription>
          </DialogHeader>

@@ -412,7 +452,7 @@ export function AppReleaseManager() {
              <h4 className="text-sm font-medium text-slate-300">构建日志</h4>
              <div className="bg-slate-950 rounded-lg p-4 font-mono text-xs text-slate-400 h-48 overflow-auto">
                <div className="space-y-1">
-                  <p>[10:00:00] Starting pipeline for {selectedRelease?.appName}...</p>
+                  <p>[10:00:00] Starting pipeline for {selectedRelease?.app_name}...</p>
                  <p>[10:00:15] Checkout code from branch {selectedRelease?.branch}</p>
                  <p>[10:00:30] Installing dependencies...</p>
                  <p className="text-emerald-400">[10:01:15] Dependencies installed successfully</p>