## 1. 创建Dashboard
# 访问 http://localhost:3000
# 点击 “+” → “Dashboard”
# 点击 “Add new panel”

## 2. 配置面板
# 面板标题：TiDB QPS
# 数据源：Prometheus
# 查询语句：sum(rate(tidb_server_qps{job=”tidb”}[5m])) by(instance)
# 图表类型：Graph
# 轴标签：QPS
# 单位：ops

## 3. 保存Dashboard
# 点击 “Save Dashboard”
# 输入Dashboard名称：TiDB监控
# 点击 “Save”

## 4. 导出Dashboard
# 点击Dashboard右上角的 “Settings”
# 点击 “JSON Model”
# 复制JSON内容
# 保存到文件：tidb-dashboard.json

## 5. 导入Dashboard
# 点击 “+” → “Import”
# 上传tidb-dashboard.json文件
# 点击 “Import”

## 1. 配置变量
# 点击Dashboard右上角的 “Settings”
# 点击 “Variables”
# 点击 “Add variable”
# 变量名称：instance
# 类型：Query
# 数据源：Prometheus
# 查询语句：label_values(tidb_server_qps{job=”tidb”}, instance)
# 点击 “Add”

## 2. 使用变量
# 编辑面板
# 查询语句：sum(rate(tidb_server_qps{job=”tidb”, instance=”$instance”}[5m]))
# 点击 “Apply”

## 3. 配置时间范围
# 点击Dashboard右上角的时间选择器
# 选择时间范围，如 “Last 6 hours”
# 点击 “Apply”

## 4. 配置刷新频率
# 点击Dashboard右上角的刷新按钮
# 选择刷新频率，如 “30s”

## 5. 配置告警
# 编辑面板
# 点击 “Alert”
# 点击 “Create Alert”
# 配置告警规则
# 点击 “Save”

## 1. 初始化面板项目
$ grafana-cli plugins:create my-panel
$ cd my-panel
$ npm install

## 2. 编辑面板代码
$ vi src/module.ts

import { PanelPlugin } from ‘@grafana/data’;
import { MyPanel } from ‘./MyPanel’;
import { MyPanelOptions } from ‘./types’;

export const plugin = new PanelPlugin(MyPanel).setPanelOptions(builder => {
return builder
.addTextInput({
path: ‘text’,
name: ‘Text’,
defaultValue: ‘Hello World’
});
});

## 3. 编辑面板组件
$ vi src/MyPanel.tsx

import React from ‘react’;
import { PanelProps } from ‘@grafana/data’;
import { MyPanelOptions } from ‘./types’;

export const MyPanel: React.FC> = ({ options }) => {
return

;
};

## 4. 构建面板
$ npm run build

## 5. 安装面板
$ grafana-cli plugins:install my-panel
$ systemctl restart grafana-server

## 1. 初始化数据源项目
$ grafana-cli plugins:create my-datasource –type=datasource
$ cd my-datasource
$ npm install

## 2. 编辑数据源代码
$ vi src/module.ts

import { DataSourcePlugin } from ‘@grafana/data’;
import { MyDataSource } from ‘./MyDataSource’;
import { ConfigEditor } from ‘./ConfigEditor’;
import { QueryEditor } from ‘./QueryEditor’;
import { MyDataSourceOptions, MyQuery } from ‘./types’;

export const plugin = new DataSourcePlugin(MyDataSource)
.setConfigEditor(ConfigEditor)
.setQueryEditor(QueryEditor);

## 3. 编辑数据源实现
$ vi src/MyDataSource.ts

import { DataSourceInstanceSettings, DataQueryRequest, DataQueryResponse, DataSourceApi } from ‘@grafana/data’;
import { MyDataSourceOptions, MyQuery } from ‘./types’;

export class MyDataSource extends DataSourceApi {
constructor(instanceSettings: DataSourceInstanceSettings) {
super(instanceSettings);
}

async query(options: DataQueryRequest): Promise {
// 实现查询逻辑
return {
data: []
};
}

async testDatasource() {
// 测试数据源连接
return { status: ‘success’, message: ‘Connection OK’ };
}
}

## 4. 构建数据源
$ npm run build

## 5. 安装数据源
$ grafana-cli plugins:install my-datasource
$ systemctl restart grafana-server

## 1. 手动部署
# 访问 http://localhost:3000
# 点击 “+” → “Import”
# 上传Dashboard JSON文件
# 点击 “Import”

## 2. 自动部署
$ cat > deploy-dashboard.sh << EOF #!/bin/bash # deploy-dashboard.sh # from:www.itpux.com.qq113257174.wx:itpux-com # web: http://www.fgedu.net.cn GRAFANA_URL="http://localhost:3000" API_KEY="your_api_key" DASHBOARD_FILE="tidb-dashboard.json" curl -X POST -H "Authorization: Bearer $API_KEY" \ -H "Content-Type: application/json" \ -d @$DASHBOARD_FILE \ $GRAFANA_URL/api/dashboards/db EOF $ chmod +x deploy-dashboard.sh $ ./deploy-dashboard.sh ## 3. 版本控制 $ git init $ git add tidb-dashboard.json $ git commit -m "Add TiDB dashboard" $ git push origin master ## 4. 持续集成 $ cat > .gitlab-ci.yml << EOF stages: - deploy deploy: stage: deploy script: - curl -X POST -H "Authorization: Bearer $API_KEY" \ -H "Content-Type: application/json" \ -d @tidb-dashboard.json \ http://localhost:3000/api/dashboards/db only: - master EOF

## 1. 本地部署
$ grafana-cli plugins:install my-panel
$ systemctl restart grafana-server

## 2. 容器部署
$ cat > docker-compose.yml << EOF version: '3' services: grafana: image: grafana/grafana:latest ports: - "3000:3000" volumes: - grafana_data:/var/lib/grafana - ./plugins:/var/lib/grafana/plugins environment: - GF_INSTALL_PLUGINS=my-panel EOF $ docker-compose up -d ## 3. 集群部署 $ ansible-playbook -i inventory.ini deploy-grafana-plugins.yml ## 4. 插件管理 $ grafana-cli plugins:list $ grafana-cli plugins:update my-panel $ grafana-cli plugins:remove my-panel

## 案例1：TiDB业务监控Dashboard

### 步骤1：创建Dashboard
# 访问 http://localhost:3000
# 点击 “+” → “Dashboard”
# 点击 “Add new panel”

### 步骤2：配置QPS面板
# 面板标题：TiDB QPS
# 数据源：Prometheus
# 查询语句：sum(rate(tidb_server_qps{job=”tidb”}[5m])) by(instance)
# 图表类型：Graph
# 轴标签：QPS
# 单位：ops

### 步骤3：配置慢查询面板
# 点击 “Add new panel”
# 面板标题：TiDB 慢查询
# 数据源：Prometheus
# 查询语句：sum(rate(tidb_server_slow_query_count{job=”tidb”}[5m])) by(instance)
# 图表类型：Graph
# 轴标签：慢查询数
# 单位：count

### 步骤4：配置连接数面板
# 点击 “Add new panel”
# 面板标题：TiDB 连接数
# 数据源：Prometheus
# 查询语句：sum(tidb_server_connections{job=”tidb”}) by(instance)
# 图表类型：Graph
# 轴标签：连接数
# 单位：count

### 步骤5：配置变量
# 点击Dashboard右上角的 “Settings”
# 点击 “Variables”
# 点击 “Add variable”
# 变量名称：instance
# 类型：Query
# 数据源：Prometheus
# 查询语句：label_values(tidb_server_qps{job=”tidb”}, instance)
# 点击 “Add”

### 步骤6：保存Dashboard
# 点击 “Save Dashboard”
# 输入Dashboard名称：TiDB业务监控
# 点击 “Save”

## 案例2：TiKV存储监控Dashboard

### 步骤1：创建Dashboard
# 访问 http://localhost:3000
# 点击 “+” → “Dashboard”
# 点击 “Add new panel”

### 步骤2：配置磁盘使用率面板
# 面板标题：TiKV 磁盘使用率
# 数据源：Prometheus
# 查询语句：(1 – (node_filesystem_free_bytes{job=”node”, mountpoint=”/tidb/fgdata”} / node_filesystem_size_bytes{job=”node”, mountpoint=”/tidb/fgdata”})) * 100
# 图表类型：Gauge
# 单位：%

### 步骤3：配置I/O使用率面板
# 点击 “Add new panel”
# 面板标题：TiKV I/O使用率
# 数据源：Prometheus
# 查询语句：sum by(instance) (rate(node_disk_io_time_seconds_total{job=”node”, device=~”sd.*|nvme.*”}[5m]))
# 图表类型：Graph
# 轴标签：I/O使用率
# 单位：%

### 步骤4：配置Raft日志差距面板
# 点击 “Add new panel”
# 面板标题：TiKV Raft日志差距
# 数据源：Prometheus
# 查询语句：tikv_raftstore_raft_log_gap{job=”tikv”}
# 图表类型：Graph
# 轴标签：日志差距
# 单位：count

### 步骤5：保存Dashboard
# 点击 “Save Dashboard”
# 输入Dashboard名称：TiKV存储监控
# 点击 “Save”

## 案例1：自定义业务指标面板

### 步骤1：创建面板项目
$ grafana-cli plugins:create business-panel
$ cd business-panel
$ npm install

### 步骤2：编辑面板代码
$ vi src/module.ts

import { PanelPlugin } from ‘@grafana/data’;
import { BusinessPanel } from ‘./BusinessPanel’;
import { BusinessPanelOptions } from ‘./types’;

export const plugin = new PanelPlugin(BusinessPanel).setPanelOptions(builder => {
return builder
.addTextInput({ path: ‘title’, name: ‘Title’, defaultValue: ‘Business Metrics’ })
.addSelect({
path: ‘metric’,
name: ‘Metric’,
options: [
{ label: ‘QPS’, value: ‘qps’ },
{ label: ‘Slow Queries’, value: ‘slow_queries’ },
{ label: ‘Connections’, value: ‘connections’ }
],
defaultValue: ‘qps’
});
});

### 步骤3：编辑面板组件
$ vi src/BusinessPanel.tsx

import React, { useEffect, useState } from ‘react’;
import { PanelProps } from ‘@grafana/data’;
import { BusinessPanelOptions } from ‘./types’;

interface MetricData {
value: number;
time: number;
}

export const BusinessPanel: React.FC> = ({ options, timeRange }) => {
const [data, setData] = useState([]);

useEffect(() => {
// 模拟数据
const mockData: MetricData[] = [];
const now = Date.now();
for (let i = 60; i >= 0; i–) {
mockData.push({
time: now – i * 1000 * 60,
value: Math.random() * 1000
});
}
setData(mockData);
}, [timeRange]);

return (

4.3 集成案例

集成案例：