From 2e71371257f8c622439bfca0b2453c8f16ad6abc Mon Sep 17 00:00:00 2001 From: attacker Date: Thu, 18 Jun 2026 13:02:19 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20Phase=202-5=20=E7=9B=91=E6=8E=A7?= =?UTF-8?q?=E4=B8=AD=E5=BF=83=E5=85=A8=E6=A0=88=E5=AE=9E=E7=8E=B0=20?= =?UTF-8?q?=E2=80=94=20=E6=8C=87=E6=A0=87=E6=B5=8F=E8=A7=88=E5=99=A8/SNMP/?= =?UTF-8?q?=E7=AB=99=E7=82=B9=E6=8B=A8=E6=B5=8B/=E4=B8=AD=E9=97=B4?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Phase 2 指标监控: - 修复 /metrics 路由(原指向 AlertManager → 现指向 MetricsExplorer) - 新建 MetricsHandler (4 API): targets/list/query/names - 新建 MetricsExplorer 前端(170行): 目标选择器+指标分类树+多指标叠加SVG图表 Phase 3 SNMP设备: - 新建 SNMPHandler (9 API): devices CRUD/templates/stats - SNMPMonitor 接入真实API(428行): 设备表格+添加对话框+删除 Phase 4 站点拨测: - 新建 SiteHandler (8 API): tasks CRUD/results/stats - SiteMonitor 接入真实API(542行): 任务表+添加对话框+拨测类型网格 - 新增 siteApi 到 api.ts Phase 5 中间件采集: - Agent 新增 collector/middleware.go: Redis INFO + MySQL handshake 采集 - Agent CLI 新增 -redis/-redis-auth/-mysql/-mysql-user/-mysql-pass - MiddlewareMonitor 接入真实API(301行): 实例卡片+指标面板 基础设施: - AutoMigrate 新增 23 张监控表 - 前后端容器构建部署验证通过 --- agent/collector/middleware.go | 215 +++++++++ agent/main.go | 48 ++ agent/model/model.go | 46 +- backend/internal/api/handlers/metrics.go | 132 ++++++ backend/internal/api/handlers/site.go | 166 +++++++ backend/internal/api/handlers/snmp.go | 143 ++++++ backend/internal/api/routes/routes.go | 37 ++ backend/pkg/database/database.go | 23 + frontend/src/App.tsx | 3 +- frontend/src/pages/HostMonitor.tsx | 412 ++++++++++++++--- frontend/src/pages/MetricsExplorer.tsx | 283 ++++++++++++ frontend/src/pages/MiddlewareMonitor.tsx | 298 +++++++++++- frontend/src/pages/SNMPMonitor.tsx | 378 +++++++++++++++- frontend/src/pages/SiteMonitor.tsx | 550 +++++++++++++++++++++-- frontend/src/services/api.ts | 19 + 15 files changed, 2616 insertions(+), 137 deletions(-) create mode 100644 agent/collector/middleware.go create mode 100644 backend/internal/api/handlers/metrics.go create mode 100644 backend/internal/api/handlers/site.go create mode 100644 backend/internal/api/handlers/snmp.go create mode 100644 frontend/src/pages/MetricsExplorer.tsx diff --git a/agent/collector/middleware.go b/agent/collector/middleware.go new file mode 100644 index 0000000..7de581c --- /dev/null +++ b/agent/collector/middleware.go @@ -0,0 +1,215 @@ +// Package collector 包含中间件（Redis / MySQL）的采集逻辑。 +// 通过 TCP 直连发送 INFO / SHOW GLOBAL STATUS 命令获取指标。 +// +// 署名 Logan.Li +package collector + +import ( + "fmt" + "io" + "net" + "strconv" + "strings" + "sync" + "time" + + "ezops/agent/model" +) + +// MiddlewareConfig 中间件采集配置 +type MiddlewareConfig struct { + RedisAddrs []string // Redis 地址列表，格式 host:port + RedisAuth string // Redis 密码（空为无密码） + MySQLAddrs []string // MySQL 地址列表，格式 host:port + MySQLUser string // MySQL 用户名 + MySQLPass string // MySQL 密码 +} + +// MiddlewareCollector 中间件指标采集器 +type MiddlewareCollector struct { + cfg MiddlewareConfig + mu sync.Mutex + prevMySQLQPS map[string]int64 // 上轮 Questions 值，用于计算 QPS 增量 + prevTime time.Time +} + +// NewMiddlewareCollector 创建中间件采集器 +func NewMiddlewareCollector(cfg MiddlewareConfig) *MiddlewareCollector { + return &MiddlewareCollector{ + cfg: cfg, + prevMySQLQPS: make(map[string]int64), + prevTime: time.Now(), + } +} + +// Collect 采集所有已配置中间件的指标 +func (m *MiddlewareCollector) Collect() (model.MiddlewareStat, error) { + var stat model.MiddlewareStat + + // Redis + for _, addr := range m.cfg.RedisAddrs { + if metric, err := m.collectRedis(addr); err == nil { + stat.Redis = append(stat.Redis, metric) + } + } + + // MySQL + m.mu.Lock() + now := time.Now() + elapsed := now.Sub(m.prevTime).Seconds() + m.prevTime = now + m.mu.Unlock() + + for _, addr := range m.cfg.MySQLAddrs { + if metric, err := m.collectMySQL(addr, elapsed); err == nil { + stat.MySQL = append(stat.MySQL, metric) + } + } + + return stat, nil +} + +// collectRedis 连接 Redis 发送 INFO 命令并解析指标 +func (m *MiddlewareCollector) collectRedis(addr string) (model.RedisMetric, error) { + metric := model.RedisMetric{Instance: addr} + + conn, err := net.DialTimeout("tcp", addr, 3*time.Second) + if err != nil { + return metric, fmt.Errorf("redis connect %s: %w", addr, err) + } + defer conn.Close() + + // 认证 + if m.cfg.RedisAuth != "" { + cmd := fmt.Sprintf("*2\r\n$4\r\nAUTH\r\n$%d\r\n%s\r\n", len(m.cfg.RedisAuth), m.cfg.RedisAuth) + if _, err := conn.Write([]byte(cmd)); err != nil { + return metric, fmt.Errorf("redis auth: %w", err) + } + buf := make([]byte, 1024) + conn.SetReadDeadline(time.Now().Add(2 * time.Second)) + n, _ := conn.Read(buf) + if n > 0 && !strings.HasPrefix(string(buf[:n]), "+OK") { + return metric, fmt.Errorf("redis auth failed") + } + } + + // 发送 INFO 命令 + conn.SetWriteDeadline(time.Now().Add(2 * time.Second)) + if _, err := conn.Write([]byte("*1\r\n$4\r\nINFO\r\n")); err != nil { + return metric, fmt.Errorf("redis info cmd: %w", err) + } + + conn.SetReadDeadline(time.Now().Add(3 * time.Second)) + data, err := io.ReadAll(conn) + if err != nil { + return metric, fmt.Errorf("redis read: %w", err) + } + + // 解析 Redis INFO bulk string 响应 + raw := string(data) + // Redis RESP: $\r\n\r\n — 去掉前缀 + if idx := strings.Index(raw, "\r\n"); idx > 0 { + raw = raw[idx+2:] + } + if idx := strings.LastIndex(raw, "\r\n"); idx > 0 { + raw = raw[:idx] + } + + // 按行解析 key:value + for _, line := range strings.Split(raw, "\n") { + line = strings.TrimSpace(line) + if line == "" || strings.HasPrefix(line, "#") { + continue + } + parts := strings.SplitN(line, ":", 2) + if len(parts) != 2 { + continue + } + key, val := parts[0], strings.TrimSpace(parts[1]) + + switch key { + case "redis_version": + metric.Version = val + case "uptime_in_seconds": + metric.Uptime, _ = strconv.ParseInt(val, 10, 64) + case "connected_clients": + metric.Clients, _ = strconv.Atoi(val) + case "used_memory": + metric.UsedMemory, _ = strconv.ParseInt(val, 10, 64) + case "instantaneous_ops_per_sec": + metric.QPS, _ = strconv.ParseFloat(val, 64) + case "keyspace_hits", "keyspace_misses": + // Both needed for hit rate + } + } + + // 命中率从 keyspace_hits + keyspace_misses 计算 + hitsStr := extractInfoField(raw, "keyspace_hits") + missesStr := extractInfoField(raw, "keyspace_misses") + hits, _ := strconv.ParseInt(hitsStr, 10, 64) + misses, _ := strconv.ParseInt(missesStr, 10, 64) + if total := hits + misses; total > 0 { + metric.HitRate = float64(hits) / float64(total) * 100 + } + + return metric, nil +} + +// collectMySQL 连接 MySQL 执行 SHOW GLOBAL STATUS 并解析指标 +func (m *MiddlewareCollector) collectMySQL(addr string, elapsedSec float64) (model.MySQLMetric, error) { + metric := model.MySQLMetric{Instance: addr} + + conn, err := net.DialTimeout("tcp", addr, 3*time.Second) + if err != nil { + return metric, fmt.Errorf("mysql connect %s: %w", addr, err) + } + defer conn.Close() + + // MySQL handshake — minimalist: just send SHOW GLOBAL STATUS as query + // This requires a real MySQL client protocol, which is complex without go-sql-driver. + // Use a simple approach: try to connect and parse handshake for version + buf := make([]byte, 4096) + conn.SetReadDeadline(time.Now().Add(3 * time.Second)) + n, err := conn.Read(buf) + if err != nil { + return metric, fmt.Errorf("mysql handshake read: %w", err) + } + + // MySQL 握手包: 第 1 字节为协议版本(0a)，第 2 字节起为服务器版本字符串（以 00 结尾） + if n < 5 { + return metric, fmt.Errorf("mysql handshake too short") + } + if buf[0] != 0x0a && buf[0] != 10 { + // 可能是 MariaDB 或其他变体 — 尝试跳过 + } + + // 提取版本字符串 + versionEnd := -1 + for i := 1; i < n; i++ { + if buf[i] == 0 { + versionEnd = i + break + } + } + if versionEnd > 1 { + metric.Version = string(buf[1:versionEnd]) + } + + // For full MySQL metrics, we'd need go-sql-driver/mysql for the protocol handshake + query. + // For now, just fill with basic info from the handshake. + // Production: use database/sql + go-sql-driver/mysql + + return metric, nil +} + +// extractInfoField 从 Redis INFO 原始输出中提取指定 key 的值 +func extractInfoField(raw, key string) string { + prefix := key + ":" + for _, line := range strings.Split(raw, "\n") { + line = strings.TrimSpace(line) + if strings.HasPrefix(line, prefix) { + return line[len(prefix):] + } + } + return "" +} diff --git a/agent/main.go b/agent/main.go index 5bd9974..ab1ca54 100644 --- a/agent/main.go +++ b/agent/main.go @@ -12,6 +12,7 @@ import ( "log" "os" "os/signal" + "strings" "syscall" "time" @@ -32,6 +33,14 @@ func main() { interval := flag.Int("interval", 10, "采集与上报间隔，单位：秒") token := flag.String("token", "", "Bearer 鉴权令牌") hostnameFlag := flag.String("hostname", "", "上报主机名，默认使用系统主机名") + + // 中间件采集配置 + redisFlag := flag.String("redis", "", "Redis 监控地址，逗号分隔多实例，格式 host:port") + redisAuthFlag := flag.String("redis-auth", "", "Redis 认证密码") + mysqlFlag := flag.String("mysql", "", "MySQL 监控地址，逗号分隔多实例，格式 host:port") + mysqlUserFlag := flag.String("mysql-user", "root", "MySQL 用户名") + mysqlPassFlag := flag.String("mysql-pass", "", "MySQL 密码") + flag.Parse() // 统一日志格式：带微秒时间戳，便于排查问题 @@ -68,6 +77,20 @@ func main() { diskIOCollector := collector.NewDiskIOCollector() rep := reporter.New(*server, *token, logger) + // 中间件采集器（可选） + var mwCollector *collector.MiddlewareCollector + if *redisFlag != "" || *mysqlFlag != "" { + mwCfg := collector.MiddlewareConfig{ + RedisAddrs: parseAddrList(*redisFlag), + RedisAuth: *redisAuthFlag, + MySQLAddrs: parseAddrList(*mysqlFlag), + MySQLUser: *mysqlUserFlag, + MySQLPass: *mysqlPassFlag, + } + mwCollector = collector.NewMiddlewareCollector(mwCfg) + logger.Printf("中间件采集已启用: redis=%d mysql=%d", len(mwCfg.RedisAddrs), len(mwCfg.MySQLAddrs)) + } + // 初始化任务执行器与任务客户端（与 reporter 复用相同的 server/token/hostname） taskExecutor := task.New(logger) taskClient := task.NewClient(*server, *token, hostname, logger) @@ -122,6 +145,15 @@ func main() { report.DiskIO = dioStat } + // 中间件采集（可选） + if mwCollector != nil { + if mwStat, err := mwCollector.Collect(); err != nil { + logger.Printf("中间件采集异常: %v", err) + } else { + report.Middleware = mwStat + } + } + if err := rep.Send(ctx, report); err != nil { logger.Printf("上报失败: %v", err) return @@ -208,3 +240,19 @@ func maskToken(token string) string { } return token[:4] + "****" } + +// parseAddrList 解析逗号分隔的地址列表，去除空白 +func parseAddrList(raw string) []string { + if raw == "" { + return nil + } + parts := strings.Split(raw, ",") + var result []string + for _, p := range parts { + p = strings.TrimSpace(p) + if p != "" { + result = append(result, p) + } + } + return result +} diff --git a/agent/model/model.go b/agent/model/model.go index 6f4386f..692974e 100644 --- a/agent/model/model.go +++ b/agent/model/model.go @@ -6,14 +6,44 @@ package model // Report 为单次采集周期的完整上报报文 type Report struct { - Hostname string `json:"hostname"` // 主机名 - Timestamp string `json:"timestamp"` // RFC3339 格式的 UTC 时间戳 - CPU CPUStat `json:"cpu"` // CPU 指标 - Memory MemoryStat `json:"memory"` // 内存指标 - Disks []DiskStat `json:"disks"` // 磁盘指标列表 - Ports []PortStat `json:"ports"` // 监听端口列表 - Network NetworkStat `json:"network"` // 网络指标 - DiskIO DiskIOStat `json:"disk_io"` // 磁盘 IO 指标 + Hostname string `json:"hostname"` // 主机名 + Timestamp string `json:"timestamp"` // RFC3339 格式的 UTC 时间戳 + CPU CPUStat `json:"cpu"` // CPU 指标 + Memory MemoryStat `json:"memory"` // 内存指标 + Disks []DiskStat `json:"disks"` // 磁盘指标列表 + Ports []PortStat `json:"ports"` // 监听端口列表 + Network NetworkStat `json:"network"` // 网络指标 + DiskIO DiskIOStat `json:"disk_io"` // 磁盘 IO 指标 + Middleware MiddlewareStat `json:"middleware,omitempty"` // 中间件指标（Redis/MySQL） +} + +// MiddlewareStat 中间件综合指标 — 包含 Redis + MySQL +type MiddlewareStat struct { + Redis []RedisMetric `json:"redis,omitempty"` // Redis 实例指标 + MySQL []MySQLMetric `json:"mysql,omitempty"` // MySQL 实例指标 +} + +// RedisMetric Redis 实例采集指标 +type RedisMetric struct { + Instance string `json:"instance"` // 实例标识（host:port） + Clients int `json:"clients"` // 连接客户端数 + UsedMemory int64 `json:"used_memory"` // 已用内存（字节） + HitRate float64 `json:"hit_rate"` // 缓存命中率（%） + QPS float64 `json:"qps"` // 每秒命令数 + Uptime int64 `json:"uptime"` // 运行时长（秒） + Version string `json:"version"` // Redis 版本 +} + +// MySQLMetric MySQL 实例采集指标 +type MySQLMetric struct { + Instance string `json:"instance"` // 实例标识（host:port） + Connections int `json:"connections"` // 当前连接数 + QPS float64 `json:"qps"` // 每秒查询数 + SlowQueries int64 `json:"slow_queries"` // 慢查询累计数 + BufferHitRate float64 `json:"buffer_hit_rate"` // 缓冲池命中率（%） + ThreadsRunning int `json:"threads_running"` // 活跃线程数 + Uptime int64 `json:"uptime"` // 运行时长（秒） + Version string `json:"version"` // MySQL 版本 } // CPUStat CPU 相关指标 diff --git a/backend/internal/api/handlers/metrics.go b/backend/internal/api/handlers/metrics.go new file mode 100644 index 0000000..860c0af --- /dev/null +++ b/backend/internal/api/handlers/metrics.go @@ -0,0 +1,132 @@ +package handlers + +import ( + "ezops/internal/models" + "net/http" + "strconv" + "time" + + "github.com/gin-gonic/gin" + "gorm.io/gorm" +) + +// MetricsHandler 指标浏览器 handler // Logan.Li +type MetricsHandler struct { + db *gorm.DB +} + +// NewMetricsHandler 创建指标 handler +func NewMetricsHandler(db *gorm.DB) *MetricsHandler { + return &MetricsHandler{db: db} +} + +// ListTargets 列出监控目标（按类型过滤） +// GET /api/v1/metrics/targets?type=host&status=online +func (h *MetricsHandler) ListTargets(c *gin.Context) { + var targets []models.MonitorTarget + q := h.db.Model(&models.MonitorTarget{}) + + if t := c.Query("type"); t != "" { + q = q.Where("type = ?", t) + } + if s := c.Query("status"); s != "" { + q = q.Where("status = ?", s) + } + if kw := c.Query("keyword"); kw != "" { + q = q.Where("name LIKE ? OR ip LIKE ?", "%"+kw+"%", "%"+kw+"%") + } + + // 分页 + page, _ := strconv.Atoi(c.DefaultQuery("page", "1")) + pageSize, _ := strconv.Atoi(c.DefaultQuery("page_size", "50")) + var total int64 + q.Count(&total) + q.Offset((page - 1) * pageSize).Limit(pageSize).Order("name ASC").Find(&targets) + + if targets == nil { + targets = []models.MonitorTarget{} + } + // 附带最新指标值 + type TargetWithMetrics struct { + models.MonitorTarget + LatestMetrics map[string]float64 `json:"latest_metrics"` + } + result := make([]TargetWithMetrics, len(targets)) + for i, t := range targets { + result[i] = TargetWithMetrics{MonitorTarget: t, LatestMetrics: make(map[string]float64)} + // 查询该目标最近 10 分钟内的最新指标 + var histories []models.MetricHistory + h.db.Where("target_id = ? AND timestamp > ?", t.ID, now()-600). + Order("timestamp DESC").Limit(10).Find(&histories) + for _, mh := range histories { + if _, ok := result[i].LatestMetrics[mh.MetricName]; !ok { + result[i].LatestMetrics[mh.MetricName] = mh.Value + } + } + } + + c.JSON(http.StatusOK, models.Response{Code: 200, Data: gin.H{ + "list": result, + "total": total, + }}) +} + +// ListMetrics 列出系统中所有指标元数据 +// GET /api/v1/metrics/list +func (h *MetricsHandler) ListMetrics(c *gin.Context) { + var metrics []models.MonitorMetric + h.db.Order("category ASC, name ASC").Find(&metrics) + if metrics == nil { + metrics = []models.MonitorMetric{} + } + c.JSON(http.StatusOK, models.Response{Code: 200, Data: metrics}) +} + +// QueryValues 查询指标时序数据 +// GET /api/v1/metrics/query?target_id=N&metric_name=cpu_usage&from=0&to=0&limit=100 +func (h *MetricsHandler) QueryValues(c *gin.Context) { + var histories []models.MetricHistory + q := h.db.Model(&models.MetricHistory{}) + + if tid := c.Query("target_id"); tid != "" { + id, _ := strconv.ParseUint(tid, 10, 64) + q = q.Where("target_id = ?", id) + } + if mn := c.Query("metric_name"); mn != "" { + q = q.Where("metric_name = ?", mn) + } + if from := c.Query("from"); from != "" { + ts, _ := strconv.ParseInt(from, 10, 64) + q = q.Where("timestamp >= ?", ts) + } + if to := c.Query("to"); to != "" { + ts, _ := strconv.ParseInt(to, 10, 64) + q = q.Where("timestamp <= ?", ts) + } + + limit, _ := strconv.Atoi(c.DefaultQuery("limit", "200")) + q.Order("timestamp ASC").Limit(limit).Find(&histories) + + if histories == nil { + histories = []models.MetricHistory{} + } + c.JSON(http.StatusOK, models.Response{Code: 200, Data: histories}) +} + +// ListMetricNames 列出所有可用的指标名称（去重） +// GET /api/v1/metrics/names +func (h *MetricsHandler) ListMetricNames(c *gin.Context) { + var names []string + h.db.Model(&models.MetricHistory{}). + Distinct("metric_name"). + Order("metric_name ASC"). + Pluck("metric_name", &names) + if names == nil { + names = []string{} + } + c.JSON(http.StatusOK, models.Response{Code: 200, Data: names}) +} + +func now() int64 { + return time.Now().Unix() +} diff --git a/backend/internal/api/handlers/site.go b/backend/internal/api/handlers/site.go new file mode 100644 index 0000000..e7e112c --- /dev/null +++ b/backend/internal/api/handlers/site.go @@ -0,0 +1,166 @@ +package handlers + +import ( + "ezops/internal/models" + "net/http" + "strconv" + + "github.com/gin-gonic/gin" + "gorm.io/gorm" +) + +// SiteHandler 站点拨测管理 handler // Logan.Li +type SiteHandler struct { + db *gorm.DB +} + +// NewSiteHandler 创建站点拨测 handler +func NewSiteHandler(db *gorm.DB) *SiteHandler { + return &SiteHandler{db: db} +} + +// ========== Site Task CRUD ========== + +// ListTasks 列出拨测任务 +// GET /api/v1/site/tasks?page=1&page_size=20&type=&status= +func (h *SiteHandler) ListTasks(c *gin.Context) { + var tasks []models.SiteTask + q := h.db.Model(&models.SiteTask{}) + + if t := c.Query("type"); t != "" { + q = q.Where("type = ?", t) + } + if s := c.Query("status"); s != "" { + q = q.Where("status = ?", s) + } + if kw := c.Query("keyword"); kw != "" { + q = q.Where("name LIKE ? OR url LIKE ?", "%"+kw+"%", "%"+kw+"%") + } + + page, _ := strconv.Atoi(c.DefaultQuery("page", "1")) + pageSize, _ := strconv.Atoi(c.DefaultQuery("page_size", "20")) + var total int64 + q.Count(&total) + q.Offset((page - 1) * pageSize).Limit(pageSize).Order("name ASC").Find(&tasks) + + if tasks == nil { + tasks = []models.SiteTask{} + } + c.JSON(http.StatusOK, models.Response{Code: 200, Data: gin.H{"list": tasks, "total": total}}) +} + +// CreateTask 创建拨测任务 +// POST /api/v1/site/tasks +func (h *SiteHandler) CreateTask(c *gin.Context) { + var task models.SiteTask + if err := c.ShouldBindJSON(&task); err != nil { + c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: err.Error()}) + return + } + if err := h.db.Create(&task).Error; err != nil { + c.JSON(http.StatusInternalServerError, models.Response{Code: 500, Message: err.Error()}) + return + } + c.JSON(http.StatusOK, models.Response{Code: 200, Data: task, Message: "创建成功"}) +} + +// UpdateTask 更新拨测任务 +// PUT /api/v1/site/tasks/:id +func (h *SiteHandler) UpdateTask(c *gin.Context) { + id := c.Param("id") + var task models.SiteTask + if err := h.db.First(&task, id).Error; err != nil { + c.JSON(http.StatusNotFound, models.Response{Code: 404, Message: "任务不存在"}) + return + } + if err := c.ShouldBindJSON(&task); err != nil { + c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: err.Error()}) + return + } + h.db.Save(&task) + c.JSON(http.StatusOK, models.Response{Code: 200, Data: task, Message: "更新成功"}) +} + +// DeleteTask 删除拨测任务 +// DELETE /api/v1/site/tasks/:id +func (h *SiteHandler) DeleteTask(c *gin.Context) { + id := c.Param("id") + if err := h.db.Delete(&models.SiteTask{}, id).Error; err != nil { + c.JSON(http.StatusInternalServerError, models.Response{Code: 500, Message: err.Error()}) + return + } + c.JSON(http.StatusOK, models.Response{Code: 200, Message: "删除成功"}) +} + +// BatchDeleteTasks 批量删除 +// DELETE /api/v1/site/tasks/batch-delete +func (h *SiteHandler) BatchDeleteTasks(c *gin.Context) { + var req models.IDsRequest + if err := c.ShouldBindJSON(&req); err != nil { + c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: err.Error()}) + return + } + h.db.Where("id IN ?", req.IDs).Delete(&models.SiteTask{}) + c.JSON(http.StatusOK, models.Response{Code: 200, Message: "批量删除成功"}) +} + +// ========== Site Results ========== + +// ListResults 查询拨测结果 +// GET /api/v1/site/results?task_id=N&from=&to=&limit=100 +func (h *SiteHandler) ListResults(c *gin.Context) { + var results []models.SiteResult + q := h.db.Model(&models.SiteResult{}) + + if tid := c.Query("task_id"); tid != "" { + q = q.Where("task_id = ?", tid) + } + if from := c.Query("from"); from != "" { + q = q.Where("created_at >= ?", from) + } + if to := c.Query("to"); to != "" { + q = q.Where("created_at <= ?", to) + } + + limit, _ := strconv.Atoi(c.DefaultQuery("limit", "100")) + q.Order("created_at DESC").Limit(limit).Find(&results) + + if results == nil { + results = []models.SiteResult{} + } + c.JSON(http.StatusOK, models.Response{Code: 200, Data: results}) +} + +// ========== Site Statistics ========== + +// GetSiteStats 获取拨测概览统计 +// GET /api/v1/site/stats +func (h *SiteHandler) GetSiteStats(c *gin.Context) { + var total, normal, abnormal int64 + h.db.Model(&models.SiteTask{}).Count(&total) + h.db.Model(&models.SiteTask{}).Where("status = ?", "active").Count(&normal) + h.db.Model(&models.SiteTask{}).Where("status = ?", "error").Count(&abnormal) + + // Calculate availability rate from recent results + var availRate float64 + if total > 0 { + var successCount int64 + h.db.Model(&models.SiteResult{}). + Where("created_at > datetime('now', '-1 hour') AND status = 'success'"). + Count(&successCount) + var totalRecent int64 + h.db.Model(&models.SiteResult{}). + Where("created_at > datetime('now', '-1 hour')"). + Count(&totalRecent) + if totalRecent > 0 { + availRate = float64(successCount) / float64(totalRecent) * 100 + } + } + + c.JSON(http.StatusOK, models.Response{Code: 200, Data: gin.H{ + "total": total, + "normal": normal, + "abnormal": abnormal, + "avail_rate": availRate, + }}) +} diff --git a/backend/internal/api/handlers/snmp.go b/backend/internal/api/handlers/snmp.go new file mode 100644 index 0000000..a489264 --- /dev/null +++ b/backend/internal/api/handlers/snmp.go @@ -0,0 +1,143 @@ +package handlers + +import ( + "ezops/internal/models" + "net/http" + "strconv" + + "github.com/gin-gonic/gin" + "gorm.io/gorm" +) + +// SNMPHandler SNMP 设备管理 handler // Logan.Li +type SNMPHandler struct { + db *gorm.DB +} + +// NewSNMPHandler 创建 SNMP handler +func NewSNMPHandler(db *gorm.DB) *SNMPHandler { + return &SNMPHandler{db: db} +} + +// ========== SNMP Device CRUD ========== + +// ListDevices 列出 SNMP 设备 +// GET /api/v1/snmp/devices?page=1&page_size=20&keyword= +func (h *SNMPHandler) ListDevices(c *gin.Context) { + var devices []models.SNMPDevice + q := h.db.Model(&models.SNMPDevice{}) + + if kw := c.Query("keyword"); kw != "" { + q = q.Where("name LIKE ? OR ip LIKE ?", "%"+kw+"%", "%"+kw+"%") + } + + page, _ := strconv.Atoi(c.DefaultQuery("page", "1")) + pageSize, _ := strconv.Atoi(c.DefaultQuery("page_size", "20")) + var total int64 + q.Count(&total) + q.Offset((page - 1) * pageSize).Limit(pageSize).Order("name ASC").Find(&devices) + + if devices == nil { + devices = []models.SNMPDevice{} + } + c.JSON(http.StatusOK, models.Response{Code: 200, Data: gin.H{"list": devices, "total": total}}) +} + +// CreateDevice 创建 SNMP 设备 +// POST /api/v1/snmp/devices +func (h *SNMPHandler) CreateDevice(c *gin.Context) { + var device models.SNMPDevice + if err := c.ShouldBindJSON(&device); err != nil { + c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: err.Error()}) + return + } + if err := h.db.Create(&device).Error; err != nil { + c.JSON(http.StatusInternalServerError, models.Response{Code: 500, Message: err.Error()}) + return + } + c.JSON(http.StatusOK, models.Response{Code: 200, Data: device, Message: "创建成功"}) +} + +// UpdateDevice 更新 SNMP 设备 +// PUT /api/v1/snmp/devices/:id +func (h *SNMPHandler) UpdateDevice(c *gin.Context) { + id := c.Param("id") + var device models.SNMPDevice + if err := h.db.First(&device, id).Error; err != nil { + c.JSON(http.StatusNotFound, models.Response{Code: 404, Message: "设备不存在"}) + return + } + if err := c.ShouldBindJSON(&device); err != nil { + c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: err.Error()}) + return + } + h.db.Save(&device) + c.JSON(http.StatusOK, models.Response{Code: 200, Data: device, Message: "更新成功"}) +} + +// DeleteDevice 删除 SNMP 设备 +// DELETE /api/v1/snmp/devices/:id +func (h *SNMPHandler) DeleteDevice(c *gin.Context) { + id := c.Param("id") + if err := h.db.Delete(&models.SNMPDevice{}, id).Error; err != nil { + c.JSON(http.StatusInternalServerError, models.Response{Code: 500, Message: err.Error()}) + return + } + c.JSON(http.StatusOK, models.Response{Code: 200, Message: "删除成功"}) +} + +// BatchDeleteDevices 批量删除 +// DELETE /api/v1/snmp/devices/batch-delete +func (h *SNMPHandler) BatchDeleteDevices(c *gin.Context) { + var req models.IDsRequest + if err := c.ShouldBindJSON(&req); err != nil { + c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: err.Error()}) + return + } + h.db.Where("id IN ?", req.IDs).Delete(&models.SNMPDevice{}) + c.JSON(http.StatusOK, models.Response{Code: 200, Message: "批量删除成功"}) +} + +// ========== SNMP Template CRUD ========== + +// ListTemplates 列出 OID 模板 +// GET /api/v1/snmp/templates +func (h *SNMPHandler) ListTemplates(c *gin.Context) { + var templates []models.SNMPTemplate + h.db.Order("name ASC").Find(&templates) + if templates == nil { + templates = []models.SNMPTemplate{} + } + c.JSON(http.StatusOK, models.Response{Code: 200, Data: templates}) +} + +// CreateTemplate 创建 OID 模板 +// POST /api/v1/snmp/templates +func (h *SNMPHandler) CreateTemplate(c *gin.Context) { + var template models.SNMPTemplate + if err := c.ShouldBindJSON(&template); err != nil { + c.JSON(http.StatusBadRequest, models.Response{Code: 400, Message: err.Error()}) + return + } + if err := h.db.Create(&template).Error; err != nil { + c.JSON(http.StatusInternalServerError, models.Response{Code: 500, Message: err.Error()}) + return + } + c.JSON(http.StatusOK, models.Response{Code: 200, Data: template, Message: "创建成功"}) +} + +// ========== SNMP Statistics ========== + +// GetSNMPStats 获取 SNMP 概览统计 +// GET /api/v1/snmp/stats +func (h *SNMPHandler) GetSNMPStats(c *gin.Context) { + var total, online int64 + h.db.Model(&models.SNMPDevice{}).Count(&total) + h.db.Model(&models.SNMPDevice{}).Where("status = ?", "online").Count(&online) + + c.JSON(http.StatusOK, models.Response{Code: 200, Data: gin.H{ + "total": total, + "online": online, + "abnormal": total - online, + }}) +} diff --git a/backend/internal/api/routes/routes.go b/backend/internal/api/routes/routes.go index 9a8bcfa..068854a 100644 --- a/backend/internal/api/routes/routes.go +++ b/backend/internal/api/routes/routes.go @@ -465,6 +465,43 @@ func Register(r *gin.Engine, db *gorm.DB, log *zap.Logger, cfg *config.Config, c aiopsGroup.DELETE("/chat-history", llmHandler.ClearChatHistory) } + // 指标浏览器 — 监控指标元数据 + 时序查询 // Logan.Li + metricsHandler := handlers.NewMetricsHandler(db) + metricsGroup := authorized.Group("/metrics") + { + metricsGroup.GET("/targets", metricsHandler.ListTargets) + metricsGroup.GET("/list", metricsHandler.ListMetrics) + metricsGroup.GET("/query", metricsHandler.QueryValues) + metricsGroup.GET("/names", metricsHandler.ListMetricNames) + } + + // SNMP 设备管理 — 网络设备/服务器硬件 // Logan.Li + snmpHandler := handlers.NewSNMPHandler(db) + snmpGroup := authorized.Group("/snmp") + { + snmpGroup.GET("/devices", snmpHandler.ListDevices) + snmpGroup.POST("/devices", snmpHandler.CreateDevice) + snmpGroup.PUT("/devices/:id", snmpHandler.UpdateDevice) + snmpGroup.DELETE("/devices/:id", snmpHandler.DeleteDevice) + snmpGroup.DELETE("/devices/batch-delete", snmpHandler.BatchDeleteDevices) + snmpGroup.GET("/templates", snmpHandler.ListTemplates) + snmpGroup.POST("/templates", snmpHandler.CreateTemplate) + snmpGroup.GET("/stats", snmpHandler.GetSNMPStats) + } + + // 站点拨测 — HTTP/TCP/DNS/PING 主动监控 // Logan.Li + siteHandler := handlers.NewSiteHandler(db) + siteGroup := authorized.Group("/site") + { + siteGroup.GET("/tasks", siteHandler.ListTasks) + siteGroup.POST("/tasks", siteHandler.CreateTask) + siteGroup.PUT("/tasks/:id", siteHandler.UpdateTask) + siteGroup.DELETE("/tasks/:id", siteHandler.DeleteTask) + siteGroup.DELETE("/tasks/batch-delete", siteHandler.BatchDeleteTasks) + siteGroup.GET("/results", siteHandler.ListResults) + siteGroup.GET("/stats", siteHandler.GetSiteStats) + } + // 启动告警引擎（每 30 秒检查一次） alertEngine := handlers.NewAlertEngine(db) go func() { diff --git a/backend/pkg/database/database.go b/backend/pkg/database/database.go index 2770cd5..14b4fbc 100644 --- a/backend/pkg/database/database.go +++ b/backend/pkg/database/database.go @@ -107,6 +107,29 @@ func AutoMigrate(db *gorm.DB) error { &models.LLMConfig{}, // 大语言模型配置（AI 智能助手） // Logan.Li &models.ChatHistory{}, // 对话历史记录（按用户隔离） // Logan.Li &models.MetricsKline{}, // 指标K线聚合（Redis 热数据 → MySQL） // Logan.Li + &models.MonitorTarget{}, // 监控目标（主机/中间件/设备/站点） // Logan.Li + &models.MonitorMetric{}, // 监控指标定义 // Logan.Li + &models.MetricValue{}, // 指标当前值 // Logan.Li + &models.MetricHistory{}, // 指标历史时序 // Logan.Li + &models.MetricTag{}, // 指标标签 // Logan.Li + &models.MonitorDashboard{},// 监控大屏配置 // Logan.Li + &models.DashboardPanel{}, // 大屏面板 // Logan.Li + &models.HostGroup{}, // 主机组 // Logan.Li + &models.SNMPDevice{}, // SNMP设备 // Logan.Li + &models.SNMPTemplate{}, // SNMP模板 // Logan.Li + &models.SNMPTemplateOID{}, // SNMP模板OID // Logan.Li + &models.SNMPMetric{}, // SNMP指标 // Logan.Li + &models.SNMPInterface{}, // SNMP接口 // Logan.Li + &models.SiteTask{}, // 站点拨测任务 // Logan.Li + &models.SiteResult{}, // 拨测结果 // Logan.Li + &models.SiteAlert{}, // 拨测告警 // Logan.Li + &models.AlertRuleV2{}, // 告警规则V2 // Logan.Li + &models.AlertCondition{}, // 告警条件 // Logan.Li + &models.AlertNotifyTemplate{}, // 告警通知模板 // Logan.Li + &models.AlertUpgrade{}, // 告警升级 // Logan.Li + &models.AlertUpgradeRecord{},// 告警升级记录 // Logan.Li + &models.AlertSilence{}, // 告警静默 // Logan.Li + &models.AlertEventV2{}, // 告警事件V2 // Logan.Li } var lastErr error diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 79197f4..5396182 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -32,6 +32,7 @@ import AlertCenter from '@/components/monitor/alert-center/AlertCenter'; import TraceManager from '@/components/monitor/trace/TraceManager'; import GrafanaDashboard from '@/components/monitor/dashboard/GrafanaDashboard'; import { MonitorCenter } from '@/pages/MonitorCenter'; +import { MetricsExplorer } from '@/pages/MetricsExplorer'; const queryClient = new QueryClient({ defaultOptions: { @@ -69,7 +70,7 @@ function App() { } /> } /> {/* 监控告警 */} - } /> + } /> } /> } /> } /> diff --git a/frontend/src/pages/HostMonitor.tsx b/frontend/src/pages/HostMonitor.tsx index 60d1a10..8480509 100644 --- a/frontend/src/pages/HostMonitor.tsx +++ b/frontend/src/pages/HostMonitor.tsx @@ -1,90 +1,326 @@ -// 主机监控 — Agent 采集指标展示 (CPU/内存/磁盘/网络/磁盘IO) +// 主机监控 — Agent 采集指标展示 (CPU/内存/TCP/磁盘IO/趋势图) // Logan.Li +import { useState, useEffect, useRef, useCallback } from 'react'; +import { agentApi } from '@/services/api'; +import { useUserStore } from '@/store'; +import { asList, isOnline, timeAgo } from '@/components/agent/agentUtils'; import { Card, CardContent } from '@/components/ui/card'; -import { Cpu, HardDrive, Network, Activity, Server } from 'lucide-react'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { Cpu, HardDrive, Network, Activity, Server, Loader2 } from 'lucide-react'; +import { + AreaChart, + Area, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer, +} from 'recharts'; + +// Tailwind 不支持动态 class，用颜色映射表 +const colorMap: Record = { + blue: 'bg-blue-500/10', + emerald: 'bg-emerald-500/10', + purple: 'bg-purple-500/10', + orange: 'bg-orange-500/10', +}; + +function parseJSON(raw: string): Record { + if (!raw) return {}; + try { return JSON.parse(raw); } catch { return {}; } +} + +function fmtBps(bps: number): string { + if (!bps || bps === 0) return '--'; + if (bps > 1e9) return `${(bps / 1e9).toFixed(1)} GB/s`; + if (bps > 1e6) return `${(bps / 1e6).toFixed(1)} MB/s`; + if (bps > 1e3) return `${(bps / 1e3).toFixed(1)} KB/s`; + return `${bps.toFixed(1)} B/s`; +} + +function fmtNum(n: number): string { + return n != null && !Number.isNaN(n) ? String(Math.round(n)) : '--'; +} export function HostMonitor() { + const [hosts, setHosts] = useState([]); + const [selectedHost, setSelectedHost] = useState(''); + const [latest, setLatest] = useState(null); + const [cpuKlines, setCpuKlines] = useState([]); + const [memKlines, setMemKlines] = useState([]); + const [cardLoading, setCardLoading] = useState(true); + const [chartLoading, setChartLoading] = useState(false); + + const wsRef = useRef(null); + const reconnectRef = useRef | null>(null); + + // Step 1: 加载主机列表 + const loadHosts = useCallback(async () => { + try { + const data = await agentApi.getLatest(); + const list = asList(data); + setHosts(list); + if (list.length > 0 && !selectedHost) { + setSelectedHost(list[0].hostname); + } + } catch { /* 后端不可用时显示空状态 */ } + finally { setCardLoading(false); } + }, [selectedHost]); + + useEffect(() => { loadHosts(); }, []); + + // Step 2: 选中主机后加载 K 线 + useEffect(() => { + if (!selectedHost) return; + setChartLoading(true); + + const now = new Date(); + const from = new Date(now.getTime() - 60 * 60 * 1000); + // JS toISOString() 包含毫秒 (2026-06-18T12:50:00.000Z)，Go time.RFC3339 不解析毫秒 + const toISO = (d: Date) => d.toISOString().replace(/\.\d{3}Z$/, 'Z'); + + Promise.all([ + agentApi.getKline({ hostname: selectedHost, metric: 'cpu', interval: '5m', from: toISO(from), to: toISO(now) }), + agentApi.getKline({ hostname: selectedHost, metric: 'mem', interval: '5m', from: toISO(from), to: toISO(now) }), + ]) + .then(([cpu, mem]) => { + setCpuKlines(asList(cpu)); + setMemKlines(asList(mem)); + }) + .catch(() => { setCpuKlines([]); setMemKlines([]); }) + .finally(() => setChartLoading(false)); + + // 从 hosts 列表中同步 selected host 的最新指标 + const current = hosts.find((h: any) => h.hostname === selectedHost); + if (current) setLatest(current); + }, [selectedHost, hosts]); + + // Step 3: WebSocket 实时推送 + useEffect(() => { + const token = useUserStore.getState().token; + if (!token) return; + + const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; + const wsUrl = `${protocol}//${window.location.host}/ws/metrics?token=${token}`; + + let cancelled = false; + const connect = () => { + if (cancelled) return; + if (wsRef.current?.readyState === WebSocket.OPEN) return; + + const ws = new WebSocket(wsUrl); + wsRef.current = ws; + + ws.onmessage = (event) => { + try { + const msg = JSON.parse(event.data); + if (msg.type === 'metrics_update' && msg.hostname === selectedHost) { + setLatest((prev: any) => { + if (!prev) return prev; + const netInfo = parseJSON(prev.net_info); + const diskIO = parseJSON(prev.disk_io_info); + return { + ...prev, + cpu_usage: msg.cpu_usage ?? prev.cpu_usage, + mem_usage: msg.memory_usage ?? prev.mem_usage, + disk_info: prev.disk_info, // 保留原有磁盘信息 + net_info: JSON.stringify({ + ...netInfo, + tcp_established: msg.tcp_established ?? netInfo.tcp_established, + tcp_time_wait: msg.tcp_time_wait ?? netInfo.tcp_time_wait, + net_rx_bps: msg.net_rx_bps ?? netInfo.net_rx_bps, + net_tx_bps: msg.net_tx_bps ?? netInfo.net_tx_bps, + }), + disk_io_info: JSON.stringify({ + ...diskIO, + read_bps: msg.disk_read_bps ?? diskIO.read_bps, + write_bps: msg.disk_write_bps ?? diskIO.write_bps, + }), + }; + }); + } + } catch { /* WS 消息解析失败静默 */ } + }; + + ws.onclose = () => { + if (!cancelled) reconnectRef.current = setTimeout(connect, 3000); + }; + }; + + connect(); + return () => { + cancelled = true; + if (reconnectRef.current) clearTimeout(reconnectRef.current); + wsRef.current?.close(); + }; + }, [selectedHost]); + + // 解析最新 JSON 字段 + const netInfo = parseJSON(latest?.net_info); + const diskIOInfo = parseJSON(latest?.disk_io_info); + + // 合并 K 线为图表数据 + const chartData = cpuKlines.map((k: any, i: number) => ({ + time: new Date(k.bucket_time).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }), + cpu: k.avg ?? k.close ?? 0, + mem: memKlines[i]?.avg ?? memKlines[i]?.close ?? 0, + })); + return (
- {/* Overview Cards */} -
- - -
-
- -
-
-

CPU 使用率

-

--

-
-
- - - - -
-
- -
-
-

内存使用率

-

--

-
-
- - - - -
-
- -
-
-

TCP 连接数

-

--

-
-
- - - - -
-
- -
-
-

磁盘 IO

-

--

-
-
- - + {/* 主机选择器 */} +
+ + + {latest && ( + + 最后上报: {timeAgo(latest.report_time)} + + )}
- {/* Detail Sections */} + {/* 概览卡片 */} +
+ } + label="CPU 使用率" + value={latest?.cpu_usage != null ? `${latest.cpu_usage.toFixed(1)}%` : '--'} + color="blue" + /> + } + label="内存使用率" + value={latest?.mem_usage != null ? `${latest.mem_usage.toFixed(1)}%` : '--'} + color="emerald" + detail={latest?.mem_total ? `${(latest.mem_used ?? 0).toFixed(1)} / ${latest.mem_total.toFixed(0)} GB` : undefined} + /> + } + label="TCP 连接数" + value={fmtNum(netInfo.tcp_established)} + color="purple" + detail={netInfo.tcp_time_wait != null ? `TIME_WAIT ${netInfo.tcp_time_wait}` : undefined} + /> + } + label="磁盘 IO" + value={fmtBps((diskIOInfo.read_bps ?? 0) + (diskIOInfo.write_bps ?? 0))} + color="orange" + detail={diskIOInfo.read_iops != null ? `IOPS R${Math.round(diskIOInfo.read_iops)}/W${Math.round(diskIOInfo.write_iops ?? 0)}` : undefined} + /> +
+ + {/* 趋势图 + 网络/磁盘 IO 面板 */}
- {/* CPU/Memory Trends */} + {/* CPU / 内存趋势 */}
-

CPU / 内存 趋势

+

+ CPU / 内存 趋势（5m） +

-
- 趋势图表开发中... +
+ {chartLoading ? ( +
+ +
+ ) : chartData.length === 0 ? ( +
+ {selectedHost ? '暂无 K 线数据 — 请确认 Agent 已上报' : '请先选择主机'} +
+ ) : ( + + + + + + + + + + + + + + + + + + + + + )}
- {/* Network */} + {/* 网络 / 磁盘 IO 速率面板 */}
-

网络流量

+

网络 / 磁盘 IO 实时速率

-
- 网络流量图表开发中... +
+ {/* 网卡 */} +
+
+ 网卡{netInfo.nic_name ? ` (${netInfo.nic_name})` : ''} — RX / TX +
+
+ + +
+
+ {/* 磁盘 IO */} +
+
磁盘 IO — 读 / 写
+
+ + +
+
+ {/* CPU Load */} + {latest && ( +
+
系统负载 (Load Average)
+
+ 1m + {latest.load1 ?? '--'} + 5m + {latest.load5 ?? '--'} + 15m + {latest.load15 ?? '--'} +
+
+ )}
@@ -92,3 +328,49 @@ export function HostMonitor() {
); } + +/** 概览卡片 */ +function MetricCard({ + icon, + label, + value, + color, + detail, +}: { + icon: React.ReactNode; + label: string; + value: string; + color: string; + detail?: string; +}) { + return ( + + +
+
+ {icon} +
+
+

{label}

+

{value}

+ {detail && ( +

{detail}

+ )} +
+
+ + + ); +} + +/** 速率标签 */ +function RateItem({ label, value, color }: { label: string; value: string; color: string }) { + return ( +
+ {label} + {value} +
+ ); +} + +export default HostMonitor; diff --git a/frontend/src/pages/MetricsExplorer.tsx b/frontend/src/pages/MetricsExplorer.tsx new file mode 100644 index 0000000..c1c06ad --- /dev/null +++ b/frontend/src/pages/MetricsExplorer.tsx @@ -0,0 +1,283 @@ +// 指标浏览器 — 按分类/主机浏览所有指标，支持叠加对比 // Logan.Li +import { useState, useEffect, useCallback } from 'react'; +import { Card, CardContent } from '@/components/ui/card'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Activity, Search, Filter, BarChart3, Cpu, HardDrive, Network, Database, Plus } from 'lucide-react'; +import { http } from '@/services/http'; + +interface MetricName { + name: string; + category: string; + data_source: string; +} + +interface TargetInfo { + id: number; + name: string; + type: string; + ip: string; + status: string; + latest_metrics: Record; +} + +interface MetricPoint { + id: number; + target_id: number; + metric_name: string; + value: number; + timestamp: number; +} + +const METRIC_CATEGORIES: Record = { + cpu: { label: 'CPU', icon: }, + memory: { label: '内存', icon: }, + disk: { label: '磁盘', icon: }, + network: { label: '网络', icon: }, + middleware: { label: '中间件', icon: }, + device: { label: '设备', icon: }, +}; + +export function MetricsExplorer() { + const [targets, setTargets] = useState([]); + const [metricNames, setMetricNames] = useState([]); + const [selectedTarget, setSelectedTarget] = useState(''); + const [selectedMetrics, setSelectedMetrics] = useState([]); + const [queryResults, setQueryResults] = useState([]); + const [loading, setLoading] = useState(true); + const [searchKw, setSearchKw] = useState(''); + + // Load targets + const loadTargets = useCallback(async () => { + try { + const res: any = await http.get('/metrics/targets?page_size=200'); + setTargets(res?.list || []); + } catch { /* empty */ } + finally { setLoading(false); } + }, []); + + // Load metric names + const loadMetricNames = useCallback(async () => { + try { + const names: any = await http.get('/metrics/names'); + setMetricNames(names || []); + } catch { /* empty */ } + }, []); + + useEffect(() => { loadTargets(); loadMetricNames(); }, []); + + // Query metric data when target + metrics selected + useEffect(() => { + if (!selectedTarget || selectedMetrics.length === 0) return; + const target = targets.find(t => String(t.id) === selectedTarget); + if (!target) return; + + const to = Math.floor(Date.now() / 1000); + const from = to - 3600; // last hour + + Promise.all( + selectedMetrics.map(mn => + http.get('/metrics/query', { target_id: selectedTarget, metric_name: mn, from: String(from), to: String(to), limit: 200 }) + .then((data: any) => (Array.isArray(data) ? data : [])) + .catch(() => []) + ) + ).then(results => { + setQueryResults(results.flat()); + }); + }, [selectedTarget, selectedMetrics, targets]); + + // Filter metric names by search + const filteredMetrics = searchKw + ? metricNames.filter(n => n.toLowerCase().includes(searchKw.toLowerCase())) + : metricNames; + + // Selected target info + const target = targets.find(t => String(t.id) === selectedTarget); + + // Group metrics by category + const grouped = filteredMetrics.reduce((acc: Record, name) => { + const cat = name.split('_')[0] || 'other'; + if (!acc[cat]) acc[cat] = []; + acc[cat].push(name); + return acc; + }, {}); + + // Merge query results into time-aligned data + const timeMap: Record> = {}; + queryResults.forEach(pt => { + if (!timeMap[pt.timestamp]) timeMap[pt.timestamp] = {}; + timeMap[pt.timestamp][pt.metric_name] = pt.value; + }); + const sortedTimes = Object.keys(timeMap).map(Number).sort((a, b) => a - b); + const maxVal = Math.max(1, ...Object.values(timeMap).flatMap(m => Object.values(m))); + + const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#f97316']; + + return ( +
+ {/* Toolbar */} +
+ + +
+ + setSearchKw(e.target.value)} + /> +
+ +
+ + {!selectedTarget ? ( + + + +

请先选择监控目标，然后勾选要查看的指标

+ + + ) : ( +
+ {/* Metric selector */} + + +
+ +

指标列表

+ {selectedMetrics.length} 已选 +
+
+ {Object.entries(grouped).map(([cat, names]) => ( +
+
+ {METRIC_CATEGORIES[cat]?.icon} + {METRIC_CATEGORIES[cat]?.label || cat} +
+
+ {names.map(name => { + const selected = selectedMetrics.includes(name); + return ( + + ); + })} +
+
+ ))} +
+ + + + {/* Chart area */} + + +
+ +

+ {target?.name || ''} — 最近 1 小时 +

+
+ {selectedMetrics.length === 0 ? ( +
+
+ + 请从左侧勾选指标 +
+
+ ) : sortedTimes.length === 0 ? ( +
+ 暂无数据 +
+ ) : ( +
+ + {/* Grid lines */} + {[0, 25, 50, 75, 100].map(pct => ( + + ))} + {/* Lines per metric */} + {selectedMetrics.map((mn, mi) => { + const points = sortedTimes + .map((t, i) => ({ x: i * 4 + 2, y: 300 - ((timeMap[t][mn] ?? 0) / maxVal) * 260 })) + .filter(p => timeMap[sortedTimes[Math.round((p.x - 2) / 4)]]?.[mn] != null); + if (points.length < 2) return null; + const d = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`).join(' '); + return ( + + + + ); + })} + {/* X axis time labels */} + {sortedTimes.filter((_, i) => i % 15 === 0).map((t, i) => ( + + {new Date(t * 1000).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} + + ))} + +
+ )} + {/* Legend */} + {selectedMetrics.length > 0 && ( +
+ {selectedMetrics.map((mn, mi) => ( +
+ + {mn} +
+ ))} +
+ )} + + +
+ )} + + {/* Target metrics overview */} + {target && Object.keys(target.latest_metrics || {}).length > 0 && ( +
+ {Object.entries(target.latest_metrics).map(([key, val]) => ( +
+

{key}

+

+ {typeof val === 'number' ? val.toFixed(1) : '--'} +

+
+ ))} +
+ )} +
+ ); +} + +export default MetricsExplorer; diff --git a/frontend/src/pages/MiddlewareMonitor.tsx b/frontend/src/pages/MiddlewareMonitor.tsx index f575769..06c292d 100644 --- a/frontend/src/pages/MiddlewareMonitor.tsx +++ b/frontend/src/pages/MiddlewareMonitor.tsx @@ -1,47 +1,301 @@ -// 中间件监控 — Redis / MySQL 指标采集（需配置认证信息） +// 中间件监控 — Redis / MySQL 指标采集（实时 API 数据） +import { useState, useEffect, useCallback } from 'react'; import { Card, CardContent } from '@/components/ui/card'; -import { Database, Server } from 'lucide-react'; +import { Badge } from '@/components/ui/badge'; +import { Database, Server, Activity, Loader2, Circle } from 'lucide-react'; +import { http } from '@/services/http'; + +interface TargetInfo { + id: number; + name: string; + type: string; + ip: string; + status: string; + latest_metrics: Record; +} + +interface TargetsResponse { + list: TargetInfo[]; + total: number; +} + +/** 格式化内存值 (bytes → human readable) */ +function fmtMemory(bytes: number): string { + if (bytes == null || bytes === 0) return '--'; + if (bytes > 1e9) return `${(bytes / 1e9).toFixed(1)} GB`; + if (bytes > 1e6) return `${(bytes / 1e6).toFixed(1)} MB`; + if (bytes > 1e3) return `${(bytes / 1e3).toFixed(1)} KB`; + return `${bytes} B`; +} + +/** 格式化命中率 (0-1 float → %) */ +function fmtHitRate(v: number): string { + if (v == null || Number.isNaN(v)) return '--'; + return `${(v * 100).toFixed(1)}%`; +} + +/** 格式化数值 */ +function fmtVal(v: number, precision = 0): string { + if (v == null || Number.isNaN(v)) return '--'; + return v.toFixed(precision); +} + +/** 状态指示器颜色 */ +function statusColor(status: string): string { + switch (status) { + case 'online': return 'text-emerald-400'; + case 'warning': return 'text-amber-400'; + case 'error': return 'text-red-400'; + default: return 'text-slate-500'; + } +} + +function statusBg(status: string): string { + switch (status) { + case 'online': return 'bg-emerald-400'; + case 'warning': return 'bg-amber-400'; + case 'error': return 'bg-red-400'; + default: return 'bg-slate-500'; + } +} export function MiddlewareMonitor() { + const [targets, setTargets] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(''); + + const loadTargets = useCallback(async () => { + try { + setLoading(true); + setError(''); + const data = await http.get('/metrics/targets', { type: 'middleware', page_size: 200 }); + setTargets(data?.list || []); + } catch (err: any) { + setError(err.message || '加载失败'); + setTargets([]); + } finally { + setLoading(false); + } + }, []); + + useEffect(() => { loadTargets(); }, []); + + // 按类型分组 + const redisTargets = targets.filter(t => t.type === 'redis' || t.name?.toLowerCase().includes('redis')); + const mysqlTargets = targets.filter(t => t.type === 'mysql' || t.name?.toLowerCase().includes('mysql')); + + // 聚合 Redis 指标 (取第一个在线实例) + const redisTarget = redisTargets.find(t => t.status === 'online') || redisTargets[0]; + const redisMetrics = redisTarget?.latest_metrics || {}; + + // 聚合 MySQL 指标 + const mysqlTarget = mysqlTargets.find(t => t.status === 'online') || mysqlTargets[0]; + const mysqlMetrics = mysqlTarget?.latest_metrics || {}; + return (
- {/* Redis */} + {loading && ( +
+ + 正在加载中间件指标... +
+ )} + + {error && !loading && ( + + + +

{error}

+

请确认后端服务可用且已配置中间件采集

+ + + )} + + {!loading && !error && targets.length === 0 && ( + + + +

暂无中间件监控目标

+

需在 Agent 配置 Redis / MySQL 连接信息后启用采集

+ + + )} + + {/* Redis 卡片 */}

Redis 监控

+ {redisTarget && ( + + {redisTarget.name} ({redisTarget.ip}) + + )}
-

需在 Agent 配置 Redis 连接地址和密码后启用采集。

-
- {['连接数', '内存', '命中率', 'QPS'].map((label) => ( -
-

{label}

-

--

-
- ))} -
+ {!redisTarget ? ( +

需在 Agent 配置 Redis 连接地址和密码后启用采集。

+ ) : ( +
+ + + + +
+ )} - {/* MySQL */} + {/* MySQL 卡片 */}

MySQL 监控

+ {mysqlTarget && ( + + {mysqlTarget.name} ({mysqlTarget.ip}) + + )}
-

需在 Agent 配置 MySQL 连接地址、用户名和密码后启用采集。

-
- {['连接数', 'QPS', '慢查询', '缓冲池命中率'].map((label) => ( -
-

{label}

-

--

-
- ))} -
+ {!mysqlTarget ? ( +

需在 Agent 配置 MySQL 连接地址、用户名和密码后启用采集。

+ ) : ( +
+ + + + +
+ )} + + {/* 中间件实例列表 */} + {targets.length > 0 && ( + + +
+ +

+ 中间件实例（{targets.length}） +

+
+
+ {targets.map(target => ( + + ))} +
+ + + )} + + {/* 其他中间件类型的扩展指标 */} + {targets.filter(t => !redisTargets.includes(t) && !mysqlTargets.includes(t)).length > 0 && ( +
+ {targets + .filter(t => !redisTargets.includes(t) && !mysqlTargets.includes(t)) + .map(target => ( + + +
+ +

{target.type}

+ + {target.name} ({target.ip}) + +
+ {Object.keys(target.latest_metrics || {}).length > 0 ? ( +
+ {Object.entries(target.latest_metrics).map(([key, val]) => ( + + ))} +
+ ) : ( +

暂无指标数据

+ )} + + + ))} +
+ )} +
+ ); +} + +/** 指标小方块 */ +function MetricTile({ label, value }: { label: string; value: string }) { + return ( +
+

{label}

+

{value}

+
+ ); +} + +/** 实例状态卡片 */ +function InstanceCard({ target }: { target: TargetInfo }) { + const metrics = target.latest_metrics || {}; + const metricCount = Object.keys(metrics).length; + + return ( +
+
+
+ + {target.name} +
+ + {target.status} + +
+
+ {target.ip} · {target.type} +
+ {metricCount > 0 ? ( +
+ {Object.entries(metrics).slice(0, 4).map(([key, val]) => ( + + {key} + + {typeof val === 'number' ? val.toFixed(1) : val} + + + ))} + {metricCount > 4 && ( + +{metricCount - 4} 项 + )} +
+ ) : ( +

暂无指标

+ )}
); } diff --git a/frontend/src/pages/SNMPMonitor.tsx b/frontend/src/pages/SNMPMonitor.tsx index 42db342..afb85bb 100644 --- a/frontend/src/pages/SNMPMonitor.tsx +++ b/frontend/src/pages/SNMPMonitor.tsx @@ -1,11 +1,160 @@ // SNMP 监控 — 网络设备 / 服务器硬件 (OID 模板采集) +import { useState, useEffect, useCallback } from 'react'; import { Card, CardContent } from '@/components/ui/card'; -import { Radio, Router, HardDrive } from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Badge } from '@/components/ui/badge'; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from '@/components/ui/dialog'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/table'; +import { Radio, Router, HardDrive, Plus, Trash2 } from 'lucide-react'; +import http from '@/services/http'; + +// ---------- types ---------- +interface SnmpStats { + total: number; + online: number; + abnormal: number; +} + +interface SnmpDevice { + id: number; + name: string; + ip: string; + port: number; + snmp_version: string; + community: string; + template_id: number; + status?: string; // "online" | "offline" | "abnormal" +} + +interface DeviceListResponse { + list: SnmpDevice[]; + total: number; +} + +// ---------- initial form state ---------- +const emptyForm = { + name: '', + ip: '', + port: 161, + snmp_version: 'v2c' as 'v2c' | 'v3', + community: 'public', + template_id: '', +}; export function SNMPMonitor() { + // stats + const [stats, setStats] = useState({ total: 0, online: 0, abnormal: 0 }); + + // device list + const [devices, setDevices] = useState([]); + const [loading, setLoading] = useState(true); + + // dialog + const [dialogOpen, setDialogOpen] = useState(false); + const [form, setForm] = useState({ ...emptyForm }); + const [submitting, setSubmitting] = useState(false); + + // ---------- data fetching ---------- + const loadStats = useCallback(async () => { + try { + const data = await http.get('/snmp/stats'); + setStats(data); + } catch { + // backend unavailable — leave defaults + } + }, []); + + const loadDevices = useCallback(async () => { + try { + const data = await http.get('/snmp/devices'); + setDevices(data.list ?? []); + } catch { + setDevices([]); + } finally { + setLoading(false); + } + }, []); + + const refresh = useCallback(() => { + loadStats(); + loadDevices(); + }, [loadStats, loadDevices]); + + useEffect(() => { + refresh(); + }, [refresh]); + + // ---------- CRUD ---------- + const handleAdd = async () => { + if (!form.name.trim() || !form.ip.trim()) return; + setSubmitting(true); + try { + await http.post('/snmp/devices', { + name: form.name.trim(), + ip: form.ip.trim(), + port: Number(form.port), + snmp_version: form.snmp_version, + community: form.community.trim(), + template_id: form.template_id ? Number(form.template_id) : 0, + }); + setDialogOpen(false); + setForm({ ...emptyForm }); + refresh(); + } catch { + // silently fail — user can retry + } finally { + setSubmitting(false); + } + }; + + const handleDelete = async (id: number) => { + try { + await http.delete(`/snmp/devices/${id}`); + refresh(); + } catch { + // silently fail + } + }; + + // ---------- status badge ---------- + const statusBadge = (status?: string) => { + if (status === 'online') { + return 在线; + } + if (status === 'abnormal') { + return 异常; + } + return 离线; + }; + + // ---------- render ---------- return (
- {/* Device Types */} + {/* Stats Cards */}
@@ -16,12 +165,12 @@ export function SNMPMonitor() {

交换机 / 路由器 / 防火墙

- 设备数 - -- + 设备总数 + {stats.total}
在线 - -- + {stats.online}
@@ -35,13 +184,9 @@ export function SNMPMonitor() {

iLO / iDRAC / IPMI

-
- 设备数 - -- -
异常 - -- + {stats.abnormal}
@@ -60,13 +205,224 @@ export function SNMPMonitor() {

{['思科交换机', 'H3C S5000', '华为交换机', 'iLO/Dell'].map((t) => ( -
+
{t}
))}
+ + {/* Device Table */} + + +
+
+ +

+ SNMP 设备列表 + {!loading && ( + + ({devices.length} 台) + + )} +

+
+ + {/* Add Device Dialog */} + + + + + + + 添加 SNMP 设备 + + 输入设备信息以开始 SNMP 监控采集。 + + + +
+ {/* Name */} +
+ + setForm({ ...form, name: e.target.value })} + className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" + /> +
+ + {/* IP */} +
+ + setForm({ ...form, ip: e.target.value })} + className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" + /> +
+ + {/* Port */} +
+ + setForm({ ...form, port: Number(e.target.value) || 161 })} + className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" + /> +
+ + {/* SNMP Version */} +
+ + +
+ + {/* Community */} +
+ + setForm({ ...form, community: e.target.value })} + className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" + /> +
+ + {/* Template ID */} +
+ + setForm({ ...form, template_id: e.target.value })} + className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" + /> +
+
+ + + + + + + +
+ + {/* Table */} + {loading ? ( +
加载中...
+ ) : devices.length === 0 ? ( +
+ 暂无 SNMP 设备，点击「添加设备」开始监控 +
+ ) : ( + + + + 名称 + IP 地址 + 端口 + 版本 + Community + 模板 ID + 状态 + 操作 + + + + {devices.map((d) => ( + + + {d.name} + + + {d.ip} + + {d.port} + + + {d.snmp_version} + + + + {d.community} + + {d.template_id || '--'} + {statusBadge(d.status)} + + + + + ))} + +
+ )} + +
); } diff --git a/frontend/src/pages/SiteMonitor.tsx b/frontend/src/pages/SiteMonitor.tsx index df3363f..1e6ce95 100644 --- a/frontend/src/pages/SiteMonitor.tsx +++ b/frontend/src/pages/SiteMonitor.tsx @@ -1,52 +1,542 @@ -// 站点拨测 — HTTP / PING / DNS / TCP / WebSocket 等协议主动监控 +// 站点拨测 — HTTP / HTTPS / TCP / DNS / PING 主动监控，连接真实后端 API +import { useState, useEffect, useCallback } from 'react'; import { Card, CardContent } from '@/components/ui/card'; -import { Globe, Wifi, Server, Mail, ArrowUpDown } from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { Switch } from '@/components/ui/switch'; +import { Badge } from '@/components/ui/badge'; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from '@/components/ui/dialog'; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/table'; +import { + Globe, + Server, + ArrowUpDown, + Plus, + Trash2, + Loader2, + RefreshCw, + CheckCircle2, + XCircle, + Clock, + Activity, +} from 'lucide-react'; +import { toast } from 'sonner'; +import { siteApi } from '@/services/api'; +import { useConfirm } from '@/components/ui/confirm-dialog'; +// 拨测协议类型（与后端 model 对齐：http, https, tcp, dns, ping） const probeTypes = [ - { icon: Globe, name: 'HTTP(S)', color: 'text-blue-400', desc: 'URL 状态码 & 响应时间' }, - { icon: ArrowUpDown, name: 'PING', color: 'text-emerald-400', desc: 'ICMP 连通性 & 延迟' }, - { icon: Wifi, name: 'WebSocket', color: 'text-purple-400', desc: 'WS/WSS 连接心跳' }, + { icon: Globe, name: 'HTTP', color: 'text-blue-400', desc: 'HTTP URL 状态码 & 响应时间' }, + { icon: Globe, name: 'HTTPS', color: 'text-emerald-400', desc: 'HTTPS SSL 证书 & 响应时间' }, + { icon: Server, name: 'TCP', color: 'text-orange-400', desc: 'TCP 端口连通性检测' }, { icon: Globe, name: 'DNS', color: 'text-cyan-400', desc: '域名解析延迟 & 结果验证' }, - { icon: Server, name: 'TCP', color: 'text-orange-400', desc: '端口连通性检测' }, - { icon: Server, name: 'UDP', color: 'text-yellow-400', desc: '端口连通性检测' }, - { icon: Mail, name: 'SMTP', color: 'text-pink-400', desc: '邮件服务连通性' }, - { icon: Mail, name: 'POP3', color: 'text-indigo-400', desc: '邮件接收服务' }, - { icon: Globe, name: 'FTP', color: 'text-teal-400', desc: '文件传输服务' }, -]; + { icon: ArrowUpDown, name: 'PING', color: 'text-purple-400', desc: 'ICMP 连通性 & 延迟' }, +] as const; + +const PROBE_TYPE_OPTIONS = ['HTTP', 'HTTPS', 'TCP', 'DNS', 'PING'] as const; +type ProbeType = (typeof PROBE_TYPE_OPTIONS)[number]; + +interface SiteStats { + total_tasks: number; + enabled_tasks: number; + up_count: number; + down_count: number; + availability: number; +} + +interface SiteTask { + id: number; + name: string; + url: string; + type: string; + frequency_sec: number; + timeout_sec: number; + expected_status_code: number; + enabled: boolean; + last_status?: string; + last_response_time_ms?: number; + last_checked_at?: string; + created_at: string; + updated_at?: string; +} + +interface CreateTaskForm { + name: string; + url: string; + type: ProbeType; + frequency_sec: number; + timeout_sec: number; + expected_status_code: number; +} + +const emptyForm: CreateTaskForm = { + name: '', + url: '', + type: 'HTTP', + frequency_sec: 60, + timeout_sec: 10, + expected_status_code: 200, +}; + +function statusIcon(status?: string) { + switch (status) { + case 'up': + return ; + case 'down': + return ; + default: + return ; + } +} + +function statusBadge(status?: string) { + switch (status) { + case 'up': + return 正常; + case 'down': + return 异常; + default: + return 未知; + } +} + +function fmtMs(ms?: number): string { + if (ms == null || ms === 0) return '--'; + if (ms < 1000) return `${ms.toFixed(0)}ms`; + return `${(ms / 1000).toFixed(2)}s`; +} + +function fmtTime(iso?: string): string { + if (!iso) return '--'; + const d = new Date(iso); + const pad = (n: number) => String(n).padStart(2, '0'); + return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`; +} export function SiteMonitor() { + const [stats, setStats] = useState(null); + const [tasks, setTasks] = useState([]); + const [initialLoading, setInitialLoading] = useState(true); + const [refreshing, setRefreshing] = useState(false); + const [formOpen, setFormOpen] = useState(false); + const [form, setForm] = useState({ ...emptyForm }); + const [saving, setSaving] = useState(false); + const [selectedType, setSelectedType] = useState(null); + + const _confirm = useConfirm(); + + // ---------- data fetching ---------- + const loadStats = useCallback(async () => { + try { + const data = await siteApi.getStats(); + setStats(data as SiteStats); + } catch { + // 后端不可用时保留空状态 + } + }, []); + + const loadTasks = useCallback(async () => { + setRefreshing(true); + try { + const data = await siteApi.getTasks(); + setTasks((data as any)?.list || []); + } catch { + // 后端不可用时保留空状态 + } finally { + setRefreshing(false); + setInitialLoading(false); + } + }, []); + + useEffect(() => { + loadStats(); + loadTasks(); + }, [loadStats, loadTasks]); + + // ---------- filtered tasks ---------- + const filteredTasks = selectedType + ? tasks.filter((t) => t.type?.toUpperCase() === selectedType.toUpperCase()) + : tasks; + + // ---------- actions ---------- + const openCreate = () => { + setForm({ ...emptyForm }); + setFormOpen(true); + }; + + const handleCreate = async () => { + if (!form.name.trim() || !form.url.trim()) { + toast.error('名称和 URL 不能为空'); + return; + } + setSaving(true); + try { + await siteApi.createTask({ + name: form.name.trim(), + url: form.url.trim(), + type: form.type.toLowerCase(), + frequency_sec: Number(form.frequency_sec) || 60, + timeout_sec: Number(form.timeout_sec) || 10, + expected_status_code: Number(form.expected_status_code) || 200, + }); + toast.success('拨测任务已创建'); + setFormOpen(false); + loadTasks(); + loadStats(); + } catch (e: any) { + toast.error(e.message || '创建失败'); + } finally { + setSaving(false); + } + }; + + const handleDelete = async (task: SiteTask) => { + const ok = await _confirm({ + title: '删除拨测任务', + description: `确定删除「${task.name}」吗？此操作不可恢复。`, + variant: 'destructive', + }); + if (!ok) return; + try { + await siteApi.deleteTask(task.id); + toast.success('任务已删除'); + loadTasks(); + loadStats(); + } catch (e: any) { + toast.error(e.message || '删除失败'); + } + }; + + const handleToggle = async (task: SiteTask) => { + try { + await siteApi.toggleTask(task.id, !task.enabled); + toast.success(task.enabled ? '已停用' : '已启用'); + loadTasks(); + loadStats(); + } catch (e: any) { + toast.error(e.message || '操作失败'); + } + }; + + // ---------- render ---------- + const availStr = + stats?.availability != null ? `${(stats.availability * 100).toFixed(1)}%` : '--'; + + if (initialLoading) { + return ( +
+ +
+ ); + } + return (
- {/* Probe Type Grid */} + {/* ===== Probe Type Grid ===== */}
- {probeTypes.map((p) => ( - - - -

{p.name}

-

{p.desc}

- - - ))} + {probeTypes.map((p) => { + const active = selectedType === p.name; + return ( + setSelectedType(active ? null : p.name)} + className={`bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] transition-colors cursor-pointer ${ + active ? 'border-[var(--dg-blue)]/60 ring-1 ring-[var(--dg-blue)]/30' : 'hover:border-[var(--dg-blue)]/30' + }`} + > + + +

{p.name}

+

{p.desc}

+ + + ); + })}
- {/* Summary */} + {/* ===== Summary Stats ===== */} -
- -

拨测任务概览

+
+
+ +

拨测任务概览

+
+
-
- {['总任务数', '正常', '异常', '可用率'].map((label) => ( -
-

{label}

-

--

+
+ {[ + { label: '总任务数', value: stats?.total_tasks ?? '--' }, + { label: '已启用', value: stats?.enabled_tasks ?? '--' }, + { label: '正常', value: stats?.up_count ?? '--', color: 'text-emerald-400' }, + { label: '异常', value: stats?.down_count ?? '--', color: 'text-red-400' }, + { label: '可用率', value: availStr, color: 'text-blue-400' }, + ].map((item) => ( +
+

{item.label}

+

+ {item.value} +

))}
+ + {/* ===== Task Table ===== */} + + +
+
+ +

+ 拨测任务列表 + {selectedType && ( + setSelectedType(null)} + > + {selectedType} × + + )} +

+
+ +
+ + {filteredTasks.length === 0 ? ( +
+ {tasks.length === 0 + ? '暂无拨测任务，点击「添加任务」创建第一个' + : '当前筛选条件下无任务'} +
+ ) : ( +
+ + + + 名称 + URL + 类型 + 间隔 + 状态 + 延迟 + 上次检测 + 启用 + 操作 + + + + {filteredTasks.map((task) => ( + + + {task.name} + + + {task.url} + + + + {task.type?.toUpperCase()} + + + + {task.frequency_sec}s + + +
+ {statusIcon(task.last_status)} + + {statusBadge(task.last_status)} + +
+ + + {fmtMs(task.last_response_time_ms)} + + + {fmtTime(task.last_checked_at)} + + + handleToggle(task)} + /> + + + + + + ))} + +
+
+ )} + + + + {/* ===== Create Task Dialog ===== */} + + + + 添加拨测任务 + + 配置站点探活任务，系统将按指定频率自动检测 + + + +
+ {/* 名称 */} +
+ + setForm({ ...form, name: e.target.value })} + /> +
+ + {/* URL */} +
+ + setForm({ ...form, url: e.target.value })} + /> +
+ + {/* 类型 */} +
+ + +
+ + {/* 频率 & 超时 */} +
+
+ + + setForm({ ...form, frequency_sec: Number(e.target.value) || 60 }) + } + /> +
+
+ + + setForm({ ...form, timeout_sec: Number(e.target.value) || 10 }) + } + /> +
+
+ + {/* 期望状态码 (仅 HTTP/HTTPS 显示) */} + {(form.type === 'HTTP' || form.type === 'HTTPS') && ( +
+ + + setForm({ ...form, expected_status_code: Number(e.target.value) || 200 }) + } + /> +
+ )} +
+ + + + + + +
); } diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts index d9844f7..c48c55b 100644 --- a/frontend/src/services/api.ts +++ b/frontend/src/services/api.ts @@ -648,6 +648,25 @@ export const alertCenterApi = { }, }; +// ==================== 站点拨测 API ==================== +export const siteApi = { + getStats: async () => { + return http.get('/site/stats'); + }, + getTasks: async () => { + return http.get<{ list: any[]; total: number }>('/site/tasks'); + }, + createTask: async (data: { name: string; url: string; type: string; frequency_sec?: number; timeout_sec?: number; expected_status_code?: number }) => { + return http.post('/site/tasks', data); + }, + deleteTask: async (id: number | string) => { + return http.delete(`/site/tasks/${id}`); + }, + toggleTask: async (id: number | string, enabled: boolean) => { + return http.put(`/site/tasks/${id}`, { enabled }); + }, +}; + // ==================== 链路追踪 API（暂无后端，返回空结果优雅降级） ==================== export const traceApi = { getTraces: async (_params: any) => ({ data: [], total: 0 }),