diff --git a/ui/src/hosts/apis/index.js b/ui/src/hosts/apis/index.js
index b300f6a9b6..9a72c7f3a8 100644
--- a/ui/src/hosts/apis/index.js
+++ b/ui/src/hosts/apis/index.js
@@ -63,7 +63,7 @@ export function getCpuAndLoadForHosts(proxyLink, telegrafDB) {
   });
 }
 
-export function getHosts(proxyLink, telegrafDB) {
+export function getAllHosts(proxyLink, telegrafDB) {
   return proxy({
     source: proxyLink,
     query: 'show tag values from system with key = "host"',
@@ -71,11 +71,16 @@ export function getHosts(proxyLink, telegrafDB) {
   }).then((resp) => {
     const allHostsSeries = _.get(resp, ['data', 'results', '0', 'series', '0'], []);
     const hostnameIndex = allHostsSeries.columns.findIndex((col) => col === 'value');
-
-    return allHostsSeries.values.map((v) => v[hostnameIndex]);
+    const hosts = {};
+    allHostsSeries.values.forEach((v) => {
+      const hostname = v[hostnameIndex];
+      hosts[hostname] = {
+        name: hostname,
+      };
+    });
+    return hosts;
   });
 }
-
 export function getMappings() {
   return AJAX({
     method: 'GET',
diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js
index c7732a8e0d..02851a0b4a 100644
--- a/ui/src/hosts/containers/HostPage.js
+++ b/ui/src/hosts/containers/HostPage.js
@@ -3,7 +3,7 @@ import LayoutRenderer from 'shared/components/LayoutRenderer';
 import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';
 import ReactTooltip from 'react-tooltip';
 import timeRanges from 'hson!../../shared/data/timeRanges.hson';
-import {getMappings, getAppsForHosts, getMeasurementsForHost, getHosts} from 'src/hosts/apis';
+import {getMappings, getAppsForHosts, getMeasurementsForHost, getAllHosts} from 'src/hosts/apis';
 import {fetchLayouts} from 'shared/apis';
 
 export const HostPage = React.createClass({
@@ -37,31 +37,28 @@ export const HostPage = React.createClass({
 
   componentDidMount() {
     const {source, params, location} = this.props;
-    const hostsToGet = {[params.hostID]: {name: params.hostID}};
 
     // fetching layouts and mappings can be done at the same time
     fetchLayouts().then(({data: {layouts}}) => {
       getMappings().then(({data: {mappings}}) => {
-        getAppsForHosts(source.links.proxy, hostsToGet, mappings, source.telegraf).then((newHosts) => {
-          getMeasurementsForHost(source, params.hostID).then((measurements) => {
-            const host = newHosts[this.props.params.hostID];
-            const filteredLayouts = layouts.filter((layout) => {
-              const focusedApp = location.query.app;
-              if (focusedApp) {
-                return layout.app === focusedApp;
-              }
+        getAllHosts(source.links.proxy, source.telegraf).then((hosts) => {
+          getAppsForHosts(source.links.proxy, hosts, mappings, source.telegraf).then((newHosts) => {
+            getMeasurementsForHost(source, params.hostID).then((measurements) => {
+              const host = newHosts[this.props.params.hostID];
+              const filteredLayouts = layouts.filter((layout) => {
+                const focusedApp = location.query.app;
+                if (focusedApp) {
+                  return layout.app === focusedApp;
+                }
 
-              return host.apps && host.apps.includes(layout.app) && measurements.includes(layout.measurement);
+                return host.apps && host.apps.includes(layout.app) && measurements.includes(layout.measurement);
+              });
+              this.setState({layouts: filteredLayouts, hosts});
             });
-            this.setState({layouts: filteredLayouts});
           });
         });
       });
     });
-
-    getHosts(source.links.proxy, source.telegraf).then((hosts) => {
-      this.setState({hosts});
-    });
   },
 
   handleChooseTimeRange({lower}) {
@@ -138,7 +135,7 @@ export const HostPage = React.createClass({
                   <span className="caret"></span>
                 </button>
                 <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
-                  {hosts.map((host, i) => {
+                  {Object.keys(hosts).map((host, i) => {
                     return (
                       <li key={i}>
                         <a href={`/sources/${this.props.source.id}/hosts/${host}`} className="role-option">