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';
@@ -56,7 +56,7 @@ import {
  FileCode,
  Workflow,
 } from 'lucide-react';
-import { pipelines, pipelineExecutions, releases } from '@/mocks/data';
+import { pipelineApi } from '@/services/api';

 interface PipelineStage {
  id: string;
@@ -66,74 +66,6 @@ interface PipelineStage {
  logs: string[];
 }

-interface Pipeline {
-  id: string;
-  name: string;
-  description: string;
-  repository: string;
-  branch: string;
-  stages: PipelineStage[];
-  lastRun: string;
-  lastStatus: 'success' | 'failed' | 'running' | 'never';
-  triggerType: 'manual' | 'auto';
-  createdAt: string;
-}
-
-const mockPipelines: Pipeline[] = [
-  {
-    id: 'pipe-001',
-    name: 'frontend-build-and-deploy',
-    description: '前端项目构建与部署',
-    repository: 'https://gitlab.company.com/frontend/app.git',
-    branch: 'main',
-    stages: [
-      { id: 'stage-1', name: '代码检出', status: 'success', duration: '15s', logs: ['检出代码...', '代码检出完成'] },
-      { id: 'stage-2', name: '依赖安装', status: 'success', duration: '45s', logs: ['安装依赖...', '依赖安装完成'] },
-      { id: 'stage-3', name: '代码检查', status: 'success', duration: '30s', logs: ['执行 ESLint...', '代码检查通过'] },
-      { id: 'stage-4', name: '构建打包', status: 'success', duration: '2m 15s', logs: ['开始构建...', '构建完成'] },
-      { id: 'stage-5', name: '部署到测试环境', status: 'success', duration: '30s', logs: ['部署中...', '部署完成'] },
-    ],
-    lastRun: '2025-04-14 10:30:00',
-    lastStatus: 'success',
-    triggerType: 'auto',
-    createdAt: '2025-01-15',
-  },
-  {
-    id: 'pipe-002',
-    name: 'backend-api-deploy',
-    description: '后端API服务部署',
-    repository: 'https://gitlab.company.com/backend/api.git',
-    branch: 'develop',
-    stages: [
-      { id: 'stage-1', name: '代码检出', status: 'success', duration: '12s', logs: [] },
-      { id: 'stage-2', name: '单元测试', status: 'success', duration: '1m 30s', logs: [] },
-      { id: 'stage-3', name: '构建镜像', status: 'running', duration: '45s', logs: ['构建Docker镜像...'] },
-      { id: 'stage-4', name: '推送镜像', status: 'pending', duration: '-', logs: [] },
-      { id: 'stage-5', name: '部署到K8s', status: 'pending', duration: '-', logs: [] },
-    ],
-    lastRun: '2025-04-14 11:15:00',
-    lastStatus: 'running',
-    triggerType: 'manual',
-    createdAt: '2025-02-01',
-  },
-  {
-    id: 'pipe-003',
-    name: 'database-migration',
-    description: '数据库迁移脚本执行',
-    repository: 'https://gitlab.company.com/database/migrations.git',
-    branch: 'main',
-    stages: [
-      { id: 'stage-1', name: '代码检出', status: 'success', duration: '10s', logs: [] },
-      { id: 'stage-2', name: '数据库备份', status: 'success', duration: '2m 00s', logs: [] },
-      { id: 'stage-3', name: '执行迁移', status: 'failed', duration: '15s', logs: ['迁移失败: 表已存在'] },
-    ],
-    lastRun: '2025-04-14 09:00:00',
-    lastStatus: 'failed',
-    triggerType: 'manual',
-    createdAt: '2025-01-20',
-  },
-];
-
 const pipelineTemplates = [
  { id: 'template-1', name: 'Node.js 项目', description: '适用于 Node.js 前端项目', stages: ['代码检出', '依赖安装', '代码检查', '构建打包', '部署'] },
  { id: 'template-2', name: 'Go 项目', description: '适用于 Go 后端项目', stages: ['代码检出', '单元测试', '构建', '构建镜像', '部署'] },
@@ -141,9 +73,24 @@ const pipelineTemplates = [
  { id: 'template-4', name: 'Python 项目', description: '适用于 Python 项目', stages: ['代码检出', '依赖安装', '代码检查', '测试', '部署'] },
 ];

+function parseStages(stages: any): PipelineStage[] {
+  if (Array.isArray(stages)) return stages;
+  if (typeof stages === 'string') {
+    try {
+      const parsed = JSON.parse(stages);
+      if (Array.isArray(parsed)) return parsed;
+    } catch {
+      return stages.split(',').map((s, i) => ({ id: `stage-${i + 1}`, name: s.trim(), status: 'success' as const, duration: '-', logs: [] }));
+    }
+  }
+  return [];
+}
+
 export function PipelineManager() {
  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedPipeline, setSelectedPipeline] = useState<Pipeline | null>(null);
+  const [pipelines, setPipelines] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedPipeline, setSelectedPipeline] = useState<any | null>(null);
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
  const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false);
  const [isRunDialogOpen, setIsRunDialogOpen] = useState(false);
@@ -156,13 +103,29 @@ export function PipelineManager() {
    template: '',
  });

-  const filteredPipelines = mockPipelines.filter(
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      const data = await pipelineApi.getPipelines();
+      setPipelines(data.list || []);
+    } catch (error) {
+      console.error('Failed to load pipelines:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const filteredPipelines = pipelines.filter(
    (p) =>
-      p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      p.description.toLowerCase().includes(searchQuery.toLowerCase())
+      (p.name || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (p.description || '').toLowerCase().includes(searchQuery.toLowerCase())
  );

-  const getStatusBadge = (status: Pipeline['lastStatus']) => {
+  const getStatusBadge = (status: any) => {
    switch (status) {
      case 'success':
        return (
@@ -209,14 +172,40 @@ export function PipelineManager() {
    }
  };

-  const handleCreatePipeline = () => {
-    // Mock create
-    setIsCreateDialogOpen(false);
-    setNewPipeline({ name: '', description: '', repository: '', branch: 'main', template: '' });
+  const handleCreatePipeline = async () => {
+    try {
+      await pipelineApi.createPipeline({
+        name: newPipeline.name,
+        description: newPipeline.description,
+        repository: newPipeline.repository,
+        branch: newPipeline.branch,
+      });
+      setIsCreateDialogOpen(false);
+      setNewPipeline({ name: '', description: '', repository: '', branch: 'main', template: '' });
+      loadData();
+    } catch (error) {
+      console.error('Failed to create pipeline:', error);
+    }
  };

-  const handleRunPipeline = () => {
-    setIsRunDialogOpen(false);
+  const handleDeletePipeline = async (id: any) => {
+    try {
+      await pipelineApi.deletePipeline(id);
+      loadData();
+    } catch (error) {
+      console.error('Failed to delete pipeline:', error);
+    }
+  };
+
+  const handleRunPipeline = async () => {
+    if (!selectedPipeline) return;
+    try {
+      await pipelineApi.triggerPipeline(selectedPipeline.id);
+      setIsRunDialogOpen(false);
+      loadData();
+    } catch (error) {
+      console.error('Failed to trigger pipeline:', error);
+    }
  };

  return (
@@ -246,7 +235,7 @@ export function PipelineManager() {
            <div className="flex items-center justify-between">
              <div>
                <p className="text-slate-400 text-sm">流水线总数</p>
-                <p className="text-2xl font-bold text-slate-100">{mockPipelines.length}</p>
+                <p className="text-2xl font-bold text-slate-100">{pipelines.length}</p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
                <Workflow className="h-5 w-5 text-blue-400" />
@@ -260,7 +249,7 @@ export function PipelineManager() {
              <div>
                <p className="text-slate-400 text-sm">运行中</p>
                <p className="text-2xl font-bold text-blue-400">
-                  {mockPipelines.filter((p) => p.lastStatus === 'running').length}
+                  {pipelines.filter((p) => p.status === 'running').length}
                </p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
@@ -274,7 +263,9 @@ export function PipelineManager() {
            <div className="flex items-center justify-between">
              <div>
                <p className="text-slate-400 text-sm">今日成功</p>
-                <p className="text-2xl font-bold text-emerald-400">12</p>
+                <p className="text-2xl font-bold text-emerald-400">
+                  {pipelines.filter((p) => p.status === 'success').length}
+                </p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center">
                <CheckCircle className="h-5 w-5 text-emerald-400" />
@@ -287,7 +278,9 @@ export function PipelineManager() {
            <div className="flex items-center justify-between">
              <div>
                <p className="text-slate-400 text-sm">今日失败</p>
-                <p className="text-2xl font-bold text-red-400">2</p>
+                <p className="text-2xl font-bold text-red-400">
+                  {pipelines.filter((p) => p.status === 'failed').length}
+                </p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-red-500/20 flex items-center justify-center">
                <XCircle className="h-5 w-5 text-red-400" />
@@ -310,6 +303,14 @@ export function PipelineManager() {
        </div>
      </div>

+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-6 w-6 text-slate-500 animate-spin" />
+        </div>
+      ) : filteredPipelines.length === 0 ? (
+        <div className="text-center text-slate-500 py-12">暂无流水线数据</div>
+      ) : null}
+
      {/* Pipeline List */}
      <div className="space-y-4">
        {filteredPipelines.map((pipeline) => (
@@ -319,9 +320,9 @@ export function PipelineManager() {
                <div className="flex-1">
                  <div className="flex items-center gap-3">
                    <h3 className="font-medium text-slate-100">{pipeline.name}</h3>
-                    {getStatusBadge(pipeline.lastStatus)}
+                    {getStatusBadge(pipeline.status)}
                    <Badge variant="outline" className="border-slate-700 text-slate-400">
-                      {pipeline.triggerType === 'auto' ? '自动触发' : '手动触发'}
+                      {pipeline.trigger_type === 'auto' ? '自动触发' : '手动触发'}
                    </Badge>
                  </div>
                  <p className="text-sm text-slate-400 mt-1">{pipeline.description}</p>
@@ -332,15 +333,15 @@ export function PipelineManager() {
                    </span>
                    <span className="flex items-center gap-1">
                      <Clock className="h-3 w-3" />
-                      上次运行: {pipeline.lastRun}
+                      上次运行: {pipeline.updated_at || '--'}
                    </span>
                  </div>

                  {/* Pipeline Stages */}
                  <div className="mt-4">
                    <div className="flex items-center gap-2">
-                      {pipeline.stages.map((stage, index) => (
-                        <div key={stage.id} className="flex items-center">
+                      {parseStages(pipeline.stages).map((stage: PipelineStage, index: number) => (
+                        <div key={stage.id || index} className="flex items-center">
                          <div
                            className={`flex items-center gap-1 px-2 py-1 rounded text-xs ${
                              stage.status === 'success'
@@ -355,7 +356,7 @@ export function PipelineManager() {
                            {getStageStatusIcon(stage.status)}
                            <span className="ml-1">{stage.name}</span>
                          </div>
-                          {index < pipeline.stages.length - 1 && (
+                          {index < parseStages(pipeline.stages).length - 1 && (
                            <ChevronRight className="h-4 w-4 text-slate-600 mx-1" />
                          )}
                        </div>
@@ -391,7 +392,7 @@ export function PipelineManager() {
                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-blue-400">
                    <Edit className="h-4 w-4" />
                  </Button>
-                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-red-400">
+                  <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-red-400" onClick={() => handleDeletePipeline(pipeline.id)}>
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
@@ -513,9 +514,9 @@ export function PipelineManager() {
                </TabsList>
                <TabsContent value="stages" className="mt-4">
                  <div className="space-y-2">
-                    {selectedPipeline.stages.map((stage, index) => (
+                    {parseStages(selectedPipeline.stages).map((stage: PipelineStage, index: number) => (
                      <div
-                        key={stage.id}
+                        key={stage.id || index}
                        className={`p-3 rounded-lg border cursor-pointer transition-all ${
                          activeStage === stage.id
                            ? 'border-blue-500 bg-blue-500/10'
@@ -562,7 +563,7 @@ export function PipelineManager() {
                    <div>
                      <Label className="text-slate-400">触发方式</Label>
                      <p className="text-slate-200">
-                        {selectedPipeline.triggerType === 'auto' ? '自动触发' : '手动触发'}
+                        {selectedPipeline.trigger_type === 'auto' ? '自动触发' : '手动触发'}
                      </p>
                    </div>
                  </div>