From 5e5ab63b280eb446db4090733cd3ad2e97d02018 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 15:47:23 +0200
Subject: refactor(ui): Restructure components per page

This change updates the source structure of the OpenDC frontend to
follow the page structure.
---
 .../components/topologies/sidebar/NameComponent.js |  69 +++++++++++++
 .../topologies/sidebar/TopologySidebar.js          |  83 +++++++++++++++
 .../topologies/sidebar/TopologySidebar.module.scss |  37 +++++++
 .../topologies/sidebar/building/BuildingSidebar.js |   8 ++
 .../building/NewRoomConstructionComponent.js       |  46 +++++++++
 .../building/NewRoomConstructionContainer.js       |  46 +++++++++
 .../topologies/sidebar/machine/DeleteMachine.js    |  56 +++++++++++
 .../topologies/sidebar/machine/MachineSidebar.js   |  49 +++++++++
 .../topologies/sidebar/machine/UnitAddComponent.js |  42 ++++++++
 .../topologies/sidebar/machine/UnitAddContainer.js |  43 ++++++++
 .../sidebar/machine/UnitListComponent.js           | 112 +++++++++++++++++++++
 .../sidebar/machine/UnitListContainer.js           |  53 ++++++++++
 .../sidebar/machine/UnitTabsComponent.js           |  36 +++++++
 .../topologies/sidebar/rack/AddPrefab.js           |  44 ++++++++
 .../topologies/sidebar/rack/DeleteRackContainer.js |  59 +++++++++++
 .../topologies/sidebar/rack/MachineComponent.js    |  46 +++++++++
 .../sidebar/rack/MachineListComponent.js           |  73 ++++++++++++++
 .../sidebar/rack/MachineListContainer.js           |  56 +++++++++++
 .../topologies/sidebar/rack/RackNameContainer.js   |  22 ++++
 .../topologies/sidebar/rack/RackSidebar.js         |  58 +++++++++++
 .../sidebar/rack/RackSidebar.module.scss           |  12 +++
 .../topologies/sidebar/room/DeleteRoomContainer.js |  59 +++++++++++
 .../topologies/sidebar/room/EditRoomContainer.js   |  61 +++++++++++
 .../sidebar/room/RackConstructionComponent.js      |  35 +++++++
 .../sidebar/room/RackConstructionContainer.js      |  46 +++++++++
 .../components/topologies/sidebar/room/RoomName.js |  44 ++++++++
 .../topologies/sidebar/room/RoomSidebar.js         |  43 ++++++++
 27 files changed, 1338 insertions(+)
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/NameComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/BuildingSidebar.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/DeleteRoomContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/EditRoomContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionComponent.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionContainer.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomSidebar.js

(limited to 'opendc-web/opendc-web-ui/src/components/topologies/sidebar')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/NameComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/NameComponent.js
new file mode 100644
index 00000000..ececd07b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/NameComponent.js
@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+import { Button, TextInput } from '@patternfly/react-core'
+import { PencilAltIcon, CheckIcon, TimesIcon } from '@patternfly/react-icons'
+
+function NameComponent({ name, onEdit }) {
+    const [isEditing, setEditing] = useState(false)
+    const nameInput = useRef(null)
+
+    const onCancel = () => {
+        nameInput.current.value = name
+        setEditing(false)
+    }
+
+    const onSubmit = (event) => {
+        if (event) {
+            event.preventDefault()
+        }
+
+        const name = nameInput.current.value
+        if (name) {
+            onEdit(name)
+        }
+
+        setEditing(false)
+    }
+
+    return (
+        <form
+            className={`pf-c-inline-edit ${isEditing ? 'pf-m-inline-editable' : ''} pf-u-display-inline-block`}
+            onSubmit={onSubmit}
+        >
+            <div className="pf-c-inline-edit__group">
+                <div className="pf-c-inline-edit__value" id="single-inline-edit-example-label">
+                    {name}
+                </div>
+                <div className="pf-c-inline-edit__action pf-m-enable-editable">
+                    <Button className="pf-u-py-0" variant="plain" aria-label="Edit" onClick={() => setEditing(true)}>
+                        <PencilAltIcon />
+                    </Button>
+                </div>
+            </div>
+            <div className="pf-c-inline-edit__group">
+                <div className="pf-c-inline-edit__input">
+                    <TextInput type="text" defaultValue={name} ref={nameInput} aria-label="Editable text input" />
+                </div>
+                <div className="pf-c-inline-edit__group pf-m-action-group pf-m-icon-group">
+                    <div className="pf-c-inline-edit__action pf-m-valid">
+                        <Button className="pf-u-py-0" variant="plain" aria-label="Save edits" onClick={onSubmit}>
+                            <CheckIcon />
+                        </Button>
+                    </div>
+                    <div className="pf-c-inline-edit__action">
+                        <Button className="pf-u-py-0" variant="plain" aria-label="Cancel edits" onClick={onCancel}>
+                            <TimesIcon />
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </form>
+    )
+}
+
+NameComponent.propTypes = {
+    name: PropTypes.string,
+    onEdit: PropTypes.func,
+}
+
+export default NameComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
new file mode 100644
index 00000000..5d9340b2
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js
@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { InteractionLevel } from '../../../shapes'
+import BuildingSidebar from './building/BuildingSidebar'
+import {
+    Button,
+    DrawerActions,
+    DrawerCloseButton,
+    DrawerHead,
+    DrawerPanelBody,
+    DrawerPanelContent,
+    Flex,
+    Title,
+} from '@patternfly/react-core'
+import { AngleLeftIcon } from '@patternfly/react-icons'
+import { useDispatch } from 'react-redux'
+import { backButton } from './TopologySidebar.module.scss'
+import RoomSidebar from './room/RoomSidebar'
+import RackSidebar from './rack/RackSidebar'
+import MachineSidebar from './machine/MachineSidebar'
+import { goDownOneInteractionLevel } from '../../../redux/actions/interaction-level'
+
+const name = {
+    BUILDING: 'Building',
+    ROOM: 'Room',
+    RACK: 'Rack',
+    MACHINE: 'Machine',
+}
+
+function TopologySidebar({ interactionLevel, onClose }) {
+    let sidebarContent
+
+    switch (interactionLevel.mode) {
+        case 'BUILDING':
+            sidebarContent = <BuildingSidebar />
+            break
+        case 'ROOM':
+            sidebarContent = <RoomSidebar roomId={interactionLevel.roomId} />
+            break
+        case 'RACK':
+            sidebarContent = <RackSidebar tileId={interactionLevel.tileId} />
+            break
+        case 'MACHINE':
+            sidebarContent = <MachineSidebar tileId={interactionLevel.tileId} position={interactionLevel.position} />
+            break
+        default:
+            sidebarContent = 'Missing Content'
+    }
+
+    const dispatch = useDispatch()
+    const onClick = () => dispatch(goDownOneInteractionLevel())
+
+    return (
+        <DrawerPanelContent isResizable defaultSize="450px" minSize="400px">
+            <DrawerHead>
+                <Flex>
+                    <Button
+                        variant="tertiary"
+                        isSmall
+                        className={backButton}
+                        onClick={interactionLevel.mode === 'BUILDING' ? onClose : onClick}
+                    >
+                        <AngleLeftIcon />
+                    </Button>
+                    <Title className="pf-u-align-self-center" headingLevel="h1">
+                        {name[interactionLevel.mode]}
+                    </Title>
+                </Flex>
+                <DrawerActions>
+                    <DrawerCloseButton onClose={onClose} />
+                </DrawerActions>
+            </DrawerHead>
+            <DrawerPanelBody>{sidebarContent}</DrawerPanelBody>
+        </DrawerPanelContent>
+    )
+}
+
+TopologySidebar.propTypes = {
+    interactionLevel: InteractionLevel,
+    onClose: PropTypes.func,
+}
+
+export default TopologySidebar
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss
new file mode 100644
index 00000000..45dc98da
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss
@@ -0,0 +1,37 @@
+/*!
+ * 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.
+ */
+
+.backButton {
+    &:global(.pf-c-button) {
+        align-self: center;
+        --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--light-100);
+        color: var(--pf-global--Color--400);
+
+        --pf-c-button--PaddingRight: var(--pf-global--spacer--sm);
+        --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm);
+
+        &:hover,
+        &:focus {
+            --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100);
+        }
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/BuildingSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/BuildingSidebar.js
new file mode 100644
index 00000000..5fcd46be
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/BuildingSidebar.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import NewRoomConstructionContainer from './NewRoomConstructionContainer'
+
+function BuildingSidebar() {
+    return <NewRoomConstructionContainer />
+}
+
+export default BuildingSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionComponent.js
new file mode 100644
index 00000000..9fc85d0c
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionComponent.js
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Button, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core'
+import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
+import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'
+
+function NewRoomConstructionComponent({ onStart, onFinish, onCancel, currentRoomInConstruction }) {
+    if (currentRoomInConstruction === '-1') {
+        return (
+            <Button isBlock icon={<PlusIcon />} onClick={onStart}>
+                Construct a new room
+            </Button>
+        )
+    }
+    return (
+        <Toolbar
+            inset={{
+                default: 'insetNone',
+            }}
+        >
+            <ToolbarContent>
+                <ToolbarGroup>
+                    <ToolbarItem>
+                        <Button icon={<CheckIcon />} onClick={onFinish}>
+                            Finalize new room
+                        </Button>
+                    </ToolbarItem>
+                    <ToolbarItem widths={{ default: '100%' }}>
+                        <Button isBlock variant="secondary" onClick={onCancel}>
+                            Cancel
+                        </Button>
+                    </ToolbarItem>
+                </ToolbarGroup>
+            </ToolbarContent>
+        </Toolbar>
+    )
+}
+
+NewRoomConstructionComponent.propTypes = {
+    onStart: PropTypes.func,
+    onFinish: PropTypes.func,
+    onCancel: PropTypes.func,
+    currentRoomInConstruction: PropTypes.string,
+}
+
+export default NewRoomConstructionComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionContainer.js
new file mode 100644
index 00000000..c149b224
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/building/NewRoomConstructionContainer.js
@@ -0,0 +1,46 @@
+/*
+ * 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 React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+    cancelNewRoomConstruction,
+    finishNewRoomConstruction,
+    startNewRoomConstruction,
+} from '../../../../redux/actions/topology/building'
+import NewRoomConstructionComponent from './NewRoomConstructionComponent'
+
+function NewRoomConstructionButton() {
+    const currentRoomInConstruction = useSelector((state) => state.construction.currentRoomInConstruction)
+    const dispatch = useDispatch()
+
+    return (
+        <NewRoomConstructionComponent
+            onStart={() => dispatch(startNewRoomConstruction())}
+            onFinish={() => dispatch(finishNewRoomConstruction())}
+            onCancel={() => dispatch(cancelNewRoomConstruction())}
+            currentRoomInConstruction={currentRoomInConstruction}
+        />
+    )
+}
+
+export default NewRoomConstructionButton
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
new file mode 100644
index 00000000..00ce4603
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/DeleteMachine.js
@@ -0,0 +1,56 @@
+/*
+ * 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 React, { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { Button } from '@patternfly/react-core'
+import { TrashIcon } from '@patternfly/react-icons'
+import ConfirmationModal from '../../../util/modals/ConfirmationModal'
+import { deleteMachine } from '../../../../redux/actions/topology/machine'
+
+function DeleteMachine() {
+    const dispatch = useDispatch()
+    const [isVisible, setVisible] = useState(false)
+    const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rack)
+    const position = useSelector((state) => state.interactionLevel.position)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteMachine(rackId, position))
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
+                Delete this machine
+            </Button>
+            <ConfirmationModal
+                title="Delete this machine"
+                message="Are you sure you want to delete this machine?"
+                isOpen={isVisible}
+                callback={callback}
+            />
+        </>
+    )
+}
+
+export default DeleteMachine
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
new file mode 100644
index 00000000..0c3dea98
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/MachineSidebar.js
@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import UnitTabsComponent from './UnitTabsComponent'
+import DeleteMachine from './DeleteMachine'
+import {
+    TextContent,
+    TextList,
+    TextListItem,
+    TextListItemVariants,
+    TextListVariants,
+    Title,
+} from '@patternfly/react-core'
+import { useSelector } from 'react-redux'
+
+function MachineSidebar({ tileId, position }) {
+    const machine = useSelector(({ objects }) => {
+        const rack = objects.rack[objects.tile[tileId].rack]
+        return objects.machine[rack.machines[position - 1]]
+    })
+    const machineId = machine._id
+    return (
+        <div>
+            <TextContent>
+                <Title headingLevel="h2">Details</Title>
+                <TextList component={TextListVariants.dl}>
+                    <TextListItem component={TextListItemVariants.dt}>Name</TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        Machine at position {machine.position}
+                    </TextListItem>
+                </TextList>
+
+                <Title headingLevel="h2">Actions</Title>
+                <DeleteMachine />
+
+                <Title headingLevel="h2">Units</Title>
+            </TextContent>
+            <div className="pf-u-h-100">
+                <UnitTabsComponent machineId={machineId} />
+            </div>
+        </div>
+    )
+}
+
+MachineSidebar.propTypes = {
+    tileId: PropTypes.string.isRequired,
+    position: PropTypes.number.isRequired,
+}
+
+export default MachineSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
new file mode 100644
index 00000000..88591208
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddComponent.js
@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { Button, InputGroup, Select, SelectOption, SelectVariant } from '@patternfly/react-core'
+import PlusIcon from '@patternfly/react-icons/dist/js/icons/plus-icon'
+
+function UnitAddComponent({ units, onAdd }) {
+    const [isOpen, setOpen] = useState(false)
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <InputGroup>
+            <Select
+                variant={SelectVariant.single}
+                placeholderText="Select a unit"
+                aria-label="Select Unit"
+                onToggle={() => setOpen(!isOpen)}
+                isOpen={isOpen}
+                onSelect={(_, selection) => {
+                    setSelected(selection)
+                    setOpen(false)
+                }}
+                selections={selected}
+            >
+                {units.map((unit) => (
+                    <SelectOption value={unit._id} key={unit._id}>
+                        {unit.name}
+                    </SelectOption>
+                ))}
+            </Select>
+            <Button icon={<PlusIcon />} variant="control" onClick={() => onAdd(selected)}>
+                Add
+            </Button>
+        </InputGroup>
+    )
+}
+
+UnitAddComponent.propTypes = {
+    units: PropTypes.array.isRequired,
+    onAdd: PropTypes.func.isRequired,
+}
+
+export default UnitAddComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
new file mode 100644
index 00000000..fc805b95
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitAddContainer.js
@@ -0,0 +1,43 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import UnitAddComponent from './UnitAddComponent'
+import { addUnit } from '../../../../redux/actions/topology/machine'
+
+function UnitAddContainer({ machineId, unitType }) {
+    const units = useSelector((state) => Object.values(state.objects[unitType]))
+    const dispatch = useDispatch()
+
+    const onAdd = (id) => dispatch(addUnit(machineId, unitType, id))
+
+    return <UnitAddComponent onAdd={onAdd} units={units} />
+}
+
+UnitAddContainer.propTypes = {
+    machineId: PropTypes.string.isRequired,
+    unitType: PropTypes.string.isRequired,
+}
+
+export default UnitAddContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListComponent.js
new file mode 100644
index 00000000..daa3e7a7
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListComponent.js
@@ -0,0 +1,112 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+    Button,
+    DataList,
+    DataListAction,
+    DataListCell,
+    DataListItem,
+    DataListItemCells,
+    DataListItemRow,
+    DescriptionList,
+    DescriptionListDescription,
+    DescriptionListGroup,
+    DescriptionListTerm,
+    EmptyState,
+    EmptyStateBody,
+    EmptyStateIcon,
+    Popover,
+    Title,
+} from '@patternfly/react-core'
+import { CubesIcon, InfoIcon, TrashIcon } from '@patternfly/react-icons'
+import { ProcessingUnit, StorageUnit } from '../../../../shapes'
+
+function UnitInfo({ unit, unitType }) {
+    if (unitType === 'cpu' || unitType === 'gpu') {
+        return (
+            <DescriptionList>
+                <DescriptionListGroup>
+                    <DescriptionListTerm>Clock Frequency</DescriptionListTerm>
+                    <DescriptionListDescription>{unit.clockRateMhz} MHz</DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                    <DescriptionListTerm>Number of Cores</DescriptionListTerm>
+                    <DescriptionListDescription>{unit.numberOfCores}</DescriptionListDescription>
+                </DescriptionListGroup>
+                <DescriptionListGroup>
+                    <DescriptionListTerm>Energy Consumption</DescriptionListTerm>
+                    <DescriptionListDescription>{unit.energyConsumptionW} W</DescriptionListDescription>
+                </DescriptionListGroup>
+            </DescriptionList>
+        )
+    }
+
+    return (
+        <DescriptionList>
+            <DescriptionListGroup>
+                <DescriptionListTerm>Speed</DescriptionListTerm>
+                <DescriptionListDescription>{unit.speedMbPerS} Mb/s</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+                <DescriptionListTerm>Capacity</DescriptionListTerm>
+                <DescriptionListDescription>{unit.sizeMb} MB</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+                <DescriptionListTerm>Energy Consumption</DescriptionListTerm>
+                <DescriptionListDescription>{unit.energyConsumptionW} W</DescriptionListDescription>
+            </DescriptionListGroup>
+        </DescriptionList>
+    )
+}
+
+UnitInfo.propTypes = {
+    unitType: PropTypes.string.isRequired,
+    unit: PropTypes.oneOfType([ProcessingUnit, StorageUnit]).isRequired,
+}
+
+function UnitListComponent({ unitType, units, onDelete }) {
+    if (units.length === 0) {
+        return (
+            <EmptyState>
+                <EmptyStateIcon icon={CubesIcon} />
+                <Title headingLevel="h5" size="lg">
+                    No units found
+                </Title>
+                <EmptyStateBody>You have not configured any units yet. Add some with the menu above!</EmptyStateBody>
+            </EmptyState>
+        )
+    }
+
+    return (
+        <DataList aria-label="Machine Units" isCompact>
+            {units.map((unit, index) => (
+                <DataListItem key={index}>
+                    <DataListItemRow>
+                        <DataListItemCells dataListCells={[<DataListCell key="unit">{unit.name}</DataListCell>]} />
+                        <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
+                            <Popover
+                                headerContent="Unit Information"
+                                bodyContent={<UnitInfo unitType={unitType} unit={unit} />}
+                            >
+                                <Button isSmall variant="plain" className="pf-u-p-0">
+                                    <InfoIcon />
+                                </Button>
+                            </Popover>
+                            <Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onDelete(units[index])}>
+                                <TrashIcon />
+                            </Button>
+                        </DataListAction>
+                    </DataListItemRow>
+                </DataListItem>
+            ))}
+        </DataList>
+    )
+}
+
+UnitListComponent.propTypes = {
+    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/topologies/sidebar/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
new file mode 100644
index 00000000..901fa45b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitListContainer.js
@@ -0,0 +1,53 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import UnitListComponent from './UnitListComponent'
+import { deleteUnit } from '../../../../redux/actions/topology/machine'
+
+const unitMapping = {
+    cpu: 'cpus',
+    gpu: 'gpus',
+    memory: 'memories',
+    storage: 'storages',
+}
+
+function UnitListContainer({ machineId, unitType }) {
+    const dispatch = useDispatch()
+    const units = useSelector((state) => {
+        const machine = state.objects.machine[machineId]
+        return machine[unitMapping[unitType]].map((id) => state.objects[unitType][id])
+    })
+
+    const onDelete = (unit) => dispatch(deleteUnit(machineId, unitType, unit._id))
+
+    return <UnitListComponent units={units} unitType={unitType} onDelete={onDelete} />
+}
+
+UnitListContainer.propTypes = {
+    machineId: PropTypes.string.isRequired,
+    unitType: PropTypes.string.isRequired,
+}
+
+export default UnitListContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
new file mode 100644
index 00000000..6d10d2df
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/machine/UnitTabsComponent.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { Tab, Tabs, TabTitleText } from '@patternfly/react-core'
+import UnitAddContainer from './UnitAddContainer'
+import UnitListContainer from './UnitListContainer'
+
+function UnitTabsComponent({ machineId }) {
+    const [activeTab, setActiveTab] = useState('cpu-units')
+
+    return (
+        <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
+            <Tab eventKey="cpu-units" title={<TabTitleText>CPU</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="cpu" />
+                <UnitListContainer machineId={machineId} unitType="cpu" />
+            </Tab>
+            <Tab eventKey="gpu-units" title={<TabTitleText>GPU</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="gpu" />
+                <UnitListContainer machineId={machineId} unitType="gpu" />
+            </Tab>
+            <Tab eventKey="memory-units" title={<TabTitleText>Memory</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="memory" />
+                <UnitListContainer machineId={machineId} unitType="memory" />
+            </Tab>
+            <Tab eventKey="storage-units" title={<TabTitleText>Storage</TabTitleText>}>
+                <UnitAddContainer machineId={machineId} unitType="storage" />
+                <UnitListContainer machineId={machineId} unitType="storage" />
+            </Tab>
+        </Tabs>
+    )
+}
+
+UnitTabsComponent.propTypes = {
+    machineId: PropTypes.string.isRequired,
+}
+
+export default UnitTabsComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js
new file mode 100644
index 00000000..e944c2e8
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/AddPrefab.js
@@ -0,0 +1,44 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { Button } from '@patternfly/react-core'
+import { SaveIcon } from '@patternfly/react-icons'
+import { addPrefab } from '../../../../api/prefabs'
+
+function AddPrefab({ tileId }) {
+    const dispatch = useDispatch()
+    const onClick = () => dispatch(addPrefab('name', tileId))
+    return (
+        <Button variant="primary" icon={<SaveIcon />} isBlock onClick={onClick} className="pf-u-mb-sm">
+            Save this rack to a prefab
+        </Button>
+    )
+}
+
+AddPrefab.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default AddPrefab
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
new file mode 100644
index 00000000..80c6349a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
@@ -0,0 +1,59 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
+import { Button } from '@patternfly/react-core'
+import ConfirmationModal from '../../../util/modals/ConfirmationModal'
+import { deleteRack } from '../../../../redux/actions/topology/rack'
+
+function DeleteRackContainer({ tileId }) {
+    const dispatch = useDispatch()
+    const [isVisible, setVisible] = useState(false)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteRack(tileId))
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
+                Delete this rack
+            </Button>
+            <ConfirmationModal
+                title="Delete this rack"
+                message="Are you sure you want to delete this rack?"
+                isOpen={isVisible}
+                callback={callback}
+            />
+        </>
+    )
+}
+
+DeleteRackContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default DeleteRackContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
new file mode 100644
index 00000000..921622d6
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineComponent.js
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Image from 'next/image'
+import { Flex, Label } from '@patternfly/react-core'
+import { Machine } from '../../../../shapes'
+
+const UnitIcon = ({ id, type }) => (
+    <Image
+        src={'/img/topology/' + id + '-icon.png'}
+        alt={'Machine contains ' + type + ' units'}
+        layout="intrinsic"
+        height={24}
+        width={24}
+    />
+)
+
+UnitIcon.propTypes = {
+    id: PropTypes.string,
+    type: PropTypes.string,
+}
+
+function MachineComponent({ machine, onClick }) {
+    const hasNoUnits =
+        machine.cpus.length + machine.gpus.length + machine.memories.length + machine.storages.length === 0
+
+    return (
+        <Flex onClick={() => onClick()}>
+            {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 ? (
+                <Label variant="outline" color="orange">
+                    Machine with no units
+                </Label>
+            ) : undefined}
+        </Flex>
+    )
+}
+
+MachineComponent.propTypes = {
+    machine: Machine.isRequired,
+    onClick: PropTypes.func,
+}
+
+export default MachineComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js
new file mode 100644
index 00000000..de7a2140
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListComponent.js
@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import MachineComponent from './MachineComponent'
+import {
+    Badge,
+    Button,
+    DataList,
+    DataListAction,
+    DataListCell,
+    DataListItem,
+    DataListItemCells,
+    DataListItemRow,
+} from '@patternfly/react-core'
+import { AngleRightIcon, PlusIcon } from '@patternfly/react-icons'
+import { Machine } from '../../../../shapes'
+
+function MachineListComponent({ machines = [], onSelect, onAdd }) {
+    return (
+        <DataList aria-label="Rack Units">
+            {machines.map((machine, index) =>
+                machine ? (
+                    <DataListItem key={index} onClick={() => onSelect(index + 1)}>
+                        <DataListItemRow>
+                            <DataListItemCells
+                                dataListCells={[
+                                    <DataListCell isIcon key="icon">
+                                        <Badge isRead>{machines.length - index}U</Badge>
+                                    </DataListCell>,
+                                    <DataListCell key="primary content">
+                                        <MachineComponent onClick={() => onSelect(index + 1)} machine={machine} />
+                                    </DataListCell>,
+                                ]}
+                            />
+                            <DataListAction id="goto" aria-label="Goto Machine" aria-labelledby="goto">
+                                <Button isSmall variant="plain" className="pf-u-p-0">
+                                    <AngleRightIcon />
+                                </Button>
+                            </DataListAction>
+                        </DataListItemRow>
+                    </DataListItem>
+                ) : (
+                    <DataListItem key={index}>
+                        <DataListItemRow>
+                            <DataListItemCells
+                                dataListCells={[
+                                    <DataListCell isIcon key="icon">
+                                        <Badge isRead>{machines.length - index}U</Badge>
+                                    </DataListCell>,
+                                    <DataListCell key="add" className="text-secondary">
+                                        Empty Slot
+                                    </DataListCell>,
+                                ]}
+                            />
+                            <DataListAction id="add" aria-label="Add Machine" aria-labelledby="add">
+                                <Button isSmall variant="plain" className="pf-u-p-0" onClick={() => onAdd(index + 1)}>
+                                    <PlusIcon />
+                                </Button>
+                            </DataListAction>
+                        </DataListItemRow>
+                    </DataListItem>
+                )
+            )}
+        </DataList>
+    )
+}
+
+MachineListComponent.propTypes = {
+    machines: PropTypes.arrayOf(Machine),
+    onSelect: PropTypes.func.isRequired,
+    onAdd: PropTypes.func.isRequired,
+}
+
+export default MachineListComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
new file mode 100644
index 00000000..6fbff949
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
@@ -0,0 +1,56 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import React, { useMemo } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import MachineListComponent from './MachineListComponent'
+import { goFromRackToMachine } from '../../../../redux/actions/interaction-level'
+import { addMachine } from '../../../../redux/actions/topology/rack'
+
+function MachineListContainer({ tileId, ...props }) {
+    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    const machines = useSelector((state) => rack.machines.map((id) => state.objects.machine[id]))
+    const machinesNull = useMemo(() => {
+        const res = Array(rack.capacity).fill(null)
+        for (const machine of machines) {
+            res[machine.position - 1] = machine
+        }
+        return res
+    }, [rack, machines])
+    const dispatch = useDispatch()
+
+    return (
+        <MachineListComponent
+            {...props}
+            machines={machinesNull}
+            onAdd={(index) => dispatch(addMachine(rack._id, index))}
+            onSelect={(index) => dispatch(goFromRackToMachine(index))}
+        />
+    )
+}
+
+MachineListContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default MachineListContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
new file mode 100644
index 00000000..09d73af7
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import NameComponent from '../NameComponent'
+import { editRackName } from '../../../../redux/actions/topology/rack'
+
+const RackNameContainer = ({ tileId }) => {
+    const { name: rackName, _id } = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    const dispatch = useDispatch()
+    const callback = (name) => {
+        if (name) {
+            dispatch(editRackName(_id, name))
+        }
+    }
+    return <NameComponent name={rackName} onEdit={callback} />
+}
+
+RackNameContainer.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default RackNameContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
new file mode 100644
index 00000000..3c9f152a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { machineListContainer, sidebarContainer } from './RackSidebar.module.scss'
+import RackNameContainer from './RackNameContainer'
+import AddPrefab from './AddPrefab'
+import DeleteRackContainer from './DeleteRackContainer'
+import MachineListContainer from './MachineListContainer'
+import {
+    Skeleton,
+    TextContent,
+    TextList,
+    TextListItem,
+    TextListItemVariants,
+    TextListVariants,
+    Title,
+} from '@patternfly/react-core'
+import { useSelector } from 'react-redux'
+
+function RackSidebar({ tileId }) {
+    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+
+    return (
+        <div className={sidebarContainer}>
+            <TextContent>
+                <Title headingLevel="h2">Details</Title>
+                <TextList component={TextListVariants.dl}>
+                    <TextListItem
+                        component={TextListItemVariants.dt}
+                        className="pf-u-display-inline-flex pf-u-align-items-center"
+                    >
+                        Name
+                    </TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        <RackNameContainer tileId={tileId} />
+                    </TextListItem>
+                    <TextListItem component={TextListItemVariants.dt}>Capacity</TextListItem>
+                    <TextListItem component={TextListItemVariants.dd}>
+                        {rack?.capacity ?? <Skeleton screenreaderText="Loading rack" />}
+                    </TextListItem>
+                </TextList>
+                <Title headingLevel="h2">Actions</Title>
+                <AddPrefab tileId={tileId} />
+                <DeleteRackContainer tileId={tileId} />
+
+                <Title headingLevel="h2">Slots</Title>
+            </TextContent>
+            <div className={machineListContainer}>
+                <MachineListContainer tileId={tileId} />
+            </div>
+        </div>
+    )
+}
+
+RackSidebar.propTypes = {
+    tileId: PropTypes.string.isRequired,
+}
+
+export default RackSidebar
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
new file mode 100644
index 00000000..6f258aec
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss
@@ -0,0 +1,12 @@
+.sidebarContainer {
+    display: flex;
+    height: 100%;
+    max-height: 100%;
+    flex-direction: column;
+}
+
+.machineListContainer {
+    flex: 1;
+    overflow-y: scroll;
+    margin-top: 10px;
+}
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/DeleteRoomContainer.js
new file mode 100644
index 00000000..29b8f78a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/DeleteRoomContainer.js
@@ -0,0 +1,59 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import ConfirmationModal from '../../../util/modals/ConfirmationModal'
+import { deleteRoom } from '../../../../redux/actions/topology/room'
+import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
+import { Button } from '@patternfly/react-core'
+
+function DeleteRoomContainer({ roomId }) {
+    const dispatch = useDispatch()
+    const [isVisible, setVisible] = useState(false)
+    const callback = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteRoom(roomId))
+        }
+        setVisible(false)
+    }
+    return (
+        <>
+            <Button variant="danger" icon={<TrashIcon />} isBlock onClick={() => setVisible(true)}>
+                Delete this room
+            </Button>
+            <ConfirmationModal
+                title="Delete this room"
+                message="Are you sure you want to delete this room?"
+                isOpen={isVisible}
+                callback={callback}
+            />
+        </>
+    )
+}
+
+DeleteRoomContainer.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default DeleteRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/EditRoomContainer.js
new file mode 100644
index 00000000..7a278cd6
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/EditRoomContainer.js
@@ -0,0 +1,61 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { finishRoomEdit, startRoomEdit } from '../../../../redux/actions/topology/building'
+import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon'
+import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon'
+import { Button } from '@patternfly/react-core'
+
+function EditRoomContainer({ roomId }) {
+    const isEditing = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
+    const isInRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
+
+    const dispatch = useDispatch()
+    const onEdit = () => dispatch(startRoomEdit(roomId))
+    const onFinish = () => dispatch(finishRoomEdit())
+
+    return isEditing ? (
+        <Button variant="tertiary" icon={<CheckIcon />} isBlock onClick={onFinish} className="pf-u-mb-sm">
+            Finish editing room
+        </Button>
+    ) : (
+        <Button
+            variant="tertiary"
+            icon={<PencilAltIcon />}
+            isBlock
+            disabled={isInRackConstructionMode}
+            onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
+            className="pf-u-mb-sm"
+        >
+            Edit the tiles of this room
+        </Button>
+    )
+}
+
+EditRoomContainer.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default EditRoomContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionComponent.js
new file mode 100644
index 00000000..a384d5d5
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionComponent.js
@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Button } from '@patternfly/react-core'
+import { PlusIcon, TimesIcon } from '@patternfly/react-icons'
+
+const RackConstructionComponent = ({ onStart, onStop, inRackConstructionMode, isEditingRoom }) => {
+    if (inRackConstructionMode) {
+        return (
+            <Button isBlock={true} icon={<TimesIcon />} onClick={onStop} className="pf-u-mb-sm">
+                Stop rack construction
+            </Button>
+        )
+    }
+
+    return (
+        <Button
+            icon={<PlusIcon />}
+            isBlock
+            isDisabled={isEditingRoom}
+            onClick={() => (isEditingRoom ? undefined : onStart())}
+            className="pf-u-mb-sm"
+        >
+            Start rack construction
+        </Button>
+    )
+}
+
+RackConstructionComponent.propTypes = {
+    onStart: PropTypes.func,
+    onStop: PropTypes.func,
+    inRackConstructionMode: PropTypes.bool,
+    isEditingRoom: PropTypes.bool,
+}
+
+export default RackConstructionComponent
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionContainer.js
new file mode 100644
index 00000000..e04287a5
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RackConstructionContainer.js
@@ -0,0 +1,46 @@
+/*
+ * 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 React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { startRackConstruction, stopRackConstruction } from '../../../../redux/actions/topology/room'
+import RackConstructionComponent from './RackConstructionComponent'
+
+function RackConstructionContainer(props) {
+    const isRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode)
+    const isEditingRoom = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
+
+    const dispatch = useDispatch()
+    const onStart = () => dispatch(startRackConstruction())
+    const onStop = () => dispatch(stopRackConstruction())
+    return (
+        <RackConstructionComponent
+            {...props}
+            inRackConstructionMode={isRackConstructionMode}
+            isEditingRoom={isEditingRoom}
+            onStart={onStart}
+            onStop={onStop}
+        />
+    )
+}
+
+export default RackConstructionContainer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
new file mode 100644
index 00000000..e8d8b33c
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomName.js
@@ -0,0 +1,44 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import NameComponent from '../NameComponent'
+import { editRoomName } from '../../../../redux/actions/topology/room'
+
+function RoomName({ roomId }) {
+    const { name: roomName, _id } = useSelector((state) => state.objects.room[roomId])
+    const dispatch = useDispatch()
+    const callback = (name) => {
+        if (name) {
+            dispatch(editRoomName(_id, name))
+        }
+    }
+    return <NameComponent name={roomName} onEdit={callback} />
+}
+
+RoomName.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default RoomName
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomSidebar.js
new file mode 100644
index 00000000..6ad489e0
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/room/RoomSidebar.js
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import RoomName from './RoomName'
+import RackConstructionContainer from './RackConstructionContainer'
+import EditRoomContainer from './EditRoomContainer'
+import DeleteRoomContainer from './DeleteRoomContainer'
+import {
+    TextContent,
+    TextList,
+    TextListItem,
+    TextListItemVariants,
+    TextListVariants,
+    Title,
+} from '@patternfly/react-core'
+
+const RoomSidebar = ({ roomId }) => {
+    return (
+        <TextContent>
+            <Title headingLevel="h2">Details</Title>
+            <TextList component={TextListVariants.dl}>
+                <TextListItem
+                    component={TextListItemVariants.dt}
+                    className="pf-u-display-inline-flex pf-u-align-items-center"
+                >
+                    Name
+                </TextListItem>
+                <TextListItem component={TextListItemVariants.dd}>
+                    <RoomName roomId={roomId} />
+                </TextListItem>
+            </TextList>
+            <Title headingLevel="h2">Construction</Title>
+            <RackConstructionContainer />
+            <EditRoomContainer roomId={roomId} />
+            <DeleteRoomContainer roomId={roomId} />
+        </TextContent>
+    )
+}
+
+RoomSidebar.propTypes = {
+    roomId: PropTypes.string.isRequired,
+}
+
+export default RoomSidebar
-- 
cgit v1.2.3