LoganandClaude
471353e3d7
告警中心 - 新增统一告警(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>
60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
// 监控图表放大壳 — 复用主机监控 ChartToolbar + 宽屏弹框 // Logan.Li
|
|
import { useState, type ReactNode } from 'react';
|
|
import {
|
|
Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import { ChartToolbar } from '../host-monitor/ChartToolbar';
|
|
|
|
interface Props {
|
|
title: string;
|
|
icon?: ReactNode;
|
|
/** 紧凑视图高度 */
|
|
compactHeight?: number;
|
|
/** 弹框内图表高度 */
|
|
expandedHeight?: number;
|
|
/** 无数据时不显示放大按钮 */
|
|
empty?: boolean;
|
|
className?: string;
|
|
children: (height: number) => ReactNode;
|
|
}
|
|
|
|
export function ChartExpandShell({
|
|
title,
|
|
icon,
|
|
compactHeight = 180,
|
|
expandedHeight = 420,
|
|
empty = false,
|
|
className = 'rounded-lg bg-[var(--dg-bg-tertiary)] p-3',
|
|
children,
|
|
}: Props) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<div className={className}>
|
|
<div className="flex items-center justify-between gap-2 mb-2">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
{icon}
|
|
<span className="text-xs text-[var(--dg-text-muted)] truncate">{title}</span>
|
|
</div>
|
|
{!empty && <ChartToolbar onExpand={() => setExpanded(true)} />}
|
|
</div>
|
|
{empty ? (
|
|
<p className="text-xs text-center py-10 text-[var(--dg-text-muted)]">暂无数据</p>
|
|
) : (
|
|
children(compactHeight)
|
|
)}
|
|
</div>
|
|
|
|
<Dialog open={expanded} onOpenChange={setExpanded}>
|
|
<DialogContent className="sm:max-w-4xl max-h-[90vh] overflow-y-auto bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base">{title}</DialogTitle>
|
|
<DialogDescription className="text-[var(--dg-text-muted)]">放大查看监控趋势与指标细节</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="pt-2">{children(expandedHeight)}</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
} |