merge: Address technical dept in topology view (#162)

This pull request aims to address some of the technical debt in the topology 
view of the OpenDC frontend.

* Add support for panning of the datacenter topology
* Isolate world coordinate space (world objects do not depend on camera scale or position)
* Split transpiled modules into a separate chunk to reduce deduplication
* Encode state in topology actions to reduce global state
* Restructure components per page
* Enable more ESLint rules through `eslint:recommended` ruleset
* Move page components in separate files.

8 files changed, 0 insertions, 418 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
deleted file mode 100644
index a7bf3719..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/DeleteMachine.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * 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 } from 'react-redux'
-import { deleteMachine } from '../../../../../redux/actions/topology/machine'
-import { Button } from '@patternfly/react-core'
-import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
-import ConfirmationModal from '../../../../modals/ConfirmationModal'
-
-const DeleteMachine = () => {
-    const dispatch = useDispatch()
-    const [isVisible, setVisible] = useState(false)
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteMachine())
-        }
-        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/app/sidebars/topology/machine/MachineSidebarComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
deleted file mode 100644
index d3d4a8cf..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
+++ /dev/null
@@ -1,44 +0,0 @@
-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'
-
-const MachineSidebarComponent = ({ machineId }) => {
-    const machine = useSelector((state) => state.objects.machine[machineId])
-    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 />
-            </div>
-        </div>
-    )
-}
-
-MachineSidebarComponent.propTypes = {
-    machineId: PropTypes.string,
-}
-
-export default MachineSidebarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js
deleted file mode 100644
index 94d9f2c3..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/MachineSidebarContainer.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * 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 { useSelector } from 'react-redux'
-import MachineSidebarComponent from './MachineSidebarComponent'
-
-const MachineSidebarContainer = (props) => {
-    const machineId = useSelector(
-        (state) =>
-            state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].machines[
-                state.interactionLevel.position - 1
-            ]
-    )
-    return <MachineSidebarComponent {...props} machineId={machineId} />
-}
-
-export default MachineSidebarContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
deleted file mode 100644
index 88591208..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ /dev/null
@@ -1,42 +0,0 @@
-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/app/sidebars/topology/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
deleted file mode 100644
index 8a6680e6..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitAddContainer.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * 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 { addUnit } from '../../../../../redux/actions/topology/machine'
-import UnitAddComponent from './UnitAddComponent'
-
-const UnitAddContainer = ({ unitType }) => {
-    const units = useSelector((state) => Object.values(state.objects[unitType]))
-    const dispatch = useDispatch()
-
-    const onAdd = (id) => dispatch(addUnit(unitType, id))
-
-    return <UnitAddComponent onAdd={onAdd} units={units} />
-}
-
-UnitAddContainer.propTypes = {
-    unitType: PropTypes.string.isRequired,
-}
-
-export default UnitAddContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
deleted file mode 100644
index 9c3c08fd..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { ProcessingUnit, StorageUnit } from '../../../../../shapes'
-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'
-
-const 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,
-}
-
-const 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/app/sidebars/topology/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
deleted file mode 100644
index 2d994f97..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitListContainer.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * 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',
-}
-
-const UnitListContainer = ({ unitType, ...props }) => {
-    const dispatch = useDispatch()
-    const units = useSelector((state) => {
-        const machine =
-            state.objects.machine[
-                state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rack].machines[
-                    state.interactionLevel.position - 1
-                ]
-            ]
-        return machine[unitMapping[unitType]].map((id) => state.objects[unitType][id])
-    })
-    const onDelete = (unit, unitType) => dispatch(deleteUnit(unitType, unit._id))
-
-    return <UnitListComponent {...props} units={units} unitType={unitType} onDelete={onDelete} />
-}
-
-UnitListContainer.propTypes = {
-    unitType: PropTypes.string.isRequired,
-}
-
-export default UnitListContainer
diff --git a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
deleted file mode 100644
index 723ed2e2..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { useState } from 'react'
-import { Tab, Tabs, TabTitleText } from '@patternfly/react-core'
-import UnitAddContainer from './UnitAddContainer'
-import UnitListContainer from './UnitListContainer'
-
-const UnitTabsComponent = () => {
-    const [activeTab, setActiveTab] = useState('cpu-units')
-
-    return (
-        <Tabs activeKey={activeTab} onSelect={(_, tab) => setActiveTab(tab)}>
-            <Tab eventKey="cpu-units" title={<TabTitleText>CPU</TabTitleText>}>
-                <UnitAddContainer unitType="cpu" />
-                <UnitListContainer unitType="cpu" />
-            </Tab>
-            <Tab eventKey="gpu-units" title={<TabTitleText>GPU</TabTitleText>}>
-                <UnitAddContainer unitType="gpu" />
-                <UnitListContainer unitType="gpu" />
-            </Tab>
-            <Tab eventKey="memory-units" title={<TabTitleText>Memory</TabTitleText>}>
-                <UnitAddContainer unitType="memory" />
-                <UnitListContainer unitType="memory" />
-            </Tab>
-            <Tab eventKey="storage-units" title={<TabTitleText>Storage</TabTitleText>}>
-                <UnitAddContainer unitType="storage" />
-                <UnitListContainer unitType="storage" />
-            </Tab>
-        </Tabs>
-    )
-}
-
-export default UnitTabsComponent