Zabbix与RRDtool绘图篇(6)_最终图形展示

最终的图形展示是这样规划的,选择分类和主机后默认展示的是1天时间的图形,点击默认的某张图形后再重新展示该监控项1天、1周、1月、1年的图形,参考的cacti。

默认图形的展已经在第5篇的视图函数中完成了(pngs就是传递给模板的png图片路径)模板完成渲染后就可以显示了。

模板的代码很简洁没有太多的修饰,够用就好:

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <title>{{ privatetitle }}</title>
    <link rel="icon" href="{{ STATIC_URL }}/favicon.ico" type="image/x-icon"/>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="{{ STATIC_URL }}/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}/css/bootstrap-theme.min.css">
    {% block othercss %}{% endblock %}
    <script src="{{ STATIC_URL }}/js/jquery.min.js"></script>
    <script src="{{ STATIC_URL }}/js/bootstrap.min.js"></script>
    {% block otherjs %}{% endblock %}
</head>
<body>
<div class="container">
	<div class="col-md-9">
		{{value}}
	</div>
	{% for png in pngs  %}
	<p>
	<a href="/graph/drawall/?graphid={{ png.graphid }}">
		<img src="{{ png.pngpath }}" class="img-responsive" alt="Responsive image">
	</a>
	</p>
	{% endfor %}
</div>
</body>

其中为每张默认展示的图片附加了一个url,功能是点击该图片时,显示该图片1天、1周、1月、1年的监控数据的图形的。

默认一天的显示效果如下(与cacti的一样,毕竟都是用rrdtool整的):

硬盘IO图

rrdtooldraw03

网络流量图

rrdtooldraw04

内存堆栈图(默认的进制是1000,可以在绘图的时候指定为1024)

rrdtooldraw06

CPU负载图

rrdtooldraw05

通过默认图片的附加的GET请求,绘出该图片1天、1星期、1月、1年的监控数据图形:

点击图片时产生的GET请求

rrdtooldraw08

处理该请求的视图函数如下:

def drawall(request):
	gdatas = []
	pngs = []
	dir = r"/opt/rrd/"
	graphid = request.GET['graphid']
	sql = "select hostid, graphname, hostname from zabbixapp_drawtree where graphid="+graphid
	graph = DrawTree.objects.getclass(sql)
	hostid = graph[0][0]
	graphname = graph[0][1]
	hostname = graph[0][2]
	rpath = dir + hostid + r"/" + graphid + r".rrd"
	pngdir = r"/opt/www/diewu/static/images/rrdpng/cache/"
	if not os.path.exists(pngdir + graphid):
		os.makedirs(pngdir + graphid + r"/")
	png2d = pngdir + graphid + r"/" + r"2d.png"
	pngs.append(str(png2d).replace(r"/opt/www/diewu", ''))
	png1w = pngdir + graphid + r"/" + r"1w.png"
	pngs.append(str(png1w).replace(r"/opt/www/diewu", ''))
	png1m = pngdir + graphid + r"/" + r"1m.png"
	pngs.append(str(png1m).replace(r"/opt/www/diewu", ''))
	png1y = pngdir + graphid + r"/" + r"1y.png"
	pngs.append(str(png1y).replace(r"/opt/www/diewu", ''))
	#######################################################
	sql = "select itemid,itemname,units from zabbixapp_drawgraphs where graphid="+graphid
	pitem = DrawGraphs.objects.getdata(sql)
	######取自定义颜色和绘制方法
	sql = "select cols from zabbixapp_drawdef where graphid="+graphid
	cols = DrawDef.objects.getdata(sql)
	if cols:
		cols = (cols[0][0].split(":"),)
	sql = "select types from zabbixapp_drawdef where graphid="+graphid
	itypes = DrawDef.objects.getdata(sql)
	if itypes:
		itypes = (itypes[0][0].split(":"),)	
	############################
	sql = "select itemid,itemname,units from zabbixapp_drawgraphs where graphid="+graphid
	pitem = DrawGraphs.objects.getdata(sql)
	###########################
	strtime = str(int(time.time()- 86400))
	gdata = {'pname':png2d, 'gname':graphname, 'rrdpath':rpath, 'pitem':pitem, 'graphid':graphid, 
			'cols':cols, 'itypes':itypes, 'host':hostname, 'stime':strtime, 'flag':'Daily'}
	gdatas.append(gdata)
	###########################
	strtime = str(int(time.time()- 604800))
	gdata = {'pname':png1w, 'gname':graphname, 'rrdpath':rpath, 'pitem':pitem, 'graphid':graphid, 
			'cols':cols, 'itypes':itypes, 'host':hostname, 'stime':strtime, 'flag':'Weekly'}
	gdatas.append(gdata)
	###########################
	strtime = str(int(time.time()- 2592000))
	gdata = {'pname':png1m, 'gname':graphname, 'rrdpath':rpath, 'pitem':pitem, 'graphid':graphid, 
			'cols':cols, 'itypes':itypes, 'host':hostname, 'stime':strtime, 'flag':'Monthly'}
	gdatas.append(gdata)
	###########################
	strtime = str(int(time.time()- 31536000))
	gdata = {'pname':png1y, 'gname':graphname, 'rrdpath':rpath, 'pitem':pitem, 'graphid':graphid, 
			'cols':cols, 'itypes':itypes, 'host':hostname, 'stime':strtime, 'flag':'Yearly'}
	gdatas.append(gdata)
	##########################
	drawrrd.drawmain(gdatas)
	#value = pitem
	#avg = {'privatetitle': 'Zabbix监控数据展示', 'STATIC_URL': '/static', 'value': value, 'pngs': pngs}
	avg = {'privatetitle': 'Zabbix监控数据展示', 'STATIC_URL': '/static', 'pngs': pngs}
	return render_to_response('zabbixapp/drawall.html', avg)

该视图函数的模板drawall.html是这样的:

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <title>{{ privatetitle }}</title>
    <link rel="icon" href="{{ STATIC_URL }}/favicon.ico" type="image/x-icon"/>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="{{ STATIC_URL }}/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ STATIC_URL }}/css/bootstrap-theme.min.css">
    {% block othercss %}{% endblock %}
    <script src="{{ STATIC_URL }}/js/jquery.min.js"></script>
    <script src="{{ STATIC_URL }}/js/bootstrap.min.js"></script>
    {% block otherjs %}{% endblock %}
</head>
<body>
<div class="container">
	<div class="col-md-9">
		{{value}}
	</div>
	{% for png in pngs  %}
    <p>
    	<img src="{{ png }}" class="img-responsive" alt="Responsive image">
    </p>
    {% endfor %}
</div>
</body>

最后的显示效果如下(某台主机的磁盘IO监控数据1天、1周、1月、1年的图形):rrdtooldraw07

在此运维平台的第二个版本的监控数据图形展示基本完成。

转载请注明出处: http://www.xiaomastack.com/2014/08/28/rrdtool-6/ 谢谢!

6 Comments

 Add your comment
  1. 你好,小马,上面那个显示cpu每个核曲线是自己配出来的模板吗?怎么配的?

  2. 你好,嗯~,其实也算不上模板。就是定义了不同item数的绘图函数,函数根据传递的参数(线性和颜色)绘图,如果没有相应的参数则采用默认的参数绘图。我把那个函数发到你的邮箱,不足之处多多指教,嘿嘿。

  3. 哦,原来是循环16次画图的,可是这些数据是怎么取出来的。
    我的意思是如果是八核的话会不会自适应处理?我记得zabbix对这种相同监控项对比的处理挺无力的,要么是定义16个名字不同的item,要么定义16个模板?你的后台是怎么配置的?

  4. 没有用到循环,rrdtool的graph函数直接绘制的16个item的图,你看我给你邮箱的那个函数就明白了。

  5. 能大概给我发个你做出来的样子 我现在正好有这种的做网络流量的展示的需求?

  6. 效果可以看这篇文章http://www.xiaomastack.com/2015/07/30/refactoring-yunwei/

发表评论:

你的电子邮件地址将不会被公开.

57 − 55 =

1 Trackback

  1. Zabbix数据库表浅析 | 小马 (Pingback)