Merge pull request #696 from influxdata/feature/tr-dashboard-frontend

Implement Dashboard Index Page

ui/src/dashboards/apis/index.js

@@ -0,0 +1,8 @@
+import AJAX from 'utils/ajax';
+
+export function getDashboards() {
+  return AJAX({
+    method: 'GET',
+    url: `/chronograf/v1/dashboards`,
+  });
+}

ui/src/dashboards/containers/DashboardsPage.js

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import {getDashboards} from '../apis';
+
+const DashboardsPage = React.createClass({
+  getInitialState() {
+    return {
+      dashboards: [],
+    };
+  },
+
+  componentDidMount() {
+    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>
+                Dashboards
+              </h1>
+            </div>
+          </div>
+        </div>
+        <div className="page-contents">
+          <div className="container-fluid">
+            <div className="row">
+              <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">{tableHeader}</h2>
+                  </div>
+                  <div className="panel-body">
+                    <table className="table v-center">
+                      <thead>
+                        <tr>
+                          <th>Name</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                          {
+                            this.state.dashboards.map((dashboard) => {
+                              return (
+                                <tr key={dashboard.id}>
+                                  <td className="monotype">{dashboard.name}</td>
+                                </tr>
+                              );
+                            })
+                          }
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+});
+
+export default DashboardsPage;

ui/src/dashboards/index.js

@@ -0,0 +1,2 @@
+import DashboardsPage from './containers/DashboardsPage';
+export {DashboardsPage};

ui/src/index.js

@@ -11,6 +11,7 @@ import {KubernetesPage} from 'src/kubernetes';
 import {Login} from 'src/auth';
 import {KapacitorPage, KapacitorRulePage, KapacitorRulesPage, KapacitorTasksPage} from 'src/kapacitor';
 import DataExplorer from 'src/chronograf';
+import {DashboardsPage} from 'src/dashboards';
 import {CreateSource, SourceForm, ManageSources} from 'src/sources';
 import NotFound from 'src/shared/components/NotFound';
 import configureStore from 'src/store/configureStore';
@@ -104,6 +105,7 @@ const Root = React.createClass({
               <Route path="kapacitor-config" component={KapacitorPage} />
               <Route path="kapacitor-tasks" component={KapacitorTasksPage} />
               <Route path="alerts" component={AlertsApp} />
+              <Route path="dashboards" component={DashboardsPage} />
               <Route path="alert-rules" component={KapacitorRulesPage} />
               <Route path="alert-rules/:ruleID" component={KapacitorRulePage} />
               <Route path="alert-rules/new" component={KapacitorRulePage} />

ui/src/side_nav/components/SideNav.js

@@ -33,6 +33,7 @@ const SideNav = React.createClass({
         <NavBlock icon="graphline" link={dataExplorerLink}>
           <NavHeader link={dataExplorerLink} title={'Data'} />
           <NavListItem link={dataExplorerLink}>Explorer</NavListItem>
+          <NavListItem link={`${sourcePrefix}/dashboards`}>Dashboards</NavListItem>
         </NavBlock>
         <NavBlock matcher="alerts" icon="pulse-b" link={`${sourcePrefix}/alerts`}>
           <NavHeader link={`${sourcePrefix}/alerts`} title="Alerting" />