✨ [Frontend] Listen to the stateInputPorts and stateOutputPorts websocket events

[odeimaiz]

What do these changes do?

The icons next to the node ports are now also handled by the backend. This only works with dynamic v2 services

Socket message stateInputPorts states:

• DOWNLOAD_STARTED
• DOWNLOAD_FINISHED_SUCCESSFULLY
• DOWNLOAD_WAS_ABORTED
• DOWNLOAD_FINISHED_WITH_ERROR

Socket message stateOutputPorts states:

• UPLOAD_STARTED
• UPLOAD_FINISHED_SUCCESSFULLY
• UPLOAD_WAS_ABORTED
• UPLOAD_FINISHED_WITH_ERROR

Related issue/s

• closes display information to the user when ports are being uploaded/downloaded osparc-issues#1706
• closes frontend displays port notifications osparc-issues#1737

How to test

Dev-ops checklist

• No ENV changes or I properly updated ENV (read the instruction)

[pcrespov]

👌

[GitHK]

👍

[ignapas]

once there starts to be an increasing number of updates spontaneously coming from the server, it really helps to keep all that data up to date in a single, detached place. like that it is easily accessible from any part of the app and not only from the component who listens to the socket event. like that you can listen to all socket events from one place, that takes care of updating this centralized store of data, or "state", and then you have your components listening (subscribing to changes) to parts of this store and updating themselves accordingly.
one library that helps doing this that seems widely used and working well is https://mobx.js.org/README.html
I was testing it long time ago with Qooxdoo and seemed to work well, if you are interested, we can take a look together

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[odeimaiz]

once there starts to be an increasing number of updates spontaneously coming from the server, it really helps to keep all that data up to date in a single, detached place. like that it is easily accessible from any part of the app and not only from the component who listens to the socket event. like that you can listen to all socket events from one place, that takes care of updating this centralized store of data, or "state", and then you have your components listening (subscribing to changes) to parts of this store and updating themselves accordingly. one library that helps doing this that seems widely used and working well is https://mobx.js.org/README.html I was testing it long time ago with Qooxdoo and seemed to work well, if you are interested, we can take a look together

Merci! I would rather extend our Store or create a Port data model in the Node model than add an external library.