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 {
+  AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
+  ReferenceArea,
+} from 'recharts';
+import { fmtChartTime, fmtHitRate, fmtVal } from './helpers';
+import { MonitorChartTooltip, MONITOR_CHART_GRID, MONITOR_CHART_TICK } from '../shared/monitorChartTheme';
+import { useChartRangeZoom } from '../shared/useChartRangeZoom';
+import { ChartRangeHint } from '../shared/ChartRangeHint';
+
+interface Props {
+  data: Array<{ timestamp: number; value: number }>;
+  color: string;
+  unit?: string;
+  percent?: boolean;
+  formatter?: (v: number) => string;
+  height?: number;
+  showRangeHint?: boolean;
+}
+
+function fmtValue(v: number, percent?: boolean, formatter?: (v: number) => string, unit?: string): string {
+  if (formatter) return formatter(v);
+  if (percent) return fmtHitRate(v);
+  const base = fmtVal(v, unit ? 1 : 0);
+  return unit ? `${base} ${unit}` : base;
+}
+
+export function MwTrendChart({
+  data, color, unit, percent, formatter, height = 150, showRangeHint = true,
+}: Props) {
+  const chartData = useMemo(
+    () => data.map((p) => ({ time: fmtChartTime(p.timestamp), value: p.value })),
+    [data],
+  );
+
+  const {
+    displayData, refLeft, refRight, selectionLabel, resetZoom, chartHandlers, zoomed,
+  } = useChartRangeZoom(chartData, 'time');
+
+  if (chartData.length === 0) {
+    return (
+      <div className="flex items-center justify-center text-xs text-[var(--dg-text-muted)]" style={{ height }}>
+        暂无趋势数据
+      </div>
+    );
+  }
+
+  const gradId = `mw-grad-${color.replace(/[^a-z]/gi, '')}`;
+
+  return (
+    <div>
+      <ResponsiveContainer width="100%" height={height}>
+        <AreaChart data={displayData} margin={{ top: 4, right: 6, left: 0, bottom: 4 }} {...chartHandlers}>
+          <defs>
+            <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor={color} stopOpacity={0.28} />
+              <stop offset="100%" stopColor={color} stopOpacity={0.02} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" stroke={MONITOR_CHART_GRID} vertical={false} />
+          <XAxis dataKey="time" tick={MONITOR_CHART_TICK} tickLine={false} axisLine={{ stroke: MONITOR_CHART_GRID }} interval="preserveStartEnd" minTickGap={32} />
+          <YAxis tick={MONITOR_CHART_TICK} tickLine={false} axisLine={false} width={42} domain={percent ? [0, 1] : ['auto', 'auto']} tickFormatter={(v: number) => (percent ? `${(v * 100).toFixed(0)}%` : fmtVal(v, 0))} />
+          <Tooltip
+            content={(
+              <MonitorChartTooltip
+                valueFormatter={(v) => fmtValue(v, percent, formatter, unit)}
+              />
+            )}
+          />
+          {refLeft && refRight && refLeft !== refRight && (
+            <ReferenceArea x1={refLeft} x2={refRight} strokeOpacity={0.4} fill="var(--dg-blue)" fillOpacity={0.12} />
+          )}
+          <Area type="monotone" dataKey="value" stroke={color} strokeWidth={2} fill={`url(#${gradId})`} dot={false} activeDot={{ r: 3, fill: color, stroke: 'var(--dg-bg-primary)', strokeWidth: 2 }} isAnimationActive={false} />
+        </AreaChart>
+      </ResponsiveContainer>
+      {showRangeHint && (
+        <ChartRangeHint label={selectionLabel} zoomed={zoomed} onReset={resetZoom} />
+      )}
+    </div>
+  );
+}