Adding instance details tooltip to the agent page. This offers some b…

…asic information on the each agent

package.json

@@ -17,7 +17,8 @@
     "react-addons-css-transition-group": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-router": "^3.0.2",
-    "rxjs": "^5.2.0"
+    "rxjs": "^5.2.0",
+    "tippy.js": "^2.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/agents/agentBreakdown/agent/agent.css

@@ -37,6 +37,10 @@
     vertical-align: middle;
 }
 
+.agent-info .agent-icon {
+    cursor:pointer;
+}
+
 .agent .task-count {
     display: block;
     margin: 0.25em 0;

src/components/agents/agentBreakdown/agent/agent.js

@@ -1,17 +1,49 @@
 import React, { Component, PropTypes } from 'react';
 import { nameFromAwsArn } from '../../../../utils/stringFormatting';
+import { getEc2InstanceDetails } from '../../../../dataRequests/ec2Requests';
+import Tooltip from '../../../tooltip/tooltip';
+import tippy from 'tippy.js';
 import './agent.css';
 
-/**
- * IDEAS:
- * - Add a tooltip on hover to display more info about the task
- */
 
 class Agent extends Component {
+    get instanceId() {
+        return this.props.agentDetails.instance.ec2InstanceId;
+    }
+
+    get tooltipSettings() {
+        return {
+            trigger: 'mouseenter',
+            arrow: true,
+            html: `#tooltip-${this.instanceId}`
+        };
+    }
+
+    constructor(props) {
+        super(props);
+        this.handleMouseOverIcon = this.handleMouseOverIcon.bind(this);
+        this.setEc2DetailState = this.setEc2DetailState.bind(this);
+
+        this.state = {
+            ec2Details: {}
+        };
+    }
+
     getColour(taskDefinitionArn) {
         return this.props.taskDefinitionColours[taskDefinitionArn];
     }
 
+    setEc2DetailState(ec2Details) {
+        this.setState({ ec2Details });
+        return ec2Details;
+    }
+
+    handleMouseOverIcon() {
+        // getEc2InstanceDetails(this.instanceId)
+        //     .then(this.setEc2DetailState)
+        //     .then(console.log.bind(console));
+    }
+
     renderTaskListEntry(task) {
         const style = {
             backgroundColor: this.getColour(task.taskDefinitionArn)
@@ -29,10 +61,24 @@ class Agent extends Component {
         const details = this.props.agentDetails;
         const taskListItems = details.tasks.map(this.renderTaskListEntry, this);
         return (
-            <div className="agent col">
+            <div className="agent col" id={`agent-${this.instanceId}`}>
+                <Tooltip
+                        tooltipId={`tooltip-${this.instanceId}`}
+                        triggerId={`#agent-${this.instanceId} .agent-icon`}
+                        tippySettings={this.tooltipSettings}>
+                    <ul className="tooltip-details-list">
+                        <li>Status: {details.instance.status}</li>
+                        <li>Instance type: {details.instance.attributes[2].value}</li>
+                        <li>Registered CPU: {details.instance.registeredResources[0].integerValue} units</li>
+                        <li>Remaining CPU: {details.instance.remainingResources[0].integerValue} units</li>
+                        <li>Registered Memory: {details.instance.registeredResources[1].integerValue} mb</li>
+                        <li>Remaining Memory: {details.instance.remainingResources[1].integerValue} mb</li>
+                    </ul>
+                </Tooltip> 
                 <div className="agent-info">
-                    <i className="agent-icon small material-icons">perm_identity</i>
-                    <strong className="instanceid">{details.instance.ec2InstanceId}</strong>
+                    <i className="agent-icon small material-icons"
+                        onMouseOver={this.handleMouseOverIcon}>perm_identity</i>
+                    <strong className="instanceid">{this.instanceId}</strong>
                 </div>
                 <em className="task-count">{details.tasks.length} tasks</em>
                 <hr />

src/components/tooltip/tooltip.css

@@ -0,0 +1,4 @@
+.tooltip {
+    display:none;
+    text-align: left;
+}

src/components/tooltip/tooltip.js

@@ -0,0 +1,35 @@
+import React, { Component, PropTypes } from 'react';
+import tippy from 'tippy.js';
+import './tooltip.css';
+
+
+class Tooltip extends Component {
+    get defaultSettings() {
+        return {
+            trigger: 'mouseenter',
+            arrow: true,
+            html: `#${this.props.tooltipId}`
+        };
+    }
+
+    componentDidMount() {
+        tippy(this.props.triggerId, this.props.tippySettings || this.defaultSettings);
+    }
+
+    render() {
+        return (
+            <div className="tooltip" id={this.props.tooltipId}>
+                {this.props.children || this.props.title}
+            </div>
+        );
+    }
+}
+
+Tooltip.propTypes = {
+    tooltipId: PropTypes.string.isRequired,
+    triggerId: PropTypes.string.isRequired,
+    tippySettings: PropTypes.object,
+    title: PropTypes.string
+};
+
+export default Tooltip;

src/dataRequests/ec2Requests.js

@@ -0,0 +1,20 @@
+import AWS from 'aws-sdk';
+import awsRequest from '../awsRequest';
+
+
+
+function describeEc2Instance(instanceId) {
+    return function (awsConfig) {
+        const ec2 = new AWS.EC2(awsConfig);
+        return ec2.describeInstances({
+            InstanceIds: [instanceId]
+        })
+        .promise()
+        .then(response => response.Reservations[0].Instances[0]); // remove the noise, give us the instance data.
+    };
+}
+
+export function getEc2InstanceDetails(instanceId) {
+    const detailsReq = describeEc2Instance(instanceId);
+    return awsRequest.create(detailsReq);
+}