Make data explorer visible

Signed-off-by: Kevin Fitzpatrick <kevin@influxdb.com>

ui/src/chronograf/actions/view/index.js

@@ -249,7 +249,7 @@ export function fetchExplorers({sourceLink, userID, explorerID, push}) {
       if (!explorerID) {
         const explorer = _.maxBy(explorers, (ex) => ex.updated_at);
         dispatch(loadExplorer(explorer));
-        push(`/chronograf/data_explorer/${encodeURIComponent(explorer.link.href)}`);
+        push(`/chronograf/data_explorer/${btoa(explorer.link.href)}`);
         return;
       }
 

ui/src/chronograf/containers/App.js

@@ -22,20 +22,20 @@ const App = React.createClass({
   },
 
   componentDidMount() {
-    const {explorerID} = this.props.params;
+    const {base64ExplorerID} = this.props.params;
     this.props.fetchExplorers({
       sourceLink: this.props.source.links.self,
       userID: 1, // TODO: get the userID
-      explorerID: Number(explorerID),
+      explorerID: base64ExplorerID ? atob(base64ExplorerID) : null,
       push: this.props.router.push,
     });
   },
 
   render() {
-    const {explorerID} = this.props.params;
+    const {base64ExplorerID} = this.props.params;
     return (
       <div className="data-explorer-container">
-        <DataExplorer source={this.props.source} explorerID={Number(explorerID)} />
+        <DataExplorer source={this.props.source} explorerID={atob(base64ExplorerID)} />
       </div>
     );
   },

ui/src/chronograf/containers/DataExplorer.js

@@ -27,7 +27,7 @@ const DataExplorer = React.createClass({
       lower: PropTypes.string,
     }).isRequired,
     explorers: PropTypes.shape({}).isRequired,
-    explorerID: PropTypes.number.isRequired,
+    explorerID: PropTypes.string,
     setTimeRange: PropTypes.func.isRequired,
     createExplorer: PropTypes.func.isRequired,
     chooseExplorer: PropTypes.func.isRequired,
@@ -70,7 +70,7 @@ const DataExplorer = React.createClass({
 
     const activeExplorer = explorers[explorerID];
     if (!activeExplorer) {
-      return <NotFound />;
+      return null; // TODO: handle no explorers;
     }
 
     return (

ui/src/chronograf/containers/Header.js

@@ -12,7 +12,6 @@ const Header = React.createClass({
       lower: PropTypes.string,
     }).isRequired,
     explorers: PropTypes.shape({}).isRequired,
-    clusterID: PropTypes.string.isRequired,
     explorerID: PropTypes.number.isRequired,
     actions: PropTypes.shape({
       setTimeRange: PropTypes.func.isRequired,
@@ -50,7 +49,7 @@ const Header = React.createClass({
   handleCreateExplorer() {
     // TODO: passing in this.props.router.push is a big smell, getting something like
     // react-router-redux might be better here
-    this.props.actions.createExplorer(this.props.clusterID, this.props.router.push);
+    this.props.actions.createExplorer(this.props.router.push);
   },
 
   handleChooseExplorer({id}) {
@@ -58,7 +57,7 @@ const Header = React.createClass({
       return;
     }
 
-    this.props.actions.chooseExplorer(this.props.clusterID, id, this.props.router.push);
+    this.props.actions.chooseExplorer(id, this.props.router.push);
   },
 
   /**

ui/src/chronograf/reducers/explorers.js

@@ -10,12 +10,7 @@ export default function explorers(state = {}, action) {
 
     case 'LOAD_EXPLORERS': {
       return action.payload.explorers.reduce((nextState, explorer) => {
-        nextState[explorer.id] = {
-          id: explorer.id,
-          name: explorer.name,
-          updatedAt: explorer.updated_at,
-          createdAt: explorer.created_at,
-        };
+        nextState[explorer.link.href] = normalizeExplorer(explorer);
         return nextState;
       }, {});
     }
@@ -24,7 +19,7 @@ export default function explorers(state = {}, action) {
       const {explorer} = action.payload;
 
       const update = {
-        [explorer.id]: normalizeExplorer(explorer),
+        [explorer.link.href]: normalizeExplorer(explorer),
       };
 
       return u(update, state);
@@ -50,13 +45,12 @@ export default function explorers(state = {}, action) {
 }
 
 function normalizeExplorer(explorer) {
-  const {id, name, data, user_id, cluster_id, created_at, updated_at} = explorer;
+  const {link, name, data, user_id, created_at, updated_at} = explorer;
   return Object.assign({}, explorer, {
-    id,
+    id: link.href,
     name,
     data,
     userID: user_id,
-    clusterID: cluster_id,
     createdAt: created_at,
     updatedAt: updated_at,
   });

ui/src/index.js

@@ -128,7 +128,7 @@ const Root = React.createClass({
               <Route path="databases/manager/:database" component={DatabaseManager} />
               <Route path="databases/retentionpolicies/:database" component={RetentionPoliciesPage} />
               <Route path="chronograf/data_explorer" component={DataExplorer} />
-              <Route path="chronograf/data_explorer/:explorerID" component={DataExplorer} />
+              <Route path="chronograf/data_explorer/:base64ExplorerID" component={DataExplorer} />
               <Route path="roles" component={RolesPageContainer} />
               <Route path="roles/:roleSlug" component={RolePageContainer} />
               <Route path="hosts" component={HostsPage} />