From 048bf777997bdbf599240645fc66612c98abf3c2 Mon Sep 17 00:00:00 2001 From: vincent van beek Date: Fri, 27 Mar 2026 16:49:40 +0100 Subject: 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 --- .../webui/components/projects/ImportTopology.js | 59 ++++++++++ .../components/projects/ImportTopologyModal.js | 131 +++++++++++++++++++++ .../webui/components/projects/NewTopologyModal.js | 11 +- .../webui/components/projects/ProjectOverview.js | 2 + .../webui/components/projects/TopologyTable.js | 32 ++++- 5 files changed, 230 insertions(+), 5 deletions(-) create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/projects/ImportTopology.js create mode 100644 opendc-web/opendc-web-server/src/main/webui/components/projects/ImportTopologyModal.js (limited to 'opendc-web/opendc-web-server/src/main/webui/components/projects') 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 ( + <> + + 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 ( + +
+ {error && ( + + )} + + + + +
+ ) +} + +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' + } > 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 }) { + Topologies 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, }, ] -- cgit v1.2.3