Add real-time dashboard for viewing connected peripherals on the EV3

[RichDom2185]

Description

Take note of the breaking change: the frontend, backend*, EV3-source, and Sling* needs to be updated at the same time due to changes in the Sling protocol.

*Technically, Sling can be updated separately, as the frontend and EV3-source uses locked versions of the library and can be updated independently. The backend can also be updated separately as it only involves updating security settings, but this must be done before the rest are updated.

This PR can be merged independently the moment the new sling package is published on npmjs.

Related PRs:

• Sling: Add new monitor topic for sending real-time information from devices to clients sling#1
• Backend: Update README and MQTT security settings to support updated Sling protocol backend#909
• EV3-source (coming soon)

Depencency updates:

• @sourceacademy/sling-client: ^0.0.1 ~> ^0.1.0,

Change summary: Subscribe to a new MQTT topic, monitor, and listens to its messages sent by the EV3 to display real-time connection info when the EV3 is connected:

Backwards-compatible with older versions of EV3-source (hence can be merged independently). But not vice versa, so the frontend must be merged before EV3-source is updated.

As the monitor topic simply sends sensor/motor data (there are no "connect"/"disconnect" messages), the frontend auto marks a peripheral as "disconnected" and displays the unconnected port image when both of the following conditions are satisfied:

• The frontend receives a new monitor update for any peripheral
• The peripheral in question has not received any update within the last 5 seconds from the time the abovementioned event (first bullet point) ocurred.

Example:

• Time = 0s : receives update about motor A. Is shown as connected
• Time = 2s : receives update about motor B. Is shown as connected
• Time = 3s: receives update about motor A. Its values are updated. No change for motor B
• Time = 7s: receives update about motor A. Its values are updated. Motor B is marked as disconnected (replaced with initial state of an empty port)

Assets added are adapted from this repo (MIT license) and optimised using this app.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Code quality improvements

How to test

Due to the major scale of this PR, you will need to perform the following steps:

1. To test the frontend, you need to use the my fork + branch of sling here. Please clone the sling repository, run yarn build there, and run:

   yarn add file:../path/to/repo/dist
   

   in the frontend repo to use a local version of sling
2. Set up a local MQTT server using Mosquito
   • Make to edit your mosquitto.conf file to enable both port 1883 (default port used for MQTT protocol) and 9001 (for MQTT over WebSockets), as well as allowing anonymous logins. Full instructions here.
3. Reconfigure your backend copy to use the local MQTT server
   • Full instructions here.
4. Manually point Sling on the EV3 to use your local MQTT server
   1. After the EV3 is connected to a network, SSH into the EV3. Default credentials are robot:maker:

      ssh [email protected]
      

   2. Stop the existing Sling service:

      sudo systemctl stop sling
      

   3. Manually run sling using the local IP address of the computer running the MQTT server + backend + frontend (in this case, 192.168.139.10). The -v flag is optional and enables verbose mode (recommended for debugging):

      cd /usr/local/bin
      sudo SLING_PORT=1883 /usr/local/bin/sling -v -h 192.168.139.10 -i 'env-sling:4' -k '' -c ''
      

Checklist

• I have tested this code
• I have updated the documentation No documentation update required for frontend

[coveralls]

Pull Request Test Coverage Report for Build 3134625514

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 14 of 55 (25.45%) changed or added relevant lines in 12 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-0.03%) to 33.539%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/assets/BrickSvg.tsx	1	2	50.0%
src/assets/PortSvg.tsx	1	2	50.0%
src/features/remoteExecution/PeripheralContainer.tsx	1	2	50.0%
src/features/remoteExecution/RemoteExecutionEv3Types.ts	3	10	30.0%
src/commons/sideContent/SideContentRemoteExecution.tsx	2	15	13.33%
src/commons/sagas/RemoteExecutionSaga.ts	0	18	0.0%

Totals
Change from base Build 3075993645:	-0.03%
Covered Lines:	4302
Relevant Lines:	11970

---

💛 - Coveralls

[martin-henz]

Looks good to me. In the interest of speed, let's merge this one. @enrong has approved via telegram and github.