1 files changed, 36 insertions, 11 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