add prefabs for racks (#392)

* add prefabs for racks

2 files changed, 44 insertions, 12 deletions

diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RackConstructionComponent.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RackConstructionComponent.js
index a384d5d5..f9eab381 100644
--- a/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RackConstructionComponent.js
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RackConstructionComponent.js
@@ -1,9 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { Button } from '@patternfly/react-core'
+import { Button, FormSelect, FormSelectOption } from '@patternfly/react-core'
 import { PlusIcon, TimesIcon } from '@patternfly/react-icons'
 
-const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => {
+const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom, prefabs = [] }) => {
+    const [selectedPrefabId, setSelectedPrefabId] = React.useState('')
+
     if (inRackConstructionMode) {
         return (
             <Button isBlock={true} icon={<TimesIcon />} onClick={onStop} className="pf-u-mb-sm">
@@ -12,16 +14,38 @@ const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, is
         )
     }
 
+    const onChangePrefab = (value) => {
+        setSelectedPrefabId(value)
+    }
+
     return (
-        <Button
-            icon={<PlusIcon />}
-            isBlock
-            isDisabled={isEditingRoom}
-            onClick={() => (isEditingRoom ? undefined : onStart())}
-            className="pf-u-mb-sm"
-        >
-            Start rack construction
-        </Button>
+        <>
+            <FormSelect
+                value={selectedPrefabId}
+                onChange={onChangePrefab}
+                aria-label="Select rack prefab"
+                className="pf-u-mb-sm"
+            >
+                <FormSelectOption key="" value="" label="Empty Rack" />
+                {prefabs.map((prefab) => (
+                    <FormSelectOption key={prefab.id} value={prefab.id} label={prefab.name} />
+                ))}
+            </FormSelect>
+            <Button
+                icon={<PlusIcon />}
+                isBlock
+                isDisabled={isEditingRoom}
+                onClick={() => {
+                    if (!isEditingRoom) {
+                        const prefab = prefabs.find((p) => p.id === parseInt(selectedPrefabId))
+                        onStart(prefab)
+                    }
+                }}
+                className="pf-u-mb-sm"
+            >
+                Start rack construction
+            </Button>
+        </>
     )
 }
 
@@ -30,6 +54,7 @@ RackConstructionComponent.propTypes = {
     onStop: PropTypes.func,
     inRackConstructionMode: PropTypes.bool,
     isEditingRoom: PropTypes.bool,
+    prefabs: PropTypes.array,
 }
 
 export default RackConstructionComponent
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RackConstructionContainer.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RackConstructionContainer.js
index e04287a5..70f1b8e6 100644
--- a/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RackConstructionContainer.js
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/room/RackConstructionContainer.js
@@ -22,21 +22,28 @@
 
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { useRouter } from 'next/router'
 import { startRackConstruction, stopRackConstruction } from '../../../../redux/actions/topology/room'
+import { useRackPrefabs } from '../../../../data/rack-prefabs'
 import RackConstructionComponent from './RackConstructionComponent'
 
 function RackConstructionContainer(props) {
+    const router = useRouter()
+    const { project: projectId } = router.query
+    const { data: prefabs = [] } = useRackPrefabs(projectId)
+
     const isRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
     const isEditingRoom = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
 
     const dispatch = useDispatch()
-    const onStart = () => dispatch(startRackConstruction())
+    const onStart = (rackPrefab) => dispatch(startRackConstruction(rackPrefab))
     const onStop = () => dispatch(stopRackConstruction())
     return (
         <RackConstructionComponent
             {...props}
             inRackConstructionMode={isRackConstructionMode}
             isEditingRoom={isEditingRoom}
+            prefabs={prefabs}
             onStart={onStart}
             onStop={onStop}
         />