有几个朋友一直问我,页面的实时监控咋做。

他们在做idc节点的监控,我推荐用smokeping和zabbix接口的方式测试。但那哥们挺执着的,非要好看点的图表~

关于运维业务的实时监控,我做过两套方案:

第一种是用websocket的方式,这个时效性最强,也最快最及时。第二套用的是节点自己插入数据库,或者是通过接口插入到数据库,然后页面通过刷新来取出数据库里面的值,来渲染页面。。。。

这两个都有点开发比较麻烦,维护也麻烦。。。正好我这段时间在搞saltstack,一直想利用mq的速度来做小型的监控方案。。。

下面的小例子,就可以实现。。。。

我们先用cmd.run实现下,再用grains采集信息。。。

先放出一个小demo~

原文地址:http://rfyiamcool.blog.51cto.com/1030776/1266437

很简单的实现过程

1.  通过saltstack modules 和grains 收集信息

2.  然后放到页面中

今天找个时间写出来.

安装flask  然后直接跑就行了~

先简单写了个点击刷新信息页面~

这里缺一个bootstrap的css  需要大家自己引入。。。

放到同一个目录下就行啦~

#!/usr/bin/env python
#coding=utf-8from flask import Flask,url_for,request,render_template,redirect,abort,escape,session
from werkzeug import secure_filename
import osprint __name__
app = Flask(__name__)
app.secret_key = 'hello'@app.route('/')
def index():p=os.popen('salt \'*\' grains.item psnum netnum').read()p=os.popen('salt \* cmd.run \'netstat -an|wc -l\'').read()return '''
<!DOCTYPE html>
<!-- saved from url=(0053)http://www.bootcss.com/examples/marketing-narrow.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><title>xiaorui.cc</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><!-- Le styles --><link href="bootstrap.min.css" rel="stylesheet"><style type="text/css">body {padding-top: 20px;padding-bottom: 40px;}/* Custom container */.container-narrow {margin: 0 auto;max-width: 700px;}.container-narrow > hr {margin: 30px 0;}/* Main marketing message and sign up button */.jumbotron {margin: 60px 0;text-align: center;}.jumbotron h1 {font-size: 72px;line-height: 1;}.jumbotron .btn {font-size: 21px;padding: 14px 24px;}/* Supporting marketing content */.marketing {margin: 60px 0;}.marketing p + h4 {margin-top: 28px;}</style><link href="http://cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet"><!-- HTML5 shim, for IE6-8 support of HTML5 elements --><!--[if lt IE 9]><script src="//cdnjs.bootcss.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script><![endif]--><!-- Fav and touch icons --><link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.bootcss.com/assets/ico/apple-touch-icon-144-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.bootcss.com/assets/ico/apple-touch-icon-114-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.bootcss.com/assets/ico/apple-touch-icon-72-precomposed.png"><link rel="apple-touch-icon-precomposed" href="http://www.bootcss.com/assets/ico/apple-touch-icon-57-precomposed.png"><link rel="shortcut icon" href="http://www.bootcss.com/assets/ico/favicon.png"><script>window["_GOOG_TRANS_EXT_VER"] = "1";</script></head><body><div class="container-narrow"><div class="masthead"><ul class="nav nav-pills pull-right"><li class="active"><a href="http://www.bootcss.com/examples/marketing-narrow.html#">Home</a></li><li><a href="http://www.bootcss.com/examples/marketing-narrow.html#">命令推送</a></li><li><a href="http://www.bootcss.com/examples/marketing-narrow.html#">图标监控</a></li></ul><h3 class="muted">实时监控</h3></div><hr><div class="jumbotron"><pre>%s</pre><a class="btn btn-large btn-success" href="http://10.10.10.66:8888">刷新</a></div><hr><hr><div class="footer"><h4>by xiaorui.cc</h4></div></div> <!-- /container --><!-- Le javascript================================================== --><!-- Placed at the end of the document so the pages load faster --></body></html>
'''%p@app.route('/user/<username>')
def show_username(username):return username@app.route('/post/<int:post_id>')
def show_post(post_id):return 'post_id:%d' % post_id@app.route('/index/')
def test_session():if 'username' in session:return 'logged in as %s' % escape(session['username'])return redirect(url_for('login'))@app.route('/login/',methods=['GET','POST'])
def login():if request.method == 'POST':session['username'] = request.form['username']return redirect(url_for('test_session'))else:return
'''<form action="/login/" method="post"><input type=text name=username><input type=submit value=login></form>'''
@app.route('/setcookie')
def set_cookie():if 'num' in request.cookies:count = int(request.cookies['num']) + 1else:count = 0response = app.make_response(str(count))response.set_cookie('num',value=count,max_age=None,expires=None,domain=None)return response
if __name__ == "__main__":app.run(host="10.10.10.66",port=8888,debug=True)

xiaorui.cc

花了半小时把图表展现给更新出来,这个只是简单的demo。

让大家体验下 数据填充图表的做法。

后端数据都是静态的,下次再写个动态的渲染。

关于这些业务数据,大家可以把执行结果往库里仍,然后从库里拉出来。可以用saltstack的returners把数据搞到mysql或者mongodb。

或者是放一个全局的变量,把数据往list的最后面放,满12个数值话,开始清除第一个,然后把数据往后放。。。。

或者是把saltstack的执行结果放到文本里面,两个列  一个是时间轴 一个是数据轴。然后搞出来,渲染到前端。

总之,能搞出规律的x轴和y轴就行啦。。。

#!/usr/bin/env python
#coding=utf-8
#xiaorui.cc
from flask import Flask,url_for,request,render_template,redirect,abort,escape,session
from werkzeug import secure_filename
import osprint __name__
app = Flask(__name__)
app.secret_key = 'hello'@app.route('/')
def index():p=os.popen('salt \'*\' grains.item psnum netnum').read()p=os.popen('salt \* cmd.run \'netstat -an|wc -l\'').read()return '''
<!DOCTYPE html>
<!-- saved from url=(0053)http://www.bootcss.com/examples/marketing-narrow.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><title>xiaorui.cc</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><!-- Le styles --><link href="http://cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet"><style type="text/css">body {padding-top: 20px;padding-bottom: 40px;}/* Custom container */.container-narrow {margin: 0 auto;max-width: 700px;}.container-narrow > hr {margin: 30px 0;}/* Main marketing message and sign up button */.jumbotron {margin: 60px 0;text-align: center;}.jumbotron h1 {font-size: 72px;line-height: 1;}.jumbotron .btn {font-size: 21px;padding: 14px 24px;}/* Supporting marketing content */.marketing {margin: 60px 0;}.marketing p + h4 {margin-top: 28px;}</style><link href="http://cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet"><!-- HTML5 shim, for IE6-8 support of HTML5 elements --><!--[if lt IE 9]><script src="//cdnjs.bootcss.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script><![endif]--><!-- Fav and touch icons --><link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.bootcss.com/assets/ico/apple-touch-icon-144-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.bootcss.com/assets/ico/apple-touch-icon-114-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.bootcss.com/assets/ico/apple-touch-icon-72-precomposed.png"><link rel="apple-touch-icon-precomposed" href="http://www.bootcss.com/assets/ico/apple-touch-icon-57-precomposed.png"><link rel="shortcut icon" href="http://www.bootcss.com/assets/ico/favicon.png"><script>window["_GOOG_TRANS_EXT_VER"] = "1";</script></head><body><div class="container-narrow"><div class="masthead"><ul class="nav nav-pills pull-right"><li class="active"><a href="http://www.bootcss.com/examples/marketing-narrow.html#">Home</a></li><li><a href="http://www.bootcss.com/examples/marketing-narrow.html#">命令推送</a></li><li><a href="http://www.bootcss.com/examples/marketing-narrow.html#">图标监控</a></li></ul><h3 class="muted">实时监控</h3></div><hr><div class="jumbotron"><pre>%s</pre><a class="btn btn-large btn-success" href="http://10.10.10.66:8888">刷新</a></div><hr><hr><div class="footer"><h4>by xiaorui.cc</h4></div></div> <!-- /container --><!-- Le javascript================================================== --><!-- Placed at the end of the document so the pages load faster --></body></html>
'''%p@app.route('/charts.html')
def show_username():p=[1,2,3,4,5,6,7,8,9,1,2,3]return '''
<!DOCTYPE html>
<!-- saved from url=(0053)http://www.bootcss.com/examples/marketing-narrow.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><title>xiaorui.cc</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><link href="http://67.xiaorui.cc/bootstrap.min.css" rel="stylesheet"><script type="text/javascript"  src="http://code.jquery.com/jquery-1.4.1.min.js"></script><script  type="text/javascript" src="http://67.xiaorui.cc/highcharts.js"></script><script  type="text/javascript" src="http://67.xiaorui.cc/exporting.js"></script><style type="text/css">body {padding-top: 20px;padding-bottom: 40px;}/* Custom container */.container-narrow {margin: 0 auto;max-width: 700px;}.container-narrow > hr {margin: 30px 0;}/* Main marketing message and sign up button */.jumbotron {margin: 60px 0;text-align: center;}.jumbotron h1 {font-size: 72px;line-height: 1;}.jumbotron .btn {font-size: 21px;padding: 14px 24px;}/* Supporting marketing content */.marketing {margin: 60px 0;}.marketing p + h4 {margin-top: 28px;}</style>
<script type="text/javascript">var chart;$(document).ready(function() {chart = new Highcharts.Chart({chart: {renderTo: 'container',defaultSeriesType: 'line',marginRight: 130,marginBottom: 25},title: {text: 'netstat 监控',x: -20 //center},subtitle: {text: '让我们看看连接书哈',x: -20},xAxis: {categories: ['1', '2', '3', '4', '5', '6','7', '8', '9', '10', '11', '12']},yAxis: {title: {text: '连接数'},plotLines: [{value: 0,width: 1,color: '#808080'}]},tooltip: {formatter: function() {return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +'°C';},},legend: {layout: 'vertical',align: 'right',verticalAlign: 'top',x: -10,y: 100,borderWidth: 0},series: [{name: '66.ruifengyun.cc',data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]}, {name: '67.ruifengyun.cc',data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]}, {name: 'ceshi',data: %s}]});});</script><!-- Fav and touch icons --><link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.bootcss.com/assets/ico/apple-touch-icon-144-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.bootcss.com/assets/ico/apple-touch-icon-114-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.bootcss.com/assets/ico/apple-touch-icon-72-precomposed.png"><link rel="apple-touch-icon-precomposed" href="http://www.bootcss.com/assets/ico/apple-touch-icon-57-precomposed.png"><link rel="shortcut icon" href="http://www.bootcss.com/assets/ico/favicon.png"><script>window["_GOOG_TRANS_EXT_VER"] = "1";</script></head><body><div class="container-narrow"><div class="masthead"><ul class="nav nav-pills pull-right"><li><a href="http://66.xiaorui.cc:8888">Home</a></li><li><a href="http://66.xiaorui.cc:8888/pushcmd">命令推送</a></li><li class="active"><a href="http://66.xiaorui.cc:8888/charts.html#">图表监控</a></li></ul><h3 class="muted">图表监控</h3></div><hr><div class="jumbotron"><div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div><a class="btn btn-large btn-success" href="http://10.10.10.66:8888">刷新</a></div><hr><hr><div class="footer"><h4>by xiaorui.cc</h4></div></div> <!-- /container --><!-- Le javascript================================================== --><!-- Placed at the end of the document so the pages load faster --></body></html>
'''%p@app.route('/post/<int:post_id>')
def show_post(post_id):return 'post_id:%d' % post_id@app.route('/index/')
def test_session():if 'username' in session:return 'logged in as %s' % escape(session['username'])return redirect(url_for('login'))@app.route('/login/',methods=['GET','POST'])
def login():if request.method == 'POST':session['username'] = request.form['username']return redirect(url_for('test_session'))else:return
'''<form action="/login/" method="post"><input type=text name=username><input type=submit value=login></form>'''
if __name__ == "__main__":app.run(host="10.10.10.66",port=8888,debug=True)

还有一种展现方式,就是油表

这个数据很方面的传到页面上去的。

通过后端改变value的值就行啦~

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.knob.js"></script>
<input type="text" class="dial" data-min="-40" data-max="70">
要是不显示的话,再加上这段语句
$(".dial").knob({
'min':-40
,'max':70
})

这里说下 saltstack  grains 的采集~ 例子如下

我要可以取出 name和lang的值。    [xiaorui.cc]

采集全部信息

salt '*' grains.items

我们通过items查看 很多的系统信息。

原文地址:http://rfyiamcool.blog.51cto.com/1030776/1266437

实时采集的话,就要取消master对grains的缓存

更新数据缓存,结果

貌似刷新有点问题~   应该是他的一个bug吧~

经过 saltstack 专业人士  大牛  大神 帅锅 沈灿 的一段时间折腾得知,grains信息是每次客户端启动后 就确定了的   除非你每次采集钱都 重启 minion 或者 重新同步下 grains。

原文地址:http://rfyiamcool.blog.51cto.com/1030776/1266437

页面上又增加了几个功能,其实睡觉前写完了,但是有些bug

等都调试好了后,在给大家贴下实现代码。

多选控件                          【xiaorui.cc】

模块上传

编辑各种              【xiaorui.cc】

连载中~

找个时间更新下~

用Saltstack的modules和grains实现实时监控平台相关推荐

  1. linux 系统 可视化工具实时监控_Linux上的实时监控平台-你需要这样做

    应朋友们要求,介绍上Linux系统下的实时监控平台,在上次提到了glances,它提供了较多的监控指标,那如果我们要看历史数据呢?某一时间段的回放呢?显然glances是做不到的.因此,实时监控平台就 ...

  2. 大数据实战项目------中国移动运营分析实时监控平台 || 项目背景

    中国移动运营分析实时监控平台 项目背景 中国移动公司旗下拥有很多的子机构,基本可以按照省份划分. 而各省份旗下的充值机构也非常的多. 目前要想获取整个平台的充值情况,需要先以省为单元,进行省份旗下的机 ...

  3. 基于PHP爬虫的微博热搜实时监控平台

    基于PHP爬虫的微博热搜实时监控平台 背景 一.整体思路 二.数据爬取 1.获取HTML 2.提取数据 3.返回数据 三.数据可视化 1.画柱状图 2.ajax请求数据 四.效果展示 写在最后 背景 ...

  4. 数据分享——EPS数据库-新冠肺炎疫情实时监控平台

    原文链接:https://www.lianxh.cn/news/af018044fad9e.html 与 EPS 数据库沟通后,与大家一起分享最新的舆情监控数据. 疫情数据,牵动人心!数据是我们在疫情 ...

  5. 大数据实战项目------中国移动运营分析实时监控平台 || 项目需求实现(文章最后有数据文件)

    1.业务概况(显示总订单量.订单成功量.总金额.花费时间) 2.业务详细概述(每小时的充值订单量.每小时的充值成功订单量) 3.业务质量(每个省份的充值成功订单量) 4.实时统计每分钟的充值金额和订单 ...

  6. (一)性能实时监控平台搭建(Grafana+Influxdb+Jmeter)

    前言 主要介绍使用Docker安装Grafana+Influxdb结合Jmeter搭建可视化监控平台 正文 使用Docker搭建influxdb数据库服务 创建influxdb容器 命令:docker ...

  7. Netdata---Linux系统性能实时监控平台部署记录

    通常来说,作为一个Linux的SA,很有必要掌握一个专门的系统监控工具,以便能随时了解系统资源的占用情况.下面就介绍下一款Linux性能实时监测工具-Netdata,它是Linux系统实时性能监测工具 ...

  8. (转!)Netdata---Linux系统性能实时监控平台部署

    我一直以为人是慢慢变老的,其实不是,人其实是一瞬间变老的. -------村上春树<舞!舞!舞!> 转自https://www.cnblogs.com/kevingrace/p/73001 ...

  9. java实时监控数据变化_服务数据实时监控平台

    1.前言:         之前做性能测试,使用jmeter线程回环的方式并发压力,说起来jmeter原生报告"太丑了.太丑了.太丑了.........". 前两天看到" ...

最新文章

  1. 多个线程为了同个资源打起架来了,该如何让他们安分?
  2. 【NIO】异步模型之Callback -- 封装NIO
  3. ThinkPHP第二十三天(Category表结构、PHPExcel导入数据函数)
  4. 为模型推断的端部的大小
  5. 前沿分享|阿里云数据库资深技术专家 姚奕玮:AnalyticDB MySQL离在线一体化技术揭秘
  6. MySQL 19个规则数据库设计总结
  7. 【bfs】极其简单的最短路问题
  8. js判断对象数组中是否存在某个对象
  9. 「长文」2022年企业数字化转型的八大趋势
  10. 【noi】植物大战僵尸
  11. 微信模板消息400001:invalid credential, access_token is invalid or not latest
  12. 计算机一级考试模拟软件安装方法,计算机一级考试软件怎么使用_计算机一级考试软件安装使用教程...
  13. LPC1788 nand驱动
  14. 利用HTML完成登陆界面设计
  15. 错觉图片生成实验 - 闪现的绿点
  16. 缺少netcfg.hlp无法上网的解决
  17. otl c mysql_OTL
  18. 电脑右下角搜狗拼音输入法图标如何隐藏
  19. ASP.NET 在vs中使用Calendar控件 制作一个日历 并标注节假日
  20. 超超超详细-实现一个简单的基于 React Fiber 的 React

热门文章

  1. 手机python3_python3 简单手机验证码的实现
  2. ibm服务器虚拟化报价,IBM x86 服务器虚拟化服务.pdf
  3. php 仓储 sqlite_详解php封装db类连接sqlite3
  4. linux到不了启动界面,Linux 界面不能启动的解决
  5. 实战小课 | 深入剖析 「事件设计方法与规范」,夯实数据分析基础!
  6. 盘它:1200 天积淀,超 750 篇干货,为你甄选这 100 + 篇精华!
  7. list.h在用户态下的应用
  8. zabbix-web前端配置
  9. HDU 5612 Baby Ming and Matrix games
  10. springMVC 前后台日期格式传值解决方式之一(共二) @DateTimeFormat的使用和配置...