testing

src/ts/@overflow/app/views/layout/AppLayout.tsx

@@ -3,7 +3,6 @@ import { Redirect, RouteComponentProps, RouteProps, Route, Switch } from 'react-
 import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb, Grid, Dropdown } from 'semantic-ui-react';
 import { Header } from './Header';
 import { Footer } from './Footer';
-import  TitleBarContainer from './TitleBarContainer';
 import LeftMenu from './LeftMenu';
 
 import Home from '../Home';
@@ -38,7 +37,6 @@ export class AppLayout extends React.Component<Props, State> {
         <LeftMenu />
         <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
           <Header />
-          <TitleBarContainer />
             <Switch>
               <Route exact={true} path={`${this.props.match.url}`} component={Home}/>
               <Route exact={true} path={`${this.props.match.url}probes`} component={ProbeList}/>

src/ts/@overflow/app/views/layout/ProbeDetailLayout.tsx

@@ -42,7 +42,7 @@ export class ProbeDetailLayout extends React.Component<Props, State> {
         <LeftMenu />
         <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
           <Header />
-          <TitleBarContainer sub={sub}/>
+          <TitleBarContainer title='Probe Details' sub={sub}/>
           <Switch>
             <Route exact={true} path={`${this.props.match.url}/:id`} component={ProbeDetail} />
             <Route exact={true} path={`${this.props.match.url}/:id/history`} component={ProbeHistory} />

src/ts/@overflow/app/views/layout/TitleBar.tsx

@@ -4,6 +4,7 @@ import { Grid, Container, Breadcrumb, Header, Menu, Input, Segment } from 'seman
 
 export interface StateProps {
   sub: any;
+  title: any;
 }
 
 export interface DispatchProps {
@@ -13,6 +14,7 @@ export interface DispatchProps {
 export type Props = StateProps & DispatchProps;
 
 export interface State {
+  selected: number;
 }
 
 export class TitleBar extends React.Component<Props, State> {
@@ -20,11 +22,17 @@ export class TitleBar extends React.Component<Props, State> {
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {
+      selected: 0,
     };
   }
 
-  public handleMenu(menu:any): any {
-    this.props.onRedirect(menu.path);
+  public handleMenu(menu: any, index: number): any {
+    this.setState({
+      selected: index,
+    });
+    if (this.state.selected !== index) {
+      this.props.onRedirect(menu.path);
+    }
   }
 
   public renderSubMenus(): JSX.Element {
@@ -34,15 +42,15 @@ export class TitleBar extends React.Component<Props, State> {
     }
 
     return subMenus.map((menu: any, index: number) => (
-      <Menu.Item key={index} name={menu.name} onClick={this.handleMenu.bind(this, menu)}/>
+      <Menu.Item key={index} name={menu.name} onClick={this.handleMenu.bind(this, menu, index)} active={this.state.selected === index} />
     ));
   }
 
   public render(): JSX.Element {
     return (
       <Menu fluid style={{ 'borderLeft': '0px', 'borderRight': '0px', 'boxShadow': 'none', 'borderRadius': '0' }}>
-        <Menu.Item name='TEMP' style={{ width: '250px' }}>
-          <Header as='h3'>TEMP
+        <Menu.Item style={{ width: '250px' }}>
+          <Header as='h3'>{this.props.title}
             <Header.Subheader>
               <Breadcrumb size='mini'>
                 <Breadcrumb.Section link>Home</Breadcrumb.Section>

src/ts/@overflow/app/views/layout/TitleBarContainer.tsx

@@ -10,6 +10,7 @@ import { push as routerPush } from 'react-router-redux';
 export function mapStateToProps(state: any, ownProps: any): StateProps {
     return {
       sub: ownProps.sub,
+      title: ownProps.title,
     };
 }
 

src/ts/@overflow/app/views/monitoring/probe/List.tsx

@@ -4,6 +4,7 @@ import ProbeListContainer from '@overflow/probe/react/ProbeList';
 import WebSocketRPC from '@overflow/commons/websocket/WebSocketRPC';
 import AppContext from '@overflow/commons/context';
 import inject from '@overflow/commons/context/decorator/inject';
+import TitleBarContainer from '@overflow/app/views/layout/TitleBarContainer';
 
 class ProbeList extends React.Component<RouteComponentProps<object>, object> {
   @inject()
@@ -17,7 +18,10 @@ class ProbeList extends React.Component<RouteComponentProps<object>, object> {
 
   public render(): JSX.Element {
     return (
-        <ProbeListContainer/>
+      <div>
+        <TitleBarContainer title='Probes' />
+        <ProbeListContainer />
+      </div>
     );
   }
 }