This commit is contained in:
snoop 2017-07-11 17:06:19 +09:00
commit 3cb82c50fd
3 changed files with 70 additions and 18 deletions

View File

@ -1,32 +1,53 @@
import * as React from 'react';
import { Button } from 'semantic-ui-react';
import { DiscoveryProbe } from './DiscoveryProbe';
import { DiscoveryTable } from './DiscoveryTable';
export class DiscoveryDetails extends React.Component<any, any> {
private probeTemp: any;
constructor(props: any, context: any) {
super(props, context);
this.state = {};
}
discoveryStartHandler = (event: any, data: object) => {
console.log(event);
};
componentWillMount() {
this.probeTemp =
{
"id": "11",
"metaProbeStatus": {
"name": "STARTED"
},
"domain": {
"name": "overFlow's domain111"
},
"host": {
"ip": "192.168.1.103",
"mac": "44:8a:5b:44:8c:e8",
"os": "Ubuntu 17.04"
},
"createAt": "2017-07-12",
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
"description": "description1111111111",
"lastPollingAt": "2017-07-12 14:20",
"nextPollingAt": "2017-07-12 14:30"
};
}
handleProbeChange(obj: any) {
console.log(obj)
}
render() {
return (
<div>
<div style={{ margin: '20px' }}>
<DiscoveryProbe />
<DiscoveryProbe probe={this.probeTemp}/>
</div>
<div style={{ margin: '20px' }}>
<DiscoveryTable />
<DiscoveryTable onProbeChange={this.handleProbeChange} />
</div>
<div style={{ margin: '20px' }}>
<Button floated='right' onClick={this.discoveryStartHandler}> Start </Button>
</div>
</div>
);

View File

@ -10,7 +10,11 @@ export class DiscoveryProbe extends React.Component<any, any> {
}
componentWillMount() {
console.log(this.props.probe);
}
handle() {
this.props.onProbeChange();
}
render() {
@ -22,19 +26,19 @@ export class DiscoveryProbe extends React.Component<any, any> {
<Table.Cell collapsing>
<Label ribbon>Domain</Label>
</Table.Cell>
<Table.Cell>overFlow's domain111</Table.Cell>
<Table.Cell>{this.props.probe.domain.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Label ribbon>Status</Label>
</Table.Cell>
<Table.Cell>STARTED</Table.Cell>
<Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Label ribbon >Host IP</Label>
</Table.Cell>
<Table.Cell>192.168.1.103</Table.Cell>
<Table.Cell>{this.props.probe.host.ip}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
@ -46,13 +50,25 @@ export class DiscoveryProbe extends React.Component<any, any> {
<Table.Cell collapsing>
<Label ribbon>Authorized at</Label>
</Table.Cell>
<Table.Cell>2017-07-13</Table.Cell>
<Table.Cell>{this.props.probe.createAt}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Label ribbon>Description</Label>
</Table.Cell>
<Table.Cell>description1111111111</Table.Cell>
<Table.Cell>{this.props.probe.description}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Label ribbon>Last polling at</Label>
</Table.Cell>
<Table.Cell>{this.props.probe.lastPollingAt}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell collapsing>
<Label ribbon>Next polling at</Label>
</Table.Cell>
<Table.Cell>{this.props.probe.nextPollingAt}</Table.Cell>
</Table.Row>
</Table.Body>
</Table>

View File

@ -1,11 +1,25 @@
import * as React from 'react';
import { Table, Label, Input } from 'semantic-ui-react';
import { Table, Button, Input } from 'semantic-ui-react';
export class DiscoveryTable extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {};
this.state = {
endIP: null,
};
}
handleEndIpInput(event: React.SyntheticEvent<HTMLAnchorElement>, data: any) {
console.log(data.value);
this.setState({
endIP: data.value,
});
}
discoveryStartHandler(event: React.SyntheticEvent<HTMLAnchorElement>, data: any) {
this.props.onProbeChange(data);
}
render() {
@ -19,7 +33,7 @@ export class DiscoveryTable extends React.Component<any, any> {
</Table.Row>
<Table.Row>
<Table.Cell>End IP</Table.Cell>
<Table.Cell><Input size='large' placeholder='End IP' /></Table.Cell>
<Table.Cell><Input size='large' placeholder='End IP' onChange={this.handleEndIpInput.bind(this)} /></Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Exclude IP</Table.Cell>
@ -35,6 +49,7 @@ export class DiscoveryTable extends React.Component<any, any> {
</Table.Row>
</Table.Body>
</Table>
<Button floated='right' onClick={this.discoveryStartHandler.bind(this)}> Start </Button>
</div>
);
}