Add import topology (#393)

* add a the posibility to import and export topogies in JSON format

* fix web-runner integration, there were several bugs and mismatches between new implementations in OpenDC  and the UI

8 files changed, 262 insertions, 9 deletions

diff --git a/opendc-web/opendc-web-server/src/main/webui/components/projects/ImportTopology.js b/opendc-web/opendc-web-server/src/main/webui/components/projects/ImportTopology.js
new file mode 100644
index 00000000..715c1a3e
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/projects/ImportTopology.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 React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { UploadIcon } from '@patternfly/react-icons'
+import { Button } from '@patternfly/react-core'
+import { useNewTopology, useTopologies } from '../../data/topology'
+import ImportTopologyModal from './ImportTopologyModal'
+
+function ImportTopology({ projectId }) {
+    const [isVisible, setVisible] = useState(false)
+    const { mutate: addTopology } = useNewTopology()
+    const { data: topologies = [] } = useTopologies(projectId, { enabled: isVisible })
+
+    const onSubmit = (topology) => {
+        addTopology({ projectId, ...topology })
+        setVisible(false)
+    }
+
+    return (
+        <>
+            <Button variant="secondary" icon={<UploadIcon />} isSmall onClick={() => setVisible(true)}>
+                Import Topology
+            </Button>
+            <ImportTopologyModal
+                isOpen={isVisible}
+                onCancel={() => setVisible(false)}
+                onSubmit={onSubmit}
+                topologies={topologies}
+            />
+        </>
+    )
+}
+
+ImportTopology.propTypes = {
+    projectId: PropTypes.number,
+}
+
+export default ImportTopology
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/projects/ImportTopologyModal.js b/opendc-web/opendc-web-server/src/main/webui/components/projects/ImportTopologyModal.js
new file mode 100644
index 00000000..d8f38426
--- /dev/null
+++ b/opendc-web/opendc-web-server/src/main/webui/components/projects/ImportTopologyModal.js
@@ -0,0 +1,131 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import {
+    Form,
+    FormGroup,
+    FileUpload,
+    Alert,
+} from '@patternfly/react-core'
+import Modal from '../util/modals/Modal'
+
+function ImportTopologyModal({ isOpen, onCancel, onSubmit, topologies = [] }) {
+    const [fileValue, setFileValue] = useState('')
+    const [fileName, setFileName] = useState('')
+    const [isLoading, setIsLoading] = useState(false)
+    const [error, setError] = useState(null)
+
+    const handleFileChange = (value, filename) => {
+        setFileValue(value)
+        setFileName(filename)
+    }
+
+    const handleFileReadStarted = () => setIsLoading(true)
+    const handleFileReadFinished = () => setIsLoading(false)
+
+    const clearState = () => {
+        setFileValue('')
+        setFileName('')
+        setError(null)
+    }
+
+    const onCancelProxy = () => {
+        onCancel()
+        clearState()
+    }
+
+    const handleFormSubmit = (event) => {
+        if (event) {
+            event.preventDefault()
+        }
+
+        if (!fileValue) {
+            setError('Please upload a topology JSON file.')
+            return
+        }
+
+        try {
+            const topology = JSON.parse(fileValue)
+            if (!topology.name || !topology.rooms) {
+                setError('Invalid topology format. Name and rooms are required.')
+                return
+            }
+
+            if (topologies.some((t) => t.name === topology.name)) {
+                setError('A topology with the name "' + topology.name + '" already exists.')
+                return
+            }
+
+            onSubmit(topology)
+            clearState()
+        } catch (err) {
+            setError('Failed to parse JSON: ' + err.message)
+        }
+    }
+
+    return (
+        <Modal
+            title="Import Topology"
+            isOpen={isOpen}
+            onCancel={onCancelProxy}
+            onSubmit={handleFormSubmit}
+            submitButtonText="Import"
+        >
+            <Form onSubmit={handleFormSubmit}>
+                {error && (
+                    <Alert variant="danger" title={error} isInline />
+                )}
+                <FormGroup
+                    label="Topology JSON File"
+                    isRequired
+                    fieldId="topology-file"
+                    helperText="Upload the JSON file of the topology you want to import."
+                >
+                    <FileUpload
+                        id="topology-file"
+                        type="text"
+                        value={fileValue}
+                        filename={fileName}
+                        onChange={handleFileChange}
+                        onReadStarted={handleFileReadStarted}
+                        onReadFinished={handleFileReadFinished}
+                        isLoading={isLoading}
+                        dropzoneProps={{
+                            accept: '.json',
+                        }}
+                    />
+                </FormGroup>
+            </Form>
+        </Modal>
+    )
+}
+
+ImportTopologyModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    topologies: PropTypes.array,
+}
+
+export default ImportTopologyModal
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/projects/NewTopologyModal.js b/opendc-web/opendc-web-server/src/main/webui/components/projects/NewTopologyModal.js
index 780ec034..68b7f150 100644
--- a/opendc-web/opendc-web-server/src/main/webui/components/projects/NewTopologyModal.js
+++ b/opendc-web/opendc-web-server/src/main/webui/components/projects/NewTopologyModal.js
@@ -54,7 +54,10 @@ const NewTopologyModal = ({ projectId, isOpen, onSubmit: onSubmitUpstream, onCan
         const name = nameInput.current.value
 
         if (!name) {
-            setErrors({ name: true })
+            setErrors({ name: 'empty' })
+            return false
+        } else if (topologies.some((topology) => topology.name === name)) {
+            setErrors({ name: 'duplicate' })
             return false
         } else {
             const candidate = topologies.find((topology) => topology.id === originTopology) || { rooms: [] }
@@ -83,7 +86,11 @@ const NewTopologyModal = ({ projectId, isOpen, onSubmit: onSubmitUpstream, onCan
                     fieldId="name"
                     isRequired
                     validated={isSubmitted && errors.name ? 'error' : 'default'}
-                    helperTextInvalid="This field cannot be empty"
+                    helperTextInvalid={
+                        errors.name === 'empty'
+                            ? 'This field cannot be empty'
+                            : 'This topology name already exists'
+                    }
                 >
                     <TextInput id="name" name="name" type="text" isRequired ref={nameInput} />
                 </FormGroup>
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/projects/ProjectOverview.js b/opendc-web/opendc-web-server/src/main/webui/components/projects/ProjectOverview.js
index 3e1656f6..6800f401 100644
--- a/opendc-web/opendc-web-server/src/main/webui/components/projects/ProjectOverview.js
+++ b/opendc-web/opendc-web-server/src/main/webui/components/projects/ProjectOverview.js
@@ -36,6 +36,7 @@ import {
     Skeleton,
 } from '@patternfly/react-core'
 import NewTopology from './NewTopology'
+import ImportTopology from './ImportTopology'
 import TopologyTable from './TopologyTable'
 import NewPortfolio from './NewPortfolio'
 import PortfolioTable from './PortfolioTable'
@@ -65,6 +66,7 @@ function ProjectOverview({ projectId }) {
                 <Card>
                     <CardHeader>
                         <CardActions>
+                            <ImportTopology projectId={projectId} />
                             <NewTopology projectId={projectId} />
                         </CardActions>
                         <CardTitle>Topologies</CardTitle>
diff --git a/opendc-web/opendc-web-server/src/main/webui/components/projects/TopologyTable.js b/opendc-web/opendc-web-server/src/main/webui/components/projects/TopologyTable.js
index 1c2c4f04..89a28889 100644
--- a/opendc-web/opendc-web-server/src/main/webui/components/projects/TopologyTable.js
+++ b/opendc-web/opendc-web-server/src/main/webui/components/projects/TopologyTable.js
@@ -37,11 +37,37 @@ function TopologyTable({ projectId }) {
         onError: (error) => setError(error),
     })
 
-    const actions = ({ number }) => [
+    const downloadTopology = (topology) => {
+        const data = JSON.stringify(
+            { name: topology.name, rooms: topology.rooms },
+            (key, value) => {
+                if (key === 'id' || key === 'topologyId' || key === 'roomId' || key === 'rackId' || key === 'roomid') {
+                    return undefined
+                }
+                return value
+            },
+            4
+        )
+        const blob = new Blob([data], { type: 'application/json' })
+        const url = URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+        link.download = `${topology.name}.json`
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        URL.revokeObjectURL(url)
+    }
+
+    const actions = (topology) => [
+        {
+            title: 'Download as JSON',
+            onClick: () => downloadTopology(topology),
+        },
         {
             title: 'Delete Topology',
-            onClick: () => deleteTopology({ projectId, number }),
-            isDisabled: number === 0,
+            onClick: () => deleteTopology({ projectId, number: topology.number }),
+            isDisabled: topology.number === 0,
         },
     ]
 
diff --git a/opendc-web/opendc-web-server/src/main/webui/redux/reducers/construction-mode.js b/opendc-web/opendc-web-server/src/main/webui/redux/reducers/construction-mode.js
index 8520e794..61265b1e 100644
--- a/opendc-web/opendc-web-server/src/main/webui/redux/reducers/construction-mode.js
+++ b/opendc-web/opendc-web-server/src/main/webui/redux/reducers/construction-mode.js
@@ -1,5 +1,6 @@
 import { combineReducers } from 'redux'
 import { GO_DOWN_ONE_INTERACTION_LEVEL } from '../actions/interaction-level'
+import { OPEN_TOPOLOGY } from '../actions/topology'
 import {
     CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED,
     FINISH_NEW_ROOM_CONSTRUCTION,
@@ -11,6 +12,8 @@ import { DELETE_ROOM, START_RACK_CONSTRUCTION, STOP_RACK_CONSTRUCTION } from '..
 
 export function currentRoomInConstruction(state = '-1', action) {
     switch (action.type) {
+        case OPEN_TOPOLOGY:
+            return '-1'
         case START_NEW_ROOM_CONSTRUCTION_SUCCEEDED:
             return action.roomId
         case START_ROOM_EDIT:
@@ -27,6 +30,8 @@ export function currentRoomInConstruction(state = '-1', action) {
 
 export function inRackConstructionMode(state = false, action) {
     switch (action.type) {
+        case OPEN_TOPOLOGY:
+            return false
         case START_RACK_CONSTRUCTION:
             return true
         case STOP_RACK_CONSTRUCTION:
@@ -39,6 +44,8 @@ export function inRackConstructionMode(state = false, action) {
 
 export function currentRackPrefab(state = null, action) {
     switch (action.type) {
+        case OPEN_TOPOLOGY:
+            return null
         case START_RACK_CONSTRUCTION:
             return action.rackPrefab || null
         case STOP_RACK_CONSTRUCTION:
diff --git a/opendc-web/opendc-web-server/src/main/webui/redux/reducers/interaction-level.js b/opendc-web/opendc-web-server/src/main/webui/redux/reducers/interaction-level.js
index b30c68b9..d1342d3d 100644
--- a/opendc-web/opendc-web-server/src/main/webui/redux/reducers/interaction-level.js
+++ b/opendc-web/opendc-web-server/src/main/webui/redux/reducers/interaction-level.js
@@ -4,12 +4,15 @@ import {
     GO_FROM_RACK_TO_MACHINE,
     GO_FROM_ROOM_TO_RACK,
 } from '../actions/interaction-level'
+import { OPEN_TOPOLOGY } from '../actions/topology'
 import { DELETE_MACHINE } from '../actions/topology/machine'
 import { DELETE_RACK } from '../actions/topology/rack'
 import { DELETE_ROOM } from '../actions/topology/room'
 
 export function interactionLevel(state = { mode: 'BUILDING' }, action) {
     switch (action.type) {
+        case OPEN_TOPOLOGY:
+            return { mode: 'BUILDING' }
         case GO_FROM_BUILDING_TO_ROOM:
             return {
                 mode: 'ROOM',
diff --git a/opendc-web/opendc-web-server/src/main/webui/redux/reducers/topology/index.js b/opendc-web/opendc-web-server/src/main/webui/redux/reducers/topology/index.js
index 2c849387..18d6cde4 100644
--- a/opendc-web/opendc-web-server/src/main/webui/redux/reducers/topology/index.js
+++ b/opendc-web/opendc-web-server/src/main/webui/redux/reducers/topology/index.js
@@ -21,18 +21,36 @@
  */
 
 import { CPU_UNITS, GPU_UNITS, MEMORY_UNITS, STORAGE_UNITS } from '../../../util/unit-specifications'
+import { STORE_TOPOLOGY } from '../../actions/topology'
+import { ADD_RACK_TO_TILE } from '../../actions/topology/room'
 import machine from './machine'
 import rack from './rack'
 import room from './room'
 import tile from './tile'
 import topology from './topology'
 
+function unitReducer(defaultUnits, entityType) {
+    return (state = defaultUnits, action) => {
+        if (action.type === STORE_TOPOLOGY) {
+            return { ...defaultUnits, ...((action.entities && action.entities[entityType]) || {}) }
+        } else if (action.type === ADD_RACK_TO_TILE) {
+            return { ...state, ...((action.entities && action.entities[entityType]) || {}) }
+        }
+        return state
+    }
+}
+
+const cpus = unitReducer(CPU_UNITS, 'cpus')
+const gpus = unitReducer(GPU_UNITS, 'gpus')
+const memories = unitReducer(MEMORY_UNITS, 'memories')
+const storages = unitReducer(STORAGE_UNITS, 'storages')
+
 function objects(state = {}, action) {
     return {
-        cpus: CPU_UNITS,
-        gpus: GPU_UNITS,
-        memories: MEMORY_UNITS,
-        storages: STORAGE_UNITS,
+        cpus: cpus(state.cpus, action),
+        gpus: gpus(state.gpus, action),
+        memories: memories(state.memories, action),
+        storages: storages(state.storages, action),
         machines: machine(state.machines, action, state),
         racks: rack(state.racks, action, state),
         tiles: tile(state.tiles, action),