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" />