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 ''; }