I just opened Project foundation structure #2
It’s basically a vue cli with some minor changes.
I just finished having strong typed ApiRoutes and AppRoutes as well as some basic axios config, but it’s not ready for pushing yet – we need to finalise some UI and backend decisions before I start adding the UI layer (changing tests will slow the thing down if it changes a lot, so I’ll post some sketches later).
Also, as I said in the PR linked above, I need some recommendations for flask: How is it going to be architected based on pyuavcan? I’ve not used pyuavcan and the async version is under development so I don’t know for sure. Some routes are created, but swagger documentation, strongly typed route names and minor configuration is soon to be added.
Most importantly, regarding the UI:
-
Are we OK by using bootstrap 4? I mean, it’s ‘The default face of the internet’ and free, provided by twitter, straight forward and in general very easy to use. Also, some other libraries that could be of interest could be chartjs and perhaps d3js. If you have a different recommendation on the UI toolkit let us know below of course.
-
Home page + Node details:
On the previous devcall we agreed that we should start with presenting a list of nodes on the homepage.
The list should contain Node Name, Node Id, Node Status (Enum), Uptime (seconds?)
Is this supposed to be an accordeon-list with red green blue yellow / whatever colour depending on node state? Uptime in seconds? Is it going to refresh automatically?
Also, taking in mind these requirements for the initial index page, the json response should only be composed of an array of these 4 members on each object inside.
Proposed actions:
- on click it should expand to further node details?
- a click on the Id should copy the id contents on the clipboard for example
- pressing tab should traverse each list element, pressing enter should open node details
- Do we add some clientside filters / sorting? Ex. Sort by node status first, by uptime, also filter based on regex / matching on node names.
(Imagine some rectangle that has text or a status dot on each corner, as a list entry)