Build dashboard table from API

This pulls the table data into a fetch from the mocked-out API. A
subsequent commit will remove the commented-out sections to actually hit
the backend.

ui/src/dashboards/apis/index.js

@@ -0,0 +1,17 @@
+// import AJAX from 'utils/ajax';
+
+export function getDashboards() {
+  // return AJAX({
+    // method: 'GET',
+    // url: `/chronograf/v1/dashboards`,
+  // });
+  return {
+    then(cb) {
+      cb([
+        {name: "Goldeneye System Status"},
+        {name: "Carver Media Group Broadcast System Status"},
+        {name: "Icarus Space Program Status"},
+      ]);
+    },
+  };
+}

ui/src/dashboards/containers/DashboardsPage.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {getDashboards} from '../apis';
+
 const DashboardsPage = React.createClass({
   getInitialState() {
     return {
@@ -8,22 +10,28 @@ const DashboardsPage = React.createClass({
   },
 
   componentDidMount() {
-    // getDashboards().then((dashboards) => {
+    getDashboards().then((dashboards) => {
-    const dashboards = [];
+      this.setState({
-    this.state({
+        dashboards,
-      dashboards,
+      });
     });
-    // });
   },
 
   render() {
+    let tableHeader;
+    if (this.state.dashboards.length === 0) {
+      tableHeader = "Loading Dashboards...";
+    } else {
+      tableHeader = `${this.state.dashboards.length} Dashboards`;
+    }
+
     return (
       <div className="page">
         <div className="page-header">
           <div className="page-header__container">
             <div className="page-header__left">
               <h1>
-                Bond Villain Dashboards
+                Dashboards
               </h1>
             </div>
           </div>
@@ -34,7 +42,7 @@ const DashboardsPage = React.createClass({
               <div className="col-md-12">
                 <div className="panel panel-minimal">
                   <div className="panel-heading u-flex u-ai-center u-jc-space-between">
-                    <h2 className="panel-title">4 Doomsday Devices</h2>
+                    <h2 className="panel-title">{tableHeader}</h2>
                   </div>
                   <div className="panel-body">
                     <table className="table v-center">
@@ -44,18 +52,15 @@ const DashboardsPage = React.createClass({
                         </tr>
                       </thead>
                       <tbody>
-                        <tr>
+                          {
-                          <td className="monotype">Goldeneye System Status</td>
+                            this.state.dashboards.map((dashboard) => {
-                        </tr>
+                              return (
-                        <tr>
+                                <tr key={dashboard.name}>
-                          <td className="monotype">Carver Media Group Broadcast System Status</td>
+                                  <td className="monotype">{dashboard.name}</td>
-                        </tr>
+                                </tr>
-                        <tr>
+                              );
-                          <td className="monotype">King Oil Pipeline Status</td>
+                            })
-                        </tr>
+                          }
-                        <tr>
-                          <td className="monotype">Icarus Space Program Status</td>
-                        </tr>
                       </tbody>
                     </table>
                   </div>