Subversion Repositories Code-Repo

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
141 Kevin 1 
/*
2 
 * Widgets that plot data obtained from the sys stat web service.
3 
 *
4 
 * Supports
5 
 *
6 
 * <div id="meminfo"> </div>
7 
 * <div id="loadavg"> </div>
8 
 *
9 
 * Written by Godmar Back for CS 3214 Fall 2009
10 
 */
11 
(function () {
12 
 
13 
var jqplotbase = "/files/";
14 
 
15 
// loadScript taken from
16 
// http://devblog.techhead.biz/2009/04/dynamically-load-external-javascript-in.html
17 
// (code mirrors $.getScript)
18 
function loadScript(src, callback) {
19 
  var head = document.getElementsByTagName('head')[0];
20 
  var script = document.createElement('script');
21 
  var loaded = false;
22 
  script.setAttribute('src', src);
23 
  script.onload = script.onreadystatechange = function() {
24 
    if (!loaded && (!this.readyState || this.readyState == 'complete'
25 
                                     || this.readyState == 'loaded') ) {
26 
      loaded = true;
27 
      callback();
28 
      script.onload = script.onreadystatechange = null;
29 
      head.removeChild(script);
30 
    }
31 
  }
32 
  head.appendChild(script);
33 
}
34 
 
35 
/*
36 
 * A Delayer object invokes a callback passed to the constructor
37 
 * after the following two conditions are true:
38 
 * - every function returned from a call to add() has been called
39 
 * - the ready() method has been called.
40 
 */
41 
var Delayer = function (cb) {
42 
    var count = 0;
43 
    var finalized = false;
44 
 
45 
    this.add = function () {
46 
        count++;
47 
 
48 
        return function () {
49 
            count--;
50 
            if (count == 0 && finalized)
51 
                cb();
52 
        }
53 
    }
54 
 
55 
    this.ready = function () {
56 
        finalized = true;
57 
        if (count == 0)
58 
            cb();
59 
    }
60 
}
61 
 
62 
function dowithJQuery($) {
63 
 
64 
    function updateLoadaveragePlot(plot, divid, value, nvalues, title) {
65 
        if (plot) {
66 
            var data = plot.series[0].data;
67 
            for (var i = 0; i < data.length - 1; i++)
68 
                data[i][1] = data[i+1][1];
69 
            data[i][1] = value;
70 
 
71 
            var ymax = 1.0;
72 
            $.each(data, function (index, el) {
73 
                if (el[1] > ymax) ymax = el[1];
74 
            });
75 
 
76 
            plot.axes.yaxis.max = ymax;
77 
            plot.title.text = title;
78 
            plot.replot();
79 
            return plot;
80 
        }
81 
 
82 
        var data = [value];
83 
        for (var i = 2; i < nvalues; i++)
84 
            data.push(0.0);
85 
 
86 
        return $.jqplot(divid, [data], {
87 
            seriesDefaults:{neighborThreshold:0, showMarker: false},
88 
            series:[
89 
                {
90 
                    fill: true, fillAlpha:0.8,
91 
                    shadow:false, showLabel: false,
92 
                }
93 
            ],
94 
            legend: {
95 
              location:'nw',
96 
              xoffset: 310,
97 
              yoffset: 100
98 
            },
99 
            axesDefaults:{
100 
                autoscale: true,
101 
                useSeriesColor: true
102 
            },
103 
            title : title,
104 
            axes: {
105 
                yaxis: {
106 
                    tickOptions: {formatString:"%.1f"},
107 
                    min: -0.001
108 
                },
109 
                xaxis: {
110 
                    min: 1, max: nvalues,
111 
                    showTicks: false
112 
                }
113 
            }
114 
        });
115 
    }
116 
 
117 
    function showMemory(plot, divid, vallabel, axismax, title) {
118 
 
119 
        if (plot) {
120 
            for (var i = 0; i < vallabel.length; i++)
121 
                plot.series[i].data[0][1] = vallabel[i].value;
122 
 
123 
            plot.axes.yaxis.max = axismax;
124 
            plot.replot();
125 
            return plot;
126 
        }
127 
 
128 
        var data = [];
129 
        for (var i = 0; i < vallabel.length; i++)
130 
            data.push([ vallabel[i].value ]);
131 
 
132 
        var labels = [];
133 
        for (var i = 0; i < vallabel.length; i++)
134 
            labels.push({ label: vallabel[i].label });
135 
 
136 
        return $.jqplot(divid, data, {
137 
            seriesColors: [ "#8B3A3A", "#CD5555", "#000080", "#008B00" ],
138 
            stackSeries: true,
139 
            legend: {
140 
                show: true,
141 
                location: 'nw',
142 
                // xoffset: 115
143 
            },
144 
            seriesDefaults: {
145 
                renderer: $.jqplot.BarRenderer,
146 
                rendererOptions: {
147 
                    barPadding: 2,
148 
                    barMargin: 10
149 
                }
150 
            },
151 
            series: labels,
152 
            axes: {
153 
                xaxis: {
154 
                    renderer: $.jqplot.CategoryAxisRenderer,
155 
                    ticks: [title]
156 
                },
157 
                yaxis: {
158 
                    numberTicks: 6,
159 
                    tickOptions: {
160 
                        formatString: "%.0dM"
161 
                    },
162 
                    min: 0,
163 
                    max: axismax
164 
                }
165 
            }
166 
        });
167 
    }
168 
 
169 
    function renderWidgets($) {
170 
        $('#meminfo').each(function () {
171 
            var $div = $(this);
172 
            var url = $div.attr('url');
173 
            var updateInterval = Number($div.attr('update'));
174 
            var plot = undefined;
175 
 
176 
            function update () {
177 
                $.getJSON(url + "/meminfo?callback=?", function (data) {
178 
                    var MB = 1024;
179 
                    plot = showMemory(plot, $div.attr('id'),
180 
                        [
181 
                            { value: data.Cached / MB, label: "Cached" },
182 
                            { value: data.Buffers / MB, label: "Buffers" },
183 
                            { value: (data.MemTotal
184 
                                      - data.MemFree
185 
                                      - data.Cached
186 
                                      - data.Buffers) / MB, label: "Anonymous" },
187 
                            { value: data.MemFree / MB, label: "Free" }
188 
                        ],
189 
                        data.MemTotal / MB, url.match(/http:\/\/(.*):\d+/)[1]
190 
                    );
191 
                });
192 
            }
193 
            update ();
194 
            setInterval(update, updateInterval);
195 
        });
196 
 
197 
        $('.loadavg-text').each(function () {
198 
            var $span = $(this);
199 
            var url = $span.attr('url');
200 
            var updateInterval = Number($span.attr('update'));
201 
 
202 
            function update () {
203 
                $.getJSON(url + "/loadavg?callback=?", function (data) {
204 
                    $span.text(
205 
                        "Load Average: " + data.loadavg.join(" ")
206 
                        + " Threads: " + data.running_threads
207 
                        + "/" + data.total_threads
208 
                    );
209 
                });
210 
            }
211 
            update ();
212 
            setInterval(update, updateInterval);
213 
        });
214 
 
215 
        $('#loadavg').each(function () {
216 
            var $div = $(this);
217 
            var url = $div.attr('url');
218 
            var updateInterval = Number($div.attr('update'));
219 
            var plot = undefined;
220 
 
221 
            function update () {
222 
                $.getJSON(url + "/loadavg?callback=?", function (data) {
223 
                    plot = updateLoadaveragePlot(
224 
                            plot, $div.attr('id'), Number(data.loadavg[0]),
225 
                            $div.width(),   // # values, 1 per pixel
226 
                            url.match(/http:\/\/(.*):\d+/)[1] + ": " +
227 
                            data.running_threads + "/" + data.total_threads);
228 
                });
229 
            }
230 
            update ();
231 
            setInterval(update, updateInterval);
232 
        });
233 
    };
234 
 
235 
    var delay = new Delayer(function () {
236 
        renderWidgets($);
237 
    });
238 
 
239 
    $('head').append('<link rel="stylesheet" type="text/css"'
240 
                    +' href="' + jqplotbase + 'jquery.jqplot.min.css" />');
241 
 
242 
    if ($.browser.msie)
243 
        $.getScript(jqplotbase + "excanvas.js", delay.add());
244 
 
245 
    var jqplotloaded = delay.add();
246 
    $.getScript(jqplotbase + "jquery.jqplot.js", function () {
247 
        $.each([ "plugins/jqplot.barRenderer.js",
248 
                 "plugins/jqplot.categoryAxisRenderer.js"
249 
               ],
250 
               function (index, jsfile) {
251 
                    $.getScript(jqplotbase + jsfile, delay.add());
252 
               });
253 
 
254 
        jqplotloaded();
255 
    });
256 
 
257 
    $(document).ready(delay.add());
258 
    delay.ready();
259 
}
260 
 
261 
loadScript(
262 
    jqplotbase + 'jquery.min.js',
263 
    function() {
264 
      // rename jQuery to jQuerySysStatWidget, remove both reference
265 
      // to jQuery and $; the jqplot plug-ins were changed to attach to
266 
      // jQuerySysStatWidget instead of jQuery
267 
      jQuerySysStatWidget = jQuery.noConflict(true);
268 
      dowithJQuery(jQuerySysStatWidget);
269 
    }
270 
);
271 
 
272 
}) ();