Show red indicator when a host is down (#1365)

* Green for positive uptime, red otherwise

* Update CHANGELOG

* Handle class name construction with classnames module

CHANGELOG.md

@@ -4,6 +4,7 @@
   1. [#1364](https://github.com/influxdata/chronograf/pull/1364): Fix link to home when using the --basepath option
 ### Features
 ### UI Improvements
+  1. [#1365](https://github.com/influxdata/chronograf/pull/1365): Show red indicator on Hosts Page for an offline host
 
 ## v1.2.0-beta10 [2017-04-28]
 

ui/src/hosts/components/HostsTable.js

@@ -1,6 +1,9 @@
 import React, {PropTypes} from 'react'
-import shallowCompare from 'react-addons-shallow-compare'
 import {Link} from 'react-router'
+
+import shallowCompare from 'react-addons-shallow-compare'
+import classnames from 'classnames'
+
 import _ from 'lodash'
 
 const {arrayOf, bool, number, shape, string} = PropTypes
@@ -187,19 +190,19 @@ const HostRow = React.createClass({
     const {host, source} = this.props
     const {name, cpu, load, apps = []} = host
 
-    let stateStr = ''
-    if (host.deltaUptime < 0) {
-      stateStr = 'table-dot dot-critical'
-    } else if (host.deltaUptime > 0) {
-      stateStr = 'table-dot dot-success'
-    }
-
     return (
       <tr>
         <td className="monotype">
           <Link to={`/sources/${source.id}/hosts/${name}`}>{name}</Link>
         </td>
-        <td style={{width: '74px'}}><div className={stateStr} /></td>
+        <td style={{width: '74px'}}>
+          <div
+            className={classnames(
+              'table-dot',
+              host.deltaUptime > 0 ? 'dot-success' : 'dot-critical'
+            )}
+          />
+        </td>
         <td className="monotype" style={{width: '70px'}}>
           {isNaN(cpu) ? 'N/A' : `${cpu.toFixed(2)}%`}
         </td>