diff options
Diffstat (limited to 'opendc-web/opendc-web-server/src/main/webui/components')
5 files changed, 230 insertions, 5 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, }, ] |