diff --git a/frontend/components/hosts/HostsTable/_styles.scss b/frontend/components/hosts/HostsTable/_styles.scss
index a7b6a330b8..53d7bb26a9 100644
--- a/frontend/components/hosts/HostsTable/_styles.scss
+++ b/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;
}
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
index 35748650d4..c9ab52db61 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
+++ b/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 (
;
+ return ;
}
diff --git a/frontend/utilities/icon_class.js b/frontend/utilities/icon_class.js
index 86334c7ce8..83d6003f68 100644
--- a/frontend/utilities/icon_class.js
+++ b/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 '';
}