X-Git-Url: https://git.octo.it/?p=collection4.git;a=blobdiff_plain;f=share%2Fcollection.js;h=e1a6a2255be5b5114a775118627f094f1151e864;hp=20af9cb1033ecaa358f0f9d535ad2f6523b1df36;hb=d1c8e07134a95b6d02a27f187f769a207c28d618;hpb=13e2e7eee1e7f605a291c74294766de464a86dd9 diff --git a/share/collection.js b/share/collection.js index 20af9cb..e1a6a22 100644 --- a/share/collection.js +++ b/share/collection.js @@ -23,13 +23,58 @@ var c4 = { - instances: [] + instances: new Array (), + config: + { + width: 324, + height: 200 + } }; -function instance_get_params (graph) /* {{{ */ +function value_to_string (value) /* {{{ */ +{ + var abs_value; + var v2s = function (value) + { + var tmp = Math.round (100.0 * value) / 100.0; + return ("" + tmp); + } + + if (value == null) + return ('NaN'); + else if (value == 0) + return ('0'); + + abs_value = Math.abs (value); + + if ((abs_value < 10000) && (abs_value >= 0.1)) + return (v2s (value)); + else if (abs_value > 1) + { + if (abs_value < 10000000) + return (v2s (value / 1000) + "k"); + else if (abs_value < 10000000000) + return (v2s (value / 1000000) + "M"); + else if (abs_value < 10000000000000) + return (v2s (value / 1000000000) + "G"); + else + return (v2s (value / 1000000000000) + "T"); + } + else + { + if (abs_value >= 0.001) + return (v2s (value * 1000) + "m"); + else if (abs_value >= 0.000001) + return (v2s (value * 1000000) + "u"); + else + return (v2s (value * 1000000000) + "n"); + } +} /* }}} function value_to_string */ + +function instance_get_params (inst) /* {{{ */ { - var graph_selector = graph.graph_selector; - var inst_selector = graph.instance_selector; + var graph_selector = inst.graph_selector; + var inst_selector = inst.instance_selector; var selector = {}; if (graph_selector.host == inst_selector.host) @@ -98,11 +143,11 @@ function ident_clone (ident) /* {{{ */ return (ret); } /* }}} ident_clone */ -function graph_get_defs (graph) +function inst_get_defs (inst) /* {{{ */ { - if (!graph.def) + if (!inst.def) { - var params = ident_clone (graph.graph_selector); + var params = instance_get_params (inst); params.action = "graph_def_json"; $.ajax({ @@ -115,85 +160,282 @@ function graph_get_defs (graph) if (!data) return; - graph.def = data; + inst.def = data; }}); } - if (graph.def) - return (graph.def); + if (inst.def) + return (inst.def); return; -} /* graph_get_defs */ +} /* }}} inst_get_defs */ -function instance_draw (inst, def, data) +function ident_matches (selector, ident) /* {{{ */ +{ + var part_matches = function (s,p) + { + if (s == null) + return (false); + + if ((s == "/any/") || (s == "/all/")) + return (true); + + if (p == null) + return (false); + + if (s == p) + return (true); + + return (false); + }; + + if (!part_matches (selector.host, ident.host)) + return (false); + + if (!part_matches (selector.plugin, ident.plugin)) + return (false); + + if (!part_matches (selector.plugin_instance, ident.plugin_instance)) + return (false); + + if (!part_matches (selector.type, ident.type)) + return (false); + + if (!part_matches (selector.type_instance, ident.type_instance)) + return (false); + + return (true); +} /* }}} function ident_matches */ + +function ident_describe (ident, selector) /* {{{ */ +{ + var ret = ""; + var check_field = function (field) + { + if (ident[field].toLowerCase () != selector[field].toLowerCase ()) + { + if (ret != "") + ret += "/"; + ret += ident[field]; + } + }; + + check_field ("host"); + check_field ("plugin"); + check_field ("plugin_instance"); + check_field ("type"); + check_field ("type_instance"); + + if (ret == "") + return (null); + return (ret); +} /* }}} function ident_describe */ + +function def_draw_one (def, data, series_array) /* {{{ */ +{ + var chart_series = new Object (); + + chart_series.type = 'line'; + chart_series.pointInterval = data.interval * 1000.0; + chart_series.pointStart = data.first_value_time * 1000.0; + chart_series.data = data.data; + chart_series.lineWidth = 1; + chart_series.shadow = false; + chart_series.marker = { enabled: false }; + + if (def.legend) + chart_series.name = def.legend; + else if (def.ds_name) + chart_series.name = def.ds_name; + + if (def.area) + chart_series.type = 'area'; + + if (def.stack) + chart_series.stacking = 'normal'; + + if ((def.color) && (def.color != 'random')) + chart_series.color = def.color; + + series_array.push (chart_series); +} /* }}} function def_draw_one */ + +function def_draw (def, data_list, series_array) /* {{{ */ { - var x_data = []; - var y_data = []; var i; - if (!inst || !def || !data) - return; + for (i = 0; i < data_list.length; i++) + { + if ((def.ds_name) && (def.ds_name != data_list[i].data_source)) + continue; + if (!ident_matches (def.select, data_list[i].file)) + continue; - for (i = 0; i < data.length; i++) + def_draw_one (def, data_list[i], series_array); + } +} /* }}} function def_draw */ + +/* + * Given one metric definition, returns the appropriate data from the data + * list. */ +function def_get_data (def, data_list) +{ + var i; + + for (i = 0; i < data_list.length; i++) { - var ds = data[i]; + if ((def.ds_name) && (def.ds_name != data_list[i].data_source)) + continue; + if (!ident_matches (def.select, data_list[i].file)) + continue; - var j; - var x = []; - var y = []; - var x_val; + return (data_list[i]); + } + return; +} - x_val = ds.first_value_time; +function def_to_rickshaw_one (def, data) +{ + var series = { + data: [] + }; + var i; - for (j = 0; j < ds.data.length; j++) - { - var y_val = ds.data[j]; + if (def.legend) + series.name = def.legend; - x.push (x_val); - y.push (y_val); + if (def.color) + series.color = def.color; - x_val += ds.interval; - } + for (i = 0; i < data.data.length; i++) + { + var x = data.first_value_time + (i * data.interval); + var y = data.data[i]; - x_data.push (x); - y_data.push (y); + series.data.push ({'x': x, 'y': y}); } - inst.raphael.clear (); - if (def.title) - inst.raphael.g.text (250, 15, def.title); - if (def.vertical_label) - inst.raphael.g.text (5, 100, def.vertical_label).rotate (270); - inst.raphael.g.linechart(50, 25, 500, 150, x_data, y_data, {axis: "0 0 1 1"}); + return (series); } -function json_graph_update (index) +function def_to_rickshaw (graph_def, data_list) { - var inst; - var def; - var params; + var graph_config = { + renderer: 'line', + series: [] + }; + var graph; + var i; - inst = c4.instances[index]; - if (!inst) + for (i = 0; i < graph_def.defs.length; i++) + { + var def = graph_def.defs[i]; + var data = def_get_data (def, data_list); + var series; + + if (!data) + continue; + + series = def_to_rickshaw_one (def, data); + if (series) + graph_config.series.push (series); + + //if (def.area) + // graph_config.renderer = 'area'; + } + + return (graph_config); +} + +function inst_draw_rickshaw (inst, def, data_list) +{ + var graph_config = def_to_rickshaw (def, data_list); + + graph_config.element = document.getElementById (inst.container); + + inst.chart = new Rickshaw.Graph (graph_config); + inst.chart.render (); + + var x_axis = new Rickshaw.Graph.Axis.Time({ + graph: inst.chart + }); + x_axis.render (); + + var y_axis = new Rickshaw.Graph.Axis.Y({ + graph: inst.chart + }); + y_axis.render (); +} + +function inst_draw (inst, def, data_list) +{ + inst_draw_rickshaw (inst, def, data_list); +} + +function inst_redraw (inst, def, data_list) /* {{{ */ +{ + var series_array; + var i; + + if (!inst.chart) + return (inst_draw (inst, def, data_list)); + + series_array = new Array (); + for (i = def.defs.length - 1; i >= 0; i--) + def_draw (def.defs[i], data_list, series_array); + + if (inst.chart.series.length != series_array.length) + { + alert ("inst.chart.series.length != series_array.length"); return; + } + + for (i = inst.chart.series.length - 1; i >= 0; i--) + { + series_array[i].visible = inst.chart.series[i].visible; + inst.chart.series[i].remove (/* redraw = */ false); + } + + for (i = 0; i < series_array.length; i++) + inst.chart.addSeries (series_array[i], /* redraw = */ false); + + inst.chart.redraw (); +} /* }}} function inst_redraw */ - def = graph_get_defs (inst); +function inst_fetch_data (inst, begin, end) /* {{{ */ +{ + var def; + var params; + + def = inst_get_defs (inst); if (!def) return; - if (!inst.raphael) - inst.raphael = Raphael ("c4-graph" + index); - params = instance_get_params (inst); params.action = "instance_data_json"; - params.begin = inst.begin; - params.end = inst.end; + params.begin = begin || inst.begin; + params.end = end || inst.end; + params.resolution = (params.end - params.begin) / c4.config.width; $.getJSON ("collection.fcgi", params, function (data) { - instance_draw (inst, def, data); + inst_redraw (inst, def, data); }); /* getJSON */ -} /* json_graph_update */ +} /* }}} inst_fetch_data */ + +function json_graph_update (index) /* {{{ */ +{ + var inst; + + inst = c4.instances[index]; + if (!inst) + return; + + if (!inst.container) + inst.container = "c4-graph" + index; + + inst_fetch_data (inst); +} /* }}} json_graph_update */ function format_instance(inst) { @@ -380,6 +622,26 @@ function zoom_out (graph_id) /* {{{ */ return (zoom_relative (graph_id, (-1.0 / 3.0), (1.0 / 3.0))); } /* }}} function zoom_earlier */ +function graph_recalc_width () /* {{{ */ +{ + var tmp; + + tmp = $("#layout-middle-center").width (); + if (!tmp) + return; + + if (tmp < 324) + tmp = 324; + + c4.config.width = tmp; + c4.config.height = Math.round (tmp / 1.61803398874989484820); + $(".graph-json").each (function () + { + $(this).width (c4.config.width); + $(this).height (c4.config.height); + }); +} /* }}} function graph_recalc_width */ + $(document).ready(function() { /* $("#layout-middle-right").html (""); */ $("#search-form").append (""); @@ -436,14 +698,16 @@ $(document).ready(function() { + "
!
" + "" + "
" - + "
←
" - + "
−
" + + "
\u2190
" + + "
\u2212
" + "
+
" - + "
→
" + + "
\u2192
" + "
" ); }); + graph_recalc_width (); + var i; for (i = 0; i < c4.instances.length; i++) {