From 5ec42736f3f17e9f5432063b4cc17e6ad9a75713 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 28 Oct 2020 00:03:05 +0100 Subject: Use scroll-padding for aligning anchors This change is one in a series of patches to remove the use of jQuery. Here, we can utilize the scroll-padding CSS property to align anchors properly in presence of a fixed top header. --- frontend/src/components/home/SimulationSection.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'frontend/src/components') diff --git a/frontend/src/components/home/SimulationSection.js b/frontend/src/components/home/SimulationSection.js index e7a02068..b0244cb5 100644 --- a/frontend/src/components/home/SimulationSection.js +++ b/frontend/src/components/home/SimulationSection.js @@ -3,7 +3,7 @@ import ScreenshotSection from './ScreenshotSection' const ModelingSection = () => ( Date: Wed, 28 Oct 2020 00:36:19 +0100 Subject: Migrate to Reactstrap for Modal implementation --- frontend/src/components/modals/Modal.js | 163 ++++++--------------- frontend/src/components/modals/TextInputModal.js | 2 +- .../NewPortfolioModalComponent.js | 12 +- .../custom-components/NewScenarioModalComponent.js | 26 ++-- .../custom-components/NewTopologyModalComponent.js | 6 +- 5 files changed, 72 insertions(+), 137 deletions(-) (limited to 'frontend/src/components') diff --git a/frontend/src/components/modals/Modal.js b/frontend/src/components/modals/Modal.js index 40656dc1..36bb498e 100644 --- a/frontend/src/components/modals/Modal.js +++ b/frontend/src/components/modals/Modal.js @@ -1,124 +1,51 @@ -import classNames from 'classnames' +import React, { useState, useEffect } from 'react' import PropTypes from 'prop-types' -import React from 'react' -import jQuery from '../../util/jquery' - -class Modal extends React.Component { - static propTypes = { - title: PropTypes.string.isRequired, - show: PropTypes.bool.isRequired, - onSubmit: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired, - submitButtonType: PropTypes.string, - submitButtonText: PropTypes.string, - } - static defaultProps = { - submitButtonType: 'primary', - submitButtonText: 'Save', - } - static idCounter = 0 - - // Local, up-to-date copy of modal visibility for time between close event and a props update (to prevent duplicate - // 'close' triggers) - visible = false - - constructor(props) { - super(props) - this.id = 'modal-' + Modal.idCounter++ - } - - componentDidMount() { - this.visible = this.props.show - this.openOrCloseModal() - - // Trigger auto-focus - jQuery('#' + this.id) - .on('shown.bs.modal', function () { - jQuery(this).find('input').first().focus() - }) - .on('hide.bs.modal', () => { - if (this.visible) { - this.props.onCancel() - } - }) - .on('keydown', (e) => { - e.stopPropagation() - }) - } - - componentDidUpdate() { - if (this.visible !== this.props.show) { - this.visible = this.props.show - this.openOrCloseModal() - } - } - - onSubmit() { - if (this.visible) { - this.props.onSubmit() - this.visible = false - this.closeModal() - } - } - - onCancel() { - if (this.visible) { - this.props.onCancel() - this.visible = false - this.closeModal() - } - } - - openModal() { - jQuery('#' + this.id).modal('show') - } - - closeModal() { - jQuery('#' + this.id).modal('hide') - } +import { Modal as RModal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap' + +function Modal({ children, title, show, onSubmit, onCancel, submitButtonType, submitButtonText }) { + const [modal, setModal] = useState(show) + + useEffect(() => setModal(show), [show]) + + const toggle = () => setModal(!modal) + const cancel = () => { + toggle() + onCancel() + } + const submit = () => { + toggle() + onSubmit() + } + + return ( + + {title} + {children} + + + + + + ) +} - openOrCloseModal() { - if (this.visible) { - this.openModal() - } else { - this.closeModal() - } - } +Modal.propTypes = { + title: PropTypes.string.isRequired, + show: PropTypes.bool.isRequired, + onSubmit: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired, + submitButtonType: PropTypes.string, + submitButtonText: PropTypes.string, +} - render() { - return ( - - ) - } +Modal.defaultProps = { + submitButtonType: 'primary', + submitButtonText: 'Save', + show: false, } export default Modal diff --git a/frontend/src/components/modals/TextInputModal.js b/frontend/src/components/modals/TextInputModal.js index d5edb60b..d0918c7e 100644 --- a/frontend/src/components/modals/TextInputModal.js +++ b/frontend/src/components/modals/TextInputModal.js @@ -12,7 +12,7 @@ class TextInputModal extends React.Component { } componentDidUpdate() { - if (this.props.initialValue) { + if (this.props.initialValue && this.textInput) { this.textInput.value = this.props.initialValue } } diff --git a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js index 2d001302..19049931 100644 --- a/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewPortfolioModalComponent.js @@ -19,11 +19,13 @@ class NewPortfolioModalComponent extends React.Component { } reset() { - this.textInput.value = '' - AVAILABLE_METRICS.forEach((metric) => { - this.metricCheckboxes[metric].checked = true - }) - this.repeatsInput.value = 1 + if (this.textInput) { + this.textInput.value = '' + AVAILABLE_METRICS.forEach((metric) => { + this.metricCheckboxes[metric].checked = true + }) + this.repeatsInput.value = 1 + } } onSubmit() { diff --git a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js index d7d99982..5ba74b0f 100644 --- a/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewScenarioModalComponent.js @@ -19,21 +19,25 @@ class NewScenarioModalComponent extends React.Component { } componentDidUpdate() { - if (this.props.currentPortfolioScenarioIds.length === 0) { - this.textInput.value = 'Base scenario' - } else if (this.textInput.value === 'Base scenario') { - this.textInput.value = '' + if (this.textInput) { + if (this.props.currentPortfolioScenarioIds.length === 0) { + this.textInput.value = 'Base scenario' + } else if (this.textInput.value === 'Base scenario') { + this.textInput.value = '' + } } } reset() { - this.textInput.value = this.props.currentPortfolioScenarioIds.length === 0 ? 'Base scenario' : '' - this.traceSelect.selectedIndex = 0 - this.traceLoadInput.value = 1.0 - this.topologySelect.selectedIndex = 0 - this.failuresCheckbox.checked = false - this.performanceInterferenceCheckbox.checked = false - this.schedulerSelect.selectedIndex = 0 + if (this.textInput) { + this.textInput.value = this.props.currentPortfolioScenarioIds.length === 0 ? 'Base scenario' : '' + this.traceSelect.selectedIndex = 0 + this.traceLoadInput.value = 1.0 + this.topologySelect.selectedIndex = 0 + this.failuresCheckbox.checked = false + this.performanceInterferenceCheckbox.checked = false + this.schedulerSelect.selectedIndex = 0 + } } onSubmit() { diff --git a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js index d8262baa..8a625b13 100644 --- a/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js +++ b/frontend/src/components/modals/custom-components/NewTopologyModalComponent.js @@ -13,8 +13,10 @@ class NewTopologyModalComponent extends React.Component { } reset() { - this.textInput.value = '' - this.originTopology.selectedIndex = 0 + if (this.textInput) { + this.textInput.value = '' + this.originTopology.selectedIndex = 0 + } } onSubmit() { -- cgit v1.2.3 From 65d909bf76b8c29f20e733494fd4a0b1b2cd5afa Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 28 Oct 2020 00:54:00 +0100 Subject: Migrate popovers to Reactstrap --- .../app/sidebars/topology/machine/UnitComponent.js | 94 ++++++++++------------ 1 file changed, 44 insertions(+), 50 deletions(-) (limited to 'frontend/src/components') diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js index 4816ca23..de55e506 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js @@ -1,58 +1,52 @@ import React from 'react' -import jQuery from '../../../../../util/jquery' +import { UncontrolledPopover, PopoverHeader, PopoverBody, Button } from 'reactstrap' -class UnitComponent extends React.Component { - componentDidMount() { - jQuery('.unit-info-popover').popover({ - trigger: 'focus', - }) +function UnitComponent({ index, unitType, unit, onDelete }) { + let unitInfo + if (unitType === 'cpu' || unitType === 'gpu') { + unitInfo = ( + <> + Clockrate: + {unit.clockRateMhz} +
+ Num. Cores: + {unit.numberOfCores} +
+ Energy Cons.: + {unit.energyConsumptionW} W +
+ + ) + } else if (unitType === 'memory' || unitType === 'storage') { + unitInfo = ( + <> + Speed: + {unit.speedMbPerS} Mb/s +
+ Size: + {unit.sizeMb} MB +
+ Energy Cons.: + {unit.energyConsumptionW} W +
+ + ) } - render() { - let unitInfo - if (this.props.unitType === 'cpu' || this.props.unitType === 'gpu') { - unitInfo = - 'Clockrate: ' + - this.props.unit.clockRateMhz + - ' MHz
' + - 'Num. Cores: ' + - this.props.unit.numberOfCores + - '
' + - 'Energy Cons.: ' + - this.props.unit.energyConsumptionW + - ' W' - } else if (this.props.unitType === 'memory' || this.props.unitType === 'storage') { - unitInfo = - 'Speed: ' + - this.props.unit.speedMbPerS + - ' Mb/s
' + - 'Size: ' + - this.props.unit.sizeMb + - ' MB
' + - 'Energy Cons.: ' + - this.props.unit.energyConsumptionW + - ' W' - } + return ( +
  • + {unit.name} + +
    • + ) } export default UnitComponent -- cgit v1.2.3 From 34b45675b3de56c847818dbcc829f7ce02ddce56 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 28 Oct 2020 01:00:53 +0100 Subject: Eliminate use of jQuery from the frontend --- frontend/src/components/app/map/MapStageComponent.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'frontend/src/components') diff --git a/frontend/src/components/app/map/MapStageComponent.js b/frontend/src/components/app/map/MapStageComponent.js index cecb34de..2cd0ed6e 100644 --- a/frontend/src/components/app/map/MapStageComponent.js +++ b/frontend/src/components/app/map/MapStageComponent.js @@ -4,7 +4,6 @@ import { Shortcuts } from 'react-shortcuts' import MapLayer from '../../../containers/app/map/layers/MapLayer' import ObjectHoverLayer from '../../../containers/app/map/layers/ObjectHoverLayer' import RoomHoverLayer from '../../../containers/app/map/layers/RoomHoverLayer' -import jQuery from '../../../util/jquery' import { NAVBAR_HEIGHT } from '../../navigation/Navbar' import { MAP_MOVE_PIXELS_PER_EVENT } from './MapConstants' import { Provider } from 'react-redux' @@ -43,7 +42,7 @@ class MapStageComponent extends React.Component { } updateDimensions() { - this.props.setMapDimensions(jQuery(window).width(), jQuery(window).height() - NAVBAR_HEIGHT) + this.props.setMapDimensions(window.innerWidth, window.innerHeight - NAVBAR_HEIGHT) } updateScale(e) { -- cgit v1.2.3