Use mappings endpoint and refactor

ui/src/hosts/apis/index.js

@@ -1,4 +1,6 @@
 import {proxy} from 'utils/queryUrlGenerator';
+import AJAX from 'utils/ajax';
+import _ from 'lodash';
 
 export function getCpuAndLoadForHosts(proxyLink) {
   return proxy({
@@ -8,7 +10,9 @@ export function getCpuAndLoadForHosts(proxyLink) {
   }).then((resp) => {
     const hosts = {};
     const precision = 100;
-    resp.data.results[0].series.forEach((s) => {
+    const cpuSeries = _.get(resp, ['data', 'results', '0', 'series'], []);
+    const loadSeries = _.get(resp, ['data', 'results', '1', 'series'], []);
+    cpuSeries.forEach((s) => {
       const meanIndex = s.columns.findIndex((col) => col === 'mean');
       hosts[s.tags.host] = {
         name: s.tags.host,
@@ -16,7 +20,7 @@ export function getCpuAndLoadForHosts(proxyLink) {
       };
     });
 
-    resp.data.results[1].series.forEach((s) => {
+    loadSeries.forEach((s) => {
       const meanIndex = s.columns.findIndex((col) => col === 'mean');
       hosts[s.tags.host].load = (Math.round(s.values[0][meanIndex] * precision) / precision);
     });
@@ -24,3 +28,40 @@ export function getCpuAndLoadForHosts(proxyLink) {
     return hosts;
   });
 }
+
+export function getMappings() {
+  return AJAX({
+    method: 'GET',
+    url: `/chronograf/v1/mappings`,
+  });
+}
+
+export function getAppsForHosts(proxyLink, hosts, supportedApps) {
+  const measurements = supportedApps.map((m) => `${m}$`).join('|');
+  return proxy({
+    source: proxyLink,
+    query: `show series from /${measurements}/`,
+    db: 'telegraf',
+  }).then((resp) => {
+    const newHosts = Object.assign({}, hosts);
+    const allSeries = _.get(resp, ['data', 'results', '0', 'series', '0', 'values'], []);
+    allSeries.forEach(([series]) => {
+      const matches = series.match(/(\w*),.*,host=([^,]*)/);
+      if (!matches || matches.length !== 3) { // eslint-disable-line no-magic-numbers
+        return;
+      }
+      const app = matches[1];
+      const host = matches[2];
+
+      if (!newHosts[host]) {
+        return;
+      }
+      if (!newHosts[host].apps) {
+        newHosts[host].apps = [];
+      }
+      newHosts[host].apps = _.uniq(newHosts[host].apps.concat(app));
+    });
+
+    return newHosts;
+  });
+}

ui/src/hosts/components/HostsTable.js

@@ -5,8 +5,8 @@ const HostsTable = React.createClass({
   propTypes: {
     hosts: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string,
-      cpu: PropTypes.string,
-      load: PropTypes.string,
+      cpu: PropTypes.number,
+      load: PropTypes.number,
       apps: PropTypes.arrayOf(PropTypes.string.isRequired),
     })),
     source: PropTypes.shape({
@@ -87,13 +87,13 @@ const HostsTable = React.createClass({
             </thead>
             <tbody>
               {
-                hosts.map(({name, cpu, load, apps=[]}) => {
+                hosts.map(({name, cpu, load, apps = []}) => {
                   return (
                     <tr key={name}>
                       <td className="monotype"><a href={`/sources/${source.id}/hosts/${name}`}>{name}</a></td>
                       <td className="text-center"><div className="table-dot dot-success"></div></td>
-                      <td className="monotype">{`${cpu}%`}</td>
-                      <td className="monotype">{`${load}`}</td>
+                      <td className="monotype">{`${cpu.toFixed(2)}%`}</td>
+                      <td className="monotype">{`${load.toFixed(2)}`}</td>
                       <td className="monotype">{`${apps.join(', ')}`}</td>
                     </tr>
                   );

ui/src/hosts/containers/HostsPage.js

@@ -2,8 +2,7 @@ import React, {PropTypes} from 'react';
 import _ from 'lodash';
 import FlashMessages from 'shared/components/FlashMessages';
 import HostsTable from '../components/HostsTable';
-import {getCpuAndLoadForHosts} from '../apis';
-import {proxy} from 'utils/queryUrlGenerator';
+import {getCpuAndLoadForHosts, getMappings, getAppsForHosts} from '../apis';
 
 export const HostsPage = React.createClass({
   propTypes: {
@@ -25,30 +24,15 @@ export const HostsPage = React.createClass({
   },
 
   componentDidMount() {
-    getCpuAndLoadForHosts(this.props.source.links.proxy).then((hosts) => {
+    const {source} = this.props;
+    Promise.all([
+      getCpuAndLoadForHosts(source.links.proxy),
+      getMappings(),
+    ]).then(([hosts, {data: {mappings}}]) => {
       this.setState({hosts});
-      proxy({
-        source: this.props.source.links.proxy,
-        query: `show series from /influxdb$|docker$/`,
-        db: 'telegraf',
-      }).then((resp) => {
-        const newHosts = Object.assign({}, hosts);
-        resp.data.results[0].series[0].values.forEach((vals) => {
-          const val = vals[0];
-          const matches = val.match(/(\w*),.*,host=([^,]*)/);
-          if (!matches || matches.length !== 3) {
-            return;
-          }
-          const [_blah, app, host] = matches;
-          if (!newHosts[host]) {
-            return;
-          }
-          if (!newHosts[host].apps) {
-            newHosts[host].apps = [];
-          }
-          newHosts[host].apps = _.uniq(newHosts[host].apps.concat(app));
-        });
-
+      const apps = mappings.concat([{name: 'docker'}, {name: 'influxdb'}]).map((m) => m.name);
+      // concatting docker and influxdb for now
+      getAppsForHosts(source.links.proxy, hosts, apps).then((newHosts) => {
         this.setState({hosts: newHosts});
       });
     }).catch(() => {