From f28bd803c4255f65ba7cffb366f3a7311cb2c102 Mon Sep 17 00:00:00 2001 From: Kyle Knight Date: Tue, 17 Jan 2017 12:55:19 -0600 Subject: [PATCH] Manage Hosts filtered icons (#987) * Cleaning up rendered icons on hosts page * Fixing lint --- .../TargetDetails/TargetDetails.jsx | 3 +- .../hosts/HostsTable/HostsTable.jsx | 7 +++-- .../icons/PlatformIcon/PlatformIcon.jsx | 24 ++------------ .../hosts/ManageHostsPage/ManageHostsPage.jsx | 16 ++++++++-- .../pages/hosts/ManageHostsPage/_styles.scss | 12 +++++++ frontend/utilities/icon_class.js | 31 ------------------- frontend/utilities/icon_class_for_label.js | 2 +- frontend/utilities/platform_icon_class.js | 24 ++++++++++++++ 8 files changed, 59 insertions(+), 60 deletions(-) delete mode 100644 frontend/utilities/icon_class.js create mode 100644 frontend/utilities/platform_icon_class.js diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx index 8a97707f2f..2954ec9196 100644 --- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx +++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx @@ -5,6 +5,7 @@ import classnames from 'classnames'; import hostHelpers from 'components/hosts/HostDetails/helpers'; import Icon from 'components/icons/Icon'; +import PlatformIcon from 'components/icons/PlatformIcon'; import targetInterface from 'interfaces/target'; const baseClass = 'target-details'; @@ -79,7 +80,7 @@ class TargetDetails extends Component { Platform - + {platform} diff --git a/frontend/components/hosts/HostsTable/HostsTable.jsx b/frontend/components/hosts/HostsTable/HostsTable.jsx index 5efd9e507f..8c0dda4fe8 100644 --- a/frontend/components/hosts/HostsTable/HostsTable.jsx +++ b/frontend/components/hosts/HostsTable/HostsTable.jsx @@ -2,8 +2,9 @@ import React, { Component, PropTypes } from 'react'; import classnames from 'classnames'; import Icon from 'components/icons/Icon'; +import PlatformIcon from 'components/icons/PlatformIcon'; import hostInterface from 'interfaces/host'; -import { platformIconClass, statusIconClass } from 'utilities/icon_class'; +import iconClassForLabel from 'utilities/icon_class_for_label'; const baseClass = 'hosts-table'; @@ -18,8 +19,8 @@ class HostsTable extends Component { return ( {host.hostname} - - {host.os_version} + + {host.os_version} {host.osquery_version} {host.ip} {host.mac} diff --git a/frontend/components/icons/PlatformIcon/PlatformIcon.jsx b/frontend/components/icons/PlatformIcon/PlatformIcon.jsx index f2b4dc3f68..2c3e91d6bc 100644 --- a/frontend/components/icons/PlatformIcon/PlatformIcon.jsx +++ b/frontend/components/icons/PlatformIcon/PlatformIcon.jsx @@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react'; import classnames from 'classnames'; import Icon from 'components/icons/Icon'; +import platformIconClass from 'utilities/platform_icon_class'; const baseClass = 'platform-icon'; @@ -14,31 +15,10 @@ export class PlatformIcon extends Component { 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, name, fw, size, title } = this.props; const iconClasses = classnames(baseClass, className); - const iconName = findIcon(); + const iconName = platformIconClass(name); if (!iconName) { return {name || 'All'}; diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx index c6b8ddcfa0..ada828861a 100644 --- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx +++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx @@ -14,6 +14,7 @@ import hostInterface from 'interfaces/host'; import HostSidePanel from 'components/side_panels/HostSidePanel'; import HostsTable from 'components/hosts/HostsTable'; import Icon from 'components/icons/Icon'; +import PlatformIcon from 'components/icons/PlatformIcon'; import osqueryTableInterface from 'interfaces/osquery_table'; import paths from 'router/paths'; import QueryForm from 'components/forms/queries/QueryForm'; @@ -22,6 +23,7 @@ import Rocker from 'components/buttons/Rocker'; import { selectOsqueryTable } from 'redux/nodes/components/QueryPages/actions'; import statusLabelsInterface from 'interfaces/status_labels'; import iconClassForLabel from 'utilities/icon_class_for_label'; +import platformIconClass from 'utilities/platform_icon_class'; const NEW_LABEL_HASH = '#new_label'; const baseClass = 'manage-hosts'; @@ -155,6 +157,16 @@ export class ManageHostsPage extends Component { return orderedHosts; } + renderIcon = () => { + const { selectedLabel } = this.props; + + if (platformIconClass(selectedLabel.display_text)) { + return ; + } + + return ; + } + renderQuery = () => { const { selectedLabel } = this.props; const { label_type: labelType, query } = selectedLabel; @@ -183,7 +195,7 @@ export class ManageHostsPage extends Component { } renderHeader = () => { - const { renderQuery } = this; + const { renderIcon, renderQuery } = this; const { display, isAddLabel, selectedLabel } = this.props; if (!selectedLabel || isAddLabel) { @@ -202,7 +214,7 @@ export class ManageHostsPage extends Component { return (

- + {renderIcon()} {displayText}

diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss index 0b309dc496..2299766fec 100644 --- a/frontend/pages/hosts/ManageHostsPage/_styles.scss +++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss @@ -13,6 +13,18 @@ color: $text-light; margin-right: 15px; } + + .kolidecon-success-check { + color: $success; + } + + .kolidecon-offline { + color: $alert; + } + + .kolidecon-mia { + color: $text-ultradark; + } } &__description { diff --git a/frontend/utilities/icon_class.js b/frontend/utilities/icon_class.js deleted file mode 100644 index 83d6003f68..0000000000 --- a/frontend/utilities/icon_class.js +++ /dev/null @@ -1,31 +0,0 @@ -export const statusIconClass = (status = '') => { - const lowerStatus = status.toLowerCase(); - - switch (lowerStatus) { - case 'online': - return 'success-check'; - case 'offline': - return 'offline'; - case 'mia': - return 'mia'; - default: - return ''; - } -}; - -export const platformIconClass = (platform = '') => { - if (!platform) return ''; - - const lowerPlatform = platform.toLowerCase(); - - switch (lowerPlatform) { - case 'darwin': - return 'apple'; - case 'linux': - return 'penguin'; - default: - return lowerPlatform; - } -}; - -export default { platformIconClass, statusIconClass }; diff --git a/frontend/utilities/icon_class_for_label.js b/frontend/utilities/icon_class_for_label.js index 4091eb6f8b..586eb7229a 100644 --- a/frontend/utilities/icon_class_for_label.js +++ b/frontend/utilities/icon_class_for_label.js @@ -4,7 +4,7 @@ export const iconClassForLabel = (label) => { if (lowerType === 'all') return 'hosts'; - switch (lowerDisplayText) { + switch (lowerDisplayText || label) { case 'offline': return 'offline'; case 'online': return 'success-check'; case 'mia': return 'mia'; diff --git a/frontend/utilities/platform_icon_class.js b/frontend/utilities/platform_icon_class.js new file mode 100644 index 0000000000..3f9a28491e --- /dev/null +++ b/frontend/utilities/platform_icon_class.js @@ -0,0 +1,24 @@ +export const platformIconClass = (platform = '') => { + if (!platform) return false; + + const lowerPlatform = platform.toLowerCase(); + + switch (lowerPlatform) { + 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 'apple': 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; + } +}; + +export default platformIconClass;