From 4531b718a3662801cb984b6bc6ffaf32671ab8ac Mon Sep 17 00:00:00 2001
From: Will Piers <willpiers@influxdb.com>
Date: Tue, 25 Oct 2016 15:05:42 -0700
Subject: [PATCH] Make link highlighting great again. also prefer dashes to
 underscores in routes

---
 ui/src/chronograf/actions/view/index.js |  8 +++---
 ui/src/index.js                         |  8 +++---
 ui/src/side_nav/components/NavItems.js  | 18 ++++++-------
 ui/src/side_nav/components/SideNav.js   | 36 ++++++++++++-------------
 4 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/ui/src/chronograf/actions/view/index.js b/ui/src/chronograf/actions/view/index.js
index e2246d5449..0a1fc09211 100644
--- a/ui/src/chronograf/actions/view/index.js
+++ b/ui/src/chronograf/actions/view/index.js
@@ -158,7 +158,7 @@ export function createExploration(source, push) {
     }).then((resp) => {
       const explorer = parseRawExplorer(resp.data);
       dispatch(loadExploration(explorer));
-      push(`/sources/${source.id}/chronograf/data_explorer/${btoa(explorer.link.href)}`); // Base64 encode explorer URI
+      push(`/sources/${source.id}/chronograf/data-explorer/${btoa(explorer.link.href)}`); // Base64 encode explorer URI
     });
   };
 }
@@ -183,7 +183,7 @@ export function deleteExplorer(source, explorerURI, push) {
           dispatch(createExploration(source, push));
         } else {
           dispatch(loadExploration(explorer));
-          push(`/sources/${source.id}/chronograf/data_explorer/${btoa(explorer.id)}`);
+          push(`/sources/${source.id}/chronograf/data-explorer/${btoa(explorer.id)}`);
         }
       }
 
@@ -254,7 +254,7 @@ export function fetchExplorers({source, userID, explorerURI, push}) {
       if (!explorerURI) {
         const explorer = _.maxBy(explorers, (ex) => ex.updated_at);
         dispatch(loadExploration(explorer));
-        push(`/sources/${source.id}/chronograf/data_explorer/${btoa(explorer.link.href)}`);
+        push(`/sources/${source.id}/chronograf/data-explorer/${btoa(explorer.link.href)}`);
         return;
       }
 
@@ -312,7 +312,7 @@ export function chooseExploration(explorerURI, source, push) {
     }).then((resp) => {
       const explorer = parseRawExplorer(resp.data);
       dispatch(loadExploration(explorer));
-      push(`/sources/${source.id}/chronograf/data_explorer/${btoa(explorerURI)}`);
+      push(`/sources/${source.id}/chronograf/data-explorer/${btoa(explorerURI)}`);
     });
   };
 }
diff --git a/ui/src/index.js b/ui/src/index.js
index c2713be3e2..161e915a21 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -105,14 +105,14 @@ const Root = React.createClass({
               <Route path="accounts/:accountID" component={ClusterAccountPage} />
               <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/:base64ExplorerID" component={DataExplorer} />
+              <Route path="chronograf/data-explorer" 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} />
               <Route path="hosts/:hostID" component={HostPage} />
-              <Route path="kapacitor" component={KapacitorPage} />
-              <Route path="kapacitor_tasks" component={KapacitorTasksPage} />
+              <Route path="kapacitor-config" component={KapacitorPage} />
+              <Route path="kapacitor-tasks" component={KapacitorTasksPage} />
             </Route>
             <Route path="tasks" component={TasksPage} />
             <Route path="*" component={NotFound} />
diff --git a/ui/src/side_nav/components/NavItems.js b/ui/src/side_nav/components/NavItems.js
index 75d7248f5b..9ae06794fb 100644
--- a/ui/src/side_nav/components/NavItems.js
+++ b/ui/src/side_nav/components/NavItems.js
@@ -9,12 +9,11 @@ const NavListItem = React.createClass({
     link: string.isRequired,
     children: node,
     location: string,
-    matcher: string,
   },
 
   render() {
-    const {link, children, matcher, location} = this.props;
-    const isActive = matcher && !!location.match(matcher);
+    const {link, children, location} = this.props;
+    const isActive = location.startsWith(link);
 
     return <Link className={cx("sidebar__menu-item", {active: isActive})} to={link}>{children}</Link>;
   },
@@ -40,21 +39,20 @@ const NavBlock = React.createClass({
     link: string,
     icon: string.isRequired,
     location: string,
-    matcher: string,
     className: string,
     wrapperClassName: string,
   },
 
   render() {
-    const {location, matcher, className, wrapperClassName} = this.props;
-    const isActive = matcher && !!location.match(matcher);
+    const {location, className, wrapperClassName} = this.props;
+
+    const isActive = React.Children.toArray(this.props.children).find((child) => {
+      return child.type === NavListItem && location.startsWith(child.props.link);
+    });
 
     const children = React.Children.map((this.props.children), (child) => {
       if (child && child.type === NavListItem) {
-        return React.cloneElement(child, {
-          location,
-          isActive,
-        });
+        return React.cloneElement(child, {location});
       }
 
       return child;
diff --git a/ui/src/side_nav/components/SideNav.js b/ui/src/side_nav/components/SideNav.js
index a2f5e32d67..6d7d5470e2 100644
--- a/ui/src/side_nav/components/SideNav.js
+++ b/ui/src/side_nav/components/SideNav.js
@@ -17,28 +17,28 @@ const SideNav = React.createClass({
         <div className="sidebar__logo">
           <a href="/"><span className="icon cubo-uniform"></span></a>
         </div>
-        <NavBlock matcher="hosts" icon="cpu" link={`${sourcePrefix}/hosts`}>
+        <NavBlock icon="cpu" link={`${sourcePrefix}/hosts`}>
           <NavHeader link={`${sourcePrefix}/hosts`} title="Infrastructure" />
-          <NavListItem matcher="hosts" link={`${sourcePrefix}/hosts`}>Host List</NavListItem>
+          <NavListItem link={`${sourcePrefix}/hosts`}>Host List</NavListItem>
         </NavBlock>
-        <NavBlock matcher="chronograf" icon="graphline" link={`${sourcePrefix}/chronograf/data_explorer`}>
-          <NavHeader link={`${sourcePrefix}/chronograf/data_explorer`} title={'Chronograf'} />
-          <NavListItem matcher={'data_explorer'} link={`${sourcePrefix}/chronograf/data_explorer`}>Data Explorer</NavListItem>
+        <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>
-        <NavBlock matcher="overview" icon="crown" link={`${sourcePrefix}/overview`}>
-          <NavHeader link={`${sourcePrefix}/overview`} title="Sources" />
-          <NavListItem matcher="manage-sources$" link={`${sourcePrefix}/manage-sources`}>InfluxDB</NavListItem>
-          <NavListItem matcher="kapacitor" link={`${sourcePrefix}/kapacitor`}>Kapacitor</NavListItem>
-          <NavListItem matcher="queries" link={`${sourcePrefix}/queries`}>Queries</NavListItem>
-          <NavListItem matcher="tasks" link={`${sourcePrefix}/tasks`}>Tasks</NavListItem>
-          <NavListItem matcher="roles" link={`${sourcePrefix}/roles`}>Roles</NavListItem>
-          <NavListItem matcher="accounts" link={`${sourcePrefix}/accounts`}>Cluster Accounts</NavListItem>
-          <NavListItem matcher="manager" link={`${sourcePrefix}/databases/manager/_internal`}>Database Manager</NavListItem>
-          <NavListItem matcher="retentionpolicies" link={`${sourcePrefix}/databases/retentionpolicies/_internal`}>Retention Policies</NavListItem>
+        <NavBlock icon="crown" link={`${sourcePrefix}/manage-sources`}>
+          <NavHeader link={`${sourcePrefix}/manage-sources`} title="Sources" />
+          <NavListItem link={`${sourcePrefix}/manage-sources`}>InfluxDB</NavListItem>
+          <NavListItem link={`${sourcePrefix}/kapacitor-config`}>Kapacitor</NavListItem>
+          <NavListItem link={`${sourcePrefix}/queries`}>Queries</NavListItem>
+          <NavListItem link={`${sourcePrefix}/tasks`}>Tasks</NavListItem>
+          <NavListItem link={`${sourcePrefix}/roles`}>Roles</NavListItem>
+          <NavListItem link={`${sourcePrefix}/accounts`}>Cluster Accounts</NavListItem>
+          <NavListItem link={`${sourcePrefix}/databases/manager/_internal`}>Database Manager</NavListItem>
+          <NavListItem link={`${sourcePrefix}/databases/retentionpolicies/_internal`}>Retention Policies</NavListItem>
         </NavBlock>
-        <NavBlock matcher="alerting" icon="cubo-uniform">
-          <NavHeader link={`${sourcePrefix}/kapacitor_tasks`} title="Alerting" />
-          <NavListItem matcher="kapacitor_tasks" link={`${sourcePrefix}/kapacitor_tasks`}>Kapacitor Tasks</NavListItem>
+        <NavBlock icon="cubo-uniform" link={`${sourcePrefix}/kapacitor-tasks`}>
+          <NavHeader link={`${sourcePrefix}/kapacitor-tasks`} title="Alerting" />
+          <NavListItem link={`${sourcePrefix}/kapacitor-tasks`}>Kapacitor Tasks</NavListItem>
         </NavBlock>
       </NavBar>
     );