test
This commit is contained in:
parent
594dcc9191
commit
db1b98f8b3
|
@ -17,9 +17,6 @@ export class OFRest {
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public Call() {
|
public Call() {
|
||||||
|
@ -28,10 +25,9 @@ export class OFRest {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Accept': 'application/json',
|
'Accept': 'application/json',
|
||||||
// mode: 'no-cors'
|
|
||||||
},
|
},
|
||||||
body: JSON.stringify(this.obj)
|
body: JSON.stringify(this.obj)
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,152 +1,125 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
|
||||||
import { List, ListItem, makeSelectable } from 'material-ui/List';
|
import { List, ListItem, makeSelectable } from 'material-ui/List';
|
||||||
import Subheader from 'material-ui/Subheader';
|
import Subheader from 'material-ui/Subheader';
|
||||||
import Paper from 'material-ui/Paper';
|
import Paper from 'material-ui/Paper';
|
||||||
|
|
||||||
import { OFRest } from '../../components/Rest';
|
import { OFRest } from '../../components/Rest';
|
||||||
import * as Utils from '../../components/Utils';
|
import * as Utils from '../../components/Utils';
|
||||||
|
|
||||||
import RaisedButton from 'material-ui/RaisedButton';
|
import RaisedButton from 'material-ui/RaisedButton';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableHeader,
|
||||||
|
TableHeaderColumn,
|
||||||
|
TableFooter,
|
||||||
|
TableRow,
|
||||||
|
TableRowColumn,
|
||||||
|
} from 'material-ui/Table';
|
||||||
|
|
||||||
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}}]";
|
|
||||||
|
|
||||||
var RES = JSON.parse(testRes);
|
|
||||||
|
|
||||||
export class TargetList extends React.Component<any, any> {
|
export class TargetList extends React.Component<any, any> {
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context)
|
super(props, context);
|
||||||
SelectableList = wrapState(SelectableList, this);
|
this.state = {
|
||||||
|
selected: [],
|
||||||
this.componentWillMount = this.componentWillMount.bind(this)
|
targets: [],
|
||||||
|
};
|
||||||
this.getTargetList = this.getTargetList.bind(this);
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillMount() {
|
componentWillMount() {
|
||||||
|
this.getTargetList();
|
||||||
}
|
}
|
||||||
|
|
||||||
getTargetList() {
|
getTargetList() {
|
||||||
|
let obj: any;
|
||||||
let obj: any
|
|
||||||
|
|
||||||
obj = {
|
obj = {
|
||||||
"id":"0",
|
"id": "0",
|
||||||
"member":{
|
"member": {
|
||||||
"id":"1"
|
"id": "1"
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let os: OFRest = new OFRest("Target", "List", obj);
|
let os: OFRest = new OFRest("Target", "List", obj);
|
||||||
|
var that: any = this;
|
||||||
os.Call().then(function (res) {
|
os.Call().then(function (res) {
|
||||||
return res.json();
|
return res.json();
|
||||||
}).then(function (json) {
|
}).then(function (json) {
|
||||||
|
let targetList = JSON.parse(json.resultStr);
|
||||||
RES = JSON.parse(json)
|
that.setState({
|
||||||
|
targets: targetList,
|
||||||
|
});
|
||||||
}).catch(function (err) {
|
}).catch(function (err) {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSelect(idx: any) {
|
|
||||||
this.props.onChange(idx);
|
handleRowSelection = (selectedRows: any) => {
|
||||||
|
this.setState({
|
||||||
|
selected: selectedRows,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSignUp() {
|
handleNext = () => {
|
||||||
this.getTargetList()
|
if (this.state.selected.length === 0) {
|
||||||
|
alert('Select a target to monitor');
|
||||||
|
}else {
|
||||||
|
alert("ID: "+ this.state.targets[this.state.selected[0]].id);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
isSelected = (index: any) => {
|
||||||
|
if (this.state.selected.indexOf(index) === -1) {
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let num: number;
|
|
||||||
num = 1;
|
|
||||||
return (
|
return (
|
||||||
<div style={styles.container}>
|
<div >
|
||||||
|
|
||||||
<SelectableList>
|
<Table
|
||||||
<Subheader>Select a target to monitor</Subheader>
|
selectable={true}
|
||||||
<ListItem
|
multiSelectable={false}
|
||||||
value={num++}
|
onRowSelection={this.handleRowSelection.bind(this)}
|
||||||
primaryText="192.168.1.0"
|
>
|
||||||
secondaryText={'Zone'}
|
<TableHeader
|
||||||
initiallyOpen={true}
|
adjustForCheckbox={false}
|
||||||
nestedItems={[
|
enableSelectAll={false}
|
||||||
|
displaySelectAll={true}>
|
||||||
|
<TableRow >
|
||||||
|
<TableHeaderColumn >Host</TableHeaderColumn>
|
||||||
|
<TableHeaderColumn >Port</TableHeaderColumn>
|
||||||
|
<TableHeaderColumn >Type</TableHeaderColumn>
|
||||||
|
<TableHeaderColumn >Kind</TableHeaderColumn>
|
||||||
|
<TableHeaderColumn >Name</TableHeaderColumn>
|
||||||
|
<TableHeaderColumn >Version</TableHeaderColumn>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody
|
||||||
|
deselectOnClickaway={false}>
|
||||||
|
displayRowCheckbox={true}
|
||||||
|
>
|
||||||
|
{this.state.targets.map((row: any, index: number) => (
|
||||||
|
<TableRow key={index}
|
||||||
|
selected={this.isSelected(index)}
|
||||||
|
>
|
||||||
|
<TableRowColumn>{Utils.int2ip(row.ip)}</TableRowColumn>
|
||||||
|
<TableRowColumn>{row.port}</TableRowColumn>
|
||||||
|
<TableRowColumn>{row.targetType}</TableRowColumn>
|
||||||
|
<TableRowColumn>{row.kinds}</TableRowColumn>
|
||||||
|
<TableRowColumn>{row.vendorName}</TableRowColumn>
|
||||||
|
<TableRowColumn>{row.version}</TableRowColumn>
|
||||||
|
</TableRow>
|
||||||
|
))};
|
||||||
|
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
|
||||||
RES.map(function (item: any, index: number) {
|
<RaisedButton label="Next" primary={true} onClick={this.handleNext.bind(this)} style={{ margin: 20 }} />
|
||||||
|
|
||||||
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>
|
|
||||||
<RaisedButton label="Sign Up" primary={true} onClick={this.handleSignUp.bind(this)} />
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
{
|
{
|
||||||
"extends": "tslint:recommended",
|
|
||||||
"rules": {
|
"rules": {
|
||||||
"indent": [
|
"indent": [
|
||||||
true,
|
true,
|
||||||
|
@ -12,7 +11,7 @@
|
||||||
"only-arrow-functions": [
|
"only-arrow-functions": [
|
||||||
false, "allow-declarations", "allow-named-functions"
|
false, "allow-declarations", "allow-named-functions"
|
||||||
],
|
],
|
||||||
"no-console": false,
|
"no-console": [false],
|
||||||
"prefer-const": false,
|
"prefer-const": false,
|
||||||
"member-access": false,
|
"member-access": false,
|
||||||
"no-unused-expression": true,
|
"no-unused-expression": true,
|
||||||
|
|
Loading…
Reference in New Issue
Block a user