diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx index cf4ce0714e..c6b8ddcfa0 100644 --- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx +++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx @@ -2,7 +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 { filter, orderBy, sortBy } from 'lodash'; import entityGetter from 'redux/utilities/entityGetter'; import { getStatusLabelCounts, setDisplay } from 'redux/nodes/components/ManageHostsPage/actions'; @@ -134,6 +134,20 @@ export class ManageHostsPage extends Component { return false; } + filterHosts = () => { + const { hosts: allHosts, selectedLabel } = this.props; + + // TODO: Filter custom labels by their host_ids attribute + if (!selectedLabel || selectedLabel.type === 'custom' || selectedLabel.type === 'all') { + return allHosts; + } + + const { type } = selectedLabel; + const filterObject = type === 'status' ? { status: selectedLabel.slug } : { [type]: selectedLabel[type] }; + + return filter(allHosts, filterObject); + } + sortHosts = (hosts) => { const alphaHosts = sortBy(hosts, (h) => { return h.hostname; }); const orderedHosts = orderBy(alphaHosts, 'status', 'desc'); @@ -214,14 +228,15 @@ export class ManageHostsPage extends Component { } renderHosts = () => { - const { display, hosts, isAddLabel } = this.props; - const { onHostDetailActionClick, sortHosts } = this; + const { display, isAddLabel } = this.props; + const { onHostDetailActionClick, filterHosts, sortHosts } = this; if (isAddLabel) { return false; } - const sortedHosts = sortHosts(hosts); + const filteredHosts = filterHosts(); + const sortedHosts = sortHosts(filteredHosts); if (display === 'Grid') { return sortedHosts.map((host) => { diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx index 112fbe1c33..c2505028e3 100644 --- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx +++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx @@ -5,24 +5,12 @@ import { noop } from 'lodash'; import ConnectedManageHostsPage, { ManageHostsPage } from 'pages/hosts/ManageHostsPage/ManageHostsPage'; import { connectedComponent, createAceSpy, reduxMockStore, stubbedOsqueryTable } from 'test/helpers'; +import { hostStub } from 'test/stubs'; -const host = { - detail_updated_at: '2016-10-25T16:24:27.679472917-04:00', - hostname: 'jmeller-mbp.local', - id: 1, - ip: '192.168.1.10', - mac: '10:11:12:13:14:15', - memory: 4145483776, - os_version: 'Mac OS X 10.11.6', - osquery_version: '2.0.0', - platform: 'darwin', - status: 'online', - updated_at: '0001-01-01T00:00:00Z', - uptime: 3600000000000, - uuid: '1234-5678-9101', -}; const allHostsLabel = { id: 1, display_text: 'All Hosts', slug: 'all-hosts', type: 'all', count: 22 }; const windowsLabel = { id: 2, display_text: 'Windows', slug: 'windows', type: 'platform', count: 22 }; +const offlineHost = { ...hostStub, id: 111, status: 'offline' }; +const offlineHostsLabel = { id: 5, display_text: 'OFFLINE', slug: 'offline', status: 'offline', type: 'status', count: 1 }; const mockStore = reduxMockStore({ components: { ManageHostsPage: { @@ -35,12 +23,19 @@ const mockStore = reduxMockStore({ }, }, entities: { + hosts: { + data: { + [hostStub.id]: hostStub, + [offlineHost.id]: offlineHost, + }, + }, labels: { data: { 1: allHostsLabel, 2: windowsLabel, 3: { id: 3, display_text: 'Ubuntu', slug: 'ubuntu', type: 'platform', count: 22 }, 4: { id: 4, display_text: 'ONLINE', slug: 'online', type: 'status', count: 22 }, + 5: offlineHostsLabel, }, }, }, @@ -77,13 +72,13 @@ describe('ManageHostsPage - component', () => { describe('host rendering', () => { it('renders hosts as HostDetails by default', () => { - const page = mount(); + const page = mount(); expect(page.find('HostDetails').length).toEqual(1); }); it('renders hosts as HostsTable when the display is "List"', () => { - const page = mount(); + const page = mount(); expect(page.find('HostsTable').length).toEqual(1); }); @@ -104,6 +99,26 @@ describe('ManageHostsPage - component', () => { expect(mockStore.getActions()).toInclude(toggleDisplayAction); }); + + it('filters hosts', () => { + const allHostsLabelPageNode = mount( + + ).node; + const offlineHostsLabelPageNode = mount( + + ).node; + + expect(allHostsLabelPageNode.filterHosts()).toEqual([hostStub, offlineHost]); + expect(offlineHostsLabelPageNode.filterHosts()).toEqual([offlineHost]); + }); }); describe('Adding a new label', () => {