breadcrumb and title

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Redirect, RouteComponentProps, RouteProps, Route, Switch } from 'react-router-dom';
-import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb, Grid, Dropdown } from 'semantic-ui-react';
+import { Container, Segment } from 'semantic-ui-react';
 import { Header } from './Header';
 import { Footer } from './Footer';
 import LeftMenu from './LeftMenu';
@@ -9,12 +9,11 @@ import Home from '../Home';
 import ProbeList from '../../views/monitoring/probe/List';
 import TargetList from '../../views/infrastructure/target/List';
 import SensorList from '../monitoring/sensor/List';
+import TitleBarContainer from '@overflow/app/views/layout/TitleBarContainer';
 
 export interface Props extends RouteComponentProps<any> {
 }
 export interface State {
-  sidebar_visible: boolean;
-  notification_visible: boolean;
 }
 
 export class AppLayout extends React.Component<Props, State> {
@@ -22,14 +21,9 @@ export class AppLayout extends React.Component<Props, State> {
   constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
-      sidebar_visible: true,
-      notification_visible: false,
     };
   }
 
-  public onSidebar = () => {
-    this.setState({ notification_visible: !this.state.notification_visible, sidebar_visible: !this.state.sidebar_visible });
-  }
 
   public render(): JSX.Element {
     return (
@@ -37,6 +31,7 @@ export class AppLayout extends React.Component<Props, State> {
         <LeftMenu />
         <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
           <Header />
+          <TitleBarContainer location={this.props.location.pathname}/>
             <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

@@ -8,7 +8,7 @@ import LeftMenu from './LeftMenu';
 
 import ProbeDetail from '../../views/monitoring/probe/Detail';
 import ProbeHistory from '../../views/monitoring/probe/History';
-
+import TargetList from '../../views/infrastructure/target/List';
 
 export interface Props extends RouteComponentProps<any> {
 }
@@ -36,16 +36,21 @@ export class ProbeDetailLayout extends React.Component<Props, State> {
         'name': 'History',
         'path': this.state.currUrl + '/history',
       },
+      {
+        'name': 'Targets',
+        'path': this.state.currUrl + '/targets',
+      },
     ];
     return (
       <Container fluid>
         <LeftMenu />
         <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
           <Header />
-          <TitleBarContainer title='Probe Details' sub={sub}/>
+          <TitleBarContainer sub={sub} location={this.props.location.pathname}/>
           <Switch>
             <Route exact={true} path={`${this.props.match.url}/:id`} component={ProbeDetail} />
             <Route exact={true} path={`${this.props.match.url}/:id/history`} component={ProbeHistory} />
+            <Route exact={true} path={`${this.props.match.url}/:id/targets`} component={TargetList} />
           </Switch>
           <Footer />
         </Segment>

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

@@ -4,7 +4,7 @@ import { Grid, Container, Breadcrumb, Header, Menu, Input, Segment } from 'seman
 
 export interface StateProps {
   sub: any;
-  title: any;
+  location: string;
 }
 
 export interface DispatchProps {
@@ -46,18 +46,38 @@ export class TitleBar extends React.Component<Props, State> {
     ));
   }
 
+  public showTitle(): string {
+    let elems: JSX.Element[] = new Array();
+    let pathArr = this.props.location.split('/');
+    return this.capitalizeFirst(pathArr[1]);
+  }
+
+  public renderBreadcrumb(): JSX.Element[] {
+    let elems: JSX.Element[] = new Array();
+    let pathArr = this.props.location.split('/');
+
+    if (pathArr[1].indexOf('probe') > -1 || pathArr[1].indexOf('sensor') > -1) {
+      elems.push(<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>);
+      elems.push(<Breadcrumb.Divider />);
+      elems.push(<Breadcrumb.Section link active>{this.capitalizeFirst(pathArr[1])}</Breadcrumb.Section>);
+    }else if (pathArr[1].indexOf('target') > -1) {
+      elems.push(<Breadcrumb.Section link>Infrastructure</Breadcrumb.Section>);
+      elems.push(<Breadcrumb.Divider />);
+      elems.push(<Breadcrumb.Section link active>{this.capitalizeFirst(pathArr[1])}</Breadcrumb.Section>);
+    }
+    return elems;
+  }
+
   public render(): JSX.Element {
     return (
       <Menu fluid style={{ 'borderLeft': '0px', 'borderRight': '0px', 'boxShadow': 'none', 'borderRadius': '0' }}>
         <Menu.Item style={{ width: '250px' }}>
-          <Header as='h3'>{this.props.title}
+          <Header as='h3'>{this.showTitle()}
             <Header.Subheader>
               <Breadcrumb size='mini'>
                 <Breadcrumb.Section link>Home</Breadcrumb.Section>
                 <Breadcrumb.Divider />
-                <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
-                <Breadcrumb.Divider />
-                <Breadcrumb.Section active>Probes</Breadcrumb.Section>
+                {this.renderBreadcrumb()}
               </Breadcrumb>
             </Header.Subheader>
           </Header>
@@ -66,6 +86,9 @@ export class TitleBar extends React.Component<Props, State> {
       </Menu>
     );
   }
+  private capitalizeFirst(str: string): string {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
 }
 
 

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

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

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

@@ -4,7 +4,6 @@ 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()
@@ -19,7 +18,6 @@ class ProbeList extends React.Component<RouteComponentProps<object>, object> {
   public render(): JSX.Element {
     return (
       <div>
-        <TitleBarContainer title='Probes' />
         <ProbeListContainer />
       </div>
     );