firewall: automation: Explore UI possibilities (POC) #8367

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.

Since the legacy firewall UI pages are at some point, well, um, legacy, there has to be a replacement at some point. The most valid replacement right now is "Firewall: Automation: Filter", which uses the modern mvc framework to generate and display its rules.

The only issue with that, is the User Experience. 10 or 20 firewall rules should not be an issue, but if the view scales up to 100 or 1000 elements even, there could be usability issues.

Describe the solution you like

Brainstorm the possibilites of improving UX in that view to prepare for the future:

Prime directives:

• The consistent sequence of rules in the view at all times
• Do not stray too far from what the framework established
  • (There is some hacky stuff in the FilterController to inject the legacy internal rules into searchRuleAction to show them in the bootgrid. Though the actual API output has not been altered, these rules can be added to the output via type in the request.)

General UX:

• Move the current code to the reusable grid structure to expose all options

• Ensure firewall rules cannot be sorted (would destroy consistent sequence)

• Create custom formatters to replicate the old legacy firewall view as first step

• Custom commands to change the sequence of a rule relative to the other rules, this needs some controller magic

• Show change message when custom command was used.

• Analyze the basic needs of a firewall rule, and selectively hide more fields in advanced view or auto collapsed headers inside the main form. For maintainability, having all fields in the same general form is the best.

• Restrict size of bootgrid dropdown like here:

  core/src/opnsense/mvc/app/views/OPNsense/OpenVPN/instances.volt

  Line 97 in 7129728

  <style>

• Create AutoNumberField that automatically increases by 10, and not 1. This will help in larger rulesets where you want to set rules between other rules later on. If the sequence is always unbroken, youd need to move a rule up like 500 times or so after creation at the bottom of the ruleset. Increase allowed sequence to 99.999.

• Maybe increment by 100 per default and increase max sequence to 999.999 to leave more space inbetween rules.

• When cloning, the auto number field does not automatically take a new sequence. Add a button that will fill in the next free sequence.

• Collect all fields that are marked as advanced, and if one of them is not null/empty, display a symbol in in the icons of the rule, and also show in a tooltip which option it is. Additionally trigger the advanced mode automatically.

• The custom move up and down commands can also work while categories or search is used.

• Implement a "move rule before other rule" button. Auto calculate the sequence so no micro management of it needs to happen.

• Show Alias shortcut in grid

• Show selectpicker with all interface names/ interface groups with possibility or multi selection, request handler to filter the grid based on interface selection. This selectpicker should be in the action bar, at the left side. To populate it, we need an API endpoint that collects all interfaces currently used in rules (also the automatic ones).

• Change default pagination to e.g. 14 as default, 7 seems too low.

• Solution for automatic rules visibility, maybe just another grid that uses a search endpoint to list them.

  • This one will be a bit trickier, thoughts:
  • Write a wrapper and pass them through configd.
  • Resolve real interface names in the wrapper script.
  • Normalize the legacy data structure to resemble the automation model structure
  • Create merged data that combines legacy and automation rules for use with UIModelGrid
  • Use this merged data in searchRuleAction(), this fixes pagination issues etc...
  • Do not show rowtoggle and command buttons for internal rules
  • Show firewall rule search button with #ref for internal rules

• Solution for diagnostics per rule (hits etc... like the old Inspect button), maybe they can be collected from an endpoint and injected as additional columns via formatter.

• Categories work, new ones can be added in "/ui/firewall/category".

• The Interface based filter needs some logic to correctly display the inheritence of rules between

  • Legacy Internal/Internal 2
  • Legacy Floating
  • Legacy Group
  • Legacy Interface
  • MVC Rules (Which I hope should be calculated solely by their sequence)

Describe alternatives you considered

Rebuilding the current legacy firewall view as closely as possible with no further additions.

Additional context

This is a POC, nothing that is written here or investigated will be a guarantee.