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

骑猪看日落 2022-08-21 05:50 145阅读 0赞

以监控内存使用率为例，写的一个简单demo性程序，

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

代码下载：[https://github.com/pushiqiang/dynamic\_refresh\_highcharts.git][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/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 就可以看到的监控数据了：效果图如下

![Center][]

![Center 1][]

highcharts支持按时间拖动，也支持按指定时间段查看。并且查看到的图片可以直接保存为png、jpg或pdf、csv等格式查看。

[http_ju.outofmemory.cn_entry_126800]: http://ju.outofmemory.cn/entry/126800
[https_github.com_pushiqiang_dynamic_refresh_highcharts.git]: https://github.com/pushiqiang/dynamic_refresh_highcharts.git
[Center]: /images/20220731/b60b0879b72c4d60bbdf45964c9e8d65.png
[Center 1]: /images/20220731/0f0f42e74eda42d39c5b4413e21ff178.png