使用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格式自动进行表格的编排,如果有具体要求可以在下图箭头处自行修改

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

相关推荐
野生技术架构师1 天前
原来可以搭建一个HTTP服务
网络·网络协议·http
TOPGUS1 天前
谷歌Chrome浏览器即将对HTTP网站设卡:突出展示“始终使用安全连接”功能
前端·网络·chrome·http·搜索引擎·seo·数字营销
Wadli1 天前
项目5 |HTTP服务框架
网络·网络协议·http
CCPC不拿奖不改名1 天前
网络与API:HTTP基础+面试习题
网络·python·网络协议·学习·http·面试·职场和发展
心之伊始1 天前
HTTP 与 HTTPS 协议深度剖析:从基础原理到现代演进与实践
网络协议·http·https
哟哟耶耶1 天前
随笔小计-前端经常接触的http响应头(跨域CORS,性能-缓存-安全,token)
前端·网络协议·http
goodlook01232 天前
监控平台搭建-日志-alloy篇(八)
grafana·prometheus
Jinuss2 天前
HTML页面http-equiv=“refresh“自动刷新原理详解
http·html
Yan-英杰2 天前
BoostKit OmniAdaptor 源码深度解析
网络·人工智能·网络协议·tcp/ip·http
goodlook01232 天前
监控平台搭建-日志-springboot直接推送loki篇(九)
java·spring boot·后端·grafana