您的位置：首页 > 数据库 > SQL

flask + mysql + highcharts(动态刷新)实现的简单监控系统

2016-03-17 21:41 881 查看
以监控内存使用率为例，写的一个简单demo性程序，

仿照http://ju.outofmemory.cn/entry/126800实现，并加入动态刷新的代码，能实时监测更新，动态显示。

代码下载：https://github.com/pushiqiang/dynamic_refresh_highcharts.git


一、建库建表

创建falcon数据库：
mysql> create database falcon character set utf8;
Query OK, 1 row affected (0.00 sec)


创建内存监控使用的表stat，表结构如下：
CREATE TABLE `stat` (
`id` int(11) unsigned NOT NULL AUTO_INCREMENT,
`host` varchar(256) DEFAULT NULL,
`mem_free` int(11) DEFAULT NULL,
`mem_usage` int(11) DEFAULT NULL,
`mem_total` int(11) DEFAULT NULL,
`load_avg` varchar(128) DEFAULT NULL,
`time` bigint(11) DEFAULT NULL,
PRIMARY KEY (`id`),
KEY `host` (`host`(255))
) ENGINE=InnoDB AUTO_INCREMENT=0 DEFAULT CHARSET=utf8;


二、flask web端设置

首先我们设计一个web服务，实现如下功能：

完成监控页面展示
监控程序monitor.py通过post提交数据到web后台存入数据库。
前台highcharts通过json接口不断到后台取最新的一条数据加入显示。

目录结构如下：
web
├── flask_web.py
└── templates
└── mon.html


flask_web代码如下：
__author__ = 'pushiqiang'
import MySQLdb as mysql
import json
from flask import Flask,request,render_template
app = Flask(__name__)

db = mysql.connect(user='root',passwd='123',db='falcon',charset='utf8')
db.autocommit(True)

c = db.cursor()

@app.route('/',methods=['GET','POST'])
def hello():
sql = ''
if request.method == 'POST':
data = request.json
try:
sql = "insert into stat(host,mem_free,mem_usage,mem_total,load_avg,time) values ('%s',%d,%d,%d,'%s',%d)" % (data['Host'],data['MemFree'],data['MemUsage'],data['MemTotal'],data['LoadAvg'],int(data['Time']))
ret = c.execute(sql)
except mysql.IntegrityError:
pass
return 'OK'
else:
c.execute('select time,mem_usage from stat')
ones = [[i[0]*1000,i[1]] for i in c.fetchall()]
print ones
return render_template('mon.html',data=json.dumps(ones))

@app.route('/new',methods=['GET'])
def getnew():
c.execute('select time,mem_usage from stat order by id desc limit 1')
v = c.fetchone()
top = [v[0]*1000,v[1]]
print top
return json.dumps(top)

app.run(port=8888,debug=True)


这里使用的汇图JS为highcharts、highstock ，具体模板页面内容如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/highstock/highstock.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<!--<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/funnel.js"></script>-->
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

<script type="text/javascript">

var data={{data}};

//创建图表
var chart;
$(document).ready(function() {
Highcharts.setOptions({
global:{
useUTC:false
}
})

chart = new Highcharts.StockChart( {
chart : {
renderTo : 'container',
events : {
load : st// 定时器
}
},
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
exporting:{
enabled:true
},
title : {
text : '内存使用情况'
},
series : [ {
name: '内存使用情况',
data : data,
type: 'spline',
}]
});

});

//2秒钟刷新一次数据
function st() {
setInterval("getData()", 1000);
}

//动态更新图表数据
function getData() {

$.ajax({
type: "get",
url: "/new",
dataType: "json",
success : function(data){
chart.series[0].addPoint(data,true,true);

}
});
}

</script>
</head>
<body>

<div id="container" ></div>
</body>
</html>


注：这里的JS代码都直接使用互联网上的代码，如果主机无法连接互联网的，可以将上面的三段代取取下来，在templates 的同级目录创建static 目录，将下载下来的三个文件放到该目录，删除模板中三处引用javascript处的代码，使用当前注释的三段。


三、agent被监控端设置

web展示页面完成了，运行起来：python flask_web.py 监听在8888端口上。我们需要做一个monitor.py来采集数据，并通过post方法请求flask_web页面，将数据上传写入数据库。这里以监控内存为例，具体监控代码如下：
#!/usr/bin/env python
#coding=utf-8
import inspect
import time
import urllib, urllib2
import json
import socket
class mon:
def __init__(self):
self.data = {}
def getTime(self):
return str(int(time.time()) + 8 * 3600)
def getHost(self):
return socket.gethostname()
def getLoadAvg(self):
with open('/proc/loadavg') as load_open:
a = load_open.read().split()[:3]
return ','.join(a)
def getMemTotal(self):
with open('/proc/meminfo') as mem_open:
a = int(mem_open.readline().split()[1])
return a / 1024
def getMemUsage(self, noBufferCache=True):
if noBufferCache:
with open('/proc/meminfo') as mem_open:
T = int(mem_open.readline().split()[1])
F = int(mem_open.readline().split()[1])
B = int(mem_open.readline().split()[1])
C = int(mem_open.readline().split()[1])
return (T-F-B-C)/1024
else:
with open('/proc/meminfo') as mem_open:
a = int(mem_open.readline().split()[1]) - int(mem_open.readline().split()[1])
return a / 1024
def getMemFree(self, noBufferCache=True):
if noBufferCache:
with open('/proc/meminfo') as mem_open:
T = int(mem_open.readline().split()[1])
F = int(mem_open.readline().split()[1])
B = int(mem_open.readline().split()[1])
C = int(mem_open.readline().split()[1])
return (F+B+C)/1024
else:
with open('/proc/meminfo') as mem_open:
mem_open.readline()
a = int(mem_open.readline().split()[1])
return a / 1024
def runAllGet(self):
#自动获取mon类里的所有getXXX方法，用XXX作为key，getXXX()的返回值作为value，构造字典
for fun in inspect.getmembers(self, predicate=inspect.ismethod):
if fun[0][:3] == 'get':
self.data[fun[0][3:]] = fun[1]()
return self.data
if __name__ == "__main__":
while True:
m = mon()
data = m.runAllGet()
print data
req = urllib2.Request("http://test.361way.com:8888", json.dumps(data), {'Content-Type': 'application/json'})
f = urllib2.urlopen(req)
response = f.read()
print response
f.close()
time.sleep(1)


monitor.py在被监控主机上运行，time.sleep(1)设置每1秒就会取一次数据写入数据库。此处可以直接写人数据库，不通过flask后台post接口。

访问 http://localhost:8888 就可以看到的监控数据了：效果图如下





highcharts支持按时间拖动，也支持按指定时间段查看。并且查看到的图片可以直接保存为png、jpg或pdf、csv等格式查看。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航