From a7e22ca4c9f5a4f5b9f5e5fbe82534a56020b0e4 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Tue, 22 Nov 2016 11:31:30 -0800
Subject: [PATCH] Fix layout being displayed when measurement not present

---
 ui/src/hosts/apis/index.js          | 25 +++++++++++++++++++++++++
 ui/src/hosts/containers/HostPage.js | 25 ++++++++++++++-----------
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/ui/src/hosts/apis/index.js b/ui/src/hosts/apis/index.js
index 3d543c7752..0fae57bfcd 100644
--- a/ui/src/hosts/apis/index.js
+++ b/ui/src/hosts/apis/index.js
@@ -81,3 +81,28 @@ export function getAppsForHosts(proxyLink, hosts, appMappings, telegrafDB) {
     return newHosts;
   });
 }
+
+export function getMeasurementsForHost(source, host) {
+  return proxy({
+    source: source.links.proxy,
+    query: `SHOW MEASUREMENTS WHERE "host" = '${host}'`,
+    db: source.telegraf,
+  }).then(({data}) => {
+    if (_isEmpty(data) || _hasError(data)) {
+      return [];
+    }
+
+    const series = data.results[0].series[0];
+    return series.values.map((measurement) => {
+      return measurement[0];
+    });
+  });
+}
+
+function _isEmpty(resp) {
+  return !resp.results[0].series;
+}
+
+function _hasError(resp) {
+  return !!resp.results[0].error;
+}
diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js
index 8584cc3f22..e6d032bfac 100644
--- a/ui/src/hosts/containers/HostPage.js
+++ b/ui/src/hosts/containers/HostPage.js
@@ -2,7 +2,7 @@ import React, {PropTypes} from 'react';
 import LayoutRenderer from 'shared/components/LayoutRenderer';
 import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';
 import timeRanges from 'hson!../../shared/data/timeRanges.hson';
-import {getMappings, getAppsForHosts} from '../apis';
+import {getMappings, getAppsForHosts, getMeasurementsForHost} from 'src/hosts/apis';
 import {fetchLayouts} from 'shared/apis';
 
 export const HostPage = React.createClass({
@@ -33,22 +33,25 @@ export const HostPage = React.createClass({
   },
 
   componentDidMount() {
-    const hosts = {[this.props.params.hostID]: {name: this.props.params.hostID}};
-    const {source} = this.props;
+    const {source, params} = this.props;
+    const hosts = {[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) => {
-          const host = newHosts[this.props.params.hostID];
-          const filteredLayouts = layouts.filter((layout) => {
-            const focusedApp = this.props.location.query.app;
-            if (focusedApp) {
-              return layout.app === focusedApp;
-            }
-            return host.apps && host.apps.includes(layout.app);
+          getMeasurementsForHost(source, params.hostID).then((measurements) => {
+            const host = newHosts[this.props.params.hostID];
+            const filteredLayouts = layouts.filter((layout) => {
+              const focusedApp = this.props.location.query.app;
+              if (focusedApp) {
+                return layout.app === focusedApp;
+              }
+
+              return host.apps && host.apps.includes(layout.app) && measurements.includes(layout.measurement);
+            });
+            this.setState({layouts: filteredLayouts});
           });
-          this.setState({layouts: filteredLayouts});
         });
       });
     });