cmdb-添加監控功能

添加監控功能（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:'記憶體',

            stack: '記憶體',

    ]

        };

    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、計算