corrade-nucleus-nucleons – Rev 39

Subversion Repositories:
Rev:
<div id="doctor">
    <!-- HighCharts.js CSS -->
    <link href="/doctor/node_modules/highcharts/css/highcharts.css" rel="stylesheet" type="text/css">
    <!-- HighCharts -->
    <script src="/doctor/node_modules/highcharts/js/highcharts.js" type="text/javascript"></script>
    <script src="/doctor/node_modules/highcharts/js/modules/exporting.js" type="text/javascript"></script>

    <div class="panel panel-default window-manager-window" data-target="doctor">
      <div class="panel-heading">
        <button type="button" class="close window-manager-close-button" data-target="doctor"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h3 class="panel-title">HeartBeat</h3>
      </div>
      <div class="panel-body">
        <div id="heartbeat" class="row"></div>
      </div>
    </div>

    <!-- Highcharts Chart -->
    <script type="text/javascript">
            $(document).ready(function() {
                // Display Corrade Heartbeat using HighCharts.
                var updateInterval = 1000;
                var plotPoints = 20;

                function retrieveStats(series_1, series_2) {
                    $.ajax({
                        type: 'POST',
                        url: '/',
                        data: {
                            command: 'getheartbeatdata',
                            data: wasArrayToCSV(
                                [
                                    'AverageCPUUsage',
                                    'AverageRAMUsage',
                                ]
                            )
                        },
                        dataType: 'json'
                    }).done(function(response) {
                        var data = wasCSVToArray(response.data);
                        var time = (new Date()).getTime();
                        var ram, cpu;
                        $.each(data, function(i, value) {
                            switch (value) {
                                case 'AverageCPUUsage':
                                    cpu = parseInt(data[i + 1]);
                                    break;
                                case 'AverageRAMUsage':
                                    // Convert bytes to MiB
                                    ram = Math.floor(parseInt(data[i + 1]) / 1048576);
                                    break;
                            }
                        });
                        series_1.addPoint(
                            [
                                time,
                                cpu
                            ],
                            false, // false for all but last
                            true
                        );
                        series_2.addPoint(
                            [
                                time,
                                ram
                            ],
                            true, // false for all but last
                            true
                        );
                        /*setTimeout(
                            retrieveStats,
                            updateInterval,
                            series_1,
                            series_2
                        );*/
                    });
                }

                Highcharts.setOptions({
                    global: {
                        useUTC: true
                    }
                });

                $('#heartbeat').highcharts({
                    chart: {
                        type: 'spline',
                        zoomType: 'xy',
                        //animation: Highcharts.svg, // don't animate in old IE
                        //marginRight: 10,
                        //shadow: true,
                        events: {
                            load: function() {
                                // set up the updating of the chart each second
                                //retrieveStats(this.series[0], this.series[1]);
                                setInterval(
                                    retrieveStats,
                                    updateInterval,
                                    this.series[0],
                                    this.series[1]
                                );
                            }
                        }
                    },
                    title: {
                        text: null,
                        enabled: false
                    },
                    credits: {
                        enabled: false
                    },
                    xAxis: [{
                        type: 'datetime' //,
                            //tickPixelInterval: 150,
                    }],
                    yAxis: [{
                        //type: 'linear',
                        //allowDecimals: false,
                        //min: 0,
                        labels: {
                            enabled: false
                        },
                        title: {
                            text: null
                        }
                    }, {
                        //type: 'linear',
                        //allowDecimals: false,
                        //min: 0,
                        labels: {
                            enabled: false
                        },
                        title: {
                            text: null
                        }
                    }],
                    /*tooltip: {
                    formatter: function() {
                            switch(this.series.name) {
                                    case 'CPU':
                                        return '<b>' + this.series.name + '</b><br/>' +
                                                                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                                                        this.y + '%';
                                        break;
                                    case 'RAM':
                                        return '<b>' + this.series.name + '</b><br/>' +
                                                                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                                                        Highcharts.numberFormat(this.y/1048576, 0) + 'MiB';
                                        break;
                            }
                    }
                },*/
                    tooltip: {
                        shared: true
                    },
                    legend: {
                        enabled: true
                    },
                    exporting: {
                        enabled: true
                    },
                    series: [{
                        name: 'CPU',
                        color: '#FF0000',
                        tooltip: {
                            valueSuffix: ' %'
                        },
                        yAxis: 0,
                        data: (function() {
                            var data = [],
                                time = (new Date()).getTime(),
                                j = -(plotPoints - 1);
                            $.ajax({
                                type: 'POST',
                                url: '/',
                                data: {
                                    command: 'getheartbeatdata',
                                    data: wasArrayToCSV(
                                        [
                                            'CPUAverageUsageHistory'
                                        ]
                                    )
                                },
                                dataType: 'json',
                                async: false,
                                success: function(response) {
                                    var responseData = wasCSVToArray(response.data).slice(1);
                                    $.each($.stride(responseData.slice(1), 2).slice(-20), function(i, e) {
                                        data.push({
                                            x: time + ++j * updateInterval,
                                            y: parseInt(e)
                                        });
                                    });
                                }
                            });

                            var result = [];
                            while (result.length < plotPoints - data.length)
                                result.push({
                                    x: time + ++j * updateInterval,
                                    y: 0
                                });

                            return result.concat(data);
                        }())
                    }, {
                        name: 'RAM',
                        color: '#0000FF',
                        tooltip: {
                            valueSuffix: ' MiB'
                        },
                        yAxis: 1,
                        data: (function() {
                            var data = [],
                                time = (new Date()).getTime(),
                                j = -(plotPoints - 1);
                            $.ajax({
                                type: 'POST',
                                url: '/',
                                data: {
                                    command: 'getheartbeatdata',
                                    data: wasArrayToCSV(
                                        [
                                            'RAMAverageUsageHistory'
                                        ]
                                    )
                                },
                                dataType: 'json',
                                async: false,
                                success: function(response) {
                                    var responseData = wasCSVToArray(response.data).slice(1);
                                    $.each($.stride(responseData.slice(1), 2).slice(-20), function(i, e) {
                                        data.push({
                                            x: time + ++j * updateInterval,
                                            // Convert bytes to MiB.
                                            y: Math.floor(parseInt(e) / 1048576)
                                        });
                                    });
                                }
                            });

                            var result = [];
                            while (result.length < plotPoints - data.length)
                                result.push({
                                    x: time + ++j * updateInterval,
                                    y: 0
                                });

                            return result.concat(data);
                        }())
                    }]
                });
            });
    script>
</div>

Generated by GNU Enscript 1.6.5.90.