diff --git a/frontend/components/buttons/Rocker/Rocker.jsx b/frontend/components/buttons/Rocker/Rocker.jsx
index 3230c9ade8..052700c66d 100644
--- a/frontend/components/buttons/Rocker/Rocker.jsx
+++ b/frontend/components/buttons/Rocker/Rocker.jsx
@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
import { noop } from 'lodash';
import classnames from 'classnames';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
class Rocker extends Component {
diff --git a/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx b/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
index 55a34f4a81..e3df627eeb 100644
--- a/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
+++ b/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
@@ -1,6 +1,6 @@
import React, { Component, PropTypes } from 'react';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
import Button from 'components/buttons/Button';
import Dropdown from 'components/forms/fields/Dropdown';
import Form from 'components/forms/Form';
diff --git a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx
index 5e7c5f1b2e..27c548e640 100644
--- a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx
+++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx
@@ -3,7 +3,7 @@ import classnames from 'classnames';
import Button from 'components/buttons/Button';
import formDataInterface from 'interfaces/registration_form_data';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
import Checkbox from 'components/forms/fields/Checkbox';
const baseClass = 'confirm-user-reg';
diff --git a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
index 9b00a76f3c..3addb030d5 100644
--- a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
+++ b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx
@@ -1,7 +1,7 @@
import React, { PropTypes } from 'react';
import classnames from 'classnames';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
import InputField from '../InputField';
const baseClass = 'input-icon-field';
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx
index b5c4427901..582d2262ec 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx
@@ -4,7 +4,7 @@ import AceEditor from 'react-ace';
import classnames from 'classnames';
import hostHelpers from 'components/hosts/HostDetails/helpers';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
import targetInterface from 'interfaces/target';
const baseClass = 'target-details';
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetIcon.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetIcon.jsx
index ba5ae9c223..3cc3a13c68 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetIcon.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
import targetInterface from 'interfaces/target';
const baseClass = 'target-option';
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx
index 740ba4b453..a05ebe4d73 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx
@@ -1,7 +1,7 @@
import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
import targetInterface from 'interfaces/target';
import TargetIcon from './TargetIcon';
diff --git a/frontend/components/hosts/HostDetails/HostDetails.jsx b/frontend/components/hosts/HostDetails/HostDetails.jsx
index 1259990cf6..1064af323d 100644
--- a/frontend/components/hosts/HostDetails/HostDetails.jsx
+++ b/frontend/components/hosts/HostDetails/HostDetails.jsx
@@ -3,7 +3,7 @@ import { noop } from 'lodash';
import EllipsisMenu from 'components/buttons/EllipsisMenu';
import hostInterface from 'interfaces/host';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
import { humanMemory, humanUptime, platformIconClass } from './helpers';
const baseClass = 'host-details';
diff --git a/frontend/components/hosts/HostsTable/HostsTable.jsx b/frontend/components/hosts/HostsTable/HostsTable.jsx
index d28284e7f2..4b4f1fb86c 100644
--- a/frontend/components/hosts/HostsTable/HostsTable.jsx
+++ b/frontend/components/hosts/HostsTable/HostsTable.jsx
@@ -1,7 +1,7 @@
import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
import hostInterface from 'interfaces/host';
import { platformIconClass, statusIconClass } from 'utilities/icon_class';
diff --git a/frontend/components/Icon/Icon.jsx b/frontend/components/icons/Icon/Icon.jsx
similarity index 100%
rename from frontend/components/Icon/Icon.jsx
rename to frontend/components/icons/Icon/Icon.jsx
diff --git a/frontend/components/Icon/Icon.tests.jsx b/frontend/components/icons/Icon/Icon.tests.jsx
similarity index 100%
rename from frontend/components/Icon/Icon.tests.jsx
rename to frontend/components/icons/Icon/Icon.tests.jsx
diff --git a/frontend/components/Icon/index.js b/frontend/components/icons/Icon/index.js
similarity index 100%
rename from frontend/components/Icon/index.js
rename to frontend/components/icons/Icon/index.js
diff --git a/frontend/components/icons/PlatformIcon/PlatformIcon.jsx b/frontend/components/icons/PlatformIcon/PlatformIcon.jsx
new file mode 100644
index 0000000000..c7407e3183
--- /dev/null
+++ b/frontend/components/icons/PlatformIcon/PlatformIcon.jsx
@@ -0,0 +1,59 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+
+import Icon from 'components/icons/Icon';
+
+const baseClass = 'platform-icon';
+
+export class PlatformIcon extends Component {
+ static propTypes = {
+ className: PropTypes.string,
+ fw: PropTypes.bool,
+ name: PropTypes.string.isRequired,
+ size: PropTypes.string,
+ title: PropTypes.string,
+ };
+
+ findIcon = () => {
+ const { name } = this.props;
+
+ switch (name.toLowerCase()) {
+ case 'macos': return 'apple';
+ case 'mac os x': return 'apple';
+ case 'mac osx': return 'apple';
+ case 'mac os': return 'apple';
+ case 'darwin': return 'apple';
+ case 'centos': return 'centos';
+ case 'centos linux': return 'centos';
+ case 'ubuntu': return 'ubuntu';
+ case 'ubuntu linux': return 'ubuntu';
+ case 'linux': return 'linux';
+ case 'windows': return 'windows';
+ case 'ms windows': return 'windows';
+ default: return false;
+ }
+ };
+
+ render () {
+ const { findIcon } = this;
+ const { className, fw, name, size, title } = this.props;
+ const iconClasses = classnames(baseClass, className);
+ const iconName = findIcon();
+
+ if (!iconName) {
+ return {name};
+ }
+
+ return (
+
+ );
+ }
+}
+
+export default PlatformIcon;
diff --git a/frontend/components/icons/PlatformIcon/PlatformIcon.tests.jsx b/frontend/components/icons/PlatformIcon/PlatformIcon.tests.jsx
new file mode 100644
index 0000000000..4743ba99b7
--- /dev/null
+++ b/frontend/components/icons/PlatformIcon/PlatformIcon.tests.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import expect from 'expect';
+import { mount } from 'enzyme';
+
+import PlatformIcon from './PlatformIcon';
+
+describe('PlatformIcon - component', () => {
+ it('renders', () => {
+ expect(mount().length).toEqual(1);
+ });
+
+ it('renders text if no icon', () => {
+ const component = mount();
+
+ expect(component.find('span').length).toEqual(1);
+ expect(component.text()).toInclude('blah');
+ expect(component.find('Icon').length).toEqual(0);
+ });
+});
diff --git a/frontend/components/icons/PlatformIcon/index.js b/frontend/components/icons/PlatformIcon/index.js
new file mode 100644
index 0000000000..830bf6db83
--- /dev/null
+++ b/frontend/components/icons/PlatformIcon/index.js
@@ -0,0 +1 @@
+export default from './PlatformIcon';
diff --git a/frontend/components/modals/Modal/Modal.jsx b/frontend/components/modals/Modal/Modal.jsx
index 21466c43c0..4d0414afaa 100644
--- a/frontend/components/modals/Modal/Modal.jsx
+++ b/frontend/components/modals/Modal/Modal.jsx
@@ -1,7 +1,7 @@
import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
const baseClass = 'modal';
diff --git a/frontend/components/packs/EditPackFormWrapper/EditPackFormWrapper.jsx b/frontend/components/packs/EditPackFormWrapper/EditPackFormWrapper.jsx
index 2f48aa2f0e..24b4f11d29 100644
--- a/frontend/components/packs/EditPackFormWrapper/EditPackFormWrapper.jsx
+++ b/frontend/components/packs/EditPackFormWrapper/EditPackFormWrapper.jsx
@@ -3,7 +3,7 @@ import { noop } from 'lodash';
import Button from 'components/buttons/Button';
import EditPackForm from 'components/forms/packs/EditPackForm';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
import packInterface from 'interfaces/pack';
import SelectTargetsDropdown from 'components/forms/fields/SelectTargetsDropdown';
diff --git a/frontend/components/queries/QueriesList/QueriesList.jsx b/frontend/components/queries/QueriesList/QueriesList.jsx
index 5394a770d3..cc3827d513 100644
--- a/frontend/components/queries/QueriesList/QueriesList.jsx
+++ b/frontend/components/queries/QueriesList/QueriesList.jsx
@@ -3,7 +3,7 @@ import classnames from 'classnames';
import { includes, size } from 'lodash';
import queryInterface from 'interfaces/query';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
import QueriesListItem from 'components/queries/QueriesList/QueriesListItem';
import Checkbox from 'components/forms/fields/Checkbox';
diff --git a/frontend/components/queries/QueriesList/QueriesListItem/QueriesListItem.jsx b/frontend/components/queries/QueriesList/QueriesListItem/QueriesListItem.jsx
index 8534d965f3..f670324fcc 100644
--- a/frontend/components/queries/QueriesList/QueriesListItem/QueriesListItem.jsx
+++ b/frontend/components/queries/QueriesList/QueriesListItem/QueriesListItem.jsx
@@ -1,9 +1,9 @@
import React, { Component, PropTypes } from 'react';
import Checkbox from 'components/forms/fields/Checkbox';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
+import PlatformIcon from 'components/icons/PlatformIcon';
import { isEqual } from 'lodash';
-import { platformIconClass } from 'utilities/icon_class';
import scheduledQueryInterface from 'interfaces/scheduled_query';
class QueriesListItem extends Component {
@@ -60,7 +60,7 @@ class QueriesListItem extends Component {
{name} |
{interval} |
- |
+ |
{version} |
|
diff --git a/frontend/components/queries/QueriesList/QueriesListItem/QueriesListItem.tests.jsx b/frontend/components/queries/QueriesList/QueriesListItem/QueriesListItem.tests.jsx
index 132b834b75..ac97c42aa3 100644
--- a/frontend/components/queries/QueriesList/QueriesListItem/QueriesListItem.tests.jsx
+++ b/frontend/components/queries/QueriesList/QueriesListItem/QueriesListItem.tests.jsx
@@ -13,7 +13,7 @@ describe('QueriesListItem - component', () => {
const component = mount();
expect(component.text()).toInclude(scheduledQueryStub.name);
expect(component.text()).toInclude(scheduledQueryStub.interval);
- expect(component.find('.kolidecon-apple').length).toEqual(1);
+ expect(component.find('PlatformIcon').length).toEqual(1);
});
it('renders a Checkbox component', () => {
diff --git a/frontend/components/queries/QueryResultsTable/QueryResultsTable.jsx b/frontend/components/queries/QueryResultsTable/QueryResultsTable.jsx
index 917b439efe..adef8803be 100644
--- a/frontend/components/queries/QueryResultsTable/QueryResultsTable.jsx
+++ b/frontend/components/queries/QueryResultsTable/QueryResultsTable.jsx
@@ -4,7 +4,7 @@ import { get, keys, omit, values } from 'lodash';
import campaignInterface from 'interfaces/campaign';
import filterArrayByHash from 'utilities/filter_array_by_hash';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
import InputField from 'components/forms/fields/InputField';
import ProgressBar from 'components/ProgressBar';
diff --git a/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx b/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx
index 9a08b05542..37fd7b0e8c 100644
--- a/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx
+++ b/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx
@@ -1,7 +1,7 @@
import React, { Component, PropTypes } from 'react';
import { filter } from 'lodash';
-import Icon from 'components/Icon';
+import Icon from 'components/icons/Icon';
import InputField from 'components/forms/fields/InputField';
import labelInterface from 'interfaces/label';
import PanelGroup from 'components/side_panels/HostSidePanel/PanelGroup';
@@ -50,18 +50,21 @@ class HostSidePanel extends Component {
groupItems={allHostLabels}
onLabelClick={onLabelClick}
selectedLabel={selectedLabel}
+ type="all-hosts"
/>
@@ -82,6 +85,7 @@ class HostSidePanel extends Component {
groupItems={customLabels}
onLabelClick={onLabelClick}
selectedLabel={selectedLabel}
+ type="label"
/>