UI modularization initiative

[jokob-sk]

⚠THIS IS EARLY WORK IN PROGRESS ⚠

Important

Design principles

• Backward compatibility needs to be preserved (there should be an automated upgrade path)
• A lightweight framework is needed (this rules out React)
• Existing functionality that differentiates this app from others should be mostly preserved
• Backing up the application should remain simple ( /config folder content should be sufficient to get most of the application restored)
• ideally the UI should be replaceable - I'd like to have a robust API layer which can be plugged into different front ends (nice to have)

Caution

Design considerations

• DataTables are overused in this application - does the chosen framework have to support these unconditionally?
• treeviz.js is used for the network visualization due to the permissive licensing and good support of scaling and horizontal tree expansion
• Auto-generated Settings UI
• Auto-generated plugins UI
• Auto-generated forms for devices based on the NEWDEV plugin
• Auto generated custom device properties based on CUSTRPOD plugin
• SYNC plugin

Tasks to be done

• Pick Front end framework
• Finalize the GraphQL middle layer for data retrieval
  • HMW update the data? Should we use GraphQL mutations?
• ....

Above is negotiable based on feedback. Please contribute to the discussion below.

[jokob-sk]

Data Backup simplicity

I've found that I was able to help restore way more instances with this simplified backup system (basically 3 files: app.conf, devices.csv, workflows.json) than I would if the database was needed. Some of these are also used e.g. in the SYNC plugin.

Modularized UI

I'm very supportive of this. The current UI is OK, but definitely not easy to maintain , looks dated, and feels clunky. However there are probably other things that need to happen first, so here is some context (you will probably discover more things once you dive into the code):

• originally it was a pure php backend but I found it tedious to debug and develop so I switched to JS/python/GraphQL where I could
• the application SQLite DB is great for backup (that's what I like) but performance is slow so I had to implement some basic caching and move the processing of some tasks to the browser (people try to run this on rapberry Pi 2 )
• I started making all data accessible via the GraphQL server, but things are still missing (e.g. Events) and adding support for more advanced filtering (I think).
• the caching system and expiration (redis? - currently in browser session). - needs redoing
• It's important to understand how the UI is rendered and that most of it is driven from plugin config.json manifests and settting values (e.g. NEWDEV or CUSTPROP plugins). More details here: https://jokob-sk.github.io/NetAlertX/PLUGINS_DEV/?h=plugin
• I'm at best a mediocre developer so my code will require lots of cleanup and refactoring
• I'd like to use a framework which is on the lighter side as in my experience React-based front ends tend to be very heavy on resources and resulting image sizes are pretty big