clairberlin / clair-admin-ui Goto Github PK

Currently the links in the menu point into the void. I imagine that those views are quite similar in structure.
A list for each element, which can be expanded to see more/detail information for the selected resource (and collapsed again).

Depending on the role of the logged in user it may be possible to edit fields (basic form), or even add new elements. This part will be tracked in other issues.

At the moment attempts to import this library with TypeScript have failed, due to missing type information. According to the TS docs it should be possible to add type declarations, but that didn't work out.

To work around this, we could switch to Javascript to simplify the interop with libraries, which in many cases are written in JS in the first place.

Use Vue 3 and the latest version of Quasar?

Starting point: I am a registered Clair user with verified email. I have launched the Clair Dashboard.
In the sidebar menu, I select a (new) item "create organization", which triggers the following workflow.
Using some dialog or wizard, I am prompted for a required organization name of max. 50 Characters, and an optional description of the organization. There should be an explanation what an organization is - typically the legal entity that operates rooms at one or more sites. Organizations also own nodes.
The organization name must be unique. The Managair does validate it. The Dashboard may query if the name is already taken before submitting the request.

Upon creation, the authenticated user automatically takes on the OWNER role of the organization.

Once the organization is created, it should appear in the organization drop-down menu.

Complexity: 3
Value: 20
WSJF: 6.7

Due to some "magic" in the Quasar framework to in an button element will link even if the content is mailto:....
Either investigate this further, or let /feedback point to a page which has a normal mailto element instead of using the menu directly.

All currently active installations should be seen on the dashboard one the user is logged in.

Complexity: 1
Value: 2
WSJF: 2

I authenticate and launch the Clair Dashboard UI. I select the desired organization in the organization drop-down. If and only iff I am an OWNER of the selected organization, a menu item "add organization member" appears. If I select this menu item, a dialog appears that prompts me for the desired user name or email. This is not a drop-down or type-ahead box. I need to know the identifier and enter it in full. When I click "Add", the dashboard checks if the user is known, and if so, submits a request to the membership API endpoint.

There is no opt-in, the user is added directly.
It might be sensible to inform the new member that he or she was added to an organization. This is subject to [another ticket](ClairBerlin/managair#97.

If there is an organization overview, the member of the organization should be displayed somewhere.

Complexity: 5
Value: 20
WSJF: 4

As a platform operator, I want to add new tenants (e.g. municipalities) with their own CI and (sub-)domain. The tenant can be customized with a main color, a logo and is defined by a unique (sub)domain.

For instance, if the dashboard is called via buehl.airfrischt.de, the top bar is blue with a specific logo of Bühl. However, if the dashboard is called via anothercity.airfrischt.de, the top bar is green with a specific logo of AnotherCity.

Goal: The Clair Widget is visible on my website for one particular node installation. If I want to show the date from several nodes, I need to embed the widget several times, with different parameters.

To embed the widget, I need a JavaScript snippet that I can add to the HTML of my webpage. This snipped loads the widget from the Clair Server and parameterises it.
Subject of the present issue is to

• provide a means for an organization OWNER to quickly retrieve the correctly parameterised JavaScript snippet,
• adjust the widget such that it can be parameterised directly for a specific node installation.

As an OWNER of an organization, I authenticate at the Clair Dashboard. In my inventory, I navigate to view the time series of the desired sensor node. In this context, there is a button "Embed widget into my site". When clicked, the dashboard checks if the corresponding installation has the public flag set. If not, it tells the user to do so first, but proceeds nevertheless. A dialog opens that outputs the JS snippet as text, together with a button to copy the text to the clipboard or to save it to disk. The snippet contains the parameters for the present installation. The dialog may contain additional information on how to embed the widget in a custom HTML page, maybe even with an example.

If I am not an OWNER of the organization to which the node belongs, there should be no corresponding button.

The widget itself needs to be modified such that it directly accepts parameters that identify a specific node installation. In addition, the widget should be enhanced to contain a link to the Clair-Berlin website in a prominent place. Goal of this link is to provide background explanation vor visitors of the present site.

Dependency: Public.
Widget per installation, not per site.

Complexity: 3
Value: 20
WSJF: 6.7

This is the first in a potential series of notification techniques. It is potentially the simplest one, implemented completely in the Clair Dashboard application. Functionality rests on the premise that the application periodically refreshes the samples via the Clair API.

Questions to resolve:

• Where to persist a users request to receive notifications? In the browser's local storage? In a cookie?
• If the user has access to several installations, for which ones does the Dashboard application emit notifications?
• What to do if data are missing? If new data comes in but the time stamp is old, should we still issue a notification?
• Which algorithm and which threshold to use to decide on notifications? Ideally, code and the parameters should be shared with the traffic light display in the widget.
• When should the notification be reset? Only upon user request? If the browser is closed? after a fixed amount of time?

Complexity: 5
Value: 20
WSJF: 4

Each installation resource has a public flag that can be toggled via the API. The goal here is to let an authenticated user explicitly inspect, set, or revoke this flag for an installation.

I authenticate and start the Clair Dashboard. I open an organization of which I am an OWNER and select a specific installation - this might be the time-series display of this installation, or some selection from a list, or otherwise.

• On the time-series view: Next to the widget, there should be a checkbox "time series is public" or similarly. The authenticated OWNER can select or unselect the checkbox. Upon loading the page, the checkbox must reflect the current state of the resource. When the user toggles the state, the installation resource must be updated accordingly.
• If there is a separate view for details of the installation (like start and end timestamp, samples registered yet, description, etc.), then this view should contain a checkbox with the same functionality as well.

If I am not an OWNER of the organization to which the installed node belongs, the checkbox should be greyed out, but it should display the correct publication status.

Complexity: 1
Value: 5
WSJF: 5

The organization data currently is stored both in the Vuex store and in the MainLayout. This duplication may lead to problems down the road. Therefore, the goal here is to consolidate all organization data in the store only.

Similar to the current view in clair-frontend. Maybe reuse the component from there as a first step.

Premise: The sensor node is already registered with TTN and the managair, and it is already signed to the organization where the actor is an OWNER of. The node is not yet installed; that is, there is no installation model that links the node to a room.

I authenticate and launch the Clair Dashboard application. In the organization menu, I select the organization for which I want to install a sensor. If I am indeed an OWNER of this organization, a menu item "install sensor" appears in the sidebar.
When I select the menu item, a dialog appears with two dropdown lists. One to select a sensor node, and one to select a room.

There are two tricky parts here.

1. Should all sensor nodes that belong to the organization be displayed, no matter if they are already installed or not? After all, the start and end dates of the new installation are not determined. Therefore, it is probably sensible to display all options, but to somehow grey out those sensors that are currently already installed.
2. When there is no room yet, it should be possible to create one. Similar to the Django Admin UI, where a small Plus (+) indicates the possibility to directly add an entity. Should this be done via some overlay? or on a new page? How can we preserve the state, so that the user can continue to set up the installation once the room is in place? If there is neither a room nor a site, this logic applies recursively.

Complexity: 20
Value: 30
WSJF: 1.5

If an authenticated user is not yet part of any organization, upon launching the Clair Dashboard he or she should be greeted by a view that offers the functionality to create an organization.

Complexity: 1
Value: 3
WSJF: 3

See: https://quasar.dev/options/quasar-language-packs