Nested scrolling on the firewall aliases screen

[Jyling]

Hey Devs,

Could you be at all convinced to remove the nested scrolling? It is the worst thing that happened to web development and the Internet, of all things. Creates a mess on web pages. If you could code the alias page the same as rules page, it would be ideal. There are probably a few more screens around the UI that have the same nested scrolling and could benefit from its removal.
You've already made a huge improvement to the alias editor, by allowing plain-text network lists, so the above will be icing on a cake.

Since we are on the topic of the plain-text network boxes, they are incredibly slow and use high CPU even with only a handful of entries. Having to Save twice is also bit counterintuitive.

Also the lobby dashboard uses high CPU, pins 1 core to 100%. Could you perhaps slow down the graphs to refresh every 2-3 seconds?

And by the way, the animated sliding notice under the aliases that causes the Apply button to slide up is a bit annoying. Right when I have to quickly configure routers, the button is sliding from under the mouse cursor, as if teasing me. This is actually not fun, having to chase it a few dozen times, under pressure. I admit I cursed a few times, during the migration.

[Patrick M. Hausen]

Seconded. Just make the single page longer and let us use the browser's scroll bar.

[meyergru]

+1

[franco]

This is going to be a long discussion. To start with some data points:

We've used a framework called "Bootgrid" for all MVC code up to version 25.1.x. Bootgrid is old and its last GitHub update was 10 years ago:

http://www.jquery-bootgrid.com/
https://github.com/rstaib/jquery-bootgrid

With that in mind, the flexibility and extensibility of Bootgrid is rather.. err... ancient and futile.

Since 25.7 we switched to "Tabulator" which seems to enjoy a healthy life (now anyway) and is super extensible:

https://tabulator.info/
https://github.com/olifolkerd/tabulator

Given the last release was in January this year and there hasn't been an commit in 4 months but such is the natural way of JS frameworks.

Look at the cool stuff that Tabulator can do!

https://tabulator.info/examples/6.3

Now in part Tabulator was also chosen for this flexibility and extensibility and therefore made mostly compatible with Bootgrid integration. There were some bugs but the switch went rather well in 25.7. Not a lot of people noticed. We were also nervous about it and sometimes unsure. The overall result is actually very good and effective.

The kicker: having moved most pages to MVC over the last decade (in core that is 82% done now by measure of counting the remaining src/www/*.php files and comparing to the initial commit, usr/local/www/*.php to be exact since the directories moved) we've reached a point where the rules pages need to be converted. Some people asked for drag and drop, inline edits and other fancy things that are hard to do with static tables still in the static PHP files (as they are not even use Bootgrid after all these years). Tabulator is our choice to go forward with that remaining 18% of mostly complex and UX intense pages that is firewall filter and NAT rules amongst others. You can already see a large batch of the work carried out in the rules automation GUI by Cedrik which used to be a fancy word for MVC GUI with API for rules edits. In the future this will be made more prominent leading to the final replacement of these static PHP pages.

Notice that I haven't talked about scroll behaviour because there are ups and downs to this approach that Stephan can explain and argue much better than me. But I think this little preamble is necessary to avoid "but why not just do xyz". 10 years of planning and coding is why.


Cheers,
Franco

[meyergru]

No doubt you had your reasons to use tabulator. What is unclear to me is: Is there a technical restriction to tabulator that forces it to have a fixed lower part (the one with the "apply" button)? I think any other page that has a list of lines displays however many lines/items are selected, like ... oh, I see.

I just wanted to point at "Kea DHCP: reservations", but now I find the same behaviour once I choose 50 items instead of my former setting of 20. And I cannot even switch back to that, because the increments have changed, too.

Playing around a bit with it, I found that the main problem comes into play when the lower part does not fit into the window size, because then, the "window" scroll bar shows up.

For many people with a window size < 1400 this is a problem. With my screen height of 1600, the apply button could be positioned even further down.

The question is if one can make the lower part appear at the lower bound of the visible area instead at a fixed offset from above.