2. Grafana 架构：前端架构、后端架构、数据源插件机制、面板渲染引擎、报警引擎

Grafana 并非一个单体巨石应用，而是一个由前端、后端、插件系统、渲染引擎和报警引擎组成的模块化架构。理解这一架构是后续进行仪表盘定制、数据源接入以及报警规则调试的基础。本章将从五个核心维度拆解 Grafana 的内部构造。

2.1 整体架构概览

Grafana 采用经典的前后端分离架构，前端负责 UI 交互与面板渲染，后端负责数据代理、认证、持久化与报警调度。数据源插件作为桥梁，连接后端与各类时序数据库。报警引擎则作为独立子系统，周期性评估查询结果并触发通知。

2.2 前端架构

Grafana 前端基于 React 和 TypeScript 构建，采用组件化架构。核心职责包括面板渲染、仪表盘编辑、数据查询构建以及报警规则 UI 配置。

2.3 后端架构

后端使用 Go 语言 编写，基于 Gin 框架提供 RESTful API。后端不直接存储时序数据，而是作为代理层转发查询请求，并负责用户认证、仪表盘 CRUD、报警规则评估与通知分发。

2.4 数据源插件机制

数据源插件是 Grafana 最灵活的扩展点。每个数据源插件实现统一的 DataSourcePlugin 接口，后端通过插件 SDK 加载并执行查询。前端则提供对应的配置页面和查询编辑器。

// 数据源插件核心接口示例（Go）
type DataSourcePlugin interface {
    Query(ctx context.Context, req *DataSourceQueryRequest) (*DataQueryResponse, error)
    TestConnection(ctx context.Context) error
    GetHealth(ctx context.Context) (*HealthCheckResult, error)
}

2.5 面板渲染引擎

面板渲染引擎位于前端，负责将后端返回的时序数据或表格数据转换为可视化图表。Grafana 内置了多种面板类型，每种面板都有独立的渲染逻辑。

• 时序图（Time Series）： 基于 D3.js 和 uPlot，支持多维度曲线、区域填充、阈值线。
• 柱状图（Bar Chart）： 基于 ECharts，适用于分类对比。
• 统计值（Stat）： 显示单个数值，支持颜色阈值和迷你趋势线。
• 表格（Table）： 支持列排序、搜索、单元格格式化。
• 日志（Logs）： 专门用于展示日志流，支持高亮和搜索。

2.6 报警引擎

报警引擎是 Grafana 后端中独立运行的子系统，负责周期性评估报警规则、管理报警状态以及触发通知。从 Grafana 8.0 开始，统一使用 Grafana Alerting（统一报警）体系。

2.7 架构联动调试要点

在后续章节的仪表盘与报警规则联动调试中，需要时刻关注架构各层的交互。以下表格总结了常见问题定位方法：