Successfully switch between data explorerations

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(),

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)}`);
     });
   };
 }

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,
     }),
   });
 }
-

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 (

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};
     }
   }
 

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}) => {