listcontainer

src/ts/containers/test/ProbeDetails.tsx

@@ -16,7 +16,7 @@ export class ProbeDetails extends React.Component<any, any> {
 
   render() {
     return (
-      <Container>
+      <Container fluid>
         <ProbeBasicInfo probe={this.props.probe} />
         <TargetTable />
       </Container>

src/ts/containers/test/Probes.tsx

@@ -82,9 +82,8 @@ export class Probes extends React.Component<any, any> {
     if (this.state.isDetail) {
       return <ProbeDetails probe={this.state.selected} onBack={() => this.setState({ isDetail: false })} />;
     }
-    let component =
+    let probeList =
       <Container fluid>
-        <Header as='h3' dividing>Probe</Header>
         <Table selectable striped>
           <Table.Header>
             <Table.Row>
@@ -111,7 +110,7 @@ export class Probes extends React.Component<any, any> {
       </Container>;
 
     return (
-      <ListContainer contents={component}/>
+      <ListContainer contents={probeList}/>
     );
   }
 }

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

@@ -14,12 +14,10 @@ export class ListContainer extends React.Component<any, any> {
   }
 
   render() {
-    const activeItem = this.state.activeItem;
-
     return (
       <Grid>
         <Grid.Column width={4} textAlign='center' color='grey'>
-          Chart Area
+          CHART AREA
         </Grid.Column>
         <Grid.Column stretched width={12} >
           {this.showContents()}

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Sidebar, Segment } from 'semantic-ui-react';
+
+export class SideBarContainer extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  showContents() {
+    return this.props.contents;
+  }
+
+  render() {
+    return (
+        <Sidebar.Pushable as={Segment}>
+          <Sidebar
+            animation='overlay'
+            width='thin'
+            direction='right'
+            visible={true}
+            icon='labeled'
+            vertical
+            inverted
+          >
+          test contents
+          </Sidebar>  
+        </Sidebar.Pushable>
+    );
+  }
+}