diff --git a/src/ts/Routes.tsx b/src/ts/Routes.tsx
index 70bfbb4..08d6d0a 100644
--- a/src/ts/Routes.tsx
+++ b/src/ts/Routes.tsx
@@ -9,6 +9,7 @@ import { PWChange } from './containers/test/PWChange';
import { ProbeDown } from './containers/test/ProbeDown';
import { DiscoveryDetails } from './containers/test/DiscoveryDetails'
import { Components } from './containers/test/Components';
+import { Sensors } from './containers/test/Sensors';
// import { Layout } from './containers/test/layout/Layout'
import { Tree } from './containers/test/commons/Tree';
@@ -54,6 +55,8 @@ export class Routes extends React.Component<any, any> {
<Route exact path='/test14' component={Components} />
+ <Route exact path='/test21' component={Sensors} />
+
</Switch>
</div>
diff --git a/src/ts/containers/test/DiscoveryDetails.tsx b/src/ts/containers/test/DiscoveryDetails.tsx
index a2f7fc9..90180d6 100644
--- a/src/ts/containers/test/DiscoveryDetails.tsx
+++ b/src/ts/containers/test/DiscoveryDetails.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Button, Modal, Checkbox } from 'semantic-ui-react';
+import { Button, Modal, Checkbox, Header, Container } from 'semantic-ui-react';
import { DiscoveryProbe } from './DiscoveryProbe';
import { DiscoveryTable } from './DiscoveryTable';
@@ -56,7 +56,7 @@ export class DiscoveryDetails extends React.Component<any, any> {
render() {
return (
- <div>
+ <Container fluid>
<div style={{ margin: '20px' }}>
<DiscoveryProbe probe={this.probeTemp}/>
</div>
@@ -75,7 +75,7 @@ export class DiscoveryDetails extends React.Component<any, any> {
</Modal.Actions>
</Modal>
- </div>
+ </Container>
);
}
diff --git a/src/ts/containers/test/DiscoveryProbe.tsx b/src/ts/containers/test/DiscoveryProbe.tsx
index 2431a21..c12d6bb 100644
--- a/src/ts/containers/test/DiscoveryProbe.tsx
+++ b/src/ts/containers/test/DiscoveryProbe.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Table, Label } from 'semantic-ui-react';
+import { Table, Label, Header, Container } from 'semantic-ui-react';
export class DiscoveryProbe extends React.Component<any, any> {
@@ -19,7 +19,8 @@ export class DiscoveryProbe extends React.Component<any, any> {
render() {
return (
- <div>Probe Details...
+ <Container fluid>
+ <Header as='h3' dividing> Probe Details</Header>
<Table celled={false}>
<Table.Body>
<Table.Row>
@@ -73,7 +74,7 @@ export class DiscoveryProbe extends React.Component<any, any> {
</Table.Body>
</Table>
- </div>
+ </Container>
)
}
diff --git a/src/ts/containers/test/DiscoveryTable.tsx b/src/ts/containers/test/DiscoveryTable.tsx
index 946fa85..67d1228 100644
--- a/src/ts/containers/test/DiscoveryTable.tsx
+++ b/src/ts/containers/test/DiscoveryTable.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import {Table, Button, Input, InputProps, ButtonProps, Dropdown } from 'semantic-ui-react';
+import {Table, Button, Input, InputProps, ButtonProps, Dropdown, Container } from 'semantic-ui-react';
export class DiscoveryTable extends React.Component<any, any> {
@@ -87,7 +87,7 @@ export class DiscoveryTable extends React.Component<any, any> {
render() {
return (
- <div>
+ <Container fluid>
<Table celled>
<Table.Body>
<Table.Row>
@@ -122,7 +122,7 @@ export class DiscoveryTable extends React.Component<any, any> {
</Table.Body>
</Table>
<Button floated='right' onClick={this.discoveryStartHandler.bind(this)}> Start </Button>
- </div>
+ </Container>
);
}
}
\ No newline at end of file
diff --git a/src/ts/containers/test/NoauthProbes.tsx b/src/ts/containers/test/NoauthProbes.tsx
index 2ebb02b..24cd66c 100644
--- a/src/ts/containers/test/NoauthProbes.tsx
+++ b/src/ts/containers/test/NoauthProbes.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Table, Checkbox, Button } from 'semantic-ui-react';
+import { Table, Checkbox, Button, Header, Container } from 'semantic-ui-react';
export class NoauthProbes extends React.Component<any, any> {
@@ -92,7 +92,8 @@ export class NoauthProbes extends React.Component<any, any> {
render() {
return (
- <div>
+ <Container fluid>
+ <Header as='h3' dividing>Noauth Probes</Header>
<Table celled selectable striped>
<Table.Header>
<Table.Row>
@@ -121,18 +122,11 @@ export class NoauthProbes extends React.Component<any, any> {
</Table.Row>
))}
</Table.Body>
-
- <Table.Footer fullWidth>
- <Table.Row>
- <Table.HeaderCell />
- <Table.HeaderCell colSpan='6'>
- <Button primary floated={'right'} onClick={this.handleAccept.bind(this)}>Accept</Button>
- <Button floated={'right'} onClick={this.handleDeny.bind(this)}>Deny</Button>
- </Table.HeaderCell>
- </Table.Row>
- </Table.Footer>
</Table>
- </div>
+
+ <Button primary floated={'right'} onClick={this.handleAccept.bind(this)}>Accept</Button>
+ <Button floated={'right'} onClick={this.handleDeny.bind(this)}>Deny</Button>
+ </Container>
);
}
}
diff --git a/src/ts/containers/test/PWChange.tsx b/src/ts/containers/test/PWChange.tsx
index 8bb9c81..d78febc 100644
--- a/src/ts/containers/test/PWChange.tsx
+++ b/src/ts/containers/test/PWChange.tsx
@@ -1,7 +1,7 @@
import *as React from 'react'
import {
- Icon, Label, Input, InputOnChangeData,
- Select, Button
+ Input, InputOnChangeData,
+ Select, Button, Grid, Form, Container
} from 'semantic-ui-react'
@@ -34,24 +34,32 @@ export class PWChange extends React.Component<any, any> {
return (
- <div>
-
-
- <Input label='Password' placeholder='Password' type='password' onChange={
- (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ pass: data.value });
- }} />
- <br />
- <Input label='Password Confirm' placeholder='Password Confirm' type='password' onChange={
- (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ passCon: data.value });
- }} />
- <br />
-
-
- <Button onClick={this.onSubmit}> Submit </Button>
- <Button> Cancel </Button>
- </div>
+ <Container fluid>
+ <Grid>
+ <Grid.Row>
+ <Grid.Column mobile={16} tablet={5} computer={5}>
+ </Grid.Column>
+ <Grid.Column mobile={16} tablet={6} computer={6}>
+ <Form>
+ <Form.Input placeholder='Password' type='password' onChange={
+ (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+ this.setState({ pass: data.value });
+ }} />
+ <Form.Input placeholder='Password Confirm' type='password' onChange={
+ (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+ this.setState({ passCon: data.value });
+ }} />
+ <Form.Group>
+ <Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}> Submit </Button>
+ <Button fluid style={{margin:'7'}}> Cancel </Button>
+ </Form.Group>
+ </Form>
+ </Grid.Column>
+ <Grid.Column mobile={16} tablet={4} computer={5}>
+ </Grid.Column>
+ </Grid.Row>
+ </Grid>
+ </Container>
);
}
diff --git a/src/ts/containers/test/ProbeDetails.tsx b/src/ts/containers/test/ProbeDetails.tsx
index ac88c68..fff8a5d 100644
--- a/src/ts/containers/test/ProbeDetails.tsx
+++ b/src/ts/containers/test/ProbeDetails.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Button, Table, Label, Segment, Header } from 'semantic-ui-react';
+import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
import { TargetTable } from './Targets';
import { DetailContainer } from './commons/DetailContainer';
@@ -56,62 +56,54 @@ export class ProbeBasicInfo extends React.Component<any, any> {
render() {
return (
- <Segment.Group>
- <Segment inverted color='grey'>
- <h4>Probe Details</h4>
- </Segment>
- <Segment>
- <Table celled={false} basic='very'>
- <Table.Body>
- <Table.Row>
- <Table.Cell>
- <Header size='small'>Domain</Header>
- </Table.Cell>
- <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
- </Table.Row>
- <Table.Row>
- <Table.Cell>
- <Header size='small'>Status</Header>
- </Table.Cell>
- <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
- </Table.Row>
- <Table.Row>
- <Table.Cell>
- <Header size='small'>Host IP</Header>
- </Table.Cell>
- <Table.Cell>????</Table.Cell>
- </Table.Row>
- <Table.Row>
- <Table.Cell>
- <Header size='small'>Host Name</Header>
- </Table.Cell>
- <Table.Cell>????</Table.Cell>
- </Table.Row>
- <Table.Row>
- <Table.Cell>
- <Header size='small'>Authorized at</Header>
- </Table.Cell>
- <Table.Cell>{this.props.probe.createDate}</Table.Cell>
- </Table.Row>
- <Table.Row>
- <Table.Cell>
- <Header size='small'>Description</Header>
- </Table.Cell>
- <Table.Cell>{this.props.probe.description}</Table.Cell>
- </Table.Row>
+ <Container fluid>
+ <Header as='h3' dividing>Probe Info</Header>
+ <Table celled={false}>
+ <Table.Body>
+ <Table.Row>
+ <Table.Cell collapsing>
+ <Header size='small'>Domain</Header>
+ </Table.Cell>
+ <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
+ </Table.Row>
+ <Table.Row>
+ <Table.Cell collapsing>
+ <Header size='small'>Status</Header>
+ </Table.Cell>
+ <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
+ </Table.Row>
+ <Table.Row>
+ <Table.Cell collapsing>
+ <Header size='small'>Host IP</Header>
+ </Table.Cell>
+ <Table.Cell>????</Table.Cell>
+ </Table.Row>
+ <Table.Row>
+ <Table.Cell collapsing>
+ <Header size='small'>Host Name</Header>
+ </Table.Cell>
+ <Table.Cell>????</Table.Cell>
+ </Table.Row>
+ <Table.Row>
+ <Table.Cell collapsing>
+ <Header size='small'>Authorized at</Header>
+ </Table.Cell>
+ <Table.Cell>{this.props.probe.createDate}</Table.Cell>
+ </Table.Row>
+ <Table.Row>
+ <Table.Cell collapsing>
+ <Header size='small'>Description</Header>
+ </Table.Cell>
+ <Table.Cell>{this.props.probe.description}</Table.Cell>
+ </Table.Row>
+ </Table.Body>
+ </Table>
- <Table.Row>
- <Table.Cell colSpan='4'>
- <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack.bind(this)} />
- <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
- {this.showStartStopBtn()}
+ <Button content='List' icon='list' labelPosition='left' onClick={this.handleBack.bind(this)} />
+ <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
+ {this.showStartStopBtn()}
- </Table.Cell>
- </Table.Row>
- </Table.Body>
- </Table>
- </Segment>
- </Segment.Group>
+ </Container>
);
}
}
\ No newline at end of file
diff --git a/src/ts/containers/test/ProbeDown.tsx b/src/ts/containers/test/ProbeDown.tsx
index 5019a9f..a79eeda 100644
--- a/src/ts/containers/test/ProbeDown.tsx
+++ b/src/ts/containers/test/ProbeDown.tsx
@@ -1,6 +1,6 @@
import *as React from 'react'
import {
- Grid, Menu, Segment, MenuItemProps
+ Grid, Menu, Segment, MenuItemProps, Header, Container
} from 'semantic-ui-react'
@@ -31,29 +31,30 @@ handleItemClick = (event: React.SyntheticEvent<HTMLAnchorElement>, data: MenuIte
const { activeItem } = this.state
return (
- <div>
- <Grid>
- <Grid.Column width={4}>
- <Menu fluid vertical tabular>
- {osNames.map((os: string) => {
- return (
- <Menu.Item name={os} active={activeItem === os} onClick={this.handleItemClick} />
- )
- })}
+ <Container fluid>
+ <Header as='h3' dividing>Probe Download</Header>
+ <Grid>
+ <Grid.Column width={4}>
+ <Menu fluid vertical tabular>
+ {osNames.map((os: string) => {
+ return (
+ <Menu.Item name={os} active={activeItem === os} onClick={this.handleItemClick} />
+ )
+ })}
-
- </Menu>
- </Grid.Column>
-
+
+ </Menu>
+ </Grid.Column>
+
- <Grid.Column stretched width={12}>
- <Segment>
- {this.state.activeItem} Download Page
- </Segment>
- </Grid.Column>
- </Grid>
- </div>
+ <Grid.Column stretched width={12}>
+ <Segment vertical>
+ {this.state.activeItem} Download Page
+ </Segment>
+ </Grid.Column>
+ </Grid>
+ </Container>
);
}
diff --git a/src/ts/containers/test/Probes.tsx b/src/ts/containers/test/Probes.tsx
index ac3b12b..976176b 100644
--- a/src/ts/containers/test/Probes.tsx
+++ b/src/ts/containers/test/Probes.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Table } from 'semantic-ui-react';
+import { Table, Header, Container } from 'semantic-ui-react';
import { ProbeDetails } from './ProbeDetails';
@@ -84,29 +84,32 @@ export class Probes extends React.Component<any, any> {
}
return (
- <Table selectable striped>
- <Table.Header>
- <Table.Row>
- <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
- <Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
- <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
- <Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
- <Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
- </Table.Row>
- </Table.Header>
-
- <Table.Body>
- {this.data.map((probe: any, index: number) => (
- <Table.Row key={index} onClick={this.handleSelect.bind(this, probe)}>
- <Table.Cell >todo. {probe.name}</Table.Cell>
- <Table.Cell>todo. {probe.cidr}</Table.Cell>
- <Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)} textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
- <Table.Cell textAlign={'center'} >todo. {probe.targetCnt}</Table.Cell>
- <Table.Cell textAlign={'center'} >todo. {probe.sensorCnt}</Table.Cell>
+ <Container fluid>
+ <Header as='h3' dividing>Probe</Header>
+ <Table selectable striped>
+ <Table.Header>
+ <Table.Row>
+ <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
+ <Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
+ <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
+ <Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
+ <Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
</Table.Row>
- ))}
- </Table.Body>
- </Table>
+ </Table.Header>
+
+ <Table.Body>
+ {this.data.map((probe: any, index: number) => (
+ <Table.Row key={index} onClick={this.handleSelect.bind(this, probe)}>
+ <Table.Cell >todo. {probe.name}</Table.Cell>
+ <Table.Cell>todo. {probe.cidr}</Table.Cell>
+ <Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)} textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
+ <Table.Cell textAlign={'center'} >todo. {probe.targetCnt}</Table.Cell>
+ <Table.Cell textAlign={'center'} >todo. {probe.sensorCnt}</Table.Cell>
+ </Table.Row>
+ ))}
+ </Table.Body>
+ </Table>
+ </Container>
);
}
}
diff --git a/src/ts/containers/test/SensorConfiguration.tsx b/src/ts/containers/test/SensorConfiguration.tsx
index ecbbdb1..f1551d4 100644
--- a/src/ts/containers/test/SensorConfiguration.tsx
+++ b/src/ts/containers/test/SensorConfiguration.tsx
@@ -93,8 +93,8 @@ export class ConfigStepper extends React.Component<any, any> {
render() {
return (
- <div>
- <Step.Group>
+ <Container fluid>
+ <Step.Group fluid>
<Step active={this.handleActive(1)} completed={this.handleCompleted(1)}>
<Icon name='settings' />
<Step.Content title='Step 1' description='골라골라 크롤러를 골라' />
@@ -118,7 +118,7 @@ export class ConfigStepper extends React.Component<any, any> {
<Button.Or />
<Button content='Next' icon='right arrow' labelPosition='right' positive onClick={this.handleNext.bind(this)} disabled={this.checkNextDisabled()} />
</Button.Group>
- </div>
+ </Container>
);
}
}
@@ -197,26 +197,28 @@ export class CrawlerSelector extends React.Component<any, any> {
render() {
return (
- <div>
- <Grid columns={1}>
- <Grid.Column>
- <Segment raised>
- <Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader>
- <Label color='red' ribbon>INFO</Label>
- <span>Choose a Crawler type.</span>
- <br />
- <br />
- <Dropdown openOnFocus
- placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
+ <Container fluid>
+ <Segment raised>
+ <Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader>
+ <Icon name='checkmark' /> Choose a Crawler type.
+ <br />
+ <br />
+ <Grid>
+ <Grid.Row>
+ <Grid.Column width='4'>
+ <Dropdown openOnFocus
+ placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
- <br />
- <br />
- <CrawlerAuthInputs crawler={this.state.selected} />
- </Segment>
- </Grid.Column>
- </Grid>
-
- </div>
+ <br />
+ <br />
+ </Grid.Column>
+ <Grid.Column>
+ <CrawlerAuthInputs crawler={this.state.selected} />
+ </Grid.Column>
+ </Grid.Row>
+ </Grid>
+ </Segment>
+ </Container>
);
}
}
diff --git a/src/ts/containers/test/SensorDetails.tsx b/src/ts/containers/test/SensorDetails.tsx
index caab5b5..dd0c101 100644
--- a/src/ts/containers/test/SensorDetails.tsx
+++ b/src/ts/containers/test/SensorDetails.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Button, Table, Label, Segment, Header } from 'semantic-ui-react';
+import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
import { DetailContainer } from './commons/DetailContainer';
import { SensorItems } from './SensorItems';
@@ -57,62 +57,54 @@ export class SensorBasicInfo extends React.Component<any, any> {
render() {
return (
- <Segment.Group>
- <Segment inverted color='grey'>
- <h4>Probe Details</h4>
- </Segment>
- <Segment>
- <Table celled={false} basic='very'>
- <Table.Body>
- <Table.Row>
- <Table.Cell>
- <Header size='small'>Domain</Header>
- </Table.Cell>
- <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
- </Table.Row>
- <Table.Row>
- <Table.Cell>
- <Header size='small'>Status</Header>
- </Table.Cell>
- <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
- </Table.Row>
- <Table.Row>
- <Table.Cell>
- <Header size='small'>Host IP</Header>
- </Table.Cell>
- <Table.Cell>????</Table.Cell>
- </Table.Row>
- <Table.Row>
- <Table.Cell>
- <Header size='small'>Host Name</Header>
- </Table.Cell>
- <Table.Cell>????</Table.Cell>
- </Table.Row>
- <Table.Row>
- <Table.Cell>
- <Header size='small'>Authorized at</Header>
- </Table.Cell>
- <Table.Cell>{this.props.probe.createDate}</Table.Cell>
- </Table.Row>
- <Table.Row>
- <Table.Cell>
- <Header size='small'>Description</Header>
- </Table.Cell>
- <Table.Cell>{this.props.probe.description}</Table.Cell>
- </Table.Row>
+ <Container fluid>
+ <Header as='h3' dividing>Sensor Details</Header>
+ <Table celled={false}>
+ <Table.Body>
+ <Table.Row>
+ <Table.Cell>
+ <Header size='small'>Domain</Header>
+ </Table.Cell>
+ <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
+ </Table.Row>
+ <Table.Row>
+ <Table.Cell>
+ <Header size='small'>Status</Header>
+ </Table.Cell>
+ <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
+ </Table.Row>
+ <Table.Row>
+ <Table.Cell>
+ <Header size='small'>Host IP</Header>
+ </Table.Cell>
+ <Table.Cell>????</Table.Cell>
+ </Table.Row>
+ <Table.Row>
+ <Table.Cell>
+ <Header size='small'>Host Name</Header>
+ </Table.Cell>
+ <Table.Cell>????</Table.Cell>
+ </Table.Row>
+ <Table.Row>
+ <Table.Cell>
+ <Header size='small'>Authorized at</Header>
+ </Table.Cell>
+ <Table.Cell>{this.props.probe.createDate}</Table.Cell>
+ </Table.Row>
+ <Table.Row>
+ <Table.Cell>
+ <Header size='small'>Description</Header>
+ </Table.Cell>
+ <Table.Cell>{this.props.probe.description}</Table.Cell>
+ </Table.Row>
+ </Table.Body>
+ </Table>
- <Table.Row>
- <Table.Cell colSpan='4'>
- <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack.bind(this)} />
- <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
- {this.showStartStopBtn()}
+ <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack.bind(this)} />
+ <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
+ {this.showStartStopBtn()}
- </Table.Cell>
- </Table.Row>
- </Table.Body>
- </Table>
- </Segment>
- </Segment.Group>
+ </Container>
);
}
}
\ No newline at end of file
diff --git a/src/ts/containers/test/SensorItems.tsx b/src/ts/containers/test/SensorItems.tsx
index 42ebd0d..20f67a8 100644
--- a/src/ts/containers/test/SensorItems.tsx
+++ b/src/ts/containers/test/SensorItems.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Table, Button } from 'semantic-ui-react';
+import { Table, Button, Header, Container } from 'semantic-ui-react';
export class SensorItems extends React.Component<any, any> {
@@ -15,9 +15,10 @@ export class SensorItems extends React.Component<any, any> {
render() {
return (
- <div>
+ <Container fluid>
+ <Header as='h3' dividing>Sensor Item</Header>
Sensor Item List
- </div>
+ </Container>
);
}
}
diff --git a/src/ts/containers/test/Sensors.tsx b/src/ts/containers/test/Sensors.tsx
index 6400139..7fc240b 100644
--- a/src/ts/containers/test/Sensors.tsx
+++ b/src/ts/containers/test/Sensors.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Table, Button } from 'semantic-ui-react';
+import { Table, Button, Header, Container } from 'semantic-ui-react';
import { SensorDetails } from './SensorDetails';
export class Sensors extends React.Component<any, any> {
@@ -98,7 +98,8 @@ export class Sensors extends React.Component<any, any> {
return <SensorDetails sensor={this.state.selected} />;
}
return (
- <div>
+ <Container fluid>
+ <Header as='h3' dividing>Sensors</Header>
<Table celled selectable striped>
<Table.Header>
<Table.Row>
@@ -124,7 +125,7 @@ export class Sensors extends React.Component<any, any> {
</Table.Body>
</Table>
<Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddSensor.bind(this)} />
- </div>
+ </Container>
);
}
}
diff --git a/src/ts/containers/test/SignIn.tsx b/src/ts/containers/test/SignIn.tsx
index 1644080..b56b1b5 100644
--- a/src/ts/containers/test/SignIn.tsx
+++ b/src/ts/containers/test/SignIn.tsx
@@ -1,7 +1,7 @@
import *as React from 'react'
import {
- Icon, Label, Input, InputOnChangeData,
- Select, Button, Header, Modal, Grid, Container, Segment
+ Input, InputOnChangeData,
+ Select, Button, Header, Modal, Grid, Form, Container
} from 'semantic-ui-react'
@@ -52,43 +52,29 @@ export class SignIn extends React.Component<any, any> {
return (
- <Container>
+ <Container fluid>
<Grid>
<Grid.Row>
<Grid.Column mobile={16} tablet={5} computer={5}>
</Grid.Column>
<Grid.Column mobile={16} tablet={6} computer={6}>
- <Grid columns='equal'>
- <Grid.Row style={{padding:'5'}}>
- <Grid.Column>
- <Input fluid placeholder='Email' onChange={
- (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ email: data.value });
- }} />
- </Grid.Column>
- </Grid.Row>
- <Grid.Row style={{padding:'5'}}>
- <Grid.Column>
- <Input fluid placeholder='Password' type='password' onChange={
- (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ pass: data.value });
- }} />
- </Grid.Column>
- </Grid.Row>
- <Grid.Row style={{padding:'5'}}>
- <Grid.Column textAlign='right'>
- <a style={{fontSize:10}} onClick={this.forgotPopupOpen}>Forgot Password</a>
- </Grid.Column>
- </Grid.Row>
- <Grid.Row style={{padding:'5'}}>
- <Grid.Column>
- <Button fluid primary onClick={this.onSignIn}> Sign In </Button>
- </Grid.Column>
- <Grid.Column>
- <Button fluid href='/#/test2'> Sign Up </Button>
- </Grid.Column>
- </Grid.Row>
- </Grid>
+ <Form>
+ <Form.Input fluid placeholder='Email' onChange={
+ (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+ this.setState({ email: data.value });
+ }} />
+ <Form.Input fluid placeholder='Password' type='password' onChange={
+ (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+ this.setState({ pass: data.value });
+ }} />
+ <div style={{textAlign:'right'}}>
+ <a style={{fontSize:10}} onClick={this.forgotPopupOpen}>Forgot Password</a>
+ </div>
+ <Form.Group>
+ <Button fluid primary style={{margin:'7'}} onClick={this.onSignIn}> Sign In </Button>
+ <Button fluid style={{margin:'7'}} href='/#/test2'> Sign Up </Button>
+ </Form.Group>
+ </Form>
</Grid.Column>
<Grid.Column mobile={16} tablet={4} computer={5}>
</Grid.Column>
@@ -127,7 +113,6 @@ export class SignIn extends React.Component<any, any> {
<Button primary onClick={this.PopupClose}> Ok </Button>
</Modal.Actions>
</Modal>
- <br />
</Container>
);
}
diff --git a/src/ts/containers/test/SignUp.tsx b/src/ts/containers/test/SignUp.tsx
index 36685b9..6ee0601 100644
--- a/src/ts/containers/test/SignUp.tsx
+++ b/src/ts/containers/test/SignUp.tsx
@@ -1,7 +1,7 @@
import *as React from 'react'
import {
- Icon, Label, Input, InputOnChangeData,
- Select, Button, Dropdown, Grid, Container, Form
+ Input, InputOnChangeData,
+ Select, Button, Dropdown, Grid, Form, Container
} from 'semantic-ui-react'
@@ -47,111 +47,39 @@ export class SignUp extends React.Component<any, any> {
return (
- <Container>
- <Grid>
- <Grid.Row>
- <Grid.Column mobile={16} tablet={5} computer={5}>
- </Grid.Column>
- <Grid.Column mobile={16} tablet={6} computer={6}>
- <Grid>
- <Grid.Row style={{padding:'5'}}>
- <Grid.Column>
- <Input fluid value={this.state.email} placeholder='Email' onChange={
- (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ email: data.value });
- }} />
- </Grid.Column>
- </Grid.Row>
- <Grid.Row style={{padding:'5'}}>
- <Grid.Column>
- <Input fluid placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ name: data.value });
- }} />
- </Grid.Column>
- </Grid.Row>
- <Grid.Row style={{padding:'5'}}>
- <Grid.Column>
- <Input fluid placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ pass: data.value });
- }} />
- </Grid.Column>
- </Grid.Row>
- <Grid.Row style={{padding:'5'}}>
- <Grid.Column>
- <Input fluid placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ passCon: data.value });
- }} />
- </Grid.Column>
- </Grid.Row>
- <Grid.Row style={{padding:'5'}}>
- <Grid.Column>
- <Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ company: data.value });
- }} />
- </Grid.Column>
- </Grid.Row>
- <Grid.Row style={{padding:'5'}}>
- <Grid.Column>
- <Input fluid>
- <Select value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ country: data.value });
- }} />
- <Input placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ phone: data.value });
- }} />
- </Input>
- </Grid.Column>
- </Grid.Row>
- <Grid.Row style={{padding:'5'}}>
- <Grid.Column width='8'>
- <Button primary fluid onClick={this.onSubmit}> Sign Up </Button>
- </Grid.Column>
- <Grid.Column width='8'>
- <Button fluid> Cancel </Button>
- </Grid.Column>
- </Grid.Row>
- </Grid>
- </Grid.Column>
- <Grid.Column mobile={16} tablet={4} computer={5}>
- </Grid.Column>
- </Grid.Row>
- </Grid>
-
+ <Container fluid>
<Grid>
<Grid.Row>
<Grid.Column mobile={16} tablet={5} computer={5}>
</Grid.Column>
<Grid.Column mobile={16} tablet={6} computer={6}>
<Form>
- <Form.Input fluid value={this.state.email} placeholder='Email' onChange={
- (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ email: data.value });
- }} />
- <Form.Input fluid placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ name: data.value });
- }} />
- <Form.Input fluid placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ pass: data.value });
- }} />
- <Form.Input fluid placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ passCon: data.value });
- }} />
- <Form.Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ company: data.value });
- }} />
- <Form.Group>
- <Form.Select value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ country: data.value });
- }} />
- <Form.Input placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
- this.setState({ phone: data.value });
- }}
- />
- </Form.Group>
- <Form.Group>
- <Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}> Sign Up </Button>
- <Button fluid style={{margin:'7'}}> Cancel </Button>
- </Form.Group>
+ <Form.Input fluid value={this.state.email} placeholder='Email' onChange={
+ (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+ this.setState({ email: data.value });
+ }} />
+ <Form.Input fluid placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+ this.setState({ name: data.value });
+ }} />
+ <Form.Input fluid placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+ this.setState({ pass: data.value });
+ }} />
+ <Form.Input fluid placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+ this.setState({ passCon: data.value });
+ }} />
+ <Form.Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+ this.setState({ company: data.value });
+ }} />
+ <Form.Select fluid value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+ this.setState({ country: data.value });
+ }} />
+ <Form.Input fluid placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+ this.setState({ phone: data.value });
+ }} />
+ <Form.Group>
+ <Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}> Sign Up </Button>
+ <Button fluid style={{margin:'7'}}> Cancel </Button>
+ </Form.Group>
</Form>
</Grid.Column>
<Grid.Column mobile={16} tablet={4} computer={5}>
diff --git a/src/ts/containers/test/TargetDetails.tsx b/src/ts/containers/test/TargetDetails.tsx
index f72edf0..7135813 100644
--- a/src/ts/containers/test/TargetDetails.tsx
+++ b/src/ts/containers/test/TargetDetails.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Button, Table } from 'semantic-ui-react';
+import { Button, Table, Header, Container } from 'semantic-ui-react';
import { Sensors } from './Sensors';
import { DetailContainer } from './commons/DetailContainer';
@@ -48,12 +48,13 @@ export class TargetBasicInfo extends React.Component<any, any> {
render() {
return (
- <div>
- <Table celled={true}>
+ <Container fluid>
+ <Header as='h3' dividing>Target Info</Header>
+ <Table celled={false}>
<Table.Body>
<Table.Row>
<Table.Cell collapsing>
- Name
+ <Header size='small'>Name</Header>
</Table.Cell>
<Table.Cell>
???
@@ -62,7 +63,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
<Table.Row>
<Table.Cell collapsing>
- Type
+ <Header size='small'>Type</Header>
</Table.Cell>
<Table.Cell>
????
@@ -71,7 +72,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
<Table.Row>
<Table.Cell collapsing>
- Sensor count
+ <Header size='small'>Sensor count</Header>
</Table.Cell>
<Table.Cell>
???
@@ -80,7 +81,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
<Table.Row>
<Table.Cell collapsing>
- Created at
+ <Header size='small'>Created at</Header>
</Table.Cell>
<Table.Cell>
???
@@ -91,7 +92,7 @@ export class TargetBasicInfo extends React.Component<any, any> {
</Table>
<Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
- </div>
+ </Container>
);
}
}
\ No newline at end of file
diff --git a/src/ts/containers/test/Targets.tsx b/src/ts/containers/test/Targets.tsx
index 2150c4f..d23f66d 100644
--- a/src/ts/containers/test/Targets.tsx
+++ b/src/ts/containers/test/Targets.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Table, Grid, Segment, Button, Container, Modal, Input } from 'semantic-ui-react';
+import { Table, Button, Modal, Input, Header, Container } from 'semantic-ui-react';
import { TargetDetails } from './TargetDetails';
export class Targets extends React.Component<any, any> {
@@ -28,9 +28,10 @@ export class Targets extends React.Component<any, any> {
];
return (
- <Container>
+ <Container fluid>
{/*search bar */}
<TargetTable />
+ <br />
<Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<TargetDetails target={this.state.selected} />
@@ -129,7 +130,8 @@ export class TargetTable extends React.Component<any, any> {
render() {
return (
- <div>
+ <Container fluid>
+ <Header as='h3' dividing>Targets</Header>
<Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} />
<Table celled selectable striped>
<Table.Header>
@@ -152,7 +154,7 @@ export class TargetTable extends React.Component<any, any> {
))}
</Table.Body>
</Table>
- </div>
+ </Container>
);
}
}
diff --git a/src/ts/containers/test/TopBar.tsx b/src/ts/containers/test/TopBar.tsx
index fcf947a..5fb16ed 100644
--- a/src/ts/containers/test/TopBar.tsx
+++ b/src/ts/containers/test/TopBar.tsx
@@ -64,8 +64,13 @@ export class TopBar extends React.Component<any, any> {
<Menu.Item href='/' > Home </Menu.Item>
<Dropdown text='Monitoring' pointing className='link item'>
<Dropdown.Menu>
- <Dropdown.Item href='#/test14'> Probe </Dropdown.Item>
- <Dropdown.Item>Sensors</Dropdown.Item>
+ <Dropdown.Header icon='angle right' content='Probe'/>
+ <Dropdown.Divider />
+ <Dropdown.Item href='#/test14'> Probe List </Dropdown.Item>
+ <Dropdown.Item href='#/test14'> Noauth Probes </Dropdown.Item>
+ <Dropdown.Item href='#/test14'> Download </Dropdown.Item>
+ <Dropdown.Divider />
+ <Dropdown.Item href='#/test21'>Sensors</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
diff --git a/src/ts/containers/test/layout/Footer.tsx b/src/ts/containers/test/layout/Footer.tsx
index 467f9a1..e853dc0 100644
--- a/src/ts/containers/test/layout/Footer.tsx
+++ b/src/ts/containers/test/layout/Footer.tsx
@@ -12,6 +12,7 @@ export class Footer extends React.Component<any, any> {
render() {
return (
<Segment vertical textAlign='center' size='tiny'>
+ <br />
Copyright LOAFLE.
</Segment>
);
diff --git a/src/ts/containers/test/layout/Layout.tsx b/src/ts/containers/test/layout/Layout.tsx
index b07d7b4..f965e1e 100644
--- a/src/ts/containers/test/layout/Layout.tsx
+++ b/src/ts/containers/test/layout/Layout.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb } from 'semantic-ui-react';
+import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb, Grid } from 'semantic-ui-react';
import { Header } from './Header';
import { Footer } from './Footer';
@@ -24,7 +24,24 @@ export class Layout extends React.Component<any, any> {
render() {
return (
- <div>
+ <Container fluid>
+ <Grid>
+ <Grid.Row>
+ <Grid.Column>
+ Left menu
+ </Grid.Column>
+ <Grid.Column>
+ <Grid.Row>
+ <Grid.Column>
+ Logo
+ </Grid.Column>
+ <Grid.Column>
+ Page Content
+ </Grid.Column>
+ </Grid.Row>
+ </Grid.Column>
+ </Grid.Row>
+ </Grid>
<Header onSidebar={this.onSidebar.bind(this)}/>
<Sidebar.Pushable as={Segment} vertical >
<Sidebar
@@ -38,27 +55,23 @@ export class Layout extends React.Component<any, any> {
inverted
>
<Menu.Item name='home'>
- <Icon name='home' />
- Home
+ Notification 1
</Menu.Item>
<Menu.Item name='gamepad'>
- <Icon name='gamepad' />
- Games
- </Menu.Item>
- <Menu.Item name='camera'>
- <Icon name='camera' />
- Channels
+ Notification 2
</Menu.Item>
</Sidebar>
<Sidebar.Pusher >
- <Breadcrumb style={{ padding: '5px 20px 0px' }} size='mini'>
- <Breadcrumb.Section link>Home</Breadcrumb.Section>
- <Breadcrumb.Divider icon='right angle' />
- <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
- <Breadcrumb.Divider icon='right angle' />
- <Breadcrumb.Section active>Probe</Breadcrumb.Section>
- </Breadcrumb>
+ <Container fluid textAlign='right' style={{ padding: '5px 20px 0px' }}>
+ <Breadcrumb size='mini'>
+ <Breadcrumb.Section link>Home</Breadcrumb.Section>
+ <Breadcrumb.Divider icon='right angle' />
+ <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
+ <Breadcrumb.Divider icon='right angle' />
+ <Breadcrumb.Section active>Probe</Breadcrumb.Section>
+ </Breadcrumb>
+ </Container>
<Segment vertical>
<Container>
@@ -73,7 +86,7 @@ export class Layout extends React.Component<any, any> {
</Sidebar.Pushable>
- </div>
+ </Container>
);
}
}