add dashboard content, make request to API

ui/src/dashboards/apis/index.js

@@ -6,3 +6,10 @@ export function getDashboards() {
     url: `/chronograf/v1/dashboards`,
   });
 }
+
+export function getDashboard(id) {
+  return AJAX({
+    method: 'GET',
+    url: `/chronograf/v1/dashboards/${id}`,
+  });
+}

ui/src/dashboards/containers/DashboardPage.js

@@ -1,9 +1,73 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
+import ReactTooltip from 'react-tooltip';
+//
+// import LayoutRenderer from 'shared/components/LayoutRenderer';
+import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';
+import timeRanges from 'hson!../../shared/data/timeRanges.hson';
+
+import {getDashboard} from '../apis';
 
 const DashboardPage = React.createClass({
+  propTypes: {
+    params: PropTypes.shape({
+      dashboardID: PropTypes.string.isRequired,
+    }).isRequired,
+  },
+
+  getInitialState() {
+    const fifteenMinutesIndex = 1;
+
+    return {
+      timeRange: timeRanges[fifteenMinutesIndex],
+    };
+  },
+
+  componentDidMount() {
+    getDashboard(this.props.params.dashboardID).then((resp) => {
+      this.setState({
+        dashboard: resp.data,
+      });
+    });
+  },
+
+  handleChooseTimeRange({lower}) {
+    const timeRange = timeRanges.find((range) => range.queryValue === lower);
+    this.setState({timeRange});
+  },
+
   render() {
+    const dashboardName = this.state.dashboard ? this.state.dashboard.name : '';
+
     return (
-      <div></div>
+      <div className="page">
+        <div className="page-header full-width">
+          <div className="page-header__container">
+            <div className="page-header__left">
+              <div className="dropdown page-header-dropdown">
+                <button className="dropdown-toggle" type="button" data-toggle="dropdown">
+                  <span className="button-text">{dashboardName}</span>
+                  <span className="caret"></span>
+                </button>
+                <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
+
+                </ul>
+              </div>
+            </div>
+            <div className="page-header__right">
+              <div className="btn btn-info btn-sm" data-for="graph-tips-tooltip" data-tip="<p><code>Click + Drag</code> Zoom in (X or Y)</p><p><code>Shift + Click</code> Pan Graph Window</p><p><code>Double Click</code> Reset Graph Window</p>">
+                <span className="icon heart"></span>
+                Graph Tips
+              </div>
+              <ReactTooltip id="graph-tips-tooltip" effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip place-bottom" />
+              <TimeRangeDropdown onChooseTimeRange={this.handleChooseTimeRange} selected={this.state.timeRange.inputValue} />
+            </div>
+          </div>
+        </div>
+        <div className="page-contents">
+          <div className="container-fluid full-width">
+          </div>
+        </div>
+      </div>
     );
   },
 });

ui/src/index.js

@@ -106,7 +106,7 @@ const Root = React.createClass({
               <Route path="kapacitor-tasks" component={KapacitorTasksPage} />
               <Route path="alerts" component={AlertsApp} />
               <Route path="dashboards" component={DashboardsPage} />
-              <Route path="dashboards/:id" component={DashboardPage} />
+              <Route path="dashboards/:dashboardID" component={DashboardPage} />
               <Route path="alert-rules" component={KapacitorRulesPage} />
               <Route path="alert-rules/:ruleID" component={KapacitorRulePage} />
               <Route path="alert-rules/new" component={KapacitorRulePage} />