有幾個朋友一直問我，頁面的實時監控咋做。
他們在做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实现实时监控平台的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
