From edc482478132a302a08c820589a4043603096cc1 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Tue, 24 Jan 2017 13:58:20 -0500
Subject: [PATCH 01/42] basic render of slave usage page

---
 .../app/components/common/Navigation.jsx      |   1 +
 .../app/components/machines/SlaveUsage.jsx    | 258 ++++++++++++++++++
 SingularityUI/app/router.jsx                  |   2 +
 3 files changed, 261 insertions(+)
 create mode 100644 SingularityUI/app/components/machines/SlaveUsage.jsx

diff --git a/SingularityUI/app/components/common/Navigation.jsx b/SingularityUI/app/components/common/Navigation.jsx
index 94b5f3c969..c472790843 100644
--- a/SingularityUI/app/components/common/Navigation.jsx
+++ b/SingularityUI/app/components/common/Navigation.jsx
@@ -62,6 +62,7 @@ const Navigation = (props) => {
               <ul className="dropdown-menu">
                 <li><Link to="/racks">Racks</Link></li>
                 <li><Link to="/slaves">Slaves</Link></li>
+                <li><Link to="/slave-usage">Slave Usage</Link></li>
                 <li><Link to="/webhooks">Webhooks</Link></li>
                 <li><Link to="/disasters">Disasters</Link></li>
                 <li role="separator" className="divider"></li>
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
new file mode 100644
index 0000000000..13388f0874
--- /dev/null
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -0,0 +1,258 @@
+import React, { PropTypes } from 'react';
+import {DropdownButton, MenuItem, Dropdown, ButtonGroup, Button, Nav, NavItem} from 'react-bootstrap';
+import {Glyphicon} from 'react-bootstrap';
+import Utils from '../../utils';
+import { connect } from 'react-redux';
+import rootComponent from '../../rootComponent';
+import { Link } from 'react-router';
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+// TODO:
+// put test data in a global variable
+
+// loop through test data
+// for each slave
+	// draw a small green cube
+
+	// heat map type coloring, warning levels and critical levels should be set
+	// if cpusUsed > 5, color it light red
+	// if cpusUsed > 10, color it red
+	// if numTasks > 10, color it light red
+	// if numTasks > 20, color it red
+
+	// on click show details of slave
+
+const SlaveUsage = (props) => {
+	// console.log(props.slaves);
+
+	const navigation = (
+		// TODO: fix justified
+		<Nav bsStyle='pills' activeKey={2} justified={true}>
+			<NavItem eventKey={1} title='aggregate'> Aggregate </NavItem>
+			<NavItem eventKey={2} title='heatmap'> Heatmap </NavItem>
+		</Nav>
+	);
+
+	const drawUsage = (slaves) => {
+		console.log('drawUsage() G, Ox3, R, Gx5');
+		
+		var grid = slaves.map((slave, index) => {
+			return checkSlaveStatus(slave, index);
+		});
+		return grid
+	};
+
+	const checkSlaveStatus = (slave, index) => {
+		if (slave.cpusUsed > props.cpusUsedCritical || slave.numTasks > props.numTasksCritical) {
+			return criticalSlave(slave, index);
+		} else if (slave.cpusUsed > props.cpusUsedWarning || slave.numTasks > props.numTasksWarning) {
+			return warningSlave(slave, index);
+		} else {
+			return okSlave(slave, index);
+		}
+	};
+
+	const okSlave = (slave, index) => (
+    <Dropdown id={index.toString()}>
+      <Dropdown.Toggle bsSize='large' bsStyle='success' noCaret={true}>
+        <Glyphicon glyph='glyphicon glyphicon-ok-sign' />
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {getSlaveStats(slave)}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+
+  const warningSlave = (slave, index) => (
+    <Dropdown id={index.toString()}>
+      <Dropdown.Toggle bsSize='large' bsStyle='warning' noCaret={true}>
+        <Glyphicon glyph='gglyphicon glyphicon-minus-sign' />
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {getSlaveStats(slave)}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+
+	const criticalSlave = (slave, index) => (
+		<Dropdown id={index.toString()}>
+      <Dropdown.Toggle bsSize='large' bsStyle='danger' noCaret={true}>
+        <Glyphicon glyph='gglyphicon glyphicon-remove-sign' />
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {getSlaveStats(slave)}
+      </Dropdown.Menu>
+    </Dropdown>
+	);
+
+  const getSlaveStats = (slave) => {
+    return Object.keys(slave).map((slaveStat) => {
+      return drawSlaveStat(slaveStat, slave[slaveStat]);
+    });
+  }
+
+  const drawSlaveStat = (statName, statValue) => {
+    switch (statName) {
+      case 'cpusUsed':
+        if (statValue > props.cpusUsedCritical) {
+          return criticalStat(statName, statValue);
+        } else if (statValue > props.cpusUsedWarning) {
+          return warningStat(statName, statValue);
+        }
+        break;
+      case 'numTasks':
+        if (statValue > props.numTasksCritical) {
+          return criticalStat(statName, statValue);
+        } else if (statValue > props.numTasksWarning) {
+          return warningStat(statName, statValue);
+        }
+    }
+
+    return okStat(statName, statValue);
+  }
+
+  const statItemStyle = {'white-space' : 'nowrap', 'padding-left' : '20px', 'padding-right' : '5px'};
+
+  const criticalStat = (statName, statValue) => (
+    <li 
+      className='color-error' 
+      style={statItemStyle}>
+      {statName} : {statValue}
+    </li>
+  )
+
+  const warningStat = (statName, statValue) => (
+    <li 
+      className='color-warning' 
+      style={statItemStyle}>
+      {statName} : {statValue}
+    </li>
+  )
+
+  const okStat = (statName, statValue) => (
+    <li style={statItemStyle}>
+      {statName} : {statValue}
+    </li>
+  )
+
+	return (
+		<div>
+			<div id='nav'>
+				{navigation}
+			</div>
+      <hr/>
+			<div id='slaves'>
+				{drawUsage(props.slaves)}
+			</div>
+		</div>
+	);
+};
+
+
+
+SlaveUsage.propTypes = {
+	slaves : PropTypes.arrayOf(PropTypes.shape({
+		state : PropTypes.string
+	})),
+	cpusUsedWarning : PropTypes.number,
+	cpusUsedCritical : PropTypes.number,
+	numTasksWarning : PropTypes.number,
+	numTasksCritical : PropTypes.number
+};
+
+
+
+function mapStateToProps(state) {
+	return {
+		slaves : flatten(Array(10).fill(TEST_DATA)),
+		cpusUsedWarning : 5,
+		cpusUsedCritical : 10,
+		numTasksWarning : 10,
+		numTasksCritical : 20
+	};
+}
+
+function initialize(props) {
+	return Promise.all([]);
+}
+
+function refresh(props) {
+	return Promise.all([]);
+}
+
+// TODO: mappings
+export default connect(mapStateToProps, null)(rootComponent(SlaveUsage, 'SlaveUsage', refresh, true, true, initialize));
+
+const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
+const TEST_DATA = [
+    {
+        "cpusUsed": 1,
+        "memoryBytesUsed": 1318215680,
+        "numTasks": 2,
+        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S105",
+        "timestamp": 1484773218213
+    },
+    {
+        "cpusUsed": 6,
+        "memoryBytesUsed": 2788343808,
+        "numTasks": 6,
+        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S101",
+        "timestamp": 1484773218213
+    },
+    {
+        "cpusUsed": 10,
+        "memoryBytesUsed": 817430528,
+        "numTasks": 2,
+        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S109",
+        "timestamp": 1484773218213
+    },
+    {
+        "cpusUsed": 2,
+        "memoryBytesUsed": 817430528,
+        "numTasks": 12,
+        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S109",
+        "timestamp": 1484773218213
+    },
+    {
+        "cpusUsed": 2,
+        "memoryBytesUsed": 817430528,
+        "numTasks": 22,
+        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S109",
+        "timestamp": 1484773218213
+    },
+    {
+        "cpusUsed": 5,
+        "memoryBytesUsed": 817430528,
+        "numTasks": 2,
+        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S109",
+        "timestamp": 1484773218213
+    },
+    {
+        "cpusUsed": 1,
+        "memoryBytesUsed": 1318215680,
+        "numTasks": 2,
+        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S105",
+        "timestamp": 1484773218213
+    },
+    {
+        "cpusUsed": 1,
+        "memoryBytesUsed": 1318215680,
+        "numTasks": 2,
+        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S105",
+        "timestamp": 1484773218213
+    },
+    {
+        "cpusUsed": 1,
+        "memoryBytesUsed": 1318215680,
+        "numTasks": 2,
+        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S105",
+        "timestamp": 1484773218213
+    },
+    {
+        "cpusUsed": 1,
+        "memoryBytesUsed": 1318215680,
+        "numTasks": 2,
+        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S105",
+        "timestamp": 1484773218213
+    }
+];
diff --git a/SingularityUI/app/router.jsx b/SingularityUI/app/router.jsx
index 23b2d7d551..abcdde2612 100644
--- a/SingularityUI/app/router.jsx
+++ b/SingularityUI/app/router.jsx
@@ -13,6 +13,7 @@ import RequestsPage from './components/requests/RequestsPage';
 import TasksPage from './components/tasks/TasksPage';
 import Racks from './components/machines/Racks';
 import Slaves from './components/machines/Slaves';
+import SlaveUsage from './components/machines/SlaveUsage';
 import Webhooks from './components/webhooks/Webhooks';
 import TaskDetail from './components/taskDetail/TaskDetail';
 import TaskSearch from './components/taskSearch/TaskSearch';
@@ -58,6 +59,7 @@ const AppRouter = (props) => {
           </Route>
           <Route path="racks(/:state)" component={Racks} />
           <Route path="slaves(/:state)" component={Slaves} />
+          <Route path="slave-usage" component={SlaveUsage} />
           <Route path="webhooks" component={Webhooks} />
           <Route path="task-search" component={TaskSearch} />
           <Route path="disasters" component={Disasters} />

From edb96da321791545863f5f181dead3aae449b387 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Tue, 24 Jan 2017 15:28:33 -0500
Subject: [PATCH 02/42] code cleanup

---
 .../app/components/machines/SlaveUsage.jsx    | 106 ++++++------------
 1 file changed, 32 insertions(+), 74 deletions(-)

diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 13388f0874..f17a3c010e 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -7,21 +7,6 @@ import rootComponent from '../../rootComponent';
 import { Link } from 'react-router';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
-// TODO:
-// put test data in a global variable
-
-// loop through test data
-// for each slave
-	// draw a small green cube
-
-	// heat map type coloring, warning levels and critical levels should be set
-	// if cpusUsed > 5, color it light red
-	// if cpusUsed > 10, color it red
-	// if numTasks > 10, color it light red
-	// if numTasks > 20, color it red
-
-	// on click show details of slave
-
 const SlaveUsage = (props) => {
 	// console.log(props.slaves);
 
@@ -33,108 +18,82 @@ const SlaveUsage = (props) => {
 		</Nav>
 	);
 
-	const drawUsage = (slaves) => {
-		console.log('drawUsage() G, Ox3, R, Gx5');
+	const drawSlaves = (slaves) => {
+		console.log('drawSlaves() G, Ox3, R, Gx5');
 		
 		var grid = slaves.map((slave, index) => {
-			return checkSlaveStatus(slave, index);
+			return drawSlave(slave, index);
 		});
 		return grid
 	};
 
-	const checkSlaveStatus = (slave, index) => {
+	const drawSlave = (slave, index) => {
+    var criticalGlyph = 'glyphicon glyphicon-remove-sign'
+    var warningGlyph = 'glyphicon glyphicon-minus-sign'
+    var okGlyph = 'glyphicon glyphicon-ok-sign'
+    var criticalStyle = 'danger'
+    var warningStyle = 'warning'
+    var okStyle = 'success'
+
 		if (slave.cpusUsed > props.cpusUsedCritical || slave.numTasks > props.numTasksCritical) {
-			return criticalSlave(slave, index);
+			return slaveWithStats(slave, index, criticalStyle, criticalGlyph);
 		} else if (slave.cpusUsed > props.cpusUsedWarning || slave.numTasks > props.numTasksWarning) {
-			return warningSlave(slave, index);
+			return slaveWithStats(slave, index, warningStyle, warningGlyph);
 		} else {
-			return okSlave(slave, index);
+			return slaveWithStats(slave, index, okStyle, okGlyph);
 		}
 	};
 
-	const okSlave = (slave, index) => (
+  const slaveWithStats = (slave, index, bsStyle, glyphicon) => (
     <Dropdown id={index.toString()}>
-      <Dropdown.Toggle bsSize='large' bsStyle='success' noCaret={true}>
-        <Glyphicon glyph='glyphicon glyphicon-ok-sign' />
+      <Dropdown.Toggle bsSize='large' bsStyle={bsStyle} noCaret={true}>
+        <Glyphicon glyph={glyphicon} />
       </Dropdown.Toggle>
       <Dropdown.Menu>
-        {getSlaveStats(slave)}
+        {checkSlaveStats(slave)}
       </Dropdown.Menu>
     </Dropdown>
   );
 
-  const warningSlave = (slave, index) => (
-    <Dropdown id={index.toString()}>
-      <Dropdown.Toggle bsSize='large' bsStyle='warning' noCaret={true}>
-        <Glyphicon glyph='gglyphicon glyphicon-minus-sign' />
-      </Dropdown.Toggle>
-      <Dropdown.Menu>
-        {getSlaveStats(slave)}
-      </Dropdown.Menu>
-    </Dropdown>
-  );
-
-	const criticalSlave = (slave, index) => (
-		<Dropdown id={index.toString()}>
-      <Dropdown.Toggle bsSize='large' bsStyle='danger' noCaret={true}>
-        <Glyphicon glyph='gglyphicon glyphicon-remove-sign' />
-      </Dropdown.Toggle>
-      <Dropdown.Menu>
-        {getSlaveStats(slave)}
-      </Dropdown.Menu>
-    </Dropdown>
-	);
-
-  const getSlaveStats = (slave) => {
+  const checkSlaveStats = (slave) => {
     return Object.keys(slave).map((slaveStat) => {
-      return drawSlaveStat(slaveStat, slave[slaveStat]);
+      return checkSlaveStat(slaveStat, slave[slaveStat]);
     });
   }
 
-  const drawSlaveStat = (statName, statValue) => {
+  const checkSlaveStat = (statName, statValue) => {
+    var critical = 'color-error';
+    var warning = 'color-warning';
+
     switch (statName) {
       case 'cpusUsed':
         if (statValue > props.cpusUsedCritical) {
-          return criticalStat(statName, statValue);
+          return slaveStat(statName, statValue, critical);
         } else if (statValue > props.cpusUsedWarning) {
-          return warningStat(statName, statValue);
+          return slaveStat(statName, statValue, warning);
         }
         break;
       case 'numTasks':
         if (statValue > props.numTasksCritical) {
-          return criticalStat(statName, statValue);
+          return slaveStat(statName, statValue, critical);
         } else if (statValue > props.numTasksWarning) {
-          return warningStat(statName, statValue);
+          return slaveStat(statName, statValue, warning);
         }
     }
 
-    return okStat(statName, statValue);
+    return slaveStat(statName, statValue, null);
   }
 
   const statItemStyle = {'white-space' : 'nowrap', 'padding-left' : '20px', 'padding-right' : '5px'};
 
-  const criticalStat = (statName, statValue) => (
+  const slaveStat = (statName, statValue, className) => (
     <li 
-      className='color-error' 
+      className={className}
       style={statItemStyle}>
       {statName} : {statValue}
     </li>
   )
 
-  const warningStat = (statName, statValue) => (
-    <li 
-      className='color-warning' 
-      style={statItemStyle}>
-      {statName} : {statValue}
-    </li>
-  )
-
-  const okStat = (statName, statValue) => (
-    <li style={statItemStyle}>
-      {statName} : {statValue}
-    </li>
-  )
-
 	return (
 		<div>
 			<div id='nav'>
@@ -142,14 +101,13 @@ const SlaveUsage = (props) => {
 			</div>
       <hr/>
 			<div id='slaves'>
-				{drawUsage(props.slaves)}
+				{drawSlaves(props.slaves)}
 			</div>
 		</div>
 	);
 };
 
 
-
 SlaveUsage.propTypes = {
 	slaves : PropTypes.arrayOf(PropTypes.shape({
 		state : PropTypes.string

From 0dff51f4927329864d5d15d6236225b41df49a4a Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Tue, 24 Jan 2017 17:12:32 -0500
Subject: [PATCH 03/42] wired up slave usages to api

---
 SingularityUI/.eslintrc.js                    |  37 +++
 SingularityUI/app/actions/api/slaves.es6      |  19 +-
 .../app/components/machines/SlaveUsage.jsx    | 246 +++++++-----------
 SingularityUI/app/reducers/api/index.es6      |   5 +-
 4 files changed, 140 insertions(+), 167 deletions(-)
 create mode 100644 SingularityUI/.eslintrc.js

diff --git a/SingularityUI/.eslintrc.js b/SingularityUI/.eslintrc.js
new file mode 100644
index 0000000000..6356b7ba04
--- /dev/null
+++ b/SingularityUI/.eslintrc.js
@@ -0,0 +1,37 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "parser": "babel-eslint",
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "jsx": true,
+        },
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "indent": [
+            "error",
+            2
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+};
\ No newline at end of file
diff --git a/SingularityUI/app/actions/api/slaves.es6 b/SingularityUI/app/actions/api/slaves.es6
index 6d93de76ff..c57f3f4bd2 100644
--- a/SingularityUI/app/actions/api/slaves.es6
+++ b/SingularityUI/app/actions/api/slaves.es6
@@ -2,14 +2,14 @@ import { buildApiAction, buildJsonApiAction } from './base';
 
 export const FetchSlaves = buildApiAction(
   'FETCH_SLAVES',
-  {url: '/slaves'}
+  {url: 'slaves'}
 );
 
 export const FreezeSlave = buildJsonApiAction(
   'FREEZE_SLAVE',
   'POST',
   (slaveId, data) => ({
-    url: `/slaves/slave/${slaveId}/freeze`,
+    url: `slaves/slave/${slaveId}/freeze`,
     body: data || {}
   })
 );
@@ -18,7 +18,7 @@ export const DecommissionSlave = buildJsonApiAction(
   'DECOMMISSION_SLAVE',
   'POST',
   (slaveId, data) => ({
-    url: `/slaves/slave/${slaveId}/decommission`,
+    url: `slaves/slave/${slaveId}/decommission`,
     body: data || {}
   })
 );
@@ -27,7 +27,7 @@ export const RemoveSlave = buildJsonApiAction(
   'REMOVE_SLAVE',
   'DELETE',
   (slaveId, data) => ({
-    url: `/slaves/slave/${slaveId}`,
+    url: `slaves/slave/${slaveId}`,
     body: data || {}
   })
 );
@@ -36,22 +36,25 @@ export const ReactivateSlave = buildJsonApiAction(
   'ACTIVATE_SLAVE',
   'POST',
   (slaveId, data) => ({
-    url: `/slaves/slave/${slaveId}/activate`,
+    url: `slaves/slave/${slaveId}/activate`,
     body: data || {}
   })
 );
 
 export const FetchExpiringSlaveStates = buildApiAction(
   'FETCH_EXPIRING_SLAVE_STATES',
-  {url: '/slaves/expiring'}
+  {url: 'slaves/expiring'}
 );
 
 export const RemoveExpiringSlaveState = buildJsonApiAction(
   'REMOVE_EXPIRING_SLAVE_STATE',
   'DELETE',
   (slaveId) => ({
-    url: `/slaves/slave/${slaveId}/expiring`
+    url: `slaves/slave/${slaveId}/expiring`
   })
 );
 
-
+export const FetchSlaveUsage = buildApiAction(
+  'FETCH_SLAVE_USAGE',
+  {url : 'usage/slaves'}
+);
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index f17a3c010e..bd75635ec2 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -1,216 +1,146 @@
 import React, { PropTypes } from 'react';
-import {DropdownButton, MenuItem, Dropdown, ButtonGroup, Button, Nav, NavItem} from 'react-bootstrap';
-import {Glyphicon} from 'react-bootstrap';
+import { Dropdown, Nav, NavItem } from 'react-bootstrap';
+import { Glyphicon } from 'react-bootstrap';
 import Utils from '../../utils';
 import { connect } from 'react-redux';
 import rootComponent from '../../rootComponent';
-import { Link } from 'react-router';
+import { FetchSlaveUsage } from '../../actions/api/slaves';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 const SlaveUsage = (props) => {
-	// console.log(props.slaves);
-
-	const navigation = (
-		// TODO: fix justified
-		<Nav bsStyle='pills' activeKey={2} justified={true}>
-			<NavItem eventKey={1} title='aggregate'> Aggregate </NavItem>
-			<NavItem eventKey={2} title='heatmap'> Heatmap </NavItem>
-		</Nav>
-	);
-
-	const drawSlaves = (slaves) => {
-		console.log('drawSlaves() G, Ox3, R, Gx5');
-		
-		var grid = slaves.map((slave, index) => {
-			return drawSlave(slave, index);
-		});
-		return grid
-	};
-
-	const drawSlave = (slave, index) => {
-    var criticalGlyph = 'glyphicon glyphicon-remove-sign'
-    var warningGlyph = 'glyphicon glyphicon-minus-sign'
-    var okGlyph = 'glyphicon glyphicon-ok-sign'
-    var criticalStyle = 'danger'
-    var warningStyle = 'warning'
-    var okStyle = 'success'
-
-		if (slave.cpusUsed > props.cpusUsedCritical || slave.numTasks > props.numTasksCritical) {
-			return slaveWithStats(slave, index, criticalStyle, criticalGlyph);
-		} else if (slave.cpusUsed > props.cpusUsedWarning || slave.numTasks > props.numTasksWarning) {
-			return slaveWithStats(slave, index, warningStyle, warningGlyph);
-		} else {
-			return slaveWithStats(slave, index, okStyle, okGlyph);
-		}
-	};
+  const navigation = (
+    // TODO: fix justified
+    <Nav bsStyle='pills' activeKey={2} justified={true}>
+      <NavItem eventKey={1} title='aggregate'> Aggregate </NavItem>
+      <NavItem eventKey={2} title='heatmap'> Heatmap </NavItem>
+    </Nav>
+  );
+
+  const drawSlaves = () => {    
+    var grid = props.slaveUsage.map((slave, index) => {
+      return drawSlave(slave, index);
+    });
+    return grid;
+  };
+
+  const drawSlave = (slave, index) => {
+    var criticalGlyph = 'glyphicon glyphicon-remove-sign';
+    var warningGlyph = 'glyphicon glyphicon-minus-sign';
+    var okGlyph = 'glyphicon glyphicon-ok-sign';
+    var criticalStyle = 'danger';
+    var warningStyle = 'warning';
+    var okStyle = 'success';
+
+    if (slave.cpusUsed > props.cpusUsedCritical || slave.numTasks > props.numTasksCritical) {
+      return slaveWithStats(slave, index, criticalStyle, criticalGlyph);
+    } else if (slave.cpusUsed > props.cpusUsedWarning || slave.numTasks > props.numTasksWarning) {
+      return slaveWithStats(slave, index, warningStyle, warningGlyph);
+    } else {
+      return slaveWithStats(slave, index, okStyle, okGlyph);
+    }
+  };
 
   const slaveWithStats = (slave, index, bsStyle, glyphicon) => (
-    <Dropdown id={index.toString()}>
+    <Dropdown key={slave.slaveId} id={index.toString()}>
       <Dropdown.Toggle bsSize='large' bsStyle={bsStyle} noCaret={true}>
         <Glyphicon glyph={glyphicon} />
       </Dropdown.Toggle>
       <Dropdown.Menu>
-        {checkSlaveStats(slave)}
+        {checkSlaveStats(slave, index)}
       </Dropdown.Menu>
     </Dropdown>
   );
 
-  const checkSlaveStats = (slave) => {
+  const checkSlaveStats = (slave, index) => {
     return Object.keys(slave).map((slaveStat) => {
-      return checkSlaveStat(slaveStat, slave[slaveStat]);
+      return checkSlaveStat(slaveStat, slave[slaveStat], index);
     });
-  }
+  };
 
-  const checkSlaveStat = (statName, statValue) => {
+  const checkSlaveStat = (statName, statValue, index) => {
     var critical = 'color-error';
     var warning = 'color-warning';
 
     switch (statName) {
       case 'cpusUsed':
         if (statValue > props.cpusUsedCritical) {
-          return slaveStat(statName, statValue, critical);
+          return slaveStat(statName, statValue, critical, index);
         } else if (statValue > props.cpusUsedWarning) {
-          return slaveStat(statName, statValue, warning);
+          return slaveStat(statName, statValue, warning, index);
         }
         break;
       case 'numTasks':
         if (statValue > props.numTasksCritical) {
-          return slaveStat(statName, statValue, critical);
+          return slaveStat(statName, statValue, critical, index);
         } else if (statValue > props.numTasksWarning) {
-          return slaveStat(statName, statValue, warning);
+          return slaveStat(statName, statValue, warning, index);
         }
     }
 
-    return slaveStat(statName, statValue, null);
-  }
+    return slaveStat(statName, statValue, null, index);
+  };
 
   const statItemStyle = {'white-space' : 'nowrap', 'padding-left' : '20px', 'padding-right' : '5px'};
 
-  const slaveStat = (statName, statValue, className) => (
-    <li 
+  const slaveStat = (statName, statValue, className, index) => (
+    <li
+      key={statName + index}
       className={className}
       style={statItemStyle}>
       {statName} : {statValue}
     </li>
-  )
+  );
 
-	return (
-		<div>
-			<div id='nav'>
-				{navigation}
-			</div>
+  return (
+    <div>
+      <div id='nav'>
+        {navigation}
+      </div>
       <hr/>
-			<div id='slaves'>
-				{drawSlaves(props.slaves)}
-			</div>
-		</div>
-	);
+      <div id='slaves'>
+        {drawSlaves(props.slaves)}
+      </div>
+    </div>
+  );
 };
 
-
 SlaveUsage.propTypes = {
-	slaves : PropTypes.arrayOf(PropTypes.shape({
-		state : PropTypes.string
-	})),
-	cpusUsedWarning : PropTypes.number,
-	cpusUsedCritical : PropTypes.number,
-	numTasksWarning : PropTypes.number,
-	numTasksCritical : PropTypes.number
+  slaveUsage : PropTypes.arrayOf(PropTypes.shape({
+    state : PropTypes.string
+  })),
+  fetchSlaveUsage : React.PropTypes.func.isRequired,
+  cpusUsedWarning : PropTypes.number,
+  cpusUsedCritical : PropTypes.number,
+  numTasksWarning : PropTypes.number,
+  numTasksCritical : PropTypes.number
 };
 
-
-
 function mapStateToProps(state) {
-	return {
-		slaves : flatten(Array(10).fill(TEST_DATA)),
-		cpusUsedWarning : 5,
-		cpusUsedCritical : 10,
-		numTasksWarning : 10,
-		numTasksCritical : 20
-	};
+  return {
+    slaveUsage : state.api.slaveUsage.data,
+    cpusUsedWarning : 10,
+    cpusUsedCritical : 12,
+    numTasksWarning : 100,
+    numTasksCritical : 120
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    fetchSlaveUsage: () => dispatch(FetchSlaveUsage.trigger())
+  };
 }
 
 function initialize(props) {
-	return Promise.all([]);
+  return Promise.all([
+    props.fetchSlaveUsage()
+  ]);
 }
 
 function refresh(props) {
-	return Promise.all([]);
+  return Promise.all([
+    props.fetchSlaveUsage()
+  ]);
 }
 
-// TODO: mappings
-export default connect(mapStateToProps, null)(rootComponent(SlaveUsage, 'SlaveUsage', refresh, true, true, initialize));
-
-const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
-const TEST_DATA = [
-    {
-        "cpusUsed": 1,
-        "memoryBytesUsed": 1318215680,
-        "numTasks": 2,
-        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S105",
-        "timestamp": 1484773218213
-    },
-    {
-        "cpusUsed": 6,
-        "memoryBytesUsed": 2788343808,
-        "numTasks": 6,
-        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S101",
-        "timestamp": 1484773218213
-    },
-    {
-        "cpusUsed": 10,
-        "memoryBytesUsed": 817430528,
-        "numTasks": 2,
-        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S109",
-        "timestamp": 1484773218213
-    },
-    {
-        "cpusUsed": 2,
-        "memoryBytesUsed": 817430528,
-        "numTasks": 12,
-        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S109",
-        "timestamp": 1484773218213
-    },
-    {
-        "cpusUsed": 2,
-        "memoryBytesUsed": 817430528,
-        "numTasks": 22,
-        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S109",
-        "timestamp": 1484773218213
-    },
-    {
-        "cpusUsed": 5,
-        "memoryBytesUsed": 817430528,
-        "numTasks": 2,
-        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S109",
-        "timestamp": 1484773218213
-    },
-    {
-        "cpusUsed": 1,
-        "memoryBytesUsed": 1318215680,
-        "numTasks": 2,
-        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S105",
-        "timestamp": 1484773218213
-    },
-    {
-        "cpusUsed": 1,
-        "memoryBytesUsed": 1318215680,
-        "numTasks": 2,
-        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S105",
-        "timestamp": 1484773218213
-    },
-    {
-        "cpusUsed": 1,
-        "memoryBytesUsed": 1318215680,
-        "numTasks": 2,
-        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S105",
-        "timestamp": 1484773218213
-    },
-    {
-        "cpusUsed": 1,
-        "memoryBytesUsed": 1318215680,
-        "numTasks": 2,
-        "slaveId": "dd4fdc07-b166-43f6-97de-c331473a3a71-S105",
-        "timestamp": 1484773218213
-    }
-];
+export default connect(mapStateToProps, mapDispatchToProps)(rootComponent(SlaveUsage, 'SlaveUsage', refresh, true, true, initialize));
diff --git a/SingularityUI/app/reducers/api/index.es6 b/SingularityUI/app/reducers/api/index.es6
index 7db696f119..fa6f09de74 100644
--- a/SingularityUI/app/reducers/api/index.es6
+++ b/SingularityUI/app/reducers/api/index.es6
@@ -57,7 +57,8 @@ import {
   RemoveSlave,
   ReactivateSlave,
   FetchExpiringSlaveStates,
-  RemoveExpiringSlaveState
+  RemoveExpiringSlaveState,
+  FetchSlaveUsage
 } from '../../actions/api/slaves';
 
 import {
@@ -98,6 +99,7 @@ const removeSlave = buildApiActionReducer(RemoveSlave, []);
 const reactivateSlave = buildApiActionReducer(ReactivateSlave, []);
 const expiringSlaveStates = buildApiActionReducer(FetchExpiringSlaveStates, []);
 const removeExpiringSlaveState = buildApiActionReducer(RemoveExpiringSlaveState, []);
+const slaveUsage = buildApiActionReducer(FetchSlaveUsage, []);
 const racks = buildApiActionReducer(FetchRacks, []);
 const freezeRack = buildApiActionReducer(FreezeRack, []);
 const decommissionRack = buildApiActionReducer(DecommissionRack, []);
@@ -150,6 +152,7 @@ export default combineReducers({
   reactivateSlave,
   expiringSlaveStates,
   removeExpiringSlaveState,
+  slaveUsage,
   racks,
   freezeRack,
   decommissionRack,

From 6b2876c7cdf46f2aed5ba2dc8496f9b4a6c6adf3 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Tue, 24 Jan 2017 17:23:07 -0500
Subject: [PATCH 04/42] humans read this

---
 SingularityUI/app/components/machines/SlaveUsage.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index bd75635ec2..6a955ddf3c 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -75,6 +75,9 @@ const SlaveUsage = (props) => {
         } else if (statValue > props.numTasksWarning) {
           return slaveStat(statName, statValue, warning, index);
         }
+        break;
+      case 'timestamp':
+        return slaveStat(statName, Utils.absoluteTimestampWithSeconds(statValue), null, index);
     }
 
     return slaveStat(statName, statValue, null, index);
@@ -87,7 +90,7 @@ const SlaveUsage = (props) => {
       key={statName + index}
       className={className}
       style={statItemStyle}>
-      {statName} : {statValue}
+      {Utils.humanizeCamelcase(statName)} : {statValue}
     </li>
   );
 

From 60245afc33004aa5c0fed34dc14ff5e0eede6ea8 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Wed, 25 Jan 2017 16:19:01 -0500
Subject: [PATCH 05/42] check for real resource values, easily copy stats

---
 .../app/components/machines/SlaveUsage.jsx    | 142 +++++++++++++-----
 1 file changed, 102 insertions(+), 40 deletions(-)

diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 6a955ddf3c..40ef870e5a 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -4,7 +4,7 @@ import { Glyphicon } from 'react-bootstrap';
 import Utils from '../../utils';
 import { connect } from 'react-redux';
 import rootComponent from '../../rootComponent';
-import { FetchSlaveUsage } from '../../actions/api/slaves';
+import { FetchSlaveUsage, FetchSlaves } from '../../actions/api/slaves';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 const SlaveUsage = (props) => {
@@ -31,15 +31,60 @@ const SlaveUsage = (props) => {
     var warningStyle = 'warning';
     var okStyle = 'success';
 
-    if (slave.cpusUsed > props.cpusUsedCritical || slave.numTasks > props.numTasksCritical) {
+    if (isStatCritical(slave, props.cpusUsedStat) || isStatCritical(slave, props.memoryBytesUsedStat) || isStatCritical(slave, props.numTasksStat)) {
       return slaveWithStats(slave, index, criticalStyle, criticalGlyph);
-    } else if (slave.cpusUsed > props.cpusUsedWarning || slave.numTasks > props.numTasksWarning) {
+    } else if (isStatWarning(slave, props.cpusUsedStat) || isStatWarning(slave, props.memoryBytesUsedStat) || isStatWarning(slave, props.numTasksStat)) {
       return slaveWithStats(slave, index, warningStyle, warningGlyph);
     } else {
       return slaveWithStats(slave, index, okStyle, okGlyph);
     }
   };
 
+  const isStatWarning = (slave, statName) => {
+    switch (statName) {
+      case props.cpusUsedStat:
+        return (slave.cpusUsed / getMaxAvailableResource(slave, statName)) > props.cpusWarningThreshold;
+      case props.memoryBytesUsedStat:
+        // todo: create util method to convert from mb to bytes
+        return (slave.memoryBytesUsed / (getMaxAvailableResource(slave, statName) * Math.pow(1024, 2))) > props.memoryWarningThreshold;
+      case props.numTasksStat:
+        return slave.numTasks > props.numTasksWarning;
+    }
+  };
+
+  const isStatCritical = (slave, statName) => {
+    switch (statName) {
+      case props.cpusUsedStat:
+        return (slave.cpusUsed / getMaxAvailableResource(slave, statName)) > props.cpusCriticalThreshold;
+      case props.memoryBytesUsedStat:
+        // todo: create util method to convert from mb to bytes
+        return (slave.memoryBytesUsed / (getMaxAvailableResource(slave, statName) * Math.pow(1024, 2))) > props.memoryCriticalThreshold;
+      case props.numTasksStat:
+        return slave.numTasks > props.numTasksWarning;
+    }
+  };
+
+  const getMaxAvailableResource = (slave, statName) => {
+    var slaveInfo = _.findWhere(props.slaves, {'id' : slave.slaveId});
+    
+    switch (statName) {
+      case props.cpusUsedStat:
+        try {
+          return parseFloat(slaveInfo.attributes.real_cpus) || slaveInfo.resources.cpus;
+        } catch (e) {
+          throw 'Could not find resources (cpus) for slave ' + slave.slaveId;
+        }
+      case props.memoryBytesUsedStat:
+        try {
+          return parseFloat(slaveInfo.attributes.real_memory_mb) || slaveInfo.resources.mem;
+        } catch (e) {
+          throw 'Could not find resources (memory) for slave ' + slave.slaveId;
+        }
+      default:
+        throw statName + ' is an unsupported statistic';
+    }
+  };
+
   const slaveWithStats = (slave, index, bsStyle, glyphicon) => (
     <Dropdown key={slave.slaveId} id={index.toString()}>
       <Dropdown.Toggle bsSize='large' bsStyle={bsStyle} noCaret={true}>
@@ -53,47 +98,48 @@ const SlaveUsage = (props) => {
 
   const checkSlaveStats = (slave, index) => {
     return Object.keys(slave).map((slaveStat) => {
-      return checkSlaveStat(slaveStat, slave[slaveStat], index);
+      return checkSlaveStat(slave, slaveStat, index);
     });
   };
 
-  const checkSlaveStat = (statName, statValue, index) => {
+  const checkSlaveStat = (slave, statName, index) => {
     var critical = 'color-error';
     var warning = 'color-warning';
 
-    switch (statName) {
-      case 'cpusUsed':
-        if (statValue > props.cpusUsedCritical) {
-          return slaveStat(statName, statValue, critical, index);
-        } else if (statValue > props.cpusUsedWarning) {
-          return slaveStat(statName, statValue, warning, index);
-        }
-        break;
-      case 'numTasks':
-        if (statValue > props.numTasksCritical) {
-          return slaveStat(statName, statValue, critical, index);
-        } else if (statValue > props.numTasksWarning) {
-          return slaveStat(statName, statValue, warning, index);
-        }
-        break;
-      case 'timestamp':
-        return slaveStat(statName, Utils.absoluteTimestampWithSeconds(statValue), null, index);
-    }
+    if (isStatCritical(slave, statName)) {
+      return slaveStat(statName, slave[statName], critical, index);
+    } else if (isStatWarning(slave, statName)) {
+      return slaveStat(statName, slave[statName], warning, index);
+    } 
 
-    return slaveStat(statName, statValue, null, index);
+    return slaveStat(statName, slave[statName], null, index);
   };
 
   const statItemStyle = {'white-space' : 'nowrap', 'padding-left' : '20px', 'padding-right' : '5px'};
-
+  // todo: see if I can update the css to get my coloring to show up over the default #333 set for <a> tags
+  //       then i can use MenuItems
+  // .dropdown-menu > li > a
   const slaveStat = (statName, statValue, className, index) => (
-    <li
-      key={statName + index}
-      className={className}
-      style={statItemStyle}>
-      {Utils.humanizeCamelcase(statName)} : {statValue}
-    </li>
+    <CopyToClipboard key={statName + index} text={statValue.toString()}>  
+      <li
+        className={className}
+        style={statItemStyle}>
+        {Utils.humanizeCamelcase(statName)} : {humanizeStatValue(statName, statValue)}
+      </li>
+    </CopyToClipboard>
   );
 
+  const humanizeStatValue = (statName, statValue) => {
+    switch (statName) {
+      case props.memoryBytesUsedStat:
+        return Utils.humanizeFileSize(statValue);
+      case props.timestamp:
+        return Utils.absoluteTimestampWithSeconds(statValue);
+      default:
+        return statValue;
+    }
+  };
+
   return (
     <div>
       <div id='nav'>
@@ -112,37 +158,53 @@ SlaveUsage.propTypes = {
     state : PropTypes.string
   })),
   fetchSlaveUsage : React.PropTypes.func.isRequired,
-  cpusUsedWarning : PropTypes.number,
-  cpusUsedCritical : PropTypes.number,
+  cpusWarningThreshold : PropTypes.number,
+  cpusCriticalThreshold : PropTypes.number,
+  memoryWarningThreshold : PropTypes.number,
+  memoryCriticalThreshold : PropTypes.number,
   numTasksWarning : PropTypes.number,
-  numTasksCritical : PropTypes.number
+  numTasksCritical : PropTypes.number,
+  cpusUsedStat : PropTypes.string,
+  memoryBytesUsedStat : PropTypes.string,
+  numTasksStat : PropTypes.string,
+  timestamp : PropTypes.string
 };
 
 function mapStateToProps(state) {
   return {
     slaveUsage : state.api.slaveUsage.data,
-    cpusUsedWarning : 10,
-    cpusUsedCritical : 12,
+    slaves : state.api.slaves.data,
+    cpusWarningThreshold : .80,
+    cpusCriticalThreshold : .90,
+    memoryWarningThreshold : .80,
+    memoryCriticalThreshold : .90,
     numTasksWarning : 100,
-    numTasksCritical : 120
+    numTasksCritical : 120,
+    cpusUsedStat : 'cpusUsed',
+    memoryBytesUsedStat : 'memoryBytesUsed',
+    numTasksStat : 'numTasks',
+    timestamp : 'timestamp'
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
-    fetchSlaveUsage: () => dispatch(FetchSlaveUsage.trigger())
+    fetchSlaveUsage: () => dispatch(FetchSlaveUsage.trigger()),
+    fetchSlaves: () => dispatch(FetchSlaves.trigger())
   };
 }
 
 function initialize(props) {
   return Promise.all([
-    props.fetchSlaveUsage()
+    props.fetchSlaveUsage(),
+    props.fetchSlaves()
   ]);
 }
 
 function refresh(props) {
   return Promise.all([
-    props.fetchSlaveUsage()
+    props.fetchSlaveUsage(),
+    props.fetchSlaves()
   ]);
 }
 

From 5f087962f06b620359078e0b48dda614912b3d49 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Wed, 25 Jan 2017 16:50:06 -0500
Subject: [PATCH 06/42] add css

---
 SingularityUI/app/components/machines/SlaveUsage.jsx | 7 ++-----
 SingularityUI/app/styles/slaveUsage.styl             | 9 +++++++++
 2 files changed, 11 insertions(+), 5 deletions(-)
 create mode 100644 SingularityUI/app/styles/slaveUsage.styl

diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 40ef870e5a..06d2430149 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -87,7 +87,7 @@ const SlaveUsage = (props) => {
 
   const slaveWithStats = (slave, index, bsStyle, glyphicon) => (
     <Dropdown key={slave.slaveId} id={index.toString()}>
-      <Dropdown.Toggle bsSize='large' bsStyle={bsStyle} noCaret={true}>
+      <Dropdown.Toggle bsSize='large' bsStyle={bsStyle} noCaret={true} className='single-slave-btn'>
         <Glyphicon glyph={glyphicon} />
       </Dropdown.Toggle>
       <Dropdown.Menu>
@@ -115,15 +115,12 @@ const SlaveUsage = (props) => {
     return slaveStat(statName, slave[statName], null, index);
   };
 
-  const statItemStyle = {'white-space' : 'nowrap', 'padding-left' : '20px', 'padding-right' : '5px'};
   // todo: see if I can update the css to get my coloring to show up over the default #333 set for <a> tags
   //       then i can use MenuItems
   // .dropdown-menu > li > a
   const slaveStat = (statName, statValue, className, index) => (
     <CopyToClipboard key={statName + index} text={statValue.toString()}>  
-      <li
-        className={className}
-        style={statItemStyle}>
+      <li className={className + ' slave-usage-details'}>
         {Utils.humanizeCamelcase(statName)} : {humanizeStatValue(statName, statValue)}
       </li>
     </CopyToClipboard>
diff --git a/SingularityUI/app/styles/slaveUsage.styl b/SingularityUI/app/styles/slaveUsage.styl
new file mode 100644
index 0000000000..c0494d2bc7
--- /dev/null
+++ b/SingularityUI/app/styles/slaveUsage.styl
@@ -0,0 +1,9 @@
+.single-slave-btn
+	padding : 35px 20px
+	margin-right : 15px
+	margin-bottom : 15px
+
+.slave-usage-details
+	white-space : nowrap
+	padding-left : 20px
+	padding-right : 5px
\ No newline at end of file

From 96337dae253af21e68425765d30925982d7228f8 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Wed, 25 Jan 2017 17:53:27 -0500
Subject: [PATCH 07/42] show host name instead of slave id

---
 .../app/components/machines/SlaveUsage.jsx    | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 06d2430149..2e596b3bdf 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -65,7 +65,7 @@ const SlaveUsage = (props) => {
   };
 
   const getMaxAvailableResource = (slave, statName) => {
-    var slaveInfo = _.findWhere(props.slaves, {'id' : slave.slaveId});
+    var slaveInfo = getSlaveInfo(slave);
     
     switch (statName) {
       case props.cpusUsedStat:
@@ -107,36 +107,39 @@ const SlaveUsage = (props) => {
     var warning = 'color-warning';
 
     if (isStatCritical(slave, statName)) {
-      return slaveStat(statName, slave[statName], critical, index);
+      return slaveStat(slave, statName, critical, index);
     } else if (isStatWarning(slave, statName)) {
-      return slaveStat(statName, slave[statName], warning, index);
+      return slaveStat(slave, statName, warning, index);
     } 
 
-    return slaveStat(statName, slave[statName], null, index);
+    return slaveStat(slave, statName, null, index);
   };
 
-  // todo: see if I can update the css to get my coloring to show up over the default #333 set for <a> tags
-  //       then i can use MenuItems
-  // .dropdown-menu > li > a
-  const slaveStat = (statName, statValue, className, index) => (
-    <CopyToClipboard key={statName + index} text={statValue.toString()}>  
+  const slaveStat = (slave, statName, className, index) => (
+    <CopyToClipboard key={statName + index} text={slave[statName].toString()}>  
       <li className={className + ' slave-usage-details'}>
-        {Utils.humanizeCamelcase(statName)} : {humanizeStatValue(statName, statValue)}
+        {humanizeStat(slave, statName)}
       </li>
     </CopyToClipboard>
   );
 
-  const humanizeStatValue = (statName, statValue) => {
+  const humanizeStat = (slave, statName) => {
     switch (statName) {
       case props.memoryBytesUsedStat:
-        return Utils.humanizeFileSize(statValue);
+        return 'Memory used : ' + Utils.humanizeFileSize(slave[statName]);
       case props.timestamp:
-        return Utils.absoluteTimestampWithSeconds(statValue);
+        return Utils.humanizeCamelcase(statName) + ' : ' + Utils.absoluteTimestampWithSeconds(slave[statName]);
+      case props.slaveId:
+        return 'Host : ' + getSlaveInfo(slave).host;
       default:
-        return statValue;
+        return Utils.humanizeCamelcase(statName) + ' : ' + slave[statName];
     }
   };
 
+  const getSlaveInfo = (slave) => {
+    return _.findWhere(props.slaves, {'id' : slave.slaveId});
+  };
+
   return (
     <div>
       <div id='nav'>
@@ -164,6 +167,7 @@ SlaveUsage.propTypes = {
   cpusUsedStat : PropTypes.string,
   memoryBytesUsedStat : PropTypes.string,
   numTasksStat : PropTypes.string,
+  slaveId : PropTypes.string,
   timestamp : PropTypes.string
 };
 
@@ -180,6 +184,7 @@ function mapStateToProps(state) {
     cpusUsedStat : 'cpusUsed',
     memoryBytesUsedStat : 'memoryBytesUsed',
     numTasksStat : 'numTasks',
+    slaveId : 'slaveId',
     timestamp : 'timestamp'
   };
 }

From 0ffb5d511b0382ff94fbe782ab82ff2ce9ffddef Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Mon, 30 Jan 2017 16:08:57 -0500
Subject: [PATCH 08/42] better string formatting

---
 .../app/components/machines/SlaveUsage.jsx    | 14 +++++------
 SingularityUI/app/utils.es6                   | 23 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 2e596b3bdf..93fc68e47c 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -72,16 +72,16 @@ const SlaveUsage = (props) => {
         try {
           return parseFloat(slaveInfo.attributes.real_cpus) || slaveInfo.resources.cpus;
         } catch (e) {
-          throw 'Could not find resources (cpus) for slave ' + slave.slaveId;
+          throw Utils.formatUnicorn('Could not find resource (cpus) for slave {host} ({id})', slaveInfo);
         }
       case props.memoryBytesUsedStat:
         try {
           return parseFloat(slaveInfo.attributes.real_memory_mb) || slaveInfo.resources.mem;
         } catch (e) {
-          throw 'Could not find resources (memory) for slave ' + slave.slaveId;
+          throw Utils.formatUnicorn('Could not find resources (memory) for slave {host} ({id})', slaveInfo);
         }
       default:
-        throw statName + ' is an unsupported statistic';
+        throw Utils.formatUnicorn('{0} is an unsupported statistic', statName);
     }
   };
 
@@ -126,13 +126,13 @@ const SlaveUsage = (props) => {
   const humanizeStat = (slave, statName) => {
     switch (statName) {
       case props.memoryBytesUsedStat:
-        return 'Memory used : ' + Utils.humanizeFileSize(slave[statName]);
+        return Utils.formatUnicorn('Memory used : {0}', Utils.humanizeFileSize(slave[statName]));
       case props.timestamp:
-        return Utils.humanizeCamelcase(statName) + ' : ' + Utils.absoluteTimestampWithSeconds(slave[statName]);
+        return Utils.formatUnicorn('{0} : {1}', Utils.humanizeCamelcase(statName), Utils.absoluteTimestampWithSeconds(slave[statName]));
       case props.slaveId:
-        return 'Host : ' + getSlaveInfo(slave).host;
+        return Utils.formatUnicorn('Host : {host}', getSlaveInfo(slave));
       default:
-        return Utils.humanizeCamelcase(statName) + ' : ' + slave[statName];
+        return Utils.formatUnicorn('{0} : {1}', Utils.humanizeCamelcase(statName), slave[statName]);
     }
   };
 
diff --git a/SingularityUI/app/utils.es6 b/SingularityUI/app/utils.es6
index 5713ce2e79..c427c669cd 100644
--- a/SingularityUI/app/utils.es6
+++ b/SingularityUI/app/utils.es6
@@ -421,8 +421,29 @@ const Utils = {
       }
     }
     return array.join('&');
-  }
+  },
+
+  // printf and dict string formatting based on http://stackoverflow.com/a/18234317/4639232
+  // e.g
+  // formatUnicorn("Classic {0} style formating", "C")
+  // formatUnicorn("The {animal} is big", {'animal' : 'tiger'})
+  formatUnicorn(format) {
+    'use strict';
+    var str = format.toString();
+    if (arguments.length > 1) {
+      var t = typeof arguments[1];
+      var key;
+      var args = ('string' === t || 'number' === t) ?
+        Array.prototype.slice.call(arguments, 1)
+        : arguments[1];
+
+      for (key in args) {
+        str = str.replace(new RegExp('\\{' + key + '\\}', 'gi'), args[key]);
+      }
+    }
 
+    return str;
+  }
 };
 
 export default Utils;

From 3c4bf7a89f7daa170cd102297837f52a5bb60350 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Wed, 1 Feb 2017 10:35:45 -0500
Subject: [PATCH 09/42] more updates

---
 SingularityUI/app/actions/api/slaves.es6      |   4 +-
 .../app/components/machines/SlaveUsage.jsx    | 231 ++++++++----------
 .../components/machines/SlaveUsagePage.jsx    |  72 ++++++
 SingularityUI/app/reducers/api/index.es6      |   6 +-
 SingularityUI/app/router.jsx                  |   4 +-
 SingularityUI/app/styles/slaveUsage.styl      |   1 +
 SingularityUI/app/utils.es6                   |   2 -
 7 files changed, 179 insertions(+), 141 deletions(-)
 create mode 100644 SingularityUI/app/components/machines/SlaveUsagePage.jsx

diff --git a/SingularityUI/app/actions/api/slaves.es6 b/SingularityUI/app/actions/api/slaves.es6
index c57f3f4bd2..c38495496c 100644
--- a/SingularityUI/app/actions/api/slaves.es6
+++ b/SingularityUI/app/actions/api/slaves.es6
@@ -54,7 +54,7 @@ export const RemoveExpiringSlaveState = buildJsonApiAction(
   })
 );
 
-export const FetchSlaveUsage = buildApiAction(
-  'FETCH_SLAVE_USAGE',
+export const FetchSlaveUsages = buildApiAction(
+  'FETCH_SLAVE_USAGES',
   {url : 'usage/slaves'}
 );
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 93fc68e47c..65c9fb85d3 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -1,29 +1,13 @@
 import React, { PropTypes } from 'react';
-import { Dropdown, Nav, NavItem } from 'react-bootstrap';
+import { Dropdown } from 'react-bootstrap';
 import { Glyphicon } from 'react-bootstrap';
 import Utils from '../../utils';
 import { connect } from 'react-redux';
-import rootComponent from '../../rootComponent';
-import { FetchSlaveUsage, FetchSlaves } from '../../actions/api/slaves';
+import { FetchSlaveUsages, FetchSlaves } from '../../actions/api/slaves';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 const SlaveUsage = (props) => {
-  const navigation = (
-    // TODO: fix justified
-    <Nav bsStyle='pills' activeKey={2} justified={true}>
-      <NavItem eventKey={1} title='aggregate'> Aggregate </NavItem>
-      <NavItem eventKey={2} title='heatmap'> Heatmap </NavItem>
-    </Nav>
-  );
-
-  const drawSlaves = () => {    
-    var grid = props.slaveUsage.map((slave, index) => {
-      return drawSlave(slave, index);
-    });
-    return grid;
-  };
-
-  const drawSlave = (slave, index) => {
+  const drawSlave = () => {
     var criticalGlyph = 'glyphicon glyphicon-remove-sign';
     var warningGlyph = 'glyphicon glyphicon-minus-sign';
     var okGlyph = 'glyphicon glyphicon-ok-sign';
@@ -31,133 +15,138 @@ const SlaveUsage = (props) => {
     var warningStyle = 'warning';
     var okStyle = 'success';
 
-    if (isStatCritical(slave, props.cpusUsedStat) || isStatCritical(slave, props.memoryBytesUsedStat) || isStatCritical(slave, props.numTasksStat)) {
-      return slaveWithStats(slave, index, criticalStyle, criticalGlyph);
-    } else if (isStatWarning(slave, props.cpusUsedStat) || isStatWarning(slave, props.memoryBytesUsedStat) || isStatWarning(slave, props.numTasksStat)) {
-      return slaveWithStats(slave, index, warningStyle, warningGlyph);
+    if (isSlaveCritical()) {
+      return slaveWithStats(criticalStyle, criticalGlyph);
+    } else if (isSlaveWarning()) {
+      return slaveWithStats(warningStyle, warningGlyph);
     } else {
-      return slaveWithStats(slave, index, okStyle, okGlyph);
+      return slaveWithStats(okStyle, okGlyph);
+    }
+  };
+
+  const slaveWithStats = (bsStyle, glyphicon) => (
+    <Dropdown key={props.slaveInfo.slaveId} id={props.index.toString()}>
+      <Dropdown.Toggle bsSize='large' bsStyle={bsStyle} noCaret={true} className='single-slave-btn'>
+        <Glyphicon glyph={glyphicon} />
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {checkSlaveStats()}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+
+  const checkSlaveStats = () => {
+    return Object.keys(props.slaveUsage).map((slaveStat) => {
+      return checkSlaveStat(slaveStat);
+    });
+  };
+
+  const checkSlaveStat = (statName) => {
+    var critical = 'color-error';
+    var warning = 'color-warning';
+
+    if (isStatCritical(statName)) {
+      return slaveStat(statName, critical);
+    } else if (isStatWarning(statName, props)) {
+      return slaveStat(statName, warning);
     }
+
+    return slaveStat(statName, null);
   };
 
-  const isStatWarning = (slave, statName) => {
+  const slaveStat = (statName, className) => (
+    <CopyToClipboard key={statName + props.index} text={props.slaveUsage[statName].toString()}>
+      <li className={className + ' slave-usage-details'}>
+        {humanizeStat(statName)}
+      </li>
+    </CopyToClipboard>
+  );
+
+  const isSlaveCritical = () => {
+    return isStatCritical(props.cpusUsedStat) ||
+           isStatCritical(props.memoryBytesUsedStat) ||
+           isStatCritical(props.numTasksStat);
+  };
+
+  const isSlaveWarning = () => {
+    return isStatWarning(props.cpusUsedStat) ||
+           isStatWarning(props.memoryBytesUsedStat) ||
+           isStatWarning(props.numTasksStat);
+  };
+
+  const isStatCritical = (statName) => {
     switch (statName) {
       case props.cpusUsedStat:
-        return (slave.cpusUsed / getMaxAvailableResource(slave, statName)) > props.cpusWarningThreshold;
+        return (props.slaveUsage.cpusUsed / getMaxAvailableResource(statName)) > props.cpusCriticalThreshold;
       case props.memoryBytesUsedStat:
         // todo: create util method to convert from mb to bytes
-        return (slave.memoryBytesUsed / (getMaxAvailableResource(slave, statName) * Math.pow(1024, 2))) > props.memoryWarningThreshold;
+        return (props.slaveUsage.memoryBytesUsed / (getMaxAvailableResource(statName) * Math.pow(1024, 2))) > props.memoryCriticalThreshold;
       case props.numTasksStat:
-        return slave.numTasks > props.numTasksWarning;
+        return props.slaveUsage.numTasks > props.numTasksWarning;
     }
   };
 
-  const isStatCritical = (slave, statName) => {
+  const isStatWarning = (statName) => {
     switch (statName) {
       case props.cpusUsedStat:
-        return (slave.cpusUsed / getMaxAvailableResource(slave, statName)) > props.cpusCriticalThreshold;
+        return (props.slaveUsage.cpusUsed / getMaxAvailableResource(statName)) > props.cpusWarningThreshold;
       case props.memoryBytesUsedStat:
         // todo: create util method to convert from mb to bytes
-        return (slave.memoryBytesUsed / (getMaxAvailableResource(slave, statName) * Math.pow(1024, 2))) > props.memoryCriticalThreshold;
+        return (props.slaveUsage.memoryBytesUsed / (getMaxAvailableResource(statName) * Math.pow(1024, 2))) > props.memoryWarningThreshold;
       case props.numTasksStat:
-        return slave.numTasks > props.numTasksWarning;
+        return props.slaveUsage.numTasks > props.numTasksWarning;
     }
   };
 
-  const getMaxAvailableResource = (slave, statName) => {
-    var slaveInfo = getSlaveInfo(slave);
-    
+  const getMaxAvailableResource = (statName) => {
     switch (statName) {
       case props.cpusUsedStat:
         try {
-          return parseFloat(slaveInfo.attributes.real_cpus) || slaveInfo.resources.cpus;
+          return parseFloat(props.slaveInfo.attributes.real_cpus) || props.slaveInfo.resources.cpus;
         } catch (e) {
-          throw Utils.formatUnicorn('Could not find resource (cpus) for slave {host} ({id})', slaveInfo);
+          throw Utils.formatUnicorn('Could not find resource (cpus) for slave {host} ({id})', props.slaveInfo);
         }
       case props.memoryBytesUsedStat:
         try {
-          return parseFloat(slaveInfo.attributes.real_memory_mb) || slaveInfo.resources.mem;
+          return parseFloat(props.slaveInfo.attributes.real_memory_mb) || props.slaveInfo.resources.mem;
         } catch (e) {
-          throw Utils.formatUnicorn('Could not find resources (memory) for slave {host} ({id})', slaveInfo);
+          throw Utils.formatUnicorn('Could not find resources (memory) for slave {host} ({id})', props.slaveInfo);
         }
       default:
         throw Utils.formatUnicorn('{0} is an unsupported statistic', statName);
     }
   };
 
-  const slaveWithStats = (slave, index, bsStyle, glyphicon) => (
-    <Dropdown key={slave.slaveId} id={index.toString()}>
-      <Dropdown.Toggle bsSize='large' bsStyle={bsStyle} noCaret={true} className='single-slave-btn'>
-        <Glyphicon glyph={glyphicon} />
-      </Dropdown.Toggle>
-      <Dropdown.Menu>
-        {checkSlaveStats(slave, index)}
-      </Dropdown.Menu>
-    </Dropdown>
-  );
-
-  const checkSlaveStats = (slave, index) => {
-    return Object.keys(slave).map((slaveStat) => {
-      return checkSlaveStat(slave, slaveStat, index);
-    });
-  };
-
-  const checkSlaveStat = (slave, statName, index) => {
-    var critical = 'color-error';
-    var warning = 'color-warning';
-
-    if (isStatCritical(slave, statName)) {
-      return slaveStat(slave, statName, critical, index);
-    } else if (isStatWarning(slave, statName)) {
-      return slaveStat(slave, statName, warning, index);
-    } 
-
-    return slaveStat(slave, statName, null, index);
-  };
-
-  const slaveStat = (slave, statName, className, index) => (
-    <CopyToClipboard key={statName + index} text={slave[statName].toString()}>  
-      <li className={className + ' slave-usage-details'}>
-        {humanizeStat(slave, statName)}
-      </li>
-    </CopyToClipboard>
-  );
-
-  const humanizeStat = (slave, statName) => {
+  const humanizeStat = (statName) => {
     switch (statName) {
       case props.memoryBytesUsedStat:
-        return Utils.formatUnicorn('Memory used : {0}', Utils.humanizeFileSize(slave[statName]));
-      case props.timestamp:
-        return Utils.formatUnicorn('{0} : {1}', Utils.humanizeCamelcase(statName), Utils.absoluteTimestampWithSeconds(slave[statName]));
-      case props.slaveId:
-        return Utils.formatUnicorn('Host : {host}', getSlaveInfo(slave));
+        return Utils.formatUnicorn('Memory used : {0}', Utils.humanizeFileSize(props.slaveUsage[statName]));
+      case props.timestampStat:
+        return Utils.formatUnicorn('{0} : {1}', Utils.humanizeCamelcase(statName), Utils.absoluteTimestampWithSeconds(props.slaveUsage[statName]));
+      case props.slaveIdStat:
+        return Utils.formatUnicorn('Host : {host}', props.slaveInfo);
       default:
-        return Utils.formatUnicorn('{0} : {1}', Utils.humanizeCamelcase(statName), slave[statName]);
+        return Utils.formatUnicorn('{0} : {1}', Utils.humanizeCamelcase(statName), props.slaveUsage[statName]);
     }
   };
 
-  const getSlaveInfo = (slave) => {
-    return _.findWhere(props.slaves, {'id' : slave.slaveId});
-  };
-
-  return (
-    <div>
-      <div id='nav'>
-        {navigation}
-      </div>
-      <hr/>
-      <div id='slaves'>
-        {drawSlaves(props.slaves)}
-      </div>
-    </div>
-  );
+  return drawSlave();
 };
 
+
 SlaveUsage.propTypes = {
-  slaveUsage : PropTypes.arrayOf(PropTypes.shape({
-    state : PropTypes.string
-  })),
-  fetchSlaveUsage : React.PropTypes.func.isRequired,
+  slaveUsage : PropTypes.shape({
+    slaveId  : PropTypes.string.isRequired,
+    cpusUsed : PropTypes.number.isRequired,
+    memoryBytesUsed : PropTypes.number.isRequired,
+    numTasks : PropTypes.number.isRequired,
+    timestamp : PropTypes.number.isRequired
+  }),
+  slaveInfo : PropTypes.shape({
+    attributes : PropTypes.object.isRequired,
+    resources : PropTypes.object.isRequired
+  }),
+  index : PropTypes.number.isRequired,
   cpusWarningThreshold : PropTypes.number,
   cpusCriticalThreshold : PropTypes.number,
   memoryWarningThreshold : PropTypes.number,
@@ -167,14 +156,13 @@ SlaveUsage.propTypes = {
   cpusUsedStat : PropTypes.string,
   memoryBytesUsedStat : PropTypes.string,
   numTasksStat : PropTypes.string,
-  slaveId : PropTypes.string,
-  timestamp : PropTypes.string
+  slaveIdStat : PropTypes.string,
+  timestampStat : PropTypes.string
 };
 
-function mapStateToProps(state) {
+
+function mapStateToProps() {
   return {
-    slaveUsage : state.api.slaveUsage.data,
-    slaves : state.api.slaves.data,
     cpusWarningThreshold : .80,
     cpusCriticalThreshold : .90,
     memoryWarningThreshold : .80,
@@ -184,30 +172,9 @@ function mapStateToProps(state) {
     cpusUsedStat : 'cpusUsed',
     memoryBytesUsedStat : 'memoryBytesUsed',
     numTasksStat : 'numTasks',
-    slaveId : 'slaveId',
-    timestamp : 'timestamp'
+    slaveIdStat : 'slaveId',
+    timestampStat : 'timestamp'
   };
 }
 
-function mapDispatchToProps(dispatch) {
-  return {
-    fetchSlaveUsage: () => dispatch(FetchSlaveUsage.trigger()),
-    fetchSlaves: () => dispatch(FetchSlaves.trigger())
-  };
-}
-
-function initialize(props) {
-  return Promise.all([
-    props.fetchSlaveUsage(),
-    props.fetchSlaves()
-  ]);
-}
-
-function refresh(props) {
-  return Promise.all([
-    props.fetchSlaveUsage(),
-    props.fetchSlaves()
-  ]);
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(rootComponent(SlaveUsage, 'SlaveUsage', refresh, true, true, initialize));
+export default connect(mapStateToProps)(SlaveUsage);
diff --git a/SingularityUI/app/components/machines/SlaveUsagePage.jsx b/SingularityUI/app/components/machines/SlaveUsagePage.jsx
new file mode 100644
index 0000000000..9955145ca5
--- /dev/null
+++ b/SingularityUI/app/components/machines/SlaveUsagePage.jsx
@@ -0,0 +1,72 @@
+import React, { PropTypes } from 'react';
+import { Nav, NavItem } from 'react-bootstrap';
+import { connect } from 'react-redux';
+import rootComponent from '../../rootComponent';
+import { FetchSlaveUsages, FetchSlaves } from '../../actions/api/slaves';
+import SlaveUsage from './SlaveUsage';
+
+const SlaveUsagePage = ({slaves, slaveUsages}) => {
+  const navigation = (
+    <Nav bsStyle='pills' activeKey={2} justified={true}>
+      <NavItem eventKey={1} title='aggregate'> Aggregate </NavItem>
+      <NavItem eventKey={2} title='heatmap'> Heatmap </NavItem>
+    </Nav>
+  );
+
+  const slaveUsageData = slaveUsages.map((slaveUsage, index) => {
+    const slaveInfo = getSlaveInfo(slaves, slaveUsage);
+    return <SlaveUsage key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} index={index}/>;
+  });
+
+  return (
+    <div>
+      <div id='nav'>
+        {navigation}
+      </div>
+      <hr/>
+      <div id='slaves'>
+        {slaveUsageData}
+      </div>
+    </div>
+  );
+};
+
+const getSlaveInfo = (slaves, slaveUsage) => {
+  return _.findWhere(slaves, {'id' : slaveUsage.slaveId});
+};
+
+SlaveUsage.propTypes = {
+  slaveUsages : PropTypes.arrayOf(PropTypes.object),
+  slaves : PropTypes.arrayOf(PropTypes.object),
+  fetchSlaveUsages : React.PropTypes.func
+};
+
+function mapStateToProps(state) {
+  return {
+    slaveUsages : state.api.slaveUsages.data,
+    slaves : state.api.slaves.data
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    fetchSlaveUsages: () => dispatch(FetchSlaveUsages.trigger()),
+    fetchSlaves: () => dispatch(FetchSlaves.trigger())
+  };
+}
+
+function initialize(props) {
+  return Promise.all([
+    props.fetchSlaveUsages(),
+    props.fetchSlaves()
+  ]);
+}
+
+function refresh(props) {
+  return Promise.all([
+    props.fetchSlaveUsages(),
+    props.fetchSlaves()
+  ]);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(rootComponent(SlaveUsagePage, 'SlaveUsagePage', refresh, true, true, initialize));
diff --git a/SingularityUI/app/reducers/api/index.es6 b/SingularityUI/app/reducers/api/index.es6
index fa6f09de74..073b5079f3 100644
--- a/SingularityUI/app/reducers/api/index.es6
+++ b/SingularityUI/app/reducers/api/index.es6
@@ -58,7 +58,7 @@ import {
   ReactivateSlave,
   FetchExpiringSlaveStates,
   RemoveExpiringSlaveState,
-  FetchSlaveUsage
+  FetchSlaveUsages
 } from '../../actions/api/slaves';
 
 import {
@@ -99,7 +99,7 @@ const removeSlave = buildApiActionReducer(RemoveSlave, []);
 const reactivateSlave = buildApiActionReducer(ReactivateSlave, []);
 const expiringSlaveStates = buildApiActionReducer(FetchExpiringSlaveStates, []);
 const removeExpiringSlaveState = buildApiActionReducer(RemoveExpiringSlaveState, []);
-const slaveUsage = buildApiActionReducer(FetchSlaveUsage, []);
+const slaveUsages = buildApiActionReducer(FetchSlaveUsages, []);
 const racks = buildApiActionReducer(FetchRacks, []);
 const freezeRack = buildApiActionReducer(FreezeRack, []);
 const decommissionRack = buildApiActionReducer(DecommissionRack, []);
@@ -152,7 +152,7 @@ export default combineReducers({
   reactivateSlave,
   expiringSlaveStates,
   removeExpiringSlaveState,
-  slaveUsage,
+  slaveUsages,
   racks,
   freezeRack,
   decommissionRack,
diff --git a/SingularityUI/app/router.jsx b/SingularityUI/app/router.jsx
index abcdde2612..2e1520fcb9 100644
--- a/SingularityUI/app/router.jsx
+++ b/SingularityUI/app/router.jsx
@@ -13,7 +13,7 @@ import RequestsPage from './components/requests/RequestsPage';
 import TasksPage from './components/tasks/TasksPage';
 import Racks from './components/machines/Racks';
 import Slaves from './components/machines/Slaves';
-import SlaveUsage from './components/machines/SlaveUsage';
+import SlaveUsagePage from './components/machines/SlaveUsagePage';
 import Webhooks from './components/webhooks/Webhooks';
 import TaskDetail from './components/taskDetail/TaskDetail';
 import TaskSearch from './components/taskSearch/TaskSearch';
@@ -59,7 +59,7 @@ const AppRouter = (props) => {
           </Route>
           <Route path="racks(/:state)" component={Racks} />
           <Route path="slaves(/:state)" component={Slaves} />
-          <Route path="slave-usage" component={SlaveUsage} />
+          <Route path="slave-usage" component={SlaveUsagePage} />
           <Route path="webhooks" component={Webhooks} />
           <Route path="task-search" component={TaskSearch} />
           <Route path="disasters" component={Disasters} />
diff --git a/SingularityUI/app/styles/slaveUsage.styl b/SingularityUI/app/styles/slaveUsage.styl
index c0494d2bc7..ecd59bce0b 100644
--- a/SingularityUI/app/styles/slaveUsage.styl
+++ b/SingularityUI/app/styles/slaveUsage.styl
@@ -2,6 +2,7 @@
 	padding : 35px 20px
 	margin-right : 15px
 	margin-bottom : 15px
+	display: inline-block
 
 .slave-usage-details
 	white-space : nowrap
diff --git a/SingularityUI/app/utils.es6 b/SingularityUI/app/utils.es6
index c427c669cd..976db1644c 100644
--- a/SingularityUI/app/utils.es6
+++ b/SingularityUI/app/utils.es6
@@ -379,8 +379,6 @@ const Utils = {
     },
   },
 
-
-
   isImmediateCleanup: (cleanupType, longRunning) => {
     if (longRunning) {
       return _.contains(Utils.LONG_RUNNING_IMMEDIATE_CLEANUPS, cleanupType)

From 16dccca5d0d8b494d56489d1b520113d5702fcd3 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Wed, 1 Feb 2017 13:58:42 -0500
Subject: [PATCH 10/42] better slave usage components

---
 .../app/components/machines/SlaveStat.jsx     |  20 ++
 .../app/components/machines/SlaveUsage.jsx    | 224 +++++++++---------
 .../components/machines/SlaveUsagePage.jsx    |  10 +-
 SingularityUI/app/rootComponent.jsx           |   1 +
 SingularityUI/app/styles/slaveUsage.styl      |   2 +-
 5 files changed, 140 insertions(+), 117 deletions(-)
 create mode 100644 SingularityUI/app/components/machines/SlaveStat.jsx

diff --git a/SingularityUI/app/components/machines/SlaveStat.jsx b/SingularityUI/app/components/machines/SlaveStat.jsx
new file mode 100644
index 0000000000..c2353c3c13
--- /dev/null
+++ b/SingularityUI/app/components/machines/SlaveStat.jsx
@@ -0,0 +1,20 @@
+import React, { PropTypes } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+const SlaveStat = ({name, value, status}) => {
+  return (
+    <CopyToClipboard text={value}>
+      <li className={status + ' slave-usage-detail'}>
+        {name}
+      </li>
+    </CopyToClipboard>
+  );
+};
+
+SlaveStat.propTypes = {
+  name : PropTypes.string,
+  value : PropTypes.string,
+  status : PropTypes.string
+};
+
+export default SlaveStat;
\ No newline at end of file
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 65c9fb85d3..9300157682 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -2,111 +2,93 @@ import React, { PropTypes } from 'react';
 import { Dropdown } from 'react-bootstrap';
 import { Glyphicon } from 'react-bootstrap';
 import Utils from '../../utils';
-import { connect } from 'react-redux';
-import { FetchSlaveUsages, FetchSlaves } from '../../actions/api/slaves';
-import CopyToClipboard from 'react-copy-to-clipboard';
+import SlaveStat from './SlaveStat';
+
+const SLAVE_TYPES = {
+  critical : {
+    icon : 'glyphicon glyphicon-remove-sign',
+    bsStyle : 'danger'
+  },
+  warning : {
+    icon : 'glyphicon glyphicon-minus-sign',
+    bsStyle : 'warning'
+  },
+  ok : {
+    icon : 'glyphicon glyphicon-ok-sign',
+    bsStyle : 'success'
+  }
+};
 
-const SlaveUsage = (props) => {
-  const drawSlave = () => {
-    var criticalGlyph = 'glyphicon glyphicon-remove-sign';
-    var warningGlyph = 'glyphicon glyphicon-minus-sign';
-    var okGlyph = 'glyphicon glyphicon-ok-sign';
-    var criticalStyle = 'danger';
-    var warningStyle = 'warning';
-    var okStyle = 'success';
+const THRESHOLDS = {
+  cpusWarningThreshold : .80,
+  cpusCriticalThreshold : .90,
+  memoryWarningThreshold : .80,
+  memoryCriticalThreshold : .90,
+  numTasksWarning : 100,
+  numTasksCritical : 120
+};
 
-    if (isSlaveCritical()) {
-      return slaveWithStats(criticalStyle, criticalGlyph);
-    } else if (isSlaveWarning()) {
-      return slaveWithStats(warningStyle, warningGlyph);
-    } else {
-      return slaveWithStats(okStyle, okGlyph);
-    }
-  };
+const STAT_NAMES = {
+  cpusUsedStat : 'cpusUsed',
+  memoryBytesUsedStat : 'memoryBytesUsed',
+  numTasksStat : 'numTasks',
+  slaveIdStat : 'slaveId',
+  timestampStat : 'timestamp'
+};
 
+// TODO:
+// move threshold props into constants file
+// stats all calculated at once into arrayOf(Objects)
+  // const stats = [
+  //   {
+  //     name: 'cpuUsage',
+  //     value: 500,
+  //     state: 'warning'
+  //   }
+  // ];
+// move helper functions out of component
+// improve method naming
+  // if it renders, call it render
+  // if it has a list, call it somethingList
+  // etc.
+// better type checking
+ // SlaveState.propTypes = {
+ //    state: PropTypes.oneOf(Object.keys(STATE_STATES))
+ //  };
+
+const SlaveUsage = (props) => {
   const slaveWithStats = (bsStyle, glyphicon) => (
     <Dropdown key={props.slaveInfo.slaveId} id={props.index.toString()}>
       <Dropdown.Toggle bsSize='large' bsStyle={bsStyle} noCaret={true} className='single-slave-btn'>
         <Glyphicon glyph={glyphicon} />
       </Dropdown.Toggle>
       <Dropdown.Menu>
-        {checkSlaveStats()}
+        {renderSlaveStats}
       </Dropdown.Menu>
     </Dropdown>
   );
 
-  const checkSlaveStats = () => {
-    return Object.keys(props.slaveUsage).map((slaveStat) => {
-      return checkSlaveStat(slaveStat);
-    });
-  };
-
-  const checkSlaveStat = (statName) => {
-    var critical = 'color-error';
-    var warning = 'color-warning';
-
-    if (isStatCritical(statName)) {
-      return slaveStat(statName, critical);
-    } else if (isStatWarning(statName, props)) {
-      return slaveStat(statName, warning);
-    }
-
-    return slaveStat(statName, null);
-  };
-
-  const slaveStat = (statName, className) => (
-    <CopyToClipboard key={statName + props.index} text={props.slaveUsage[statName].toString()}>
-      <li className={className + ' slave-usage-details'}>
-        {humanizeStat(statName)}
-      </li>
-    </CopyToClipboard>
-  );
-
   const isSlaveCritical = () => {
-    return isStatCritical(props.cpusUsedStat) ||
-           isStatCritical(props.memoryBytesUsedStat) ||
-           isStatCritical(props.numTasksStat);
+    return isStatCritical(STAT_NAMES.cpusUsedStat) ||
+           isStatCritical(STAT_NAMES.memoryBytesUsedStat) ||
+           isStatCritical(STAT_NAMES.numTasksStat);
   };
 
   const isSlaveWarning = () => {
-    return isStatWarning(props.cpusUsedStat) ||
-           isStatWarning(props.memoryBytesUsedStat) ||
-           isStatWarning(props.numTasksStat);
-  };
-
-  const isStatCritical = (statName) => {
-    switch (statName) {
-      case props.cpusUsedStat:
-        return (props.slaveUsage.cpusUsed / getMaxAvailableResource(statName)) > props.cpusCriticalThreshold;
-      case props.memoryBytesUsedStat:
-        // todo: create util method to convert from mb to bytes
-        return (props.slaveUsage.memoryBytesUsed / (getMaxAvailableResource(statName) * Math.pow(1024, 2))) > props.memoryCriticalThreshold;
-      case props.numTasksStat:
-        return props.slaveUsage.numTasks > props.numTasksWarning;
-    }
-  };
-
-  const isStatWarning = (statName) => {
-    switch (statName) {
-      case props.cpusUsedStat:
-        return (props.slaveUsage.cpusUsed / getMaxAvailableResource(statName)) > props.cpusWarningThreshold;
-      case props.memoryBytesUsedStat:
-        // todo: create util method to convert from mb to bytes
-        return (props.slaveUsage.memoryBytesUsed / (getMaxAvailableResource(statName) * Math.pow(1024, 2))) > props.memoryWarningThreshold;
-      case props.numTasksStat:
-        return props.slaveUsage.numTasks > props.numTasksWarning;
-    }
+    return isStatWarning(STAT_NAMES.cpusUsedStat) ||
+           isStatWarning(STAT_NAMES.memoryBytesUsedStat) ||
+           isStatWarning(STAT_NAMES.numTasksStat);
   };
 
   const getMaxAvailableResource = (statName) => {
     switch (statName) {
-      case props.cpusUsedStat:
+      case STAT_NAMES.cpusUsedStat:
         try {
           return parseFloat(props.slaveInfo.attributes.real_cpus) || props.slaveInfo.resources.cpus;
         } catch (e) {
           throw Utils.formatUnicorn('Could not find resource (cpus) for slave {host} ({id})', props.slaveInfo);
         }
-      case props.memoryBytesUsedStat:
+      case STAT_NAMES.memoryBytesUsedStat:
         try {
           return parseFloat(props.slaveInfo.attributes.real_memory_mb) || props.slaveInfo.resources.mem;
         } catch (e) {
@@ -117,9 +99,33 @@ const SlaveUsage = (props) => {
     }
   };
 
+  const isStatCritical = (statName) => {
+    switch (statName) {
+      case STAT_NAMES.cpusUsedStat:
+        return (props.slaveUsage.cpusUsed / getMaxAvailableResource(statName)) > THRESHOLDS.cpusCriticalThreshold;
+      case STAT_NAMES.memoryBytesUsedStat:
+        // todo: create util method to convert from mb to bytes
+        return (props.slaveUsage.memoryBytesUsed / (getMaxAvailableResource(statName) * Math.pow(1024, 2))) > THRESHOLDS.memoryCriticalThreshold;
+      case STAT_NAMES.numTasksStat:
+        return props.slaveUsage.numTasks > THRESHOLDS.numTasksCritical;
+    }
+  };
+
+  const isStatWarning = (statName) => {
+    switch (statName) {
+      case STAT_NAMES.cpusUsedStat:
+        return (props.slaveUsage.cpusUsed / getMaxAvailableResource(statName)) > THRESHOLDS.cpusWarningThreshold;
+      case STAT_NAMES.memoryBytesUsedStat:
+        // todo: create util method to convert from mb to bytes
+        return (props.slaveUsage.memoryBytesUsed / (getMaxAvailableResource(statName) * Math.pow(1024, 2))) > THRESHOLDS.memoryWarningThreshold;
+      case STAT_NAMES.numTasksStat:
+        return props.slaveUsage.numTasks > THRESHOLDS.numTasksWarning;
+    }
+  };
+
   const humanizeStat = (statName) => {
     switch (statName) {
-      case props.memoryBytesUsedStat:
+      case STAT_NAMES.memoryBytesUsedStat:
         return Utils.formatUnicorn('Memory used : {0}', Utils.humanizeFileSize(props.slaveUsage[statName]));
       case props.timestampStat:
         return Utils.formatUnicorn('{0} : {1}', Utils.humanizeCamelcase(statName), Utils.absoluteTimestampWithSeconds(props.slaveUsage[statName]));
@@ -130,6 +136,32 @@ const SlaveUsage = (props) => {
     }
   };
 
+  const checkSlaveStat = (statValue, statName) => {
+    let statStyle = null;
+
+    if (isStatCritical(statName)) {
+      statStyle = 'color-error';
+    } else if (isStatWarning(statName)) {
+      statStyle = 'color-warning';
+    }
+
+    return <SlaveStat key={statName} name={humanizeStat(statName)} value={statValue.toString()} status={statStyle}/>;
+  };
+
+  // TODO
+  // const renderSlaveStats = Object.keys(props.slaveUsage).map((data) => <SlaveStat key={statName} name={} value={} status={} />);
+  const renderSlaveStats = _.map(props.slaveUsage, checkSlaveStat);
+
+  const drawSlave = () => {
+    if (isSlaveCritical()) {
+      return slaveWithStats(SLAVE_TYPES.critical.bsStyle, SLAVE_TYPES.critical.icon);
+    } else if (isSlaveWarning()) {
+      return slaveWithStats(SLAVE_TYPES.warning.bsStyle, SLAVE_TYPES.warning.icon);
+    } else {
+      return slaveWithStats(SLAVE_TYPES.ok.bsStyle, SLAVE_TYPES.ok.icon);
+    }
+  };
+
   return drawSlave();
 };
 
@@ -146,35 +178,7 @@ SlaveUsage.propTypes = {
     attributes : PropTypes.object.isRequired,
     resources : PropTypes.object.isRequired
   }),
-  index : PropTypes.number.isRequired,
-  cpusWarningThreshold : PropTypes.number,
-  cpusCriticalThreshold : PropTypes.number,
-  memoryWarningThreshold : PropTypes.number,
-  memoryCriticalThreshold : PropTypes.number,
-  numTasksWarning : PropTypes.number,
-  numTasksCritical : PropTypes.number,
-  cpusUsedStat : PropTypes.string,
-  memoryBytesUsedStat : PropTypes.string,
-  numTasksStat : PropTypes.string,
-  slaveIdStat : PropTypes.string,
-  timestampStat : PropTypes.string
+  index : PropTypes.number.isRequired
 };
 
-
-function mapStateToProps() {
-  return {
-    cpusWarningThreshold : .80,
-    cpusCriticalThreshold : .90,
-    memoryWarningThreshold : .80,
-    memoryCriticalThreshold : .90,
-    numTasksWarning : 100,
-    numTasksCritical : 120,
-    cpusUsedStat : 'cpusUsed',
-    memoryBytesUsedStat : 'memoryBytesUsed',
-    numTasksStat : 'numTasks',
-    slaveIdStat : 'slaveId',
-    timestampStat : 'timestamp'
-  };
-}
-
-export default connect(mapStateToProps)(SlaveUsage);
+export default SlaveUsage;
diff --git a/SingularityUI/app/components/machines/SlaveUsagePage.jsx b/SingularityUI/app/components/machines/SlaveUsagePage.jsx
index 9955145ca5..6c6003d27c 100644
--- a/SingularityUI/app/components/machines/SlaveUsagePage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsagePage.jsx
@@ -48,12 +48,10 @@ function mapStateToProps(state) {
   };
 }
 
-function mapDispatchToProps(dispatch) {
-  return {
-    fetchSlaveUsages: () => dispatch(FetchSlaveUsages.trigger()),
-    fetchSlaves: () => dispatch(FetchSlaves.trigger())
-  };
-}
+const mapDispatchToProps = (dispatch) => ({
+  fetchSlaveUsages: () => dispatch(FetchSlaveUsages.trigger()),
+  fetchSlaves: () => dispatch(FetchSlaves.trigger())
+});
 
 function initialize(props) {
   return Promise.all([
diff --git a/SingularityUI/app/rootComponent.jsx b/SingularityUI/app/rootComponent.jsx
index cb60b7e76f..5a34b35e00 100644
--- a/SingularityUI/app/rootComponent.jsx
+++ b/SingularityUI/app/rootComponent.jsx
@@ -36,6 +36,7 @@ const rootComponent = (Wrapped, title, refresh = _.noop, refreshInterval = true,
       }).catch((reason) => {
         // Boot React errors out of the promise so they can be picked up by Sentry
         setTimeout(() => {
+          console.log(reason.stack);
           throw new Error(reason);
         });
       });
diff --git a/SingularityUI/app/styles/slaveUsage.styl b/SingularityUI/app/styles/slaveUsage.styl
index ecd59bce0b..b38b0c701b 100644
--- a/SingularityUI/app/styles/slaveUsage.styl
+++ b/SingularityUI/app/styles/slaveUsage.styl
@@ -4,7 +4,7 @@
 	margin-bottom : 15px
 	display: inline-block
 
-.slave-usage-details
+.slave-usage-detail
 	white-space : nowrap
 	padding-left : 20px
 	padding-right : 5px
\ No newline at end of file

From c7317200a4e70104c30a52ebc000d041a8c0f599 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Wed, 1 Feb 2017 18:52:55 -0500
Subject: [PATCH 11/42] add constants file

---
 .../app/components/machines/Constants.jsx     | 31 ++++++++++++++++
 .../app/components/machines/SlaveUsage.jsx    | 35 ++-----------------
 .../components/machines/SlaveUsagePage.jsx    | 33 ++++++++---------
 3 files changed, 50 insertions(+), 49 deletions(-)
 create mode 100644 SingularityUI/app/components/machines/Constants.jsx

diff --git a/SingularityUI/app/components/machines/Constants.jsx b/SingularityUI/app/components/machines/Constants.jsx
new file mode 100644
index 0000000000..8a2158b418
--- /dev/null
+++ b/SingularityUI/app/components/machines/Constants.jsx
@@ -0,0 +1,31 @@
+export const SLAVE_TYPES = {
+  critical : {
+    icon : 'glyphicon glyphicon-remove-sign',
+    bsStyle : 'danger'
+  },
+  warning : {
+    icon : 'glyphicon glyphicon-minus-sign',
+    bsStyle : 'warning'
+  },
+  ok : {
+    icon : 'glyphicon glyphicon-ok-sign',
+    bsStyle : 'success'
+  }
+};
+
+export const THRESHOLDS = {
+  cpusWarningThreshold : 0.80,
+  cpusCriticalThreshold : 0.90,
+  memoryWarningThreshold : 0.80,
+  memoryCriticalThreshold : 0.90,
+  numTasksWarning : 100,
+  numTasksCritical : 120
+};
+
+export const STAT_NAMES = {
+  cpusUsedStat : 'cpusUsed',
+  memoryBytesUsedStat : 'memoryBytesUsed',
+  numTasksStat : 'numTasks',
+  slaveIdStat : 'slaveId',
+  timestampStat : 'timestamp'
+};
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 9300157682..8c7bceb6fe 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -3,38 +3,7 @@ import { Dropdown } from 'react-bootstrap';
 import { Glyphicon } from 'react-bootstrap';
 import Utils from '../../utils';
 import SlaveStat from './SlaveStat';
-
-const SLAVE_TYPES = {
-  critical : {
-    icon : 'glyphicon glyphicon-remove-sign',
-    bsStyle : 'danger'
-  },
-  warning : {
-    icon : 'glyphicon glyphicon-minus-sign',
-    bsStyle : 'warning'
-  },
-  ok : {
-    icon : 'glyphicon glyphicon-ok-sign',
-    bsStyle : 'success'
-  }
-};
-
-const THRESHOLDS = {
-  cpusWarningThreshold : .80,
-  cpusCriticalThreshold : .90,
-  memoryWarningThreshold : .80,
-  memoryCriticalThreshold : .90,
-  numTasksWarning : 100,
-  numTasksCritical : 120
-};
-
-const STAT_NAMES = {
-  cpusUsedStat : 'cpusUsed',
-  memoryBytesUsedStat : 'memoryBytesUsed',
-  numTasksStat : 'numTasks',
-  slaveIdStat : 'slaveId',
-  timestampStat : 'timestamp'
-};
+import { SLAVE_TYPES, THRESHOLDS, STAT_NAMES} from './Constants';
 
 // TODO:
 // move threshold props into constants file
@@ -59,7 +28,7 @@ const STAT_NAMES = {
 const SlaveUsage = (props) => {
   const slaveWithStats = (bsStyle, glyphicon) => (
     <Dropdown key={props.slaveInfo.slaveId} id={props.index.toString()}>
-      <Dropdown.Toggle bsSize='large' bsStyle={bsStyle} noCaret={true} className='single-slave-btn'>
+      <Dropdown.Toggle bsSize="large" bsStyle={bsStyle} noCaret={true} className="single-slave-btn">
         <Glyphicon glyph={glyphicon} />
       </Dropdown.Toggle>
       <Dropdown.Menu>
diff --git a/SingularityUI/app/components/machines/SlaveUsagePage.jsx b/SingularityUI/app/components/machines/SlaveUsagePage.jsx
index 6c6003d27c..d47169d2cc 100644
--- a/SingularityUI/app/components/machines/SlaveUsagePage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsagePage.jsx
@@ -5,35 +5,36 @@ import rootComponent from '../../rootComponent';
 import { FetchSlaveUsages, FetchSlaves } from '../../actions/api/slaves';
 import SlaveUsage from './SlaveUsage';
 
-const SlaveUsagePage = ({slaves, slaveUsages}) => {
-  const navigation = (
-    <Nav bsStyle='pills' activeKey={2} justified={true}>
-      <NavItem eventKey={1} title='aggregate'> Aggregate </NavItem>
-      <NavItem eventKey={2} title='heatmap'> Heatmap </NavItem>
-    </Nav>
-  );
+const navigation = (
+  <Nav bsStyle="pills" activeKey={2} justified={true}>
+    <NavItem eventKey={1} title="aggregate"> Aggregate </NavItem>
+    <NavItem eventKey={2} title="heatmap"> Heatmap </NavItem>
+  </Nav>
+);
+
+const getSlaveInfo = (slaves, slaveUsage) => {
+  return _.findWhere(slaves, {'id' : slaveUsage.slaveId});
+};
 
+const SlaveUsagePage = ({slaves, slaveUsages}) => {
   const slaveUsageData = slaveUsages.map((slaveUsage, index) => {
     const slaveInfo = getSlaveInfo(slaves, slaveUsage);
-    return <SlaveUsage key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} index={index}/>;
+    return <SlaveUsage key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} index={index} />;
   });
 
   return (
     <div>
-      <div id='nav'>
+      <div id="nav">
         {navigation}
       </div>
-      <hr/>
-      <div id='slaves'>
+      <hr />
+      <div id="slaves">
         {slaveUsageData}
       </div>
     </div>
   );
 };
 
-const getSlaveInfo = (slaves, slaveUsage) => {
-  return _.findWhere(slaves, {'id' : slaveUsage.slaveId});
-};
 
 SlaveUsage.propTypes = {
   slaveUsages : PropTypes.arrayOf(PropTypes.object),
@@ -49,8 +50,8 @@ function mapStateToProps(state) {
 }
 
 const mapDispatchToProps = (dispatch) => ({
-  fetchSlaveUsages: () => dispatch(FetchSlaveUsages.trigger()),
-  fetchSlaves: () => dispatch(FetchSlaves.trigger())
+  fetchSlaveUsages : () => dispatch(FetchSlaveUsages.trigger()),
+  fetchSlaves : () => dispatch(FetchSlaves.trigger())
 });
 
 function initialize(props) {

From 6ef209c1f2d1bba8b99cbc1a1c4cf542f37c15ae Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Wed, 1 Feb 2017 21:02:20 -0500
Subject: [PATCH 12/42] further component breakdown

---
 SingularityUI/.eslintrc.js                    |  37 ------
 .../app/components/machines/Constants.jsx     |   6 +
 .../app/components/machines/SlaveStat.jsx     |   5 +-
 .../app/components/machines/SlaveUsage.jsx    | 112 ++++++++----------
 .../components/machines/SlaveUsagePage.jsx    |   2 +-
 SingularityUI/package.json                    |   2 +-
 6 files changed, 60 insertions(+), 104 deletions(-)
 delete mode 100644 SingularityUI/.eslintrc.js

diff --git a/SingularityUI/.eslintrc.js b/SingularityUI/.eslintrc.js
deleted file mode 100644
index 6356b7ba04..0000000000
--- a/SingularityUI/.eslintrc.js
+++ /dev/null
@@ -1,37 +0,0 @@
-module.exports = {
-    "env": {
-        "browser": true,
-        "es6": true,
-        "node": true
-    },
-    "parser": "babel-eslint",
-    "extends": "eslint:recommended",
-    "parserOptions": {
-        "ecmaFeatures": {
-            "experimentalObjectRestSpread": true,
-            "jsx": true,
-        },
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-        "indent": [
-            "error",
-            2
-        ],
-        "linebreak-style": [
-            "error",
-            "unix"
-        ],
-        "quotes": [
-            "error",
-            "single"
-        ],
-        "semi": [
-            "error",
-            "always"
-        ]
-    }
-};
\ No newline at end of file
diff --git a/SingularityUI/app/components/machines/Constants.jsx b/SingularityUI/app/components/machines/Constants.jsx
index 8a2158b418..c6350ca310 100644
--- a/SingularityUI/app/components/machines/Constants.jsx
+++ b/SingularityUI/app/components/machines/Constants.jsx
@@ -29,3 +29,9 @@ export const STAT_NAMES = {
   slaveIdStat : 'slaveId',
   timestampStat : 'timestamp'
 };
+
+export const STAT_STYLES = {
+  ok : '',
+  warning : 'color-warning',
+  critical : 'color-error'
+};
\ No newline at end of file
diff --git a/SingularityUI/app/components/machines/SlaveStat.jsx b/SingularityUI/app/components/machines/SlaveStat.jsx
index c2353c3c13..540c3ee311 100644
--- a/SingularityUI/app/components/machines/SlaveStat.jsx
+++ b/SingularityUI/app/components/machines/SlaveStat.jsx
@@ -1,10 +1,11 @@
 import React, { PropTypes } from 'react';
+import { STAT_STYLES } from './Constants';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 const SlaveStat = ({name, value, status}) => {
   return (
     <CopyToClipboard text={value}>
-      <li className={status + ' slave-usage-detail'}>
+      <li className={STAT_STYLES[status] + ' slave-usage-detail'}>
         {name}
       </li>
     </CopyToClipboard>
@@ -17,4 +18,4 @@ SlaveStat.propTypes = {
   status : PropTypes.string
 };
 
-export default SlaveStat;
\ No newline at end of file
+export default SlaveStat;
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 8c7bceb6fe..ef71c5d5ea 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -6,49 +6,9 @@ import SlaveStat from './SlaveStat';
 import { SLAVE_TYPES, THRESHOLDS, STAT_NAMES} from './Constants';
 
 // TODO:
-// move threshold props into constants file
-// stats all calculated at once into arrayOf(Objects)
-  // const stats = [
-  //   {
-  //     name: 'cpuUsage',
-  //     value: 500,
-  //     state: 'warning'
-  //   }
-  // ];
 // move helper functions out of component
-// improve method naming
-  // if it renders, call it render
-  // if it has a list, call it somethingList
-  // etc.
-// better type checking
- // SlaveState.propTypes = {
- //    state: PropTypes.oneOf(Object.keys(STATE_STATES))
- //  };
 
 const SlaveUsage = (props) => {
-  const slaveWithStats = (bsStyle, glyphicon) => (
-    <Dropdown key={props.slaveInfo.slaveId} id={props.index.toString()}>
-      <Dropdown.Toggle bsSize="large" bsStyle={bsStyle} noCaret={true} className="single-slave-btn">
-        <Glyphicon glyph={glyphicon} />
-      </Dropdown.Toggle>
-      <Dropdown.Menu>
-        {renderSlaveStats}
-      </Dropdown.Menu>
-    </Dropdown>
-  );
-
-  const isSlaveCritical = () => {
-    return isStatCritical(STAT_NAMES.cpusUsedStat) ||
-           isStatCritical(STAT_NAMES.memoryBytesUsedStat) ||
-           isStatCritical(STAT_NAMES.numTasksStat);
-  };
-
-  const isSlaveWarning = () => {
-    return isStatWarning(STAT_NAMES.cpusUsedStat) ||
-           isStatWarning(STAT_NAMES.memoryBytesUsedStat) ||
-           isStatWarning(STAT_NAMES.numTasksStat);
-  };
-
   const getMaxAvailableResource = (statName) => {
     switch (statName) {
       case STAT_NAMES.cpusUsedStat:
@@ -77,6 +37,8 @@ const SlaveUsage = (props) => {
         return (props.slaveUsage.memoryBytesUsed / (getMaxAvailableResource(statName) * Math.pow(1024, 2))) > THRESHOLDS.memoryCriticalThreshold;
       case STAT_NAMES.numTasksStat:
         return props.slaveUsage.numTasks > THRESHOLDS.numTasksCritical;
+      default:
+        return false;
     }
   };
 
@@ -89,6 +51,8 @@ const SlaveUsage = (props) => {
         return (props.slaveUsage.memoryBytesUsed / (getMaxAvailableResource(statName) * Math.pow(1024, 2))) > THRESHOLDS.memoryWarningThreshold;
       case STAT_NAMES.numTasksStat:
         return props.slaveUsage.numTasks > THRESHOLDS.numTasksWarning;
+      default:
+        return false;
     }
   };
 
@@ -105,39 +69,62 @@ const SlaveUsage = (props) => {
     }
   };
 
-  const checkSlaveStat = (statValue, statName) => {
-    let statStyle = null;
-
-    if (isStatCritical(statName)) {
-      statStyle = 'color-error';
-    } else if (isStatWarning(statName)) {
-      statStyle = 'color-warning';
+  const checkStats = (val, stat) => {
+    const newStat = {
+      name : stat,
+      value : val,
+      status : 'ok'
+    };
+
+    if (isStatCritical(stat)) {
+      newStat.status = 'critical';
+    } else if (isStatWarning(stat)) {
+      newStat.status = 'warning';
     }
 
-    return <SlaveStat key={statName} name={humanizeStat(statName)} value={statValue.toString()} status={statStyle}/>;
+    return newStat;
   };
 
-  // TODO
-  // const renderSlaveStats = Object.keys(props.slaveUsage).map((data) => <SlaveStat key={statName} name={} value={} status={} />);
-  const renderSlaveStats = _.map(props.slaveUsage, checkSlaveStat);
-
-  const drawSlave = () => {
-    if (isSlaveCritical()) {
-      return slaveWithStats(SLAVE_TYPES.critical.bsStyle, SLAVE_TYPES.critical.icon);
-    } else if (isSlaveWarning()) {
-      return slaveWithStats(SLAVE_TYPES.warning.bsStyle, SLAVE_TYPES.warning.icon);
-    } else {
-      return slaveWithStats(SLAVE_TYPES.ok.bsStyle, SLAVE_TYPES.ok.icon);
+  const checkedStats = _.map(props.slaveUsage, checkStats);
+
+  const renderSlaveStats = _.map(checkedStats, ({name, value, status}) => {
+    return <SlaveStat key={name} name={humanizeStat(name)} value={value.toString()} status={status} />;
+  });
+
+  const getSlaveStyle = () => {
+    let style = SLAVE_TYPES.ok;
+
+    if (checkedStats.some((obj) => {
+      return obj.status === 'critical';
+    })) {
+      style = SLAVE_TYPES.critical;
+    } else if (checkedStats.some((obj) => {
+      return obj.status === 'warning';
+    })) {
+      style = SLAVE_TYPES.warning;
     }
+
+    return style;
   };
 
-  return drawSlave();
+  const slaveStyle = getSlaveStyle();
+
+  return (
+    <Dropdown key={props.slaveUsage.slaveId} id={props.slaveUsage.slaveId}>
+      <Dropdown.Toggle bsSize="large" bsStyle={slaveStyle.bsStyle} noCaret={true} className="single-slave-btn">
+        <Glyphicon glyph={slaveStyle.icon} />
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {renderSlaveStats}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
 };
 
 
 SlaveUsage.propTypes = {
   slaveUsage : PropTypes.shape({
-    slaveId  : PropTypes.string.isRequired,
+    slaveId : PropTypes.string.isRequired,
     cpusUsed : PropTypes.number.isRequired,
     memoryBytesUsed : PropTypes.number.isRequired,
     numTasks : PropTypes.number.isRequired,
@@ -146,8 +133,7 @@ SlaveUsage.propTypes = {
   slaveInfo : PropTypes.shape({
     attributes : PropTypes.object.isRequired,
     resources : PropTypes.object.isRequired
-  }),
-  index : PropTypes.number.isRequired
+  })
 };
 
 export default SlaveUsage;
diff --git a/SingularityUI/app/components/machines/SlaveUsagePage.jsx b/SingularityUI/app/components/machines/SlaveUsagePage.jsx
index d47169d2cc..49d02acb4b 100644
--- a/SingularityUI/app/components/machines/SlaveUsagePage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsagePage.jsx
@@ -19,7 +19,7 @@ const getSlaveInfo = (slaves, slaveUsage) => {
 const SlaveUsagePage = ({slaves, slaveUsages}) => {
   const slaveUsageData = slaveUsages.map((slaveUsage, index) => {
     const slaveInfo = getSlaveInfo(slaves, slaveUsage);
-    return <SlaveUsage key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} index={index} />;
+    return <SlaveUsage key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} />;
   });
 
   return (
diff --git a/SingularityUI/package.json b/SingularityUI/package.json
index 765074f24b..a457ba370e 100644
--- a/SingularityUI/package.json
+++ b/SingularityUI/package.json
@@ -77,7 +77,7 @@
     "eslint": "^2.11.1",
     "eslint-config-hubspot": "^6.2.0",
     "eslint-plugin-babel": "^3.2.0",
-    "eslint-plugin-react": "^4.2.3",
+    "eslint-plugin-react": "^4.3.0",
     "expect": "^1.20.2",
     "exports-loader": "^0.6.3",
     "gulp": "^3.9.1",

From e8dd569e56072ed3833d29bd8181c387b925d4e2 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Wed, 1 Feb 2017 21:37:52 -0500
Subject: [PATCH 13/42] update packages

---
 SingularityUI/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/SingularityUI/package.json b/SingularityUI/package.json
index a457ba370e..98b7a85d68 100644
--- a/SingularityUI/package.json
+++ b/SingularityUI/package.json
@@ -52,6 +52,7 @@
     "react-tagsinput": "^3.13.0",
     "react-typeahead": "git://github.com/HubSpot/react-typeahead.git#hubspot-3",
     "react-waypoint": "^2.0.3",
+    "react-copy-to-clipboard": "^4.2.3",
     "redux": "^3.5.2",
     "redux-form": "^5.3.0",
     "redux-logger": "^2.6.1",

From e8c30dda9321786fbf59141fcf0629104d797361 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 2 Feb 2017 11:16:55 -0500
Subject: [PATCH 14/42] fix props

---
 SingularityUI/app/components/machines/SlaveUsage.jsx | 4 ++--
 SingularityUI/package.json                           | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index ef71c5d5ea..e99200447e 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -60,9 +60,9 @@ const SlaveUsage = (props) => {
     switch (statName) {
       case STAT_NAMES.memoryBytesUsedStat:
         return Utils.formatUnicorn('Memory used : {0}', Utils.humanizeFileSize(props.slaveUsage[statName]));
-      case props.timestampStat:
+      case STAT_NAMES.timestampStat:
         return Utils.formatUnicorn('{0} : {1}', Utils.humanizeCamelcase(statName), Utils.absoluteTimestampWithSeconds(props.slaveUsage[statName]));
-      case props.slaveIdStat:
+      case STAT_NAMES.slaveIdStat:
         return Utils.formatUnicorn('Host : {host}', props.slaveInfo);
       default:
         return Utils.formatUnicorn('{0} : {1}', Utils.humanizeCamelcase(statName), props.slaveUsage[statName]);
diff --git a/SingularityUI/package.json b/SingularityUI/package.json
index 98b7a85d68..5e3a028a14 100644
--- a/SingularityUI/package.json
+++ b/SingularityUI/package.json
@@ -90,6 +90,11 @@
     "gulp-util": "^3.0.7",
     "mocha": "^3.1.2",
     "nib": "^1.1.0",
+    "node-sass": "^3.8.0",
+    "react-copy-to-clipboard": "^4.2.3",
+    "react-hot-loader": "^3.0.0-beta.2",
+    "resolve-url-loader": "^1.6.0",
+    "sass-loader": "^4.0.0",
     "streamqueue": "^1.1.1",
     "webpack": "~1.12.14",
     "webpack-dev-server": "^1.14.1",

From e40ee633a3430c4611e2dbc7abcfeebf206a9795 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 2 Feb 2017 14:11:09 -0500
Subject: [PATCH 15/42] fix to work in staging

---
 .../app/components/machines/Constants.jsx     |  2 +-
 .../components/machines/SlaveUsagePage.jsx    | 44 +++++++------------
 .../app/styles/{ => stylus}/slaveUsage.styl   |  0
 3 files changed, 17 insertions(+), 29 deletions(-)
 rename SingularityUI/app/styles/{ => stylus}/slaveUsage.styl (100%)

diff --git a/SingularityUI/app/components/machines/Constants.jsx b/SingularityUI/app/components/machines/Constants.jsx
index c6350ca310..e8f4fd4d7a 100644
--- a/SingularityUI/app/components/machines/Constants.jsx
+++ b/SingularityUI/app/components/machines/Constants.jsx
@@ -34,4 +34,4 @@ export const STAT_STYLES = {
   ok : '',
   warning : 'color-warning',
   critical : 'color-error'
-};
\ No newline at end of file
+};
diff --git a/SingularityUI/app/components/machines/SlaveUsagePage.jsx b/SingularityUI/app/components/machines/SlaveUsagePage.jsx
index 49d02acb4b..f4e37b0b1a 100644
--- a/SingularityUI/app/components/machines/SlaveUsagePage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsagePage.jsx
@@ -5,13 +5,6 @@ import rootComponent from '../../rootComponent';
 import { FetchSlaveUsages, FetchSlaves } from '../../actions/api/slaves';
 import SlaveUsage from './SlaveUsage';
 
-const navigation = (
-  <Nav bsStyle="pills" activeKey={2} justified={true}>
-    <NavItem eventKey={1} title="aggregate"> Aggregate </NavItem>
-    <NavItem eventKey={2} title="heatmap"> Heatmap </NavItem>
-  </Nav>
-);
-
 const getSlaveInfo = (slaves, slaveUsage) => {
   return _.findWhere(slaves, {'id' : slaveUsage.slaveId});
 };
@@ -24,9 +17,7 @@ const SlaveUsagePage = ({slaves, slaveUsages}) => {
 
   return (
     <div>
-      <div id="nav">
-        {navigation}
-      </div>
+      <h1>Slave Usage</h1>
       <hr />
       <div id="slaves">
         {slaveUsageData}
@@ -38,8 +29,7 @@ const SlaveUsagePage = ({slaves, slaveUsages}) => {
 
 SlaveUsage.propTypes = {
   slaveUsages : PropTypes.arrayOf(PropTypes.object),
-  slaves : PropTypes.arrayOf(PropTypes.object),
-  fetchSlaveUsages : React.PropTypes.func
+  slaves : PropTypes.arrayOf(PropTypes.object)
 };
 
 function mapStateToProps(state) {
@@ -49,23 +39,21 @@ function mapStateToProps(state) {
   };
 }
 
-const mapDispatchToProps = (dispatch) => ({
-  fetchSlaveUsages : () => dispatch(FetchSlaveUsages.trigger()),
-  fetchSlaves : () => dispatch(FetchSlaves.trigger())
-});
-
-function initialize(props) {
-  return Promise.all([
-    props.fetchSlaveUsages(),
-    props.fetchSlaves()
-  ]);
+function mapDispatchToProps(dispatch) {
+  return {
+    fetchSlaves : () => dispatch(FetchSlaves.trigger()),
+    fetchSlaveUsages : () => dispatch(FetchSlaveUsages.trigger())
+  };
 }
 
-function refresh(props) {
-  return Promise.all([
-    props.fetchSlaveUsages(),
-    props.fetchSlaves()
+const refresh = () => (dispatch) =>
+  Promise.all([
+    dispatch(FetchSlaves.trigger()),
+    dispatch(FetchSlaveUsages.trigger())
   ]);
-}
 
-export default connect(mapStateToProps, mapDispatchToProps)(rootComponent(SlaveUsagePage, 'SlaveUsagePage', refresh, true, true, initialize));
+const initialize = () => (dispatch) =>
+  Promise.all([]).then(() => dispatch(refresh()));
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(rootComponent(SlaveUsagePage, refresh, true, true, initialize));
diff --git a/SingularityUI/app/styles/slaveUsage.styl b/SingularityUI/app/styles/stylus/slaveUsage.styl
similarity index 100%
rename from SingularityUI/app/styles/slaveUsage.styl
rename to SingularityUI/app/styles/stylus/slaveUsage.styl

From edf3048059952e24fe4dc858d314e3807f4f2f4a Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 2 Feb 2017 14:17:05 -0500
Subject: [PATCH 16/42] dont need no loggin

---
 SingularityUI/app/rootComponent.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/SingularityUI/app/rootComponent.jsx b/SingularityUI/app/rootComponent.jsx
index 5a34b35e00..cb60b7e76f 100644
--- a/SingularityUI/app/rootComponent.jsx
+++ b/SingularityUI/app/rootComponent.jsx
@@ -36,7 +36,6 @@ const rootComponent = (Wrapped, title, refresh = _.noop, refreshInterval = true,
       }).catch((reason) => {
         // Boot React errors out of the promise so they can be picked up by Sentry
         setTimeout(() => {
-          console.log(reason.stack);
           throw new Error(reason);
         });
       });

From 261f9bf31ee37fd2fc065826fd39e65595d8caa1 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 2 Feb 2017 14:28:05 -0500
Subject: [PATCH 17/42] extra api '/' is fixed in staging :|

---
 SingularityUI/app/actions/api/slaves.es6 | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/SingularityUI/app/actions/api/slaves.es6 b/SingularityUI/app/actions/api/slaves.es6
index c38495496c..8a2e803398 100644
--- a/SingularityUI/app/actions/api/slaves.es6
+++ b/SingularityUI/app/actions/api/slaves.es6
@@ -2,14 +2,14 @@ import { buildApiAction, buildJsonApiAction } from './base';
 
 export const FetchSlaves = buildApiAction(
   'FETCH_SLAVES',
-  {url: 'slaves'}
+  {url: '/slaves'}
 );
 
 export const FreezeSlave = buildJsonApiAction(
   'FREEZE_SLAVE',
   'POST',
   (slaveId, data) => ({
-    url: `slaves/slave/${slaveId}/freeze`,
+    url: `/slaves/slave/${slaveId}/freeze`,
     body: data || {}
   })
 );
@@ -18,7 +18,7 @@ export const DecommissionSlave = buildJsonApiAction(
   'DECOMMISSION_SLAVE',
   'POST',
   (slaveId, data) => ({
-    url: `slaves/slave/${slaveId}/decommission`,
+    url: `/slaves/slave/${slaveId}/decommission`,
     body: data || {}
   })
 );
@@ -27,7 +27,7 @@ export const RemoveSlave = buildJsonApiAction(
   'REMOVE_SLAVE',
   'DELETE',
   (slaveId, data) => ({
-    url: `slaves/slave/${slaveId}`,
+    url: `/slaves/slave/${slaveId}`,
     body: data || {}
   })
 );
@@ -36,25 +36,25 @@ export const ReactivateSlave = buildJsonApiAction(
   'ACTIVATE_SLAVE',
   'POST',
   (slaveId, data) => ({
-    url: `slaves/slave/${slaveId}/activate`,
+    url: `/slaves/slave/${slaveId}/activate`,
     body: data || {}
   })
 );
 
 export const FetchExpiringSlaveStates = buildApiAction(
   'FETCH_EXPIRING_SLAVE_STATES',
-  {url: 'slaves/expiring'}
+  {url: '/slaves/expiring'}
 );
 
 export const RemoveExpiringSlaveState = buildJsonApiAction(
   'REMOVE_EXPIRING_SLAVE_STATE',
   'DELETE',
   (slaveId) => ({
-    url: `slaves/slave/${slaveId}/expiring`
+    url: `/slaves/slave/${slaveId}/expiring`
   })
 );
 
 export const FetchSlaveUsages = buildApiAction(
   'FETCH_SLAVE_USAGES',
-  {url : 'usage/slaves'}
+  {url : '/usage/slaves'}
 );

From 729b4abe7e8e2c536045eaa70ee1262f1e3ee0e2 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 16 Feb 2017 13:24:36 -0500
Subject: [PATCH 18/42] refactoring and styling heatmap towards mockup

---
 .../app/components/machines/Constants.jsx     |  33 ++--
 .../app/components/machines/SlaveHealth.jsx   | 111 +++++++++++
 .../machines/SlaveHealthMenuItems.js          |  69 +++++++
 .../app/components/machines/SlaveStat.jsx     |  21 ---
 .../app/components/machines/SlaveUsage.jsx    | 174 +++++-------------
 .../components/machines/SlaveUsagePage.jsx    |  59 ------
 .../app/components/machines/StatItem.jsx      |  31 ++++
 SingularityUI/app/router.jsx                  |  78 ++++----
 SingularityUI/app/styles/colors.styl          |  11 ++
 .../app/styles/stylus/slaveUsage.styl         |  48 ++++-
 SingularityUI/app/utils.es6                   |   4 +
 11 files changed, 373 insertions(+), 266 deletions(-)
 create mode 100644 SingularityUI/app/components/machines/SlaveHealth.jsx
 create mode 100644 SingularityUI/app/components/machines/SlaveHealthMenuItems.js
 delete mode 100644 SingularityUI/app/components/machines/SlaveStat.jsx
 delete mode 100644 SingularityUI/app/components/machines/SlaveUsagePage.jsx
 create mode 100644 SingularityUI/app/components/machines/StatItem.jsx

diff --git a/SingularityUI/app/components/machines/Constants.jsx b/SingularityUI/app/components/machines/Constants.jsx
index e8f4fd4d7a..f1dc54f480 100644
--- a/SingularityUI/app/components/machines/Constants.jsx
+++ b/SingularityUI/app/components/machines/Constants.jsx
@@ -1,16 +1,9 @@
-export const SLAVE_TYPES = {
-  critical : {
-    icon : 'glyphicon glyphicon-remove-sign',
-    bsStyle : 'danger'
-  },
-  warning : {
-    icon : 'glyphicon glyphicon-minus-sign',
-    bsStyle : 'warning'
-  },
-  ok : {
-    icon : 'glyphicon glyphicon-ok-sign',
-    bsStyle : 'success'
-  }
+export const HUNDREDTHS_PLACE = 2;
+
+export const SLAVE_STYLES = {
+  ok : 'ok-slave',
+  warning : 'warning-slave',
+  critical : 'critical-slave'
 };
 
 export const THRESHOLDS = {
@@ -31,7 +24,15 @@ export const STAT_NAMES = {
 };
 
 export const STAT_STYLES = {
-  ok : '',
-  warning : 'color-warning',
-  critical : 'color-error'
+  ok : 'ok-stat',
+  warning : 'warning-stat',
+  critical : 'critical-stat'
 };
+
+export const SLAVE_HEALTH_MENU_ITEM_ORDER = [
+  'host',
+  STAT_NAMES.cpusUsedStat,
+  STAT_NAMES.memoryBytesUsedStat,
+  STAT_NAMES.numTasksStat,
+  STAT_NAMES.timestampStat
+];
diff --git a/SingularityUI/app/components/machines/SlaveHealth.jsx b/SingularityUI/app/components/machines/SlaveHealth.jsx
new file mode 100644
index 0000000000..f8936d1550
--- /dev/null
+++ b/SingularityUI/app/components/machines/SlaveHealth.jsx
@@ -0,0 +1,111 @@
+import React, { PropTypes } from 'react';
+import Utils from '../../utils';
+import SlaveHealthMenuItems from './SlaveHealthMenuItems';
+import { Dropdown } from 'react-bootstrap';
+import { SLAVE_STYLES, THRESHOLDS, STAT_NAMES, STAT_STYLES } from './Constants';
+
+const getMaxAvailableResource = (slaveInfo, statName) => {
+  switch (statName) {
+    case STAT_NAMES.cpusUsedStat:
+      try {
+        return parseFloat(slaveInfo.attributes.real_cpus) || slaveInfo.resources.cpus;
+      } catch (e) {
+        throw Utils.formatUnicorn('Could not find resource (cpus) for slave {host} ({id})', slaveInfo);
+      }
+    case STAT_NAMES.memoryBytesUsedStat:
+      try {
+        return parseFloat(slaveInfo.attributes.real_memory_mb) || slaveInfo.resources.mem;
+      } catch (e) {
+        throw Utils.formatUnicorn('Could not find resources (memory) for slave {host} ({id})', slaveInfo);
+      }
+    default:
+      throw Utils.formatUnicorn('{0} is an unsupported statistic', statName);
+  }
+};
+
+const isStatCritical = (slaveInfo, slaveUsage, statName) => {
+  switch (statName) {
+    case STAT_NAMES.cpusUsedStat:
+      return (slaveUsage.cpusUsed / getMaxAvailableResource(slaveInfo, statName)) > THRESHOLDS.cpusCriticalThreshold;
+    case STAT_NAMES.memoryBytesUsedStat:
+      // todo: create util method to convert from mb to bytes
+      return (slaveUsage.memoryBytesUsed / (getMaxAvailableResource(slaveInfo, statName) * Math.pow(1024, 2))) > THRESHOLDS.memoryCriticalThreshold;
+    case STAT_NAMES.numTasksStat:
+      return slaveUsage.numTasks > THRESHOLDS.numTasksCritical;
+    default:
+      return false;
+  }
+};
+
+const isStatWarning = (slaveInfo, slaveUsage, statName) => {
+  switch (statName) {
+    case STAT_NAMES.cpusUsedStat:
+      return (slaveUsage.cpusUsed / getMaxAvailableResource(slaveInfo, statName)) > THRESHOLDS.cpusWarningThreshold;
+    case STAT_NAMES.memoryBytesUsedStat:
+      // todo: create util method to convert from mb to bytes
+      return (slaveUsage.memoryBytesUsed / (getMaxAvailableResource(slaveInfo, statName) * Math.pow(1024, 2))) > THRESHOLDS.memoryWarningThreshold;
+    case STAT_NAMES.numTasksStat:
+      return slaveUsage.numTasks > THRESHOLDS.numTasksWarning;
+    default:
+      return false;
+  }
+};
+
+const getSlaveStyle = (checkedStats) => {
+  let style = SLAVE_STYLES.ok;
+
+  if (checkedStats.some((obj) => {return obj.style === STAT_STYLES.critical;})) {
+    style = SLAVE_STYLES.critical;
+  } else if (checkedStats.some((obj) => {return obj.style === STAT_STYLES.warning;})) {
+    style = SLAVE_STYLES.warning;
+  }
+
+  return style;
+};
+
+const SlaveHealth = ({slaveInfo, slaveUsage}) => {
+  const checkStats = (val, stat) => {
+    const newStat = {
+      name : stat,
+      value : (stat === STAT_NAMES.slaveIdStat ? slaveInfo.host : val),
+      style : STAT_STYLES.ok
+    };
+
+    if (isStatCritical(slaveInfo, slaveUsage, stat)) {
+      newStat.style = STAT_STYLES.critical;
+    } else if (isStatWarning(slaveInfo, slaveUsage, stat)) {
+      newStat.style = STAT_STYLES.warning;
+    }
+
+    return newStat;
+  };
+
+  const checkedStats = _.map(slaveUsage, checkStats);
+
+  const slaveStyle = getSlaveStyle(checkedStats);
+
+  return (
+    <Dropdown key={slaveUsage.slaveId} id={slaveUsage.slaveId}>
+      <Dropdown.Toggle noCaret={true} className={`${slaveStyle} single-slave-btn`} />
+      <Dropdown.Menu>
+        <SlaveHealthMenuItems stats={checkedStats} />
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+SlaveHealth.propTypes = {
+  slaveUsage : PropTypes.shape({
+    slaveId : PropTypes.string.isRequired,
+    cpusUsed : PropTypes.number.isRequired,
+    memoryBytesUsed : PropTypes.number.isRequired,
+    numTasks : PropTypes.number.isRequired,
+    timestamp : PropTypes.number.isRequired
+  }),
+  slaveInfo : PropTypes.shape({
+    attributes : PropTypes.object.isRequired,
+    resources : PropTypes.object.isRequired
+  })
+};
+
+export default SlaveHealth;
diff --git a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
new file mode 100644
index 0000000000..0ba9d76417
--- /dev/null
+++ b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
@@ -0,0 +1,69 @@
+import React, { PropTypes } from 'react';
+import StatItem from './StatItem';
+import Utils from '../../utils';
+import { STAT_NAMES, SLAVE_HEALTH_MENU_ITEM_ORDER, HUNDREDTHS_PLACE } from './Constants';
+
+const compareStats = (a, b) => {
+  return SLAVE_HEALTH_MENU_ITEM_ORDER.indexOf(a.name) - SLAVE_HEALTH_MENU_ITEM_ORDER.indexOf(b.name);
+};
+
+const humanizeStatName = (name) => {
+  switch (name) {
+    case STAT_NAMES.slaveIdStat:
+      return 'HOST';
+    case STAT_NAMES.cpusUsedStat:
+      return 'CPU';
+    case STAT_NAMES.memoryBytesUsedStat:
+      return 'MEM';
+    case STAT_NAMES.numTasksStat:
+      return 'TASKS';
+    case STAT_NAMES.timestampStat:
+      return '';
+    default:
+      throw new Error(`${name} is an unsupported statistic`);
+  }
+};
+
+const humanizeStatValue = (name, value) => {
+  switch (name) {
+    case STAT_NAMES.slaveIdStat:
+      return Utils.humanizeSlaveHostName(value);
+    case STAT_NAMES.cpusUsedStat:
+      return parseFloat(value).toFixed(HUNDREDTHS_PLACE);
+    case STAT_NAMES.memoryBytesUsedStat:
+      return Utils.humanizeFileSize(value);
+    case STAT_NAMES.numTasksStat:
+      return value;
+    case STAT_NAMES.timestampStat:
+      return '';
+    default:
+      throw new Error(`${name} is an unsupported statistic`);
+  }
+};
+
+const SlaveHealthMenuItems = ({stats}) => {
+  const renderSlaveStats = _.map(stats.sort(compareStats), ({name, value, style}) => {
+    return <StatItem key={name} name={humanizeStatName(name)} value={humanizeStatValue(name, value)} className={style} percentage="50" />;
+  });
+
+  return (
+    <div id="slave-stats">
+      {renderSlaveStats}
+    </div>
+  );
+};
+
+SlaveHealthMenuItems.propTypes = {
+  stats : PropTypes.arrayOf(
+    PropTypes.shape({
+      name : PropTypes.string.isRequired,
+      value : PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+      ]).isRequired,
+      style : PropTypes.string.isRequired
+    })
+  )
+};
+
+export default SlaveHealthMenuItems;
diff --git a/SingularityUI/app/components/machines/SlaveStat.jsx b/SingularityUI/app/components/machines/SlaveStat.jsx
deleted file mode 100644
index 540c3ee311..0000000000
--- a/SingularityUI/app/components/machines/SlaveStat.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { PropTypes } from 'react';
-import { STAT_STYLES } from './Constants';
-import CopyToClipboard from 'react-copy-to-clipboard';
-
-const SlaveStat = ({name, value, status}) => {
-  return (
-    <CopyToClipboard text={value}>
-      <li className={STAT_STYLES[status] + ' slave-usage-detail'}>
-        {name}
-      </li>
-    </CopyToClipboard>
-  );
-};
-
-SlaveStat.propTypes = {
-  name : PropTypes.string,
-  value : PropTypes.string,
-  status : PropTypes.string
-};
-
-export default SlaveStat;
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index e99200447e..46fda3c9cf 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -1,139 +1,61 @@
 import React, { PropTypes } from 'react';
-import { Dropdown } from 'react-bootstrap';
-import { Glyphicon } from 'react-bootstrap';
-import Utils from '../../utils';
-import SlaveStat from './SlaveStat';
-import { SLAVE_TYPES, THRESHOLDS, STAT_NAMES} from './Constants';
+import { connect } from 'react-redux';
+import rootComponent from '../../rootComponent';
+import { FetchSlaveUsages, FetchSlaves } from '../../actions/api/slaves';
+import SlaveHealth from './SlaveHealth';
 
-// TODO:
-// move helper functions out of component
-
-const SlaveUsage = (props) => {
-  const getMaxAvailableResource = (statName) => {
-    switch (statName) {
-      case STAT_NAMES.cpusUsedStat:
-        try {
-          return parseFloat(props.slaveInfo.attributes.real_cpus) || props.slaveInfo.resources.cpus;
-        } catch (e) {
-          throw Utils.formatUnicorn('Could not find resource (cpus) for slave {host} ({id})', props.slaveInfo);
-        }
-      case STAT_NAMES.memoryBytesUsedStat:
-        try {
-          return parseFloat(props.slaveInfo.attributes.real_memory_mb) || props.slaveInfo.resources.mem;
-        } catch (e) {
-          throw Utils.formatUnicorn('Could not find resources (memory) for slave {host} ({id})', props.slaveInfo);
-        }
-      default:
-        throw Utils.formatUnicorn('{0} is an unsupported statistic', statName);
-    }
-  };
-
-  const isStatCritical = (statName) => {
-    switch (statName) {
-      case STAT_NAMES.cpusUsedStat:
-        return (props.slaveUsage.cpusUsed / getMaxAvailableResource(statName)) > THRESHOLDS.cpusCriticalThreshold;
-      case STAT_NAMES.memoryBytesUsedStat:
-        // todo: create util method to convert from mb to bytes
-        return (props.slaveUsage.memoryBytesUsed / (getMaxAvailableResource(statName) * Math.pow(1024, 2))) > THRESHOLDS.memoryCriticalThreshold;
-      case STAT_NAMES.numTasksStat:
-        return props.slaveUsage.numTasks > THRESHOLDS.numTasksCritical;
-      default:
-        return false;
-    }
-  };
-
-  const isStatWarning = (statName) => {
-    switch (statName) {
-      case STAT_NAMES.cpusUsedStat:
-        return (props.slaveUsage.cpusUsed / getMaxAvailableResource(statName)) > THRESHOLDS.cpusWarningThreshold;
-      case STAT_NAMES.memoryBytesUsedStat:
-        // todo: create util method to convert from mb to bytes
-        return (props.slaveUsage.memoryBytesUsed / (getMaxAvailableResource(statName) * Math.pow(1024, 2))) > THRESHOLDS.memoryWarningThreshold;
-      case STAT_NAMES.numTasksStat:
-        return props.slaveUsage.numTasks > THRESHOLDS.numTasksWarning;
-      default:
-        return false;
-    }
-  };
-
-  const humanizeStat = (statName) => {
-    switch (statName) {
-      case STAT_NAMES.memoryBytesUsedStat:
-        return Utils.formatUnicorn('Memory used : {0}', Utils.humanizeFileSize(props.slaveUsage[statName]));
-      case STAT_NAMES.timestampStat:
-        return Utils.formatUnicorn('{0} : {1}', Utils.humanizeCamelcase(statName), Utils.absoluteTimestampWithSeconds(props.slaveUsage[statName]));
-      case STAT_NAMES.slaveIdStat:
-        return Utils.formatUnicorn('Host : {host}', props.slaveInfo);
-      default:
-        return Utils.formatUnicorn('{0} : {1}', Utils.humanizeCamelcase(statName), props.slaveUsage[statName]);
-    }
-  };
-
-  const checkStats = (val, stat) => {
-    const newStat = {
-      name : stat,
-      value : val,
-      status : 'ok'
-    };
-
-    if (isStatCritical(stat)) {
-      newStat.status = 'critical';
-    } else if (isStatWarning(stat)) {
-      newStat.status = 'warning';
-    }
-
-    return newStat;
-  };
-
-  const checkedStats = _.map(props.slaveUsage, checkStats);
+const getSlaveInfo = (slaves, slaveUsage) => {
+  return _.findWhere(slaves, {'id' : slaveUsage.slaveId});
+};
 
-  const renderSlaveStats = _.map(checkedStats, ({name, value, status}) => {
-    return <SlaveStat key={name} name={humanizeStat(name)} value={value.toString()} status={status} />;
+const SlaveUsage = ({slaves, slaveUsages}) => {
+  const slaveHealthData = slaveUsages.map((slaveUsage, index) => {
+    const slaveInfo = getSlaveInfo(slaves, slaveUsage);
+    return <SlaveHealth key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} />;
   });
 
-  const getSlaveStyle = () => {
-    let style = SLAVE_TYPES.ok;
+  return (
+    <div id="slave-usage-page">
+      <h1>Slave Usage</h1>
+      <div>
+        Aggregate data will appear here
+      </div>
+
+      <div id="slave-health">
+        <h3>Slave health</h3>
+        {slaveHealthData}
+      </div>
+    </div>
+  );
+};
 
-    if (checkedStats.some((obj) => {
-      return obj.status === 'critical';
-    })) {
-      style = SLAVE_TYPES.critical;
-    } else if (checkedStats.some((obj) => {
-      return obj.status === 'warning';
-    })) {
-      style = SLAVE_TYPES.warning;
-    }
+SlaveUsage.propTypes = {
+  slaveUsages : PropTypes.arrayOf(PropTypes.object),
+  slaves : PropTypes.arrayOf(PropTypes.object)
+};
 
-    return style;
+function mapStateToProps(state) {
+  return {
+    slaveUsages : state.api.slaveUsages.data,
+    slaves : state.api.slaves.data
   };
+}
 
-  const slaveStyle = getSlaveStyle();
+function mapDispatchToProps(dispatch) {
+  return {
+    fetchSlaves : () => dispatch(FetchSlaves.trigger()),
+    fetchSlaveUsages : () => dispatch(FetchSlaveUsages.trigger())
+  };
+}
 
-  return (
-    <Dropdown key={props.slaveUsage.slaveId} id={props.slaveUsage.slaveId}>
-      <Dropdown.Toggle bsSize="large" bsStyle={slaveStyle.bsStyle} noCaret={true} className="single-slave-btn">
-        <Glyphicon glyph={slaveStyle.icon} />
-      </Dropdown.Toggle>
-      <Dropdown.Menu>
-        {renderSlaveStats}
-      </Dropdown.Menu>
-    </Dropdown>
-  );
-};
+const refresh = () => (dispatch) =>
+  Promise.all([
+    dispatch(FetchSlaves.trigger()),
+    dispatch(FetchSlaveUsages.trigger())
+  ]);
 
+const initialize = () => (dispatch) =>
+  Promise.all([]).then(() => dispatch(refresh()));
 
-SlaveUsage.propTypes = {
-  slaveUsage : PropTypes.shape({
-    slaveId : PropTypes.string.isRequired,
-    cpusUsed : PropTypes.number.isRequired,
-    memoryBytesUsed : PropTypes.number.isRequired,
-    numTasks : PropTypes.number.isRequired,
-    timestamp : PropTypes.number.isRequired
-  }),
-  slaveInfo : PropTypes.shape({
-    attributes : PropTypes.object.isRequired,
-    resources : PropTypes.object.isRequired
-  })
-};
 
-export default SlaveUsage;
+export default connect(mapStateToProps, mapDispatchToProps)(rootComponent(SlaveUsage, refresh, true, true, initialize));
diff --git a/SingularityUI/app/components/machines/SlaveUsagePage.jsx b/SingularityUI/app/components/machines/SlaveUsagePage.jsx
deleted file mode 100644
index f4e37b0b1a..0000000000
--- a/SingularityUI/app/components/machines/SlaveUsagePage.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { PropTypes } from 'react';
-import { Nav, NavItem } from 'react-bootstrap';
-import { connect } from 'react-redux';
-import rootComponent from '../../rootComponent';
-import { FetchSlaveUsages, FetchSlaves } from '../../actions/api/slaves';
-import SlaveUsage from './SlaveUsage';
-
-const getSlaveInfo = (slaves, slaveUsage) => {
-  return _.findWhere(slaves, {'id' : slaveUsage.slaveId});
-};
-
-const SlaveUsagePage = ({slaves, slaveUsages}) => {
-  const slaveUsageData = slaveUsages.map((slaveUsage, index) => {
-    const slaveInfo = getSlaveInfo(slaves, slaveUsage);
-    return <SlaveUsage key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} />;
-  });
-
-  return (
-    <div>
-      <h1>Slave Usage</h1>
-      <hr />
-      <div id="slaves">
-        {slaveUsageData}
-      </div>
-    </div>
-  );
-};
-
-
-SlaveUsage.propTypes = {
-  slaveUsages : PropTypes.arrayOf(PropTypes.object),
-  slaves : PropTypes.arrayOf(PropTypes.object)
-};
-
-function mapStateToProps(state) {
-  return {
-    slaveUsages : state.api.slaveUsages.data,
-    slaves : state.api.slaves.data
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    fetchSlaves : () => dispatch(FetchSlaves.trigger()),
-    fetchSlaveUsages : () => dispatch(FetchSlaveUsages.trigger())
-  };
-}
-
-const refresh = () => (dispatch) =>
-  Promise.all([
-    dispatch(FetchSlaves.trigger()),
-    dispatch(FetchSlaveUsages.trigger())
-  ]);
-
-const initialize = () => (dispatch) =>
-  Promise.all([]).then(() => dispatch(refresh()));
-
-
-export default connect(mapStateToProps, mapDispatchToProps)(rootComponent(SlaveUsagePage, refresh, true, true, initialize));
diff --git a/SingularityUI/app/components/machines/StatItem.jsx b/SingularityUI/app/components/machines/StatItem.jsx
new file mode 100644
index 0000000000..f60e461b00
--- /dev/null
+++ b/SingularityUI/app/components/machines/StatItem.jsx
@@ -0,0 +1,31 @@
+import React, { PropTypes } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+const StatItem = ({name, value, percentage, className}) => {
+  return (
+    <CopyToClipboard text={value.toString()}>
+      <li className={`${className} stat-item-detail container`}>
+          <div className="row">
+            <div className="col-md-4" id="stat-name">
+              {name}
+            </div>
+            <div className="col-md-4" id="stat-value">
+              {value}
+            </div>
+            <div className="col-md-4" id="stat-percentage">
+              {percentage}%
+            </div>
+          </div>
+      </li>
+    </CopyToClipboard>
+  );
+};
+
+StatItem.propTypes = {
+  name : PropTypes.string,
+  value : PropTypes.string,
+  percentage : PropTypes.number,
+  className : PropTypes.string
+};
+
+export default StatItem;
diff --git a/SingularityUI/app/router.jsx b/SingularityUI/app/router.jsx
index 2e1520fcb9..b6b521b6a4 100644
--- a/SingularityUI/app/router.jsx
+++ b/SingularityUI/app/router.jsx
@@ -3,7 +3,6 @@ import { Provider } from 'react-redux';
 import { Router, Route, IndexRoute, useRouterHistory } from 'react-router';
 import { createHistory } from 'history';
 import { syncHistoryWithStore } from 'react-router-redux';
-import parseurl from 'parseurl';
 
 import Application from './components/common/Application';
 import NotFound from './components/common/NotFound';
@@ -20,52 +19,55 @@ import TaskSearch from './components/taskSearch/TaskSearch';
 import DeployDetail from './components/deployDetail/DeployDetail';
 import RequestForm from './components/requestForm/RequestForm';
 import NewDeployForm from './components/newDeployForm/NewDeployForm';
-import { Tail, AggregateTail, CompressedLogView } from './components/logs/Tail';
 import TaskInstanceRedirect from './components/requestDetail/TaskInstanceRedirect';
 import RequestDetailPage from './components/requestDetail/RequestDetailPage';
 import Group from './components/groupDetail/GroupDetail.jsx';
 import Disasters from './components/disasters/Disasters';
+import TaskLogTailerContainer from './containers/TaskLogTailerContainer';
+import RequestLogTailerContainer from './containers/RequestLogTailerContainer';
+import CustomLogTailerContainer from './containers/CustomLogTailerContainer';
+
+const getFilenameFromSplat = (splat) => _.last(splat.split('/'));
+
+const routes = (
+  <Route path="/" component={Application}>
+    <IndexRoute component={DashboardPage} title="Dashboard" />
+    <Route path="status" component={StatusPage} title="Status" />
+    <Route path="requests/new" component={RequestForm} title="New Request" />
+    <Route path="requests/edit/:requestId" component={RequestForm} title="New or Edit Request" />
+    <Route path="requests(/:state)(/:subFilter)(/:searchFilter)" component={RequestsPage} title="Requests" />
+    <Route path="group/:groupId" component={Group} title={(params) => `Group ${params.groupId}`} />
+    <Route path="request">
+      <Route path=":requestId" component={RequestDetailPage} title={(params) => params.requestId} />
+      <Route path=":requestId/task-search" component={TaskSearch} title="Task Search" />
+      <Route path=":requestId/deploy" component={NewDeployForm} title="New Deploy" />
+      <Route path=":requestId/deploy/:deployId" component={DeployDetail} title={(params) => `Deploy ${params.deployId}`} />
+      <Route path=":requestId/tail/**" component={RequestLogTailerContainer} title={(params) => `Tail of ${getFilenameFromSplat(params.splat)}`} />
+      <Route path=":requestId/instance/:instanceNo" component={TaskInstanceRedirect} />
+      <IndexRoute component={NotFound} title="Not Found" />
+    </Route>
+    <Route path="tasks(/:state)(/:requestsSubFilter)(/:searchFilter)" component={TasksPage} title="Tasks" />
+    <Route path="task">
+      <Route path=":taskId(/files**)" component={TaskDetail} title={(params) => params.taskId} />
+      <Route path=":taskId/tail/**" component={TaskLogTailerContainer} title={(params) => `Tail of ${getFilenameFromSplat(params.splat)}`} />
+      <IndexRoute component={NotFound} title="Not Found" />
+    </Route>
+    <Route path="tail/**" component={CustomLogTailerContainer} title="Tailer" />
+    <Route path="racks(/:state)" component={Racks} title="Racks" />
+    <Route path="slaves(/:state)" component={Slaves} title="Slaves" />
+    <Route path="slave-usage" component={SlaveUsagePage} />
+    <Route path="webhooks" component={Webhooks} title="Webhooks" />
+    <Route path="task-search" component={TaskSearch} title="Task Search" />
+    <Route path="disasters" component={Disasters} title="Disasters" />
+    <Route path="*" component={NotFound} title="Not Found" />
+  </Route>);
 
 const AppRouter = (props) => {
-  const parsedUrl = parseurl({ url: config.appRoot });
-  let history = useRouterHistory(createHistory)({
-    basename: parsedUrl.path
-  });
-  history = syncHistoryWithStore(history, props.store);
+  const syncedHistory = syncHistoryWithStore(props.history, props.store);
 
   return (
     <Provider store={props.store}>
-      <Router history={history}>
-        <Route path="/" component={Application}>
-          <IndexRoute component={DashboardPage} />
-          <Route path="status" component={StatusPage} />
-          <Route path="requests/new" component={RequestForm} />
-          <Route path="requests/edit/:requestId" component={RequestForm} />
-          <Route path="requests(/:state)(/:subFilter)(/:searchFilter)" component={RequestsPage} />
-          <Route path="group/:groupId" component={Group} />
-          <Route path="request">
-            <Route path=":requestId" component={RequestDetailPage} />
-            <Route path=":requestId/task-search" component={TaskSearch} />
-            <Route path=":requestId/deploy" component={NewDeployForm} />
-            <Route path=":requestId/deploy/:deployId" component={DeployDetail} store={props.store} />
-            <Route path=":requestId/tail/**" component={AggregateTail} />
-            <Route path=":requestId/instance/:instanceNo" component={TaskInstanceRedirect} />
-          </Route>
-          <Route path="tasks(/:state)(/:requestsSubFilter)(/:searchFilter)" component={TasksPage} />
-          <Route path="task">
-            <Route path=":taskId(/files**)" component={TaskDetail} store={props.store} />
-            <Route path=":taskId/tail/**" component={Tail} />
-            <Route path=":taskId/view/**" component={CompressedLogView} />
-          </Route>
-          <Route path="racks(/:state)" component={Racks} />
-          <Route path="slaves(/:state)" component={Slaves} />
-          <Route path="slave-usage" component={SlaveUsagePage} />
-          <Route path="webhooks" component={Webhooks} />
-          <Route path="task-search" component={TaskSearch} />
-          <Route path="disasters" component={Disasters} />
-          <Route path="*" component={NotFound} />
-        </Route>
-      </Router>
+      <Router history={syncedHistory} routes={routes} />
     </Provider>
   );
 };
diff --git a/SingularityUI/app/styles/colors.styl b/SingularityUI/app/styles/colors.styl
index a0e162a453..e99ba776d1 100644
--- a/SingularityUI/app/styles/colors.styl
+++ b/SingularityUI/app/styles/colors.styl
@@ -19,6 +19,17 @@ $purple = #b93c96
 $dark-yellow = #e6e65c
 $removeRed = #df6f6f
 
+$color-oz = #00bda5
+$color-oz-dark = #00a38d
+$color-marigold = #f5c26b
+$color-marigold-dark = #dbae60
+$color-norman = #f2547d
+$color-norman-dark = #d94c71
+
+$alert-danger = #f04b51
+$alert-warning = #fdf3e1
+$alert-success = #5967bc
+
 $nav-yellow-start = #fcf8e3
 $nav-yellow-end = #faf2cc
 $nav-yellow-dark = #F8EDB4
diff --git a/SingularityUI/app/styles/stylus/slaveUsage.styl b/SingularityUI/app/styles/stylus/slaveUsage.styl
index b38b0c701b..bae9101eb7 100644
--- a/SingularityUI/app/styles/stylus/slaveUsage.styl
+++ b/SingularityUI/app/styles/stylus/slaveUsage.styl
@@ -1,10 +1,46 @@
+#slave-usage-page
+	margin-left : 25px
+
 .single-slave-btn
-	padding : 35px 20px
-	margin-right : 15px
-	margin-bottom : 15px
-	display: inline-block
+	padding : 15px 15px
+	border-radius : 0px
+	display : inline-block
+
+.ok-slave
+	background-color : $color-oz
+	border-color : $color-oz-dark
+
+.warning-slave
+	background-color : $color-marigold
+	border-color : $color-marigold-dark
 
-.slave-usage-detail
+.critical-slave
+	background-color : $color-norman
+	border-color : $color-norman-dark
+
+.dropdown-menu
+	border-radius : 0px
+
+.stat-item-detail
 	white-space : nowrap
 	padding-left : 20px
-	padding-right : 5px
\ No newline at end of file
+	padding-right : 5px
+	width : 300px
+
+#stat-name
+	display : inline
+	text-align : right
+
+#stat-value
+	display : inline
+
+#stat-percentage
+	display : inline
+
+.warning-stat
+	color : $color-marigold
+
+.critical-stat
+	color : $color-norman
+
+// $alert-success = #5967bc
diff --git a/SingularityUI/app/utils.es6 b/SingularityUI/app/utils.es6
index 976db1644c..0b0a93a90b 100644
--- a/SingularityUI/app/utils.es6
+++ b/SingularityUI/app/utils.es6
@@ -45,6 +45,10 @@ const Utils = {
     ));
   },
 
+  humanizeSlaveHostName(longHostName) {
+    return longHostName.split('.')[0];
+  },
+
   timestampFromNow(millis) {
     const timeObject = moment(millis);
     return `${timeObject.fromNow()} (${timeObject.format(window.config.timestampFormat)})`;

From bb3f187340cbfce31bd80f8d25c284e288e6a0d0 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 16 Feb 2017 14:53:23 -0500
Subject: [PATCH 19/42] added aggregates and more refactoring

---
 .../components/machines/SlaveAggregates.jsx   | 40 +++++++++++++++++++
 .../machines/SlaveHealthMenuItems.js          |  2 +-
 .../app/components/machines/SlaveUsage.jsx    |  5 ++-
 .../app/components/machines/StatItem.jsx      |  6 +--
 .../styles/stylus/circular-progress-bar.styl  | 16 ++++++++
 .../app/styles/stylus/slaveUsage.styl         | 19 ++++++++-
 SingularityUI/package.json                    |  2 +
 7 files changed, 82 insertions(+), 8 deletions(-)
 create mode 100644 SingularityUI/app/components/machines/SlaveAggregates.jsx
 create mode 100644 SingularityUI/app/styles/stylus/circular-progress-bar.styl

diff --git a/SingularityUI/app/components/machines/SlaveAggregates.jsx b/SingularityUI/app/components/machines/SlaveAggregates.jsx
new file mode 100644
index 0000000000..efa3ee3949
--- /dev/null
+++ b/SingularityUI/app/components/machines/SlaveAggregates.jsx
@@ -0,0 +1,40 @@
+import React, { PropTypes } from 'react';
+import CircularProgressbar from 'react-circular-progressbar';
+
+const SlaveAggregates = ({totalSlaves, totalTasks, avgCpu, avgMemory}) => {
+  return (
+    <div className="slave-aggregates row">
+      <div className="total-slaves col-xs-3">
+        <div id="value">
+          {totalSlaves}
+        </div>
+        <div id="label">
+          Total Slaves
+        </div>
+      </div>
+      <div className="total-tasks col-xs-3">
+        <div id="value">
+          {totalTasks}
+        </div>
+        <div id="label">
+          Tasks Running
+        </div>
+      </div>
+      <div className="avg-cpu col-xs-3">
+        <CircularProgressbar percentage={avgCpu} initialAnimation={true} textForPercentage={(pct) => `${pct}%`} />
+      </div>
+      <div className="avg-memory col-xs-3">
+        <CircularProgressbar percentage={avgMemory} initialAnimation={true} textForPercentage={(pct) => `${pct}%`} />
+      </div>
+    </div>
+  );
+};
+
+SlaveAggregates.propTypes = {
+  totalSlaves : PropTypes.number.isRequired,
+  totalTasks : PropTypes.number.isRequired,
+  avgCpu : PropTypes.number.isRequired,
+  avgMemory : PropTypes.number.isRequired
+};
+
+export default SlaveAggregates;
diff --git a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
index 0ba9d76417..d1f0bb7447 100644
--- a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
+++ b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
@@ -43,7 +43,7 @@ const humanizeStatValue = (name, value) => {
 
 const SlaveHealthMenuItems = ({stats}) => {
   const renderSlaveStats = _.map(stats.sort(compareStats), ({name, value, style}) => {
-    return <StatItem key={name} name={humanizeStatName(name)} value={humanizeStatValue(name, value)} className={style} percentage="50" />;
+    return <StatItem key={name} name={humanizeStatName(name)} value={humanizeStatValue(name, value)} className={style} percentage={50} />;
   });
 
   return (
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 46fda3c9cf..c962822ea1 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import rootComponent from '../../rootComponent';
 import { FetchSlaveUsages, FetchSlaves } from '../../actions/api/slaves';
+import SlaveAggregates from './SlaveAggregates';
 import SlaveHealth from './SlaveHealth';
 
 const getSlaveInfo = (slaves, slaveUsage) => {
@@ -18,9 +19,9 @@ const SlaveUsage = ({slaves, slaveUsages}) => {
     <div id="slave-usage-page">
       <h1>Slave Usage</h1>
       <div>
-        Aggregate data will appear here
+        <SlaveAggregates totalSlaves={20} totalTasks={200} avgCpu={30} avgMemory={40} />
       </div>
-
+      <hr />
       <div id="slave-health">
         <h3>Slave health</h3>
         {slaveHealthData}
diff --git a/SingularityUI/app/components/machines/StatItem.jsx b/SingularityUI/app/components/machines/StatItem.jsx
index f60e461b00..698ec4cc3a 100644
--- a/SingularityUI/app/components/machines/StatItem.jsx
+++ b/SingularityUI/app/components/machines/StatItem.jsx
@@ -6,13 +6,13 @@ const StatItem = ({name, value, percentage, className}) => {
     <CopyToClipboard text={value.toString()}>
       <li className={`${className} stat-item-detail container`}>
           <div className="row">
-            <div className="col-md-4" id="stat-name">
+            <div className="col-xs-4" id="stat-name">
               {name}
             </div>
-            <div className="col-md-4" id="stat-value">
+            <div className="col-xs-4" id="stat-value">
               {value}
             </div>
-            <div className="col-md-4" id="stat-percentage">
+            <div className="col-xs-4" id="stat-percentage">
               {percentage}%
             </div>
           </div>
diff --git a/SingularityUI/app/styles/stylus/circular-progress-bar.styl b/SingularityUI/app/styles/stylus/circular-progress-bar.styl
new file mode 100644
index 0000000000..072492e1f7
--- /dev/null
+++ b/SingularityUI/app/styles/stylus/circular-progress-bar.styl
@@ -0,0 +1,16 @@
+.CircularProgressbar .CircularProgressbar-path {
+  stroke: #3e98c7;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.5s ease 0s;
+}
+
+.CircularProgressbar .CircularProgressbar-trail {
+  stroke: #d6d6d6;
+}
+
+.CircularProgressbar .CircularProgressbar-text {
+  fill: #3e98c7;
+  font-size: 20px;
+  dominant-baseline: middle;
+  text-anchor: middle;
+}
\ No newline at end of file
diff --git a/SingularityUI/app/styles/stylus/slaveUsage.styl b/SingularityUI/app/styles/stylus/slaveUsage.styl
index bae9101eb7..6aab32c764 100644
--- a/SingularityUI/app/styles/stylus/slaveUsage.styl
+++ b/SingularityUI/app/styles/stylus/slaveUsage.styl
@@ -1,6 +1,22 @@
 #slave-usage-page
 	margin-left : 25px
 
+// SlaveAggregates
+.avg-cpu
+	width : 150px
+
+.avg-memory
+	width : 150px
+
+.total-slaves #value, .total-tasks #value
+	font-size : 70px
+	text-align : center
+
+.total-slaves #label, .total-tasks #label
+	font-size : 20px
+	text-align : center
+
+// SlaveHealth
 .single-slave-btn
 	padding : 15px 15px
 	border-radius : 0px
@@ -18,6 +34,7 @@
 	background-color : $color-norman
 	border-color : $color-norman-dark
 
+// SlaveHealthMenuItems
 .dropdown-menu
 	border-radius : 0px
 
@@ -42,5 +59,3 @@
 
 .critical-stat
 	color : $color-norman
-
-// $alert-success = #5967bc
diff --git a/SingularityUI/package.json b/SingularityUI/package.json
index 5e3a028a14..e7d8f3718e 100644
--- a/SingularityUI/package.json
+++ b/SingularityUI/package.json
@@ -53,6 +53,7 @@
     "react-typeahead": "git://github.com/HubSpot/react-typeahead.git#hubspot-3",
     "react-waypoint": "^2.0.3",
     "react-copy-to-clipboard": "^4.2.3",
+    "react-circular-progressbar": "^0.1.3",
     "redux": "^3.5.2",
     "redux-form": "^5.3.0",
     "redux-logger": "^2.6.1",
@@ -92,6 +93,7 @@
     "nib": "^1.1.0",
     "node-sass": "^3.8.0",
     "react-copy-to-clipboard": "^4.2.3",
+    "react-circular-progressbar": "^0.1.3",
     "react-hot-loader": "^3.0.0-beta.2",
     "resolve-url-loader": "^1.6.0",
     "sass-loader": "^4.0.0",

From f8bb7aaec79c2d999c267cc5577a50894cd2aa49 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 16 Feb 2017 16:57:15 -0500
Subject: [PATCH 20/42] forgot name change during git magic

---
 SingularityUI/app/router.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/SingularityUI/app/router.jsx b/SingularityUI/app/router.jsx
index b6b521b6a4..10b3320420 100644
--- a/SingularityUI/app/router.jsx
+++ b/SingularityUI/app/router.jsx
@@ -12,7 +12,7 @@ import RequestsPage from './components/requests/RequestsPage';
 import TasksPage from './components/tasks/TasksPage';
 import Racks from './components/machines/Racks';
 import Slaves from './components/machines/Slaves';
-import SlaveUsagePage from './components/machines/SlaveUsagePage';
+import SlaveUsage from './components/machines/SlaveUsage';
 import Webhooks from './components/webhooks/Webhooks';
 import TaskDetail from './components/taskDetail/TaskDetail';
 import TaskSearch from './components/taskSearch/TaskSearch';
@@ -55,7 +55,7 @@ const routes = (
     <Route path="tail/**" component={CustomLogTailerContainer} title="Tailer" />
     <Route path="racks(/:state)" component={Racks} title="Racks" />
     <Route path="slaves(/:state)" component={Slaves} title="Slaves" />
-    <Route path="slave-usage" component={SlaveUsagePage} />
+    <Route path="slave-usage" component={SlaveUsage} />
     <Route path="webhooks" component={Webhooks} title="Webhooks" />
     <Route path="task-search" component={TaskSearch} title="Task Search" />
     <Route path="disasters" component={Disasters} title="Disasters" />

From fe4cfc0c0691e89f611838687e69e45c3628d14e Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 16 Feb 2017 17:11:48 -0500
Subject: [PATCH 21/42] switched to template literals

---
 .../app/components/machines/SlaveHealth.jsx   |  6 ++---
 SingularityUI/app/utils.es6                   | 23 -------------------
 2 files changed, 3 insertions(+), 26 deletions(-)

diff --git a/SingularityUI/app/components/machines/SlaveHealth.jsx b/SingularityUI/app/components/machines/SlaveHealth.jsx
index f8936d1550..2fcdf07ab6 100644
--- a/SingularityUI/app/components/machines/SlaveHealth.jsx
+++ b/SingularityUI/app/components/machines/SlaveHealth.jsx
@@ -10,16 +10,16 @@ const getMaxAvailableResource = (slaveInfo, statName) => {
       try {
         return parseFloat(slaveInfo.attributes.real_cpus) || slaveInfo.resources.cpus;
       } catch (e) {
-        throw Utils.formatUnicorn('Could not find resource (cpus) for slave {host} ({id})', slaveInfo);
+        throw new Error(`Could not find resource (cpus) for slave ${slaveInfo.host} (${slaveInfo.id})`);
       }
     case STAT_NAMES.memoryBytesUsedStat:
       try {
         return parseFloat(slaveInfo.attributes.real_memory_mb) || slaveInfo.resources.mem;
       } catch (e) {
-        throw Utils.formatUnicorn('Could not find resources (memory) for slave {host} ({id})', slaveInfo);
+        throw new Error(`Could not find resource (memory) for slave ${slaveInfo.host} (${slaveInfo.id})`);
       }
     default:
-      throw Utils.formatUnicorn('{0} is an unsupported statistic', statName);
+      throw new Error(`${statName} is an unsupported statistic'`);
   }
 };
 
diff --git a/SingularityUI/app/utils.es6 b/SingularityUI/app/utils.es6
index 0b0a93a90b..82568ae7e9 100644
--- a/SingularityUI/app/utils.es6
+++ b/SingularityUI/app/utils.es6
@@ -425,27 +425,4 @@ const Utils = {
     return array.join('&');
   },
 
-  // printf and dict string formatting based on http://stackoverflow.com/a/18234317/4639232
-  // e.g
-  // formatUnicorn("Classic {0} style formating", "C")
-  // formatUnicorn("The {animal} is big", {'animal' : 'tiger'})
-  formatUnicorn(format) {
-    'use strict';
-    var str = format.toString();
-    if (arguments.length > 1) {
-      var t = typeof arguments[1];
-      var key;
-      var args = ('string' === t || 'number' === t) ?
-        Array.prototype.slice.call(arguments, 1)
-        : arguments[1];
-
-      for (key in args) {
-        str = str.replace(new RegExp('\\{' + key + '\\}', 'gi'), args[key]);
-      }
-    }
-
-    return str;
-  }
-};
-
 export default Utils;

From 566f3247bfcd4aebb528c861bf731efe721e90ae Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Tue, 21 Feb 2017 15:12:05 -0500
Subject: [PATCH 22/42] aggregate percentages

---
 .../components/machines/SlaveAggregates.jsx   | 48 +++++++++++++++----
 .../app/components/machines/SlaveHealth.jsx   | 26 ++--------
 .../machines/SlaveHealthMenuItems.js          |  2 +-
 .../app/components/machines/SlaveUsage.jsx    |  2 +-
 .../app/styles/stylus/slaveUsage.styl         |  2 +-
 SingularityUI/app/utils.es6                   | 27 ++++++++++-
 6 files changed, 72 insertions(+), 35 deletions(-)

diff --git a/SingularityUI/app/components/machines/SlaveAggregates.jsx b/SingularityUI/app/components/machines/SlaveAggregates.jsx
index efa3ee3949..ae4a157134 100644
--- a/SingularityUI/app/components/machines/SlaveAggregates.jsx
+++ b/SingularityUI/app/components/machines/SlaveAggregates.jsx
@@ -1,12 +1,38 @@
 import React, { PropTypes } from 'react';
 import CircularProgressbar from 'react-circular-progressbar';
+import Utils from '../../utils';
+import { STAT_NAMES, HUNDREDTHS_PLACE } from './Constants';
 
-const SlaveAggregates = ({totalSlaves, totalTasks, avgCpu, avgMemory}) => {
+const getAvgSlaveUsage = (slaves, slaveUsages, usageCallback, resourceCallback) => {
+  const totalUsage = slaveUsages.map(usageCallback)
+                                .reduce((acc, val) => acc + parseFloat(val), 0);
+
+  const totalResource = slaves.map(resourceCallback)
+                              .reduce((acc, val) => acc + parseFloat(val), 0);
+
+  return Utils.roundTo((totalUsage / totalResource), HUNDREDTHS_PLACE);
+};
+
+const getAvgCpu = (slaves, slaveUsages) => {
+  return getAvgSlaveUsage(slaves,
+                          slaveUsages,
+                          usage => usage.cpusUsed,
+                          slave => Utils.getMaxAvailableResource(slave, STAT_NAMES.cpusUsedStat));
+};
+
+const getAvgMem = (slaves, slaveUsages) => {
+  return getAvgSlaveUsage(slaves,
+                          slaveUsages,
+                          usage => usage.memoryBytesUsed,
+                          slave => Utils.getMaxAvailableResource(slave, STAT_NAMES.memoryBytesUsedStat) * Math.pow(1024, 2));
+};
+
+const SlaveAggregates = ({slaves, slaveUsages}) => {
   return (
     <div className="slave-aggregates row">
       <div className="total-slaves col-xs-3">
         <div id="value">
-          {totalSlaves}
+          {slaves.length}
         </div>
         <div id="label">
           Total Slaves
@@ -14,27 +40,31 @@ const SlaveAggregates = ({totalSlaves, totalTasks, avgCpu, avgMemory}) => {
       </div>
       <div className="total-tasks col-xs-3">
         <div id="value">
-          {totalTasks}
+          {"todo"}
         </div>
         <div id="label">
           Tasks Running
         </div>
       </div>
       <div className="avg-cpu col-xs-3">
-        <CircularProgressbar percentage={avgCpu} initialAnimation={true} textForPercentage={(pct) => `${pct}%`} />
+        <CircularProgressbar percentage={getAvgCpu(slaves, slaveUsages)} initialAnimation={true} textForPercentage={(pct) => `${pct}%`} />
+        <div id="label">
+          Cpu
+        </div>
       </div>
       <div className="avg-memory col-xs-3">
-        <CircularProgressbar percentage={avgMemory} initialAnimation={true} textForPercentage={(pct) => `${pct}%`} />
+        <CircularProgressbar percentage={getAvgMem(slaves, slaveUsages)} initialAnimation={true} textForPercentage={(pct) => `${pct}%`} />
+        <div id="label">
+          Memory
+        </div>
       </div>
     </div>
   );
 };
 
 SlaveAggregates.propTypes = {
-  totalSlaves : PropTypes.number.isRequired,
-  totalTasks : PropTypes.number.isRequired,
-  avgCpu : PropTypes.number.isRequired,
-  avgMemory : PropTypes.number.isRequired
+  slaves : PropTypes.array,
+  slaveUsages : PropTypes.array
 };
 
 export default SlaveAggregates;
diff --git a/SingularityUI/app/components/machines/SlaveHealth.jsx b/SingularityUI/app/components/machines/SlaveHealth.jsx
index 2fcdf07ab6..5d733c1a51 100644
--- a/SingularityUI/app/components/machines/SlaveHealth.jsx
+++ b/SingularityUI/app/components/machines/SlaveHealth.jsx
@@ -4,32 +4,14 @@ import SlaveHealthMenuItems from './SlaveHealthMenuItems';
 import { Dropdown } from 'react-bootstrap';
 import { SLAVE_STYLES, THRESHOLDS, STAT_NAMES, STAT_STYLES } from './Constants';
 
-const getMaxAvailableResource = (slaveInfo, statName) => {
-  switch (statName) {
-    case STAT_NAMES.cpusUsedStat:
-      try {
-        return parseFloat(slaveInfo.attributes.real_cpus) || slaveInfo.resources.cpus;
-      } catch (e) {
-        throw new Error(`Could not find resource (cpus) for slave ${slaveInfo.host} (${slaveInfo.id})`);
-      }
-    case STAT_NAMES.memoryBytesUsedStat:
-      try {
-        return parseFloat(slaveInfo.attributes.real_memory_mb) || slaveInfo.resources.mem;
-      } catch (e) {
-        throw new Error(`Could not find resource (memory) for slave ${slaveInfo.host} (${slaveInfo.id})`);
-      }
-    default:
-      throw new Error(`${statName} is an unsupported statistic'`);
-  }
-};
 
 const isStatCritical = (slaveInfo, slaveUsage, statName) => {
   switch (statName) {
     case STAT_NAMES.cpusUsedStat:
-      return (slaveUsage.cpusUsed / getMaxAvailableResource(slaveInfo, statName)) > THRESHOLDS.cpusCriticalThreshold;
+      return (slaveUsage.cpusUsed / Utils.getMaxAvailableResource(slaveInfo, statName)) > THRESHOLDS.cpusCriticalThreshold;
     case STAT_NAMES.memoryBytesUsedStat:
       // todo: create util method to convert from mb to bytes
-      return (slaveUsage.memoryBytesUsed / (getMaxAvailableResource(slaveInfo, statName) * Math.pow(1024, 2))) > THRESHOLDS.memoryCriticalThreshold;
+      return (slaveUsage.memoryBytesUsed / (Utils.getMaxAvailableResource(slaveInfo, statName) * Math.pow(1024, 2))) > THRESHOLDS.memoryCriticalThreshold;
     case STAT_NAMES.numTasksStat:
       return slaveUsage.numTasks > THRESHOLDS.numTasksCritical;
     default:
@@ -40,10 +22,10 @@ const isStatCritical = (slaveInfo, slaveUsage, statName) => {
 const isStatWarning = (slaveInfo, slaveUsage, statName) => {
   switch (statName) {
     case STAT_NAMES.cpusUsedStat:
-      return (slaveUsage.cpusUsed / getMaxAvailableResource(slaveInfo, statName)) > THRESHOLDS.cpusWarningThreshold;
+      return (slaveUsage.cpusUsed / Utils.getMaxAvailableResource(slaveInfo, statName)) > THRESHOLDS.cpusWarningThreshold;
     case STAT_NAMES.memoryBytesUsedStat:
       // todo: create util method to convert from mb to bytes
-      return (slaveUsage.memoryBytesUsed / (getMaxAvailableResource(slaveInfo, statName) * Math.pow(1024, 2))) > THRESHOLDS.memoryWarningThreshold;
+      return (slaveUsage.memoryBytesUsed / (Utils.getMaxAvailableResource(slaveInfo, statName) * Math.pow(1024, 2))) > THRESHOLDS.memoryWarningThreshold;
     case STAT_NAMES.numTasksStat:
       return slaveUsage.numTasks > THRESHOLDS.numTasksWarning;
     default:
diff --git a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
index d1f0bb7447..deb80275ae 100644
--- a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
+++ b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
@@ -29,7 +29,7 @@ const humanizeStatValue = (name, value) => {
     case STAT_NAMES.slaveIdStat:
       return Utils.humanizeSlaveHostName(value);
     case STAT_NAMES.cpusUsedStat:
-      return parseFloat(value).toFixed(HUNDREDTHS_PLACE);
+      return Utils.roundTo(value, HUNDREDTHS_PLACE);
     case STAT_NAMES.memoryBytesUsedStat:
       return Utils.humanizeFileSize(value);
     case STAT_NAMES.numTasksStat:
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index c962822ea1..50cc4799ba 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -19,7 +19,7 @@ const SlaveUsage = ({slaves, slaveUsages}) => {
     <div id="slave-usage-page">
       <h1>Slave Usage</h1>
       <div>
-        <SlaveAggregates totalSlaves={20} totalTasks={200} avgCpu={30} avgMemory={40} />
+        <SlaveAggregates slaves={slaves} slaveUsages={slaveUsages} />
       </div>
       <hr />
       <div id="slave-health">
diff --git a/SingularityUI/app/styles/stylus/slaveUsage.styl b/SingularityUI/app/styles/stylus/slaveUsage.styl
index 6aab32c764..0fbaa6fac1 100644
--- a/SingularityUI/app/styles/stylus/slaveUsage.styl
+++ b/SingularityUI/app/styles/stylus/slaveUsage.styl
@@ -12,7 +12,7 @@
 	font-size : 70px
 	text-align : center
 
-.total-slaves #label, .total-tasks #label
+.total-slaves #label, .total-tasks #label, .avg-cpu #label, .avg-memory #label
 	font-size : 20px
 	text-align : center
 
diff --git a/SingularityUI/app/utils.es6 b/SingularityUI/app/utils.es6
index 82568ae7e9..876dbc6771 100644
--- a/SingularityUI/app/utils.es6
+++ b/SingularityUI/app/utils.es6
@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { STAT_NAMES } from 'components/machines/Constants';
 
 const Utils = {
   TERMINAL_TASK_STATES: ['TASK_KILLED', 'TASK_LOST', 'TASK_FAILED', 'TASK_FINISHED', 'TASK_ERROR'],
@@ -173,6 +174,25 @@ const Utils = {
     };
   },
 
+  getMaxAvailableResource(slaveInfo, statName) {
+    switch (statName) {
+      case STAT_NAMES.cpusUsedStat:
+        try {
+          return parseFloat(slaveInfo.attributes.real_cpus || slaveInfo.resources.cpus);
+        } catch (e) {
+          throw new Error(`Could not find resource (cpus) for slave ${slaveInfo.host} (${slaveInfo.id})`);
+        }
+      case STAT_NAMES.memoryBytesUsedStat:
+        try {
+          return parseFloat(slaveInfo.attributes.real_memory_mb || slaveInfo.resources.mem);
+        } catch (e) {
+          throw new Error(`Could not find resource (memory) for slave ${slaveInfo.host} (${slaveInfo.id})`);
+        }
+      default:
+        throw new Error(`${statName} is an unsupported statistic'`);
+    }
+  },
+
   deepClone(objectToClone) {
     return $.extend(true, {}, objectToClone);
   },
@@ -205,6 +225,10 @@ const Utils = {
     return filename.replace(new RegExp(finalRegex), '');
   },
 
+  roundTo(value, place) {
+    return +(Math.round(parseFloat(value) + 'e+' + place) + 'e-' + place);
+  },
+
   millisecondsToSecondsRoundToTenth(millis) {
     return Math.round(millis / 100) / 10;
   },
@@ -423,6 +447,7 @@ const Utils = {
       }
     }
     return array.join('&');
-  },
+  }
+};
 
 export default Utils;

From 48a5ce681ccafebc75d226433d378151e969194e Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Tue, 21 Feb 2017 16:31:36 -0500
Subject: [PATCH 23/42] refactoring and removed task numb check

---
 .../components/machines/SlaveAggregates.jsx   | 18 +++++++--------
 .../app/components/machines/SlaveHealth.jsx   | 11 +++------
 .../machines/SlaveHealthMenuItems.js          | 23 +++++++++++++++----
 .../app/components/machines/StatItem.jsx      | 12 ++++++----
 .../app/styles/stylus/slaveUsage.styl         | 20 +++++++++++-----
 5 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/SingularityUI/app/components/machines/SlaveAggregates.jsx b/SingularityUI/app/components/machines/SlaveAggregates.jsx
index ae4a157134..5518d5ac92 100644
--- a/SingularityUI/app/components/machines/SlaveAggregates.jsx
+++ b/SingularityUI/app/components/machines/SlaveAggregates.jsx
@@ -3,28 +3,28 @@ import CircularProgressbar from 'react-circular-progressbar';
 import Utils from '../../utils';
 import { STAT_NAMES, HUNDREDTHS_PLACE } from './Constants';
 
-const getAvgSlaveUsage = (slaves, slaveUsages, usageCallback, resourceCallback) => {
+const getPctSlaveUsage = (slaves, slaveUsages, usageCallback, resourceCallback) => {
   const totalUsage = slaveUsages.map(usageCallback)
                                 .reduce((acc, val) => acc + parseFloat(val), 0);
 
   const totalResource = slaves.map(resourceCallback)
                               .reduce((acc, val) => acc + parseFloat(val), 0);
 
-  return Utils.roundTo((totalUsage / totalResource), HUNDREDTHS_PLACE);
+  return Utils.roundTo((totalUsage / totalResource) * 100, HUNDREDTHS_PLACE);
 };
 
-const getAvgCpu = (slaves, slaveUsages) => {
-  return getAvgSlaveUsage(slaves,
+const getCpuUtilizationPct = (slaves, slaveUsages) => {
+  return getPctSlaveUsage(slaves,
                           slaveUsages,
                           usage => usage.cpusUsed,
                           slave => Utils.getMaxAvailableResource(slave, STAT_NAMES.cpusUsedStat));
 };
 
-const getAvgMem = (slaves, slaveUsages) => {
-  return getAvgSlaveUsage(slaves,
+const getMemUtilizationPct = (slaves, slaveUsages) => {
+  return getPctSlaveUsage(slaves,
                           slaveUsages,
                           usage => usage.memoryBytesUsed,
-                          slave => Utils.getMaxAvailableResource(slave, STAT_NAMES.memoryBytesUsedStat) * Math.pow(1024, 2));
+                          slave => Utils.getMaxAvailableResource(slave, STAT_NAMES.memoryBytesUsedStat));
 };
 
 const SlaveAggregates = ({slaves, slaveUsages}) => {
@@ -47,13 +47,13 @@ const SlaveAggregates = ({slaves, slaveUsages}) => {
         </div>
       </div>
       <div className="avg-cpu col-xs-3">
-        <CircularProgressbar percentage={getAvgCpu(slaves, slaveUsages)} initialAnimation={true} textForPercentage={(pct) => `${pct}%`} />
+        <CircularProgressbar percentage={getCpuUtilizationPct(slaves, slaveUsages)} initialAnimation={true} textForPercentage={(pct) => `${pct}%`} />
         <div id="label">
           Cpu
         </div>
       </div>
       <div className="avg-memory col-xs-3">
-        <CircularProgressbar percentage={getAvgMem(slaves, slaveUsages)} initialAnimation={true} textForPercentage={(pct) => `${pct}%`} />
+        <CircularProgressbar percentage={getMemUtilizationPct(slaves, slaveUsages)} initialAnimation={true} textForPercentage={(pct) => `${pct}%`} />
         <div id="label">
           Memory
         </div>
diff --git a/SingularityUI/app/components/machines/SlaveHealth.jsx b/SingularityUI/app/components/machines/SlaveHealth.jsx
index 5d733c1a51..b336322073 100644
--- a/SingularityUI/app/components/machines/SlaveHealth.jsx
+++ b/SingularityUI/app/components/machines/SlaveHealth.jsx
@@ -10,10 +10,7 @@ const isStatCritical = (slaveInfo, slaveUsage, statName) => {
     case STAT_NAMES.cpusUsedStat:
       return (slaveUsage.cpusUsed / Utils.getMaxAvailableResource(slaveInfo, statName)) > THRESHOLDS.cpusCriticalThreshold;
     case STAT_NAMES.memoryBytesUsedStat:
-      // todo: create util method to convert from mb to bytes
-      return (slaveUsage.memoryBytesUsed / (Utils.getMaxAvailableResource(slaveInfo, statName) * Math.pow(1024, 2))) > THRESHOLDS.memoryCriticalThreshold;
-    case STAT_NAMES.numTasksStat:
-      return slaveUsage.numTasks > THRESHOLDS.numTasksCritical;
+      return (slaveUsage.memoryBytesUsed / (Utils.getMaxAvailableResource(slaveInfo, statName))) > THRESHOLDS.memoryCriticalThreshold;
     default:
       return false;
   }
@@ -24,10 +21,7 @@ const isStatWarning = (slaveInfo, slaveUsage, statName) => {
     case STAT_NAMES.cpusUsedStat:
       return (slaveUsage.cpusUsed / Utils.getMaxAvailableResource(slaveInfo, statName)) > THRESHOLDS.cpusWarningThreshold;
     case STAT_NAMES.memoryBytesUsedStat:
-      // todo: create util method to convert from mb to bytes
-      return (slaveUsage.memoryBytesUsed / (Utils.getMaxAvailableResource(slaveInfo, statName) * Math.pow(1024, 2))) > THRESHOLDS.memoryWarningThreshold;
-    case STAT_NAMES.numTasksStat:
-      return slaveUsage.numTasks > THRESHOLDS.numTasksWarning;
+      return (slaveUsage.memoryBytesUsed / (Utils.getMaxAvailableResource(slaveInfo, statName))) > THRESHOLDS.memoryWarningThreshold;
     default:
       return false;
   }
@@ -50,6 +44,7 @@ const SlaveHealth = ({slaveInfo, slaveUsage}) => {
     const newStat = {
       name : stat,
       value : (stat === STAT_NAMES.slaveIdStat ? slaveInfo.host : val),
+      maybeTotalResource : Utils.isResourceStat(stat) ? Utils.getMaxAvailableResource(slaveInfo, stat) : '',
       style : STAT_STYLES.ok
     };
 
diff --git a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
index deb80275ae..13ba7a838a 100644
--- a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
+++ b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
@@ -24,14 +24,14 @@ const humanizeStatName = (name) => {
   }
 };
 
-const humanizeStatValue = (name, value) => {
+const humanizeStatValue = (name, value, maybeTotalResource) => {
   switch (name) {
     case STAT_NAMES.slaveIdStat:
       return Utils.humanizeSlaveHostName(value);
     case STAT_NAMES.cpusUsedStat:
-      return Utils.roundTo(value, HUNDREDTHS_PLACE);
+      return `${Utils.roundTo(value, HUNDREDTHS_PLACE)} / ${maybeTotalResource}`;
     case STAT_NAMES.memoryBytesUsedStat:
-      return Utils.humanizeFileSize(value);
+      return `${Utils.humanizeFileSize(value)} / ${Utils.humanizeFileSize(maybeTotalResource)}`;
     case STAT_NAMES.numTasksStat:
       return value;
     case STAT_NAMES.timestampStat:
@@ -41,9 +41,18 @@ const humanizeStatValue = (name, value) => {
   }
 };
 
+const humanizeStatPct = (name, value, maybeTotalResource) => {
+  if (Utils.isResourceStat(name)) {
+    return Utils.roundTo((value / maybeTotalResource) * 100, HUNDREDTHS_PLACE);
+  }
+
+  return null;
+};
+
+
 const SlaveHealthMenuItems = ({stats}) => {
-  const renderSlaveStats = _.map(stats.sort(compareStats), ({name, value, style}) => {
-    return <StatItem key={name} name={humanizeStatName(name)} value={humanizeStatValue(name, value)} className={style} percentage={50} />;
+  const renderSlaveStats = _.map(stats.sort(compareStats), ({name, value, maybeTotalResource, style}) => {
+    return <StatItem key={name} name={humanizeStatName(name)} value={humanizeStatValue(name, value, maybeTotalResource)} className={style} percentage={humanizeStatPct(name, value, maybeTotalResource)} />;
   });
 
   return (
@@ -61,6 +70,10 @@ SlaveHealthMenuItems.propTypes = {
         PropTypes.string,
         PropTypes.number
       ]).isRequired,
+      maybeTotalResource : PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+      ]).isRequired,
       style : PropTypes.string.isRequired
     })
   )
diff --git a/SingularityUI/app/components/machines/StatItem.jsx b/SingularityUI/app/components/machines/StatItem.jsx
index 698ec4cc3a..4d9748e799 100644
--- a/SingularityUI/app/components/machines/StatItem.jsx
+++ b/SingularityUI/app/components/machines/StatItem.jsx
@@ -6,15 +6,17 @@ const StatItem = ({name, value, percentage, className}) => {
     <CopyToClipboard text={value.toString()}>
       <li className={`${className} stat-item-detail container`}>
           <div className="row">
-            <div className="col-xs-4" id="stat-name">
+            <div className="col-xs-3" id="stat-name">
               {name}
             </div>
-            <div className="col-xs-4" id="stat-value">
+            <div className="col-xs-6" id="stat-value">
               {value}
             </div>
-            <div className="col-xs-4" id="stat-percentage">
-              {percentage}%
-            </div>
+            {percentage &&
+              <div className="col-xs-3" id="stat-percentage">
+                ({percentage}%)
+              </div>
+            }
           </div>
       </li>
     </CopyToClipboard>
diff --git a/SingularityUI/app/styles/stylus/slaveUsage.styl b/SingularityUI/app/styles/stylus/slaveUsage.styl
index 0fbaa6fac1..27ae96103a 100644
--- a/SingularityUI/app/styles/stylus/slaveUsage.styl
+++ b/SingularityUI/app/styles/stylus/slaveUsage.styl
@@ -21,16 +21,20 @@
 	padding : 15px 15px
 	border-radius : 0px
 	display : inline-block
+	opacity : .8
 
-.ok-slave
+.single-slave-btn:hover
+	opacity : 1
+
+.ok-slave, .ok-slave:hover
 	background-color : $color-oz
 	border-color : $color-oz-dark
 
-.warning-slave
+.warning-slave, .warning-slave:hover
 	background-color : $color-marigold
 	border-color : $color-marigold-dark
 
-.critical-slave
+.critical-slave, .critical-slave:hover
 	background-color : $color-norman
 	border-color : $color-norman-dark
 
@@ -40,13 +44,17 @@
 
 .stat-item-detail
 	white-space : nowrap
-	padding-left : 20px
+	padding-left : 30px
 	padding-right : 5px
-	width : 300px
+	width : 350px
+
+.stat-item-detail .row
+	margin-bottom : .5em
 
 #stat-name
+	color : #666
+	font-size : 13px
 	display : inline
-	text-align : right
 
 #stat-value
 	display : inline

From bc5862c023c260c9ab5ceae6b869e57675dffa9e Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Tue, 21 Feb 2017 17:21:17 -0500
Subject: [PATCH 24/42] actual timestamp added

---
 .../app/components/machines/SlaveHealthMenuItems.js        | 7 +++++++
 SingularityUI/app/styles/stylus/slaveUsage.styl            | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
index 13ba7a838a..6b606f547e 100644
--- a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
+++ b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
@@ -58,6 +58,13 @@ const SlaveHealthMenuItems = ({stats}) => {
   return (
     <div id="slave-stats">
       {renderSlaveStats}
+      <li className="timestamp-stat">
+        <div className="row">
+          <div className="col-xs-12">
+            Last updated {Utils.timestampFromNow(stats.find((stat) => stat.name === STAT_NAMES.timestampStat).value)}
+          </div>
+        </div>
+      </li>
     </div>
   );
 };
diff --git a/SingularityUI/app/styles/stylus/slaveUsage.styl b/SingularityUI/app/styles/stylus/slaveUsage.styl
index 27ae96103a..05a85b548d 100644
--- a/SingularityUI/app/styles/stylus/slaveUsage.styl
+++ b/SingularityUI/app/styles/stylus/slaveUsage.styl
@@ -48,6 +48,13 @@
 	padding-right : 5px
 	width : 350px
 
+.timestamp-stat
+	color : #666
+	font-size : 13px
+	padding-right : 5px
+	text-align : right
+
+
 .stat-item-detail .row
 	margin-bottom : .5em
 

From 0db2b17aebb8361bdaca53fcf7e03ccdf3c92862 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Tue, 21 Feb 2017 17:47:33 -0500
Subject: [PATCH 25/42] get active tasks count

---
 .../app/components/machines/SlaveAggregates.jsx |  7 ++++---
 .../components/machines/SlaveHealthMenuItems.js |  2 +-
 .../app/components/machines/SlaveUsage.jsx      | 17 +++++++++++------
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/SingularityUI/app/components/machines/SlaveAggregates.jsx b/SingularityUI/app/components/machines/SlaveAggregates.jsx
index 5518d5ac92..42720aa396 100644
--- a/SingularityUI/app/components/machines/SlaveAggregates.jsx
+++ b/SingularityUI/app/components/machines/SlaveAggregates.jsx
@@ -27,7 +27,7 @@ const getMemUtilizationPct = (slaves, slaveUsages) => {
                           slave => Utils.getMaxAvailableResource(slave, STAT_NAMES.memoryBytesUsedStat));
 };
 
-const SlaveAggregates = ({slaves, slaveUsages}) => {
+const SlaveAggregates = ({slaves, slaveUsages, activeTasks}) => {
   return (
     <div className="slave-aggregates row">
       <div className="total-slaves col-xs-3">
@@ -40,7 +40,7 @@ const SlaveAggregates = ({slaves, slaveUsages}) => {
       </div>
       <div className="total-tasks col-xs-3">
         <div id="value">
-          {"todo"}
+          {activeTasks}
         </div>
         <div id="label">
           Tasks Running
@@ -64,7 +64,8 @@ const SlaveAggregates = ({slaves, slaveUsages}) => {
 
 SlaveAggregates.propTypes = {
   slaves : PropTypes.array,
-  slaveUsages : PropTypes.array
+  slaveUsages : PropTypes.array,
+  activeTasks : PropTypes.number.isRequired
 };
 
 export default SlaveAggregates;
diff --git a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
index 6b606f547e..fb0019d22c 100644
--- a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
+++ b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
@@ -33,7 +33,7 @@ const humanizeStatValue = (name, value, maybeTotalResource) => {
     case STAT_NAMES.memoryBytesUsedStat:
       return `${Utils.humanizeFileSize(value)} / ${Utils.humanizeFileSize(maybeTotalResource)}`;
     case STAT_NAMES.numTasksStat:
-      return value;
+      return value.toString();
     case STAT_NAMES.timestampStat:
       return '';
     default:
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 50cc4799ba..1d0bd4ebfe 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import rootComponent from '../../rootComponent';
 import { FetchSlaveUsages, FetchSlaves } from '../../actions/api/slaves';
+import { FetchSingularityStatus } from '../../actions/api/state';
 import SlaveAggregates from './SlaveAggregates';
 import SlaveHealth from './SlaveHealth';
 
@@ -9,7 +10,7 @@ const getSlaveInfo = (slaves, slaveUsage) => {
   return _.findWhere(slaves, {'id' : slaveUsage.slaveId});
 };
 
-const SlaveUsage = ({slaves, slaveUsages}) => {
+const SlaveUsage = ({slaves, slaveUsages, activeTasks}) => {
   const slaveHealthData = slaveUsages.map((slaveUsage, index) => {
     const slaveInfo = getSlaveInfo(slaves, slaveUsage);
     return <SlaveHealth key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} />;
@@ -19,7 +20,7 @@ const SlaveUsage = ({slaves, slaveUsages}) => {
     <div id="slave-usage-page">
       <h1>Slave Usage</h1>
       <div>
-        <SlaveAggregates slaves={slaves} slaveUsages={slaveUsages} />
+        <SlaveAggregates slaves={slaves} slaveUsages={slaveUsages} activeTasks={activeTasks} />
       </div>
       <hr />
       <div id="slave-health">
@@ -32,27 +33,31 @@ const SlaveUsage = ({slaves, slaveUsages}) => {
 
 SlaveUsage.propTypes = {
   slaveUsages : PropTypes.arrayOf(PropTypes.object),
-  slaves : PropTypes.arrayOf(PropTypes.object)
+  slaves : PropTypes.arrayOf(PropTypes.object),
+  activeTasks : PropTypes.number
 };
 
 function mapStateToProps(state) {
   return {
     slaveUsages : state.api.slaveUsages.data,
-    slaves : state.api.slaves.data
+    slaves : state.api.slaves.data,
+    activeTasks : state.api.status.data.activeTasks
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
     fetchSlaves : () => dispatch(FetchSlaves.trigger()),
-    fetchSlaveUsages : () => dispatch(FetchSlaveUsages.trigger())
+    fetchSlaveUsages : () => dispatch(FetchSlaveUsages.trigger()),
+    fetchSingularityStatus : () => dispatch(FetchSingularityStatus.trigger())
   };
 }
 
 const refresh = () => (dispatch) =>
   Promise.all([
     dispatch(FetchSlaves.trigger()),
-    dispatch(FetchSlaveUsages.trigger())
+    dispatch(FetchSlaveUsages.trigger()),
+    dispatch(FetchSingularityStatus.trigger())
   ]);
 
 const initialize = () => (dispatch) =>

From 53d2f3e66cd1a90849478827455b327991a43630 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Wed, 22 Feb 2017 11:18:33 -0500
Subject: [PATCH 26/42] move thresholds to config

---
 SingularityUI/app/assets/index.mustache               |  5 +++++
 SingularityUI/app/components/machines/Constants.jsx   |  9 ---------
 SingularityUI/app/components/machines/SlaveHealth.jsx | 10 +++++-----
 SingularityUI/app/components/machines/SlaveUsage.jsx  |  6 +-----
 SingularityUI/app/utils.es6                           |  2 +-
 5 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/SingularityUI/app/assets/index.mustache b/SingularityUI/app/assets/index.mustache
index 6b9b7e2b2d..7e882d3bca 100644
--- a/SingularityUI/app/assets/index.mustache
+++ b/SingularityUI/app/assets/index.mustache
@@ -42,6 +42,11 @@
             slaveHttpsPort: {{{slaveHttpsPort}}},
             {{/slaveHttpsPort}}
             shellCommands: {{{shellCommands}}},
+            shortenSlaveUsageHostname : {{{shortenSlaveUsageHostname}}},
+            slaveCpusWarningThreshold : {{{slaveCpusWarningThreshold}}},
+            slaveCpusCriticalThreshold : {{{slaveCpusCriticalThreshold}}},
+            slaveMemoryWarningThreshold : {{{slaveMemoryWarningThreshold}}},
+            slaveMemoryCriticalThreshold : {{{slaveMemoryCriticalThreshold}}},
             redirectOnUnauthorizedUrl: "{{{redirectOnUnauthorizedUrl}}}",
             globalRefreshInterval: 60000
         };
diff --git a/SingularityUI/app/components/machines/Constants.jsx b/SingularityUI/app/components/machines/Constants.jsx
index f1dc54f480..a3751b6cfd 100644
--- a/SingularityUI/app/components/machines/Constants.jsx
+++ b/SingularityUI/app/components/machines/Constants.jsx
@@ -6,15 +6,6 @@ export const SLAVE_STYLES = {
   critical : 'critical-slave'
 };
 
-export const THRESHOLDS = {
-  cpusWarningThreshold : 0.80,
-  cpusCriticalThreshold : 0.90,
-  memoryWarningThreshold : 0.80,
-  memoryCriticalThreshold : 0.90,
-  numTasksWarning : 100,
-  numTasksCritical : 120
-};
-
 export const STAT_NAMES = {
   cpusUsedStat : 'cpusUsed',
   memoryBytesUsedStat : 'memoryBytesUsed',
diff --git a/SingularityUI/app/components/machines/SlaveHealth.jsx b/SingularityUI/app/components/machines/SlaveHealth.jsx
index b336322073..3e081f6ea4 100644
--- a/SingularityUI/app/components/machines/SlaveHealth.jsx
+++ b/SingularityUI/app/components/machines/SlaveHealth.jsx
@@ -2,15 +2,15 @@ import React, { PropTypes } from 'react';
 import Utils from '../../utils';
 import SlaveHealthMenuItems from './SlaveHealthMenuItems';
 import { Dropdown } from 'react-bootstrap';
-import { SLAVE_STYLES, THRESHOLDS, STAT_NAMES, STAT_STYLES } from './Constants';
+import { SLAVE_STYLES, STAT_NAMES, STAT_STYLES } from './Constants';
 
 
 const isStatCritical = (slaveInfo, slaveUsage, statName) => {
   switch (statName) {
     case STAT_NAMES.cpusUsedStat:
-      return (slaveUsage.cpusUsed / Utils.getMaxAvailableResource(slaveInfo, statName)) > THRESHOLDS.cpusCriticalThreshold;
+      return (slaveUsage.cpusUsed / Utils.getMaxAvailableResource(slaveInfo, statName)) > config.slaveCpusCriticalThreshold;
     case STAT_NAMES.memoryBytesUsedStat:
-      return (slaveUsage.memoryBytesUsed / (Utils.getMaxAvailableResource(slaveInfo, statName))) > THRESHOLDS.memoryCriticalThreshold;
+      return (slaveUsage.memoryBytesUsed / (Utils.getMaxAvailableResource(slaveInfo, statName))) > config.slaveMemoryCriticalThreshold;
     default:
       return false;
   }
@@ -19,9 +19,9 @@ const isStatCritical = (slaveInfo, slaveUsage, statName) => {
 const isStatWarning = (slaveInfo, slaveUsage, statName) => {
   switch (statName) {
     case STAT_NAMES.cpusUsedStat:
-      return (slaveUsage.cpusUsed / Utils.getMaxAvailableResource(slaveInfo, statName)) > THRESHOLDS.cpusWarningThreshold;
+      return (slaveUsage.cpusUsed / Utils.getMaxAvailableResource(slaveInfo, statName)) > config.slaveCpusWarningThreshold;
     case STAT_NAMES.memoryBytesUsedStat:
-      return (slaveUsage.memoryBytesUsed / (Utils.getMaxAvailableResource(slaveInfo, statName))) > THRESHOLDS.memoryWarningThreshold;
+      return (slaveUsage.memoryBytesUsed / (Utils.getMaxAvailableResource(slaveInfo, statName))) > config.slaveMemoryWarningThreshold;
     default:
       return false;
   }
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 1d0bd4ebfe..b4fa6f40f3 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -60,8 +60,4 @@ const refresh = () => (dispatch) =>
     dispatch(FetchSingularityStatus.trigger())
   ]);
 
-const initialize = () => (dispatch) =>
-  Promise.all([]).then(() => dispatch(refresh()));
-
-
-export default connect(mapStateToProps, mapDispatchToProps)(rootComponent(SlaveUsage, refresh, true, true, initialize));
+export default connect(mapStateToProps, mapDispatchToProps)(rootComponent(SlaveUsage, refresh, true, true));
diff --git a/SingularityUI/app/utils.es6 b/SingularityUI/app/utils.es6
index 876dbc6771..8f0c16111a 100644
--- a/SingularityUI/app/utils.es6
+++ b/SingularityUI/app/utils.es6
@@ -47,7 +47,7 @@ const Utils = {
   },
 
   humanizeSlaveHostName(longHostName) {
-    return longHostName.split('.')[0];
+    return (config.shortenSlaveUsageHostname ? longHostName.split('.')[0] : longHostName);
   },
 
   timestampFromNow(millis) {

From 6a3c9b63fe922bbec3b5978c4156e4d0ddf4b7af Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Wed, 22 Feb 2017 13:06:01 -0500
Subject: [PATCH 27/42] add thresholds to config

---
 .../singularity/config/UIConfiguration.java   | 46 +++++++++++++++++++
 .../hubspot/singularity/views/IndexView.java  | 12 +++++
 SingularityUI/gulpfile.js                     |  5 ++
 3 files changed, 63 insertions(+)

diff --git a/SingularityService/src/main/java/com/hubspot/singularity/config/UIConfiguration.java b/SingularityService/src/main/java/com/hubspot/singularity/config/UIConfiguration.java
index 28d430f7c5..4d9d5676dd 100644
--- a/SingularityService/src/main/java/com/hubspot/singularity/config/UIConfiguration.java
+++ b/SingularityService/src/main/java/com/hubspot/singularity/config/UIConfiguration.java
@@ -66,6 +66,12 @@ public static RootUrlMode parse(String value) {
   private boolean hideNewDeployButton = false;
   private boolean hideNewRequestButton = false;
 
+  private boolean shortenSlaveUsageHostname = false;
+  private double slaveCpusWarningThreshold = 0.80;
+  private double slaveCpusCriticalThreshold = 0.90;
+  private double slaveMemoryWarningThreshold = 0.80;
+  private double slaveMemoryCriticalThreshold = 0.90;
+
   /**
    * If true, the root of the server (http://.../singularity/) will open the UI. Otherwise,
    * the UI URI (http://.../singularity/ui/) must be used.
@@ -109,6 +115,46 @@ public void setHideNewRequestButton(boolean hideNewRequestButton) {
     this.hideNewRequestButton = hideNewRequestButton;
   }
 
+  public boolean isShortenSlaveUsageHostname() {
+    return shortenSlaveUsageHostname;
+  }
+
+  public void setShortenSlaveUsageHostname(boolean shortenSlaveUsageHostname) {
+    this.shortenSlaveUsageHostname = shortenSlaveUsageHostname;
+  }
+
+  public double getSlaveCpusWarningThreshold() {
+    return slaveCpusWarningThreshold;
+  }
+
+  public void setSlaveCpusWarningThreshold(double slaveCpusWarningThreshold) {
+    this.slaveCpusWarningThreshold = slaveCpusWarningThreshold;
+  }
+
+  public double getSlaveCpusCriticalThreshold() {
+    return slaveCpusCriticalThreshold;
+  }
+
+  public void setSlaveCpusCriticalThreshold(double slaveCpusCriticalThreshold) {
+    this.slaveCpusCriticalThreshold = slaveCpusCriticalThreshold;
+  }
+
+  public double getSlaveMemoryWarningThreshold() {
+    return slaveMemoryWarningThreshold;
+  }
+
+  public void setSlaveMemoryWarningThreshold(double slaveMemoryWarningThreshold) {
+    this.slaveMemoryWarningThreshold = slaveMemoryWarningThreshold;
+  }
+
+  public double getSlaveMemoryCriticalThreshold() {
+    return slaveMemoryCriticalThreshold;
+  }
+
+  public void setSlaveMemoryCriticalThreshold(double slaveMemoryCriticalThreshold) {
+    this.slaveMemoryCriticalThreshold = slaveMemoryCriticalThreshold;
+  }
+
   public String getTitle() {
     return title;
   }
diff --git a/SingularityService/src/main/java/com/hubspot/singularity/views/IndexView.java b/SingularityService/src/main/java/com/hubspot/singularity/views/IndexView.java
index 3a1ee964ba..6d19ad3895 100644
--- a/SingularityService/src/main/java/com/hubspot/singularity/views/IndexView.java
+++ b/SingularityService/src/main/java/com/hubspot/singularity/views/IndexView.java
@@ -50,6 +50,12 @@ public class IndexView extends View {
 
   private final String shellCommands;
 
+  private final boolean shortenSlaveUsageHostname;
+  private final double slaveCpusWarningThreshold;
+  private final double slaveCpusCriticalThreshold;
+  private final double slaveMemoryWarningThreshold;
+  private final double slaveMemoryCriticalThreshold;
+
   private final String timestampFormat;
 
   private final boolean showTaskDiskResource;
@@ -112,6 +118,12 @@ public IndexView(String singularityUriBase, String appRoot, SingularityConfigura
       throw Throwables.propagate(e);
     }
 
+    this.shortenSlaveUsageHostname = configuration.getUiConfiguration().isShortenSlaveUsageHostname();
+    this.slaveCpusWarningThreshold = configuration.getUiConfiguration().getSlaveCpusWarningThreshold();
+    this.slaveCpusCriticalThreshold = configuration.getUiConfiguration().getSlaveCpusCriticalThreshold();
+    this.slaveMemoryWarningThreshold = configuration.getUiConfiguration().getSlaveMemoryWarningThreshold();
+    this.slaveMemoryCriticalThreshold = configuration.getUiConfiguration().getSlaveMemoryCriticalThreshold();
+
     this.timestampFormat = configuration.getUiConfiguration().getTimestampFormat();
 
     this.timestampWithSecondsFormat = configuration.getUiConfiguration().getTimestampWithSecondsFormat();
diff --git a/SingularityUI/gulpfile.js b/SingularityUI/gulpfile.js
index e0be37af1d..5075b9cc55 100644
--- a/SingularityUI/gulpfile.js
+++ b/SingularityUI/gulpfile.js
@@ -43,6 +43,11 @@ var templateData = {
   taskS3LogOmitPrefix: process.env.SINGULARITY_TASK_S3_LOG_OMIT_PREFIX || '',
   warnIfScheduledJobIsRunningPastNextRunPct: process.env.SINGULARITY_WARN_IF_SCHEDULED_JOB_IS_RUNNING_PAST_NEXT_RUN_PCT || 200,
   shellCommands: process.env.SINGULARITY_SHELL_COMMANDS || '[]',
+  shortenSlaveUsageHostname: process.env.SINGULARITY_SHORTEN_SLAVE_USAGE_HOSTNAME || 'false',
+  slaveCpusWarningThreshold: process.env.SINGULARITY_SLAVE_CPUS_WARNING_THRESHOLD || 0.80,
+  slaveCpusCriticalThreshold: process.env.SINGULARITY_SLAVE_CPUS_CRITICAL_THRESHOLD || 0.90,
+  slaveMemoryWarningThreshold: process.env.SINGULARITY_SLAVE_MEMORY_WARNING_THRESHOLD || 0.80,
+  slaveMemoryCriticalThreshold: process.env.SINGULARITY_SLAVE_MEMORY_CRITICAL_THRESHOLD || 0.90,
   timestampFormat: process.env.SINGULARITY_TIMESTAMP_FORMAT || 'lll',
   timestampWithSecondsFormat: process.env.SINGULARITY_TIMESTAMP_WITH_SECONDS_FORMAT || 'lll:ss',
   redirectOnUnauthorizedUrl: process.env.SINGULARITY_REDIRECT_ON_UNAUTHORIZED_URL || '',

From 83286ae147a8938be43b7f9026cf7fa4c8c2527e Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Wed, 22 Feb 2017 13:31:32 -0500
Subject: [PATCH 28/42] ref error

---
 SingularityUI/app/utils.es6 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/SingularityUI/app/utils.es6 b/SingularityUI/app/utils.es6
index 8f0c16111a..b0b67cd72f 100644
--- a/SingularityUI/app/utils.es6
+++ b/SingularityUI/app/utils.es6
@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { STAT_NAMES } from 'components/machines/Constants';
+import { STAT_NAMES } from './components/machines/Constants';
 
 const Utils = {
   TERMINAL_TASK_STATES: ['TASK_KILLED', 'TASK_LOST', 'TASK_FAILED', 'TASK_FINISHED', 'TASK_ERROR'],

From c903b6da4a45f95e134f855a656a1dfddf03cbbc Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 23 Feb 2017 10:44:31 -0500
Subject: [PATCH 29/42] only check active slaves

---
 SingularityUI/app/components/machines/SlaveUsage.jsx | 10 +++++++---
 SingularityUI/app/utils.es6                          |  8 ++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index b4fa6f40f3..1b05eb2aff 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import rootComponent from '../../rootComponent';
 import { FetchSlaveUsages, FetchSlaves } from '../../actions/api/slaves';
 import { FetchSingularityStatus } from '../../actions/api/state';
+import Utils from '../../utils';
 import SlaveAggregates from './SlaveAggregates';
 import SlaveHealth from './SlaveHealth';
 
@@ -11,8 +12,11 @@ const getSlaveInfo = (slaves, slaveUsage) => {
 };
 
 const SlaveUsage = ({slaves, slaveUsages, activeTasks}) => {
-  const slaveHealthData = slaveUsages.map((slaveUsage, index) => {
-    const slaveInfo = getSlaveInfo(slaves, slaveUsage);
+  const activeSlaves = slaves.filter(Utils.isActiveSlave);
+  const activeSlaveUsages = slaveUsages.filter((slaveUsage) => getSlaveInfo(activeSlaves, slaveUsage));
+
+  const slaveHealthData = activeSlaveUsages.map((slaveUsage, index) => {
+    const slaveInfo = getSlaveInfo(activeSlaves, slaveUsage);
     return <SlaveHealth key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} />;
   });
 
@@ -20,7 +24,7 @@ const SlaveUsage = ({slaves, slaveUsages, activeTasks}) => {
     <div id="slave-usage-page">
       <h1>Slave Usage</h1>
       <div>
-        <SlaveAggregates slaves={slaves} slaveUsages={slaveUsages} activeTasks={activeTasks} />
+        <SlaveAggregates slaves={activeSlaves} slaveUsages={activeSlaveUsages} activeTasks={activeTasks} />
       </div>
       <hr />
       <div id="slave-health">
diff --git a/SingularityUI/app/utils.es6 b/SingularityUI/app/utils.es6
index b0b67cd72f..629e8372ef 100644
--- a/SingularityUI/app/utils.es6
+++ b/SingularityUI/app/utils.es6
@@ -193,6 +193,10 @@ const Utils = {
     }
   },
 
+  isResourceStat(stat) {
+    return stat === STAT_NAMES.cpusUsedStat || stat === STAT_NAMES.memoryBytesUsedStat;
+  },
+
   deepClone(objectToClone) {
     return $.extend(true, {}, objectToClone);
   },
@@ -415,6 +419,10 @@ const Utils = {
     }
   },
 
+  isActiveSlave(slaveInfo) {
+    return !Utils.isIn(slaveInfo.currentState.state, ['DEAD', 'MISSING_ON_STARTUP']);
+  },
+
   enums: {
     SingularityRequestTypes: ['SERVICE', 'WORKER', 'SCHEDULED', 'ON_DEMAND', 'RUN_ONCE'],
     SingularityEmailDestination: ['OWNERS', 'ACTION_TAKER', 'ADMINS'],

From 09cc66f2509239238576c5ce1dde0d304f311ba5 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 23 Feb 2017 10:49:14 -0500
Subject: [PATCH 30/42] slave usage reports are only for active slaves

---
 SingularityUI/app/components/machines/SlaveUsage.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 1b05eb2aff..43ebf98597 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -13,9 +13,8 @@ const getSlaveInfo = (slaves, slaveUsage) => {
 
 const SlaveUsage = ({slaves, slaveUsages, activeTasks}) => {
   const activeSlaves = slaves.filter(Utils.isActiveSlave);
-  const activeSlaveUsages = slaveUsages.filter((slaveUsage) => getSlaveInfo(activeSlaves, slaveUsage));
 
-  const slaveHealthData = activeSlaveUsages.map((slaveUsage, index) => {
+  const slaveHealthData = slaveUsages.map((slaveUsage, index) => {
     const slaveInfo = getSlaveInfo(activeSlaves, slaveUsage);
     return <SlaveHealth key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} />;
   });
@@ -24,7 +23,7 @@ const SlaveUsage = ({slaves, slaveUsages, activeTasks}) => {
     <div id="slave-usage-page">
       <h1>Slave Usage</h1>
       <div>
-        <SlaveAggregates slaves={activeSlaves} slaveUsages={activeSlaveUsages} activeTasks={activeTasks} />
+        <SlaveAggregates slaves={activeSlaves} slaveUsages={slaveUsages} activeTasks={activeTasks} />
       </div>
       <hr />
       <div id="slave-health">

From 1b4d25eec0ec9aa6b421fe195362a7f890c6f9e6 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 23 Feb 2017 10:50:46 -0500
Subject: [PATCH 31/42] clarity

---
 SingularityUI/app/components/machines/SlaveAggregates.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/SingularityUI/app/components/machines/SlaveAggregates.jsx b/SingularityUI/app/components/machines/SlaveAggregates.jsx
index 42720aa396..5979deb5ea 100644
--- a/SingularityUI/app/components/machines/SlaveAggregates.jsx
+++ b/SingularityUI/app/components/machines/SlaveAggregates.jsx
@@ -35,7 +35,7 @@ const SlaveAggregates = ({slaves, slaveUsages, activeTasks}) => {
           {slaves.length}
         </div>
         <div id="label">
-          Total Slaves
+          Active Slaves
         </div>
       </div>
       <div className="total-tasks col-xs-3">

From bd3f960b894eb4b6c612508a63587825ce06d694 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 23 Feb 2017 11:26:28 -0500
Subject: [PATCH 32/42] branches hate me

---
 SingularityUI/app/utils.es6 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/SingularityUI/app/utils.es6 b/SingularityUI/app/utils.es6
index 629e8372ef..3ae704c252 100644
--- a/SingularityUI/app/utils.es6
+++ b/SingularityUI/app/utils.es6
@@ -184,7 +184,7 @@ const Utils = {
         }
       case STAT_NAMES.memoryBytesUsedStat:
         try {
-          return parseFloat(slaveInfo.attributes.real_memory_mb || slaveInfo.resources.mem);
+          return parseFloat(slaveInfo.attributes.real_memory_mb || slaveInfo.resources.mem) * Math.pow(1024, 2);
         } catch (e) {
           throw new Error(`Could not find resource (memory) for slave ${slaveInfo.host} (${slaveInfo.id})`);
         }

From 13ed92b197b217f4e524d89e32acacbd80a86485 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 23 Feb 2017 13:17:04 -0500
Subject: [PATCH 33/42] add links to tasks for slave

---
 .../components/machines/SlaveHealthMenuItems.js | 11 ++++++++++-
 .../app/components/machines/StatItem.jsx        | 17 +++++++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
index fb0019d22c..aad5407179 100644
--- a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
+++ b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
@@ -49,10 +49,19 @@ const humanizeStatPct = (name, value, maybeTotalResource) => {
   return null;
 };
 
+const maybeLink = (name, value) => {
+  if (name === STAT_NAMES.slaveIdStat) {
+    return { href : `tasks/active/all/${value}`,
+             title : `All tasks running on host ${value}`
+           };
+  }
+
+  return null;
+};
 
 const SlaveHealthMenuItems = ({stats}) => {
   const renderSlaveStats = _.map(stats.sort(compareStats), ({name, value, maybeTotalResource, style}) => {
-    return <StatItem key={name} name={humanizeStatName(name)} value={humanizeStatValue(name, value, maybeTotalResource)} className={style} percentage={humanizeStatPct(name, value, maybeTotalResource)} />;
+    return <StatItem key={name} name={humanizeStatName(name)} value={humanizeStatValue(name, value, maybeTotalResource)} maybeLink={maybeLink(name, value)} className={style} percentage={humanizeStatPct(name, value, maybeTotalResource)} />;
   });
 
   return (
diff --git a/SingularityUI/app/components/machines/StatItem.jsx b/SingularityUI/app/components/machines/StatItem.jsx
index 4d9748e799..03f443ee20 100644
--- a/SingularityUI/app/components/machines/StatItem.jsx
+++ b/SingularityUI/app/components/machines/StatItem.jsx
@@ -1,7 +1,16 @@
 import React, { PropTypes } from 'react';
+import { Link } from 'react-router';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
-const StatItem = ({name, value, percentage, className}) => {
+const valueWithPotentialLink = (value, maybeLink) => {
+  if (maybeLink) {
+    return <Link to={maybeLink.href} title={maybeLink.title}>{value}</Link>;
+  } else {
+    return value;
+  }
+};
+
+const StatItem = ({name, value, maybeLink, percentage, className}) => {
   return (
     <CopyToClipboard text={value.toString()}>
       <li className={`${className} stat-item-detail container`}>
@@ -10,7 +19,7 @@ const StatItem = ({name, value, percentage, className}) => {
               {name}
             </div>
             <div className="col-xs-6" id="stat-value">
-              {value}
+              {valueWithPotentialLink(value, maybeLink)}
             </div>
             {percentage &&
               <div className="col-xs-3" id="stat-percentage">
@@ -26,6 +35,10 @@ const StatItem = ({name, value, percentage, className}) => {
 StatItem.propTypes = {
   name : PropTypes.string,
   value : PropTypes.string,
+  maybeLink : PropTypes.shape({
+    href : PropTypes.string,
+    title : PropTypes.string
+  }),
   percentage : PropTypes.number,
   className : PropTypes.string
 };

From 2850ee08a54e67e3e14c168f43c9043c2037e052 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 23 Feb 2017 15:28:24 -0500
Subject: [PATCH 34/42] grandient style heatmap for mem and cpu utilization

---
 .../app/components/machines/Constants.jsx     | 17 ++---
 .../app/components/machines/SlaveHealth.jsx   | 64 +++++--------------
 .../machines/SlaveHealthMenuItems.js          |  7 +-
 .../app/components/machines/SlaveUsage.jsx    | 19 +++++-
 .../app/components/machines/StatItem.jsx      | 15 ++---
 SingularityUI/package.json                    |  2 +
 6 files changed, 49 insertions(+), 75 deletions(-)

diff --git a/SingularityUI/app/components/machines/Constants.jsx b/SingularityUI/app/components/machines/Constants.jsx
index a3751b6cfd..fddf47b5c1 100644
--- a/SingularityUI/app/components/machines/Constants.jsx
+++ b/SingularityUI/app/components/machines/Constants.jsx
@@ -1,10 +1,7 @@
-export const HUNDREDTHS_PLACE = 2;
+import chroma from 'chroma-js';
 
-export const SLAVE_STYLES = {
-  ok : 'ok-slave',
-  warning : 'warning-slave',
-  critical : 'critical-slave'
-};
+export const WHOLE_NUMBER = 0;
+export const HUNDREDTHS_PLACE = 2;
 
 export const STAT_NAMES = {
   cpusUsedStat : 'cpusUsed',
@@ -14,12 +11,6 @@ export const STAT_NAMES = {
   timestampStat : 'timestamp'
 };
 
-export const STAT_STYLES = {
-  ok : 'ok-stat',
-  warning : 'warning-stat',
-  critical : 'critical-stat'
-};
-
 export const SLAVE_HEALTH_MENU_ITEM_ORDER = [
   'host',
   STAT_NAMES.cpusUsedStat,
@@ -27,3 +18,5 @@ export const SLAVE_HEALTH_MENU_ITEM_ORDER = [
   STAT_NAMES.numTasksStat,
   STAT_NAMES.timestampStat
 ];
+
+export const HEALTH_SCALE = chroma.bezier(['blue', 'yellow', 'red']).scale().colors(100);
diff --git a/SingularityUI/app/components/machines/SlaveHealth.jsx b/SingularityUI/app/components/machines/SlaveHealth.jsx
index 3e081f6ea4..c1fe109117 100644
--- a/SingularityUI/app/components/machines/SlaveHealth.jsx
+++ b/SingularityUI/app/components/machines/SlaveHealth.jsx
@@ -2,68 +2,35 @@ import React, { PropTypes } from 'react';
 import Utils from '../../utils';
 import SlaveHealthMenuItems from './SlaveHealthMenuItems';
 import { Dropdown } from 'react-bootstrap';
-import { SLAVE_STYLES, STAT_NAMES, STAT_STYLES } from './Constants';
+import { HEALTH_SCALE, WHOLE_NUMBER, STAT_NAMES } from './Constants';
 
-
-const isStatCritical = (slaveInfo, slaveUsage, statName) => {
-  switch (statName) {
-    case STAT_NAMES.cpusUsedStat:
-      return (slaveUsage.cpusUsed / Utils.getMaxAvailableResource(slaveInfo, statName)) > config.slaveCpusCriticalThreshold;
-    case STAT_NAMES.memoryBytesUsedStat:
-      return (slaveUsage.memoryBytesUsed / (Utils.getMaxAvailableResource(slaveInfo, statName))) > config.slaveMemoryCriticalThreshold;
-    default:
-      return false;
-  }
-};
-
-const isStatWarning = (slaveInfo, slaveUsage, statName) => {
-  switch (statName) {
-    case STAT_NAMES.cpusUsedStat:
-      return (slaveUsage.cpusUsed / Utils.getMaxAvailableResource(slaveInfo, statName)) > config.slaveCpusWarningThreshold;
-    case STAT_NAMES.memoryBytesUsedStat:
-      return (slaveUsage.memoryBytesUsed / (Utils.getMaxAvailableResource(slaveInfo, statName))) > config.slaveMemoryWarningThreshold;
-    default:
-      return false;
-  }
-};
-
-const getSlaveStyle = (checkedStats) => {
-  let style = SLAVE_STYLES.ok;
-
-  if (checkedStats.some((obj) => {return obj.style === STAT_STYLES.critical;})) {
-    style = SLAVE_STYLES.critical;
-  } else if (checkedStats.some((obj) => {return obj.style === STAT_STYLES.warning;})) {
-    style = SLAVE_STYLES.warning;
-  }
-
-  return style;
-};
-
-const SlaveHealth = ({slaveInfo, slaveUsage}) => {
+const SlaveHealth = ({slaveInfo, slaveUsage, resource}) => {
   const checkStats = (val, stat) => {
+    if (Utils.isResourceStat(stat) && stat !== resource) {
+      return null;
+    }
+
     const newStat = {
       name : stat,
       value : (stat === STAT_NAMES.slaveIdStat ? slaveInfo.host : val),
-      maybeTotalResource : Utils.isResourceStat(stat) ? Utils.getMaxAvailableResource(slaveInfo, stat) : '',
-      style : STAT_STYLES.ok
     };
 
-    if (isStatCritical(slaveInfo, slaveUsage, stat)) {
-      newStat.style = STAT_STYLES.critical;
-    } else if (isStatWarning(slaveInfo, slaveUsage, stat)) {
-      newStat.style = STAT_STYLES.warning;
+    if (Utils.isResourceStat(stat)) {
+      const totalResource = Utils.getMaxAvailableResource(slaveInfo, stat);
+      newStat.maybeTotalResource = totalResource;
+      newStat.style = {
+        backgroundColor : HEALTH_SCALE[Utils.roundTo((val / totalResource) * 100, WHOLE_NUMBER)]
+      };
     }
 
     return newStat;
   };
 
-  const checkedStats = _.map(slaveUsage, checkStats);
-
-  const slaveStyle = getSlaveStyle(checkedStats);
+  const checkedStats = _.map(slaveUsage, checkStats).filter(obj => obj);
 
   return (
     <Dropdown key={slaveUsage.slaveId} id={slaveUsage.slaveId}>
-      <Dropdown.Toggle noCaret={true} className={`${slaveStyle} single-slave-btn`} />
+      <Dropdown.Toggle noCaret={true} className="single-slave-btn" style={checkedStats.find((stat) => stat.style).style} />
       <Dropdown.Menu>
         <SlaveHealthMenuItems stats={checkedStats} />
       </Dropdown.Menu>
@@ -82,7 +49,8 @@ SlaveHealth.propTypes = {
   slaveInfo : PropTypes.shape({
     attributes : PropTypes.object.isRequired,
     resources : PropTypes.object.isRequired
-  })
+  }),
+  resource : PropTypes.string.isRequired
 };
 
 export default SlaveHealth;
diff --git a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
index aad5407179..1f3e0e4268 100644
--- a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
+++ b/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
@@ -60,8 +60,8 @@ const maybeLink = (name, value) => {
 };
 
 const SlaveHealthMenuItems = ({stats}) => {
-  const renderSlaveStats = _.map(stats.sort(compareStats), ({name, value, maybeTotalResource, style}) => {
-    return <StatItem key={name} name={humanizeStatName(name)} value={humanizeStatValue(name, value, maybeTotalResource)} maybeLink={maybeLink(name, value)} className={style} percentage={humanizeStatPct(name, value, maybeTotalResource)} />;
+  const renderSlaveStats = _.map(stats.sort(compareStats), ({name, value, maybeTotalResource}) => {
+    return <StatItem key={name} name={humanizeStatName(name)} value={humanizeStatValue(name, value, maybeTotalResource)} maybeLink={maybeLink(name, value)} percentage={humanizeStatPct(name, value, maybeTotalResource)} />;
   });
 
   return (
@@ -89,8 +89,7 @@ SlaveHealthMenuItems.propTypes = {
       maybeTotalResource : PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number
-      ]).isRequired,
-      style : PropTypes.string.isRequired
+      ])
     })
   )
 };
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 43ebf98597..7e1f5e3fb8 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import rootComponent from '../../rootComponent';
 import { FetchSlaveUsages, FetchSlaves } from '../../actions/api/slaves';
 import { FetchSingularityStatus } from '../../actions/api/state';
+import { STAT_NAMES } from './Constants';
 import Utils from '../../utils';
 import SlaveAggregates from './SlaveAggregates';
 import SlaveHealth from './SlaveHealth';
@@ -14,9 +15,14 @@ const getSlaveInfo = (slaves, slaveUsage) => {
 const SlaveUsage = ({slaves, slaveUsages, activeTasks}) => {
   const activeSlaves = slaves.filter(Utils.isActiveSlave);
 
-  const slaveHealthData = slaveUsages.map((slaveUsage, index) => {
+  const cpuHealthData = slaveUsages.map((slaveUsage, index) => {
     const slaveInfo = getSlaveInfo(activeSlaves, slaveUsage);
-    return <SlaveHealth key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} />;
+    return <SlaveHealth key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} resource={STAT_NAMES.cpusUsedStat} />;
+  });
+
+  const memoryHealthData = slaveUsages.map((slaveUsage, index) => {
+    const slaveInfo = getSlaveInfo(activeSlaves, slaveUsage);
+    return <SlaveHealth key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} resource={STAT_NAMES.memoryBytesUsedStat} />;
   });
 
   return (
@@ -28,7 +34,14 @@ const SlaveUsage = ({slaves, slaveUsages, activeTasks}) => {
       <hr />
       <div id="slave-health">
         <h3>Slave health</h3>
-        {slaveHealthData}
+        <h4>Cpu</h4>
+        <div className="cpu-health">
+          {cpuHealthData}
+        </div>
+        <h4>Memory</h4>
+        <div className="memory-health">
+          {memoryHealthData}
+        </div>
       </div>
     </div>
   );
diff --git a/SingularityUI/app/components/machines/StatItem.jsx b/SingularityUI/app/components/machines/StatItem.jsx
index 03f443ee20..a69589725a 100644
--- a/SingularityUI/app/components/machines/StatItem.jsx
+++ b/SingularityUI/app/components/machines/StatItem.jsx
@@ -5,15 +5,15 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 const valueWithPotentialLink = (value, maybeLink) => {
   if (maybeLink) {
     return <Link to={maybeLink.href} title={maybeLink.title}>{value}</Link>;
-  } else {
-    return value;
   }
+
+  return value;
 };
 
-const StatItem = ({name, value, maybeLink, percentage, className}) => {
+const StatItem = ({name, value, maybeLink, percentage}) => {
   return (
     <CopyToClipboard text={value.toString()}>
-      <li className={`${className} stat-item-detail container`}>
+      <li className="stat-item-detail container">
           <div className="row">
             <div className="col-xs-3" id="stat-name">
               {name}
@@ -21,9 +21,9 @@ const StatItem = ({name, value, maybeLink, percentage, className}) => {
             <div className="col-xs-6" id="stat-value">
               {valueWithPotentialLink(value, maybeLink)}
             </div>
-            {percentage &&
+            {percentage != null &&
               <div className="col-xs-3" id="stat-percentage">
-                ({percentage}%)
+                {percentage}%
               </div>
             }
           </div>
@@ -39,8 +39,7 @@ StatItem.propTypes = {
     href : PropTypes.string,
     title : PropTypes.string
   }),
-  percentage : PropTypes.number,
-  className : PropTypes.string
+  percentage : PropTypes.number
 };
 
 export default StatItem;
diff --git a/SingularityUI/package.json b/SingularityUI/package.json
index e7d8f3718e..1eebe043a6 100644
--- a/SingularityUI/package.json
+++ b/SingularityUI/package.json
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "bootstrap": "~3.3.0",
+    "chroma-js": "^1.2.2",
     "classnames": "^2.2.3",
     "clipboard": "^1.5.8",
     "core-js": "^1.2.7",
@@ -74,6 +75,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.8.0",
     "babel-plugin-transform-react-jsx": "^6.8.0",
     "babel-preset-es2015": "^6.9.0",
+    "chroma-js": "^1.2.2",
     "case-sensitive-paths-webpack-plugin": "^1.1.3",
     "del": "^2.2.0",
     "eslint": "^2.11.1",

From 734a63687befb0cbe236ce85e6c590c63e579bdf Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 23 Feb 2017 15:35:47 -0500
Subject: [PATCH 35/42] better clipboard copying

---
 .../app/components/machines/StatItem.jsx      | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/SingularityUI/app/components/machines/StatItem.jsx b/SingularityUI/app/components/machines/StatItem.jsx
index a69589725a..4b49c925d0 100644
--- a/SingularityUI/app/components/machines/StatItem.jsx
+++ b/SingularityUI/app/components/machines/StatItem.jsx
@@ -12,23 +12,27 @@ const valueWithPotentialLink = (value, maybeLink) => {
 
 const StatItem = ({name, value, maybeLink, percentage}) => {
   return (
-    <CopyToClipboard text={value.toString()}>
-      <li className="stat-item-detail container">
-          <div className="row">
+    <li className="stat-item-detail container">
+        <div className="row">
+          <CopyToClipboard text={name.toString()}>
             <div className="col-xs-3" id="stat-name">
               {name}
             </div>
+          </CopyToClipboard>
+          <CopyToClipboard text={value.toString()}>
             <div className="col-xs-6" id="stat-value">
               {valueWithPotentialLink(value, maybeLink)}
             </div>
-            {percentage != null &&
+          </CopyToClipboard>
+          {percentage != null &&
+            <CopyToClipboard text={percentage.toString()}>
               <div className="col-xs-3" id="stat-percentage">
                 {percentage}%
               </div>
-            }
-          </div>
-      </li>
-    </CopyToClipboard>
+            </CopyToClipboard>
+          }
+        </div>
+    </li>
   );
 };
 

From f84d57c284e2ae8b2ed7e9cde172abe735cab717 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Thu, 23 Feb 2017 16:05:11 -0500
Subject: [PATCH 36/42] remove unused config and styles

---
 .../singularity/config/UIConfiguration.java   | 36 -------------------
 .../hubspot/singularity/views/IndexView.java  |  8 -----
 SingularityUI/app/assets/index.mustache       |  4 ---
 SingularityUI/app/styles/colors.styl          |  7 ----
 .../app/styles/stylus/slaveUsage.styl         | 18 ----------
 SingularityUI/gulpfile.js                     |  4 ---
 6 files changed, 77 deletions(-)

diff --git a/SingularityService/src/main/java/com/hubspot/singularity/config/UIConfiguration.java b/SingularityService/src/main/java/com/hubspot/singularity/config/UIConfiguration.java
index 4d9d5676dd..e75f68a6ca 100644
--- a/SingularityService/src/main/java/com/hubspot/singularity/config/UIConfiguration.java
+++ b/SingularityService/src/main/java/com/hubspot/singularity/config/UIConfiguration.java
@@ -67,10 +67,6 @@ public static RootUrlMode parse(String value) {
   private boolean hideNewRequestButton = false;
 
   private boolean shortenSlaveUsageHostname = false;
-  private double slaveCpusWarningThreshold = 0.80;
-  private double slaveCpusCriticalThreshold = 0.90;
-  private double slaveMemoryWarningThreshold = 0.80;
-  private double slaveMemoryCriticalThreshold = 0.90;
 
   /**
    * If true, the root of the server (http://.../singularity/) will open the UI. Otherwise,
@@ -123,38 +119,6 @@ public void setShortenSlaveUsageHostname(boolean shortenSlaveUsageHostname) {
     this.shortenSlaveUsageHostname = shortenSlaveUsageHostname;
   }
 
-  public double getSlaveCpusWarningThreshold() {
-    return slaveCpusWarningThreshold;
-  }
-
-  public void setSlaveCpusWarningThreshold(double slaveCpusWarningThreshold) {
-    this.slaveCpusWarningThreshold = slaveCpusWarningThreshold;
-  }
-
-  public double getSlaveCpusCriticalThreshold() {
-    return slaveCpusCriticalThreshold;
-  }
-
-  public void setSlaveCpusCriticalThreshold(double slaveCpusCriticalThreshold) {
-    this.slaveCpusCriticalThreshold = slaveCpusCriticalThreshold;
-  }
-
-  public double getSlaveMemoryWarningThreshold() {
-    return slaveMemoryWarningThreshold;
-  }
-
-  public void setSlaveMemoryWarningThreshold(double slaveMemoryWarningThreshold) {
-    this.slaveMemoryWarningThreshold = slaveMemoryWarningThreshold;
-  }
-
-  public double getSlaveMemoryCriticalThreshold() {
-    return slaveMemoryCriticalThreshold;
-  }
-
-  public void setSlaveMemoryCriticalThreshold(double slaveMemoryCriticalThreshold) {
-    this.slaveMemoryCriticalThreshold = slaveMemoryCriticalThreshold;
-  }
-
   public String getTitle() {
     return title;
   }
diff --git a/SingularityService/src/main/java/com/hubspot/singularity/views/IndexView.java b/SingularityService/src/main/java/com/hubspot/singularity/views/IndexView.java
index 6d19ad3895..0047c0e519 100644
--- a/SingularityService/src/main/java/com/hubspot/singularity/views/IndexView.java
+++ b/SingularityService/src/main/java/com/hubspot/singularity/views/IndexView.java
@@ -51,10 +51,6 @@ public class IndexView extends View {
   private final String shellCommands;
 
   private final boolean shortenSlaveUsageHostname;
-  private final double slaveCpusWarningThreshold;
-  private final double slaveCpusCriticalThreshold;
-  private final double slaveMemoryWarningThreshold;
-  private final double slaveMemoryCriticalThreshold;
 
   private final String timestampFormat;
 
@@ -119,10 +115,6 @@ public IndexView(String singularityUriBase, String appRoot, SingularityConfigura
     }
 
     this.shortenSlaveUsageHostname = configuration.getUiConfiguration().isShortenSlaveUsageHostname();
-    this.slaveCpusWarningThreshold = configuration.getUiConfiguration().getSlaveCpusWarningThreshold();
-    this.slaveCpusCriticalThreshold = configuration.getUiConfiguration().getSlaveCpusCriticalThreshold();
-    this.slaveMemoryWarningThreshold = configuration.getUiConfiguration().getSlaveMemoryWarningThreshold();
-    this.slaveMemoryCriticalThreshold = configuration.getUiConfiguration().getSlaveMemoryCriticalThreshold();
 
     this.timestampFormat = configuration.getUiConfiguration().getTimestampFormat();
 
diff --git a/SingularityUI/app/assets/index.mustache b/SingularityUI/app/assets/index.mustache
index 7e882d3bca..6dacec9754 100644
--- a/SingularityUI/app/assets/index.mustache
+++ b/SingularityUI/app/assets/index.mustache
@@ -43,10 +43,6 @@
             {{/slaveHttpsPort}}
             shellCommands: {{{shellCommands}}},
             shortenSlaveUsageHostname : {{{shortenSlaveUsageHostname}}},
-            slaveCpusWarningThreshold : {{{slaveCpusWarningThreshold}}},
-            slaveCpusCriticalThreshold : {{{slaveCpusCriticalThreshold}}},
-            slaveMemoryWarningThreshold : {{{slaveMemoryWarningThreshold}}},
-            slaveMemoryCriticalThreshold : {{{slaveMemoryCriticalThreshold}}},
             redirectOnUnauthorizedUrl: "{{{redirectOnUnauthorizedUrl}}}",
             globalRefreshInterval: 60000
         };
diff --git a/SingularityUI/app/styles/colors.styl b/SingularityUI/app/styles/colors.styl
index e99ba776d1..64ed479b1f 100644
--- a/SingularityUI/app/styles/colors.styl
+++ b/SingularityUI/app/styles/colors.styl
@@ -19,13 +19,6 @@ $purple = #b93c96
 $dark-yellow = #e6e65c
 $removeRed = #df6f6f
 
-$color-oz = #00bda5
-$color-oz-dark = #00a38d
-$color-marigold = #f5c26b
-$color-marigold-dark = #dbae60
-$color-norman = #f2547d
-$color-norman-dark = #d94c71
-
 $alert-danger = #f04b51
 $alert-warning = #fdf3e1
 $alert-success = #5967bc
diff --git a/SingularityUI/app/styles/stylus/slaveUsage.styl b/SingularityUI/app/styles/stylus/slaveUsage.styl
index 05a85b548d..c361885787 100644
--- a/SingularityUI/app/styles/stylus/slaveUsage.styl
+++ b/SingularityUI/app/styles/stylus/slaveUsage.styl
@@ -26,18 +26,6 @@
 .single-slave-btn:hover
 	opacity : 1
 
-.ok-slave, .ok-slave:hover
-	background-color : $color-oz
-	border-color : $color-oz-dark
-
-.warning-slave, .warning-slave:hover
-	background-color : $color-marigold
-	border-color : $color-marigold-dark
-
-.critical-slave, .critical-slave:hover
-	background-color : $color-norman
-	border-color : $color-norman-dark
-
 // SlaveHealthMenuItems
 .dropdown-menu
 	border-radius : 0px
@@ -68,9 +56,3 @@
 
 #stat-percentage
 	display : inline
-
-.warning-stat
-	color : $color-marigold
-
-.critical-stat
-	color : $color-norman
diff --git a/SingularityUI/gulpfile.js b/SingularityUI/gulpfile.js
index 5075b9cc55..20e1cededb 100644
--- a/SingularityUI/gulpfile.js
+++ b/SingularityUI/gulpfile.js
@@ -44,10 +44,6 @@ var templateData = {
   warnIfScheduledJobIsRunningPastNextRunPct: process.env.SINGULARITY_WARN_IF_SCHEDULED_JOB_IS_RUNNING_PAST_NEXT_RUN_PCT || 200,
   shellCommands: process.env.SINGULARITY_SHELL_COMMANDS || '[]',
   shortenSlaveUsageHostname: process.env.SINGULARITY_SHORTEN_SLAVE_USAGE_HOSTNAME || 'false',
-  slaveCpusWarningThreshold: process.env.SINGULARITY_SLAVE_CPUS_WARNING_THRESHOLD || 0.80,
-  slaveCpusCriticalThreshold: process.env.SINGULARITY_SLAVE_CPUS_CRITICAL_THRESHOLD || 0.90,
-  slaveMemoryWarningThreshold: process.env.SINGULARITY_SLAVE_MEMORY_WARNING_THRESHOLD || 0.80,
-  slaveMemoryCriticalThreshold: process.env.SINGULARITY_SLAVE_MEMORY_CRITICAL_THRESHOLD || 0.90,
   timestampFormat: process.env.SINGULARITY_TIMESTAMP_FORMAT || 'lll',
   timestampWithSecondsFormat: process.env.SINGULARITY_TIMESTAMP_WITH_SECONDS_FORMAT || 'lll:ss',
   redirectOnUnauthorizedUrl: process.env.SINGULARITY_REDIRECT_ON_UNAUTHORIZED_URL || '',

From 515141fed671c9c8eb2e5cfe3e2bf68be81ba5e5 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Fri, 24 Feb 2017 11:49:10 -0500
Subject: [PATCH 37/42] sort slave heat map, adjust gradient, refactor

---
 .../app/components/machines/Constants.jsx     |  2 +-
 ...laveHealth.jsx => SlaveResourceHealth.jsx} | 23 +++++----
 ...ems.js => SlaveResourceHealthMenuItems.js} |  6 +--
 .../app/components/machines/SlaveUsage.jsx    | 47 +++++++++++++++----
 4 files changed, 54 insertions(+), 24 deletions(-)
 rename SingularityUI/app/components/machines/{SlaveHealth.jsx => SlaveResourceHealth.jsx} (65%)
 rename SingularityUI/app/components/machines/{SlaveHealthMenuItems.js => SlaveResourceHealthMenuItems.js} (95%)

diff --git a/SingularityUI/app/components/machines/Constants.jsx b/SingularityUI/app/components/machines/Constants.jsx
index fddf47b5c1..8c75b2dbee 100644
--- a/SingularityUI/app/components/machines/Constants.jsx
+++ b/SingularityUI/app/components/machines/Constants.jsx
@@ -19,4 +19,4 @@ export const SLAVE_HEALTH_MENU_ITEM_ORDER = [
   STAT_NAMES.timestampStat
 ];
 
-export const HEALTH_SCALE = chroma.bezier(['blue', 'yellow', 'red']).scale().colors(100);
+export const HEALTH_SCALE = chroma.bezier(['MidnightBlue', 'DarkBlue', 'Blue', 'Orange', 'OrangeRed']).scale().colors(100);
diff --git a/SingularityUI/app/components/machines/SlaveHealth.jsx b/SingularityUI/app/components/machines/SlaveResourceHealth.jsx
similarity index 65%
rename from SingularityUI/app/components/machines/SlaveHealth.jsx
rename to SingularityUI/app/components/machines/SlaveResourceHealth.jsx
index c1fe109117..395feb0d18 100644
--- a/SingularityUI/app/components/machines/SlaveHealth.jsx
+++ b/SingularityUI/app/components/machines/SlaveResourceHealth.jsx
@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react';
 import Utils from '../../utils';
-import SlaveHealthMenuItems from './SlaveHealthMenuItems';
+import SlaveResourceHealthMenuItems from './SlaveResourceHealthMenuItems';
 import { Dropdown } from 'react-bootstrap';
-import { HEALTH_SCALE, WHOLE_NUMBER, STAT_NAMES } from './Constants';
+import { HEALTH_SCALE, STAT_NAMES } from './Constants';
 
-const SlaveHealth = ({slaveInfo, slaveUsage, resource}) => {
+const SlaveResourceHealth = ({slaveInfo, slaveUsage, resource, totalResource, utilization}) => {
   const checkStats = (val, stat) => {
     if (Utils.isResourceStat(stat) && stat !== resource) {
       return null;
@@ -16,11 +16,7 @@ const SlaveHealth = ({slaveInfo, slaveUsage, resource}) => {
     };
 
     if (Utils.isResourceStat(stat)) {
-      const totalResource = Utils.getMaxAvailableResource(slaveInfo, stat);
       newStat.maybeTotalResource = totalResource;
-      newStat.style = {
-        backgroundColor : HEALTH_SCALE[Utils.roundTo((val / totalResource) * 100, WHOLE_NUMBER)]
-      };
     }
 
     return newStat;
@@ -30,15 +26,15 @@ const SlaveHealth = ({slaveInfo, slaveUsage, resource}) => {
 
   return (
     <Dropdown key={slaveUsage.slaveId} id={slaveUsage.slaveId}>
-      <Dropdown.Toggle noCaret={true} className="single-slave-btn" style={checkedStats.find((stat) => stat.style).style} />
+      <Dropdown.Toggle noCaret={true} className="single-slave-btn" style={{backgroundColor : HEALTH_SCALE[utilization]}} />
       <Dropdown.Menu>
-        <SlaveHealthMenuItems stats={checkedStats} />
+        <SlaveResourceHealthMenuItems stats={checkedStats} />
       </Dropdown.Menu>
     </Dropdown>
   );
 };
 
-SlaveHealth.propTypes = {
+SlaveResourceHealth.propTypes = {
   slaveUsage : PropTypes.shape({
     slaveId : PropTypes.string.isRequired,
     cpusUsed : PropTypes.number.isRequired,
@@ -47,10 +43,13 @@ SlaveHealth.propTypes = {
     timestamp : PropTypes.number.isRequired
   }),
   slaveInfo : PropTypes.shape({
+    host : PropTypes.string.isRequired,
     attributes : PropTypes.object.isRequired,
     resources : PropTypes.object.isRequired
   }),
-  resource : PropTypes.string.isRequired
+  resource : PropTypes.string.isRequired,
+  totalResource : PropTypes.number.isRequired,
+  utilization : PropTypes.number.isRequired
 };
 
-export default SlaveHealth;
+export default SlaveResourceHealth;
diff --git a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js b/SingularityUI/app/components/machines/SlaveResourceHealthMenuItems.js
similarity index 95%
rename from SingularityUI/app/components/machines/SlaveHealthMenuItems.js
rename to SingularityUI/app/components/machines/SlaveResourceHealthMenuItems.js
index 1f3e0e4268..28118111cd 100644
--- a/SingularityUI/app/components/machines/SlaveHealthMenuItems.js
+++ b/SingularityUI/app/components/machines/SlaveResourceHealthMenuItems.js
@@ -59,7 +59,7 @@ const maybeLink = (name, value) => {
   return null;
 };
 
-const SlaveHealthMenuItems = ({stats}) => {
+const SlaveResourceHealthMenuItems = ({stats}) => {
   const renderSlaveStats = _.map(stats.sort(compareStats), ({name, value, maybeTotalResource}) => {
     return <StatItem key={name} name={humanizeStatName(name)} value={humanizeStatValue(name, value, maybeTotalResource)} maybeLink={maybeLink(name, value)} percentage={humanizeStatPct(name, value, maybeTotalResource)} />;
   });
@@ -78,7 +78,7 @@ const SlaveHealthMenuItems = ({stats}) => {
   );
 };
 
-SlaveHealthMenuItems.propTypes = {
+SlaveResourceHealthMenuItems.propTypes = {
   stats : PropTypes.arrayOf(
     PropTypes.shape({
       name : PropTypes.string.isRequired,
@@ -94,4 +94,4 @@ SlaveHealthMenuItems.propTypes = {
   )
 };
 
-export default SlaveHealthMenuItems;
+export default SlaveResourceHealthMenuItems;
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 7e1f5e3fb8..86dff9f007 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -3,26 +3,57 @@ import { connect } from 'react-redux';
 import rootComponent from '../../rootComponent';
 import { FetchSlaveUsages, FetchSlaves } from '../../actions/api/slaves';
 import { FetchSingularityStatus } from '../../actions/api/state';
-import { STAT_NAMES } from './Constants';
+import { STAT_NAMES, WHOLE_NUMBER } from './Constants';
 import Utils from '../../utils';
 import SlaveAggregates from './SlaveAggregates';
-import SlaveHealth from './SlaveHealth';
+import SlaveResourceHealth from './SlaveResourceHealth';
 
 const getSlaveInfo = (slaves, slaveUsage) => {
   return _.findWhere(slaves, {'id' : slaveUsage.slaveId});
 };
 
+const getUtilizationData = (slaves, slaveUsages) => {
+  return slaveUsages.map((slaveUsage) => {
+    const slaveInfo = getSlaveInfo(slaves, slaveUsage);
+
+    const totalCpuResource = Utils.getMaxAvailableResource(slaveInfo, STAT_NAMES.cpusUsedStat);
+    const cpuUtilized = Utils.roundTo((slaveUsage[STAT_NAMES.cpusUsedStat] / totalCpuResource) * 100, WHOLE_NUMBER);
+
+    const totalMemoryResource = Utils.getMaxAvailableResource(slaveInfo, STAT_NAMES.memoryBytesUsedStat);
+    const memoryUtilized = Utils.roundTo((slaveUsage[STAT_NAMES.memoryBytesUsedStat] / totalMemoryResource) * 100, WHOLE_NUMBER);
+
+    return {slaveInfo, slaveUsage, totalCpuResource, cpuUtilized, totalMemoryResource, memoryUtilized};
+  });
+};
+
 const SlaveUsage = ({slaves, slaveUsages, activeTasks}) => {
   const activeSlaves = slaves.filter(Utils.isActiveSlave);
+  const utilizationData = getUtilizationData(activeSlaves, slaveUsages);
 
-  const cpuHealthData = slaveUsages.map((slaveUsage, index) => {
-    const slaveInfo = getSlaveInfo(activeSlaves, slaveUsage);
-    return <SlaveHealth key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} resource={STAT_NAMES.cpusUsedStat} />;
+  const cpuHealthData = utilizationData.sort((a, b) => a.cpuUtilized - b.cpuUtilized).map((data, index) => {
+    return (
+      <SlaveResourceHealth
+        key={index}
+        slaveUsage={data.slaveUsage}
+        slaveInfo={data.slaveInfo}
+        resource={STAT_NAMES.cpusUsedStat}
+        totalResource={data.totalCpuResource}
+        utilization={data.cpuUtilized}
+      />
+    );
   });
 
-  const memoryHealthData = slaveUsages.map((slaveUsage, index) => {
-    const slaveInfo = getSlaveInfo(activeSlaves, slaveUsage);
-    return <SlaveHealth key={index} slaveUsage={slaveUsage} slaveInfo={slaveInfo} resource={STAT_NAMES.memoryBytesUsedStat} />;
+  const memoryHealthData = utilizationData.sort((a, b) => a.memoryUtilized - b.memoryUtilized).map((data, index) => {
+    return (
+      <SlaveResourceHealth
+        key={index}
+        slaveUsage={data.slaveUsage}
+        slaveInfo={data.slaveInfo}
+        resource={STAT_NAMES.memoryBytesUsedStat}
+        totalResource={data.totalMemoryResource}
+        utilization={data.memoryUtilized}
+      />
+    );
   });
 
   return (

From a8dec94f3f3a5e877683898583b43d2980946bf5 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Fri, 24 Feb 2017 12:14:25 -0500
Subject: [PATCH 38/42] extend range to account for hundredths place

---
 SingularityUI/app/components/machines/Constants.jsx  | 3 ++-
 SingularityUI/app/components/machines/SlaveUsage.jsx | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/SingularityUI/app/components/machines/Constants.jsx b/SingularityUI/app/components/machines/Constants.jsx
index 8c75b2dbee..799ff4a971 100644
--- a/SingularityUI/app/components/machines/Constants.jsx
+++ b/SingularityUI/app/components/machines/Constants.jsx
@@ -1,5 +1,6 @@
 import chroma from 'chroma-js';
 
+export const HEALTH_SCALE_MAX = 10000;
 export const WHOLE_NUMBER = 0;
 export const HUNDREDTHS_PLACE = 2;
 
@@ -19,4 +20,4 @@ export const SLAVE_HEALTH_MENU_ITEM_ORDER = [
   STAT_NAMES.timestampStat
 ];
 
-export const HEALTH_SCALE = chroma.bezier(['MidnightBlue', 'DarkBlue', 'Blue', 'Orange', 'OrangeRed']).scale().colors(100);
+export const HEALTH_SCALE = chroma.bezier(['MidnightBlue', 'DarkBlue', 'Blue', 'Orange', 'OrangeRed']).scale().colors(HEALTH_SCALE_MAX);
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index 86dff9f007..bbf24bebbe 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import rootComponent from '../../rootComponent';
 import { FetchSlaveUsages, FetchSlaves } from '../../actions/api/slaves';
 import { FetchSingularityStatus } from '../../actions/api/state';
-import { STAT_NAMES, WHOLE_NUMBER } from './Constants';
+import { STAT_NAMES, WHOLE_NUMBER, HEALTH_SCALE_MAX } from './Constants';
 import Utils from '../../utils';
 import SlaveAggregates from './SlaveAggregates';
 import SlaveResourceHealth from './SlaveResourceHealth';
@@ -17,10 +17,10 @@ const getUtilizationData = (slaves, slaveUsages) => {
     const slaveInfo = getSlaveInfo(slaves, slaveUsage);
 
     const totalCpuResource = Utils.getMaxAvailableResource(slaveInfo, STAT_NAMES.cpusUsedStat);
-    const cpuUtilized = Utils.roundTo((slaveUsage[STAT_NAMES.cpusUsedStat] / totalCpuResource) * 100, WHOLE_NUMBER);
+    const cpuUtilized = Utils.roundTo((slaveUsage[STAT_NAMES.cpusUsedStat] / totalCpuResource) * HEALTH_SCALE_MAX, WHOLE_NUMBER);
 
     const totalMemoryResource = Utils.getMaxAvailableResource(slaveInfo, STAT_NAMES.memoryBytesUsedStat);
-    const memoryUtilized = Utils.roundTo((slaveUsage[STAT_NAMES.memoryBytesUsedStat] / totalMemoryResource) * 100, WHOLE_NUMBER);
+    const memoryUtilized = Utils.roundTo((slaveUsage[STAT_NAMES.memoryBytesUsedStat] / totalMemoryResource) * HEALTH_SCALE_MAX, WHOLE_NUMBER);
 
     return {slaveInfo, slaveUsage, totalCpuResource, cpuUtilized, totalMemoryResource, memoryUtilized};
   });

From 27388de6a9b1a1db461d389e4302c9c80933b1b1 Mon Sep 17 00:00:00 2001
From: Stephen Salinas <ssalinas@hubspot.com>
Date: Wed, 1 Mar 2017 09:22:29 -0500
Subject: [PATCH 39/42] add missing getter

---
 .../main/java/com/hubspot/singularity/views/IndexView.java    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/SingularityService/src/main/java/com/hubspot/singularity/views/IndexView.java b/SingularityService/src/main/java/com/hubspot/singularity/views/IndexView.java
index 0047c0e519..9c320ab7e5 100644
--- a/SingularityService/src/main/java/com/hubspot/singularity/views/IndexView.java
+++ b/SingularityService/src/main/java/com/hubspot/singularity/views/IndexView.java
@@ -239,6 +239,10 @@ public String getRedirectOnUnauthorizedUrl() {
     return redirectOnUnauthorizedUrl;
   }
 
+  public boolean isShortenSlaveUsageHostname() {
+    return shortenSlaveUsageHostname;
+  }
+
   @Override public String toString() {
     return Objects.toStringHelper(this)
       .add("appRoot", appRoot)

From 8a366deacaf72b1ae62c9f520ef1a7f55540e573 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Fri, 10 Mar 2017 13:20:27 -0500
Subject: [PATCH 40/42] mouseover callouts, style changes

---
 .../app/components/machines/Constants.jsx     |  2 +-
 .../machines/ResourceHealthData.jsx           | 85 +++++++++++++++++++
 .../components/machines/SlaveAggregates.jsx   |  8 +-
 .../app/components/machines/SlaveUsage.jsx    | 24 +-----
 .../app/styles/stylus/slaveUsage.styl         | 55 ++++++++++--
 SingularityUI/app/utils.es6                   |  4 +-
 6 files changed, 143 insertions(+), 35 deletions(-)
 create mode 100644 SingularityUI/app/components/machines/ResourceHealthData.jsx

diff --git a/SingularityUI/app/components/machines/Constants.jsx b/SingularityUI/app/components/machines/Constants.jsx
index 799ff4a971..8257169df8 100644
--- a/SingularityUI/app/components/machines/Constants.jsx
+++ b/SingularityUI/app/components/machines/Constants.jsx
@@ -20,4 +20,4 @@ export const SLAVE_HEALTH_MENU_ITEM_ORDER = [
   STAT_NAMES.timestampStat
 ];
 
-export const HEALTH_SCALE = chroma.bezier(['MidnightBlue', 'DarkBlue', 'Blue', 'Orange', 'OrangeRed']).scale().colors(HEALTH_SCALE_MAX);
+export const HEALTH_SCALE = chroma.scale(['3182bd','9ecae1','deebf7','fee0d2','fc9272','de2d26']).colors(HEALTH_SCALE_MAX);
diff --git a/SingularityUI/app/components/machines/ResourceHealthData.jsx b/SingularityUI/app/components/machines/ResourceHealthData.jsx
new file mode 100644
index 0000000000..5885b00998
--- /dev/null
+++ b/SingularityUI/app/components/machines/ResourceHealthData.jsx
@@ -0,0 +1,85 @@
+import React, { PropTypes } from 'react';
+import Utils from '../../utils';
+import SlaveResourceHealth from './SlaveResourceHealth';
+import { OverlayTrigger, Popover } from 'react-bootstrap';
+import { STAT_NAMES, HUNDREDTHS_PLACE, HEALTH_SCALE, HEALTH_SCALE_MAX } from './Constants';
+
+const overlayTriggers = ['hover', 'focus'];
+
+const getTotalForStat = (statName, data) => {
+  switch (statName) {
+    case STAT_NAMES.memoryBytesUsedStat:
+      return data.totalMemoryResource;
+    case STAT_NAMES.cpusUsedStat:
+      return data.totalCpuResource;
+    default:
+      throw new Error(`${name} is an unsupported statistic`);
+  }
+};
+
+const getUtilizationForStat = (statName, data) => {
+  switch (statName) {
+    case STAT_NAMES.memoryBytesUsedStat:
+      return data.memoryUtilized;
+    case STAT_NAMES.cpusUsedStat:
+      return data.cpuUtilized;
+    default:
+      throw new Error(`${name} is an unsupported statistic`);
+  }
+};
+
+const slaveQuickStats = (data) => {
+  const shortenHostName = true;
+  const largeBlackCircle = '⬤';
+  return (
+    <Popover id="slave-usage-quick-stats-popover">
+      <div className="row" id="slave-usage-quick-stats">
+        <div className="col-xs-5" id="slave-name">
+          {Utils.humanizeSlaveHostName(data.slaveInfo.host, shortenHostName)}
+        </div>
+        <div className="col-xs-3" id="memory-stats">
+          <div id="pct-utilized">
+            {Utils.roundTo(data.memoryUtilized / HEALTH_SCALE_MAX * 100, HUNDREDTHS_PLACE)}%
+          </div>
+          <div id="status">
+            Mem <span style={{color : HEALTH_SCALE[data.memoryUtilized]}}>{largeBlackCircle}</span>
+          </div>
+        </div>
+        <div className="col-xs-3" id="cpu-stats">
+          <div id="pct-utilized">
+            {Utils.roundTo(data.cpuUtilized / HEALTH_SCALE_MAX * 100, HUNDREDTHS_PLACE)}%
+          </div>
+          <div id="status">
+            Cpu <span style={{color : HEALTH_SCALE[data.cpuUtilized]}}>{largeBlackCircle}</span>
+          </div>
+        </div>
+      </div>
+    </Popover>
+  );
+};
+
+const ResourceHealthData = ({utilizationData, statName}) => {
+  return (
+    <OverlayTrigger trigger={overlayTriggers} overlay={slaveQuickStats(utilizationData)}>
+      <span>
+        <SlaveResourceHealth
+          slaveUsage={utilizationData.slaveUsage}
+          slaveInfo={utilizationData.slaveInfo}
+          resource={statName}
+          totalResource={getTotalForStat(statName, utilizationData)}
+          utilization={getUtilizationForStat(statName, utilizationData)}
+        />
+      </span>
+    </OverlayTrigger>
+  );
+};
+
+ResourceHealthData.propTypes = {
+  utilizationData : PropTypes.shape({
+    slaveUsage : PropTypes.object.isRequired,
+    slaveInfo : PropTypes.object.isRequired
+  }),
+  statName : PropTypes.string
+};
+
+export default ResourceHealthData;
diff --git a/SingularityUI/app/components/machines/SlaveAggregates.jsx b/SingularityUI/app/components/machines/SlaveAggregates.jsx
index 5979deb5ea..574c45fadd 100644
--- a/SingularityUI/app/components/machines/SlaveAggregates.jsx
+++ b/SingularityUI/app/components/machines/SlaveAggregates.jsx
@@ -30,7 +30,7 @@ const getMemUtilizationPct = (slaves, slaveUsages) => {
 const SlaveAggregates = ({slaves, slaveUsages, activeTasks}) => {
   return (
     <div className="slave-aggregates row">
-      <div className="total-slaves col-xs-3">
+      <div className="total-slaves col-xs-2">
         <div id="value">
           {slaves.length}
         </div>
@@ -38,7 +38,7 @@ const SlaveAggregates = ({slaves, slaveUsages, activeTasks}) => {
           Active Slaves
         </div>
       </div>
-      <div className="total-tasks col-xs-3">
+      <div className="total-tasks col-xs-2">
         <div id="value">
           {activeTasks}
         </div>
@@ -46,13 +46,13 @@ const SlaveAggregates = ({slaves, slaveUsages, activeTasks}) => {
           Tasks Running
         </div>
       </div>
-      <div className="avg-cpu col-xs-3">
+      <div className="avg-cpu col-xs-2">
         <CircularProgressbar percentage={getCpuUtilizationPct(slaves, slaveUsages)} initialAnimation={true} textForPercentage={(pct) => `${pct}%`} />
         <div id="label">
           Cpu
         </div>
       </div>
-      <div className="avg-memory col-xs-3">
+      <div className="avg-memory col-xs-2">
         <CircularProgressbar percentage={getMemUtilizationPct(slaves, slaveUsages)} initialAnimation={true} textForPercentage={(pct) => `${pct}%`} />
         <div id="label">
           Memory
diff --git a/SingularityUI/app/components/machines/SlaveUsage.jsx b/SingularityUI/app/components/machines/SlaveUsage.jsx
index bbf24bebbe..158708c2db 100644
--- a/SingularityUI/app/components/machines/SlaveUsage.jsx
+++ b/SingularityUI/app/components/machines/SlaveUsage.jsx
@@ -5,8 +5,8 @@ import { FetchSlaveUsages, FetchSlaves } from '../../actions/api/slaves';
 import { FetchSingularityStatus } from '../../actions/api/state';
 import { STAT_NAMES, WHOLE_NUMBER, HEALTH_SCALE_MAX } from './Constants';
 import Utils from '../../utils';
+import ResourceHealthData from './ResourceHealthData';
 import SlaveAggregates from './SlaveAggregates';
-import SlaveResourceHealth from './SlaveResourceHealth';
 
 const getSlaveInfo = (slaves, slaveUsage) => {
   return _.findWhere(slaves, {'id' : slaveUsage.slaveId});
@@ -31,29 +31,11 @@ const SlaveUsage = ({slaves, slaveUsages, activeTasks}) => {
   const utilizationData = getUtilizationData(activeSlaves, slaveUsages);
 
   const cpuHealthData = utilizationData.sort((a, b) => a.cpuUtilized - b.cpuUtilized).map((data, index) => {
-    return (
-      <SlaveResourceHealth
-        key={index}
-        slaveUsage={data.slaveUsage}
-        slaveInfo={data.slaveInfo}
-        resource={STAT_NAMES.cpusUsedStat}
-        totalResource={data.totalCpuResource}
-        utilization={data.cpuUtilized}
-      />
-    );
+    return <ResourceHealthData key={index} utilizationData={data} statName={STAT_NAMES.cpusUsedStat} />;
   });
 
   const memoryHealthData = utilizationData.sort((a, b) => a.memoryUtilized - b.memoryUtilized).map((data, index) => {
-    return (
-      <SlaveResourceHealth
-        key={index}
-        slaveUsage={data.slaveUsage}
-        slaveInfo={data.slaveInfo}
-        resource={STAT_NAMES.memoryBytesUsedStat}
-        totalResource={data.totalMemoryResource}
-        utilization={data.memoryUtilized}
-      />
-    );
+    return <ResourceHealthData key={index} utilizationData={data} statName={STAT_NAMES.memoryBytesUsedStat} />;
   });
 
   return (
diff --git a/SingularityUI/app/styles/stylus/slaveUsage.styl b/SingularityUI/app/styles/stylus/slaveUsage.styl
index c361885787..07e965cb41 100644
--- a/SingularityUI/app/styles/stylus/slaveUsage.styl
+++ b/SingularityUI/app/styles/stylus/slaveUsage.styl
@@ -1,20 +1,38 @@
 #slave-usage-page
-	margin-left : 25px
+	margin-left : 85px
 
-// SlaveAggregates
-.avg-cpu
-	width : 150px
+#slave-usage-page h1
+	height: 43px;
+	font-size: 36px;
+	font-weight: 500;
+	line-height: 44px;
+	color: #425B76;
 
-.avg-memory
-	width : 150px
+#slave-usage-page hr
+	margin-left : -85px
+
+// SlaveAggregates
+.total-slaves, .total-tasks
+	padding-top : 20px
 
 .total-slaves #value, .total-tasks #value
-	font-size : 70px
+	font-size : 60px
 	text-align : center
+	color: #7C98B6;
 
 .total-slaves #label, .total-tasks #label, .avg-cpu #label, .avg-memory #label
 	font-size : 20px
 	text-align : center
+	font-weight: 300;
+	color: #7C98B6;
+
+.avg-cpu
+	margin-left : 10px
+	width : 160px
+
+.avg-memory
+	margin-left : 10px
+	width : 160px
 
 // SlaveHealth
 .single-slave-btn
@@ -26,6 +44,29 @@
 .single-slave-btn:hover
 	opacity : 1
 
+#slave-usage-quick-stats
+	color : #7C98B6
+	margin-bottom : 0
+	font-size : 14px
+	height : 34px
+
+#slave-usage-quick-stats #slave-name
+	padding-top : 10px
+	padding-right : 0px
+
+#slave-usage-quick-stats #pct-utilized
+	color : #425B76
+	text-align : center
+
+#slave-usage-quick-stats #status
+	font-size : 12px
+	padding-left : 3px
+	white-space : nowrap
+
+#slave-usage-quick-stats #memory-stats
+	padding-left : 5px
+
+
 // SlaveHealthMenuItems
 .dropdown-menu
 	border-radius : 0px
diff --git a/SingularityUI/app/utils.es6 b/SingularityUI/app/utils.es6
index 3ae704c252..742b3f0e2a 100644
--- a/SingularityUI/app/utils.es6
+++ b/SingularityUI/app/utils.es6
@@ -46,8 +46,8 @@ const Utils = {
     ));
   },
 
-  humanizeSlaveHostName(longHostName) {
-    return (config.shortenSlaveUsageHostname ? longHostName.split('.')[0] : longHostName);
+  humanizeSlaveHostName(longHostName, override=false) {
+    return (config.shortenSlaveUsageHostname || override ? longHostName.split('.')[0] : longHostName);
   },
 
   timestampFromNow(millis) {

From c9fe9270371198915b6505cf50bdf8f9461fd390 Mon Sep 17 00:00:00 2001
From: Mathurshan Vimalesvaran <mvimalesvaran@hubspot.com>
Date: Mon, 13 Mar 2017 17:54:28 -0400
Subject: [PATCH 41/42] increase margin, tooltip on bottom

---
 SingularityUI/app/components/machines/ResourceHealthData.jsx | 3 ++-
 SingularityUI/app/styles/stylus/slaveUsage.styl              | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/SingularityUI/app/components/machines/ResourceHealthData.jsx b/SingularityUI/app/components/machines/ResourceHealthData.jsx
index 5885b00998..3860cae046 100644
--- a/SingularityUI/app/components/machines/ResourceHealthData.jsx
+++ b/SingularityUI/app/components/machines/ResourceHealthData.jsx
@@ -5,6 +5,7 @@ import { OverlayTrigger, Popover } from 'react-bootstrap';
 import { STAT_NAMES, HUNDREDTHS_PLACE, HEALTH_SCALE, HEALTH_SCALE_MAX } from './Constants';
 
 const overlayTriggers = ['hover', 'focus'];
+const overlayPlacement = 'bottom';
 
 const getTotalForStat = (statName, data) => {
   switch (statName) {
@@ -60,7 +61,7 @@ const slaveQuickStats = (data) => {
 
 const ResourceHealthData = ({utilizationData, statName}) => {
   return (
-    <OverlayTrigger trigger={overlayTriggers} overlay={slaveQuickStats(utilizationData)}>
+    <OverlayTrigger trigger={overlayTriggers} overlay={slaveQuickStats(utilizationData)} placement={overlayPlacement}>
       <span>
         <SlaveResourceHealth
           slaveUsage={utilizationData.slaveUsage}
diff --git a/SingularityUI/app/styles/stylus/slaveUsage.styl b/SingularityUI/app/styles/stylus/slaveUsage.styl
index 07e965cb41..f344cef005 100644
--- a/SingularityUI/app/styles/stylus/slaveUsage.styl
+++ b/SingularityUI/app/styles/stylus/slaveUsage.styl
@@ -1,5 +1,6 @@
 #slave-usage-page
 	margin-left : 85px
+	margin-right : 85px
 
 #slave-usage-page h1
 	height: 43px;

From a37cdb0d074d4b63fc19b190faa67e1a193126a7 Mon Sep 17 00:00:00 2001
From: Stephen Salinas <ssalinas@hubspot.com>
Date: Mon, 20 Mar 2017 10:14:42 -0400
Subject: [PATCH 42/42] missed merges in package.json

---
 SingularityUI/package.json | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/SingularityUI/package.json b/SingularityUI/package.json
index ba65c4ac31..701e8100e3 100644
--- a/SingularityUI/package.json
+++ b/SingularityUI/package.json
@@ -81,12 +81,9 @@
     "babel-plugin-transform-react-jsx": "^6.8.0",
     "babel-plugin-transform-runtime": "^6.9.0",
     "babel-preset-es2015": "^6.9.0",
-<<<<<<< HEAD
     "chroma-js": "^1.2.2",
-=======
     "babel-register": "^6.9.0",
     "browser-sync": "^2.13.0",
->>>>>>> master
     "case-sensitive-paths-webpack-plugin": "^1.1.3",
     "css-loader": "^0.23.1",
     "del": "^2.2.0",
@@ -106,11 +103,8 @@
     "mocha": "^3.1.2",
     "nib": "^1.1.0",
     "node-sass": "^3.8.0",
-<<<<<<< HEAD
     "react-copy-to-clipboard": "^4.2.3",
     "react-circular-progressbar": "^0.1.3",
-=======
->>>>>>> master
     "react-hot-loader": "^3.0.0-beta.2",
     "resolve-url-loader": "^1.6.0",
     "sass-loader": "^4.0.0",