File: charts.js

package info (click to toggle)
rabbitmq-server 4.0.5-10
  • links: PTS, VCS
  • area: main
  • in suites: forky, sid
  • size: 38,056 kB
  • sloc: erlang: 257,826; javascript: 22,466; sh: 3,037; makefile: 2,517; python: 1,966; xml: 646; cs: 335; java: 244; ruby: 212; php: 100; perl: 63; awk: 13
file content (327 lines) | stat: -rw-r--r-- 11,469 bytes parent folder | download | duplicates (2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
//
// Formatting side
//

function message_rates(id, stats) {
    var items = [['Publish', 'publish'],
                 ['Publisher confirm', 'confirm'],
                 ['Publish (In)', 'publish_in'],
                 ['Publish (Out)', 'publish_out'],
                 ['Deliver (manual ack)', 'deliver'],
                 ['Deliver (auto ack)', 'deliver_no_ack'],
                 ['Consumer ack', 'ack'],
                 ['Redelivered', 'redeliver'],
                 ['Get (manual ack)', 'get'],
                 ['Get (auto ack)', 'get_no_ack'],
                 ['Get (empty)', 'get_empty'],
                 ['Unroutable (return)', 'return_unroutable'],
                 ['Unroutable (drop)', 'drop_unroutable']];
    return rates_chart_or_text(id, stats, items, fmt_rate, fmt_rate_axis, true, 'Message rates', 'message-rates');
}

function queue_lengths(id, stats) {
    var items = [['Ready', 'messages_ready'],
                 ['Unacked', 'messages_unacknowledged'],
                 ['Total', 'messages']];
    return rates_chart_or_text(id, stats, items, fmt_num_thousands, fmt_plain_axis, false, 'Queued messages', 'queued-messages');
}

function data_rates(id, stats) {
    var items = [['From client', 'recv_oct'], ['To client', 'send_oct']];
    return rates_chart_or_text(id, stats, items, fmt_rate_bytes, fmt_rate_bytes_axis, true, 'Data rates');
}

function data_reductions(id, stats) {
    var items = [['Reductions', 'reductions']];
    return rates_chart_or_text(id, stats, items, fmt_rate, fmt_rate_axis, true, 'Reductions (per second)', 'process-reductions');
}

function rates_chart_or_text(id, stats, items, fmt, axis_fmt, chart_rates,
                             heading, heading_help) {
    var prefix = chart_h3(id, heading, heading_help);

    return prefix + rates_chart_or_text_no_heading(
            id, id, stats, items, fmt, axis_fmt, chart_rates);
}

function rates_chart_or_text_no_heading(type_id, id, stats, items,
                                        fmt, axis_fmt, chart_rates) {
    var mode = get_pref('rate-mode-' + type_id);
    var range = get_pref('chart-range');
    var res;
    if (keys(stats).length > 0) {
        if (mode == 'chart') {
            res = rates_chart(
                type_id, id, items, stats, fmt, axis_fmt, 'full', chart_rates);
        }
        else {
            res = rates_text(items, stats, mode, fmt, chart_rates);
        }
        if (res == "") res = '<p>Waiting for data...</p>';
    }
    else {
        res = '<p>Currently idle</p>';
    }
    return res;
}

function chart_h3(id, heading, heading_help) {
    var mode = get_pref('rate-mode-' + id);
    var range = get_pref('chart-range');
    return '<h3>' + heading +
        ' <span class="popup-options-link" title="Click to change" ' +
        'type="rate" for="' + id + '">' + prefix_title(mode, range) +
        '</span>' + (heading_help == undefined ? '' :
         ' <span class="help" id="' + heading_help + '"></span>') +
        '</h3>';
}

function prefix_title(mode, range) {
    var desc = ALL_CHART_RANGES[range];
    if (mode == 'chart') {
        return desc.toLowerCase();
    }
    else if (mode == 'curr') {
        return 'current value';
    }
    else {
        return 'moving average: ' + desc.toLowerCase();
    }
}

function node_stat_count(used_key, limit_key, stats, thresholds) {
    var used = stats[used_key];
    var limit = stats[limit_key];
    if (typeof used == 'number') {
        return node_stat(used_key, 'Used', limit_key, 'available', stats,
                         fmt_plain, fmt_plain_axis,
                         fmt_color(used / limit, thresholds));
    } else {
        return used;
    }
}

function node_stat_count_bar(used_key, limit_key, stats, thresholds) {
    var used = stats[used_key];
    var limit = stats[limit_key];
    if (typeof used == 'number') {
        return node_stat_bar(used_key, limit_key, 'available', stats,
                             fmt_plain_axis,
                             fmt_color(used / limit, thresholds));
    } else {
        return used;
    }
}

function node_stat(used_key, used_name, limit_key, suffix, stats, fmt,
                   axis_fmt, colour, help, invert) {
    if (get_pref('rate-mode-node-stats') == 'chart') {
        var items = [[used_name, used_key], ['Limit', limit_key]];
        add_fake_limit_details(used_key, limit_key, stats);
        return rates_chart('node-stats', 'node-stats-' + used_key, items, stats,
                           fmt, axis_fmt, 'node', false);
    } else {
        return node_stat_bar(used_key, limit_key, suffix, stats, axis_fmt,
                             colour, help, invert);
    }
}

function add_fake_limit_details(used_key, limit_key, stats) {
    var source = stats[used_key + '_details'].samples;
    var limit = stats[limit_key];
    var dest = [];
    for (var i in source) {
        dest[i] = {sample: limit, timestamp: source[i].timestamp};
    }
    stats[limit_key + '_details'] = {samples: dest};
}

function node_stat_bar(used_key, limit_key, suffix, stats, fmt, colour,
                       help, invert) {
    var used = stats[used_key];
    var limit = stats[limit_key];
    var width = 120;

    var res = '';
    var other_colour = colour;
    var ratio = invert ? (limit / used) : (used / limit);
    if (ratio > 1) {
        ratio = 1 / ratio;
        inverted = true;
        colour += '-dark';
    }
    else {
        other_colour += '-dark';
    }
    var offset = Math.round(width * (1 - ratio));

    res += '<div class="status-bar" style="width: ' + width + 'px;">';
    res += '<div class="status-bar-main ' + colour + '" style="background-image: url(img/bg-' + other_colour + '.png); background-position: -' + offset + 'px 0px; background-repeat: no-repeat;">';
    res += fmt(used);
    if (help != null) {
        res += ' <span class="help" id="' + help + '"></span>';
    }
    res += '</div>'; // status-bar-main
    res += '<sub>' + fmt(limit) + ' ' + suffix + '</sub>';
    res += '</div>'; // status-bar

    return res;
}

function node_stats_prefs() {
    return chart_h3('node-stats', 'Node statistics');
}

function rates_chart(type_id, id, items, stats, fmt, axis_fmt, type,
                     chart_rates) {
    function show(key) {
        return get_pref('chart-line-' + id + key) === 'true';
    }

    var size = get_pref('chart-size-' + type_id);
    var legend = [];
    chart_data[id] = {};
    chart_data[id]['data'] = {};
    chart_data[id]['fmt'] = axis_fmt;
    var ix = 0;
    for (var i in items) {
        var name = items[i][0];
        var key = items[i][1];
        var key_details = key + '_details';
        if (key_details in stats) {
            if (show(key)) {
                chart_data[id]['data'][name] = stats[key_details];
                chart_data[id]['data'][name].ix = ix;
            }
            var value = chart_rates ? pick_rate(fmt, stats, key) :
                                      pick_abs(fmt, stats, key);
            legend.push({name:  name,
                         key:   key,
                         value: value,
                         show:  show(key)});
            ix++;
        }
    }
    var html = '<div class="box"><div id="chart-' + id +
        '" class="chart chart-' + type + ' chart-' + size +
        (chart_rates ? ' chart-rates' : '') + '"></div>';
    html += '<table class="legend">';
    for (var i = 0; i < legend.length; i++) {
        if (i % 3 == 0 && i < legend.length - 1) {
            html += '</table><table class="legend">';
        }

        html += '<tr><th><span title="Click to toggle line" ';
        html += 'class="rate-visibility-option';
        html += legend[i].show ? '' : ' rate-visibility-option-hidden';
        html += '" data-pref="chart-line-' + id + legend[i].key + '">';
        html += legend[i].name + '</span></th><td>';
        html += '<div class="colour-key" style="background: ' + chart_colors[type][i];
        html += ';"></div>' + legend[i].value + '</td></tr>'
    }
    html += '</table></div>';
    return legend.length > 0 ? html : '';
}

function rates_text(items, stats, mode, fmt, chart_rates) {
    var res = '';
    for (var i in items) {
        var name = items[i][0];
        var key = items[i][1];
        var key_details = key + '_details';
        if (key_details in stats) {
            var details = stats[key_details];
            res += '<div class="highlight">' + name + '<strong>';
            res += chart_rates ? pick_rate(fmt, stats, key, mode) :
                                 pick_abs(fmt, stats, key, mode);
            res += '</strong></div>';
        }
    }
    return res == '' ? '' : '<div class="box">' + res + '</div>';
}

//
// Rendering side
//

function render_charts() {
    $('.chart').map(function() {
        render_chart($(this));
    });
}

var chart_colors = {full: ['#edc240', '#afd8f8', '#cb4b4b', '#4da74d', '#9440ed', '#666666', '#aaaaaa',
                           '#7c79c3', '#8e6767', '#67808e', '#e5e4ae', '#4b4a55', '#bba0c1'],
                    node: ['#6ae26a', '#e24545']};

var chart_chrome = {
    series: { lines: { show: true } },
    grid:   { borderWidth: 2, borderColor: "#aaa" },
    xaxis:  { tickColor: "#fff", mode: "time", timezone: "browser" },
    yaxis:  { tickColor: "#eee", min: 0 },
    legend: { show: false }
};

function chart_fill(mode, i) {
    return mode =='node' && i == 0;
}

function render_chart(div) {
    var id = div.attr('id').substring('chart-'.length);
    var rate_mode = div.hasClass('chart-rates');
    var out_data = [];
    var data = chart_data[id]['data'];
    var fmt = chart_data[id]['fmt'];

    var mode = div.hasClass('chart-full') ? 'full': 'node';
    var colors = chart_colors[mode];

    for (var name in data) {
        var series = data[name];
        var samples = series.samples;
        var i = series.ix;
        var d = [];
        for (var j = 1; j < samples.length; j++) {
            var x = samples[j].timestamp;
            var y;
            if (rate_mode) {
                // TODO This doesn't work well if you are looking at
                // stuff in the browser that is finer granularity than
                // the data we have in the DB (and thus we get
                // duplicated entries). Do we care? We should just
                // never allow that...
                y = (samples[j - 1].sample - samples[j].sample) * 1000 /
                    (samples[j - 1].timestamp - samples[j].timestamp);
            }
            else {
                y = samples[j].sample;
            }
            d.push([x, y]);
        }
        out_data.push({data: d, color: colors[i], shadowSize: 0,
                       lines: {show: true, fill: chart_fill(mode, i)}});
    }
    chart_data[id] = {};

    chart_chrome.yaxis.tickFormatter = fmt_y_axis(fmt);
    $.plot(div, out_data, chart_chrome);
}

function fmt_y_axis(fmt) {
    return function (val, axis) {
        // axis.ticks seems to include the bottom value but not the top
        if (axis.max == 1 && axis.ticks.length > 1) {
            var newTicks = [axis.ticks[0]];
            axis.ticks = newTicks;
        }
        return fmt(val, axis.max);
    }
}

function update_rate_options(sammy) {
    var id = sammy.params['id'];
    store_pref('rate-mode-' + id, sammy.params['mode']);
    store_pref('chart-size-' + id, sammy.params['size']);
    store_pref('chart-range', sammy.params['range']);
    partial_update();
}