diff options
Diffstat (limited to 'opendc-web/opendc-web-server/src/main/webui/components/topologies/sidebar')
3 files changed, 116 insertions, 18 deletions
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} /> |