Sort hosts cards alphabetically and by status (#941)

frontend/components/hosts/HostsTable/_styles.scss

@@ -4,7 +4,7 @@
     border-radius: 3px;
     box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.12);
     margin-top: $pad-base;
-    max-height: 550px;
+    max-height: 85vh;
     overflow: scroll;
   }
 

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import AceEditor from 'react-ace';
 import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
+import { orderBy, sortBy } from 'lodash';
 
 import entityGetter from 'redux/utilities/entityGetter';
 import hostActions from 'redux/nodes/entities/hosts/actions';
@@ -139,6 +140,13 @@ export class ManageHostsPage extends Component {
     return false;
   }
 
+  sortHosts = (hosts) => {
+    const alphaHosts = sortBy(hosts, (h) => { return h.hostname; });
+    const orderedHosts = orderBy(alphaHosts, 'status', 'desc');
+
+    return orderedHosts;
+  }
+
   renderQuery = () => {
     const { selectedLabel } = this.props;
     const { label_type: labelType, query } = selectedLabel;
@@ -213,14 +221,16 @@ export class ManageHostsPage extends Component {
 
   renderHosts = () => {
     const { display, hosts, isAddLabel } = this.props;
-    const { onHostDetailActionClick } = this;
+    const { onHostDetailActionClick, sortHosts } = this;
 
     if (isAddLabel) {
       return false;
     }
 
+    const sortedHosts = sortHosts(hosts);
+
     if (display === 'Grid') {
-      return hosts.map((host) => {
+      return sortedHosts.map((host) => {
         return (
           <HostDetails
             host={host}
@@ -232,7 +242,7 @@ export class ManageHostsPage extends Component {
       });
     }
 
-    return <HostsTable hosts={hosts} />;
+    return <HostsTable hosts={sortedHosts} />;
   }
 
 

frontend/utilities/icon_class.js

@@ -6,6 +6,8 @@ export const statusIconClass = (status = '') => {
       return 'success-check';
     case 'offline':
       return 'offline';
+    case 'mia':
+      return 'mia';
     default:
       return '';
   }