feat: 监控告警体系统一重构 + 自动化任务调度引擎 + 监控大屏拆分

告警中心 - 新增统一告警(alert_unified)、监控告警规则(monitor_alert_rule)、指标目录(alert_metric_catalog) - 通知策略与消息分发(alert_notify_policy/dispatch/message)、静默规则 - 告警引擎按阈值/SNMP 拆分(alert_engine_monitor/snmp) 监控采集 - SNMP 常量/模板与历史指标(snmp templates/constants、snmp_metrics_history、snmp_collect) - 中间件监控 Redis 采集与种子(middleware_monitor_redis/seed) - 站点探测 pkg(siteprobe) + 站点视图(site_view) 自动化任务 - cron 调度器(cronscheduler)、脚本运行器(scriptrunner)、系统任务(systask)及运行记录(cron_job_run、system_task) 审计与凭证 - 审计设置(audit_setting) + 历史清理(auditcleaner) 前端 - 监控页面(host/middleware/site/snmp)拆分为子模块并大屏化 - 告警中心多 Tab(规则/指标目录/通知策略/静默)、任务管理组件重构、Agent CLI Markdown 渲染 - 移除旧脚本卡片/详情/日志组件，统一为 ScriptTable/ScriptCodeEditor/TerminalOutput Co-Authored-By: Claude <noreply@anthropic.com>
2026-07-01 23:44:45 +08:00
1 parent 092d0e4b9e
commit 471353e3d7
@@ -0,0 +1,82 @@
+// 拨测协议数量分布饼图 // Logan.Li
+import { useMemo } from 'react';
+import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';
+import { MONITOR_PIE_STROKE, MonitorPieTooltip } from '../shared/monitorChartTheme';
+import { Card, CardContent } from '@/components/ui/card';
+import { PieChart as PieChartIcon } from 'lucide-react';
+import { PROBE_TYPE_OPTIONS, normalizeProbeType } from './helpers';
+import type { SiteTask } from './helpers';
+
+interface Props {
+  tasks: SiteTask[];
+}
+
+const PROTOCOL_COLORS: Record<string, string> = {
+  HTTP: 'var(--dg-blue)',
+  SSL: '#a855f7',
+  TCP: '#06b6d4',
+  DNS: 'var(--dg-green)',
+  PING: '#f59e0b',
+};
+
+export function SiteProtocolPieChart({ tasks }: Props) {
+  const protocolData = useMemo(() => {
+    const counts: Record<string, number> = {};
+    for (const t of PROBE_TYPE_OPTIONS) counts[t] = 0;
+    for (const t of tasks) {
+      const key = normalizeProbeType(t.type);
+      counts[key] = (counts[key] || 0) + 1;
+    }
+    return PROBE_TYPE_OPTIONS
+      .map((name) => ({ name, value: counts[name] || 0, fill: PROTOCOL_COLORS[name] || 'var(--dg-text-muted)' }))
+      .filter((d) => d.value > 0);
+  }, [tasks]);
+
+  if (tasks.length === 0) {
+    return (
+      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+        <CardContent className="p-6 text-center text-sm text-[var(--dg-text-muted)]">暂无任务</CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+      <CardContent className="p-4">
+        <div className="flex items-center gap-2 mb-2">
+          <PieChartIcon className="h-4 w-4 text-[var(--dg-text-muted)]" />
+          <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">协议数量分布</h3>
+          <span className="text-[10px] text-[var(--dg-text-muted)]">共 {tasks.length} 个任务</span>
+        </div>
+        <ResponsiveContainer width="100%" height={200}>
+          <PieChart>
+            <Pie
+              data={protocolData}
+              dataKey="value"
+              nameKey="name"
+              cx="50%"
+              cy="50%"
+              innerRadius={48}
+              outerRadius={76}
+              paddingAngle={2}
+              isAnimationActive={false}
+            >
+              {protocolData.map((entry) => (
+                <Cell key={entry.name} fill={entry.fill} stroke={MONITOR_PIE_STROKE} strokeWidth={2} />
+              ))}
+            </Pie>
+            <Tooltip content={<MonitorPieTooltip />} />
+          </PieChart>
+        </ResponsiveContainer>
+        <div className="flex flex-wrap justify-center gap-x-4 gap-y-1 mt-1">
+          {protocolData.map((d) => (
+            <div key={d.name} className="flex items-center gap-1.5 text-xs text-[var(--dg-text-muted)]">
+              <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: d.fill }} />
+              {d.name} {d.value}
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}