add prefabs for racks (#392)

* add prefabs for racks

9 files changed, 267 insertions, 27 deletions

diff --git a/opendc-web/opendc-web-server/src/main/webui/api/rack-prefabs.js b/opendc-web/opendc-web-server/src/main/webui/api/rack-prefabs.js
new file mode 100644
index 00000000..1792704b
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/api/rack-prefabs.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { request } from './index'
+
+export function fetchRackPrefabs(auth, projectId) {
+    return request(auth, `projects/${projectId}/rack-prefabs`)
+}
+
+export function addRackPrefab(auth, projectId, rackPrefab) {
+    return request(auth, `projects/${projectId}/rack-prefabs`, 'POST', rackPrefab)
+}
+
+export function deleteRackPrefab(auth, projectId, rackPrefabNumber) {
+    return request(auth, `projects/${projectId}/rack-prefabs/${rackPrefabNumber}`, 'DELETE')
+}
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/AddPrefab.js b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/AddPrefab.js
index 6a0c3ff3..d3266537 100644
--- a/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/AddPrefab.js
+++ b/opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar/rack/AddPrefab.js
@@ -22,15 +22,81 @@
 
 import PropTypes from 'prop-types'
 import React from 'react'
-import { Button } from '@patternfly/react-core'
+import { Button, AlertGroup, Alert, AlertVariant, AlertActionCloseButton } from '@patternfly/react-core'
 import { SaveIcon } from '@patternfly/react-icons'
+import { useSelector } from 'react-redux'
+import { useRouter } from 'next/router'
+import { denormalize } from 'normalizr'
+import { Rack } from '../../../../util/topology-schema'
+import { useNewRackPrefab } from '../../../../data/rack-prefabs'
+
+function AddPrefab({ tileId }) {
+    const [alert, setAlert] = React.useState(null)
+    const router = useRouter()
+    const { project: projectId } = router.query
+    const { mutate: addRackPrefab } = useNewRackPrefab()
+
+    const rackId = useSelector((state) => state.topology.tiles[tileId]?.rack)
+    const rack = useSelector((state) => {
+        const topologyState = state.topology
+        if (!rackId || !topologyState.racks[rackId]) {
+            return null
+        }
+        return denormalize(rackId, Rack, topologyState)
+    })
+
+    const onClick = () => {
+        if (rack && projectId) {
+            addRackPrefab(
+                {
+                    projectId,
+                    name: rack.name,
+                    rack: {
+                        ...rack,
+                        id: 0,
+                        machines: rack.machines.map((m) => ({ ...m, id: 0 })),
+                    },
+                },
+                {
+                    onSuccess: () => {
+                        setAlert({ variant: AlertVariant.success, title: 'Rack saved as prefab' })
+                    },
+                    onError: (error) => {
+                        setAlert({ variant: AlertVariant.danger, title: `Failed to save rack: ${error}` })
+                    },
+                }
+            )
+        }
+    }
 
-function AddPrefab() {
-    const onClick = () => {} // TODO
     return (
-        <Button variant="primary" icon={<SaveIcon />} isBlock onClick={onClick} className="pf-u-mb-sm">
-            Save this rack to a prefab
-        </Button>
+        <>
+            <AlertGroup isToast>
+                {alert && (
+                    <Alert
+                        isLiveRegion
+                        variant={alert.variant}
+                        title={alert.title}
+                        actionClose={
+                            <AlertActionCloseButton
+                                title={alert.title}
+                                onClose={() => setAlert(null)}
+                            />
+                        }
+                    />
+                )}
+            </AlertGroup>
+            <Button
+                variant="primary"
+                icon={<SaveIcon />}
+                isBlock
+                onClick={onClick}
+                className="pf-u-mb-sm"
+                isDisabled={!rack}
+            >
+                Save this rack to a prefab
+            </Button>
+        </>
     )
 }
 
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}
         />
diff --git a/opendc-web/opendc-web-server/src/main/webui/data/query.js b/opendc-web/opendc-web-server/src/main/webui/data/query.js
index 3e5423b9..109cd2e7 100644
--- a/opendc-web/opendc-web-server/src/main/webui/data/query.js
+++ b/opendc-web/opendc-web-server/src/main/webui/data/query.js
@@ -25,6 +25,7 @@ import { QueryClient } from 'react-query'
 import { useAuth } from '../auth'
 import { configureExperimentClient } from './experiments'
 import { configureProjectClient } from './project'
+import { configureRackPrefabClient } from './rack-prefabs'
 import { configureTopologyClient } from './topology'
 import { configureUserClient } from './user'
 
@@ -33,6 +34,7 @@ let queryClient
 function createQueryClient(auth) {
     const client = new QueryClient()
     configureProjectClient(client, auth)
+    configureRackPrefabClient(client, auth)
     configureExperimentClient(client, auth)
     configureTopologyClient(client, auth)
     configureUserClient(client, auth)
diff --git a/opendc-web/opendc-web-server/src/main/webui/data/rack-prefabs.js b/opendc-web/opendc-web-server/src/main/webui/data/rack-prefabs.js
new file mode 100644
index 00000000..1979fa24
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/data/rack-prefabs.js
@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useQuery, useMutation } from 'react-query'
+import { addRackPrefab, deleteRackPrefab, fetchRackPrefabs } from '../api/rack-prefabs'
+
+/**
+ * Configure the query defaults for the rack prefab endpoints.
+ */
+export function configureRackPrefabClient(queryClient, auth) {
+    queryClient.setQueryDefaults('rack-prefabs', {
+        queryFn: ({ queryKey }) => fetchRackPrefabs(auth, queryKey[1]),
+    })
+
+    queryClient.setMutationDefaults('addRackPrefab', {
+        mutationFn: ({ projectId, ...data }) => addRackPrefab(auth, projectId, data),
+        onSuccess: (result) => {
+            queryClient.setQueryData(['rack-prefabs', result.project.id], (old = []) => [...old, result])
+        },
+    })
+    queryClient.setMutationDefaults('deleteRackPrefab', {
+        mutationFn: ({ projectId, number }) => deleteRackPrefab(auth, projectId, number),
+        onSuccess: (result) => {
+            queryClient.setQueryData(['rack-prefabs', result.project.id], (old = []) =>
+                old.filter((rackPrefab) => rackPrefab.id !== result.id)
+            )
+        },
+    })
+}
+
+/**
+ * Fetch all rack prefabs of the specified project.
+ */
+export function useRackPrefabs(projectId, options = {}) {
+    return useQuery(['rack-prefabs', projectId], { enabled: !!projectId, ...options })
+}
+
+/**
+ * Create a mutation for a new rack prefab.
+ */
+export function useNewRackPrefab() {
+    return useMutation('addRackPrefab')
+}
+
+/**
+ * Create a mutation for deleting a rack prefab.
+ */
+export function useDeleteRackPrefab(options = {}) {
+    return useMutation('deleteRackPrefab', options)
+}
diff --git a/opendc-web/opendc-web-server/src/main/webui/redux/actions/topology/room.js b/opendc-web/opendc-web-server/src/main/webui/redux/actions/topology/room.js
index 14cc126c..70c93d1f 100644
--- a/opendc-web/opendc-web-server/src/main/webui/redux/actions/topology/room.js
+++ b/opendc-web/opendc-web-server/src/main/webui/redux/actions/topology/room.js
@@ -1,4 +1,6 @@
 import { v4 as uuid } from 'uuid'
+import { normalize } from 'normalizr'
+import { Rack as RackSchema } from '../../../util/topology-schema'
 import {
     DEFAULT_RACK_SLOT_CAPACITY,
     DEFAULT_RACK_POWER_CAPACITY,
@@ -31,9 +33,10 @@ export function editRoomName(roomId, name) {
     }
 }
 
-export function startRackConstruction() {
+export function startRackConstruction(rackPrefab) {
     return {
         type: START_RACK_CONSTRUCTION,
+        rackPrefab,
     }
 }
 
@@ -45,22 +48,34 @@ export function stopRackConstruction() {
 
 export function addRackToTile(positionX, positionY) {
     return (dispatch, getState) => {
-        const { topology, interactionLevel } = getState()
+        const { topology, interactionLevel, construction } = getState()
         const currentRoom = topology.rooms[interactionLevel.roomId]
         const tiles = currentRoom.tiles.map((tileId) => topology.tiles[tileId])
         const tile = findTileWithPosition(tiles, positionX, positionY)
 
         if (tile !== null) {
+            const prefab = construction.currentRackPrefab
+            const rackId = uuid()
+            const rack = prefab
+                ? {
+                      ...prefab.rack,
+                      id: rackId,
+                      machines: (prefab.rack.machines || []).map((m) => ({ ...m, id: uuid(), rackId })),
+                  }
+                : {
+                      id: rackId,
+                      name: 'Rack',
+                      capacity: DEFAULT_RACK_SLOT_CAPACITY,
+                      powerCapacityW: DEFAULT_RACK_POWER_CAPACITY,
+                      machines: [],
+                  }
+
+            const { entities, result: normalizedRackId } = normalize(rack, RackSchema)
             dispatch({
                 type: ADD_RACK_TO_TILE,
                 tileId: tile.id,
-                rack: {
-                    id: uuid(),
-                    name: 'Rack',
-                    capacity: DEFAULT_RACK_SLOT_CAPACITY,
-                    powerCapacityW: DEFAULT_RACK_POWER_CAPACITY,
-                    machines: [],
-                },
+                rack: entities.racks[normalizedRackId],
+                entities,
             })
         }
     }
diff --git a/opendc-web/opendc-web-server/src/main/webui/redux/reducers/construction-mode.js b/opendc-web/opendc-web-server/src/main/webui/redux/reducers/construction-mode.js
index d0aac5ae..8520e794 100644
--- a/opendc-web/opendc-web-server/src/main/webui/redux/reducers/construction-mode.js
+++ b/opendc-web/opendc-web-server/src/main/webui/redux/reducers/construction-mode.js
@@ -37,7 +37,20 @@ export function inRackConstructionMode(state = false, action) {
     }
 }
 
+export function currentRackPrefab(state = null, action) {
+    switch (action.type) {
+        case START_RACK_CONSTRUCTION:
+            return action.rackPrefab || null
+        case STOP_RACK_CONSTRUCTION:
+        case GO_DOWN_ONE_INTERACTION_LEVEL:
+            return null
+        default:
+            return state
+    }
+}
+
 export const construction = combineReducers({
     currentRoomInConstruction,
     inRackConstructionMode,
+    currentRackPrefab,
 })
diff --git a/opendc-web/opendc-web-server/src/main/webui/redux/reducers/topology/machine.js b/opendc-web/opendc-web-server/src/main/webui/redux/reducers/topology/machine.js
index 1789257b..5cf38726 100644
--- a/opendc-web/opendc-web-server/src/main/webui/redux/reducers/topology/machine.js
+++ b/opendc-web/opendc-web-server/src/main/webui/redux/reducers/topology/machine.js
@@ -2,11 +2,19 @@ import produce from 'immer'
 import { STORE_TOPOLOGY } from '../../actions/topology'
 import { DELETE_MACHINE, ADD_UNIT, DELETE_UNIT } from '../../actions/topology/machine'
 import { ADD_MACHINE, DELETE_RACK } from '../../actions/topology/rack'
+import { ADD_RACK_TO_TILE } from '../../actions/topology/room'
 
 function machine(state = {}, action, { racks }) {
     switch (action.type) {
         case STORE_TOPOLOGY:
             return action.entities.machines || {}
+        case ADD_RACK_TO_TILE:
+            return produce(state, (draft) => {
+                const { entities } = action
+                if (entities && entities.machines) {
+                    Object.assign(draft, entities.machines)
+                }
+            })
         case ADD_MACHINE:
             return produce(state, (draft) => {
                 const { machine } = action