NEW Monitoring graph

NOYB

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

monitoring.PNG_thumb

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):

snip_20160314155607.png_thumb

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

monitoring.png_thumb

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?

jdillard

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

Green says "(right axis)" and is between the 15 and 20 ticks on the right axis

maverick_slo

Yes but look at the graph and bubbles.
IMO it is showing me wrong data.

It should show 25+ not between 15-20…

maverick_slo

OMG sorry, sorry.
I feel like a dumbass :-[
All clear fine and dandy :)

peter808

@jdillard: do you need any further info?

peter808

Just tested it with an upgrade install from 2.2 to 2.3 beta: everything under "Monitoring" works, so it just seems to be a problem with the fresh install.

Maybe that helps.

jdillard

@peter808:

Just tested it with an upgrade install from 2.2 to 2.3 beta: everything under "Monitoring" works, so it just seems to be a problem with the fresh install.

Maybe that helps.

Thanks Peter. I saw it was an amd64 image, but which platform and type did you use to install? or the full name of the file would work.

peter808

pfSense-2.3-BETA-amd64-20160313-1302.iso

NOYB

Quick links pull request submitted.
https://github.com/pfsense/FreeBSD-ports/pull/86

Quick Links Details:
https://forum.pfsense.org/index.php?topic=107790.90

Branch:
Status_/Monitoring-Quick_Links
https://github.com/NOYB/FreeBSD-ports/tree/Status/Monitoring-_Quick_Links

Commit:
Status / Monitoring - Quick Links
Genesis
https://github.com/NOYB/FreeBSD-ports/commit/7f55b614a61ed100b6967c2da05a1255ab822e1f