Manage Hosts filtered icons (#987)

* Cleaning up rendered icons on hosts page

* Fixing lint

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 {
             <tr>
               <th>Platform</th>
               <td>
-                <Icon name={hostHelpers.platformIconClass(platform)} />
+                <PlatformIcon name={platform} />
                 <span className={`${hostBaseClass}__platform-text`}> {platform}</span>
               </td>
             </tr>

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 (
       <tr key={`host-${host.id}-table`}>
         <td className={`${baseClass}__hostname`}>{host.hostname}</td>
-        <td className={statusClassName}><Icon name={statusIconClass(host.status)} /></td>
-        <td><Icon name={platformIconClass(host.platform)} /> {host.os_version}</td>
+        <td className={statusClassName}><Icon name={iconClassForLabel(host.status)} /></td>
+        <td><PlatformIcon name={host.platform} /> {host.os_version}</td>
         <td>{host.osquery_version}</td>
         <td>{host.ip}</td>
         <td>{host.mac}</td>

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 <span className={iconClasses}>{name || 'All'}</span>;

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 <PlatformIcon name={platformIconClass(selectedLabel.display_text)} />;
+    }
+
+    return <Icon name={iconClassForLabel(selectedLabel)} />;
+  }
+
   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 (
       <div className={`${baseClass}__header`}>
         <h1 className={`${baseClass}__title`}>
-          <Icon name={iconClassForLabel(selectedLabel)} />
+          {renderIcon()}
           <span>{displayText}</span>
         </h1>
 

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 {

frontend/utilities/icon_class.js

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

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

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;