Skip to content

Commit

Permalink
added top n option to graph search ( fixes #115)
Browse files Browse the repository at this point in the history 
It would be useful to visualize just how much each of the top queries contribute to the aggregated values on the graph. We already have support to pivot based on hostnames, adding a pivot based on checksums would take a little more work.

The major change is that the current search page can fire ajax requests for both the table and graph result data simultaneously because they have no particular dependencies on each other. To get the top N checksums we need the data from the table result first.

This change will have to enable that -- when this checkbox is checked, we'll delay getting the graph results until the table results are returned, then use them to get the list of checksum values. Once we have those we can send the right data to the graph ajax request to make this happen.
  • Loading branch information
@gtowey
gtowey committed Aug 18, 2014
1 parent ed70381 commit c1302c2
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 18 deletions.
1 change: 1 addition & 0 deletions conf/sample.config.inc.php
View file
Expand Up @@ -333,6 +333,7 @@
'hostname_max' => 'clear|where',
'ts_min' => 'date_range|reldate|clear|where',
'pivot-hostname_max' => 'clear|pivot|select',
'pivot-checksum' => 'clear|pivot|select',
),
),
// custom fields
Expand Down
24 changes: 21 additions & 3 deletions lib/Anemometer.php
View file
Expand Up @@ -77,18 +77,27 @@ function __construct($conf)
*/
public function api()
{
$checksum_field_name = $this->data_model->get_field_name('checksum');
$hostname_field = $this->data_model->get_field_name('hostname');
$dimension_table = $this->report_obj->get_table_by_alias('dimension');

// special case for optional pivot on hostname
// mainly used to graph each host as a series
$hostname_field = $this->data_model->get_field_name('hostname');
if (get_var('dimension-pivot-'.$hostname_field) != null)
{
$dimension_table = $this->report_obj->get_table_by_alias('dimension');
$hosts = $this->report_obj->get_distinct_values($dimension_table, $hostname_field);
$this->report_obj->set_pivot_values('dimension-pivot-'.$hostname_field, $hosts);
} else if (get_var('dimension-pivot-'.$checksum_field_name) != null
and get_var("dimension-pivot-{$checksum_field_name}-use-values") != null) {
$values = explode('|',get_var("dimension-pivot-{$checksum_field_name}-use-values"));
for ($i=0; $i<count($values); $i++) {
$values[$i] = $this->translate_checksum($values[$i]);
}
$this->report_obj->set_pivot_values("dimension-pivot-{$checksum_field_name}", $values);
//$_GET["dimension-pivot-{$checksum_field_name}"] = get_var('plot_field');
}

// translate the checksum field from possible hex value
$checksum_field_name = $this->data_model->get_field_name('checksum');
$checksum = $this->translate_checksum(get_var("fact-{$checksum_field_name}"));
if (isset($checksum))
{
Expand Down Expand Up @@ -197,9 +206,14 @@ private function setup_data_for_graph_search($data=null)
$_GET['dimension-pivot-'.$data['hostname_field_name']] = get_var('plot_field');
$data['dimension_pivot_hostname_max'] = get_var('plot_field');
}
if (get_var('dimension-pivot-'.$data['checksum_field_name'])) {
$_GET['dimension-pivot-'.$data['checksum_field_name']] = get_var('plot_field');
$data['dimension_pivot_checksum'] = get_var('plot_field');
}

$data['ajax_request_url'] = site_url() . '?action=api&output=json2&noheader=1&datasource=' . $data['datasource'] . '&' . $this->report_obj->get_search_uri(array( 'dimension-'.$time));
$data['graph_permalink'] = site_url() . '?action=graph_search&datasource=' . $data['datasource'] . '&plot_field='.get_var('plot_field').'&'.$this->report_obj->get_search_uri(array( 'dimension-'.$time ));
$data['show_query_base_url'] = site_url() . '?action=show_query&datasource=' . $data['datasource'];
// now go get a url for the table results
$this->init_report();
$this->set_search_defaults('report_defaults', array('dimension-'.$time.'_start', 'dimension-'.$time.'_end', $data['checksum_field_name']));
Expand Down Expand Up @@ -471,6 +485,10 @@ public function show_query() {
$_GET['dimension-pivot-'.$data['hostname_field_name']] = get_var('plot_field');
$data['dimension_pivot_hostname_max'] = get_var('plot_field');
}
if (get_var('dimension-pivot-'.$data['checksum_field_name'])) {
$_GET['dimension-pivot-'.$data['checksum_field_name']] = get_var('plot_field');
$data['dimension_pivot_checksum'] = get_var('plot_field');
}
//$data = $this->setup_data_for_graph_search($data);

$_GET['table_fields'][] = get_var('plot_field');
Expand Down
77 changes: 63 additions & 14 deletions views/graph_search.php
View file
Expand Up @@ -53,6 +53,7 @@
<div class="span4" >
Checksum<br>
<input name="fact-<?php echo $checksum_field_name ?>" class="span4 typeahead" value="<?php echo get_var('fact-'.$checksum_field_name) ?>">
<input type="checkbox" name="<?php echo "dimension-pivot-{$checksum_field_name}" ?>" value='<?php echo $time_field_name ?>'<?php echo (isset($dimension_pivot_checksum) ? ' CHECKED ' : '') ?>> Show top queries as a separate series
</div>

<div class="span4">
Expand All @@ -79,7 +80,7 @@
</div>
<div class="span4">
<p align="center">
<input type="checkbox" id="autoscale_y" onclick="toggle_autoscale_y()"/> Auto-scale Y-axis on zoom
<input type="checkbox" id="autoscale_y" onclick="toggle_autoscale_y()" CHECKED/> Auto-scale Y-axis on zoom
</p>
</div>

Expand All @@ -94,10 +95,11 @@
// urls to retrieve data from
var GRAPH_DATA_URL = "<?php echo $ajax_request_url ?>";
var GRAPH_PERMALINK_URL = "<?php echo $graph_permalink; ?>";
var TABLE_BASE_URL = "<?php echo $ajax_table_request_url_base ?>"
var TABLE_URL_TIME_START_PARAM = "<?php echo $table_url_time_start_param ?>"
var TABLE_URL_TIME_END_PARAM = "<?php echo $table_url_time_end_param ?>"
var TABLE_BASE_URL = "<?php echo $ajax_table_request_url_base ?>";
var TABLE_URL_TIME_START_PARAM = "<?php echo $table_url_time_start_param ?>";
var TABLE_URL_TIME_END_PARAM = "<?php echo $table_url_time_end_param ?>";
var TIMEZONE_OFFSET = <?php echo $timezone_offset; ?> * 1000;
var SHOW_QUERY_BASE_URL = "<?php echo $show_query_base_url ?>";

// Setup options for the plot
var FLOT_OPTS = {
Expand Down Expand Up @@ -230,7 +232,7 @@ function setup_selection(theplot) {
}
var plot = $.plot(theplot, DATA, $.extend ( true, {}, FLOT_OPTS, new_plot_opts));
console.log(plot);

// need a date object to shove timestamp into for conversion to ANSI-type date string
d = new Date();

Expand Down Expand Up @@ -258,7 +260,7 @@ function setup_selection(theplot) {
url: new_table_data_url,
method: 'GET',
dataType: 'html',
success: show_table_data
success: refresh_table_data
});

// Throw the selected time values just under the graph for clarity
Expand All @@ -279,9 +281,44 @@ function setup_selection(theplot) {
function show_table_data(data) {
var report_table = $('#report_table');
report_table.html(data);
handle_top_n_graph_if_needed()
prettyPrint();
}

function refresh_table_data(data) {
var report_table = $('#report_table');
report_table.html(data);
prettyPrint();
}

function handle_top_n_graph_if_needed() {
checkbox = $("[name=<?php echo "dimension-pivot-{$checksum_field_name}" ?>]");
if (checkbox.is(":checked"))
{
var objs = $("#report_table tbody td:first-child a");
var checksums = [];
for (i=0; i<objs.length; i++) {
checksums.push( objs[i].text );
}
// Store references to the initial start/end times for graph resets.
var initial_start_time = $('#dimension-ts_min_start').val();
var initial_end_time = $('#dimension-ts_min_end').val();

// URL to get data for the table using the base time values on the page. This is also used to 'reset' the table.
var url_start_end_params = '&' + escape(TABLE_URL_TIME_START_PARAM) + '=' + escape(initial_start_time) + '&' + escape(TABLE_URL_TIME_END_PARAM) + '=' + escape(initial_end_time);
var checkbox_base_name = checkbox.attr("name");
var plot_field_value = $("[name=plot_field] option:selected")[0].text;
var FULL_GRAPH_URL = GRAPH_DATA_URL + url_start_end_params + "&" + checkbox_base_name + "=" + plot_field_value + "&" + checkbox_base_name + "-use-values" + "=" + checksums.join('|');
console.log("Fetching graph results (top n query): " + FULL_GRAPH_URL );
$.ajax({
url: FULL_GRAPH_URL,
method: 'GET',
dataType: 'json',
success: new_plot_data
});
}
}

function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
Expand Down Expand Up @@ -369,14 +406,26 @@ function toggle_autoscale_y()
$('#permalink_btn').attr('href', GRAPH_PERMALINK_URL + url_start_end_params);
});

// kick off the initial AJAX call to get the data to plot for the graph
console.log("Fetching graph results: " + GRAPH_DATA_URL + url_start_end_params);
$.ajax({
url: GRAPH_DATA_URL + url_start_end_params,
method: 'GET',
dataType: 'json',
success: new_plot_data
});
top_n = $("[name=<?php echo "dimension-pivot-{$checksum_field_name}" ?>]");
if (!top_n.is(":checked")) {
// kick off the initial AJAX call to get the data to plot for the graph
console.log("Fetching graph results: " + GRAPH_DATA_URL + url_start_end_params);
$.ajax({
url: GRAPH_DATA_URL + url_start_end_params,
method: 'GET',
dataType: 'json',
success: new_plot_data
});
} else {
console.log("updating labelFormatter in graph!");
FLOT_OPTS['legend'].labelFormatter = function (label, series) {
if (/^[0-9A-Z]+$/.test(label) ) {
return '<a href="' + SHOW_QUERY_BASE_URL + '&checksum='+label+'">'+label+'</a>';
}
return label;
}
console.log(FLOT_OPTS);
}

// kick off the initial AJAX call to get the data for the table below the graph
console.log("Fetching initial table results: "+table_url_now);
Expand Down
11 changes: 10 additions & 1 deletion views/report_json2.php
View file
Expand Up @@ -36,7 +36,16 @@

foreach ($series as $col)
{
$finalfingdata[] = array( 'label' => $col, 'data' => $wtfdata[$col]);
// this is intended to capture checksum values when we pivot on checksums
// and convert them to hex. Done here because Javascript can't handle large enough
// int values to convert them w/out loss of precision.
// this may have some unintended consequences, but it's the easist way to solve the JS
// limitation for now
$col_label = $col;
if (is_numeric($col_label)) {
$col_label = dec2hex($col_label);
}
$finalfingdata[] = array( 'label' => $col_label, 'data' => $wtfdata[$col]);
}
print json_encode($finalfingdata);

Expand Down

0 comments on commit c1302c2

Please sign in to comment.