From 35852f03a0e7406d7a064f9ae41aaf0f9c1d1427 Mon Sep 17 00:00:00 2001 From: snoop Date: Mon, 5 Jun 2017 17:23:00 +0900 Subject: [PATCH] add target list --- src/ts/Routes.tsx | 5 + src/ts/components/Rest.tsx | 2 +- src/ts/components/Utils.tsx | 11 ++ src/ts/containers/target/Table.tsx | 104 ------------------ src/ts/containers/target/TargetList.tsx | 138 ++++++++++++++++++++++++ webpack.config.js | 2 +- 6 files changed, 156 insertions(+), 106 deletions(-) create mode 100644 src/ts/components/Utils.tsx delete mode 100644 src/ts/containers/target/Table.tsx create mode 100644 src/ts/containers/target/TargetList.tsx diff --git a/src/ts/Routes.tsx b/src/ts/Routes.tsx index 4ff8b6e..f9ba64d 100644 --- a/src/ts/Routes.tsx +++ b/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 { render() { return ( @@ -33,6 +35,7 @@ export class Routes extends React.Component {
  • ProveDownload
  • Agents
  • AgentDetail
    • +
  • TargetList
    • @@ -47,6 +50,8 @@ export class Routes extends React.Component { + + diff --git a/src/ts/components/Rest.tsx b/src/ts/components/Rest.tsx index 0f65333..bd3a6d8 100644 --- a/src/ts/components/Rest.tsx +++ b/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 { diff --git a/src/ts/components/Utils.tsx b/src/ts/components/Utils.tsx new file mode 100644 index 0000000..2d785e8 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/ts/containers/target/Table.tsx b/src/ts/containers/target/Table.tsx deleted file mode 100644 index 2ddaa18..0000000 --- a/src/ts/containers/target/Table.tsx +++ /dev/null @@ -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 { - 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 ( - -
    - - - - {/*ID - Name - Status*/ - Columns.map(function(item) { - return ({item}) - }) - - } - - - - { - - } - - 1 - John Smith - Employed - - - 2 - Randal White - Unemployed - - - 3 - Stephanie Sanders - Employed - - - 4 - Steve Brown - Employed - - - 5 - Christopher Nolan - Unemployed - - -
    -
    -     - ); - } -} \ No newline at end of file diff --git a/src/ts/containers/target/TargetList.tsx b/src/ts/containers/target/TargetList.tsx new file mode 100644 index 0000000..a59aacf --- /dev/null +++ b/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 { + + componentWillMount() { + this.setState({ + selectedIndex: -1, + }); + } + + handleRequestChange = (event: any, index: any) => { + this.setState({ + selectedIndex: index, + }); + par.handleSelect(index); + }; + + render() { + return ( + + {this.props.children} + + ); + } + }; +} + +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 { + 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 ( +
    + + + Select a target to monitor + , + + ]} + /> + ) + }) + ]} + /> + + + +
    + ); + } +} diff --git a/webpack.config.js b/webpack.config.js index 8d1f2dc..3a72835 100644 --- a/webpack.config.js +++ b/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