From aa788a3ad18badfac8beaabdaffc88b9e52f9306 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 7 Jul 2021 15:07:11 +0200
Subject: ui: Remove current ids state from Redux

This change removes the current active identifiers from the Redux state.
Instead, we use the router query to track the active project, portfolio
and topology.
---
 .../app/sidebars/project/PortfolioListComponent.js |  2 +-
 .../app/sidebars/project/ScenarioListComponent.js  | 38 ++--------------------
 2 files changed, 4 insertions(+), 36 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/app/sidebars')

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
index ce271819..b948b747 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -61,7 +61,7 @@ function PortfolioListComponent({
 
 PortfolioListComponent.propTypes = {
     portfolios: PropTypes.arrayOf(Portfolio),
-    currentProjectId: PropTypes.string.isRequired,
+    currentProjectId: PropTypes.string,
     currentPortfolioId: PropTypes.string,
     onNewPortfolio: PropTypes.func.isRequired,
     onChoosePortfolio: PropTypes.func.isRequired,
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
index f990dfcb..e81d2b78 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/ScenarioListComponent.js
@@ -1,48 +1,19 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Scenario } from '../../../../shapes'
-import Link from 'next/link'
 import { Button, Col, Row } from 'reactstrap'
-import classNames from 'classnames'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus, faPlay, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
 
-function ScenarioListComponent({
-    scenarios,
-    portfolioId,
-    currentProjectId,
-    currentScenarioId,
-    onNewScenario,
-    onChooseScenario,
-    onDeleteScenario,
-}) {
+function ScenarioListComponent({ scenarios, portfolioId, onNewScenario, onDeleteScenario }) {
     return (
         <>
             {scenarios.map((scenario, idx) => (
                 <Row key={scenario._id} className="mb-1">
-                    <Col
-                        xs="7"
-                        className={classNames('pl-5 align-self-center', {
-                            'font-weight-bold': scenario._id === currentScenarioId,
-                        })}
-                    >
+                    <Col xs="7" className="pl-5 align-self-center">
                         {scenario.name}
                     </Col>
                     <Col xs="5" className="text-right">
-                        <Link
-                            passHref
-                            href={`/projects/${currentProjectId}/portfolios/${scenario.portfolioId}/scenarios/${scenario._id}`}
-                        >
-                            <Button
-                                color="primary"
-                                outline
-                                disabled
-                                className="mr-1"
-                                onClick={() => onChooseScenario(scenario.portfolioId, scenario._id)}
-                            >
-                                <FontAwesomeIcon icon={faPlay} />
-                            </Button>
-                        </Link>
                         <Button
                             color="danger"
                             outline
@@ -67,10 +38,7 @@ function ScenarioListComponent({
 ScenarioListComponent.propTypes = {
     scenarios: PropTypes.arrayOf(Scenario),
     portfolioId: PropTypes.string,
-    currentProjectId: PropTypes.string.isRequired,
-    currentScenarioId: PropTypes.string,
     onNewScenario: PropTypes.func.isRequired,
-    onChooseScenario: PropTypes.func.isRequired,
     onDeleteScenario: PropTypes.func.isRequired,
 }
 
-- 
cgit v1.2.3


From e5e5d2c65e583493870bc0b62fb185c5e757c13f Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 7 Jul 2021 16:27:49 +0200
Subject: ui: Migrate project APIs to React Query

This change updates the OpenDC frontend to use React Query for fetching
and mutating project data. Previously, this state was tracked and
synchronized via Redux. Migrating to React Query greatly simplifies the
state synchronization logic necessary in the frontend.
---
 .../src/components/app/sidebars/project/PortfolioListComponent.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/components/app/sidebars')

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
index b948b747..d61ff24e 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/project/PortfolioListComponent.js
@@ -25,7 +25,7 @@ function PortfolioListComponent({
                 </Button>
             </h2>
 
-            {portfolios.map((portfolio, idx) => (
+            {portfolios.map((portfolio) => (
                 <div key={portfolio._id}>
                     <Row className="row mb-1">
                         <Col
-- 
cgit v1.2.3


From 29196842447d841d2e21462adcfc8c2ed1d851ad Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 8 Jul 2021 13:15:28 +0200
Subject: ui: Simplify normalization of topology

This change updates the OpenDC frontend to use the normalizr library for
normalizing the user topology.
---
 .../app/sidebars/topology/machine/UnitComponent.js |  2 +-
 .../sidebars/topology/machine/UnitListComponent.js | 22 +++++++++++++++-------
 .../app/sidebars/topology/rack/MachineComponent.js | 10 +++++-----
 .../sidebars/topology/rack/MachineListComponent.js | 19 +++++++++++--------
 4 files changed, 32 insertions(+), 21 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/app/sidebars')

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
index 03b92459..46c639bd 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -60,7 +60,7 @@ function UnitComponent({ index, unitType, unit, onDelete }) {
 UnitComponent.propTypes = {
     index: PropTypes.number,
     unitType: PropTypes.string,
-    unit: PropTypes.oneOf([ProcessingUnit, StorageUnit]),
+    unit: PropTypes.oneOfType([ProcessingUnit, StorageUnit]),
     onDelete: PropTypes.func,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
index b7da74a1..54c1a6cc 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -1,12 +1,19 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer'
+import { ProcessingUnit, StorageUnit } from '../../../../../shapes'
+import UnitComponent from './UnitComponent'
 
-const UnitListComponent = ({ unitType, unitIds }) => (
+const UnitListComponent = ({ unitType, units, onDelete }) => (
     <ul className="list-group mt-1">
-        {unitIds.length !== 0 ? (
-            unitIds.map((unitId, index) => (
-                <UnitContainer unitType={unitType} unitId={unitId} index={index} key={index} />
+        {units.length !== 0 ? (
+            units.map((unit, index) => (
+                <UnitComponent
+                    unitType={unitType}
+                    unit={unit}
+                    onDelete={() => onDelete(unit, unitType)}
+                    index={index}
+                    key={index}
+                />
             ))
         ) : (
             <div className="alert alert-info">
@@ -19,8 +26,9 @@ const UnitListComponent = ({ unitType, unitIds }) => (
 )
 
 UnitListComponent.propTypes = {
-    unitType: PropTypes.string,
-    unitIds: PropTypes.array,
+    unitType: PropTypes.string.isRequired,
+    units: PropTypes.arrayOf(PropTypes.oneOfType([ProcessingUnit, StorageUnit])).isRequired,
+    onDelete: PropTypes.func,
 }
 
 export default UnitListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
index f91202ba..b71918da 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineComponent.js
@@ -23,7 +23,7 @@ UnitIcon.propTypes = {
 
 const MachineComponent = ({ position, machine, onClick }) => {
     const hasNoUnits =
-        machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length + machine.storageIds.length === 0
+        machine.cpus.length + machine.gpus.length + machine.memories.length + machine.storages.length === 0
 
     return (
         <ListGroupItem
@@ -36,10 +36,10 @@ const MachineComponent = ({ position, machine, onClick }) => {
                 {position}
             </Badge>
             <div className="d-inline-flex">
-                {machine.cpuIds.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
-                {machine.gpuIds.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
-                {machine.memoryIds.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
-                {machine.storageIds.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
+                {machine.cpus.length > 0 ? <UnitIcon id="cpu" type="CPU" /> : undefined}
+                {machine.gpus.length > 0 ? <UnitIcon id="gpu" type="GPU" /> : undefined}
+                {machine.memories.length > 0 ? <UnitIcon id="memory" type="memory" /> : undefined}
+                {machine.storages.length > 0 ? <UnitIcon id="storage" type="storage" /> : undefined}
                 {hasNoUnits ? <Badge color="warning">Machine with no units</Badge> : undefined}
             </div>
         </ListGroupItem>
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
index d0958c28..e024a417 100644
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -1,17 +1,18 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer'
-import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer'
 import { machineList } from './MachineListComponent.module.scss'
+import MachineComponent from './MachineComponent'
+import { Machine } from '../../../../../shapes'
+import EmptySlotComponent from './EmptySlotComponent'
 
-const MachineListComponent = ({ machineIds }) => {
+const MachineListComponent = ({ machines = [], onSelect, onAdd }) => {
     return (
         <ul className={`list-group ${machineList}`}>
-            {machineIds.map((machineId, index) => {
-                if (machineId === null) {
-                    return <EmptySlotContainer key={index} position={index + 1} />
+            {machines.map((machine, index) => {
+                if (machine === null) {
+                    return <EmptySlotComponent key={index} onAdd={() => onAdd(index + 1)} />
                 } else {
-                    return <MachineContainer key={index} position={index + 1} machineId={machineId} />
+                    return <MachineComponent key={index} onClick={() => onSelect(index + 1)} machine={machine} />
                 }
             })}
         </ul>
@@ -19,7 +20,9 @@ const MachineListComponent = ({ machineIds }) => {
 }
 
 MachineListComponent.propTypes = {
-    machineIds: PropTypes.array,
+    machines: PropTypes.arrayOf(Machine),
+    onSelect: PropTypes.func.isRequired,
+    onAdd: PropTypes.func.isRequired,
 }
 
 export default MachineListComponent
-- 
cgit v1.2.3