From b05219248e9a76773798d28b09523888095d8533 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Wed, 28 Sep 2016 21:15:19 -0700
Subject: [PATCH] Successfully switch between data explorerations

---
 mock/mock.go                                 | 4 ++--
 ui/src/chronograf/actions/view/index.js      | 7 ++++---
 ui/src/chronograf/api/index.js               | 8 ++++----
 ui/src/chronograf/containers/DataExplorer.js | 2 +-
 ui/src/chronograf/reducers/activeExplorer.js | 3 ++-
 ui/src/store/persistStateEnhancer.js         | 3 ++-
 6 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/mock/mock.go b/mock/mock.go
index 37bf4424f9..233cf25d89 100644
--- a/mock/mock.go
+++ b/mock/mock.go
@@ -24,8 +24,8 @@ func NewExplorationStore(nowFunc func() time.Time) mrfusion.ExplorationStore {
 		CreatedAt: nowFunc(),
 		UpdatedAt: nowFunc(),
 	}
-	e.db[1] = &mrfusion.Exploration{
-		Name:      "Ferdinand Magellan",
+	e.db[1] = mrfusion.Exploration{
+		Name:      "Your Mom",
 		Data:      "{\"panels\":{\"123\":{\"id\":\"123\",\"queryIds\":[\"456\"]}},\"queryConfigs\":{\"456\":{\"id\":\"456\",\"database\":null,\"measurement\":null,\"retentionPolicy\":null,\"fields\":[],\"tags\":{},\"groupBy\":{\"time\":null,\"tags\":[]},\"areTagsAccepted\":true,\"rawText\":null}}}",
 		CreatedAt: nowFunc(),
 		UpdatedAt: nowFunc(),
diff --git a/ui/src/chronograf/actions/view/index.js b/ui/src/chronograf/actions/view/index.js
index 40598b8ab5..950a74c529 100644
--- a/ui/src/chronograf/actions/view/index.js
+++ b/ui/src/chronograf/actions/view/index.js
@@ -283,12 +283,13 @@ function saveExplorer(error) {
   };
 }
 
-export function chooseExplorer(clusterID, explorerID, push) {
+export function chooseExplorer(explorerID, push) {
   return (dispatch, getState) => {
     // Save the previous session explicitly in case an auto-save was unable to complete.
     const {panels, queryConfigs, activeExplorer} = getState();
     api.saveExplorer({
       explorerID: activeExplorer.id,
+      name: activeExplorer.name,
       panels,
       queryConfigs,
     }).then(() => {
@@ -301,11 +302,11 @@ export function chooseExplorer(clusterID, explorerID, push) {
 
     dispatch(fetchExplorer());
     AJAX({
-      url: `/api/int/v1/explorers/${explorerID}`,
+      url: explorerID,
     }).then((resp) => {
       const explorer = parseRawExplorer(resp.data);
       dispatch(loadExplorer(explorer));
-      push(`/chronograf/data_explorer/${explorerID}`);
+      push(`/chronograf/data_explorer/${btoa(explorerID)}`);
     });
   };
 }
diff --git a/ui/src/chronograf/api/index.js b/ui/src/chronograf/api/index.js
index 93a2d5d941..70018e9683 100644
--- a/ui/src/chronograf/api/index.js
+++ b/ui/src/chronograf/api/index.js
@@ -1,15 +1,15 @@
 import AJAX from 'utils/ajax';
 
-export function saveExplorer({panels, queryConfigs, explorerID}) {
+export function saveExplorer({name, panels, queryConfigs, explorerID}) {
   return AJAX({
-    url: `/api/int/v1/explorers/${explorerID}`,
-    method: 'PUT',
+    url: explorerID,
+    method: 'PATCH',
     headers: {
       'Content-Type': 'application/json',
     },
     data: JSON.stringify({
       data: JSON.stringify({panels, queryConfigs}),
+      name,
     }),
   });
 }
-
diff --git a/ui/src/chronograf/containers/DataExplorer.js b/ui/src/chronograf/containers/DataExplorer.js
index 637961e907..152e7a28a3 100644
--- a/ui/src/chronograf/containers/DataExplorer.js
+++ b/ui/src/chronograf/containers/DataExplorer.js
@@ -69,7 +69,7 @@ const DataExplorer = React.createClass({
 
     const activeExplorer = explorers[explorerID];
     if (!activeExplorer) {
-      return null; // TODO: handle no explorers;
+      return <div>You have no active explorers</div>; // TODO: handle no explorers;
     }
 
     return (
diff --git a/ui/src/chronograf/reducers/activeExplorer.js b/ui/src/chronograf/reducers/activeExplorer.js
index cb190cac84..cadc17b08d 100644
--- a/ui/src/chronograf/reducers/activeExplorer.js
+++ b/ui/src/chronograf/reducers/activeExplorer.js
@@ -1,7 +1,8 @@
 export default function activeExplorer(state = {}, action) {
   switch (action.type) {
     case 'LOAD_EXPLORER': {
-      return {id: action.payload.explorer.id};
+      const {link, name} = action.payload.explorer;
+      return {id: link.href, name};
     }
   }
 
diff --git a/ui/src/store/persistStateEnhancer.js b/ui/src/store/persistStateEnhancer.js
index dc92b91d29..bde890fce3 100644
--- a/ui/src/store/persistStateEnhancer.js
+++ b/ui/src/store/persistStateEnhancer.js
@@ -33,13 +33,14 @@ export default function persistState() {
     store.subscribe(() => {
       const state = Object.assign({}, store.getState());
       const explorerID = state.activeExplorer.id;
+      const name = state.activeExplorer.name;
       if (!explorerID) {
         return;
       }
       const {panels, queryConfigs} = state;
       autoSaveTimer.clear();
       autoSaveTimer.set(() => {
-        saveExplorer({panels, queryConfigs, explorerID}).then((_) => {
+        saveExplorer({panels, queryConfigs, explorerID, name}).then((_) => {
           // TODO: This is a no-op currently because we don't have any feedback in the UI around saving, but maybe we do something in the future?
           // If we ever show feedback in the UI, we could potentially indicate to remove it here.
         }).catch(({response}) => {