test

src/ts/containers/test/ProbeDetails.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Button, Table, Label, Segment, Header } from 'semantic-ui-react';
 import { TargetTable } from './Targets';
+import { DetailContainer } from './commons/DetailContainer';
 
 export class ProbeDetails extends React.Component<any, any> {
 
@@ -14,6 +15,25 @@ 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}/>
+    );
+  }
+}
+
+export class ProbeBasicInfo extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
   handleStartStop(event: any, data: any) {
     console.log(event);
   }
@@ -22,7 +42,7 @@ export class ProbeDetails extends React.Component<any, any> {
   }
 
   handleBack(event: any, data: any) {
-    console.log(data);
+    this.props.onBack();
   }
 
 
@@ -35,11 +55,7 @@ export class ProbeDetails extends React.Component<any, any> {
   }
 
   render() {
-    let elem: any;
+    return (
-    if (this.props.probe === null) {
-      elem = <div></div>;
-    } else {
-      elem =
       <Segment.Group>
         <Segment inverted color='grey'>
           <h4>Probe Details</h4>
@@ -86,7 +102,7 @@ export class ProbeDetails extends React.Component<any, any> {
 
               <Table.Row>
                 <Table.Cell colSpan='4'>
-                    <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack} />
+                  <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack.bind(this)} />
                   <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
                   {this.showStartStopBtn()}
 
@@ -95,22 +111,7 @@ export class ProbeDetails extends React.Component<any, any> {
             </Table.Body>
           </Table>
         </Segment>
-
+      </Segment.Group>
-          <Segment inverted color='grey'>
-          <h4>Probe's Targets</h4>
-          </Segment>
-          <Segment>
-            <TargetTable probe={this.props.probe}/>
-          </Segment>
-        </Segment.Group>;
-    }
-    return (
-      <div>
-        {elem}
-      </div>
     );
   }
 }
-
-
-

src/ts/containers/test/Probes.tsx

@@ -11,6 +11,7 @@ export class Probes extends React.Component<any, any> {
     super(props, context);
     this.state = {
       selected: null,
+      isDetail: false,
     };
   }
 
@@ -64,7 +65,7 @@ export class Probes extends React.Component<any, any> {
   }
 
   checkCellStatus(status: any): boolean {
-    if(status.name === 'STOPPED') {
+    if (status.name === 'STOPPED') {
       return true;
     }
     return false;
@@ -73,13 +74,16 @@ export class Probes extends React.Component<any, any> {
   handleSelect(selectedProbe: object) {
     this.setState({
       selected: selectedProbe,
+      isDetail: true,
     });
   }
 
   render() {
+    if (this.state.isDetail) {
+      return <ProbeDetails probe={this.state.selected} onBack={()=>this.setState({isDetail:false})}/>;
+    } 
 
     return (
-      <div>
       <Table selectable striped>
         <Table.Header>
           <Table.Row>
@@ -103,10 +107,6 @@ export class Probes extends React.Component<any, any> {
           ))}
         </Table.Body>
       </Table>
-        <div>
-          <ProbeDetails probe={this.state.selected} />
-        </div>
-      </div>
     );
   }
 }

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Grid, Menu, Segment } from 'semantic-ui-react';
+
+export class DetailContainer extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      active: 0,
+    };
+  }
+
+  showContents() {
+    return this.props.panes[this.state.active].child;
+  }
+
+  handleClick(index: number) {
+    this.setState({
+      active: index,
+    });
+  }
+
+  render() {
+    const activeItem = this.state.activeItem;
+
+    return (
+      <Grid>
+        <Grid.Column width={4} >
+          <Menu pointing secondary vertical >
+            {this.props.panes.map((pane: any, index: number) => (
+              <Menu.Item key={index} name={pane.name} onClick={this.handleClick.bind(this, index)} active={this.state.active === index} />
+            ))}
+          </Menu>
+        </Grid.Column>
+
+        <Grid.Column stretched width={12} >
+          <Segment basic>
+            {this.showContents()}
+          </Segment>
+        </Grid.Column>
+      </Grid>
+    );
+  }
+}