使用Grafana中按钮插件实现收发HTTP请求

最近项目中需要监控分布式集群的各项指标信息,需要用到Prometheus+Grafana的技术栈实现对分布式集群的各个节点状态进行可视化显示,但是要求前端需要提供一个易用的接口让用户可以触发一些操作,例如负载高时进行负载均衡或弹性伸缩。网上找到的教程大都不是很全面,所以将探索过程记录了一下,对有相同需求的人也是个借鉴。

首先,触发事件我使用了Grafana自带的按钮插件,配合infinity数据源加上项目中自己写的一些API来进行,当然也可以只使用grafana中的iframe图,嵌入到自己写的web框架中,如果只需要简单的收发http请求需求,完全可以使用我下面介绍的方法。

1、按钮控件创建

这里Grafana的基本配置我就不过多赘述了,要使用按钮插件需要保证自己安装了对应的插件,在插件界面进行安装。具体安装过程如下:

确保安装好button控件后来到dashboard中,点击右上方ADD按钮新建一个button控件

如此一来,按钮控件便创建完成了。

上图右侧三个关于按钮的参数,text表示按钮上的文字,datasource代表操作的数据源,query代表按钮按下时触发的命令,我们需要对这三个参数进行配置来达到我们想要的效果,text根据大家需求来写,后续两个部分我们就来解决datasource(也就是对应的api路由)和query(在本项目中需要做到http的get和post请求触发,具体见第三个部分)

2、收发API创建

这个部分大家如果自己项目中有相关的收发API就可以直接跳过了,为了方便一些学习的朋友,这里我简单写了个demo供大家参考,API使用python编写如下:

python 复制代码
from flask import Flask, jsonify, request

app = Flask(__name__)

# 定义一个GET请求的路由
@app.route('/api/test_get', methods=['GET'])
def test_get():
    print("success!")
    return jsonify({'Node_id': '1',
                    'Node_ip': '0.0.0.1',
                    'status' : 'off'},
                    {'Node_id': '2',
                    'Node_ip': '0.0.0.2',
                     'status': 'off'},
                    {'Node_id': '3',
                     'Node_ip': '0.0.0.3',
                     'status': 'off'},
                    {'Node_id': '4',
                     'Node_ip': '0.0.0.4',
                     'status': 'on'}
                    )

# 定义一个POST请求的路由
@app.route('/api/test_post', methods=['POST'])
def test_post():
    data = request.json
    print(request.json)
    return jsonify(data), 200

if __name__ == '__main__':
    app.run(debug=True)

主要使用到了flask包,我简单定义了两个http请求的API,路径分别是localhost/api/test_get和localhost/api/test_post,模拟了两种简单的业务情景get和post,get的api功能是每当触发时返回一个json格式的数据,里面包含了集群种的节点信息;post的api接收一个json格式的数据并直接返回该数据。

3、绑定API与Grafana中的按钮控件

首先,在Grafana中操作的对象是数据源,并且有着比较严格的限制,Grafana为上述的API操作提供了infinity数据源,我们需要先进行创建,创建比较简单,如下图:

起名字直接保存就可以,具体的api路由可以后续进行设置。

创建好数据源后我们回到刚刚创建好的button控件处,选择刚刚创建的button_test数据源

那么最后的步骤便是解决query的问题,因为Grafana中对query的格式要求比较严格,所以这里我使用的方法是使用自带的GUI页面帮我生成query再复制过去,具体步骤如下:

自带的gui方式创建query需要在页面下方同样选择刚刚创建的infinity数据源

创建好后进行相应的配置,因为get和post略有不同,下面分两个部分进行说明和测试

(1)POST请求

具体配置依据API而定,第二部分我写的API中数据格式都是json,所以选择json,解析方式选择后端解析,URL就是我们http请求的路由,第二部分中说到过,是本地的/api/test_post路径下,method选择post。因为post需要发送数据,所以需要以下填充发送数据的过程,这里我们发送一个json格式的{"data","button_test"}

接下来query便被我们以gui形式创建好了,接下来就需要转换为grafana中要求的格式并传给button控件即可。我们点击中间的Query inspector

点击json,找到targets的部分便是对应query的标准json格式

我们把这段json复制到button控件对应的query中并apply即可

下面进行测试的部分,我们首先需要正常运行API,这里我使用pycharm进行运行

打开后点击我们刚刚创建的按钮

可以看到成功发出了post请求。

(2)GET请求

操作步骤与上面类似,get请求一般不和按钮共同使用,为了更直观地展示get到的数据,我们使用table控件,进行如下配置

打开API后刷新页面便可以看到第二部分中我们自己设置返回的那些假数据,grafana会根据json格式自动进行表格的编排,如果有具体要求可以在下图箭头处自行修改

以上就是探索的整个过程,内容中存在的问题劳烦各位批评指正,有任何问题也可以评论讨论。

相关推荐
唐 城12 小时前
curl 放弃对 Hyper Rust HTTP 后端的支持
开发语言·http·rust
张声录114 小时前
【Prometheus】【实战篇(七)】在 Grafana 中配置数据源并使用 Prometheus Node Exporter
grafana·prometheus
总是学不会.17 小时前
第五篇:前后端如何“扯皮”——HTTP 在开发中的应用
java·网络·网络协议·http·开发
火狮18 小时前
鸿蒙Next API 12开发,使用@ohos/axios进行HTTP请求
http·华为·harmonyos
m0_7482382719 小时前
WebClient HTTP 请求问题处理模板(泛型响应、忽略 SSL 证书等)
网络协议·http·ssl
我曾经是个程序员19 小时前
鸿蒙学习记录之http网络请求
服务器·学习·http
-KamMinG21 小时前
Centos7.9安装openldap+phpldapadmin+grafana配置LDAP登录最详细步骤 亲测100%能行
运维·grafana
gywl1 天前
openEuler VM虚拟机操作(期末考试)
linux·服务器·网络·windows·http·centos
某柚啊1 天前
Windows开启IIS后依然出现http error 503.the service is unavailable
windows·http