为Instance添加监控页面

By | 2014/10/16

DeepinScreenshot20141016115844

1.在html页面加入图表div

<div id="instance_id" hidden="hidden">{{ instance.id }}</div>
<div class="monitor">
    <div id="cpucontainer"></div>
    <div id="ramcontainer"></div>
    <div id="diskcontainer"></div>
    <div id="diskiocontainer"></div>
    <div id="netiocontainer"></div>
</div>

2.在js文件中自定义图表(使用highchart)

<script type="text/javascript">
function customGaugeChart(containerId, min, max, title, series_name, series_data) {
    chart = new Highcharts.Chart({
            chart: {
                renderTo: containerId,
                type: "gauge",
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },
            title: {
                text: title
            },
            credits: {
                enabled: false
            },
            pane: {
                startAngle: -150,
                endAngle: 150
            },
            yAxis: {
                min: min,
                max: max,

                minorTickInterval: 'auto',
                minorTickWidth: 1,
                minorTickLength: 10,
                minorTickPosition: 'inside',
                minorTickColor: '#666',

                tickPixelInterval: 30,
                tickWidth: 2,
                tickPosition: 'inside',
                tickLength: 10,
                tickColor: '#666',

                labels: {
                    step: 2,
                    rotation: 'auto'
                },
                title: {
                    text: ''
                },
                plotBands: [{
                    from: 0,
                    to: parseInt(0.6 * max),
                    color: '#55BF3B' // green
                }, {
                    from: parseInt(0.6 * max),
                    to: parseInt(0.8 * max),
                    color: '#DDDF0D' // yellow
                }, {
                    from: parseInt(0.8 * max),
                    to: max,
                    color: '#DF5353' // red
                }]
            },
            series: [{
                name: series_name,
                data: series_data,
                tooltip: {
                    valueSuffix: '%'
                }
            }]
        },
        function(chart) {});

    return chart;
}


function customSplineChart(containerId, title, ytitle, series_name) {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: containerId,
            type: 'spline',
            animation: Highcharts.svg,
            marginRight: 10
        },
        title: {
            text: title
        },
        credits: {
            enabled: false
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: ytitle
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: series_name,
            data: (function() {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;

                for (i = -60; i <= 0; i++) {
                    data.push({
                        x: time + i * 1000,
                        y: 0
                    });
                }
                return data;
            })()
        }]
    });

    return chart;
}


$(document).ready(function() {
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });

    var cpuchart = customGaugeChart("cpucontainer", 0, 100, "CPU Usage", "usage", [0]);
    var ramchart = customGaugeChart("ramcontainer", 0, 100, "RAM Usage", "usage", [0]);
    var diskchart = customGaugeChart("diskcontainer", 0, 100, "Disk Usage", "usage", [0]);
    var diskiochart = customSplineChart("diskiocontainer", "Disk I/O", "Unit(kbps)", "disk i/o");
    var netiochart = customSplineChart("netiocontainer", "Network I/O", "Unit(kbps)", "network i/o");

    var cpuseries = cpuchart.series[0];
    var ramseries = ramchart.series[0];
    var diskseries = diskchart.series[0];
    var diskioseries = diskiochart.series[0];
    var netioseries = netiochart.series[0];

    setInterval(function() {
        var x = (new Date()).getTime();
        var ins_id = $("#instance_id").text();
        $.get("/project/instances/" + ins_id + "/get_instence_usage", function(data) {
            cpuseries.points[0].update(parseInt(data));
            ramseries.points[0].update(parseInt(data));
            diskseries.points[0].update(parseInt(data));
            diskioseries.addPoint([x, parseInt(data)], true, true);
            netioseries.addPoint([x, parseInt(data)], true, true);
        });
    }, 2000);
});
</script>

3.在urls.py中添加ajax需要调用的地址

    url(INSTANCES % 'get_instence_usage', "get_instence_usage", name='get_instence_usage'),

4.在views.py中添加方法获取云主机信息

def get_instence_usage(request, instance_id):
    from random import randint
    return HttpResponse(randint(1,100))

2 thoughts on “为Instance添加监控页面

    1. admin Post author

      搭在openshift上的,做了cname解析,所以提示有问题啊。

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *