2 files changed, 45 insertions, 50 deletions
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 = (
+            <>
+                <strong>Clockrate: </strong>
+                <code>{unit.clockRateMhz}</code>
+                <br />
+                <strong>Num. Cores: </strong>
+                <code>{unit.numberOfCores}</code>
+                <br />
+                <strong>Energy Cons.: </strong>
+                <code>{unit.energyConsumptionW} W</code>
+                <br />
+            </>
+        )
+    } else if (unitType === 'memory' || unitType === 'storage') {
+        unitInfo = (
+            <>
+                <strong>Speed:</strong>
+                <code>{unit.speedMbPerS} Mb/s</code>
+                <br />
+                <strong>Size:</strong>
+                <code>{unit.sizeMb} MB</code>
+                <br />
+                <strong>Energy Cons.:</strong>
+                <code>{unit.energyConsumptionW} W</code>
+                <br />
+            </>
+        )
     }
 
-    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%' }}>{unit.name}</span>
+            <span>
+                <Button outline={true} color="info" className="mr-1 fa fa-info-circle" id={`unit-${index}`} />
+                <UncontrolledPopover trigger="focus" placement="left" target={`unit-${index}`}>
+                    <PopoverHeader>Unit Information</PopoverHeader>
+                    <PopoverBody>{unitInfo}</PopoverBody>
+                </UncontrolledPopover>
 
-        return (
-            <li className="d-flex list-group-item justify-content-between align-items-center">
-                <span style={{ maxWidth: '60%' }}>{this.props.unit.name}</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"
-                    />
-                    <span className="btn btn-outline-danger fa fa-trash" onClick={this.props.onDelete} />
-                </span>
-            </li>
-        )
-    }
+                <span className="btn btn-outline-danger fa fa-trash" onClick={onDelete} />
+            </span>
+        </li>
+    )
 }
 
 export default UnitComponent
diff --git a/frontend/src/containers/app/sidebars/topology/machine/UnitContainer.js b/frontend/src/containers/app/sidebars/topology/machine/UnitContainer.js
index a028ebce..f334f9f2 100644
--- a/frontend/src/containers/app/sidebars/topology/machine/UnitContainer.js
+++ b/frontend/src/containers/app/sidebars/topology/machine/UnitContainer.js
@@ -5,6 +5,7 @@ import UnitComponent from '../../../../../components/app/sidebars/topology/machi
 const mapStateToProps = (state, ownProps) => {
     return {
         unit: state.objects[ownProps.unitType][ownProps.unitId],
+        index: ownProps.unitId,
     }
 }