Store bootgrid settings in local browser storage

[8191]

Important notices

Before you add a new report, we ask you kindly to acknowledge the following:

• I have read the contributing guide lines at https://github.com/opnsense/core/blob/master/CONTRIBUTING.md
• I am convinced that my issue is new after having checked both open and closed issues at https://github.com/opnsense/core/issues?q=is%3Aissue

Is your feature request related to a problem? Please describe.

Many MVC pages make use of jQuery Bootgrid (by using the OPNsense specific UIBootgrid wrapper). Bootgrid allows the user to configure many things:

• Search filters
• Elements displayed per page
• Column visibility
• Selected page

Unfortunately these settings are lost as soon as the user leaves the page.

It would be a great feature to persist those settings on a per-user basis. When a user opens a settings page they've already modified before (e.g. changed visible columns, number of rows per page, etc.) the previous settings are restored. Settings could be stored in the local browser storage.

Describe the solution you like
The PR rstaib/jquery-bootgrid#392 could be incorporated into OPNsense's jQuery Bootstrap.

Note: this is a manual task as OPNsense's jQuery Bootgrid already diverged from its upstream.
Question: where is "the master-copy" of jQuery boostrap? In the opnsense/core or in opnsense/jquery-bootstrap repository?

Describe alternatives you considered
Implementation of a "workaround" into the UIBootgrid function

core/src/opnsense/www/js/opnsense_bootgrid_plugin.js

Line 59 in 6439c03

$.fn.UIBootgrid = function (params) {

to simulate restoring the settings, e.g. using

var rowCount = localStorage.getItem(grid_id+"_rowCount");
$(this_grid).find('.bootgrid-pagination-count ul.dropdown-menu li a[data-action=' + rowCount + ']').trigger('click');

Not really nice and most likely time consuming for things like selecting columns.

To clarify/discuss

• Which settings to persist
• Design (implement in opnsense_bootgrid_plugin (UIBootgrid) or in jquery-bootgrid)
• How to uniquely identify a bootgrid (is the HTML ID sufficient or do we need to consider the browser URL as well?)

[AdSchellevis]

@8191 I've kept https://github.com/opnsense/jquery-bootgrid up to date with our changes in core, but it has been a long time since I last tried to really build the component. I don't mind accepting PR's on our fork as long as the grunt build still works. Unfortunately the original component seems more or less dead since we start using it.

[8191]

@AdSchellevis While creating PR opnsense/jquery-bootgrid#5 I recognized that parts of this functionality is already implemented in the OPNsense Bootgrid plugin wrapper:

Store settings:

core/src/opnsense/www/js/opnsense_bootgrid_plugin.js

Lines 398 to 422 in 6439c03

	this.store_selection = function() {
	if ($(this_grid).data('store-selection') === true && window.localStorage) {
	const grid_id = window.location.pathname + '#' + this_grid.attr('id');
	// hook event handler to catch changing column selections
	$("#"+this_grid.attr('id')+"-header .dropdown-item-checkbox").unbind('click').click(function () {
	let settings = {};
	try {
	settings = JSON.parse(window.localStorage.getItem(grid_id));
	if (settings == null) {
	settings = {};
	}
	} catch (e) {
	settings = {};
	}
	if ($(this).attr('name') !== undefined) {
	settings[$(this).attr('name')] = $(this).is(':checked');
	}
	window.localStorage.setItem(grid_id, JSON.stringify(settings));
	});
	// hook event handler to catch changing row counters
	$("#"+this_grid.attr('id')+"-header .dropdown-item-button").unbind('click').click(function () {
	window.localStorage.setItem(grid_id+"_items", $(this).data('action'));
	});
	}
	};

Load settings:

core/src/opnsense/www/js/opnsense_bootgrid_plugin.js

Lines 384 to 388 in 6439c03

	const settings = JSON.parse(window.localStorage.getItem(grid_id));
	if (settings != null) {
	$.each(settings, function(field, value){
	$('#'+ this_grid.attr('id')).find('[data-column-id="' +field+ '"]').data('visible', value);
	});

Mentioned functionality requires each bootgrid to specify data-store-selection="true", which currently is solely the case for the alias view of the firewall module. I believe this functionality is useful for all bootgrids - I cannot imagine any downside.

So from my point of view there are two approaches now:

1. Pull Store sort order, column selection and row count in browser's local storage jquery-bootgrid#5 and remove stated functionality from core (PR to be created)
2. Reject Store sort order, column selection and row count in browser's local storage jquery-bootgrid#5 and extend the functionality in core to also persist sorting order

Approach 2 has some down-sides from my point of view; it's actually a workaround not a solution (it's the wrong place to do something like this in a wrapper I'd say). The current implementation changes the order of the row count drop-down box, so that the stored selection is always on first position. Might be a bit awkward as maybe a high number is on the first place:

How to proceed?

[AdSchellevis]

@8191 I agree the jquery-bootgrid is the logical place, back in 2019 I was probably still hoping the original project would come to live at some point, so I rather stayed away from changing the original source. I used this quite often in other projects, but for some reason never enabled it by default on the other grids.

Let's go for option 1, I will probably need some time to review and test before we can release this by the way.

[8191]

@AdSchellevis Great! I'll prepare a PR for core then.