generate header based on routes

frontend/src/component/app.jsx

@@ -3,12 +3,28 @@ import { Layout, Drawer, Header, Navigation, Content,
     Footer, FooterSection, FooterDropDownSection, FooterLinkList,
     Grid, Cell,
 } from 'react-mdl';
+import { Link } from 'react-router';
 import style from './styles.scss';
 import ErrorContainer from './error/error-container';
 
 import UserContainer from './user/user-container';
 import ShowUserContainer from './user/show-user-container';
 
+const base = {
+    name: 'Unleash',
+    link: '/',
+};
+
+function replace (input, params) {
+    if (!params) {
+        return input;
+    }
+    Object.keys(params).forEach(key => {
+        input = input.replace(`:${key}`, params[key]);
+    });
+    return input;
+}
+
 export default class App extends Component {
     constructor (props) {
         super(props);
@@ -32,6 +48,34 @@ export default class App extends Component {
         return lastRoute ? lastRoute.pageTitle : '';
     }
 
+    getTitleWithLinks () {
+        const { routes, params } = this.props;
+        const unique = {};
+        let result = [base].concat(routes.splice(1).map((routeEntry) => ({
+            name: replace(routeEntry.pageTitle, params),
+            link: replace(routeEntry.link || routeEntry.path, params),
+        }))).filter(entry => {
+            if (!unique[entry.link]) {
+                unique[entry.link] = true;
+                return true;
+            }
+            return false;
+        });
+
+        if (result.length > 2) {
+            result = result.splice(1);
+        }
+        return (
+            <span>
+                {result.map((entry, index) => (
+                    <span><Link style={{ color: '#f1f1f1', textDecoration: 'none' }} key={entry.link + index} to={entry.link}>
+                        {entry.name}
+                    </Link> {(index + 1) < result.length ? ' / ' : null}</span>
+                ))}
+            </span>
+        );
+    }
+
     onOverlayClick = () => this.setState({ drawerActive: false });
 
     render () {
@@ -46,7 +90,7 @@ export default class App extends Component {
             <div style={{}}>
                 <UserContainer />
                 <Layout fixedHeader>
-                    <Header title={<span><span style={{ color: '#ddd' }}>Unleash Admin / </span><strong>{this.getCurrentSection()}</strong></span>}>
+                    <Header title={this.getTitleWithLinks()}>
                         <Navigation>
                             <a href="https://github.com/Unleash" target="_blank">Github</a>
                             <ShowUserContainer />

frontend/src/index.jsx

@@ -29,22 +29,37 @@ const unleashStore = createStore(
     )
 );
 
+// "pageTitle" and "link" attributes are for internal usage only
+
 ReactDOM.render(
     <Provider store={unleashStore}>
         <Router history={hashHistory}>
             <Route path="/" component={App}>
                 <IndexRedirect to="/features" />
-                <Route pageTitle="Features" path="/features" component={Features} />
+
-                <Route pageTitle="Features" path="/features/create" component={CreateFeatureToggle} />
+                <Route pageTitle="Features" link="/features">
-                <Route pageTitle="Features" path="/features/edit/:name" component={EditFeatureToggle} />
+                    <Route pageTitle="Features" path="/features" component={Features} />
-                <Route pageTitle="Strategies" path="/strategies" component={Strategies} />
+                    <Route pageTitle="New" path="/features/create" component={CreateFeatureToggle} />
-                <Route pageTitle="Strategies" path="/strategies/create" component={CreateStrategies} />
+                    <Route pageTitle=":name" path="/features/edit/:name" component={EditFeatureToggle} />
-                <Route pageTitle="Strategies" path="/strategies/view/:strategyName" component={StrategyView} />
+                </Route>
-                <Route pageTitle="History"  path="/history" component={HistoryPage} />
+                
-                <Route pageTitle="History" path="/history/:toggleName" component={HistoryTogglePage} />
+                <Route pageTitle="Strategies" link="/strategies">
+                    <Route pageTitle="Strategies" path="/strategies" component={Strategies} />
+                    <Route pageTitle="New" path="/strategies/create" component={CreateStrategies} />
+                    <Route pageTitle=":strategyName" path="/strategies/view/:strategyName" component={StrategyView} />
+                </Route>
+                
+                <Route pageTitle="History" link="/history">
+                    <Route pageTitle="History"  path="/history" component={HistoryPage} />
+                    <Route pageTitle=":toggleName" path="/history/:toggleName" component={HistoryTogglePage} />
+                </Route>
+
                 <Route pageTitle="Archive" path="/archive" component={Archive} />
-                <Route pageTitle="Applications" path="/applications" component={Applications} />
+                <Route pageTitle="Applications" link="/applications">
-                <Route pageTitle="Applications" path="/applications/:name" component={ApplicationView} />
+                    <Route pageTitle="Applications" path="/applications" component={Applications} />
+                    <Route pageTitle=":name" path="/applications/:name" component={ApplicationView} />
+                </Route>
+                
                 <Route pageTitle="Client strategies" ppath="/client-strategies" component={ClientStrategies} />
             </Route>
         </Router>