diff --git a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx index a2ac8e7eef..9e22f0cb44 100644 --- a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx +++ b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx @@ -12,7 +12,7 @@ class PanelGroupItem extends Component { static propTypes = { item: PropTypes.shape({ count: PropTypes.number, - description: PropTypes.string, + title_description: PropTypes.string, display_text: PropTypes.string, type: PropTypes.string, }).isRequired, @@ -48,13 +48,13 @@ class PanelGroupItem extends Component { renderDescription = () => { const { item } = this.props; - const { description, type } = item; + const { title_description: titleDescription, type } = item; - if (!description || type === 'custom') { + if (!titleDescription || type === 'custom') { return false; } - return {description}; + return {titleDescription}; } render () { diff --git a/frontend/kolide/helpers.js b/frontend/kolide/helpers.js index aedbe65ae9..bc8f16de57 100644 --- a/frontend/kolide/helpers.js +++ b/frontend/kolide/helpers.js @@ -26,6 +26,46 @@ const labelSlug = (label) => { return kebabCase(lowerDisplayText); }; +const labelStubs = [ + { + id: 'new', + count: 0, + display_text: 'NEW', + slug: 'recently_added', + statusLabelKey: 'new_count', + title_description: '(added in last 24hrs)', + type: 'status', + }, + { + id: 'online', + count: 0, + description: 'Hosts that have recently checked-in to kolide and are ready to run queries.', + display_text: 'ONLINE', + slug: 'online', + statusLabelKey: 'online_count', + type: 'status', + }, + { + id: 'offline', + count: 0, + description: 'Hosts that have not checked-in to kolide recently.', + display_text: 'OFFLINE', + slug: 'offline', + statusLabelKey: 'offline_count', + type: 'status', + }, + { + id: 'mia', + count: 0, + description: 'Hosts that have not been seen by Kolide in more than 30 days.', + display_text: 'MIA', + slug: 'mia', + statusLabelKey: 'mia_count', + title_description: '(offline > 30 days)', + type: 'status', + }, +]; + const filterTarget = (targetType) => { return (target) => { return target.target_type === targetType ? [target.id] : []; @@ -51,6 +91,26 @@ export const formatConfigDataForServer = (config) => { }; }; +const formatLabelResponse = (response) => { + const labelTypeForDisplayText = { + 'All Hosts': 'all', + 'MS Windows': 'platform', + 'CentOS Linux': 'platform', + 'Mac OS X': 'platform', + 'Ubuntu Linux': 'platform', + }; + + const labels = response.labels.map((label) => { + return { + ...label, + slug: labelSlug(label), + type: labelTypeForDisplayText[label.display_text] || 'custom', + }; + }); + + return labels.concat(labelStubs); +}; + export const formatSelectedTargetsForApi = (selectedTargets, appendID = false) => { const targets = selectedTargets || []; const hosts = flatMap(targets, filterTarget('hosts')); @@ -143,6 +203,7 @@ const setupData = (formData) => { export default { addGravatarUrlToResource, formatConfigDataForServer, + formatLabelResponse, formatScheduledQueryForClient, formatScheduledQueryForServer, formatSelectedTargetsForApi, diff --git a/frontend/kolide/index.js b/frontend/kolide/index.js index b9b2b69c7a..19dcfa5156 100644 --- a/frontend/kolide/index.js +++ b/frontend/kolide/index.js @@ -93,30 +93,7 @@ class Kolide extends Base { const { LABELS } = endpoints; return this.authenticatedGet(this.endpoint(LABELS)) - .then((response) => { - const labelTypeForDisplayText = { - 'All Hosts': 'all', - 'MS Windows': 'platform', - 'CentOS Linux': 'platform', - 'Mac OS X': 'platform', - 'Ubuntu Linux': 'platform', - }; - const labels = response.labels.map((label) => { - return { - ...label, - slug: helpers.labelSlug(label), - type: labelTypeForDisplayText[label.display_text] || 'custom', - }; - }); - const stubbedLabels = [ - { id: 'new', display_text: 'NEW', description: '(added in last 24hrs)', slug: 'recently_added', type: 'status', count: 0, statusLabelKey: 'new_count' }, - { id: 'online', display_text: 'ONLINE', slug: 'online', type: 'status', count: 0, statusLabelKey: 'online_count' }, - { id: 'offline', display_text: 'OFFLINE', slug: 'offline', type: 'status', count: 0, statusLabelKey: 'offline_count' }, - { id: 'mia', display_text: 'MIA', description: '(offline > 30 days)', slug: 'mia', type: 'status', count: 0, statusLabelKey: 'mia_count' }, - ]; - - return labels.concat(stubbedLabels); - }); + .then(response => helpers.formatLabelResponse(response)); }, update: (label, updateAttrs) => { const { LABELS } = endpoints; diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx index 6232aaf799..dc9f2fb2f8 100644 --- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx +++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx @@ -443,25 +443,20 @@ export class ManageHostsPage extends Component { const hostCount = type === 'status' ? statusLabels[`${statusLabelKey}`] : count; const hostsTotalDisplay = hostCount === 1 ? '1 Host Total' : `${hostCount} Hosts Total`; + const defaultDescription = 'No description available.'; return (
{renderDeleteButton()} -

{renderIcon()} {displayText}

- - { renderQuery() } - - {description && -
-

Description

-

{description}

-
- } - + {renderQuery()} +
+

Description

+

{description || {defaultDescription}}

+

{hostsTotalDisplay}

{ selectedLabel: windowsLabel, }); }); + + it('Renders the default description if the selected label does not have a description', () => { + const defaultDescription = 'No description available.'; + const noDescriptionLabel = { ...allHostsLabel, description: undefined }; + const pageProps = { + ...props, + selectedLabel: noDescriptionLabel, + }; + + const Page = mount(); + + expect(Page.find('.manage-hosts__header').text()) + .toInclude(defaultDescription); + }); + + it('Renders the label description if the selected label has a description', () => { + const defaultDescription = 'No description available.'; + const labelDescription = 'This is the label description'; + const noDescriptionLabel = { ...allHostsLabel, description: labelDescription }; + const pageProps = { + ...props, + selectedLabel: noDescriptionLabel, + }; + + const Page = mount(); + + expect(Page.find('.manage-hosts__header').text()) + .toInclude(labelDescription); + expect(Page.find('.manage-hosts__header').text()) + .toNotInclude(defaultDescription); + }); }); describe('Edit a label', () => { diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss index c974965771..b4836a215b 100644 --- a/frontend/pages/hosts/ManageHostsPage/_styles.scss +++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss @@ -45,7 +45,7 @@ &__description { line-height: 1.54; letter-spacing: 0.5px; - margin: 0; + margin: 0 0 15px; h2 { text-transform: uppercase;