merge: Migrate to Quarkus-based web API

This pull request changes the web API to a Quarkus-based version. Currently, the OpenDC web API is written in Python (using Flask). Although Python is a powerful language to develop web services, having another language next to Kotlin/Java and JavaScript introduces some challenges.

For instance, the web API and UI lack integration with our Gradle-based build pipeline and require additional steps from the developer to start working with. Furthermore, deploying OpenDC requires having Python installed in addition to the JVM. 

By converting the web API into a Quarkus application, we can enjoy further integration with our Gradle-based build pipeline and simplify the development/deployment process of OpenDC, by requiring only the JVM and Node to work with OpenDC.

## Implementation Notes :hammer_and_pick:

* Move build dependencies into version catalog
* Design unified communication protocol
* Add Quarkus API implementation
* Add new web client implementation
* Update runner to use new web client
* Fix compatibility with React.js UI
* Remove Python build steps from CI pipeline
* Update Docker deployment for new web API
* Remove obsolete database configuration

## External Dependencies :four_leaf_clover:

* Quarkus

## Breaking API Changes :warning:

* The new web API only supports SQL-based databases for storing user-data, as opposed to MongoDB currently. We intend to use H2 for development and Postgres for production.

5 files changed, 45 insertions, 41 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
index 3712cfa0..a99b60c0 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
@@ -22,13 +22,11 @@
 
 import PropTypes from 'prop-types'
 import { ContextSelector as PFContextSelector, ContextSelectorItem } from '@patternfly/react-core'
-import { useMemo, useState, useReducer } from 'react'
+import { useMemo, useState } from 'react'
 import { contextSelector } from './ContextSelector.module.scss'
 
-function ContextSelector({ activeItem, items, onSelect, label }) {
-    const [isOpen, toggle] = useReducer((isOpen) => !isOpen, false)
+function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label }) {
     const [searchValue, setSearchValue] = useState('')
-
     const filteredItems = useMemo(
         () => items.filter(({ name }) => name.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1) || items,
         [items, searchValue]
@@ -36,23 +34,22 @@ function ContextSelector({ activeItem, items, onSelect, label }) {
 
     return (
         <PFContextSelector
-            menuAppendTo={global.document?.body}
             className={contextSelector}
             toggleText={activeItem ? `${label}: ${activeItem.name}` : label}
             onSearchInputChange={(value) => setSearchValue(value)}
             searchInputValue={searchValue}
             isOpen={isOpen}
-            onToggle={toggle}
+            onToggle={(_, isOpen) => onToggle(isOpen)}
             onSelect={(event) => {
-                const targetId = event.target.value
-                const target = items.find((item) => item._id === targetId)
+                const targetId = +event.target.value
+                const target = items.find((item) => item.id === targetId)
 
-                toggle()
                 onSelect(target)
+                onToggle(!isOpen)
             }}
         >
             {filteredItems.map((item) => (
-                <ContextSelectorItem key={item._id} value={item._id}>
+                <ContextSelectorItem key={item.id} value={item.id}>
                     {item.name}
                 </ContextSelectorItem>
             ))}
@@ -61,7 +58,7 @@ function ContextSelector({ activeItem, items, onSelect, label }) {
 }
 
 const Item = PropTypes.shape({
-    _id: PropTypes.string.isRequired,
+    id: PropTypes.any.isRequired,
     name: PropTypes.string.isRequired,
 })
 
@@ -69,6 +66,8 @@ ContextSelector.propTypes = {
     activeItem: Item,
     items: PropTypes.arrayOf(Item).isRequired,
     onSelect: PropTypes.func.isRequired,
+    onToggle: PropTypes.func.isRequired,
+    isOpen: PropTypes.bool,
     label: PropTypes.string,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss
index fefba41f..0aa63ee6 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss
@@ -21,7 +21,6 @@
  */
 
 .contextSelector {
-    width: auto;
     margin-right: 20px;
 
     --pf-c-context-selector__toggle--PaddingTop: var(--pf-global--spacer--sm);
diff --git a/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js b/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js
index 694681ac..c4f2d50e 100644
--- a/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js
@@ -21,27 +21,31 @@
  */
 
 import { useRouter } from 'next/router'
-import { useMemo } from 'react'
-import { useProjectPortfolios } from '../../data/project'
+import { useState } from 'react'
+import { usePortfolios } from '../../data/project'
+import { Portfolio } from '../../shapes'
 import ContextSelector from './ContextSelector'
 
-function PortfolioSelector() {
+function PortfolioSelector({ activePortfolio }) {
     const router = useRouter()
-    const { project, portfolio: activePortfolioId } = router.query
-    const { data: portfolios = [] } = useProjectPortfolios(project)
-    const activePortfolio = useMemo(() => portfolios.find((portfolio) => portfolio._id === activePortfolioId), [
-        activePortfolioId,
-        portfolios,
-    ])
+
+    const [isOpen, setOpen] = useState(false)
+    const { data: portfolios = [] } = usePortfolios(activePortfolio?.project?.id, { enabled: isOpen })
 
     return (
         <ContextSelector
             label="Portfolio"
             activeItem={activePortfolio}
             items={portfolios}
-            onSelect={(portfolio) => router.push(`/projects/${portfolio.projectId}/portfolios/${portfolio._id}`)}
+            onSelect={(portfolio) => router.push(`/projects/${portfolio.project.id}/portfolios/${portfolio.number}`)}
+            onToggle={setOpen}
+            isOpen={isOpen}
         />
     )
 }
 
+PortfolioSelector.propTypes = {
+    activePortfolio: Portfolio,
+}
+
 export default PortfolioSelector
diff --git a/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js b/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
index 753632ab..7721e04c 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
@@ -20,29 +20,32 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
 import { useRouter } from 'next/router'
-import { useMemo } from 'react'
+import { useState } from 'react'
 import { useProjects } from '../../data/project'
+import { Project } from '../../shapes'
 import ContextSelector from './ContextSelector'
 
-function ProjectSelector({ projectId }) {
+function ProjectSelector({ activeProject }) {
     const router = useRouter()
-    const { data: projects = [] } = useProjects()
-    const activeProject = useMemo(() => projects.find((project) => project._id === projectId), [projectId, projects])
+
+    const [isOpen, setOpen] = useState(false)
+    const { data: projects = [] } = useProjects({ enabled: isOpen })
 
     return (
         <ContextSelector
             label="Project"
             activeItem={activeProject}
             items={projects}
-            onSelect={(project) => router.push(`/projects/${project._id}`)}
+            onSelect={(project) => router.push(`/projects/${project.id}`)}
+            onToggle={setOpen}
+            isOpen={isOpen}
         />
     )
 }
 
 ProjectSelector.propTypes = {
-    projectId: PropTypes.string,
+    activeProject: Project,
 }
 
 export default ProjectSelector
diff --git a/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js b/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js
index d5e51c6c..9cae4cbf 100644
--- a/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js
@@ -20,33 +20,32 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
 import { useRouter } from 'next/router'
-import { useMemo } from 'react'
-import { useProjectTopologies } from '../../data/topology'
+import { useState } from 'react'
+import { useTopologies } from '../../data/topology'
+import { Topology } from '../../shapes'
 import ContextSelector from './ContextSelector'
 
-function TopologySelector({ projectId, topologyId }) {
+function TopologySelector({ activeTopology }) {
     const router = useRouter()
-    const { data: topologies = [] } = useProjectTopologies(projectId)
-    const activeTopology = useMemo(() => topologies.find((topology) => topology._id === topologyId), [
-        topologyId,
-        topologies,
-    ])
+
+    const [isOpen, setOpen] = useState(false)
+    const { data: topologies = [] } = useTopologies(activeTopology?.project?.id, { enabled: isOpen })
 
     return (
         <ContextSelector
             label="Topology"
             activeItem={activeTopology}
             items={topologies}
-            onSelect={(topology) => router.push(`/projects/${topology.projectId}/topologies/${topology._id}`)}
+            onSelect={(topology) => router.push(`/projects/${topology.project.id}/topologies/${topology.number}`)}
+            onToggle={setOpen}
+            isOpen={isOpen}
         />
     )
 }
 
 TopologySelector.propTypes = {
-    projectId: PropTypes.string,
-    topologyId: PropTypes.string,
+    activeTopology: Topology,
 }
 
 export default TopologySelector