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

Merge pull request #917 from influxdata/nav-experiment 

Side Nav Simplification
pull/908/head^2
Andrew Watkins 2017-02-22 21:04:42 -06:00 committed by GitHub
parent 190c09f430 a680ed149b
commit 1af9040959
3 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -9,6 +9,7 @@
### UI Improvements ### UI Improvements
1. [#905](https://github.com/influxdata/chronograf/pull/905): Make scroll bar thumb element bigger 1. [#905](https://github.com/influxdata/chronograf/pull/905): Make scroll bar thumb element bigger
2. [#917](https://github.com/influxdata/chronograf/pull/917): Simplify side navigation
## v1.2.0-beta3 [2017-02-15] ## v1.2.0-beta3 [2017-02-15]

14
ui/src/dashboards/containers/DashboardsPage.js
View File

@ -34,13 +34,14 @@ const DashboardsPage = React.createClass({
}, },
render() { render() {
const dashboardLink = `/sources/${this.props.source.id}`;
let tableHeader; let tableHeader;
if (this.state.waiting) { if (this.state.waiting) {
tableHeader = "Loading Dashboards..."; tableHeader = "Loading Dashboards...";
} else if (this.state.dashboards.length === 0) { } else if (this.state.dashboards.length === 0) {
tableHeader = "No Dashboards"; tableHeader = "1 Dashboard";
} else { } else {
tableHeader = `${this.state.dashboards.length} Dashboards`; tableHeader = `${this.state.dashboards.length + 1} Dashboards`;
} }
return ( return (
@ -75,7 +76,7 @@ const DashboardsPage = React.createClass({
return ( return (
<tr key={dashboard.id}> <tr key={dashboard.id}>
<td className="monotype"> <td className="monotype">
<Link to={`/sources/${this.props.source.id}/dashboards/${dashboard.id}`}> <Link to={`${dashboardLink}/dashboards/${dashboard.id}`}>
{dashboard.name} {dashboard.name}
</Link> </Link>
</td> </td>
@ -83,6 +84,13 @@ const DashboardsPage = React.createClass({
); );
}) })
} }
<tr>
<td className="monotype">
<Link to={`${dashboardLink}/kubernetes`}>
{'Kubernetes'}
</Link>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>

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

@ -23,22 +23,21 @@ const SideNav = React.createClass({
<div className="sidebar__logo"> <div className="sidebar__logo">
<a href="/"><span className="icon cubo-uniform"></span></a> <a href="/"><span className="icon cubo-uniform"></span></a>
</div> </div>
<NavBlock icon="cpu" link={`${sourcePrefix}/hosts`}> <NavBlock icon="cubo-node" link={`${sourcePrefix}/hosts`}>
<NavHeader link={`${sourcePrefix}/hosts`} title="Infrastructure" /> <NavHeader link={`${sourcePrefix}/hosts`} title="Host List" />
<NavListItem link={`${sourcePrefix}/hosts`}>Host List</NavListItem>
<NavListItem link={`${sourcePrefix}/kubernetes`}>Kubernetes Dashboard</NavListItem>
</NavBlock> </NavBlock>
<NavBlock icon="graphline" link={dataExplorerLink}> <NavBlock icon="graphline" link={dataExplorerLink}>
<NavHeader link={dataExplorerLink} title={'Data'} /> <NavHeader link={dataExplorerLink} title="Data Explorer" />
<NavListItem link={dataExplorerLink}>Explorer</NavListItem>
<NavListItem link={`${sourcePrefix}/dashboards`}>Dashboards</NavListItem>
</NavBlock> </NavBlock>
<NavBlock matcher="alerts" icon="pulse-b" link={`${sourcePrefix}/alerts`}> <NavBlock icon="dash-h" link={`${sourcePrefix}/dashboards`}>
<NavHeader link={`${sourcePrefix}/dashboards`} title={'Dashboards'} />
</NavBlock>
<NavBlock matcher="alerts" icon="alert-triangle" link={`${sourcePrefix}/alerts`}>
<NavHeader link={`${sourcePrefix}/alerts`} title="Alerting" /> <NavHeader link={`${sourcePrefix}/alerts`} title="Alerting" />
<NavListItem link={`${sourcePrefix}/alerts`}>Alert History</NavListItem> <NavListItem link={`${sourcePrefix}/alerts`}>Alert History</NavListItem>
<NavListItem link={`${sourcePrefix}/alert-rules`}>Kapacitor Rules</NavListItem> <NavListItem link={`${sourcePrefix}/alert-rules`}>Kapacitor Rules</NavListItem>
</NavBlock> </NavBlock>
<NavBlock icon="access-key" link={`${sourcePrefix}/manage-sources`}> <NavBlock icon="cog-thick" link={`${sourcePrefix}/manage-sources`}>
<NavHeader link={`${sourcePrefix}/manage-sources`} title="Configuration" /> <NavHeader link={`${sourcePrefix}/manage-sources`} title="Configuration" />
<NavListItem link={`${sourcePrefix}/manage-sources`}>InfluxDB</NavListItem> <NavListItem link={`${sourcePrefix}/manage-sources`}>InfluxDB</NavListItem>
<NavListItem link={`${sourcePrefix}/kapacitor-config`}>Kapacitor</NavListItem> <NavListItem link={`${sourcePrefix}/kapacitor-config`}>Kapacitor</NavListItem>