lobby: modern dashboard replacement development

[fichtner]

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.

The dashboard needs a modern replacement with better sandboxing and all widgets either need to be compatible or rewritten (also the ones in plugins).

Describe the solution you like

Develop a secondary dashboard in the development version to try these ideas. Most likely this will remain hidden in the development version when 24.7 comes out.

Current list of work items:

Missing functionality

• Add widget button
• replace getTranslations() and api binding of canAccessEndpoints() with metadata (xml) files
• investigate unix domain socket connection limit. socket connections seem to be no issue, instead the GUI will lock up with sufficient keep-alive connections. Cause unknown at the moment but it seems to be related to the socket open handling on the PHP side as both scaling up the lighty workers does not affect the result and the configd backend is still reachable in a locked state.
• investigate themeability. Most of the styling is done properly through CSS, although there is some scripted styling to facilitate animations.

Widgets

• System Information (static section)
• CPU usage
• Memory usage
• Traffic Graph
• Interfaces
• Interface statistics
• Firewall state table size
• MBUF usage
• SWAP usage
• Disk usage
• CARP statistics
• Gateway statistics
• Firewall log
• Monit checks
• Static picture?
• RSS feed ? (Announcements)
• System log
• Thermal sensors
• IPsec tunnel statistics
• OpenVPN tunnel statistics
• Wireguard peers
• Services
• Deciso hardware widget
• ETPro telemetry

Describe alternatives you considered

N/A

Additional context

N/A

[AdSchellevis]

added progress / todo items in the ticket.

[fichtner]

@AdSchellevis the update to RC2 make the dashboard wonky for many and a nice observation was made here:

https://www.reddit.com/r/opnsense/comments/1e71y4g/comment/ldyiwxt/

(my browser's cached copy of /ui/js/widgets/BaseWidget.js did not have the isConfigurable() function, causing all the widget rendering calls to fail.)

It appears that there is an apparent lack of cache_safe() relevant usage. I also don't know how things like this can be made cache safe when embedded into JS pages:

import BaseWidget from "./BaseWidget.js";

[Tragen]

Our CMS does it like
<link rel="stylesheet" type="text/css" media="all and (min-width: 1265px)" href="[css/page.css?d=202109070922](view-source:/css/page.css?d=202109070922)">
So it adds a date to the link of the file so it's reloaded if you use a newer version.
I don't know if this works inside JS to load a JS and it's more work if you change a file.

[fichtner]

@Tragen yes we do have a similar construct:

core/src/www/guiconfig.inc

Line 62 in 821de0a

return "{$url}?v=" . substr(md5($info['mtime']), 0, 16);

Need to look into how the JS files are imported by one another or if the page needs to define their presence anyway (best case).

[AdSchellevis]

@fichtner as far as I know you can't use similar trickery on js import statements. This likely needs to be taken care of on the server end (lighttpd)

[AdSchellevis]

@fichtner this 314d975 might help, but only for new cases.

[swhite2]

36560aa should make the imports cache safe