Render label description or default description (#1215)

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 <span className={`${baseClass}__description`}>{description}</span>;
+    return <span className={`${baseClass}__description`}>{titleDescription}</span>;
   }
 
   render () {

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,

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;

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 (
       <div className={`${baseClass}__header`}>
         {renderDeleteButton()}
-
         <h1 className={`${baseClass}__title`}>
           {renderIcon()}
           <span>{displayText}</span>
         </h1>
-
-        { renderQuery() }
-
-        {description &&
-          <div className={`${baseClass}__description`}>
-            <h2>Description</h2>
-            <p>{description}</p>
-          </div>
-        }
-
+        {renderQuery()}
+        <div className={`${baseClass}__description`}>
+          <h2>Description</h2>
+          <p>{description || <em>{defaultDescription}</em>}</p>
+        </div>
         <div className={`${baseClass}__topper`}>
           <p className={`${baseClass}__host-count`}>{hostsTotalDisplay}</p>
           <Rocker

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx

@@ -224,6 +224,37 @@ describe('ManageHostsPage - component', () => {
         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(<ManageHostsPage {...pageProps} />);
+
+      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(<ManageHostsPage {...pageProps} />);
+
+      expect(Page.find('.manage-hosts__header').text())
+        .toInclude(labelDescription);
+      expect(Page.find('.manage-hosts__header').text())
+        .toNotInclude(defaultDescription);
+    });
   });
 
   describe('Edit a label', () => {

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;