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,85 @@
+// 中间件实例卡片 — 紧凑列表项，详情见右侧可观测面板 // Logan.Li
+import { Button } from '@/components/ui/button';
+import { AlertTriangle, Loader2, Pencil, Trash2, Zap } from 'lucide-react';
+import type { MwTarget } from './helpers';
+import {
+  evalMwHealth, fmtLastSeen, fmtVal,
+  healthLevelColor, redisModeLabel, worstHealthLevel,
+} from './helpers';
+
+interface Props {
+  target: MwTarget;
+  selected?: boolean;
+  onSelect: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+  onTest: () => void;
+  testing: boolean;
+}
+
+export function InstanceCard({ target, selected, onSelect, onEdit, onDelete, onTest, testing }: Props) {
+  const m = target.latest_metrics || {};
+  const isRedis = target.description === 'redis';
+  const issues = evalMwHealth(target);
+  const health = worstHealthLevel(issues);
+  const healthColor = healthLevelColor(health);
+
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={`w-full text-left rounded-lg px-2.5 py-2 border transition-colors ${
+        selected
+          ? 'border-cyan-500/50 bg-[var(--dg-bg-tertiary)] ring-1 ring-cyan-500/20'
+          : 'border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)] hover:border-[var(--dg-border)]/80'
+      }`}
+    >
+      <div className="flex items-center gap-1.5 min-w-0 mb-1">
+        <span className="text-sm font-medium truncate">{target.name}</span>
+        {health !== 'ok' && (
+          <AlertTriangle className="h-3 w-3 shrink-0" style={{ color: healthColor }} />
+        )}
+      </div>
+      <p className="text-[11px] text-[var(--dg-text-muted)] mb-1.5 truncate">
+        {target.ip}:{target.port}
+        {isRedis && ` · ${redisModeLabel(target.config_public?.redis_mode)}`}
+        {' · '}{fmtLastSeen(target.last_seen_at)}
+      </p>
+
+      <div className="flex flex-wrap gap-1 mb-1.5">
+        {isRedis ? (
+          <>
+            <MetricPill label="QPS" value={fmtVal(m.redis_qps, 1)} />
+            <MetricPill label="Key" value={fmtVal(m.redis_db_size)} />
+          </>
+        ) : (
+          <>
+            <MetricPill label="QPS" value={fmtVal(m.mysql_qps, 1)} />
+            <MetricPill label="线程" value={fmtVal(m.mysql_threads_running)} />
+          </>
+        )}
+      </div>
+
+      <div className="flex items-center gap-0.5" onClick={(e) => e.stopPropagation()}>
+        <Button variant="ghost" size="sm" className="h-6 px-1.5 text-[10px]" onClick={onTest} disabled={testing}>
+          {testing ? <Loader2 className="h-3 w-3 animate-spin" /> : <Zap className="h-3 w-3" />}测试
+        </Button>
+        <Button variant="ghost" size="sm" className="h-6 px-1.5 text-[10px]" onClick={onEdit}>
+          <Pencil className="h-3 w-3" />编辑
+        </Button>
+        <Button variant="ghost" size="sm" className="h-6 px-1.5 text-[10px] dg-text-red" onClick={onDelete}>
+          <Trash2 className="h-3 w-3" />删除
+        </Button>
+      </div>
+    </button>
+  );
+}
+
+function MetricPill({ label, value }: { label: string; value: string }) {
+  return (
+    <span className="inline-flex items-center gap-1 text-[10px] bg-[var(--dg-bg-primary)] rounded px-1.5 py-0.5">
+      <span className="text-[var(--dg-text-muted)]">{label}</span>
+      <span className="font-mono font-medium">{value}</span>
+    </span>
+  );
+}