add target list
This commit is contained in:
snoop
parent
8dd13ab46e
commit
35852f03a0
@ -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>
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
|
||||
11
src/ts/components/Utils.tsx
Normal file
11
src/ts/components/Utils.tsx
Normal file
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
138
src/ts/containers/target/TargetList.tsx
Normal file
138
src/ts/containers/target/TargetList.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user