From d059cd2750c44e2234b4ad184c4cf9bc2377bcb5 Mon Sep 17 00:00:00 2001
From: Jade McGough <jade@influxdb.com>
Date: Wed, 1 Feb 2017 00:13:05 -0800
Subject: [PATCH] change dashboards via dropdown

---
 ui/src/dashboards/apis/index.js               |  7 ----
 ui/src/dashboards/containers/DashboardPage.js | 33 ++++++++++++++++---
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/ui/src/dashboards/apis/index.js b/ui/src/dashboards/apis/index.js
index 82b58aab3..f0106f76b 100644
--- a/ui/src/dashboards/apis/index.js
+++ b/ui/src/dashboards/apis/index.js
@@ -6,10 +6,3 @@ export function getDashboards() {
     url: `/chronograf/v1/dashboards`,
   });
 }
-
-export function getDashboard(id) {
-  return AJAX({
-    method: 'GET',
-    url: `/chronograf/v1/dashboards/${id}`,
-  });
-}
diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js
index a7579ccc6..2ea4894ed 100644
--- a/ui/src/dashboards/containers/DashboardPage.js
+++ b/ui/src/dashboards/containers/DashboardPage.js
@@ -1,11 +1,13 @@
 import React, {PropTypes} from 'react';
 import ReactTooltip from 'react-tooltip';
+import {Link} from 'react-router';
+import _ from 'lodash';
 
 import LayoutRenderer from 'shared/components/LayoutRenderer';
 import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';
 import timeRanges from 'hson!../../shared/data/timeRanges.hson';
 
-import {getDashboard} from '../apis';
+import {getDashboards} from '../apis';
 import {getSource} from 'shared/apis';
 
 const DashboardPage = React.createClass({
@@ -20,21 +22,31 @@ const DashboardPage = React.createClass({
     const fifteenMinutesIndex = 1;
 
     return {
+      dashboards: [],
       timeRange: timeRanges[fifteenMinutesIndex],
     };
   },
 
   componentDidMount() {
-    getDashboard(this.props.params.dashboardID).then((resp) => {
+    getDashboards().then((resp) => {
       getSource(this.props.params.sourceID).then(({data: source}) => {
         this.setState({
-          dashboard: resp.data,
+          dashboards: resp.data.dashboards,
+          dashboard: this.currentDashboard(resp.data.dashboards, this.props.params.dashboardID),
           source,
         });
       });
     });
   },
 
+  componentWillReceiveProps(nextProps) {
+    this.setState({dashboard: this.currentDashboard(this.state.dashboards, nextProps.params.dashboardID)});
+  },
+
+  currentDashboard(dashboards, dashboardID) {
+    return _.find(dashboards, (d) => d.id.toString() === dashboardID);
+  },
+
   renderDashboard(dashboard) {
     const autoRefreshMs = 15000;
     const {timeRange} = this.state;
@@ -74,7 +86,8 @@ const DashboardPage = React.createClass({
   },
 
   render() {
-    const {dashboard, timeRange} = this.state;
+    const {dashboards, dashboard, timeRange} = this.state;
+
     const dashboardName = dashboard ? dashboard.name : '';
 
     return (
@@ -85,7 +98,19 @@ const DashboardPage = React.createClass({
               <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">
+                  {(dashboards).map((d, i) => {
+                    return (
+                      <li key={i}>
+                        <Link to={`/sources/${this.props.params.sourceID}/dashboards/${d.id}`} className="role-option">
+                          {d.name}
+                        </Link>
+                      </li>
+                    );
+                  })}
+                </ul>
               </div>
             </div>
             <div className="page-header__right">