summaryrefslogtreecommitdiff
path: root/src/components/app/sidebars/topology/machine
diff options
context:
space:
mode:
authorGeorgios Andreadis <G.Andreadis@student.tudelft.nl>2017-10-04 23:23:09 +0200
committerGitHub <noreply@github.com>2017-10-04 23:23:09 +0200
commitfcaaae65d34003874c76e0c01134dedf94248e09 (patch)
tree2aae1422168651e832a1904623f6f5b100fc17ec /src/components/app/sidebars/topology/machine
parent0a62dfb55c5700013d42a589b930c7448e5bff71 (diff)
parent606d1de0be09f3597165248f65d54e158a13860c (diff)
Merge pull request #42 from atlarge-research/auto-reformat
Standardize code format
Diffstat (limited to 'src/components/app/sidebars/topology/machine')
-rw-r--r--src/components/app/sidebars/topology/machine/BackToRackComponent.js10
-rw-r--r--src/components/app/sidebars/topology/machine/DeleteMachineComponent.js10
-rw-r--r--src/components/app/sidebars/topology/machine/MachineNameComponent.js4
-rw-r--r--src/components/app/sidebars/topology/machine/MachineSidebarComponent.js27
-rw-r--r--src/components/app/sidebars/topology/machine/UnitAddComponent.js67
-rw-r--r--src/components/app/sidebars/topology/machine/UnitComponent.js124
-rw-r--r--src/components/app/sidebars/topology/machine/UnitListComponent.js37
-rw-r--r--src/components/app/sidebars/topology/machine/UnitTabsComponent.js103
8 files changed, 214 insertions, 168 deletions
diff --git a/src/components/app/sidebars/topology/machine/BackToRackComponent.js b/src/components/app/sidebars/topology/machine/BackToRackComponent.js
index 19e33904..7f56aca0 100644
--- a/src/components/app/sidebars/topology/machine/BackToRackComponent.js
+++ b/src/components/app/sidebars/topology/machine/BackToRackComponent.js
@@ -1,10 +1,10 @@
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>
+const BackToRackComponent = ({ onClick }) => (
+ <div className="btn btn-secondary btn-block" onClick={onClick}>
+ <span className="fa fa-angle-left mr-2" />
+ Back to rack
+ </div>
);
export default BackToRackComponent;
diff --git a/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
index 7ba08352..8da39b30 100644
--- a/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
+++ b/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
@@ -1,10 +1,10 @@
import React from "react";
-const DeleteMachineComponent = ({onClick}) => (
- <div className="btn btn-danger btn-block" onClick={onClick}>
- <span className="fa fa-trash mr-2"/>
- Delete this machine
- </div>
+const DeleteMachineComponent = ({ onClick }) => (
+ <div className="btn btn-danger btn-block" onClick={onClick}>
+ <span className="fa fa-trash mr-2" />
+ Delete this machine
+ </div>
);
export default DeleteMachineComponent;
diff --git a/src/components/app/sidebars/topology/machine/MachineNameComponent.js b/src/components/app/sidebars/topology/machine/MachineNameComponent.js
index 321e350d..0ad8b79c 100644
--- a/src/components/app/sidebars/topology/machine/MachineNameComponent.js
+++ b/src/components/app/sidebars/topology/machine/MachineNameComponent.js
@@ -1,7 +1,7 @@
import React from "react";
-const MachineNameComponent = ({position}) => (
- <h2>Machine at slot {position}</h2>
+const MachineNameComponent = ({ position }) => (
+ <h2>Machine at slot {position}</h2>
);
export default MachineNameComponent;
diff --git a/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js b/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
index cf4db80e..5ccaf25c 100644
--- a/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
+++ b/src/components/app/sidebars/topology/machine/MachineSidebarComponent.js
@@ -6,21 +6,22 @@ import DeleteMachineContainer from "../../../../../containers/app/sidebars/topol
import MachineNameContainer from "../../../../../containers/app/sidebars/topology/machine/MachineNameContainer";
import UnitTabsContainer from "../../../../../containers/app/sidebars/topology/machine/UnitTabsContainer";
-const MachineSidebarComponent = ({inSimulation, machineId}) => {
- return (
+const MachineSidebarComponent = ({ inSimulation, machineId }) => {
+ return (
+ <div>
+ <MachineNameContainer />
+ <BackToRackContainer />
+ {inSimulation ? (
<div>
- <MachineNameContainer/>
- <BackToRackContainer/>
- {inSimulation ?
- <div>
- <LoadBarContainer objectType="machine" objectId={machineId}/>
- <LoadChartContainer objectType="machine" objectId={machineId}/>
- </div> :
- <DeleteMachineContainer/>
- }
- <UnitTabsContainer/>
+ <LoadBarContainer objectType="machine" objectId={machineId} />
+ <LoadChartContainer objectType="machine" objectId={machineId} />
</div>
- );
+ ) : (
+ <DeleteMachineContainer />
+ )}
+ <UnitTabsContainer />
+ </div>
+ );
};
export default MachineSidebarComponent;
diff --git a/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/src/components/app/sidebars/topology/machine/UnitAddComponent.js
index f16700df..d0082a72 100644
--- a/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ b/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -2,37 +2,44 @@ 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-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-primary"
+ onClick={() =>
+ this.props.onAdd(parseInt(this.unitSelect.value, 10))}
+ >
+ <span className="fa fa-plus mr-2" />
+ Add
+ </button>
+ </div>
+ </div>
+ );
+ }
}
export default UnitAddComponent;
diff --git a/src/components/app/sidebars/topology/machine/UnitComponent.js b/src/components/app/sidebars/topology/machine/UnitComponent.js
index a0435eab..10a310e8 100644
--- a/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -2,61 +2,79 @@ 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%"}}>
- {
- this.props.unit.manufacturer
- + " " + this.props.unit.family
- + " " + this.props.unit.model
- + " " + this.props.unit.generation
- }
- </span>
- <span>
- <a
- tabIndex="0"
- className="unit-info-popover btn btn-outline-info mr-1"
- role="button"
- data-toggle="popover"
- data-trigger="focus"
- title="Unit information"
- data-content={unitInfo}
- data-html="true"
- >
- <span className="fa fa-info-circle"/>
- </a>
- {this.props.inSimulation ?
- undefined :
- <span className="btn btn-outline-danger" onClick={this.props.onDelete}>
- <span className="fa fa-trash"/>
- </span>
- }
- </span>
- </li>
- );
+ 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}
+ </span>
+ <span>
+ <a
+ tabIndex="0"
+ className="unit-info-popover btn btn-outline-info mr-1"
+ role="button"
+ data-toggle="popover"
+ data-trigger="focus"
+ title="Unit information"
+ data-content={unitInfo}
+ data-html="true"
+ >
+ <span className="fa fa-info-circle" />
+ </a>
+ {this.props.inSimulation ? (
+ undefined
+ ) : (
+ <span
+ className="btn btn-outline-danger"
+ onClick={this.props.onDelete}
+ >
+ <span className="fa fa-trash" />
+ </span>
+ )}
+ </span>
+ </li>
+ );
+ }
}
export default UnitComponent;
diff --git a/src/components/app/sidebars/topology/machine/UnitListComponent.js b/src/components/app/sidebars/topology/machine/UnitListComponent.js
index 683f6023..38df806b 100644
--- a/src/components/app/sidebars/topology/machine/UnitListComponent.js
+++ b/src/components/app/sidebars/topology/machine/UnitListComponent.js
@@ -1,20 +1,29 @@
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> :
- <span><strong>No units...</strong> Add some with the menu above!</span>
- }
- </div>
- }
- </ul>
+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>
+ ) : (
+ <span>
+ <strong>No units...</strong> Add some with the menu above!
+ </span>
+ )}
+ </div>
+ )}
+ </ul>
);
export default UnitListComponent;
diff --git a/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
index 2113d6d8..0683c796 100644
--- a/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -2,53 +2,64 @@ 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>
+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>
+ </div>
);
export default UnitTabsComponent;