Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Make link highlighting great again. also prefer dashes to underscores in routes

pull/10616/head
Will Piers 2016-10-25 15:05:42 -07:00
parent 97fb7a834c
commit 4531b718a3
4 changed files with 34 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/chronograf/actions/view/index.js
View File

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

8
ui/src/index.js
View File

@ -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} />

18
ui/src/side_nav/components/NavItems.js
View File

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

36
ui/src/side_nav/components/SideNav.js
View File

@ -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>
);