From 4bcca2e9883b0f26f95c9abb921627b06c863bb0 Mon Sep 17 00:00:00 2001
From: Tim Raymond <tim@timraymond.com>
Date: Tue, 13 Dec 2016 17:01:34 -0500
Subject: [PATCH] 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               | 17 ++++++++
 .../dashboards/containers/DashboardsPage.js   | 43 +++++++++++--------
 2 files changed, 41 insertions(+), 19 deletions(-)
 create mode 100644 ui/src/dashboards/apis/index.js

diff --git a/ui/src/dashboards/apis/index.js b/ui/src/dashboards/apis/index.js
new file mode 100644
index 0000000000..3e6aa691d4
--- /dev/null
+++ b/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"},
+      ]);
+    },
+  };
+}
diff --git a/ui/src/dashboards/containers/DashboardsPage.js b/ui/src/dashboards/containers/DashboardsPage.js
index dbc58ed399..e36d2cca59 100644
--- a/ui/src/dashboards/containers/DashboardsPage.js
+++ b/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) => {
-    const dashboards = [];
-    this.state({
-      dashboards,
+    getDashboards().then((dashboards) => {
+      this.setState({
+        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>
-                        </tr>
-                        <tr>
-                          <td className="monotype">Carver Media Group Broadcast System Status</td>
-                        </tr>
-                        <tr>
-                          <td className="monotype">King Oil Pipeline Status</td>
-                        </tr>
-                        <tr>
-                          <td className="monotype">Icarus Space Program Status</td>
-                        </tr>
+                          {
+                            this.state.dashboards.map((dashboard) => {
+                              return (
+                                <tr key={dashboard.name}>
+                                  <td className="monotype">{dashboard.name}</td>
+                                </tr>
+                              );
+                            })
+                          }
                       </tbody>
                     </table>
                   </div>