overflow_backup_2018_0455/test_web_router
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Design

Browse Source
This commit is contained in:
sunny 2017-07-14 18:58:35 +09:00
parent 53fd767097
commit c1a81789b2
3 changed files with 30 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/ts/containers/test/DiscoveryDetails.tsx
View File

@ -57,12 +57,10 @@ export class DiscoveryDetails extends React.Component<any, any> {
render() { render() {
return ( return (
<Container fluid> <Container fluid>
<div style={{ margin: '20px' }}> <Header as='h3' dividing> Discovery Details</Header>
<DiscoveryProbe probe={this.probeTemp}/> <DiscoveryProbe probe={this.probeTemp}/>
</div> <br />
<div style={{ margin: '20px' }}>
<DiscoveryTable onProbeChange={this.handleProbeChange.bind(this)} /> <DiscoveryTable onProbeChange={this.handleProbeChange.bind(this)} />
</div>
<Modal size='small' open={this.state.startPopup} onClose={this.handlePopupClose}> <Modal size='small' open={this.state.startPopup} onClose={this.handlePopupClose}>
<Modal.Header>Change your password Enter email address.</Modal.Header> <Modal.Header>Change your password Enter email address.</Modal.Header>

24
src/ts/containers/test/DiscoveryProbe.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { Table, Label, Header, Container } from 'semantic-ui-react'; import { Table, Label, Header, Container, Icon } from 'semantic-ui-react';
export class DiscoveryProbe extends React.Component<any, any> { export class DiscoveryProbe extends React.Component<any, any> {
@ -20,54 +20,54 @@ export class DiscoveryProbe extends React.Component<any, any> {
render() { render() {
return ( return (
<Container fluid> <Container fluid>
<Header as='h3' dividing> Probe Details</Header> <Header as='h4' color='grey'> Probe</Header>
<Table celled={false}> <Table celled={false}>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>
<Table.Cell collapsing> <Table.Cell width={4} collapsing>
<Label ribbon>Domain</Label> <Header size='small'>Domain</Header>
</Table.Cell> </Table.Cell>
<Table.Cell>{this.props.probe.domain.name}</Table.Cell> <Table.Cell width={12}>{this.props.probe.domain.name}</Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell collapsing> <Table.Cell collapsing>
<Label ribbon>Status</Label> <Header size='small'>Status</Header>
</Table.Cell> </Table.Cell>
<Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell> <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell collapsing> <Table.Cell collapsing>
<Label ribbon >Host IP</Label> <Header size='small'>Host IP</Header>
</Table.Cell> </Table.Cell>
<Table.Cell>{this.props.probe.host.ip}</Table.Cell> <Table.Cell>{this.props.probe.host.ip}</Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell collapsing> <Table.Cell collapsing>
<Label ribbon >Host Name</Label> <Header size='small'>Host Name</Header>
</Table.Cell> </Table.Cell>
<Table.Cell>Geek`s Ubuntu</Table.Cell> <Table.Cell>Geek`s Ubuntu</Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell collapsing> <Table.Cell collapsing>
<Label ribbon>Authorized at</Label> <Header size='small'>Authorized at</Header>
</Table.Cell> </Table.Cell>
<Table.Cell>{this.props.probe.createAt}</Table.Cell> <Table.Cell>{this.props.probe.createAt}</Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell collapsing> <Table.Cell collapsing>
<Label ribbon>Description</Label> <Header size='small'>Description</Header>
</Table.Cell> </Table.Cell>
<Table.Cell>{this.props.probe.description}</Table.Cell> <Table.Cell>{this.props.probe.description}</Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell collapsing> <Table.Cell collapsing>
<Label ribbon>Last polling at</Label> <Header size='small'>Last polling at</Header>
</Table.Cell> </Table.Cell>
<Table.Cell>{this.props.probe.lastPollingAt}</Table.Cell> <Table.Cell>{this.props.probe.lastPollingAt}</Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell collapsing> <Table.Cell collapsing>
<Label ribbon>Next polling at</Label> <Header size='small'>Next polling at</Header>
</Table.Cell> </Table.Cell>
<Table.Cell>{this.props.probe.nextPollingAt}</Table.Cell> <Table.Cell>{this.props.probe.nextPollingAt}</Table.Cell>
</Table.Row> </Table.Row>

31
src/ts/containers/test/DiscoveryTable.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import {Table, Button, Input, InputProps, ButtonProps, Dropdown, Container } from 'semantic-ui-react'; import {Table, Button, Input, InputProps, ButtonProps, Dropdown, Container, Header } from 'semantic-ui-react';
export class DiscoveryTable extends React.Component<any, any> { export class DiscoveryTable extends React.Component<any, any> {
@ -88,40 +88,41 @@ export class DiscoveryTable extends React.Component<any, any> {
render() { render() {
return ( return (
<Container fluid> <Container fluid>
<Table celled> <Header as='h4' color='grey'> Discovery</Header>
<Table>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>
<Table.Cell width='2'>Zone CIDR</Table.Cell> <Table.Cell width={4}><Header size='small'>Zone CIDR</Header></Table.Cell>
<Table.Cell width='7'><Input fluid disabled size='large' placeholder='Start IP' defaultValue='192.168.1.0/24' /></Table.Cell> <Table.Cell width={12}><Input fluid disabled placeholder='Start IP' defaultValue='192.168.1.0/24' /></Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell>IP Range</Table.Cell> <Table.Cell><Header size='small'>IP Range</Header></Table.Cell>
<Table.Cell> <Table.Cell>
<Input tabIndex='1' size='large' placeholder='Start IP' onChange={this.handleInput.bind(this)} /> &nbsp;&nbsp; <Input tabIndex='1' placeholder='Start IP' onChange={this.handleInput.bind(this)} /> &nbsp;&nbsp;
<Input tabIndex='2' size='large' placeholder='End IP' onChange={this.handleInput.bind(this)} /> &nbsp;&nbsp; <Input tabIndex='2' placeholder='End IP' onChange={this.handleInput.bind(this)} /> &nbsp;&nbsp;
<Input tabIndex='3' size='large' placeholder='Exclude IP' onChange={this.handleInput.bind(this)} /> <Input tabIndex='3' placeholder='Exclude IP' onChange={this.handleInput.bind(this)} />
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell>Port Range</Table.Cell> <Table.Cell><Header size='small'>Port Range</Header></Table.Cell>
<Table.Cell> <Table.Cell>
<Input tabIndex='4' size='large' placeholder='Start Port' onChange={this.handleInput.bind(this)} /> &nbsp;&nbsp; <Input tabIndex='4' placeholder='Start Port' onChange={this.handleInput.bind(this)} /> &nbsp;&nbsp;
<Input tabIndex='5' size='large' placeholder='End Port' onChange={this.handleInput.bind(this)} /> <Input tabIndex='5' placeholder='End Port' onChange={this.handleInput.bind(this)} />
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell>Service</Table.Cell> <Table.Cell><Header size='small'>Service</Header></Table.Cell>
<Table.Cell> <Table.Cell>
<Dropdown placeholder='Service' fluid multiple selection options={this.serviceTemp} /> <Dropdown placeholder='Service' fluid multiple selection options={this.serviceTemp} />
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell>End Port</Table.Cell> <Table.Cell><Header size='small'>End Port</Header></Table.Cell>
<Table.Cell><Input tabIndex='6' size='large' placeholder='End Port' onChange={this.handleInput.bind(this)} /></Table.Cell> <Table.Cell><Input tabIndex='6' placeholder='End Port' onChange={this.handleInput.bind(this)} /></Table.Cell>
</Table.Row> </Table.Row>
</Table.Body> </Table.Body>
</Table> </Table>
<Button floated='right' onClick={this.discoveryStartHandler.bind(this)}> Start </Button> <Button floated='right' primary onClick={this.discoveryStartHandler.bind(this)}> Start </Button>
</Container> </Container>
); );
} }