Merge pull request #299 from influxdata/fix-de-side-nav

Fix double click DE bug

ui/src/App.js

@@ -16,6 +16,7 @@ const App = React.createClass({
     }),
     params: PropTypes.shape({
       sourceID: PropTypes.string.isRequired,
+      base64ExplorerID: PropTypes.string,
     }).isRequired,
     publishNotification: PropTypes.func.isRequired,
     dismissNotification: PropTypes.func.isRequired,
@@ -42,11 +43,11 @@ const App = React.createClass({
   },
 
   render() {
-    const {sourceID} = this.props.params;
+    const {sourceID, base64ExplorerID} = this.props.params;
 
     return (
       <div className="enterprise-wrapper--flex">
-        <SideNavContainer sourceID={sourceID} addFlashMessage={this.handleNotification} currentLocation={this.props.location.pathname} />
+        <SideNavContainer sourceID={sourceID} explorationID={base64ExplorerID} addFlashMessage={this.handleNotification} currentLocation={this.props.location.pathname} />
         <div className="page-wrapper">
           {this.renderNotifications()}
           {this.props.children && React.cloneElement(this.props.children, {

ui/src/chronograf/containers/App.js

@@ -33,6 +33,7 @@ const App = React.createClass({
 
   render() {
     const {base64ExplorerID} = this.props.params;
+
     return (
       <div className="data-explorer-container">
         <DataExplorer source={this.props.source} explorerID={this.decodeID(base64ExplorerID)} />

ui/src/chronograf/containers/DataExplorer.js

@@ -62,16 +62,11 @@ const DataExplorer = React.createClass({
   render() {
     const {timeRange, explorers, explorerID, setTimeRange, createExploration, chooseExploration, deleteExplorer, editExplorer} = this.props;
 
-    if (explorers === FETCHING) {
+    if (explorers === FETCHING || !explorerID) {
       // TODO: page-wide spinner
       return null;
     }
 
-    const activeExplorer = explorers[explorerID];
-    if (!activeExplorer) {
-      return <div>You have no active explorers</div>; // TODO: handle no explorers;
-    }
-
     return (
       <div className="data-explorer">
         <Header

ui/src/side_nav/components/SideNav.js

@@ -6,11 +6,14 @@ const SideNav = React.createClass({
   propTypes: {
     location: string.isRequired,
     sourceID: string.isRequired,
+    explorationID: string,
   },
 
   render() {
-    const {location, sourceID} = this.props;
+    const {location, sourceID, explorationID} = this.props;
     const sourcePrefix = `/sources/${sourceID}`;
+    const explorationSuffix = explorationID ? `/${explorationID}` : '';
+    const dataExplorerLink = `${sourcePrefix}/chronograf/data-explorer${explorationSuffix}`;
 
     return (
       <NavBar location={location}>
@@ -21,9 +24,9 @@ const SideNav = React.createClass({
           <NavHeader link={`${sourcePrefix}/hosts`} title="Infrastructure" />
           <NavListItem link={`${sourcePrefix}/hosts`}>Host List</NavListItem>
         </NavBlock>
-        <NavBlock icon="graphline" link={`${sourcePrefix}/chronograf/data-explorer`}>
-          <NavHeader link={`${sourcePrefix}/chronograf/data-explorer`} title={'Chronograf'} />
-          <NavListItem link={`${sourcePrefix}/chronograf/data-explorer`}>Data Explorer</NavListItem>
+        <NavBlock icon="graphline" link={dataExplorerLink}>
+          <NavHeader link={dataExplorerLink} title={'Chronograf'} />
+          <NavListItem link={dataExplorerLink}>Data Explorer</NavListItem>
         </NavBlock>
         <NavBlock icon="crown" link={`${sourcePrefix}/manage-sources`}>
           <NavHeader link={`${sourcePrefix}/manage-sources`} title="Sources" />

ui/src/side_nav/containers/SideNavApp.js

@@ -7,6 +7,7 @@ const SideNavApp = React.createClass({
     currentLocation: string.isRequired,
     addFlashMessage: func.isRequired,
     sourceID: string.isRequired,
+    explorationID: string,
   },
 
   contextTypes: {
@@ -21,7 +22,7 @@ const SideNavApp = React.createClass({
   },
 
   render() {
-    const {currentLocation, sourceID} = this.props;
+    const {currentLocation, sourceID, explorationID} = this.props;
     const {canViewChronograf} = this.context;
 
     return (
@@ -30,6 +31,7 @@ const SideNavApp = React.createClass({
         isAdmin={true}
         canViewChronograf={canViewChronograf}
         location={currentLocation}
+        explorationID={explorationID}
       />
     );
   },