listcontainer

src/ts/containers/test/ProbeDetails.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
 import { TargetTable } from './Targets';
-import { DetailContainer } from './commons/DetailContainer';
 
 export class ProbeDetails extends React.Component<any, any> {
 
@@ -16,12 +15,11 @@ export class ProbeDetails extends React.Component<any, any> {
   }
 
   render() {
-    const items = [
-      { name: 'Info', child: <ProbeBasicInfo probe={this.props.probe}/> },
-      { name: 'Targets', child: <TargetTable /> },
-    ];
     return (
-      <DetailContainer panes={items}/>
+      <Container>
+        <ProbeBasicInfo probe={this.props.probe} />
+        <TargetTable />
+      </Container>
     );
   }
 }

src/ts/containers/test/Probes.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Table, Header, Container } from 'semantic-ui-react';
 import { ProbeDetails } from './ProbeDetails';
-
+import { ListContainer } from './commons/ListContainer';
 
 export class Probes extends React.Component<any, any> {
 
@@ -80,10 +80,9 @@ export class Probes extends React.Component<any, any> {
 
   render() {
     if (this.state.isDetail) {
-      return <ProbeDetails probe={this.state.selected} onBack={()=>this.setState({isDetail:false})}/>;
-    } 
-
-    return (
+      return <ProbeDetails probe={this.state.selected} onBack={() => this.setState({ isDetail: false })} />;
+    }
+    let component =
       <Container fluid>
         <Header as='h3' dividing>Probe</Header>
         <Table selectable striped>
@@ -109,7 +108,10 @@ export class Probes extends React.Component<any, any> {
             ))}
           </Table.Body>
         </Table>
-      </Container>
+      </Container>;
+
+    return (
+      <ListContainer contents={component}/>
     );
   }
 }

src/ts/containers/test/TargetDetails.tsx

@@ -23,11 +23,15 @@ export class TargetDetails extends React.Component<any, any> {
 
     const items = [
       { name: 'Info', child: <TargetBasicInfo probe={this.props.probe} /> },
-      { name: 'Sensors', child: <Sensors probe={this.props.probe}/> },
+      { name: 'Sensors', child: <Sensors probe={this.props.probe} /> },
     ];
 
     return (
-      <DetailContainer panes={items}/>
+      // <DetailContainer panes={items}/>
+      <Container>
+        <TargetBasicInfo probe={this.props.probe} />
+        <Sensors probe={this.props.probe} />
+      </Container>
     );
   }
 }
@@ -55,7 +59,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Name</Header>
-            </Table.Cell>
+              </Table.Cell>
               <Table.Cell>
                 ???
             </Table.Cell>
@@ -64,7 +68,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Type</Header>
-            </Table.Cell>
+              </Table.Cell>
               <Table.Cell>
                 ????
             </Table.Cell>
@@ -73,7 +77,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Sensor count</Header>
-            </Table.Cell>
+              </Table.Cell>
               <Table.Cell>
                 ???
             </Table.Cell>
@@ -82,7 +86,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
             <Table.Row>
               <Table.Cell collapsing>
                 <Header size='small'>Created at</Header>
-            </Table.Cell>
+              </Table.Cell>
               <Table.Cell>
                 ???
             </Table.Cell>

src/ts/containers/test/commons/ListContainer.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Grid } from 'semantic-ui-react';
+
+export class ListContainer extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  showContents() {
+    return this.props.contents;
+  }
+
+  render() {
+    const activeItem = this.state.activeItem;
+
+    return (
+      <Grid>
+        <Grid.Column width={4} textAlign='center' color='grey'>
+          Chart Area
+        </Grid.Column>
+        <Grid.Column stretched width={12} >
+          {this.showContents()}
+        </Grid.Column>
+      </Grid>
+    );
+  }
+}

src/ts/containers/test/layout/TitleBar.tsx

@@ -9,20 +9,19 @@ export class TitleBar extends React.Component<any, any> {
     };
   }
 
-  handleMenu(idx: number) {
-    alert(idx);
-  }
-
   render() {
     let subMenus = [
       {
         "name": "Menu1",
+        "href": "#/test2"
       },
       {
         "name": "Menu2",
+        "href": "#/test3"
       },
       {
         "name": "Menu3",
+        "href": "#/test4"
       },
     ];
     return (
@@ -43,7 +42,7 @@ export class TitleBar extends React.Component<any, any> {
           <Grid.Column width='13'>
             <Menu secondary borderless>
               {subMenus.map((menu: any, index: number) => (
-                <Menu.Item name={menu.name} key={index} onClick={this.handleMenu.bind(this, index)}/>
+                <Menu.Item key={index} name={menu.name} href={menu.href} />
               ))}
             </Menu>
           </Grid.Column>