diff options
Diffstat (limited to 'frontend/src/components/app/sidebars/topology/machine')
8 files changed, 230 insertions, 230 deletions
diff --git a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js index 7f56aca0..d7ce24bc 100644 --- a/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/BackToRackComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const BackToRackComponent = ({ onClick }) => ( - <div className="btn btn-secondary btn-block" onClick={onClick}> - <span className="fa fa-angle-left mr-2" /> - Back to rack - </div> -); + <div className="btn btn-secondary btn-block" onClick={onClick}> + <span className="fa fa-angle-left mr-2"/> + Back to rack + </div> +) -export default BackToRackComponent; +export default BackToRackComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js index d8774bf9..b9aa6251 100644 --- a/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react' const DeleteMachineComponent = ({ onClick }) => ( - <div className="btn btn-outline-danger btn-block" onClick={onClick}> - <span className="fa fa-trash mr-2" /> - Delete this machine - </div> -); + <div className="btn btn-outline-danger btn-block" onClick={onClick}> + <span className="fa fa-trash mr-2"/> + Delete this machine + </div> +) -export default DeleteMachineComponent; +export default DeleteMachineComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js index 0ad8b79c..70be6968 100644 --- a/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/MachineNameComponent.js @@ -1,7 +1,7 @@ -import React from "react"; +import React from 'react' const MachineNameComponent = ({ position }) => ( - <h2>Machine at slot {position}</h2> -); + <h2>Machine at slot {position}</h2> +) -export default MachineNameComponent; +export default MachineNameComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js index 5ccaf25c..66c8c84f 100644 --- a/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js @@ -1,27 +1,27 @@ -import React from "react"; -import LoadBarContainer from "../../../../../containers/app/sidebars/elements/LoadBarContainer"; -import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer"; -import BackToRackContainer from "../../../../../containers/app/sidebars/topology/machine/BackToRackContainer"; -import DeleteMachineContainer from "../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer"; -import MachineNameContainer from "../../../../../containers/app/sidebars/topology/machine/MachineNameContainer"; -import UnitTabsContainer from "../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer"; +import React from 'react' +import LoadBarContainer from '../../../../../containers/app/sidebars/elements/LoadBarContainer' +import LoadChartContainer from '../../../../../containers/app/sidebars/elements/LoadChartContainer' +import BackToRackContainer from '../../../../../containers/app/sidebars/topology/machine/BackToRackContainer' +import DeleteMachineContainer from '../../../../../containers/app/sidebars/topology/machine/DeleteMachineContainer' +import MachineNameContainer from '../../../../../containers/app/sidebars/topology/machine/MachineNameContainer' +import UnitTabsContainer from '../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer' const MachineSidebarComponent = ({ inSimulation, machineId }) => { - return ( - <div> - <MachineNameContainer /> - <BackToRackContainer /> - {inSimulation ? ( + return ( <div> - <LoadBarContainer objectType="machine" objectId={machineId} /> - <LoadChartContainer objectType="machine" objectId={machineId} /> + <MachineNameContainer/> + <BackToRackContainer/> + {inSimulation ? ( + <div> + <LoadBarContainer objectType="machine" objectId={machineId}/> + <LoadChartContainer objectType="machine" objectId={machineId}/> + </div> + ) : ( + <DeleteMachineContainer/> + )} + <UnitTabsContainer/> </div> - ) : ( - <DeleteMachineContainer /> - )} - <UnitTabsContainer /> - </div> - ); -}; + ) +} -export default MachineSidebarComponent; +export default MachineSidebarComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js index 0c903228..57e219fd 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitAddComponent.js @@ -1,46 +1,46 @@ -import PropTypes from "prop-types"; -import React from "react"; +import PropTypes from 'prop-types' +import React from 'react' class UnitAddComponent extends React.Component { - static propTypes = { - units: PropTypes.array.isRequired, - onAdd: PropTypes.func.isRequired - }; + static propTypes = { + units: PropTypes.array.isRequired, + onAdd: PropTypes.func.isRequired, + } - render() { - return ( - <div className="form-inline"> - <div className="form-group w-100"> - <select - className="form-control w-75 mr-1" - ref={unitSelect => (this.unitSelect = unitSelect)} - > - {this.props.units.map(unit => ( - <option value={unit.id} key={unit.id}> - {unit.manufacturer + - " " + - unit.family + - " " + - unit.model + - " " + - unit.generation} - </option> - ))} - </select> - <button - type="submit" - className="btn btn-outline-primary" - onClick={() => - this.props.onAdd(parseInt(this.unitSelect.value, 10)) - } - > - <span className="fa fa-plus mr-2" /> - Add - </button> - </div> - </div> - ); - } + render() { + return ( + <div className="form-inline"> + <div className="form-group w-100"> + <select + className="form-control w-75 mr-1" + ref={unitSelect => (this.unitSelect = unitSelect)} + > + {this.props.units.map(unit => ( + <option value={unit.id} key={unit.id}> + {unit.manufacturer + + ' ' + + unit.family + + ' ' + + unit.model + + ' ' + + unit.generation} + </option> + ))} + </select> + <button + type="submit" + className="btn btn-outline-primary" + onClick={() => + this.props.onAdd(parseInt(this.unitSelect.value, 10)) + } + > + <span className="fa fa-plus mr-2"/> + Add + </button> + </div> + </div> + ) + } } -export default UnitAddComponent; +export default UnitAddComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js index 7c27043d..93ac1cdd 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitComponent.js @@ -1,78 +1,78 @@ -import React from "react"; -import jQuery from "../../../../../util/jquery"; +import React from 'react' +import jQuery from '../../../../../util/jquery' class UnitComponent extends React.Component { - componentDidMount() { - jQuery(".unit-info-popover").popover({ - trigger: "focus" - }); - } - - render() { - let unitInfo; - if (this.props.unitType === "cpu" || this.props.unitType === "gpu") { - unitInfo = - "<strong>Clockrate:</strong> <code>" + - this.props.unit.clockRateMhz + - " MHz</code><br/>" + - "<strong>Num. Cores:</strong> <code>" + - this.props.unit.numberOfCores + - "</code><br/>" + - "<strong>Energy Cons.:</strong> <code>" + - this.props.unit.energyConsumptionW + - " W</code>"; - } else if ( - this.props.unitType === "memory" || - this.props.unitType === "storage" - ) { - unitInfo = - "<strong>Speed:</strong> <code>" + - this.props.unit.speedMbPerS + - " Mb/s</code><br/>" + - "<strong>Size:</strong> <code>" + - this.props.unit.sizeMb + - " MB</code><br/>" + - "<strong>Energy Cons.:</strong> <code> " + - this.props.unit.energyConsumptionW + - " W</code>"; + componentDidMount() { + jQuery('.unit-info-popover').popover({ + trigger: 'focus', + }) } - return ( - <li className="d-flex list-group-item justify-content-between align-items-center"> - <span style={{ maxWidth: "60%" }}> + render() { + let unitInfo + if (this.props.unitType === 'cpu' || this.props.unitType === 'gpu') { + unitInfo = + '<strong>Clockrate:</strong> <code>' + + this.props.unit.clockRateMhz + + ' MHz</code><br/>' + + '<strong>Num. Cores:</strong> <code>' + + this.props.unit.numberOfCores + + '</code><br/>' + + '<strong>Energy Cons.:</strong> <code>' + + this.props.unit.energyConsumptionW + + ' W</code>' + } else if ( + this.props.unitType === 'memory' || + this.props.unitType === 'storage' + ) { + unitInfo = + '<strong>Speed:</strong> <code>' + + this.props.unit.speedMbPerS + + ' Mb/s</code><br/>' + + '<strong>Size:</strong> <code>' + + this.props.unit.sizeMb + + ' MB</code><br/>' + + '<strong>Energy Cons.:</strong> <code> ' + + this.props.unit.energyConsumptionW + + ' W</code>' + } + + return ( + <li className="d-flex list-group-item justify-content-between align-items-center"> + <span style={{ maxWidth: '60%' }}> {this.props.unit.manufacturer + - " " + - this.props.unit.family + - " " + - this.props.unit.model + - " " + - this.props.unit.generation} + ' ' + + this.props.unit.family + + ' ' + + this.props.unit.model + + ' ' + + this.props.unit.generation} </span> - <span> + <span> <span - tabIndex="0" - className="unit-info-popover btn btn-outline-info mr-1 fa fa-info-circle" - role="button" - data-toggle="popover" - data-trigger="focus" - title="Unit information" - data-content={unitInfo} - data-html="true" + tabIndex="0" + className="unit-info-popover btn btn-outline-info mr-1 fa fa-info-circle" + role="button" + data-toggle="popover" + data-trigger="focus" + title="Unit information" + data-content={unitInfo} + data-html="true" /> - {this.props.inSimulation ? ( - undefined - ) : ( - <span - className="btn btn-outline-danger" - onClick={this.props.onDelete} - > - <span className="fa fa-trash" /> + {this.props.inSimulation ? ( + undefined + ) : ( + <span + className="btn btn-outline-danger" + onClick={this.props.onDelete} + > + <span className="fa fa-trash"/> </span> - )} + )} </span> - </li> - ); - } + </li> + ) + } } -export default UnitComponent; +export default UnitComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js index 38df806b..31d4db51 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitListComponent.js @@ -1,29 +1,29 @@ -import React from "react"; -import UnitContainer from "../../../../../containers/app/sidebars/topology/machine/UnitContainer"; +import React from 'react' +import UnitContainer from '../../../../../containers/app/sidebars/topology/machine/UnitContainer' const UnitListComponent = ({ unitType, unitIds, inSimulation }) => ( - <ul className="list-group mt-1"> - {unitIds.length !== 0 ? ( - unitIds.map((unitId, index) => ( - <UnitContainer - unitType={unitType} - unitId={unitId} - index={index} - key={index} - /> - )) - ) : ( - <div className="alert alert-info"> - {inSimulation ? ( - <strong>No units of this type in this machine</strong> + <ul className="list-group mt-1"> + {unitIds.length !== 0 ? ( + unitIds.map((unitId, index) => ( + <UnitContainer + unitType={unitType} + unitId={unitId} + index={index} + key={index} + /> + )) ) : ( - <span> + <div className="alert alert-info"> + {inSimulation ? ( + <strong>No units of this type in this machine</strong> + ) : ( + <span> <strong>No units...</strong> Add some with the menu above! </span> + )} + </div> )} - </div> - )} - </ul> -); + </ul> +) -export default UnitListComponent; +export default UnitListComponent diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js index 0683c796..df7eeb77 100644 --- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js +++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js @@ -1,65 +1,65 @@ -import React from "react"; -import UnitAddContainer from "../../../../../containers/app/sidebars/topology/machine/UnitAddContainer"; -import UnitListContainer from "../../../../../containers/app/sidebars/topology/machine/UnitListContainer"; +import React from 'react' +import UnitAddContainer from '../../../../../containers/app/sidebars/topology/machine/UnitAddContainer' +import UnitListContainer from '../../../../../containers/app/sidebars/topology/machine/UnitListContainer' const UnitTabsComponent = ({ inSimulation }) => ( - <div> - <ul className="nav nav-tabs mt-2 mb-1" role="tablist"> - <li className="nav-item"> - <a - className="nav-link active" - data-toggle="tab" - href="#cpu-units" - role="tab" - > - CPU - </a> - </li> - <li className="nav-item"> - <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab"> - GPU - </a> - </li> - <li className="nav-item"> - <a - className="nav-link" - data-toggle="tab" - href="#memory-units" - role="tab" - > - Memory - </a> - </li> - <li className="nav-item"> - <a - className="nav-link" - data-toggle="tab" - href="#storage-units" - role="tab" - > - Storage - </a> - </li> - </ul> - <div className="tab-content"> - <div className="tab-pane active" id="cpu-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="cpu" />} - <UnitListContainer unitType="cpu" /> - </div> - <div className="tab-pane" id="gpu-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="gpu" />} - <UnitListContainer unitType="gpu" /> - </div> - <div className="tab-pane" id="memory-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="memory" />} - <UnitListContainer unitType="memory" /> - </div> - <div className="tab-pane" id="storage-units" role="tabpanel"> - {inSimulation ? undefined : <UnitAddContainer unitType="storage" />} - <UnitListContainer unitType="storage" /> - </div> + <div> + <ul className="nav nav-tabs mt-2 mb-1" role="tablist"> + <li className="nav-item"> + <a + className="nav-link active" + data-toggle="tab" + href="#cpu-units" + role="tab" + > + CPU + </a> + </li> + <li className="nav-item"> + <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab"> + GPU + </a> + </li> + <li className="nav-item"> + <a + className="nav-link" + data-toggle="tab" + href="#memory-units" + role="tab" + > + Memory + </a> + </li> + <li className="nav-item"> + <a + className="nav-link" + data-toggle="tab" + href="#storage-units" + role="tab" + > + Storage + </a> + </li> + </ul> + <div className="tab-content"> + <div className="tab-pane active" id="cpu-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="cpu"/>} + <UnitListContainer unitType="cpu"/> + </div> + <div className="tab-pane" id="gpu-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="gpu"/>} + <UnitListContainer unitType="gpu"/> + </div> + <div className="tab-pane" id="memory-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="memory"/>} + <UnitListContainer unitType="memory"/> + </div> + <div className="tab-pane" id="storage-units" role="tabpanel"> + {inSimulation ? undefined : <UnitAddContainer unitType="storage"/>} + <UnitListContainer unitType="storage"/> + </div> + </div> </div> - </div> -); +) -export default UnitTabsComponent; +export default UnitTabsComponent |