NEW Monitoring graph

NOYB · Mar 11, 2016, 1:18 AM

I'm guessing the labels across the bottom are in the next PR ;)

I'll make comments for each of the PRs on github.

Yup. Future graph meta data PR. Maybe tonight.
Thanks.

whitexp · Mar 11, 2016, 1:29 AM

@whitexp:

Interactive Graph
Error: SyntaxError: Unexpected token F

Did you just upgrade? Are you on 64 or 32bit? What graphs do you have selected?

In Chrome right click the screen and click Inspect. Then choose the Network tab and refresh the browser. Click the update button on the WebGUI and then you should see a line item with rrd_fetch_json.php at the bottom of the dev tools window. If you click that then choose the response tab within it you should see what the server responded with. Are there any errors in there?

Crash report begins. Anonymous machine information:

amd64
10.3-RC1
FreeBSD 10.3-RC1 #446 22a5a00(RELENG_2_3): Thu Mar 10 07:19:29 CST 2016 root@pfs23-amd64-builder:/usr/home/pfsense/pfsense/tmp/obj/usr/home/pfsense/pfsense/tmp/FreeBSD-src/sys/pfSense

Crash report details:

PHP Errors:
[10-Mar-2016 15:07:02 America/Sao_Paulo] PHP Fatal error: Call to undefined function rrd_fetch() in /usr/local/www/rrd_fetch_json.php on line 125
[10-Mar-2016 15:14:08 America/Sao_Paulo] PHP Fatal error: Call to undefined function rrd_fetch() in /usr/local/www/rrd_fetch_json.php on line 125
[10-Mar-2016 16:45:11 America/Sao_Paulo] PHP Fatal error: Call to undefined function rrd_fetch() in /usr/local/www/rrd_fetch_json.php on line 125

NOYB · Mar 11, 2016, 4:09 AM

You know what would be really slick? User programed quick link graph buttons.

See attached image.

samoth · Mar 11, 2016, 5:15 AM

I'm still not seeing any data in my graphs. Everything shows at zero.

Is there a setting I'm missing?

Thanks,
Tom

biggsy · Mar 11, 2016, 7:25 AM

The label on the Y axis should be "time/%", rather than "seconds/%" so that the values are consistent with those in the table - e.g., "4.0 ms" not "4.0 m". Either that or "ms/%" and no units on the axis.

cmb · Mar 11, 2016, 7:48 AM

@whitexp:

PHP Errors:
[10-Mar-2016 15:07:02 America/Sao_Paulo] PHP Fatal error: Call to undefined function rrd_fetch() in /usr/local/www/rrd_fetch_json.php on line 125

That means you don't have pecl-rrd, which has been a dependency since this was in place. What do you see for 'pkg info|grep pecl-rrd'? Should look something like:

[2.3-BETA][root@fw1]/root: pkg info|grep pecl-rrd
pecl-rrd-1.1.3_2               PHP bindings to rrd tool system

jdillard · Mar 11, 2016, 4:42 PM

@samoth:

I'm still not seeing any data in my graphs. Everything shows at zero.

Is there a setting I'm missing?

Thanks,
Tom

are you on 32bit? Have you updated to the latest snapshot?

jdillard · Mar 11, 2016, 4:44 PM

@NOYB:

You know what would be really slick? User programed quick link graph buttons.

See attached image.

That is a possibility with the way the default values will be stored. You would basically just store N set of default values instead on one set. But first things first, let me get the defaults working then you can play around with that.

jdillard · Mar 12, 2016, 4:45 AM

Just bumped to Version 0.9, fixes include:

Added "Save as Defaults" option
Merged NOYBs metadata PR (may need to be tweaked to work with smaller screens, but I think it is a nice touch)

Note: There is a new option to hide the settings panel and that is set to be hidden by default. I will most likely change that to be shown be default next week, but that is a different issue. If your settings panel is hidden goto System > General Setup to show it.

I'll circle back around to the units issues next week.

samoth · Mar 12, 2016, 5:32 AM

@jdillard:

@samoth:

I'm still not seeing any data in my graphs. Everything shows at zero.

Is there a setting I'm missing?

Thanks,
Tom

are you on 32bit? Have you updated to the latest snapshot?

Running 64bit. Just got it working by turning on RRD graphs in the DHCP server. Now all the graph choices work.

MikeV7896 · Mar 12, 2016, 2:26 PM

The "Save Default" function doesn't seem to work. After I click it, all I get is an error… "There was an error loading the left Y axis". The error appears regardless of what I set the left axis to. I haven't tried also setting the right axis then saving.

grandrivers · Mar 12, 2016, 3:20 PM

any way on full installs to retain more data points (less data set consolidation) for at least up to 3 months ?

jdillard · Mar 12, 2016, 3:34 PM

@virgiliomi:

The "Save Default" function doesn't seem to work. After I click it, all I get is an error… "There was an error loading the left Y axis". The error appears regardless of what I set the left axis to. I haven't tried also setting the right axis then saving.

There is an issue on certain time periods, this commit fixed it: https://github.com/pfsense/FreeBSD-ports/commit/181e6d7f75832447c4aa2c19314c25fefe8e29d5

jdillard · Mar 12, 2016, 3:36 PM

@grandrivers:

any way on full installs to retain more data points (less data set consolidation) for at least up to 3 months ?

I have no plans to change the RRD data itself (expect maybe to add more data like temp etc) and as far as I know that isn't on anyone else's radar.

grandrivers · Mar 12, 2016, 3:47 PM

ok just curious was trying to find an event seem to have been averaged out already

NOYB · Apr 6, 2016, 2:24 AM

@jdillard:

@NOYB:

You know what would be really slick? User programed quick link graph buttons.

See attached image.

That is a possibility with the way the default values will be stored. You would basically just store N set of default values instead on one set. But first things first, let me get the defaults working then you can play around with that.

Think everything is working now. See attached image.

Pull request submitted: https://github.com/pfsense/FreeBSD-ports/pull/96

UI Status: All Working! Whoo! Hoo!

Click plus icon to add current graph as quick link.
Click trash can icon to delete currently selected quick link (visible only if quick links exist).
Drag and drop to arrange quick link order.
Click save icon to save changes (visible only if dirty).
Page dirty exit warning.

This is so cool. James Dean quick links. 8)
https://www.youtube.com/watch?v=7guzEuV7j9c

To do:

Merge pull request.
https://github.com/pfsense/FreeBSD-ports/pull/96

The graph panel heading (html).


## 
			Interactive Graph

		Loading Graph...
		if (is_array($config['rrd']['quicklinks'])) {
			$quicklinks_visibility = "visible";
		} else {
			$quicklinks_visibility = "invisible";
		}
?>

*   <a id="quicklinks_save" class="invisible"></a> 

*   <a id="quicklink_delete" class="<?=$quicklinks_visibility?>"></a> 

*   <a id="quicklink_add"></a> 

*   <a id="<?=$key?>" title="<?=$quicklink['title']?>" data-category="<?=$quicklink['category']?>"></a> 

*   <a id="quicklinktitle"></a>

The click event handler (jquery).

// Load graph of clicked quick link.
// Using long form .on() delegated event here because click event is not bound to dynamically added elements (quick links).  Thus the short form .click() does not work.
$( '#quicklinks_list' ).on( "click", "[id^=quicklink]", function() {
	if ($(this).attr('data-category')) {
		$("#loading-msg").show();
		applySettings($(this).attr('data-category').trim());
		if ( !$( "#auto-update" ).length || $( "#auto-update" ).val() == 0) {	// If auto-update is enabled then it will draw the graph.  Don't draw the graph twice.
			draw_graph(getOptions());
		}
		selected_quicklink(this);
	}
});


The sort/order handler (jquery).

// Make quick links sortable.
$('#quicklinks_list').sortable({
	cursor: 'grabbing',
	update: function(event, ui) {
		reindex_quicklinks(ui.item.parent('ul'));
	}
});


The add quick link handler (jquery).

// Add quick link for the current graph settings.
$('#quicklink_add').click(function () {
	title = prompt("Enter a title for the quick link.", "");
	$( "#selectedquicklinktitle" ).text(title);

	id = 'quicklink999';
	graph_settings = getOptions();
	quicklink_icon = 'fa-' + $( "#graph-type" ).val() + '-chart';

	quicklink_list_item_html = '*   <a id="' + id + '" title="' + title + '" data-category="' + graph_settings + '"></a>';

	$(quicklink_list_item_html)
	.appendTo($( "#quicklinks_list" ));

	_this = $( "#quicklinks_list #" + id );
	selected_quicklink(_this);

	reindex_quicklinks($( "#quicklinks_list" ));
});


The delete quick link handler (jquery).

// Delete the selected quick link from the quick links list.
$('#quicklink_delete').click(function () {
	$( "#quicklinks_list [id^=quicklink]" ).each(function() {
		if ($(this).prop('selected')) {
			$(this).parent().remove('li');
			$( "#quicklinktitle" ).text("");
			reindex_quicklinks($( "#quicklinks_list" ));
		}
	});
});


The save  quick links handler (jquery).

// Save quick links changes to the config, clear dirty flag, and suppress save icon.
$( "#quicklinks_save" ).click(function() {
	updateQuicklinks();
	dirty = false;
	$( "#quicklinks_save" ).removeClass("visible");
	$( "#quicklinks_save" ).addClass("invisible");
	$('[name=quicklinksForm]').submit();
});


The leaving page dirty handler  (jquery).

// Provide a warning message if the user tries to leave the page with unsaved changes.
$(window).bind('beforeunload', function(){
	if (dirty) {
		return ("");
	} else {
		return undefined;
	}
});


The quick links re-index function (jquery).

// Re-index the quick links order and mark dirty.
function reindex_quicklinks(section) {
	var row = 0;

	// Quick links may have all been deleted.  So conceal the delete icon until at least one quick link is detected.
	$( "#quicklink_delete").removeClass("visible");
	$( "#quicklink_delete").addClass("invisible");

	section.find('a').each(function() {
		if(this.id) {
			$(this).attr("id", "quicklink" + row);
			row++;

			// Quick links exist (detected).  So display the delete icon.
			$( "#quicklink_delete").removeClass("invisible");
			$( "#quicklink_delete").addClass("visible");
		}
	});
	// Quick links changes have been made.  So display the save icon.
	$( "#quicklinks_save" ).removeClass("invisible");
	$( "#quicklinks_save" ).addClass("visible");
	dirty = true;
}


The selected quick link styling function (jquery).

// Style the selected and unselected quick links.
function selected_quicklink(selected) {
	unselectedquicklinkcolor = 'silver';
	selectedquicklinkcolor = $( "#quicklink_add" ).css("color");

	$( "#quicklinks_list [id^=quicklink]" ).css("color", unselectedquicklinkcolor);
	$(selected).css("color", selectedquicklinkcolor);

	$( "#quicklinks_list [id^=quicklink]" ).prop('selected', false);
	$(selected).prop('selected', true);

	$( "#quicklinktitle" ).text($(selected).attr("title"));
}

// Do on page load to set initial quick links styling.
if ("") {	// Returning to the previous selected quick link (ex: after save).
	_this = $( "#quicklinks_list #" );
	_this.prop('selected', true);
	selected_quicklink(_this);
} else {							// Before any quick link is selected.
	selected_quicklink(null);
}


The quick links save form (html).

The quick links update function (jquery).

function updateQuicklinks() {
var quicklinks = '';

$( "#quicklinks_list [id^=quicklink]" ).each(function(idx, quicklink) {
	quicklinks += quicklink.id + '*c^o#l?o@n*' + quicklink.title + '*c^o#l?o@n*' + quicklink.dataset.category + '*c^o#m?m@a*';

	if ($(quicklink).prop('selected')) {
		$('input[name=selected_quicklink]', $('#quicklinksSequence_form')).val(quicklink.id);
	}
});

$('input[name=quicklinks]', $('#quicklinksSequence_form')).val(quicklinks);

}


The quick links save form post processing (php).

if ($_POST && $_POST['quicklinks']) {

$quicklinks_string = preg_replace('/\*c\^o\#m\?m\@a\*$/', '', $_POST['quicklinks']);
$quicklinks_strings = explode('*c^o#m?m@a*', $quicklinks_string);

foreach ($quicklinks_strings as $quicklink_string) {
	$quicklink = explode('*c^o#l?o@n*', $quicklink_string);
	$quicklinks[$quicklink[0]] = array('title' => $quicklink[1], 'category' => $quicklink[2]);
}

$config['rrd']['quicklinks'] = $quicklinks;

write_config($desc = gettext("Status Monitoring Quick Links Saved (backup, no sync): "), $backup = true, $write_config_only = true);

}

// Load the specified quick link instead of the default.
if ($_POST && $_POST['selected_quicklink']) {
$selected_quicklink = $_POST['selected_quicklink'];
$pconfig['category'] = $config['rrd']['quicklinks'][$selected_quicklink]['category'];
}


Unselect if changed (jquery).

var graphOptions_previous;

function getOptions() {
	var graphLeft = $( "#graph-left" ).val();
	var graphRight = $( "#graph-right" ).val();

. . .
var graphOptions = 'left=' + graphLeft + '&right=' + graphRight + '&start=' + startDate + '&end=' + endDate + '&timePeriod=' + timePeriod + '&resolution=' + resolution + '&graphtype=' + graphtype + '&invert=' + invert ;

	// If graph options have changed, un-select any quick link.
	if (graphOptions != graphOptions_previous) {
		selected_quicklink(null);
	}
	graphOptions_previous = graphOptions;

	return graphOptions;
}


A few hard coded quick links saved to config for development.

$quicklinks = array(
"quicklink0" => array("title" => "Default", "category" => "left=system-processor&right=&start=&end=&timePeriod=-1d&resolution=300&graphtype=line&invert=true&autoUpdate=0"),
"quicklink1" => array("title" => "Quality 1 Hour", "category" => "left=WAN_DHCP-quality&right=&start=&end=&timePeriod=-1h&resolution=60&graphtype=line&invert=true&autoUpdate=60"),
"quicklink2" => array("title" => "Quality 8 Hour", "category" => "left=WAN_DHCP-quality&right=&start=&end=&timePeriod=-8h&resolution=300&graphtype=line&invert=true&autoUpdate=300"),
"quicklink3" => array("title" => "Traffic", "category" => "left=lan-traffic&right=&start=&end=&timePeriod=-1d&resolution=300&graphtype=line&invert=true&autoUpdate=300")
);

$config['rrd']['quicklinks'] = $quicklinks;
write_config($desc = gettext("Status Monitoring Quick Links Saved (no backup, no sync): "), $backup = false, $write_config_only = true);

?>


![StatusMonitoringQuickLinks5.jpg_thumb](/public/_imported_attachments_/1/StatusMonitoringQuickLinks5.jpg_thumb)
![StatusMonitoringQuickLinks5.jpg](/public/_imported_attachments_/1/StatusMonitoringQuickLinks5.jpg)

maverick_slo · Mar 13, 2016, 6:04 PM

Hmmm…

NOYB · Mar 13, 2016, 8:57 PM

@maverick_slo:

Hmmm…

There is a fix for that. Mentioned by jdillard previously. He's committed it but hasn't rev'ed the package yet. In the meantime not using resolution of 1 minute should work.

peter808 · Mar 14, 2016, 2:59 PM

Just startet to try the new 2.3 beta. Looks great at first view.

Although I am not able to monitor any data (after some reading here I thought that bug had been solved already):

jdillard · Mar 14, 2016, 3:30 PM

@peter808:

Just startet to try the new 2.3 beta. Looks great at first view.

Although I am not able to monitor any data (after some reading here I thought that bug had been solved already):

Were you on a fresh install? Do you have a crash report notification like whitexp had?