添加监控功能(cpu、内存)
1、在页面上添加监控的按钮
'<a class="btn btn-info btn-xs btn-resource-asset" href="javascript:void(0)" data-id="' + row['id'] + '">编辑</a>'
2、点击按钮,打开dialog 绑定事件
3、引入 ECharts(http://echarts.baidu.com/download.html),下载到cmdb-13/static/ 下
4、查看教程http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
1、引入
{% block scripts %}
<script type="text/javascript" src="{% static 'echarts/echarts.min.js' %}" ></script>
{% endblock %}
2、还需要设置
{% load static %}
3、在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
4、// 基于准备好的dom,初始化echarts实例
var chart_resource = echarts.init(document.getElementById('chart-resource'));
5、定义option
6、使用刚指定的option。
chart_resource.setOption(option);
7、现在填写cpu,内存使用率模板
参考:
http://echarts.baidu.com/examples/editor.html?c=line-stack
var chart_resource = echarts.init(document.getElementById('chart-resource'));
var chart_resource_option = {
title: {
text: 'CPU、内存使用率'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['CPU','内存']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data:[],
},
yAxis: {
type: 'value'
},
series: [
{
name:'CPU',
type:'line',
stack: 'CPU',
data:[],
},
{
name:'内存',
type:'line',
stack: '内存',
data:[],
}
]
};
jQuery('#table_asset').on('click', '.btn-resource-asset', function() {
var xAxis=['周一','周二','周三','周四','周五','周六','周日'];
var CPU_DATA=[120, 132, 101, 134, 90, 230, 210]
var MEM_DATA=[220, 182, 191, 234, 290, 330, 310]
chart_resource_option['xAxis']['data']=xAxis;
chart_resource_option['series'][0]['data']=CPU_DATA;
chart_resource_option['series'][1]['data']=MEM_DATA;
chart_resource.setOption(chart_resource_option);
jQuery('.dialog-resource').modal({
show: true
});
});
5、在/mnt/Django-re/cmdb-13/etc/resource.psutil.py 下新建一个脚本:
获取当前主机的cpu,内存
import psutil #使用psutil第三方模块获取
if __name__ == '__main__':
cpu = psutil.cpu_percent(1)
mem = psutil.virtual_memory().percent
print(cpu)
print(mem)
6、自定义一个数据表(cpu,内存,ip,时间)
7、在/mnt/Django-re/cmdb-13/asset/management/commands 写ansibile的api
功能:1、获取cpu,内存,ip,时间
2、保存到数据库里
8、取数据,放在前面定义好的dialog 里
现在将数据放在后端,前端用ajax调用就可以,然后把cpu,内存的数据放到后端显示
自动更新图标
setTimeout 多长时间后执行一次后面跟的是毫秒
setInterval 每隔多少时间执行 后面跟的是毫秒
9、resource_ajax 后端的实现
1、通过前端传来的id,获取host=Host.objects.get(pk=_id) 这个表示一个类,可以调用值(ip,cpu,内存,create_time)
2、计算