添加监控功能(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、计算