add cpu/load sorting on hosts table

ui/src/hosts/apis/index.js

@@ -13,13 +13,13 @@ export function getCpuAndLoadForHosts(proxyLink) {
       const meanIndex = s.columns.findIndex((col) => col === 'mean');
       hosts[s.tags.host] = {
         name: s.tags.host,
-        cpu: (Math.round(s.values[0][meanIndex] * precision) / precision).toFixed(2),
+        cpu: (Math.round(s.values[0][meanIndex] * precision) / precision),
       };
     });
 
     resp.data.results[1].series.forEach((s) => {
       const meanIndex = s.columns.findIndex((col) => col === 'mean');
-      hosts[s.tags.host].load = (Math.round(s.values[0][meanIndex] * precision) / precision).toFixed(2);
+      hosts[s.tags.host].load = (Math.round(s.values[0][meanIndex] * precision) / precision);
     });
 
     return _.values(hosts);

ui/src/hosts/components/HostsTable.js

@@ -5,8 +5,8 @@ const HostsTable = React.createClass({
   propTypes: {
     hosts: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string,
-      cpu: PropTypes.string,
-      load: PropTypes.string,
+      cpu: PropTypes.number,
+      load: PropTypes.number,
     })),
     source: PropTypes.shape({
       id: PropTypes.string.isRequired,
@@ -19,6 +19,8 @@ const HostsTable = React.createClass({
       searchTerm: '',
       filteredHosts: this.props.hosts,
       sortDirection: null,
+      sortKey: null,
+      sortType: null,
     };
   },
 
@@ -31,27 +33,29 @@ const HostsTable = React.createClass({
     this.setState({searchTerm, filteredHosts: hosts});
   },
 
-  changeSort() {
-    if (this.state.sortDirection === 'asc') {
-      this.setState({sortDirection: 'desc'});
+  changeSort(key) {
+    // if we're using the key, reverse order; otherwise, set it with ascending
+    if (this.state.sortKey === key) {
+      const reverseDirection = (this.state.sortDirection === 'asc' ? 'desc' : 'asc');
+      this.setState({sortDirection: reverseDirection});
     } else {
-      this.setState({sortDirection: 'asc'});
+      this.setState({sortKey: key, sortDirection: 'asc'});
     }
   },
 
-  sort(hosts, direction) {
+  sort(hosts, key, direction) {
     switch (direction) {
       case 'asc':
-        return _.sortBy(hosts, (e) => e.name);
+        return _.sortBy(hosts, (e) => e[key]);
       case 'desc':
-        return _.sortBy(hosts, (e) => e.name).reverse();
+        return _.sortBy(hosts, (e) => e[key]).reverse();
       default:
         return hosts;
     }
   },
 
   render() {
-    const hosts = this.sort(this.state.filteredHosts, this.state.sortDirection);
+    const hosts = this.sort(this.state.filteredHosts, this.state.sortKey, this.state.sortDirection);
     const {source} = this.props;
 
     return (
@@ -64,10 +68,10 @@ const HostsTable = React.createClass({
           <table className="table v-center">
             <thead>
               <tr>
-                <th onClick={this.changeSort} className="sortable-header">Hostname</th>
+                <th onClick={() => this.changeSort('name')} className="sortable-header">Hostname</th>
                 <th className="text-center">Status</th>
-                <th>CPU</th>
-                <th>Load</th>
+                <th onClick={() => this.changeSort('cpu')} className="sortable-header">CPU</th>
+                <th onClick={() => this.changeSort('load')} className="sortable-header">Load</th>
                 <th>Apps</th>
               </tr>
             </thead>
@@ -78,8 +82,8 @@ const HostsTable = React.createClass({
                     <tr key={name}>
                       <td className="monotype"><a href={`/sources/${source.id}/hosts/${name}`}>{name}</a></td>
                       <td className="text-center"><div className="table-dot dot-success"></div></td>
-                      <td className="monotype">{`${cpu}%`}</td>
-                      <td className="monotype">{`${load}`}</td>
+                      <td className="monotype">{`${cpu.toFixed(2)}%`}</td>
+                      <td className="monotype">{`${load.toFixed(2)}`}</td>
                       <td className="monotype">influxdb, ntp, system</td>
                     </tr>
                   );