Add unit info button with popover info

1 files changed, 57 insertions, 11 deletions

diff --git a/src/components/app/sidebars/topology/machine/UnitComponent.js b/src/components/app/sidebars/topology/machine/UnitComponent.js
index c734f508..a0435eab 100644
--- a/src/components/app/sidebars/topology/machine/UnitComponent.js
+++ b/src/components/app/sidebars/topology/machine/UnitComponent.js
@@ -1,16 +1,62 @@
 import React from "react";
+import jQuery from "../../../../../util/jquery";
 
-const UnitComponent = ({unit, onDelete, inSimulation}) => (
-    <li className="d-flex list-group-item justify-content-between align-items-center">
-        {unit.manufacturer + " " + unit.family + " " + unit.model + " " + unit.generation}
-        {inSimulation ?
-            undefined :
-            <span className="btn btn-outline-danger" onClick={onDelete}>
-                <span className="fa fa-trash mr-2"/>
-                Delete
-            </span>
+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>"
+            );
         }
-    </li>
-);
+
+        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;