Add "No Hosts" message for All Hosts label (#1045)

assets/images/laptop-plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 82 53"><defs><style>.cls-1{fill:#4a90e2;fill-rule:evenodd;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="40 13 40 21 32 21 32 23 40 23 40 31 42 31 42 23 50 23 50 21 42 21 42 13 40 13"/><path class="cls-1" d="M74,45V2a2,2,0,0,0-2-2H10A2,2,0,0,0,8,2V45H0v7a1,1,0,0,0,1,1H81a1,1,0,0,0,1-1V45ZM53,46a1,1,0,0,1-1,1H30a1,1,0,0,1-1-1V45H53Zm18-5H11V3H71Z"/></g></g></svg>

assets/images/swoop-arrow.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="178px" height="108px" viewBox="0 0 178 108" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>Combined Shape</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="add-hosts-affordance-sidebar-copy" transform="translate(-568.000000, -309.000000)" fill="#48C586">
+            <g id="Main-Content" transform="translate(216.000000, 0.000000)">
+                <g id="Group-2" transform="translate(352.000000, 309.000000)">
+                    <path d="M10.7318688,92.0395893 L16.3227065,103.025781 C17.0741655,104.502424 16.4862875,106.308658 15.0096443,107.060117 C13.533001,107.811576 11.7267672,107.223698 10.9753082,105.747055 L0.600898852,85.3609776 C-0.401975187,83.390295 0.999177207,81.0487637 3.2098487,81.0010395 L26.7768904,80.4922712 C28.4333587,80.4565111 29.8051809,81.7703547 29.8409409,83.426823 C29.876701,85.0832913 28.5628573,86.4551135 26.906389,86.4908735 L13.6708992,86.776603 C49.2846873,102.292568 87.9946564,102.461825 118.849229,87.9278586 C151.965091,72.3287174 171.940233,41.8794291 171.940233,3.1443997 C171.940233,1.48754545 173.283379,0.144399702 174.940233,0.144399702 C176.597087,0.144399702 177.940233,1.48754545 177.940233,3.1443997 C177.940233,44.2394205 156.592221,76.7814562 121.406051,93.3558102 C88.793162,108.718027 48.0438963,108.466216 10.7318688,92.0395893 Z" id="Combined-Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

frontend/components/hosts/LonelyHost/LonelyHost.jsx

@@ -0,0 +1,34 @@
+import React, { PropTypes } from 'react';
+import { noop } from 'lodash';
+
+import Button from 'components/buttons/Button';
+import laptop from '../../../../assets/images/laptop-plus.svg';
+import swoop from '../../../../assets/images/swoop-arrow.svg';
+
+const baseClass = 'lonely-host';
+
+const LonelyHost = ({ onAddHostClick = noop }) => {
+  return (
+    <div className={baseClass}>
+      <Button variant="unstyled" className={`${baseClass}__add-host-btn`} onClick={onAddHostClick}>
+        <span className={`${baseClass}__title`}>Add New Host</span>
+        <span className={`${baseClass}__icon`}>
+          <img src={laptop} className={`${baseClass}__laptop`} role="presentation" />
+        </span>
+      </Button>
+
+      <div className={`${baseClass}__content`}>
+        <h1>It&#39;s Kinda Lonely In Here...</h1>
+        <h2>Get started adding hosts to Kolide.</h2>
+        <p>This can be done individually or across your entire fleet.</p>
+        <img src={swoop} className={`${baseClass}__swoop`} role="presentation" />
+      </div>
+    </div>
+  );
+};
+
+LonelyHost.propTypes = {
+  onAddHostClick: PropTypes.func,
+};
+
+export default LonelyHost;

frontend/components/hosts/LonelyHost/_styles.scss

@@ -0,0 +1,74 @@
+.lonely-host {
+  @include display(flex);
+  padding: 16px 8px;
+
+  &__add-host-btn {
+    width: 244px;
+    height: 286px;
+    border-radius: 2px;
+    background-color: $white;
+    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.07);
+    border: solid 1px rgba(73, 143, 226, 0.22);
+    padding: 15px;
+
+    &::before {
+      @include position(absolute, 0 null null -1px);
+      content: '';
+      background-color: $link;
+      height: 6px;
+      width: calc(100% + 2px);
+      border-top-left-radius: 2px;
+      border-top-right-radius: 2px;
+    }
+  }
+
+  &__title {
+    font-size: 16px;
+    font-weight: $bold;
+    letter-spacing: 1px;
+    text-align: center;
+    color: $link;
+    border-bottom: solid 1px #eaeefb;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
+    display: block;
+  }
+
+  &__icon {
+    display: block;
+    background-color: $bg-medium;
+  }
+
+  &__laptop {
+    width: 82px;
+    margin: 60px 0;
+    fill: $alert;
+  }
+
+  &__content {
+    margin-left: 30px;
+
+    h1 {
+      font-size: 28px;
+      font-weight: $normal;
+      color: #48c586;
+      padding-left: 5px;
+    }
+
+    h2 {
+      font-size: 16px;
+      font-weight: $bold;
+      line-height: 1.5;
+      letter-spacing: -0.5px;
+      color: rgba(32, 37, 50, 0.66);
+      padding-left: 5px;
+    }
+
+    p {
+      font-size: 15px;
+      line-height: 1.6;
+      color: rgba(32, 37, 50, 0.66);
+      padding-left: 5px;
+    }
+  }
+}

frontend/components/hosts/LonelyHost/index.js

@@ -0,0 +1 @@
+export default from './LonelyHost';

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx

@@ -15,6 +15,7 @@ import HostDetails from 'components/hosts/HostDetails';
 import hostInterface from 'interfaces/host';
 import HostSidePanel from 'components/side_panels/HostSidePanel';
 import HostsTable from 'components/hosts/HostsTable';
+import LonelyHost from 'components/hosts/LonelyHost';
 import Icon from 'components/icons/Icon';
 import PlatformIcon from 'components/icons/PlatformIcon';
 import osqueryTableInterface from 'interfaces/osquery_table';
@@ -326,7 +327,7 @@ export class ManageHostsPage extends Component {
   }
 
   renderHosts = () => {
-    const { display, isAddLabel } = this.props;
+    const { display, isAddLabel, selectedLabel } = this.props;
     const { onHostDetailActionClick, filterHosts, sortHosts, renderNoHosts } = this;
 
     if (isAddLabel) {
@@ -337,6 +338,10 @@ export class ManageHostsPage extends Component {
     const sortedHosts = sortHosts(filteredHosts);
 
     if (sortedHosts.length === 0) {
+      if (selectedLabel && selectedLabel.type === 'all') {
+        return <LonelyHost />;
+      }
+
       return renderNoHosts();
     }
 

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

@@ -91,6 +91,18 @@ describe('ManageHostsPage - component', () => {
   });
 
   describe('host rendering', () => {
+    it('render LonelyHost if no hosts available', () => {
+      const page = mount(<ManageHostsPage {...props} hosts={[]} selectedLabel={allHostsLabel} />);
+
+      expect(page.find('LonelyHost').length).toEqual(1);
+    });
+
+    it('renders message if no hosts available and not on All Hosts', () => {
+      const page = mount(<ManageHostsPage {...props} hosts={[]} selectedLabel={customLabel} />);
+
+      expect(page.find('.manage-hosts__no-hosts').length).toEqual(1);
+    });
+
     it('renders hosts as HostDetails by default', () => {
       const page = mount(<ManageHostsPage {...props} hosts={[hostStub]} />);
 

frontend/styles/global/_icons.scss

@@ -14,342 +14,346 @@
 }
 
 .kolidecon-lg {
-  font-size: 1.33333333em;
+    font-size: 1.33333333em;
-  line-height: 0.75em;
+    line-height: 0.75em;
-  vertical-align: -15%;
+    vertical-align: -15%;
 }
 
 .kolidecon-2x {
-  font-size: 2em;
+    font-size: 2em;
 }
 
 .kolidecon-3x {
-  font-size: 3em;
+    font-size: 3em;
 }
 
 .kolidecon-4x {
-  font-size: 4em;
+    font-size: 4em;
 }
 
 .kolidecon-5x {
-  font-size: 5em;
+    font-size: 5em;
 }
 
 .kolidecon-fw {
-  width: 1.28571429em;
+    width: 1.28571429em;
-  text-align: center;
+    text-align: center;
 }
 
 .kolidecon-kolide-logo-flat:before {
-  content: '\f000';
+    content: '\f000';
 }
 
 .kolidecon-chevrondown:before {
-  content: '\f004';
+    content: '\f004';
 }
 
 .kolidecon-chevronleft:before {
-  content: '\f006';
+    content: '\f006';
 }
 
 .kolidecon-chevronright:before {
-  content: '\f008';
+    content: '\f008';
 }
 
 .kolidecon-chevronup:before {
-  content: '\f00a';
+    content: '\f00a';
 }
 
 .kolidecon-cpu:before {
-  content: '\f00c';
+    content: '\f00c';
 }
 
 .kolidecon-downcarat:before {
-  content: '\f00d';
+    content: '\f00d';
 }
 
 .kolidecon-filter:before {
-  content: '\f00f';
+    content: '\f00f';
 }
 
 .kolidecon-mac:before {
-  content: '\f012';
+    content: '\f012';
 }
 
 .kolidecon-memory:before {
-  content: '\f013';
+    content: '\f013';
 }
 
 .kolidecon-storage:before {
-  content: '\f019';
+    content: '\f019';
 }
 
 .kolidecon-upcarat:before {
-  content: '\f01b';
+    content: '\f01b';
 }
 
 .kolidecon-uptime:before {
-  content: '\f01c';
+    content: '\f01c';
 }
 
 .kolidecon-world:before {
-  content: '\f01d';
+    content: '\f01d';
 }
 
 .kolidecon-osquery:before {
-  content: '\f021';
+    content: '\f021';
 }
 
 .kolidecon-join:before {
-  content: '\f022';
+    content: '\f022';
 }
 
 .kolidecon-add-button:before {
-  content: '\f029';
+    content: '\f029';
 }
 
 .kolidecon-packs:before {
-  content: '\f02f';
+    content: '\f02f';
 }
 
 .kolidecon-help:before {
-  content: '\f030';
+    content: '\f030';
 }
 
 .kolidecon-admin:before {
-  content: '\f031';
+    content: '\f031';
 }
 
 .kolidecon-config:before {
-  content: '\f032';
+    content: '\f032';
 }
 
 .kolidecon-mia:before {
-  content: '\f034';
+    content: '\f034';
 }
 
 .kolidecon-success-check:before {
-  content: '\f035';
+    content: '\f035';
 }
 
 .kolidecon-offline:before {
-  content: '\f036';
+    content: '\f036';
 }
 
 .kolidecon-windows:before {
-  content: '\f037';
+    content: '\f037';
 }
 
 .kolidecon-centos:before {
-  content: '\f038';
+    content: '\f038';
 }
 
 .kolidecon-ubuntu:before {
-  content: '\f039';
+    content: '\f039';
 }
 
 .kolidecon-apple:before {
-  content: '\f03a';
+    content: '\f03a';
 }
 
 .kolidecon-search:before {
-  content: '\f03b';
+    content: '\f03b';
 }
 
 .kolidecon-all-hosts:before {
-  content: '\f03c';
+    content: '\f03c';
 }
 
 .kolidecon-alerts:before {
-  content: '\f03e';
+    content: '\f03e';
 }
 
 .kolidecon-logout:before {
-  content: '\f03f';
+    content: '\f03f';
 }
 
 .kolidecon-user-settings:before {
-  content: '\f040';
+    content: '\f040';
 }
 
 .kolidecon-clipboard:before {
-  content: '\f043';
+    content: '\f043';
 }
 
 .kolidecon-list-select:before {
-  content: '\f044';
+    content: '\f044';
 }
 
 .kolidecon-grid-select:before {
-  content: '\f045';
+    content: '\f045';
 }
 
 .kolidecon-label:before {
-  content: '\f033';
+    content: '\f033';
 }
 
 .kolidecon-docker:before {
-  content: '\f046';
+    content: '\f046';
 }
 
 .kolidecon-cloud:before {
-  content: '\f047';
+    content: '\f047';
 }
 
 .kolidecon-self-hosted:before {
-  content: '\f048';
+    content: '\f048';
 }
 
 .kolidecon-help-solid:before {
-  content: '\f049';
+    content: '\f049';
 }
 
 .kolidecon-help-stroke:before {
-  content: '\f04a';
+    content: '\f04a';
 }
 
 .kolidecon-warning-filled:before {
-  content: '\f04b';
+    content: '\f04b';
 }
 
 .kolidecon-delete-cloud:before {
-  content: '\f04c';
+    content: '\f04c';
 }
 
 .kolidecon-pdf:before {
-  content: '\f04d';
+    content: '\f04d';
 }
 
 .kolidecon-credit-card-small:before {
-  content: '\f04e';
+    content: '\f04e';
 }
 
 .kolidecon-billing-card:before {
-  content: '\f04f';
+    content: '\f04f';
 }
 
 .kolidecon-lock-big:before {
-  content: '\f050';
+    content: '\f050';
 }
 
 .kolidecon-link-big:before {
-  content: '\f051';
+    content: '\f051';
 }
 
 .kolidecon-briefcase:before {
-  content: '\f052';
+    content: '\f052';
 }
 
 .kolidecon-name-card:before {
-  content: '\f053';
+    content: '\f053';
 }
 
 .kolidecon-kolide-logo:before {
-  content: '\f054';
+    content: '\f054';
 }
 
 .kolidecon-business:before {
-  content: '\f055';
+    content: '\f055';
 }
 
 .kolidecon-clock:before {
-  content: '\f056';
+    content: '\f056';
 }
 
 .kolidecon-host-large:before {
-  content: '\f057';
+    content: '\f057';
 }
 
 .kolidecon-single-host:before {
-  content: '\f03d';
+    content: '\f03d';
 }
 
 .kolidecon-username:before {
-  content: '\f02a';
+    content: '\f02a';
 }
 
 .kolidecon-password:before {
-  content: '\f02b';
+    content: '\f02b';
 }
 
 .kolidecon-email:before {
-  content: '\f02c';
+    content: '\f02c';
 }
 
 .kolidecon-hosts:before {
-  content: '\f02e';
+    content: '\f02e';
 }
 
 .kolidecon-query:before {
-  content: '\f02d';
+    content: '\f02d';
 }
 
 .kolidecon-import:before {
-  content: '\f058';
+    content: '\f058';
 }
 
 .kolidecon-pencil:before {
-  content: '\f059';
+    content: '\f059';
 }
 
 .kolidecon-add-plus:before {
-  content: '\f05a';
+    content: '\f05a';
 }
 
 .kolidecon-x:before {
-  content: '\f05b';
+    content: '\f05b';
 }
 
 .kolidecon-kill-kolide:before {
-  content: '\f05c';
+    content: '\f05c';
 }
 
 .kolidecon-right-arrow:before {
-  content: '\f05d';
+    content: '\f05d';
 }
 
 .kolidecon-camera:before {
-  content: '\f05e';
+    content: '\f05e';
 }
 
 .kolidecon-plus-minus:before {
-  content: '\f05f';
+    content: '\f05f';
 }
 
 .kolidecon-bold-plus:before {
-  content: '\f060';
+    content: '\f060';
 }
 
 .kolidecon-linux:before {
-  content: '\f061';
+    content: '\f061';
 }
 
 .kolidecon-clock2:before {
-  content: '\f063';
+    content: '\f063';
 }
 
 .kolidecon-trash:before {
-  content: '\f064';
+    content: '\f064';
+}
+
+.kolidecon-laptop-plus:before {
+    content: '\f065';
 }
 
 
 .sr-only {
-position: absolute;
+  position: absolute;
-width: 1px;
+  width: 1px;
-height: 1px;
+  height: 1px;
-padding: 0;
+  padding: 0;
-margin: -1px;
+  margin: -1px;
-overflow: hidden;
+  overflow: hidden;
-clip: rect(0, 0, 0, 0);
+  clip: rect(0, 0, 0, 0);
-border: 0
+  border: 0
 }
 
 .sr-only-focusable:active,
 .sr-only-focusable:focus {
-position: static;
+  position: static;
-width: auto;
+  width: auto;
-height: auto;
+  height: auto;
-margin: 0;
+  margin: 0;
-overflow: visible;
+  overflow: visible;
-clip: auto
+  clip: auto
 }