Grafana自定义仪表盘入门，打造你喜欢的仪表盘

虽然我们在上一篇《Grafana初识，你的第一个仪表盘》已经把一个标准的仪表盘的界面搞出来了，但是特定的仪表盘模板一定符合你的要求吗？你的取值计算方式也和标准的一样吗？不需要调整吗？展示效果也还OK吗？

其实吧，这种东西众口难调，你难免会遇到指标的取值，计算，展示等不符合你的使用场景。那么在这种情况下，我们就需要对数据进行自定义的计算组合等操作，这就需要我们去自定义仪表盘。

Prometheus

开始之前，先来看看我们之前导入的仪表盘(id=1860)的信息。

Load的仪表盘(1860)

id=1860的仪表盘，有一个CPU Basic的Panel。点一下Edit进入到编辑界面。

编辑界面如图所示(未截全的，太大了 )，图中下方Querytab页就是我们定义展示指标算法的地方。其中一条查询语句如下：

sum by(instance) (irate(node_cpu_seconds_total{instance="$node",job="$job", mode="system"}[$__rate_interval])) / on(instance) group_left sum by (instance)((irate(node_cpu_seconds_total{instance="$node",job="$job"}[$__rate_interval])))

这个就是Prometheus专用的查询语言，叫做PromQL.

PromQL

重点部分copy一遍，Grafana支持以时间序列存储数据的相关数据源，每个数据源都有一个特定的查询编辑器，该编辑器针对特定数据源公开的功能进行自定义。

Prometheus作为一个数据源，也有它自己的查询方式，这种方式就是Prometheus特定的查询语言PromQL。具体细节请参考官方网站或者其他资料。这坨我也就不过多赘述了，毕竟这种查询语言啥的，咱也没有那150分语文的功底，各位道友就自己去看吧！

https://prometheus.io/docs/prometheus/latest/querying/basics/

添加Mysql数据源

为了容易理解，我将以Mysql为数据源接入，来进行自定义面板的入门级操作。

首先第一件事就是要添加Mysql数据源。由于已经操作过添加Prometheus为数据源了，所以添加Mysql数据源这个操作就显得非常简单了。

直接在数据源添加页面，选择Mysql，进去输入连接地址，用户名，密码，库名等信息，保存就ok。

正片

自定义面板内容:

从book表中，根据不同的书籍类型，在对应时间段，展示书籍价格，以及剩余数量的折线图

数据初始化

CREATE  TABLE  `book` (
  `id` bigint  unsigned  NOT  NULL AUTO_INCREMENT,
  `name` varchar(100) DEFAULT  NULL  COMMENT  '名称',
  `update_time` timestamp  NOT  NULL  DEFAULT  CURRENT_TIMESTAMP  COMMENT  '时间',
  `price` int  unsigned  DEFAULT  '0'  COMMENT  '价格',
  `rest` int  unsigned  DEFAULT  '0'  COMMENT  '剩余数量',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB;

INSERT  INTO book 
(name, update_time, price, rest) 
VALUES
('java从入门到放弃', '2023-03-21 16:20:00', 2, 100),
('java从入门到放弃', '2023-03-21 16:21:00', 4, 95),
('java从入门到放弃', '2023-03-21 16:22:00', 6, 86),
('java从入门到放弃', '2023-03-21 16:23:00', 9, 76),
('java从入门到放弃', '2023-03-21 16:24:00', 13, 70),
('java从入门到放弃', '2023-03-21 16:25:00', 16, 67),
('java从入门到放弃', '2023-03-21 16:26:00', 18, 62),
('java从入门到放弃', '2023-03-21 16:27:00', 25, 60),
('java从入门到放弃', '2023-03-21 16:28:00', 17, 55),
('java从入门到放弃', '2023-03-21 16:29:00', 12, 50),
('golang从入门到放弃', '2023-03-21 16:20:00', 3, 100),
('golang从入门到放弃', '2023-03-21 16:21:00', 6, 90),
('golang从入门到放弃', '2023-03-21 16:22:00', 7, 80),
('golang从入门到放弃', '2023-03-21 16:23:00', 9, 75),
('golang从入门到放弃', '2023-03-21 16:24:00', 12, 70),
('golang从入门到放弃', '2023-03-21 16:25:00', 13, 67),
('golang从入门到放弃', '2023-03-21 16:26:00', 23, 62),
('golang从入门到放弃', '2023-03-21 16:27:00', 25, 55),
('golang从入门到放弃', '2023-03-21 16:28:00', 17, 40),
('golang从入门到放弃', '2023-03-21 16:29:00', 12, 35);

新建Dashboard/Panel

点击菜单Dashboard-->New dashboard进入到图示右侧的添加面板页。

上图右侧有三个选项

Add a new panel: 添加一个新的面板
Add a new row: 添加一行, 这个添加之后，就可以把相似的一组面板都放到这个row里面，你可以理解成一个分组
Add a panel form panel library: 从面板库创建，这个面板库维护的是我们自己的，不是联网的哦，如果我们把一些面板添加到了我们的面板库，就可以在这里找到

我们点击Add a new panel新建一个面板，然后就可以编辑相关信息了。

主要看图上框出来的两坨，Querytab页是查询编辑器，是用来给面板提供数据的，右边的框是面板属性。Data souse这项，选择我们的Mysql数据源，那么面板就应该是如图那样。数据源的选择，以及面板名等基本属性的设置都简单，重点是我们的数据怎么展示到面板上。

查询编辑器下方有个蓝色的A，这个就是负责数据来源的，重点也是编辑这个玩意儿的。

点击最右边的Code切换到自主sql的模式。现在图中的是Builder模式，这种模式适合简单的sql，没有主动写sql方便。

在sql的输入框输入我们的查询sql，面板需要一个UNIX的时间戳作为横向的坐标轴，并且名称为time,所以需要提供一个名称为time的时间戳。

select  UNIX_TIMESTAMP(update_time) as `time`, price, rest from test.book where  name='java从入门到放弃'

然后点击右边的Run query，就可以预览数据，注意数据的时间和面板的时间选择器的时间，筛到数据才有线。

接下来我们在右边的面板属性，设置好Panel的名字(我这里叫Book Sale)，点击Apply，就会在我们的Dashboard中看到这个已经做好了的panel.(你也可以在这里直接点Save，直接保存Panel和Dashboard)

在这个Dashboard的界面，你还可以添加其他的Panel，等你所有的Panel都准备好了之后，就可以保存Dashboard了。

保存Dashboard

确认Dashboard无误后，ctrl+s(或者在面板编辑页面那个Save也可以)，输入Dashboard名称，选择需要放入的文件夹，然后保存。

保存成功后，在Dashboards主页面，就可以看到我们已经保存的Dashboard,点击对应的Dashboard就可以进入对应的仪表盘。

添加到library

还记得添加Panel的时候有一个从面板库选择不，如果你想把我们刚建的这个Panel添加到面板库,你只需要点击Panel的名称，然后More-->Create libary panel，就可以把这个面板添加到面板库了。

变量

这个图表看起来不是很合理，因为我们的书名是写死了的。我们需要有一个地方给到我们选择书名，通过我们选择的书名，去查询数据来展示折现图。

因此，这个书名，需要作为一个变量，在我们查询sql的时候使用。

那在Dashboard中，这个要求还是可以满足你的。我们打开我们建好的Dashboard。

在右上角时间选择器前面，有一个设置按钮，点击这个按钮进入设置页面。

在设置界面，我们点左边的Variables来进行变量创建。

Name: 变量的名称，后续通过$引用
Label: Label的名称，展示在Dashboard上面的名字
Description: 描述信息
Datasource: 数据来源
Query: 查询变量列表的sql

填写好之后，你可以先点击下方的Run Query 测试一下你的sql是否有问题。确认没问题后，Apply保存一下，然后你就可以在Dashboard上看到这个选择框了，如下所示：

但是这个时候我们的这个选择框还没有用，因为变量还没有被使用。我们打开Panel的编辑页面，更改sql，加入变量。

select  UNIX_TIMESTAMP(update_time) as `time`, price, rest from test.book where  name='$bookName'

保存，回到Dashboard界面，选择框就生效了！

好了，到这里咱就算是已经自定义入门了，至少对于配置面板至少是混个脸熟了，那下一次，咱就去琢磨一下配置面板的那些项都有什么用！

Good Luck…