add target list

src/ts/Routes.tsx

@@ -15,6 +15,8 @@ import { MemberEmailConfirm } from './containers/member/EmailConfirm';
 import { Agents } from './containers/agent/Agents';
 import { AgentDetail } from './containers/agent/AgentDetail';
 
+import { TargetList } from './containers/target/TargetList';
+
 export class Routes extends React.Component<any, any> {
   render() {
     return (
@@ -33,6 +35,7 @@ export class Routes extends React.Component<any, any> {
         <li><Link to='/prove/download' >ProveDownload</Link></li>
         <li><Link to='/agent/agents' >Agents</Link></li>
         <li><Link to='/agent/agentDetail' >AgentDetail</Link></li>
+        <li><Link to='/target/targetList' >TargetList</Link></li>
         
         <Switch>
           <Route exact path='/' component={Main} />
@@ -47,6 +50,8 @@ export class Routes extends React.Component<any, any> {
           <Route exact path='/agent/agents' component={Agents} />
           <Route exact path='/agent/agentDetail' component={AgentDetail} />
 
+          <Route exact path='/target/targetList' component={TargetList} />
+
           <Route component={NotFound} />
         </Switch>
         

src/ts/components/Rest.tsx

@@ -1,6 +1,6 @@
 
 
-const url = "http://192.168.1.105:8080/v1/overflow/services";
+const url = "http://192.168.1.209:8080/v1/overflow/services";
 
 export class OFRest {
 

src/ts/components/Utils.tsx

@@ -0,0 +1,11 @@
+
+
+
+
+export function int2ip (ipInt:number) {
+    return ( (ipInt>>>24) +'.' + (ipInt>>16 & 255) +'.' + (ipInt>>8 & 255) +'.' + (ipInt & 255) );
+}
+
+export function ip2int(ip:string) {
+    return ip.split('.').reduce(function(ipInt, octet) { return (ipInt<<8) + parseInt(octet, 10)}, 0) >>> 0;
+}

src/ts/containers/target/Table.tsx

@@ -1,104 +0,0 @@
-
-import * as React from 'react';
-import {
-  Table,
-  TableBody,
-  TableHeader,
-  TableHeaderColumn,
-  TableRow,
-  TableRowColumn,
-} from 'material-ui/Table';
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
-
-
-export class TargetTable extends React.Component<any, any> {
-  constructor(props: any, context: any) {
-    super(props, context);
-
-    this.state = {
-        finished: false,
-        stepIndex: 0,
-        selectedTarget: 0,
-        selectedSensors : []
-    };
-  }
-
-  render() {
-
-    var Columns = ["ID", "Name", "Status"]
-
-    var objs = [
-      {
-        id:1,
-        name:"John Smith",
-        status:"Employed"
-      },
-      {
-        id:2,
-        name:"John Male",
-        status:"Unemployed"
-      },
-      {
-        id:3,
-        name:"John Curter",
-        status:"Employed"
-      },
-      {
-        id:4,
-        name:"John Son",
-        status:"Unemployed"
-      }
-    ]
-
-    return (
-      <MuiThemeProvider >
-        <div>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                {/*<TableHeaderColumn>ID</TableHeaderColumn>
-                <TableHeaderColumn>Name</TableHeaderColumn>
-                <TableHeaderColumn>Status</TableHeaderColumn>*/
-                Columns.map(function(item) {
-                  return (<TableHeaderColumn>{item}</TableHeaderColumn>)
-                })
-
-                }
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {
-
-              }
-              <TableRow>
-                <TableRowColumn>1</TableRowColumn>
-                <TableRowColumn>John Smith</TableRowColumn>
-                <TableRowColumn>Employed</TableRowColumn>
-              </TableRow>
-              <TableRow>
-                <TableRowColumn>2</TableRowColumn>
-                <TableRowColumn>Randal White</TableRowColumn>
-                <TableRowColumn>Unemployed</TableRowColumn>
-              </TableRow>
-              <TableRow>
-                <TableRowColumn>3</TableRowColumn>
-                <TableRowColumn>Stephanie Sanders</TableRowColumn>
-                <TableRowColumn>Employed</TableRowColumn>
-              </TableRow>
-              <TableRow>
-                <TableRowColumn>4</TableRowColumn>
-                <TableRowColumn>Steve Brown</TableRowColumn>
-                <TableRowColumn>Employed</TableRowColumn>
-              </TableRow>
-              <TableRow>
-                <TableRowColumn>5</TableRowColumn>
-                <TableRowColumn>Christopher Nolan</TableRowColumn>
-                <TableRowColumn>Unemployed</TableRowColumn>
-              </TableRow>
-            </TableBody>
-          </Table>
-        </div>
-      </MuiThemeProvider>
-    );
-  }
-}

src/ts/containers/target/TargetList.tsx

@@ -0,0 +1,138 @@
+import * as React from 'react';
+
+import { List, ListItem, makeSelectable } from 'material-ui/List';
+import Subheader from 'material-ui/Subheader';
+import Paper from 'material-ui/Paper';
+
+import { OFRest } from '../../components/Rest';
+import * as Utils from '../../components/Utils';
+
+const styles = {
+  test: {
+    display: 'inline-block',
+    float: 'left',
+    width: '50%',
+    height: 550,
+  },
+  container: {
+    width: '80%',
+
+  }
+}
+
+let SelectableList = makeSelectable(List);
+
+function wrapState(ComposedComponent: any, par: any) {
+  return class SelectableList extends React.Component<any, any> {
+
+    componentWillMount() {
+      this.setState({
+        selectedIndex: -1,
+      });
+    }
+
+    handleRequestChange = (event: any, index: any) => {
+      this.setState({
+        selectedIndex: index,
+      });
+      par.handleSelect(index);
+    };
+
+    render() {
+      return (
+        <ComposedComponent
+          value={this.state.selectedIndex}
+          onChange={this.handleRequestChange}
+        >
+          {this.props.children}
+        </ComposedComponent>
+      );
+    }
+  };
+}
+
+var testRes = "[{\"id\":1,\"ip\":3232235882,\"port\":5432,\"targetType\":\"DATABASE\",\"vendorName\":\"PostgreSQL 9.5.0\",\"kinds\":\"PostgreSQL\",\"version\":\"9.5.0\",\"createDate\":1496631864025,\"member\":{\"id\":1,\"email\":\"insanity33@loafle.com\",\"pwSalt\":\"salktttt\",\"digest\":\"bbbbbbbbb\",\"name\":\"insanity3\",\"company\":\"loafle\",\"phone\":\"000-000-0000\",\"authorizedDate\":null}},{\"id\":2,\"ip\":3232235882,\"port\":5432,\"targetType\":\"DATABASE\",\"vendorName\":\"PostgreSQL 9.5.0\",\"kinds\":\"PostgreSQL\",\"version\":\"9.5.0\",\"createDate\":1496635285090,\"member\":{\"id\":1,\"email\":\"insanity33@loafle.com\",\"pwSalt\":\"salktttt\",\"digest\":\"bbbbbbbbb\",\"name\":\"insanity3\",\"company\":\"loafle\",\"phone\":\"000-000-0000\",\"authorizedDate\":null}},{\"id\":3,\"ip\":3232235882,\"port\":5432,\"targetType\":\"DATABASE\",\"vendorName\":\"PostgreSQL 9.5.0\",\"kinds\":\"PostgreSQL\",\"version\":\"9.5.0\",\"createDate\":-62135596800000,\"member\":{\"id\":1,\"email\":\"\",\"pwSalt\":\"\",\"digest\":\"\",\"name\":\"\",\"company\":\"\",\"phone\":\"\",\"authorizedDate\":0}}]";
+
+var RES = JSON.parse(testRes);
+
+export class TargetList extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context)
+    SelectableList = wrapState(SelectableList, this);
+
+    this.componentWillMount = this.componentWillMount.bind(this)
+
+  }
+
+  componentWillMount() {
+    this.getTargetList();
+  }
+
+  getTargetList() {
+
+
+
+    // let os: OFRest = new OFRest("Member", "Regist", obj);
+
+    // os.Call().then(function (res) {
+    //   return res.json();
+    // }).then(function (json) {
+    //   console.log(json);
+    // }).catch(function (err) {
+    //   console.log(err);
+    // });
+
+    
+  }
+
+  handleSelect(idx: any) {
+    this.props.onChange(idx);
+  }
+
+  render() {
+    let num :number;
+    num = 1;
+    return (
+      <div style={styles.container}>
+
+        <SelectableList>
+          <Subheader>Select a target to monitor</Subheader>
+          <ListItem
+            value={num++}
+            primaryText="192.168.1.0"
+            secondaryText={'Zone'}
+            initiallyOpen={true}
+            nestedItems={[
+              
+
+              RES.map(function (item: any, index: number) {
+                
+                let port :string;
+                port = "Port : "
+                
+                
+                return (
+                  <ListItem
+                    value={num++}
+                    primaryText={Utils.int2ip(item.ip)}
+                    secondaryText={'Host'}
+                    initiallyOpen={true}
+                    nestedItems={[
+                      <ListItem
+                        value={num++}
+                        primaryText={item.vendorName}
+                        secondaryText={item.port} />,
+                     
+                    ]}
+                  />
+                )
+              })
+            ]}
+          />
+        </SelectableList>
+
+
+      </div>
+    );
+  }
+}

webpack.config.js

@@ -25,7 +25,7 @@ module.exports = {
         historyApiFallback: true,
         contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path
         publicPath:  '/' ,// match the output `publicPath`
-        host: '192.168.1.105',
+        host: '192.168.1.209',
         port: 9091,
         stats: { 
             colors: true