add host dropdown to host page

ui/src/hosts/apis/index.js

@@ -63,6 +63,19 @@ export function getCpuAndLoadForHosts(proxyLink, telegrafDB) {
   });
 }
 
+export function getHosts(proxyLink, telegrafDB) {
+  return proxy({
+    source: proxyLink,
+    query: 'show tag values from system with key = "host"',
+    db: 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]);
+  });
+}
+
 export function getMappings() {
   return AJAX({
     method: 'GET',

ui/src/hosts/containers/HostPage.js

@@ -3,7 +3,8 @@ 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} from 'src/hosts/apis';
+import {getMappings, getAppsForHosts, getMeasurementsForHost, getHosts} from 'src/hosts/apis';
+import {Link} from 'react-router';
 import {fetchLayouts} from 'shared/apis';
 
 export const HostPage = React.createClass({
@@ -13,6 +14,7 @@ export const HostPage = React.createClass({
         proxy: PropTypes.string.isRequired,
       }).isRequired,
       telegraf: PropTypes.string.isRequired,
+      id: PropTypes.string.isRequired,
     }),
     params: PropTypes.shape({
       hostID: PropTypes.string.isRequired,
@@ -29,18 +31,19 @@ export const HostPage = React.createClass({
 
     return {
       layouts: [],
+      hosts: [],
       timeRange: timeRanges[fifteenMinutesIndex],
     };
   },
 
   componentDidMount() {
     const {source, params, location} = this.props;
-    const hosts = {[params.hostID]: {name: params.hostID}};
+    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, hosts, mappings, source.telegraf).then((newHosts) => {
+        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) => {
@@ -56,6 +59,10 @@ export const HostPage = React.createClass({
         });
       });
     });
+
+    getHosts(source.links.proxy, source.telegraf).then((hosts) => {
+      this.setState({hosts});
+    });
   },
 
   handleChooseTimeRange({lower}) {
@@ -119,14 +126,30 @@ export const HostPage = React.createClass({
 
   render() {
     const hostID = this.props.params.hostID;
-    const {layouts, timeRange} = this.state;
+    const {layouts, timeRange, hosts} = this.state;
 
     return (
       <div className="page">
         <div className="page-header full-width">
           <div className="page-header__container">
             <div className="page-header__left">
-              <h1>{hostID}</h1>
+              <div className="dropdown minimal-dropdown">
+                <button className="dropdown-toggle" type="button" data-toggle="dropdown">
+                  <span className="button-text">{hostID}</span>
+                  <span className="caret"></span>
+                </button>
+                <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
+                  {hosts.map((host, i) => {
+                    return (
+                      <li key={i}>
+                        <Link to={`/sources/${this.props.source.id}/hosts/${host}`} className="role-option">
+                          {host}
+                        </Link>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
             </div>
             <div className="page-header__right">
               <div className="btn btn-info btn-sm" data-for="graph-tips-tooltip" data-tip="<p><code>Click + Drag</code> Zoom in (X or Y)</p><p><code>Shift + Click</code> Pan Graph Window</p><p><code>Double Click</code> Reset Graph Window</p>">