Add option to start simulator via docker (#944)

* Add start simulation button

* Fix port

* Add stop simulation button

* Working error messages (only if using string literal)

* Move onSimulationResult to different set of events

* Add feedback of running state from backend

* Give feedback on first time use

* Docker stubs

* Resolve minor feedback

* Resolve more feedback

* Update requirements for stubs

* Exception handling for image pull

* Add docker to mypi ignore

* Add simulation modal

* Add dropdown to select vehicle type

* Add fields for the other ardupilot params

* Copy

* Pass params to simulator startup

* npx

* Remove ArduRover for now as is not valid

* Cleanup of args parsing

* Wait for YOU CAN CONNECT message

* Disable if not connected to socket

* Add connect after simulator start

* linting

* Backend refactor and comments

* Add port option to also allow for tests

* Add cleanup to the first test

* Generate tests for the other functions

* Resolve minor copilot feedback

* Lint

* Pass connect arg through backend

* Use port 5763 for tests

* Potential fix for test

* Background task for wait for container result

* Better error messages on stopping simulation

* CI friendly cleanup container

* Resolve minor copilot feedback

* Improve test coverage

* Remove container reload because it breaks logs

* Potential test fix

* Catch exceptions from streaming container

* Clamp input values

* Image downloading progress messages

* Message on closing modal

* Errors and exceptions

* More tests

* Linting

* Remove unused import

* Update radio/app/endpoints/simulation.py

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Resolve final copilot comments

* Rename function in tests

* Resolve minor feedback

* Fix non-deterministic tests

* minor copilot feedback

* Close old notification if new loading has begun

* Rewrite waiting for container

* Resolve MORE minor copilot feedback

* Remove extra parameters

* Cleanup missed references

* Use correct port on auto-connect

* Selection for both host and container ports

* Add more tests for failure routes

* Fix tests

* Resolve copilot feedback

* Just a couple more copilot comments

* Minor copilot feedback

* Even more copilot feedback

* Rewrite waiting function to use since and tail

* Frontend changes

* Get rid of all the tests

* Catch bubble up exception

* Copy

* Option for multiple port mappings

* Refactor simulation params into their own slice

* Duplicate port validation

* Refactor port validation into helper functions

* Fix None unpacking

* Linting

* Use exceptions rather than returning None

* Store simulation loading id states

* Linting

* Minor changes

* Resolve what are becoming more and more pointless comments

* These edge cases are literally never gonna happen

* Check for duplicate container ports aswell

* Copy

* Type annotations

* Fix typing

* Fix the final none hallucinated issues

* Linting

* Please

* Use uuids for ports

* Use worker thread for log polling

* Remove unused reference to index

* MAYBE these ones are relevant

* Hide button on default with opt-in experimental developer setting

* Resolve the trivial parts of the feedback

* Use docker types

* Add custom type for command parameters

* Optional type, because it is

* Rename cleanup_container to stop_container

* Use trash icon instead of X

* Add connection progress bar to simulation modal footer

* Remove now unused Progress import

* Disconnect from drone when stopping simulation if connected to ANYTHING

* Disconnect from simulator on stop simulation

* Block connecting to simulator if already connected to drone

* Fix issue with merge

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Julian Jones <37962677+NexInfinite@users.noreply.github.com>

Author: 3 people

gcs/data/default_settings.json

@@ -31,6 +31,12 @@
       "default": false,
       "type": "boolean",
       "display": "Speech Announcements"
+    },
+    "experimentalDeveloperFeatures": {
+      "default": false,
+      "type": "boolean",
+      "display": "Experimental Developer Features",
+      "description": "These may be unstable and can cause unexpected bugs or crashes."
     }
   },
   "Dashboard": {

gcs/src/components/connectionProgress.jsx

@@ -0,0 +1,22 @@
+import { Progress } from "@mantine/core"
+
+export default function ConnectionProgress({ connecting, status }) {
+  return (
+    <>
+      {connecting &&
+        status.message !== null &&
+        typeof status.progress === "number" && (
+          <>
+            <p className="text-center my-4">{status.message}</p>
+            <Progress
+              animated
+              size="lg"
+              transitionDuration={300}
+              value={status.progress}
+              className="w-full mx-auto my-auto"
+            />
+          </>
+        )}
+    </>
+  )
+}

gcs/src/components/navbar.jsx

@@ -16,7 +16,6 @@ import {
   Group,
   LoadingOverlay,
   Modal,
-  Progress,
   SegmentedControl,
   Select,
   Tabs,
@@ -78,6 +77,10 @@ import { useEffect } from "react"
 import { twMerge } from "tailwind-merge"
 import { showErrorNotification } from "../helpers/notification.js"
 
+// Modals
+import SimulationModal from "./toolbar/simulationModal.jsx"
+import ConnectionProgress from "./connectionProgress.jsx"
+
 export default function Navbar() {
   // Redux
   const dispatch = useDispatch()
@@ -320,22 +323,10 @@ export default function Navbar() {
           </Group>
         </form>
 
-        {connecting &&
-          droneConnectionStatus.message !== null &&
-          typeof droneConnectionStatus.progress === "number" && (
-            <>
-              <p className="text-center my-4">
-                {droneConnectionStatus.message}
-              </p>
-              <Progress
-                animated
-                size="lg"
-                transitionDuration={300}
-                value={droneConnectionStatus.progress}
-                className="w-full mx-auto my-auto"
-              />
-            </>
-          )}
+        <ConnectionProgress
+          connecting={connecting}
+          status={droneConnectionStatus}
+        />
       </Modal>
 
       <Modal
@@ -402,6 +393,8 @@ export default function Navbar() {
         )}
       </Modal>
 
+      <SimulationModal />
+
       <div className="w-full flex justify-between gap-x-4 xl:grid xl:grid-cols-2 xl:gap-0">
         <div className="flex items-center wrap">
           {/* Navigation */}

gcs/src/components/toolbar/menus/advanced.jsx

@@ -5,11 +5,14 @@
 // Local Imports
 import { useDispatch } from "react-redux"
 import { setForwardingAddressModalOpened } from "../../../redux/slices/droneConnectionSlice"
+import { setSimulationModalOpened } from "../../../redux/slices/simulationParamsSlice"
 import MenuItem from "./menuItem"
 import MenuTemplate from "./menuTemplate"
+import { useSettings } from "../../../helpers/settings"
 
 export default function AdvancedMenu(props) {
   const dispatch = useDispatch()
+  const { getSetting } = useSettings()
   return (
     <MenuTemplate
       title="Advanced"
@@ -28,6 +31,14 @@ export default function AdvancedMenu(props) {
           dispatch(setForwardingAddressModalOpened(true))
         }}
       />
+      {getSetting("General.experimentalDeveloperFeatures") && (
+        <MenuItem
+          name="SITL Simulator"
+          onClick={() => {
+            dispatch(setSimulationModalOpened(true))
+          }}
+        />
+      )}
     </MenuTemplate>
   )
 }