NEW Monitoring graph

[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.

[jdillard]

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]

@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]

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]

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

[jdillard]

@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]

@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]

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

[NOYB]

@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]

Hmmm…

[NOYB]

@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]

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]

@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?

[peter808]

@jdillard:

@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?

Yep, fresh install.

I also had some crash reports, sent them to the devs via the WebGUI and deleted them afterwards  ???

Any chance of finding them again?

edit: right now a new report has arrived:

amd64
10.3-RC2
FreeBSD 10.3-RC2 #455 56930d7(RELENG_2_3): Mon Mar 14 08:12:57 CDT 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:
[14-Mar-2016 16:26:54 Europe/Berlin] PHP Fatal error:  Call to undefined function rrd_fetch() in /usr/local/www/rrd_fetch_json.php on line 125
[14-Mar-2016 16:27:00 Europe/Berlin] PHP Fatal error:  Call to undefined function rrd_fetch() in /usr/local/www/rrd_fetch_json.php on line 125
[14-Mar-2016 16:32:11 Europe/Berlin] PHP Fatal error:  Call to undefined function rrd_fetch() in /usr/local/www/rrd_fetch_json.php on line 125

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

[jdillard]

@NOYB:

@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.

I just revved it so the update should show up shortly.

[jdillard]

@peter808:

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

What does pkg info|grep rrd say?

[maverick_slo]

Hello!

Im on latest snap and bubbles doesnt seem to have right values.
See attached.

BR,
G

[jdillard]

@maverick_slo:

Hello!

Im on latest snap and bubbles doesnt seem to have right values.
See attached.

BR,
G

Make sure you are looking at the correct axis

[peter808]

@jdillard:

What does pkg info|grep rrd say?

[2.3-BETA][root@pfvm.localdomain]/root: pkg info|grep rrd
pecl-rrd-1.1.3_2              PHP bindings to rrd tool system
rrdtool-1.5.5_1                Round Robin Database Tools

edit:
and now another crash as follows:
Crash report begins.  Anonymous machine information:

amd64
10.3-RC2
FreeBSD 10.3-RC2 #455 56930d7(RELENG_2_3): Mon Mar 14 08:12:57 CDT 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:
[14-Mar-2016 18:55:02 Europe/Berlin] PHP Fatal error:  Call to undefined function rrd_fetch() in /usr/local/www/rrd_fetch_json.php on line 123
[14-Mar-2016 18:55:11 Europe/Berlin] PHP Fatal error:  Call to undefined function rrd_fetch() in /usr/local/www/rrd_fetch_json.php on line 123

[maverick_slo]

@jdillard:

@maverick_slo:

Hello!

Im on latest snap and bubbles doesnt seem to have right values.
See attached.

BR,
G

Make sure you are looking at the correct axis

Ummm green bubble should have 25+ ms as value not below. Or am I missing something?