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 } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -49,123 +49,46 @@ import {
  Eye,
  Copy,
 } from 'lucide-react';
-import { cronJobs } from '@/mocks/data';
-
-interface CronJob {
-  id: string;
-  name: string;
-  description: string;
-  schedule: string;
-  command: string;
-  status: 'enabled' | 'disabled';
-  lastRun: string;
-  lastStatus: 'success' | 'failed' | 'running' | 'never';
-  nextRun: string;
-  targetServers: string[];
-  createdAt: string;
-  createdBy: string;
-}
-
-const mockCronJobs: CronJob[] = [
-  {
-    id: 'cron-001',
-    name: '数据库备份',
-    description: '每日凌晨2点备份数据库',
-    schedule: '0 2 * * *',
-    command: '/scripts/backup-db.sh --type=full',
-    status: 'enabled',
-    lastRun: '2025-04-14 02:00:00',
-    lastStatus: 'success',
-    nextRun: '2025-04-15 02:00:00',
-    targetServers: ['db-server-01', 'db-server-02'],
-    createdAt: '2025-01-15',
-    createdBy: 'admin',
-  },
-  {
-    id: 'cron-002',
-    name: '日志清理',
-    description: '每周日凌晨3点清理过期日志',
-    schedule: '0 3 * * 0',
-    command: '/scripts/clean-logs.sh --days=30',
-    status: 'enabled',
-    lastRun: '2025-04-13 03:00:00',
-    lastStatus: 'success',
-    nextRun: '2025-04-20 03:00:00',
-    targetServers: ['all'],
-    createdAt: '2025-01-20',
-    createdBy: 'admin',
-  },
-  {
-    id: 'cron-003',
-    name: '健康检查',
-    description: '每5分钟执行健康检查',
-    schedule: '*/5 * * * *',
-    command: '/scripts/health-check.sh',
-    status: 'enabled',
-    lastRun: '2025-04-14 11:55:00',
-    lastStatus: 'running',
-    nextRun: '2025-04-14 12:00:00',
-    targetServers: ['web-server-01', 'web-server-02', 'app-server-01'],
-    createdAt: '2025-02-01',
-    createdBy: 'ops01',
-  },
-  {
-    id: 'cron-004',
-    name: '数据同步',
-    description: '每小时同步数据到备份服务器',
-    schedule: '0 * * * *',
-    command: '/scripts/sync-data.sh --target=backup',
-    status: 'disabled',
-    lastRun: '2025-04-14 10:00:00',
-    lastStatus: 'failed',
-    nextRun: '-',
-    targetServers: ['app-server-01'],
-    createdAt: '2025-02-15',
-    createdBy: 'ops02',
-  },
-  {
-    id: 'cron-005',
-    name: '生成报表',
-    description: '每周一上午9点生成业务报表',
-    schedule: '0 9 * * 1',
-    command: '/scripts/generate-report.sh --type=weekly',
-    status: 'enabled',
-    lastRun: '2025-04-07 09:00:00',
-    lastStatus: 'success',
-    nextRun: '2025-04-21 09:00:00',
-    targetServers: ['report-server'],
-    createdAt: '2025-03-01',
-    createdBy: 'admin',
-  },
-];
-
-const executionLogs = [
-  { id: 1, jobName: '数据库备份', startTime: '2025-04-14 02:00:00', endTime: '2025-04-14 02:15:30', duration: '15m 30s', status: 'success', output: '备份完成: 15.2GB' },
-  { id: 2, jobName: '健康检查', startTime: '2025-04-14 11:55:00', endTime: '2025-04-14 11:55:05', duration: '5s', status: 'success', output: '所有服务正常' },
-  { id: 3, jobName: '数据同步', startTime: '2025-04-14 10:00:00', endTime: '2025-04-14 10:05:23', duration: '5m 23s', status: 'failed', output: '连接超时' },
-  { id: 4, jobName: '日志清理', startTime: '2025-04-13 03:00:00', endTime: '2025-04-13 03:02:15', duration: '2m 15s', status: 'success', output: '清理完成: 2.3GB' },
-];
+import { cronJobApi } from '@/services/api';

 export function CronJobManager() {
  const [searchQuery, setSearchQuery] = useState('');
+  const [jobs, setJobs] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
  const [isLogDialogOpen, setIsLogDialogOpen] = useState(false);
-  const [selectedJob, setSelectedJob] = useState<CronJob | null>(null);
+  const [selectedJob, setSelectedJob] = useState<any | null>(null);
  const [newJob, setNewJob] = useState({
    name: '',
    description: '',
-    schedule: '',
+    cron: '',
    command: '',
    targetServers: '',
  });

-  const filteredJobs = mockCronJobs.filter(
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      const data = await cronJobApi.getJobs();
+      setJobs(data.list || []);
+    } catch (error) {
+      console.error('Failed to load cron jobs:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const filteredJobs = jobs.filter(
    (job) =>
-      job.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      job.description.toLowerCase().includes(searchQuery.toLowerCase())
+      (job.name || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (job.description || '').toLowerCase().includes(searchQuery.toLowerCase())
  );

-  const getStatusBadge = (status: CronJob['lastStatus']) => {
+  const getStatusBadge = (status: any) => {
    switch (status) {
      case 'success':
        return (
@@ -208,9 +131,47 @@ export function CronJobManager() {
    return patterns[schedule] || schedule;
  };

-  const handleCreateJob = () => {
-    setIsCreateDialogOpen(false);
-    setNewJob({ name: '', description: '', schedule: '', command: '', targetServers: '' });
+  const handleCreateJob = async () => {
+    try {
+      await cronJobApi.createJob({
+        name: newJob.name,
+        description: newJob.description,
+        cron: newJob.cron,
+        command: newJob.command,
+      });
+      setIsCreateDialogOpen(false);
+      setNewJob({ name: '', description: '', cron: '', command: '', targetServers: '' });
+      loadData();
+    } catch (error) {
+      console.error('Failed to create cron job:', error);
+    }
+  };
+
+  const handleToggleJob = async (id: any) => {
+    try {
+      await cronJobApi.toggleJob(id);
+      loadData();
+    } catch (error) {
+      console.error('Failed to toggle job:', error);
+    }
+  };
+
+  const handleExecuteJob = async (id: any) => {
+    try {
+      await cronJobApi.executeJob(id);
+      loadData();
+    } catch (error) {
+      console.error('Failed to execute job:', error);
+    }
+  };
+
+  const handleDeleteJob = async (id: any) => {
+    try {
+      await cronJobApi.deleteJob(id);
+      loadData();
+    } catch (error) {
+      console.error('Failed to delete job:', error);
+    }
  };

  return (
@@ -238,30 +199,28 @@ export function CronJobManager() {
        <Card className="bg-slate-800 border-slate-700">
          <CardContent className="p-4">
            <p className="text-slate-400 text-sm">任务总数</p>
-            <p className="text-2xl font-bold text-slate-100">{mockCronJobs.length}</p>
+            <p className="text-2xl font-bold text-slate-100">{jobs.length}</p>
          </CardContent>
        </Card>
        <Card className="bg-slate-800 border-slate-700">
          <CardContent className="p-4">
            <p className="text-slate-400 text-sm">已启用</p>
            <p className="text-2xl font-bold text-emerald-400">
-              {mockCronJobs.filter((j) => j.status === 'enabled').length}
+              {jobs.filter((j) => j.status === 1).length}
            </p>
          </CardContent>
        </Card>
        <Card className="bg-slate-800 border-slate-700">
          <CardContent className="p-4">
            <p className="text-slate-400 text-sm">执行中</p>
-            <p className="text-2xl font-bold text-blue-400">
-              {mockCronJobs.filter((j) => j.lastStatus === 'running').length}
-            </p>
+            <p className="text-2xl font-bold text-blue-400">--</p>
          </CardContent>
        </Card>
        <Card className="bg-slate-800 border-slate-700">
          <CardContent className="p-4">
-            <p className="text-slate-400 text-sm">今日失败</p>
+            <p className="text-slate-400 text-sm">累计失败</p>
            <p className="text-2xl font-bold text-red-400">
-              {mockCronJobs.filter((j) => j.lastStatus === 'failed').length}
+              {jobs.reduce((sum, j) => sum + (j.fail_count || 0), 0)}
            </p>
          </CardContent>
        </Card>
@@ -280,6 +239,12 @@ export function CronJobManager() {
        </div>
      </div>

+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-6 w-6 text-slate-500 animate-spin" />
+        </div>
+      ) : null}
+
      {/* Job List */}
      <div className="space-y-3">
        {filteredJobs.map((job) => (
@@ -292,20 +257,20 @@ export function CronJobManager() {
                    <Badge
                      variant="outline"
                      className={
-                        job.status === 'enabled'
+                        job.status === 1
                          ? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
                          : 'border-slate-500/30 text-slate-400 bg-slate-500/10'
                      }
                    >
-                      {job.status === 'enabled' ? '已启用' : '已禁用'}
+                      {job.status === 1 ? '已启用' : '已禁用'}
                    </Badge>
-                    {getStatusBadge(job.lastStatus)}
+                    {getStatusBadge(job.last_status)}
                  </div>
                  <p className="text-sm text-slate-400 mt-1">{job.description}</p>
                  <div className="flex items-center gap-4 mt-2 text-sm">
                    <span className="flex items-center gap-1 text-slate-400">
                      <Clock className="h-3 w-3" />
-                      {parseCron(job.schedule)}
+                      {parseCron(job.cron)}
                    </span>
                    <span className="flex items-center gap-1 text-slate-400">
                      <Terminal className="h-3 w-3" />
@@ -313,17 +278,30 @@ export function CronJobManager() {
                    </span>
                  </div>
                  <div className="flex items-center gap-4 mt-2 text-xs text-slate-500">
-                    <span>上次执行: {job.lastRun}</span>
-                    <span>下次执行: {job.nextRun}</span>
-                    <span>目标: {job.targetServers.join(', ')}</span>
+                    <span>上次执行: {job.last_run ? new Date(job.last_run).toLocaleString() : '--'}</span>
+                    <span>下次执行: {job.next_run ? new Date(job.next_run).toLocaleString() : '--'}</span>
+                    <span>成功: {job.success_count || 0} / 失败: {job.fail_count || 0}</span>
                  </div>
                </div>

                <div className="flex items-center gap-2">
-                  <Button variant="outline" size="sm" className="border-emerald-600 text-emerald-400 hover:bg-emerald-600/20">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="border-emerald-600 text-emerald-400 hover:bg-emerald-600/20"
+                    onClick={() => handleExecuteJob(job.id)}
+                  >
                    <Play className="h-4 w-4 mr-1" />
                    立即执行
                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-slate-400 hover:text-blue-400"
+                    onClick={() => handleToggleJob(job.id)}
+                  >
+                    {job.status === 1 ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
@@ -335,6 +313,7 @@ export function CronJobManager() {
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8 text-slate-400 hover:text-red-400"
+                    onClick={() => handleDeleteJob(job.id)}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
@@ -375,12 +354,12 @@ export function CronJobManager() {
              <Label className="text-slate-300">Cron 表达式</Label>
              <div className="flex gap-2">
                <Input
-                  value={newJob.schedule}
-                  onChange={(e) => setNewJob({ ...newJob, schedule: e.target.value })}
+                  value={newJob.cron}
+                  onChange={(e) => setNewJob({ ...newJob, cron: e.target.value })}
                  placeholder="0 2 * * *"
                  className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
                />
-                <Select onValueChange={(v) => setNewJob({ ...newJob, schedule: v })}>
+                <Select onValueChange={(v) => setNewJob({ ...newJob, cron: v })}>
                  <SelectTrigger className="w-48 bg-slate-800 border-slate-700 text-slate-100 mt-1">
                    <SelectValue placeholder="快速选择" />
                  </SelectTrigger>
@@ -433,39 +412,45 @@ export function CronJobManager() {
            <DialogDescription className="text-slate-500">定时任务执行记录</DialogDescription>
          </DialogHeader>
          <div className="mt-4">
-            <Table>
-              <TableHeader>
-                <TableRow className="border-slate-700">
-                  <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">输出</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {executionLogs.map((log) => (
-                  <TableRow key={log.id} className="border-slate-700">
-                    <TableCell className="text-slate-200">{log.jobName}</TableCell>
-                    <TableCell className="text-slate-400">{log.startTime}</TableCell>
-                    <TableCell className="text-slate-400">{log.duration}</TableCell>
-                    <TableCell>
-                      <Badge
-                        variant="outline"
-                        className={
-                          log.status === 'success'
-                            ? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
-                            : 'border-red-500/30 text-red-400 bg-red-500/10'
-                        }
-                      >
-                        {log.status === 'success' ? '成功' : '失败'}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-slate-400 text-sm">{log.output}</TableCell>
+            {jobs.length === 0 ? (
+              <div className="text-center text-slate-500 py-8">暂无执行记录</div>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow className="border-slate-700">
+                    <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">状态</TableHead>
                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+                </TableHeader>
+                <TableBody>
+                  {jobs.map((job) => (
+                    <TableRow key={job.id} className="border-slate-700">
+                      <TableCell className="text-slate-200">{job.name}</TableCell>
+                      <TableCell className="text-slate-400">
+                        {job.last_run ? new Date(job.last_run).toLocaleString() : '--'}
+                      </TableCell>
+                      <TableCell className="text-emerald-400">{job.success_count || 0}</TableCell>
+                      <TableCell className="text-red-400">{job.fail_count || 0}</TableCell>
+                      <TableCell>
+                        <Badge
+                          variant="outline"
+                          className={
+                            (job.fail_count || 0) > 0
+                              ? 'border-red-500/30 text-red-400 bg-red-500/10'
+                              : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
+                          }
+                        >
+                          {(job.fail_count || 0) > 0 ? '有失败' : '正常'}
+                        </Badge>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
          </div>
        </DialogContent>
      </Dialog>