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;